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 …

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 …

RenderingNG — Ready for the next generation of web content

In the post on TablesNG, we looked at some of the features this under-the-hood rewrite for tables in Chromium provides us. But that’s only the tip of the iceberg, as the Chromium team have also been working on a whole new rendering engine architecture, named RenderingNG. In 2021, we will largely complete the process of …

This Web Site is a Tech Talk

Great talk by Zach Leatherman as recorded at Smashing Conf Austin 2020: The talk delves into Single Page Applications, Multi Page Applications, modern JavaScript Frameworks, and what I believe to be a better future for web development. /me nods along for the entirety of this talk. Powering his faux-live-coding slidedeck is Queue Code, a package …

“This website is a single HTML file”

This website is a single HTML file. It simply uses the #anchor suffix (from 1992) and the :target CSS selector to show and hide pages/content. This setup is databaseless, javascriptless, and buildshit-free, so you can edit your website with a text editor and upload it somewhere like a normal person. Brilliant! 🤩 John Doe → …

How We Improved SmashingMag Performance

Interesting real-world case-study over at Smashing Magazine: In this article, we’ll take a close look at some of the changes we made on this very site — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics. With some of the mistakes we’ve made, and some of …

Design Principles For The Web

The opening presentation from An Event Apart Online Together: Front-End Focus held online in August 2020 It’s a typical Jeremy Keith talk with many things mentioned, all converging to what he described before in his blog post Robustness and least power (and also covered in other talks). Definitely worth your time. Hit the link for …

Alt vs Figcaption

This message by Elaina Natario writing over at Thoughtbot cannot be repeated enough: While both the alt attribute and the figcaption element provide a way to describe images, the way we write for them is different. alt descriptions should be functional; figcaption descriptions should be editorial or illustrative. Examples of both functional and editorial descriptions …