Pollen — Functional CSS for the future

Interesting: a CSS library that only provides you with CSS Custom Properties to use in your own CSS: Pollen is a library of CSS variables for rapid prototyping, consistent styling, and as a zero-runtime utility-first foundation for your own design systems. Heavily inspired by TailwindCSS. Pollen →

The World of CSS Transforms

Another excellent post by Josh W. Comeau, this time covering CSS Transforms. In this blog post, we’re diving deep into the transform property. I’ll show you some of the cool and unexpected things you can do with it! As per usual, the post is packed with interactive playgrounds for you to try things out. The …

Talking to the Competition and Markets Authority about Browser Choice on Apple’s iOS

I you want to get the summary about browser choice on iOS, Stuart Langridge has got you covered: Last week I sat down with the UK Competition and Markets Authority, the regulator, to talk about browser choice on Apple devices, and whether the claims that limiting choice is good for security and privacy actually hold …

Using Saliency in progressive JPEG XL images

At Google, they’ve worked out a new way to progressively enhance images: When delivering images over the web, it is now possible to organize the data in such a way that the most salient parts arrive first. Ideally you don’t even notice that some less salient parts have not yet arrived, because by the time …

htmlq – Command-line HTML Processor

Similar to how jq allows you to extract content from JSON files on the CLI, htmlq allows you extract content from HTML files. Like jq, but for HTML. Uses CSS selectors to extract bits of content from HTML files. You can pass in a local HTML file, but also pipe it to cURL requests. For …

Crafting Organic Patterns With Voronoi Tessellations

Great post by George Francis, in which he leverages the Voronoi tessellation to generate aesthetically pleasing random patterns. When composing generative patterns, placing objects on a canvas purely at random can feel chaotic, while aligning them to a traditional grid can feel rigid/predictable. While both chaos and exacting precision can both be beautiful qualities in …

Vector? Raster? Why Not Both!

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 …

Key data structures and their roles in RenderingNG

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 …

CSS Shape Path Editor extension for Chrome DevTools

The Firefox DevTools come with a built-in editor to manipulate CSS Shapes, as demonstrated by Miriam Suzanne in the video below. For the Chromium-based browsers (Google Chrome, Microsoft Edge, …) the DevTools currently sport no such thing. Thankfully there’s an extension that can provide it for us. Once installed you’ll get an extra Shapes panel …

imgproxy: fast and secure on-the-fly image processing

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 …