418: I'm a teapot
ref: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/418 , a contribution for https://http.framasoft.org/
The HTTP 418 I'm a teapot status response code indicates that the server refuses to brew coffee because it is, permanently, a teapot. A combined coffee/tea pot that is temporarily out of coffee should instead return 503. This error is a reference to Hyper Text Coffee Pot Control Protocol defined in April Fools' jokes in 1998 and 2014.
@davidrevoy Which reminds me that is in fact time to get an ESP32 and mod the teapot.
GET will return 418
TEMP will return temp
STATE will return cold, heating or hot
I love this.
I regularly use 418 in unit tests that have anything to do with HTTP responses.
I'll have to find a way to incorporate this image somewhere in my tests.
here's my website's responsive 404 page that I updated to use the project's 404 image last night. just replace the image src with whatever image and message you want. optimally it would use an imageset instead of just a 1080p image, but I was lazy.
MIT license, no credit needed to use/modify/copy it from my site if you don't want to. just make sure to respect David's CC-BY and add credit whenever you use it.
Oh nice for stretching the picture fullscreen and getting it responsive.
On https://http.framasoft.org/404/ , I can't see the same effect. What could be modified to make it responsive as well? (I ask in case it's a low hanging fruit to grab).
The HTML is generated here: https://framagit.org/framasoft/fun/http-status-david-revoy/-/blob/main/build_page.sh#L194
the trick is using a background image on the body element instead of an img/picture tag. just remember that text is vital for accessibility since you won't have an alt tag.
switching between image sizes can then be handled with @media rules matching screen width ranges.
here's how to get it to display nicely:
background-image: url('4xx.jpg');
background-position: center;
background-size: cover;
the last two tell the browser "center the image on the element it's attached to, then automatically resize it to cover the element while preserving its aspect ratio"
@davidrevoy @sabrinaweb71
ah, I see you're doing similar. it's late so I could only take a glance, but I'm guessing the issue is that you haven't set the dimensions of the element the background image is attached to.
height: 100vh
works in a pinch, but it gets a little funky with browser bars on mobile devices (thanks W3C, that standard was _very_ helpful 🙄). iirc if you look at the source on the page I posted there's a JS snippet I wrote to help.
here's the site's repo for easier browsing
@lukepfjo Thanks for the tips and the URL, I bookmarked and I'll have a look 👍
David Revoy
Benjamin
Þór Sigurðsson
mushroom 🍄
Aral Balkan
Xillian Salgado
John Livingston
Bart Groeneveld
jnbhlr
Dan Jones
phi1997
Zekovski 🧣
Riley S. Faelan
Stone Bear
Steve aka mdlbear
Sabrina Web 
📎
Sam
fahru
Pierre B.
Felixilef