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.
Launching Interop 2025 – Mozilla Hacks - the Web developer blog
Launching Interop 2025 — This year’s Interop project (an ongoing cross-browser effort to increase interoperability of...
GitHub - EvandroLG/ts-audio: :musical_score: ts-audio is an agnostic library that makes it easy to work with AudioContext and create audio playlists in the browser
ts-audio: Simple API for AudioContext and Playing Audio Playlists — Here’s a demo.
Home
dash.js 5.0: JS Implementation of MPEG DASH Playback for Browsers — A reference client implementation for the...
GitHub - dcastil/tailwind-merge: Merge Tailwind CSS classes without style conflicts
tailwind-merge 3.0: Efficiently Merge Tailwind CSS Classes without Conflicts — Provides a way to merge Tailwind...
GitHub - lucafalasco/scroll-snap: ↯ Snap page when user stops scrolling, with a customizable configuration and a consistent cross browser behaviour
scroll-snap 5.0: A Customizable Scroll Snap Implementation — Uses requestAnimationFrame() for 60fps scrolling performance and doesn’t...
Heat.js - JavaScript Heat Map
Heat.js: A Heat Map Visualization Library — Think like the GitHub contributions heat map. No dependencies,...
LaLoka Layouts for Tailwind CSS
LaLoka Layouts: 30+ Useful Components Built with Tailwind — Includes components not normally included in these...
Blacksmith
Run GitHub Actions Up to 2x Faster at Half the Cost — Blacksmith runs GitHub Actions...
Style-observer: JS to observe CSS property changes, for reals • Lea Verou
StyleObserver: A Library to Observe CSS Property Changes — An exhaustively tested JS library from Lea...
Decoding CSS Selectors: :has(:not) vs :not(:has) | Polypane
Decoding CSS Selectors: :has(:not) vs :not(:has) — When you combine CSS functions, the nesting matters -...
Testing 10 JavaScript Frameworks on Their HTML Defaults · Jens Oliver Meiert
Testing 10 JavaScript Frameworks on Their HTML Defaults — Using a JavaScript framework is now ‘the...
Learning web extensions
Learning How to Build Modern Web Extensions — It’s easy to run into outdated docs when...
Three Approaches to the “&” (ampersand) Selector in CSS – Frontend Masters Boost
Three Approaches to the & Selector in CSS — The & selector in vanilla CSS, now...
Find. Fix. Test. Intro to Sentry & Codecov
Find. Fix. Test: Intro to Sentry & Codecov — Code-level visibility, from pre- to post-release, lets...
Taking RWD To The Extreme — Smashing Magazine
Taking RWD to the Extreme — It’s been 15(!) years since Ethan Marcotte first wrote about...
The European Accessibility Act for websites and apps by Martijn Hols
🇪🇺 The European Accessibility Act for Websites and Apps — This accessibility effort comes into effect in...
How I Created A Popular WordPress Theme And Coined The Term “Hero Section” (Without Realizing It) — Smashing Magazine
How I Created a Popular WordPress Theme and Coined the Term “Hero Section” (Without Realizing It) — The...
The Popover API is now Baseline Newly available | Blog | web.dev
The Popover API is Now Baseline Newly Available — Despite earlier proclamations, the Popover API (which...
Which rich text editor framework should you choose in 2025? | Liveblocks Blog
Which Rich Text Editor Framework Should You Choose in 2025? — A round-up of actively developed...
Transitioning Top-Layer Entries And The Display Property In CSS — Smashing Magazine
Transitioning Top-Layer Entries and the display Property — How to animate display: none and other discrete...
CSS nesting: use with caution
CSS Nesting: Use with Caution — “There are features that fill me with dread [..] and...
How to Create Wavy Boxes Using CSS
How to Create Wavy Boxes Using CSS — A straightforward tutorial on how to create cool...
Flexbox Labs
Flexbox Labs: A Visual Tool for Creating Flexbox Layouts — One of the neat features is...
GitHub - daviddarnes/share-button: A Web Component to share web pages using the native OS sharing options
share-button: A Web Component to Share Web Pages using Native OS Sharing Options — Uses the...
GitHub - satnaing/astro-paper: A minimal, accessible and SEO-friendly Astro blog theme
AstroPaper: Minimal, Responsive, SEO-Friendly Astro Blog Theme — A well put together blog theme for the Astro...
Visprex
Visprex: An Online Tool to Visualize CSV Files — It’s open source and works entirely in...
PostSpark - Beautify Screenshots
PostSpark: Customize and Beautify Website & Code Screenshots — These kinds of tools are a dime...
FakeData
FakeData: A Simple App for Generating Fake JSON Data — You can choose from 11 categories...
The 70% problem: Hard truths about AI-assisted coding
🤖 The 70% Problem: Hard Truths About AI-Assisted Coding — Addy shared this late last year, but...
SpeedCurve | Page bloat update: How does ever-increasing page size affect your business and your users?
📊 How Does Ever-Increasing Page Size Affect Your Users? — Web performance expert Tammy Everts tells us...
How to Favicon in 2025: Three files that fit most needs—Martian Chronicles, Evil Martians’ team blog
🟨 How to Favicon in 2025: Three Files That Fit Most Needs — Asks us to “stop...
Creating an Angled Slider – Frontend Masters Boost
Creating an Angled Slider — The end result here is pleasing. Zach shows us how to...
Kanye's weird new website
▶ A Breakdown of Kanye's Weird New Website — Whatever you think of Kanye West, you know...
How to customize Next.js metadata
How to Customize Next.js Metadata — Learn all about web page metadata, its use, and different...
The Mistakes Of CSS | CSS-Tricks
The Mistakes of CSS — This post from Juan references an interesting document from the CSS...
Plotly
Plotly 3.0: A JavaScript Graphing Library — A high-level, declarative charting library, built on top of...
Front end Developer Kit | Datadog
Developer Kit: Learn How to Troubleshoot Front-End Issues Faster — Get the kit curated to help...
tinygradient
🎨 tinygradient 2.0: A Gradient Generation Library — Generate color gradients with an unlimited number of color...
Monoco — smooth squircle corners for HTML elements
Monoco: A Small JS Library for Smooth 'Squircle' Corners for HTML Elements — The main page...
Tabler v1.0.0 Is Here! 🎉 Say Hello to Your New Favorite UI Toolkit - Tabler Blog
Tabler 1.0: A Bootstrap 5-Based Open UI Kit for Webapps — The 1.0 release of this...
StyleConsoleLog - Enhance Your Console Logs with CSS Styles
StyleConsoleLog: An Interactive Tool to Add CSS to Console Messages — Uses string substitution along with...
How I learned to code with my voice
From Pain to Productivity: How I Learned to Code with My Voice — After developing severe hand...
Waveform Renderer
Waveform Renderer — A browser-based tool for creating a waveform from an audio file. Just add...
Scroll state queries are on the way! (and a bunch more)
▶ Scroll State Queries are on the Way — Kevin talks us through what CSS scroll-state brings...
Pure CSS Mixin for Displaying Values of Custom Properties
Pure CSS Mixin for Displaying Values of Custom Properties — An article (and associated package) that presents...
How and why we built our startup around small teams
The Magic of Small Engineering Teams — How PostHog uses small teams to ship fast and...
Tailwind CSS v4.0
Tailwind CSS v4.0 — An all-new, ground-up rewrite of the highly popular framework. Version 4 arrived...
Revisiting CSS Multi-Column Layout | CSS-Tricks
Revisiting CSS Multi-Column Layout — Andy explores the somewhat underused Multi-Column Layout module, looking at its...
Considerations for making a tree view component accessible
Considerations for Making a Tree View Component Accessible — A look behind the scenes at GitHub’s...
