~frontendfocus | Bookmarks (295)

Building an Offline-Friendly Image Upload System — How to leverage PWA tech such as IndexedDB, service workers, and the Background Sync API to help improve the reliability of web apps for users, particularly those with unreliable internet connectivity.

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

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.

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.

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.

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.

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*

Lighthouse Scoring Calculator: A Small Playground for Understanding Lighthouse Scores — This tool lets you fiddle around with some hypothetical values calculated by Lightouse so you can get a rough idea of which values have a bigger effect on the overall score.

Record: Open-Source Web App to Record Screen and Camera Directly in the Browser — Another media-related project from Addy, this one is actually a fork of an older project with some modern enhancements. You can give it a spin here.

Khroma: An AI Color Tool to Design with Colors You Love — An interesting method for generating color palettes. You choose 50 colors you like (saved in localStorage), which personalizes the algorithm to give you palettes based on your favorite colors.

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.

Use shape() for Responsive Clipping — Support for the CSS shape() function is now slowly rolling out — you can expect it to work in Chrome 135 and Safari 18.4. As such, here’s a quick look at how it can be used with clip-path for responsive clipping — there's a demo here. Ana Tudor has also chucked together a 'breathing box' demo.