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.
Basecoat
Basecoat: shadcn/ui's Magic, But Minus React — shadcn/ui is a popular suite of well designed React...
Clerk Billing
Introducing Clerk Billing — Set up subscriptions in your B2B or B2C app without writing custom...
Discover, buy and download awesome fonts - Fonts Ninja
Fonts Ninja: A Platform to Discover and Build Your Font Collection — The font gallery lets...
Creating Flower Shapes using clip-path: shape() – Frontend Masters Blog
Creating Flower Shapes using clip-path: shape() — Here's a detailed look at the what can be...
It wasn’t the idea that failed: it was the execution
It Wasn’t the Idea That Failed: It Was the Execution — A look back at the...
Container Query for “is there enough space outside this element?” – Frontend Masters Blog
Container Query for “Is There Enough Space Outside This Element?” — A good, practical example of...
Integrating Localization Into Design Systems — Smashing Magazine
Integrating Localization Into Design Systems — A case study that looks at how two designers tackled...
Add wide gamut P3 and alpha transparency to your color picker in HTML
Add Wide Gamut P3 and Alpha Transparency to Your Color Picker in HTML — Did you...
Why we are still using 88x31 buttons - ultrasciencelabs
Why We Are Still Using 88x31 Buttons — You don't really see them anywhere near as...
MoodHue 🎨
MoodHue: Generate a Color Palette Based on Mood with AI — Enter a ‘mood’ in the...
Free Web & Mobile Templates for Startups
Flatlogic Templates: Free Web & Mobile Templates for Startups — These were recently open-sourced by the...
HelloCSV
HelloCSV: A Drop-In, CSV Importing Workflow for JS Apps — If you or your users have...
WorkOS + Cloudflare MCP: Plug and Play Auth for Agentic AI Builders — WorkOS
AI Agents and MCP Servers Without Access Control Are a Security Risk — WorkOS AuthKit enables...
GitHub - midudev/tailwind-animations: Easy peasy animations for your Tailwind project
tailwind-animations: Easy Animations for Your Tailwind Project — You can mess around with them on this...
The Height Enigma • Josh W. Comeau
The Height Enigma — A beginner-friendly no nonsense unraveling of the ‘mysterious’ behavior of percentage-based heights...
High-Powered Full-Stack React Apps | Learn Next.js on Frontend Masters
New Course: Next.js Fundamentals, v4 — Master Next.js with Scott Moss. Learn React Server Components, Server...
How to have the browser pick a contrasting color in CSS
How to Have the Browser Pick a Contrasting Color in CSS — Jen shares how the upcoming...
@fiddle-digital/string-tune
StringTune: A JavaScript Library Designed to Deliver High-Performance, Modular Web Effects — This enables parallax scrolling,...
Bekuto 3D | SVG file to 3D model
Bekuto 3D: Web-Based Tool to Convert SVGs to 3D Models — Works well for simple graphics,...
Easier layout with margin-trim
Easier Layout with margin-trim — Jen and the WebKit team have been on something of a...
Are 'CSS Carousels' accessible?
Are 'CSS Carousels' Accessible? — It’s still early days for the recently introduced CSS Carousels, but...
https://gsap.com/blog/3-13/
The GSAP Web Animation Toolkit is Now Entirely Free — Last year the hugely popular GSAP...
Reading flow ships in Chrome 137 – Rachel Andrew
Reading Flow Will Ship in Chrome 137 — Both the reading-flow and reading-order properties are expected...
WCAG 3.0’s Proposed Scoring Model: A Shift In Accessibility Evaluation — Smashing Magazine
WCAG 3.0’s Proposed Scoring Model: A Shift in Accessibility Evaluation — There’s a rethink underway in...
Building a React Login Page Template
How to Build a React Login Page Template — Learn to build auth with React &...
Polyfilling CSS with CSS Parser Extensions
Polyfilling CSS with CSS Parser Extensions — Bramus has had an idea “to fix CSS polyfilling...
Frontend's Next Evolution: AI-Powered State Management
Frontend's Next Evolution: AI-Powered State Management — Here’s how artificial intelligence is changing the complexity of...
Passkeys for Normal People
Passkeys for Normal People — A solid primer on the mechanics of passkeys and the defensive...
Masonry In CSS: Should Grid Evolve Or Stand Aside For A New Module? — Smashing Magazine
Masonry in CSS: Should Grid Evolve or Stand Aside for a New Module? — It feels like we’ve been...
Revisiting Image Maps | CSS-Tricks
Revisiting Image Maps — Although ultimately image maps weren’t the right fit for the task at...
Good vs Great Animations
Good vs Great Animations — A neat collection of practical tips to help you go from...
GitHub - webtui/webtui
WebTUI: A Modular CSS Library Bringing the Beauty of Terminal UIs to the Browser — You...
React Performance: Common Problems & Their Solutions
Your React App Is Fast. Until It Isn’t — From bloated bundles to re-render chaos, this...
Version v8.0.0 | Mantine
Mantine 8.0: The Full Featured React Components Library — Mantine is one of the most celebrated...
VERT.sh — Free, fast, and awesome file convert
VERT: A Fast, Ad-Free File Converter for Media & Documents — All image formats are converted...
Don't make Google sell Chrome
'Don't Make Google Sell Chrome' — There have been rumblings about Google possibly having to sell...
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...
CSS Editor - getButterfly
CSS Editor: An Interactive Visual CSS Editor — Nothing extraordinary here, but a nice way to...
The Hidden Cost of AI Coding
The Hidden Cost of AI Coding — No matter if you’re all in on vibe coding,...
What is CSS Owl Selector (* + *)?
▶ 🦉 What is the 'Owl Selector' (* + *)? — A quick look at the so-called...
The canvas element
The <canvas> Element — Highlights the accessibility pitfalls and performance trade-offs of using the <canvas> element,...
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...
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,...
Time Travel with JavaScript
Creating a 3D Split-Flap Display Effect — A split-flap display is a electromechanical display commonly associated...
Polishing your typography with line height units
Polishing Your Typography with Line Height Units — Jen explains how the lh and rlh units...
