~frontendfocus | Bookmarks (260)

Tailwind CSS Cheat Sheet: A Comprehensive Tailwind Cheat Sheet to Instantly Find All Utility Classes — Covers Tailwind versions 3 and 4. The classes are organized using all the primary categories from the Tailwind docs and includes instant search.

Inclusive Dark Mode: Designing Accessible Dark Themes For All Users — Getting a dark mode for a site just right is tricky at the best of times, so these tips on how to craft dark modes that work for everyone are most welcome.

The Blissful Zen of a Good Side Project — A reflective take on the importance of side projects. *nods*

Astro 5.7 Released — This new release arrived just yesterday and it introduces SVG components, experimental Fonts API support, bug fixes, and more.

Font Tester: A Browser Extension to Live Test and Preview Google Fonts — Opens a panel overlay that allows you to fiddle with fonts directly on the current page. A few neat features are the ability to preview multiple fonts or test a local custom font.

PureAnim: An SVG Animation Toolkit — Just add an SVG and this tool lets you animate the different parts of the graphic via all sorts of settings in a timeline view. Choose from the prebuilt animations to see how it works.

Carboard.js: A Lightweight, Reactive JavaScript Framework with a Twist — The ‘twist’ is that you don’t have to write any HTML, CSS, or JSX (think VanJS). Other features include state management, routing, CSS-in-JS, and more.

Default Styles for H1 Elements are Changing — Browsers are updating the default user agent (UA) styles for nested section headings. This high-level change is something that you’re going to want to be aware of — otherwise you may find yourself scratching your head in a few months when certain H1 elements start behaving differently.

Actually Affordable Email Customer Support Software–That's Jelly — See who’s got what. Leave internal notes. Conquer your team’s inbox. Click through for 15% off your first year!

Comparing Tauri and Electron for Building Desktop Apps with Frontend Technologies — Electron is a natural choice for building JS and HTML-powered cross-platform desktop apps but numerous alternatives have appeared like Neutralinojs and the Rust-based Tauri. This post does a good job of quickly showing how Tauri differs and why you might choose it.

The Post-Developer Era — Two years ago Josh published a piece on the rise of AI, and the fear and anxiety that devs were feeling at the time about AI taking jobs. Now, two years on, he’s back with a follow up to see how things have panned out so far, and how to now frame our thinking on these rapidly evolving set of...

Updates to the Customizable Select API — This article was first published earlier this year, but is really worth checking out now as support for the feature has shipped in the recently released Chrome 135.

Item Flow — A couple of issues back we shared an article from Jen Simmons on the WebKit team about a new unifying layout module, bringing together flex-flow and grid-auto-flow. Here are Ahmad’s positive thoughts on the idea, along with some questions.

Hiding Elements That Require JavaScript Without JavaScript — If you’ve got non-essential features that require JavaScript and you want to hide them for users who have JavaScript disabled for whatever reason, this is a tidy old-school way to do it.

Guide: Integrate Clerk with Your Lovable App — Quickly add secure authentication and user management with optional features for B2B, Waitlist, custom domains, and more.

The CSS shape() Function — Simon runs us through the shape() function and how we can use it to create shapes that “can adapt and scale with mixed proportions based on the size of the element”.

Using currentColor in 2025 — Sure, custom properties can do much the same, but Chris looks at the utility of this keyword alternative.

Next Level CSS Styling for Cursors — Some styling pointers for custom cursors, along with what things to consider in regards to accessibility and fallbacks.

Better Typography with text-wrap: pretty — Support for improved text wrapping has just shipped in the latest preview of Safari. Here, Jen shares a look at what this update means, noting that it brings “an unprecedented level of polish to typography on the web”. There’s a solid demo here that highlights all of the wins, but you’ll need to view it in Safari Technology...

Overengineered Anchor Links — Anchor links can often be an issue if the linked content is at the bottom of the page, so here’s a surprisingly meaty exploration of the fixes — going way beyond simple padding, and diving into mathematical equations to solve the issue via a custom mapping function. Formulas, visualizations, and more!

Top 5 CSS Navigation Menu Mistakes — Runs through some of the most common UI gotchas found within navigation menus, such as unforgiving target areas on dropdowns.

More Accurate DevTools Performance Debugging using Real-World Data — The latest on Chrome’s ongoing efforts to improve the DevTools Performance panel — this time with a focus on CPU throttling calibration, and data-driven improvements.

Your Users Saw the Error. Sentry Makes Sure You Do Too — Errors? Don't guess what happened on a browser you don’t own — let Sentry tell you. Console logs, stack trace, user actions, it’s all here. 👉 Stop flying blind with a free trial.

Minimal CSS-Only Blurry Image Placeholders — An experimental, pure CSS technique for producing blurry, low-quality image placeholders, using just a single custom property. Beyond just sharing the clever technique, the post also dives into how it all works, exploring the limits of CSS variables and radial gradients. There’s a gallery filled with examples here. It's a smart little hack, but one that I found didn't...