A rather geeky/technical weblog, est. 2001, by Bramus
Mid-August the WICG published a (unofficial) specification for a Native Eye Dropper — a tool you can use to get the color from the pixel that’s underneath the cursor — on the web. Let’s take a look … Usage The proposal is pretty straightforward: This API enables authors to use a browser supplied eyedropper in …
Continue reading “Pick Colors from websites your entire screen with the JavaScript EyeDropper API”
I like this video from Vertiasium on Cosmic Rays and how they can trigger bit flipping in our computers, known as “Single Event Upsets”. Tiny particles from distant galaxies have caused plane accidents, election interference and game glitches. Solid buildup, good pacing, and well explained.
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 …