Frontend Focus
Feed since 17 Mar 2019This feed covers HTML, CSS, WebGL, and other associated technologies. Frontend Focus shares news, articles, tutorials and code examples for those interested in web browser technology and the web platform generally. See: http://frontendfocus.co/
To subscribe to and get updates from Frontend Focus in your feed stream, sign up, or see the rest of our feeds.
Responsive Typographic Scale Generator - DK Web Solutions
Responsive Typographic Scale Generator — Output is in standard CSS or Sass/SCSS and you can use...
Blob shape with hover effect
Blob Shape with Hover Effect — It’s Chrome only for now, but Temani quickly shares a...
The Hidden Cost of AI Coding
The Hidden Cost of AI Coding — No matter if you’re all in on vibe coding,...
Hello my name is St�phanie - a talk on "special characters", inclusive design and user experience
▶ Hello My Name Is St�phanie: A Talk On "Special Characters", Inclusive Design and User Experience —...
Anchor Positioning Just Don't Care About Source Order | CSS-Tricks
Anchor Positioning Just Don't Care About Source Order — Overlapping elements in CSS can often be...
How to take Clerk to Production
How to Take Clerk to Production — How to take a Clerk app to production with...
What is CSS Owl Selector (* + *)?
▶ 🦉 What is the 'Owl Selector' (* + *)? — A quick look at the so-called...
GitHub - dbismut/draggable-slider: Created with StackBlitz ⚡️
Draggable Carousel: A Draggable Carousel/Slider Component for React, Vue, or Vanila JS — Try it out...
Design Tokens Name Generator
Design Tokens Name Generator — For when you need to get started quickly, this tool will...
GitHub - mirisuzanne/track-list: Enhance a list of audio tracks with playlist controls
track-list: A Web Component to Enhance a List of Audio Tracks with Playlist Controls — A...
Annotation Mono
Annotation Mono: A Lovingly Crafted Handwriting-Style Monospace Font — A legible, variable handwritten typeface inspired by...
Storybook 9 is now in beta
Storybook 9 Beta — The popular UI 'workshop' hits v9, with this beta that introduces visual...
Don't make Google sell Chrome
'Don't Make Google Sell Chrome' — There have been rumblings about Google possibly having to sell...
Polishing your typography with line height units
Polishing Your Typography with Line Height Units — Jen explains how the lh and rlh units...
Time Travel with JavaScript
Creating a 3D Split-Flap Display Effect — A split-flap display is a electromechanical display commonly associated...
Seeking an Answer: Why can’t HTML alone do includes? – Frontend Masters Blog
Seeking an Answer: Why Can’t HTML Alone Do Includes? — Plenty of solutions, but no straightforward,...
How to write error messages that actually help users rather than frustrate them
How to Write Error Messages That Actually Help Users Rather Than Frustrate Them — Solid, straightforward...
The canvas element
The <canvas> Element — Highlights the accessibility pitfalls and performance trade-offs of using the <canvas> element,...
CSS Editor - getButterfly
CSS Editor: An Interactive Visual CSS Editor — Nothing extraordinary here, but a nice way to...
Introducing Kermit: A typeface for kids - Microsoft Design
Introducing Kermit: A Typeface for Kids — Nothing to do with the famous frog — no, this...
Next steps for Privacy Sandbox and tracking protections in Chrome
🍪 Next Steps for Privacy Sandbox and Tracking Protections in Chrome — After years of back...
AG Grid: High-Performance React Grid, Angular Grid, JavaScript Grid
AG Grid: The Best JavaScript Data Grid In The World — Create high-performance data grids with...
A flowing WebGL gradient, deconstructed
⭐ A Flowing WebGL Gradient, Deconstructed — Even if you don’t want to render a neat plasma-style...
AI is the future of accessibility - Karl Groves
AI is the Future of Accessibility — “Let’s treat AI not as a threat to accessibility,...
What Does It Really Mean For A Site To Be Keyboard Navigable — Smashing Magazine
What Does It Really Mean for a Site to be 'Keyboard Navigable' — A look at...
SpeedCurve | Why you need to know your site's performance plateau (and how to find it)
Why You Need to Know Your Site's Performance Plateau (and How to Find It) — So...
Building An Offline-Friendly Image Upload System — Smashing Magazine
Building an Offline-Friendly Image Upload System — How to leverage PWA tech such as IndexedDB, service...
So, You Want to Give Up CSS Pre- and Post-Processors... | CSS-Tricks
So, You Want to Give Up CSS Pre- and Post-Processors... — How native CSS, new features...
Mastering Carousels with GSAP: From Basics to Advanced Animation | Codrops
Mastering Carousels with GSAP: From Basics to Advanced Animation — A solid overview of creating a...
A Note About WCAG Conformance Levels - Dennis Deacon
A Note About WCAG Conformance Levels — A quick high-level primer on the various conformance levels...
Magick images. — ethanmarcotte.com
Magick Images — Here’s how Ethan made use of image library Imagemagick to create new social...
Fixing Vercel's Landing Page
Fixing Vercel's Landing Page — Tomi spotted a small visual quirk in a background pattern of...
GitHub - liveblocks/frimousse: A lightweight, unstyled, and composable emoji picker for React.
Frimousse: A Lightweight, Unstyled, and Composable Emoji Picker for React — The picker is accessible and...
Polypane 24: Recording, 3D view, Custom tab colors and HTML editing | Polypane
Polypane 24: Recording, 3D View, Custom Tab Colors and HTML Editing — A new version of...
Tailwind Trainer - A game for practicing Tailwind utility classes
Tailwind Trainer: A Game for Practicing Tailwind Utility Classes — From the same folks that created...
GitHub - rishi-raj-jain/astro-font: `astro-font` will automatically optimize your Custom Fonts, Local Fonts, Fonts over any CDN and Google fonts for performance.
Astro Font: An Astro Plugin to Automatically Optimize Your Fonts — Supports optimization for custom fonts,...
CSS Hell
CSS Hell — This CSS-based puzzle game has you changing properties to meet certain criteria. 15...
Jelly: Simpler email collaboration for small teams
Actually Affordable Email Customer Support Software–That's Jelly — See who’s got what. Leave internal notes. Conquer...
Tailwind CSS Cheat Sheet
Tailwind CSS Cheat Sheet: A Comprehensive Tailwind Cheat Sheet to Instantly Find All Utility Classes —...
cardboard-js
Carboard.js: A Lightweight, Reactive JavaScript Framework with a Twist — The ‘twist’ is that you don’t have...
React App
PureAnim: An SVG Animation Toolkit — Just add an SVG and this tool lets you animate...
Font Tester - Test and preview over 1500+ fonts on any website
Font Tester: A Browser Extension to Live Test and Preview Google Fonts — Opens a panel overlay...
Astro 5.7 | Astro
Astro 5.7 Released — This new release arrived just yesterday and it introduces SVG components, experimental...
The blissful zen of a good side project
The Blissful Zen of a Good Side Project — A reflective take on the importance of...
Inclusive Dark Mode: Designing Accessible Dark Themes For All Users — Smashing Magazine
Inclusive Dark Mode: Designing Accessible Dark Themes For All Users — Getting a dark mode for a...
Next Level CSS Styling for Cursors | CSS-Tricks
Next Level CSS Styling for Cursors — Some styling pointers for custom cursors, along with what...
Using currentColor in 2025 – Frontend Masters Blog
Using currentColor in 2025 — Sure, custom properties can do much the same, but Chris looks...
Item Flow
Item Flow — A couple of issues back we shared an article from Jen Simmons on...
una.im | Updates to the customizable select API
Updates to the Customizable Select API — This article was first published earlier this year, but...
The Post-Developer Era • Josh W. Comeau
The Post-Developer Era — Two years ago Josh published a piece on the rise of AI,...
