Frontend Focus 🚀
@frontendfocus.bsky.social
HTML, CSS, web platform, and browser tech news + demos, tricks, and tips (via the Frontend Focus newsletter) 👋 Curated by Chris Brandrick.
Pinned
💌 A once–weekly roundup of the best #frontend news, articles and tutorials.
HTML, CSS, WebGL, Canvas, browser tech, and more: frontendfoc.us
HTML, CSS, WebGL, Canvas, browser tech, and more: frontendfoc.us
Reposted by Frontend Focus 🚀
Chrome DevTools Features I Use All The Time (And Why You Should Too): https://calendar.perfplanet.com/2025/chrome-devtools-all-the-time/
Chrome DevTools Features I Use All the Time (and Why You Should Too)
Most developers open Chrome DevTools, check a couple of network requests, maybe refresh the page once or twice — and that's it.
I used to do the same.
Over time, DevTools became something else entirely for me. Not just a debugging tool, but a way to understand how the browser actually experiences
calendar.perfplanet.com
January 8, 2026 at 5:44 PM
Chrome DevTools Features I Use All The Time (And Why You Should Too): https://calendar.perfplanet.com/2025/chrome-devtools-all-the-time/
Reposted by Frontend Focus 🚀
How Markdown Took Over The World: https://www.anildash.com/2026/01/09/how-markdown-took-over-the-world/
How Markdown took over the world - Anil Dash
A blog about making culture. Since 1999.
www.anildash.com
January 14, 2026 at 11:44 AM
How Markdown Took Over The World: https://www.anildash.com/2026/01/09/how-markdown-took-over-the-world/
SVG Filters Are Just Amazing: https://www.amitmerchant.com/svg-filters-are-just-amazing/ (Amit has been experimenting with what we can do with the `filter` property, and shares his findings here.)
SVG Filters are just amazing!
So, lately, I have been exploring Haley Park’s website and it’s pretty cute and well designed. What caught my attention, though, was this water ripple effect on one of the text snippets.
www.amitmerchant.com
January 14, 2026 at 6:44 PM
SVG Filters Are Just Amazing: https://www.amitmerchant.com/svg-filters-are-just-amazing/ (Amit has been experimenting with what we can do with the `filter` property, and shares his findings here.)
Web Dependencies Are Broken; Can We Fix Them? https://lea.verou.me/blog/2026/web-deps/
Web dependencies are broken. Can we fix them? • Lea Verou
Dear JS ecosystem, I love you, but you have a dependency management problem when it comes to the Web, and the time has come for an intervention.
lea.verou.me
January 14, 2026 at 5:44 PM
Web Dependencies Are Broken; Can We Fix Them? https://lea.verou.me/blog/2026/web-deps/
What Is The Minimum Markup Needed to Create A Modal? https://www.maxdesign.com.au/articles/minimal-modal.html (Your options for building a modal dialog without any or as little as possible JavaScript.)
What is the minimum markup needed to create a modal? - Max Design
A practical look at the minimum HTML needed to create a modal dialog, with an optional enhancement based on real user testing.
www.maxdesign.com.au
January 14, 2026 at 4:44 PM
What Is The Minimum Markup Needed to Create A Modal? https://www.maxdesign.com.au/articles/minimal-modal.html (Your options for building a modal dialog without any or as little as possible JavaScript.)
Tips for Making The Performance Panel Less Overwhelming: https://calendar.perfplanet.com/2025/tips-for-making-the-performance-panel-less-overwhelming/
Tips for making the Performance Panel less overwhelming
Introduction
The Performance Panel is used for detailed investigations on traces captured during page load or during user interactions. It's a critical tool for understanding and debugging performance issues, but it can be overwhelming to newcomers. Previously I wrote about the Landing screen relea
calendar.perfplanet.com
January 14, 2026 at 3:44 PM
Tips for Making The Performance Panel Less Overwhelming: https://calendar.perfplanet.com/2025/tips-for-making-the-performance-panel-less-overwhelming/
ARIA Roles Can Remove Their Children’s Semantics: https://www.stefanjudis.com/today-i-learned/aria-roles-can-remove-their-childrens-semantics/
ARIA roles can remove their children’s semantics
ARIA menus require to include elements with "menuitem" or otherwise they're be empty.
www.stefanjudis.com
January 14, 2026 at 2:44 PM
ARIA Roles Can Remove Their Children’s Semantics: https://www.stefanjudis.com/today-i-learned/aria-roles-can-remove-their-childrens-semantics/
How I Write Custom Elements with lit-html: https://frontendmasters.com/blog/custom-elements-with-lit-html/
How I Write Custom Elements with lit-html – Frontend Masters Blog
You can use a smaller part of Lit to build web web components that still take advantage of some of it's best features, particularly if you're cool with Light DOM.
frontendmasters.com
January 14, 2026 at 1:44 PM
How I Write Custom Elements with lit-html: https://frontendmasters.com/blog/custom-elements-with-lit-html/
How Markdown Took Over The World: https://www.anildash.com/2026/01/09/how-markdown-took-over-the-world/
How Markdown took over the world - Anil Dash
A blog about making culture. Since 1999.
www.anildash.com
January 14, 2026 at 11:44 AM
How Markdown Took Over The World: https://www.anildash.com/2026/01/09/how-markdown-took-over-the-world/
Reposted by Frontend Focus 🚀
Directional CSS with Scroll-State (Scrolled): https://una.im/scroll-state-scrolled
una.im | Directional CSS with scroll-state(scrolled)
Style based on scroll direction with this new scroll-state query feature.
una.im
January 8, 2026 at 12:44 PM
Directional CSS with Scroll-State (Scrolled): https://una.im/scroll-state-scrolled
Reposted by Frontend Focus 🚀
Not All Browser APIs Are "Web" APIs
There's JS APIs in your browser that are little more than facades for cloud services. You might be sending your users' data to them.
polypane.app/blog/not-all...
There's JS APIs in your browser that are little more than facades for cloud services. You might be sending your users' data to them.
polypane.app/blog/not-all...
Not All Browser APIs Are "Web" APIs | Polypane
When we talk about "the web platform", we often treat it as a unified, standards-based system: browsers implement features from the same specifications, even if…
polypane.app
January 9, 2026 at 10:50 AM
Not All Browser APIs Are "Web" APIs
There's JS APIs in your browser that are little more than facades for cloud services. You might be sending your users' data to them.
polypane.app/blog/not-all...
There's JS APIs in your browser that are little more than facades for cloud services. You might be sending your users' data to them.
polypane.app/blog/not-all...
Reposted by Frontend Focus 🚀
Introducing the `` HTML element:
developer.chrome.com/blog/geoloca.... This is the evolution of the `` element, and there's cross-browser interest! 📍🗺️
developer.chrome.com/blog/geoloca.... This is the evolution of the `
Introducing the <geolocation> HTML element | Blog | Chrome for Developers
Discover the new way to request user location data.
developer.chrome.com
January 14, 2026 at 7:26 AM
Introducing the `` HTML element:
developer.chrome.com/blog/geoloca.... This is the evolution of the `` element, and there's cross-browser interest! 📍🗺️
developer.chrome.com/blog/geoloca.... This is the evolution of the `
Reposted by Frontend Focus 🚀
Firefox 147 just landed & it's pretty huge in terms of web features:
🎉 CSS anchor positioning
🎉 The navigation API
🎉 View transition types
🎉 Brotli support in Compression/DecompressionStream
🎉 CSS module imports
And more!
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147
🎉 CSS anchor positioning
🎉 The navigation API
🎉 View transition types
🎉 Brotli support in Compression/DecompressionStream
🎉 CSS module imports
And more!
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147
Firefox 147 release notes for developers (Beta) - Mozilla | MDN
This article provides information about the changes in Firefox 147 that affect developers.
Firefox 147 is the current Beta version of Firefox and ships on January 13, 2026.
developer.mozilla.org
January 13, 2026 at 2:03 PM
Firefox 147 just landed & it's pretty huge in terms of web features:
🎉 CSS anchor positioning
🎉 The navigation API
🎉 View transition types
🎉 Brotli support in Compression/DecompressionStream
🎉 CSS module imports
And more!
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147
🎉 CSS anchor positioning
🎉 The navigation API
🎉 View transition types
🎉 Brotli support in Compression/DecompressionStream
🎉 CSS module imports
And more!
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/147
5 Accessibility Checks to Run On Every Component: https://zeroheight.com/blog/5-accessibility-checks-to-run-on-every-component/
5 accessibility checks to run on every component - zeroheight
Hidde de Vries explains how to test components for accessibility, from keyboard support to screen readers and zoom.
zeroheight.com
January 8, 2026 at 6:44 PM
5 Accessibility Checks to Run On Every Component: https://zeroheight.com/blog/5-accessibility-checks-to-run-on-every-component/
Chrome DevTools Features I Use All The Time (And Why You Should Too): https://calendar.perfplanet.com/2025/chrome-devtools-all-the-time/
Chrome DevTools Features I Use All the Time (and Why You Should Too)
Most developers open Chrome DevTools, check a couple of network requests, maybe refresh the page once or twice — and that's it.
I used to do the same.
Over time, DevTools became something else entirely for me. Not just a debugging tool, but a way to understand how the browser actually experiences
calendar.perfplanet.com
January 8, 2026 at 5:44 PM
Chrome DevTools Features I Use All The Time (And Why You Should Too): https://calendar.perfplanet.com/2025/chrome-devtools-all-the-time/
Reposted by Frontend Focus 🚀
4 CSS Features Every Front-End Developer Should Know In 2026: https://nerdy.dev/4-css-features-every-front-end-developer-should-know-in-2026
4 CSS Features Every Front-End Developer Should Know In 2026 · January 7, 2026
Toolbelt worthy, powerful, and game-changing CSS you need for 2026.
nerdy.dev
January 8, 2026 at 1:44 PM
4 CSS Features Every Front-End Developer Should Know In 2026: https://nerdy.dev/4-css-features-every-front-end-developer-should-know-in-2026
The Cost of Consistency: Avoiding Design System Bottlenecks - https://omid.dev/2025/12/25/cost-of-consistency-design-systems
The Cost of Consistency: Avoiding Design System Bottlenecks
Lessons learned from building a comprehensive Angular-based design system and how to avoid the rigidity trap and abstraction tax.
omid.dev
January 8, 2026 at 4:44 PM
The Cost of Consistency: Avoiding Design System Bottlenecks - https://omid.dev/2025/12/25/cost-of-consistency-design-systems
Reposted by Frontend Focus 🚀
Adam Wathan of Tailwind CSS:
"75% of the people on our engineering team lost their jobs here yesterday because of the brutal impact AI has had on our business"
"75% of the people on our engineering team lost their jobs here yesterday because of the brutal impact AI has had on our business"
feat: add llms.txt endpoint for LLM-optimized documentation by quantizor · Pull Request #2388 · tailwindlabs/tailwindcss.com
Add /llms.txt endpoint that serves a concatenated, text-only version of all Tailwind CSS documentation pages optimized for Large Language Model consumption.
Extract text from MDX files, removing J...
github.com
January 8, 2026 at 10:48 AM
Adam Wathan of Tailwind CSS:
"75% of the people on our engineering team lost their jobs here yesterday because of the brutal impact AI has had on our business"
"75% of the people on our engineering team lost their jobs here yesterday because of the brutal impact AI has had on our business"
ExposedByDefault: What Your Browser Reveals About You - https://neberej.github.io/exposedbydefault/
ExposedByDefault - What Your Browser Reveals About You
Discover all the information your browser shares automatically, including fingerprints, permissions, hardware, and privacy settings. 100% client-side, no data is sent.
neberej.github.io
January 8, 2026 at 3:44 PM
ExposedByDefault: What Your Browser Reveals About You - https://neberej.github.io/exposedbydefault/
color-input: A Modern Color Picker with Support for All Color Spaces - https://github.com/argyleink/css-color-component
GitHub - argyleink/css-color-component: a modern color picker for the web with support for all spaces
a modern color picker for the web with support for all spaces - argyleink/css-color-component
github.com
January 8, 2026 at 2:44 PM
color-input: A Modern Color Picker with Support for All Color Spaces - https://github.com/argyleink/css-color-component
4 CSS Features Every Front-End Developer Should Know In 2026: https://nerdy.dev/4-css-features-every-front-end-developer-should-know-in-2026
4 CSS Features Every Front-End Developer Should Know In 2026 · January 7, 2026
Toolbelt worthy, powerful, and game-changing CSS you need for 2026.
nerdy.dev
January 8, 2026 at 1:44 PM
4 CSS Features Every Front-End Developer Should Know In 2026: https://nerdy.dev/4-css-features-every-front-end-developer-should-know-in-2026
Directional CSS with Scroll-State (Scrolled): https://una.im/scroll-state-scrolled
una.im | Directional CSS with scroll-state(scrolled)
Style based on scroll direction with this new scroll-state query feature.
una.im
January 8, 2026 at 12:44 PM
Directional CSS with Scroll-State (Scrolled): https://una.im/scroll-state-scrolled
Why Federated Design Systems Keep Failing: https://www.shaunbent.co.uk/blog/why-federated-design-systems-keep-failing/
Why Federated Design Systems Keep Failing
Why do federated design systems keep failing? I watched it happen twice at Spotify. Here's what actually happened, where they broke down, and why centralised models usually work better.
www.shaunbent.co.uk
January 8, 2026 at 11:44 AM
Why Federated Design Systems Keep Failing: https://www.shaunbent.co.uk/blog/why-federated-design-systems-keep-failing/
The first issue of the year is here!
Features links to @nerdy.dev, @lea.verou.me, @jensimmons.bsky.social, @una.im and others.
🚀 frontendfoc.us/issues/723
Features links to @nerdy.dev, @lea.verou.me, @jensimmons.bsky.social, @una.im and others.
🚀 frontendfoc.us/issues/723
January 8, 2026 at 10:53 AM
The first issue of the year is here!
Features links to @nerdy.dev, @lea.verou.me, @jensimmons.bsky.social, @una.im and others.
🚀 frontendfoc.us/issues/723
Features links to @nerdy.dev, @lea.verou.me, @jensimmons.bsky.social, @una.im and others.
🚀 frontendfoc.us/issues/723
Adam Wathan of Tailwind CSS:
"75% of the people on our engineering team lost their jobs here yesterday because of the brutal impact AI has had on our business"
"75% of the people on our engineering team lost their jobs here yesterday because of the brutal impact AI has had on our business"
feat: add llms.txt endpoint for LLM-optimized documentation by quantizor · Pull Request #2388 · tailwindlabs/tailwindcss.com
Add /llms.txt endpoint that serves a concatenated, text-only version of all Tailwind CSS documentation pages optimized for Large Language Model consumption.
Extract text from MDX files, removing J...
github.com
January 8, 2026 at 10:48 AM
Adam Wathan of Tailwind CSS:
"75% of the people on our engineering team lost their jobs here yesterday because of the brutal impact AI has had on our business"
"75% of the people on our engineering team lost their jobs here yesterday because of the brutal impact AI has had on our business"