Skip to main content


418: I'm a teapot

ref: https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/418 , a contribution for https://http.framasoft.org/

#caturday #MastoArt #krita
A digital painting humoristic illustration of two cut cats: the main one is shaped as a sphere and a teacup's cover on his head. He is happy and his tail mimics the shape of the handle, and his paw mimics the spout. He has a convincing Teapot shape. 
The secondary cat looks at the first with confusion.
this is so beautiful ❤️ probably gonna use that for my error pages going forward!
I just posted an errata for that RFC, which is my first official contribution to the IETF lol
damned, maintenant on a besoin de sites web qui utilisent ce code d'erreur 🙂
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
ooh, my favorite day... 😺
@jan I have a Redbubble eshop with many illustration upload on it ( https://www.redbubble.com/people/davidrevoy/shop?artistUserName=davidrevoy&asc=u ) but I don't upload them all (to save time). If you want a specific artwork, feel free to ask and I'll upload the high resolution.

If you want to go DIY or self-printing: it's ok and I encourage it too: I upload sources here https://www.peppercarrot.com/en/files/framasoft.html and distribute them with full size (and layers) under a permissive Creative Commons license (CC-By).

Thanks 😀
you sure that's an teapot because it looks a lot like a catpot to me?
I was waiting for this one. 😊
@davidrevoy: 🎵​I'm a teapot, short and stoat ... 🎶​
@ssavitzky your favourite HTML return code, IIRC? ^^
do you mind if I use this image?
@sabrinaweb71
per the second link, it's CC-BY, so all you need to do is provide credit wherever you use it
@lukepfjo @sabrinaweb71 Iuploaded the full size, source and license here: https://www.peppercarrot.com/en/viewer/framasoft-src__2023-02-17_I-am-a-Teapot-418-Error_by-David-Revoy.html , thanks for reusing it 🙂
@sabrinaweb71

here's my website's responsive 404 page that I updated to use the image last night. optimally it would use an imageset instead of just a 1080p image, but I was lazy.

https://lukepj.com/404

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.
@lukepfjo

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

@sabrinaweb71
@sabrinaweb71

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.
@sabrinaweb71

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"
This entry was edited (1 year ago)
@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.
@sabrinaweb71

here's the site's repo for easier browsing

https://github.com/lukepfjo/luketimothyjones.github.io
@lukepfjo Thanks for the tips and the URL, I bookmarked and I'll have a look 👍

@sabrinaweb71
@duponin Oh no: this one is too cult and legendary 😊 I'll probably also never reach the full completion. :blobwhistle:
Thanks for the great artwork with the status codes. It is really lovely. Tech stuff can also be pretty.
Would be awesome to have one for 401 Unauthorized.