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.
Beautiful focus outlines · Medienbäcker Thomas Günther
Beautiful Focus Outlines — Thomas notes that focus outlines are often seen as a purely technical...
ska-tailwind-editor – Edit Tailwind HTML as WordPress blocks
ska-tailwind-editor: Edit Tailwind HTML As WordPress Blocks — This is an online editor that looks like...
GitHub - bopjesvla/tiny-static-map
🗺️ Tiny Static Map: A Simple Map Rendering Element — A very small library for putting a...
Storybook 8.4
Storybook 8.4 Released — The popular frontend component workshop gets a minor release but it’s “one...
Action Table: HTML Web Component
Action Table: A Native HTML Web Component for Adding Sorting/Filtering Functionality to Tables — Uses custom...
Product for Engineers | Substack
Product for Engineers: A Newsletter Helping Flex Your Product Muscle — Product for Engineers is dedicated to...
Pagefind | Pagefind — Static low-bandwidth search at scale
Pagefind: Add a Search Feature to Your Static Sites — A fully static search library that...
How to Create an Organic Text Distortion Effect with Infinite Scrolling | Codrops
How to Create an Organic Text Distortion Effect with Infinite Scrolling — Here’s a live demo of...
(Up-) Scoped Scroll Timelines – Frontend Masters Boost
(Up-) Scoped Scroll Timelines — Chris continues his exploration of just what can be done with...
Penpot Plugins Contest
Penpot Plugins Contest: Build a Plugin and Win Up to $1,000! — Got amazing plugin skills?...
Fluid Everything Else | CSS-Tricks
Fluid Everything Else — An exploration of how we can apply the concept of 'fluid typography'...
How a BBC navigation bar component broke depending on which external monitor it was on - Josh Tumath
How a BBC Navigation Bar Component Broke Depending on Which External Monitor It Was On —...
New CSS that can actually be used in 2024
New CSS That Can Actually Be Used in 2024 — Yep, the amount of CSS changes...
GitHub - CSS-Next/logo.css
An Official Logo for CSS — After hundreds of votes, CSS now has its own logo,...
Web AI Summit 2024 Recap: Client-Side AI for Developers- Google Developers Blog
A Recap of Google's Web AI Summit 2024 — Google recently held a summit specifically about...
Web Visual Editor - Visual Studio Marketplace
Web Visual Editor: A VS Code Extension to Edit HTML Files Visually — Works similar to the...
A Friendly Introduction to Container Queries • Josh W. Comeau
A Friendly Introduction to Container Queries — It’s been a couple of years now since the...
Exploring the browser rendering process | Little Things
Exploring the Browser Rendering Process — A technical look at what actually occurs between typing a...
Should masonry be part of CSS grid?
Should Masonry Be Part of CSS Grid? — As the conversation around just how best to...
The `<details>` and `<summary>` elements are getting an upgrade - Stephanie Stimac's Blog
The Details and Summary Elements Are Getting An Upgrade — A quick look at proposed changes...
11 HTML best practices for login & sign-up forms—Martian Chronicles, Evil Martians’ team blog
Eleven HTML Best Practices for Login and Sign-up Forms — Andrey notes that “even popular sites...
Mastering Interaction to Next Paint (INP) – Frontend Masters Boost
Mastering Interaction to Next Paint (INP) — A look at what this Core Web Vitals metric...
What do survey demographics tell us?
What Do Survey Demographics Tell Us? — Miriam looks over the latest State of CSS survey...
Clarifying The Relationship Between Popovers And Dialogs | CSS-Tricks
Clarifying the Relationship Between Popovers and Dialogs — An attempt to clear up any potential confusion...
Scroll-Driven… Sections – Frontend Masters Boost
Scroll-Driven… Sections — Explores using scroll-driven animations to create an experimental sectional ‘storytelling’ reading experience.
What’s the deal with WebKit Font Smoothing?
What’s the Deal with WebKit Font Smoothing? — On whether or not we should add this...
GitHub - ritterim/skellyCSS: A light-weight CSS framework to quickly implement skeletons into your projects.
skellyCSS: A Lightweight CSS Framework to Quickly Implement Skeletons Into Your Projects — For showing gray...
GitHub - zumerlab/orbit: 💫 Orbit is the first CSS framework designed specifically for building radial user interfaces!
Orbit: A Framework to Create Radial Interfaces with CSS — Includes various CSS classes and Custom...
VS Code Theme Generator
VS Code Theme Generator: An Online Tool to Generate and Customize VS Code Themes — The...
GitHub - keithamus/i-html
i-html: A Drop-In Web Component That Allows for Dynamically Importing HTML Inline — Described as being...
Making content-aware components using CSS :has(), grid, and quantity queries
Making Content-Aware Components using CSS :has(), Grid, and Quantity Queries — Eric looks at the power...
WebKit Features in Safari 18.1
WebKit Features in Safari 18.1 — Version 18.1 of Apple’s Safari browser is now available across...
Apple implements six of OWA's DMA compliance requests - Open Web Advocacy
Apple Implements Six of OWA's DMA Compliance Requests — Reports that Apple has now fixed several...
My Modern CSS Reset | jakelazaroff.com
'My Modern CSS Reset' — Whether it’s Eric Meyer’s classic take on the reset, or one...
Frontend Testing Best Practices Guide | Datadog
Learn Best Practices for Reliable Frontend Testing — Surface broken functionality before customers do. In this...
The most effective ways to improve Core Web Vitals | Articles | web.dev
The Most Effective Ways to Improve Core Web Vitals — Everyone wants their site to be...
Tooltip Best Practices | CSS-Tricks
Tooltip Best Practices — A straightforward summary of the various best practices, including accessibility considerations, when...
GitHub - web-platform-dx/baseline-status
A <baseline-status> Web Component — A new widget to easily display web feature baseline information on...
daisyUI — Tailwind CSS Components ( version 4 update is here )
daisyUI: A Library of Tailwind CSS Components in Multiple Themes — Includes dozens of ready-made components that...
BCD Watch
BCD Watch: Keeping an Eye on Changes to MDN’s Browser Compatibility Data — A useful resource...
GitHub - astahmer/atomic-css-devtools: A devtool panel for debugging Atomic CSS rules as if they were not atomic. Available on chrome & firefox
Atomic CSS Devtools: A Browser Extension for Debugging Atomic CSS — Available for Chrome and Firefox, this...
HTML Form Validation is heavily underused
HTML Form Validation Is Heavily Underused — An exploration of the “powerful validation mechanisms” of HTML...
The State of Frontend 2024
State of Frontend 2024. Dev & Business Insights You Can’t Miss! — Explore insights: 6,288 developers,...
Come To The Light-dark() Side | CSS-Tricks
Come to the light-dark() Side — A look at how modern CSS can now make handling...
How is this Website so fast!?
▶ How is This Website So Fast!? — You may have seen the McMaster Carr site shared...
Help us choose the final syntax for Masonry in CSS
Help Choose the Final Syntax for Masonry in CSS — The WebKit team shares a detailed...
CSS min() All The Things — Smashing Magazine
CSS min() All The Things — Experimentations with the CSS min() function, exploring its flexibility with...
Smarter than 'Ctrl+F': Linking Directly to Web Page Content
Smarter than 'Ctrl+F': Linking Directly to Web Page Content — A powerful feature of the modern...
Where web components shine
Where Web Components Shine — Dave shares a quick-fire list of the specific pros and cons...
How Microsoft Edge Is Replacing React With Web Components
How Microsoft Edge is Replacing React with Web Components — As part of their WebUI 2.0...
