Critical CSS? Not So Fast! — Considered thoughts from Harry here on the 'Critical CSS' pattern, and how it often falls short in real world usage, being an “expensive technique to implement, which seldom provides the benefits that many developers expect”. The takeaway is that this approach has benefits, but the implementation matters, and retrofitting is a no-go.

Harry Roberts

Infinite Scrolling: When to Use It, When to Avoid It — “Infinite scrolling minimizes interaction costs and increases user engagement, but it isn’t a good fit for every website. For some, pagination or a Load More button will be a better solution.” You would be forgiven for screaming "never!" at this question.. ;-)

Tim Neusesser (Nielsen Norman Group)

Simplify Front-End Performance Monitoring by Analyzing UX Data — Utilize critical performance data to understand how users experience your applications with Datadog Real User Monitoring. Analyze user errors in real-time and resolve front-end issues fast.

Datadog sponsor

Is it :modal? — This CSS pseudo-selector (available in Chrome 105, and already in Firefox and Safari) gives you a way to select elements that are “modal”, avoiding the need to manage classes in JavaScript.

Jhey Tompkins (Chrome Developers)

You Can Access A User's Camera with Just HTML — Did you know about the HTML capture attribute? It’s a neat way to add a nicer user experience if you know that your mobile users are going to be taking a picture or a video or a voice recording at the time of upload.

Austin Gil

How to Use localStorage: An Easy Guide — The API called Web Storage provides two basic mechanisms for storing information in the user’s browser: sessionStorage and localStorage.

Justin Graysen

Hacking CSS Animation State and Playback Time — You may have spotted this CSS-only Wolfenstein project a few weeks ago — well the author explains that in a nutshell, the project is “nothing but a carefully scripted long CSS animation”. This post looks at some of the how-to behind it, and the behavior of animation properties.

Lu Wang

So Your Designer Wants Stuff to Overlap… — Explores the solutions available to us now when implementing layered layouts, noting the new options in our ever-evolving CSS toolbox that are well-suited to handle specific ‘overlapping’ use-cases.

Hui Jing

HTML Markup Tips for Accessible Websites — Improving HTML markup can make websites more accessible for assisted technology and help developers with automated testing.

Loraine Lawson

Parents Counting Children in CSS — Using :has() to select parent elements that have a specific number of children.

Manuel Matuzović

Making a Morphing 3D Sphere with Three.js — A striking, modern effect for the Web. CodePen demo included.

Johnny Simpson

Beacon: Calculate the Environmental Impact of a Page — Enter a URL or use the Chrome or Firefox extension. Generates a breakdown of the website’s carbon footprint, similar to what you’d find in a typical web perf analysis.

aline

Loading Disco: An Alternative to the Loading Spinner — Neat demo, though more subtle and less disco-y than I was expecting (perhaps to your relief) :-) Joe has used a neat technique and he invites you to “copy, remix and improve to your heart’s content.” GitHub repo.

Joe Bell

Move Past Job Titles and Do More of What You Love

Polywork sponsor

JSON Hero: A Beautiful JSON Viewer — Paste in some JSON or enter a URL to a JSON file and this tool provides a clean and beautiful UI packed with features.

API Hero

Gradient Text Generator: Generate CSS for Gradient Backgrounds on Text — Two drawbacks to this: Requires use of vendor prefixes, and you need to add !important to the -webkit-background-clip property (apparently to override browser styles?). Seems to work in all modern browsers though.

Ejad Solutions

JSON Crack: A Simple Visualization Tool for JSON Data — The interface is nice and allows you to auto-format and display the visual representation of your JSON data in a few different ways.

Aykut Saraç

Create Tailwind: A CLI to Scaffold Tailwind-Ready Projects

Andrej Jurkin