~frontendfocus | Bookmarks (297)

CSS Hell — This CSS-based puzzle game has you changing properties to meet certain criteria. 15 to complete, and rather challenging. The repo has the intended solutions if/when you get stuck. (Note: It's not mobile friendly at all.)

AI is the Future of Accessibility — “Let’s treat AI not as a threat to accessibility, but as a tool we must shape—because the future belongs to those who build it. Stop being afraid of change and, instead, work to make sure change is for the better”.

What Does It Really Mean for a Site to be 'Keyboard Navigable' — A look at why being able to navigate our sites with a keyboard matters, how to test your current set up, and ultimately improve it.

Why You Need to Know Your Site's Performance Plateau (and How to Find It) — So you’ve made your site faster, but that hasn’t shifted the metrics like you’d hoped. Maybe you’ve hit a performance plateau — the point at which changes to your website’s rendering metrics cease to matter because you’ve bottomed out in terms of business/user engagement metrics.

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.

A Note About WCAG Conformance Levels — A quick high-level primer on the various conformance levels of the Web Content Accessibility Guidelines (A, AA, AAA).

Magick Images — Here’s how Ethan made use of image library Imagemagick to create new social media og:image preview images.

Fixing Vercel's Landing Page — Tomi spotted a small visual quirk in a background pattern of Vercel’s site and set out to fix it.

Frimousse: A Lightweight, Unstyled, and Composable Emoji Picker for React — The picker is accessible and won’t display any emojis that aren’t supported on the device. You can explore some demos here.

Polypane 24: Recording, 3D View, Custom Tab Colors and HTML Editing — A new version of developer browser Polypone has just released, adding a built-in video recorder, a 3D view (shown above) for looking over your stacking context / z-index rules, and more.

Tailwind Trainer: A Game for Practicing Tailwind Utility Classes — From the same folks that created the popular Flexbox Froggy and Grid Garden games, this one helps you learn Tailwind syntax and it promises that no two play-throughs are the same.

Astro Font: An Astro Plugin to Automatically Optimize Your Fonts — Supports optimization for custom fonts, local fonts, fonts over any CDN, and Google Fonts.

🍪 Next Steps for Privacy Sandbox and Tracking Protections in Chrome — After years of back and forth and dithering on plans to remove third-party cookies from Chrome it now seems like Google has called it quits and thrown in the towel on the idea: “Taking all of these factors into consideration, we’ve made the decision to maintain our current approach to offering users...

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.

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*

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.

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!