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.
FakeData
FakeData: A Simple App for Generating Fake JSON Data — You can choose from 11 categories...
PostSpark - Beautify Screenshots
PostSpark: Customize and Beautify Website & Code Screenshots — These kinds of tools are a dime...
Visprex
Visprex: An Online Tool to Visualize CSV Files — It’s open source and works entirely in...
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...
Find. Fix. Test. Intro to Sentry & Codecov
Find. Fix. Test: Intro to Sentry & Codecov — Code-level visibility, from pre- to post-release, lets...
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...
Flexbox Labs
Flexbox Labs: A Visual Tool for Creating Flexbox Layouts — One of the neat features is...
How to Create Wavy Boxes Using CSS
How to Create Wavy Boxes Using CSS — A straightforward tutorial on how to create cool...
CSS nesting: use with caution
CSS Nesting: Use with Caution — “There are features that fill me with dread [..] and...
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...
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...
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...
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 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...
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...
Taking RWD To The Extreme — Smashing Magazine
Taking RWD to the Extreme — It’s been 15(!) years since Ethan Marcotte first wrote about...
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...
How I learned to code with my voice
From Pain to Productivity: How I Learned to Code with My Voice — After developing severe hand...
The Mistakes Of CSS | CSS-Tricks
The Mistakes of CSS — This post from Juan references an interesting document from the CSS...
How to customize Next.js metadata
How to Customize Next.js Metadata — Learn all about web page metadata, its use, and different...
Kanye's weird new website
▶ A Breakdown of Kanye's Weird New Website — Whatever you think of Kanye West, you know...
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...
Creating an Angled Slider – Frontend Masters Boost
Creating an Angled Slider — The end result here is pleasing. Zach shows us how to...
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...
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...
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...
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...
Waveform Renderer
Waveform Renderer — A browser-based tool for creating a waveform from an audio file. Just add...
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...
StyleConsoleLog - Enhance Your Console Logs with CSS Styles
StyleConsoleLog: An Interactive Tool to Add CSS to Console Messages — Uses string substitution along with...
Tailwind CSS v4.0
Tailwind CSS v4.0 — An all-new, ground-up rewrite of the highly popular framework. Version 4 arrived...
Blendy, a framework-agnostic tool that smoothly transitions one element into another with just a few lines of code.
Blendy: Smoothly Transition One Element Into Another — The demo is essentially an animated modal window...
GitHub - simonw/prompts-js: async alternatives to browser alert() and prompt() and confirm()
Prompts: A Lightweight Async Alternative to alert(), prompt(), and confirm() — Includes some basic styling for...
Unpic 1.0 – Unpic
Unpic 1.0: A Toolkit for Displaying Images on the Web — A family of components and...
GitHub - addyosmani/squish: Squish - Batch Browser-based Image Compression
Squish: Batch Client-Side Image Compression Powered by Wasm — Includes support for AVIF, JPEG, JPEGXL, PNG,...
Positioning Text Around Elements With CSS Offset | CSS-Tricks
Positioning Text Around Elements with CSS Offset — Explores how CSS offset can offer an easy...
Running inference in web extensions | The Mozilla Blog
🤖 Running Inference in Web Extensions — Firefox Nightly is shipping with an 'AI runtime' API you...
The Speed Trifecta: 11ty, Brotli 11, and CSS Fingerprinting - Matt Hobbs
The Speed Trifecta: 11ty, Brotli 11, and CSS Fingerprinting — Matt explores a blended approach to...
Augment Code: Developer AI that gets your codebase
Wish Your AI Co-Pilot Actually Knew Your Codebase? — Try the most context-aware Developer AI. Augment...
Some Things You Might Not Know About Custom Counter Styles | CSS-Tricks
🎲 Some Things You Might Not Know About Custom Counter Styles — Outlines how @counter-styles opens up new...
So, you want to push a web platform feature?
So, You Want to Push a Web Platform Feature? — If you’re curious about browser development...
Considerations for making a tree view component accessible
Considerations for Making a Tree View Component Accessible — A look behind the scenes at GitHub’s...
Build for the Web, Build on the Web, Build with the Web – CSS Wizardry
Build for the Web, Build on the Web, Build with the Web — Harry reminds us...
Revisiting CSS Multi-Column Layout | CSS-Tricks
Revisiting CSS Multi-Column Layout — Andy explores the somewhat underused Multi-Column Layout module, looking at its...
Authentication & User Management Software - FusionAuth
Auth for the Test-Ship-Repeat Era - No Mocking — FusionAuth is the scalable, downloadable auth solution...
Interop 2024 brings more features to Baseline | Blog | web.dev
Interop 2024 Brings More Features to Baseline — We recently shared Jen Simmons’ report from the...
