A rather geeky/technical weblog, est. 2001, by Bramus
I have no idea how this works, but it’s amazing: See the Pen Morse Code Translator (HTML & CSS) by Lillian Kodi (@lillian-kodi)on CodePen. By Lillian Kodi who created this amazing HTML+CSS Calculator before. As only Chromium supports animating custom properties (Houdini FTW!) it won’t work in Safari nor Firefox. For reference, you can see …
Starting off with a 10.06MB SVG, Zach Leatherman tried several routes to reduce the weight of the hero image on the right side of the home page on JamStackConf.com. Eventually he settled on an approach where he layered a transparent WebP image on top of an SVG. Both layers were optimized individually, leaving only 78KB …
Digging deeper into Chromium’s RenderingNG architecture, this post explains its key data structures: Frame trees, The immutable fragment tree, Property trees, Display lists and paint chunks, and Compositor frames. Let’s dig into the key data structures that are inputs and outputs to the rendering pipeline. Would love to see this as a talk at a …
Continue reading “Key data structures and their roles in RenderingNG”
Continue reading “CSS Shape Path Editor extension for Chrome DevTools”
In the previous post on AVIF, the folks at Evil Martians, also talked about imgproxy — their standalone server for resizing and converting remote images. It looks like a pretty amazing product, allowing you to run your own imgix-like service, warranting this separate post about it. imgproxy can be used to provide a fast and …
Continue reading “imgproxy: fast and secure on-the-fly image processing”
If you’ve ever wondered how the AVIF Image Format works, this detailed post has got you covered. Strap in tight, as we will start with some history and go deep into how modern codecs work, so this is not a quick read. Decoding AVIF: Deep dive with cats and imgproxy →
CSS accent-color from the CSS UI specification is here to tint elements with one line of CSS, saving you from customization efforts by providing a way to bring your brand into elements. The CSS for the screenshot above is this: input { accent-color: hotpink; } 💡 You can also set this declaration onto form, as …
Continue reading “Tint User-Interface Controls with CSS accent-color”
With this tool you should be able to (better) grasp the difference between the term SameSite and SameOrigin The concepts of Origin and Site may be confusing, yet they are important because browsers make security decisions based on the fact whether two interacting contexts are in the same origin or in the same site. In …
I love these diorama-style miniatures using everyday items by Tatsuya Tanaka. He’s been creating them ever since April 2011. Broccoli and parsley may sometimes look like a forest of trees, and tree leaves floating on the surface of water may sometimes look like little boats. Everyday occurrences seen from a miniature perspective can bring us …
Jon Henshaw, writing for Coywolf: WebKit added support for the AVIF image format in April 2021, but it’s still unavailable in Safari. Its absence is because Apple chose an unconventional method for decoding images in its browser. Long story short: Safari does not decode images using WebKit — its underlying rendering engine — but delegates …
Continue reading “Why WebKit supports AVIF but Safari does not”