~frontendfocus | Bookmarks (253)

🎲 Some Things You Might Not Know About Custom Counter Styles — Outlines how @counter-styles opens up new ways of working with lists and list markers.

The Speed Trifecta: 11ty, Brotli 11, and CSS Fingerprinting — Matt explores a blended approach to optimizing CSS by combining Brotli compression and CSS fingerprinting, delivering the gains via a custom 11ty shortcode.

Wish Your AI Co-Pilot Actually Knew Your Codebase? — Try the most context-aware Developer AI. Augment deeply understands your codebase, documentation, and dependencies.

▶  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.

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.

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’.

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.

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.”

'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.

Open Props UI — A CSS UI library exploring how next-gen HTML & CSS features can change the way we create components. Version 1.0 hit yesterday, adding a ton of components. Repo here.

Photo Gradient: An Online Tool to Generate & Customize Mesh Gradients From Any Image — The download is in PNG format and you can also just randomly generate and edit mesh gradients without uploading an image.

tailwind-to-inline: Transform Tailwind Classes to Inline Styles — This is an npm script you can run on your Tailwind-based templates should you want to convert them to inline styles, such as for use in HTML emails.

Easing Wizard: A CSS Easings Editor and Generator — We’ve shared tools like this before, but this one might be the best-designed one yet. You can copy the code as CSS or Tailwind and there’s an option to deep link to the current easing config settings.

✂️ 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.

▶  HTML & CSS for Absolute Beginners — Kevin’s started the year by sharing this epic 50-video course — it explores everything from syntax, page structure, semantic HTML, CSS specificity, and much more. Assumes zero knowledge so, although entertaining and beneficial enough for us all, is perfect for a beginner — one to pass along to those starting out.

You Might Not Have a Web Performance Problem — Some caution and caveats to consider when it comes to Lighthouse results and the performance picture they can paint.