~frontendfocus | Bookmarks (231)

Data Viz Project: A Huge Collection of Data Visualizations — Mostly for inspiration or when you’re not sure what type of chart or graph to use. Currently includes more than 160 types of visualizations under 5 main ‘families’.

Cool People Link to Text Fragments — Did you know that support for linking to text fragments is now enabled across all major browsers? It means you don’t need elements to have an ID in order to navigate to it, instead you can go directly to a specific text string. Chris briefly shows us how.

The UX of Login Codes — Brad explores the often very real friction that’s found between offering a great user experience and great security, along with the challenges and compromises that come with delivering both. “If your product texts/emails login codes, the experience better be amazing.”

▶  What is the Shared Storage API? — Tara Agyemang from the Chrome team talks us through why we need shared storage, its privacy benefits, common use cases, and how we can use it.

'My Website Has Been Gaslighting You' — Quite the provocative headline! Dave has been changing his site ever so slightly every day, tweaking the CSS by setting a --hue variable and rotating the hue about 1deg each day to make it 360º around a color wheel over the year. A fun little experiment.

Avoid Multiple Page Redirects: How Redirects Impact Page Speed — Redirects add in steps that can delay page load, in-turn affecting user experience and Core Web Vitals results. As such, this post looks at how to optimize redirects to ensure faster browsing for visitors.

Don’t Wrap Figure in a Link — Highlights the inconsistent and problematic behaviours such as practice can inflict on voice control users.

Shapecatcher: Draw the Unicode Character You Want — Looking for a specific Unicode character, or just something close enough to represent what you want? This is pretty neat. Draw a shape in the box and you get the closest matches, ready to copy and paste.

Start Collecting Sign-In and Sign-Ups Within a Single Flow — Reduce new user friction and improve conversion with Clerk's combined sign-in-or-up onboarding flow.

TailwindCSS Snippets: A Small Collection of Unique Tailwind Animations — You can right-click each of the animations to copy the code or send the code to the official Tailwind playground, where you can live edit and customize as needed.

Drupal CMS 1.0 Released — The Drupal project is now 24 years old(!), and we now have two options for building with it — the original Core experience, or this new ready-to-use platform.

Six CSS Snippets Every Developer Should Know in 2025 — Adam shared a similar list last year and it proved incredibly popular — as such, he’s back again with another grab bag of hefty snippets which are “bigger, more powerful, and leverage progressive enhancement a bit more”.

eBook: Best Practices for Monitoring Mobile App Performance — Learn best practices for keeping your apps online and highly performant. This guide dives into key metrics for understanding mobile app health, and explains how to utilize error data to quickly find and patch bugs, minimizing customer impact.

❤️ Top Pens of 2024 on CodePen — Plenty of superb inspiration, demos, and neat tricks on show here. Whether that’s a neat parallax effect, a retro VHS look achieved with CSS, a rad web component that adds particles to your pointer, or this 3D image carousel. Lots of cool stuff to dig into.

'WordPress Is in Trouble' — The continuing WordPress drama leaves a huge question mark on the overall project and the potential wide-ranging implications for the open web. There’s been a lot of chatter recently about a possible fork, but that’s already hit a Mullenweg-shaped roadblock. This story is far from over (if you want to get up to speed on things, this is a handy,...

Write CSS Like a Pro — Kevin Powell shares how to create a responsive website from scratch using modern CSS features (such as nesting, utility classes, custom properties, and more). This detailed video course also dives into adding additional polish via animations, view transitions, and more.

Tight Mode: Why Browsers Produce Different Performance Results — This post offers a high-level look at what ‘Tight Mode’ is and how it influences the way the web works. If, like me, this was new to you, it’s a function which constrains what resources are loaded and in what order.

The Success of Interop 2024 — A positive look back at what this collaborative cross-browser effort achieved in the past year — in particular the 95% interoperability reached across the key focus areas by end of 2024. Nice to see the ongoing results of working together for the benefit of the web platform at large. Interop 2025 plans are underway.

Double-Keyed Caching: How Browser Cache Partitioning Changed the Web — In the name of privacy, browsers have now shifted from single-keyed to double-keyed caching (based around both the target URL and source origin). Here’s a good overview of the pros and cons introduced as result, with Addy explaining this complex change in detail, noting how it reduces cross-site tracking, impacts both performance and bandwidth, CDN...

A Couple of CSS Tricks for HTML dialog Elements — Namely blurring the dialog’s backdrop and disabling page scrolling when a dialog is open.

Running Animations Without Keyframes — Supported in most browsers, @starting-style provides a way to define starting values for transitions meaning no keyframes are needed.

Comic Mono — A legible monospace font (see image above) based on that very typeface we’ve all been trained to recognize since childhood. Available in a regular and bold weight. Is your editor ready for this..?

ARIA DevTools: A Chrome Extension to Easily Spot Missing ARIA Labels and Roles — Provides a visualization of a website’s accessibility tree, so you can see where you might need to add ARIA-based landmarks.

✂️ CSS text-box-trim — This handy property lets you finely control the leading space found both above and below text. Adam shows us how it works, and what problems it solves. It’s in Chrome/Edge 133 and Safari 18.2, no Firefox support just yet.