Chrome is the new Safari. And so are Edge and Firefox.

Niels Leenheer also shares his views on the whole “all browsers on iOS are WebKit because Apple says it needs to be”-thing: Apple requires browsers to use WebKit. In fact, it must use the system-provided WebKit framework. Even though WebKit is open-source, you can’t modify or improve that version and use that in your app. …

Don’t attach tooltips to document.body

Very good performance deep dive on why you shouldn’t attach tooltips to document.body, but to a div that’s a direct child of the <body>. Tooltips in our app were taking >80ms. And during this time, the main thread was blocked, you couldn’t interact with anything. The main reason for the slowness of Tooltip was “Recalculate …

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 …

Next.js + Apollo + Server Side Rendering (SSR)

Interesting video from the CodePen podcast in which Shaw goes over this approach to SSR with Next and Apollo: A probably-better approach is to use the getDataFromTree method, which walks down the tree and executes the queries to fill up the ApolloClient cache. Create a shared ApolloClient instance Render the page using getDataFromTree() to fill …

Random Paint Effects with Houdini

Speaking of George Francis in the previous post: in the latest episode of HTTP 203 Jake talks Surma through recreating these Houdini-powered “Fleck Patterns” George created before. Generative Houdini Stuff! ✨Create always-unique, responsive, “fleck” patterns — all without leaving your CSS 🎨Pass in a seed value, up to 8 colors of your choice, and a …

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 …