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 🚀
How a 💔 Broken Heart made a page 100x slower in Safari: https://allenpike.com/2026/a-broken-heart/
A Broken Heart
Or, getting a 100x speedup with one dumb line of code.
allenpike.com
February 12, 2026 at 2:44 AM
How a 💔 Broken Heart made a page 100x slower in Safari: https://allenpike.com/2026/a-broken-heart/
Reposted by Frontend Focus 🚀
Interop 2026 launches today! If you want know on what it includes and what it means for web development — our article provides all the details. webkit.org/blog/17818/a...
Focus areas include Anchor Positioning, Style Queries, contrast-color(), WebTransport and much, much more.
Focus areas include Anchor Positioning, Style Queries, contrast-color(), WebTransport and much, much more.
Announcing Interop 2026
Exciting news for web developers, designers, and browser enthusiasts alike — Interop 2026 is here, continuing the mission of improving cross-browser interoperability.
webkit.org
February 12, 2026 at 5:07 PM
Interop 2026 launches today! If you want know on what it includes and what it means for web development — our article provides all the details. webkit.org/blog/17818/a...
Focus areas include Anchor Positioning, Style Queries, contrast-color(), WebTransport and much, much more.
Focus areas include Anchor Positioning, Style Queries, contrast-color(), WebTransport and much, much more.
State of JavaScript 2025: https://2025.stateofjs.com/en-US/
State of JavaScript 2025
The 2025 edition of the annual survey about the latest trends in the JavaScript ecosystem.
2025.stateofjs.com
February 12, 2026 at 3:44 AM
State of JavaScript 2025: https://2025.stateofjs.com/en-US/
How a 💔 Broken Heart made a page 100x slower in Safari: https://allenpike.com/2026/a-broken-heart/
A Broken Heart
Or, getting a 100x speedup with one dumb line of code.
allenpike.com
February 12, 2026 at 2:44 AM
How a 💔 Broken Heart made a page 100x slower in Safari: https://allenpike.com/2026/a-broken-heart/
A Guide to Browser DevTools: The Network Monitor: https://spin.atomicobject.com/devtools-network-monitor/
A Guide to Browser DevTools - The Network Monitor
Learn how to use the browser DevTools Network tab to inspect requests, debug APIs, and analyze page performance.
spin.atomicobject.com
February 12, 2026 at 1:44 AM
A Guide to Browser DevTools: The Network Monitor: https://spin.atomicobject.com/devtools-network-monitor/
The Browser Hates Surprises: https://frontendmasters.com/blog/the-browser-hates-surprises/
The Browser Hates Surprises – Frontend Masters Blog
To avoid page loading jank, there are things we can do to avoid content from shifting around, even if repainting is still necessary.
frontendmasters.com
February 12, 2026 at 12:44 AM
The Browser Hates Surprises: https://frontendmasters.com/blog/the-browser-hates-surprises/
Interop 2025: A Year of Convergence - https://webkit.org/blog/17808/interop-2025-review/
Interop 2025: A year of convergence
Interop 2025 has come to a close, and the results speak for themselves.
webkit.org
February 11, 2026 at 11:44 PM
Interop 2025: A Year of Convergence - https://webkit.org/blog/17808/interop-2025-review/
How (and Why) to Stop Users from Selecting Text on Your Website: https://www.readwriterachel.com/things-i-learned/2026/02/06/user-select.html
How (and Why) to Stop Users from Selecting Text on Your Website
There's an easy way to stop users from selecting text, but do it for the right reasons.
www.readwriterachel.com
February 11, 2026 at 9:44 PM
How (and Why) to Stop Users from Selecting Text on Your Website: https://www.readwriterachel.com/things-i-learned/2026/02/06/user-select.html
Reposted by Frontend Focus 🚀
How the Same Content Always Has Multiple Different Versions: https://a11yblog.com/2026/01/30/how-the-same-content-always-has-multiple-different-versions/
How the same content always has multiple different versions
We often talk about accessibility as if it were a checklist: contrast ratios, ARIA labels, keyboard navigation, screen readers. But it doesn’t explain why accessibility changes everything. The real issue is this: the same content can create clarity for one person and confusion, stress, or exclusion for another, without changing a single word. Understanding accessibility...
a11yblog.com
February 10, 2026 at 2:44 PM
How the Same Content Always Has Multiple Different Versions: https://a11yblog.com/2026/01/30/how-the-same-content-always-has-multiple-different-versions/
How Browsers Work: An Interactive Guide to How Browsers Work - https://howbrowserswork.com/
How Browsers Work
A guide on how browsers work.
howbrowserswork.com
February 11, 2026 at 7:44 PM
How Browsers Work: An Interactive Guide to How Browsers Work - https://howbrowserswork.com/
SVG Studio: A Browser-Based Tool for Working with SVGs - https://www.svg.studio/
SVG Studio
Inspect, edit, and optimize SVGs in the browser
www.svg.studio
February 11, 2026 at 6:44 PM
SVG Studio: A Browser-Based Tool for Working with SVGs - https://www.svg.studio/
Definitive Guide to Multi-Threaded Rendering on the Web: https://hackernoon.com/definitive-guide-to-multi-threaded-rendering-on-the-web
Definitive Guide to Multi-Threaded Rendering on the Web | HackerNoon
The web is still single-threaded, but modern apps aren’t. A practical guide to multithreaded rendering using workers, canvas, and DOM strategies.
hackernoon.com
February 11, 2026 at 5:44 PM
Definitive Guide to Multi-Threaded Rendering on the Web: https://hackernoon.com/definitive-guide-to-multi-threaded-rendering-on-the-web
How the Same Content Always Has Multiple Different Versions: https://a11yblog.com/2026/01/30/how-the-same-content-always-has-multiple-different-versions/
How the same content always has multiple different versions
We often talk about accessibility as if it were a checklist: contrast ratios, ARIA labels, keyboard navigation, screen readers. But it doesn’t explain why accessibility changes everything. The real issue is this: the same content can create clarity for one person and confusion, stress, or exclusion for another, without changing a single word. Understanding accessibility...
a11yblog.com
February 10, 2026 at 2:44 PM
How the Same Content Always Has Multiple Different Versions: https://a11yblog.com/2026/01/30/how-the-same-content-always-has-multiple-different-versions/
Reposted by Frontend Focus 🚀
The inaugural edition of The CSS Selection is out! Super interesting look into how the top 100k sites use CSS.
I very happily sponsored Barts work on this, go check it out!
I very happily sponsored Barts work on this, go check it out!
Announcing The CSS Selection!
📰 www.projectwallace.com/the-css-sele...
📚 100,000 websites
⏱️ 100+ metrics
🔖 7 chapters
The biggest deep-dive ever into real-world use of CSS across the globe. Dive in and find out some hidden gems. Also, see how much of 'the new CSS' is actually used!
📰 www.projectwallace.com/the-css-sele...
📚 100,000 websites
⏱️ 100+ metrics
🔖 7 chapters
The biggest deep-dive ever into real-world use of CSS across the globe. Dive in and find out some hidden gems. Also, see how much of 'the new CSS' is actually used!
The CSS Selection - 2026 Edition - Project Wallace
The CSS Selection shows real-world CSS usage from over 100,000 websites and looks at the most important metrics.
www.projectwallace.com
February 6, 2026 at 10:37 AM
The inaugural edition of The CSS Selection is out! Super interesting look into how the top 100k sites use CSS.
I very happily sponsored Barts work on this, go check it out!
I very happily sponsored Barts work on this, go check it out!
Reposted by Frontend Focus 🚀
February 3, 2026 at 5:26 PM
Reposted by Frontend Focus 🚀
I ported Super Monkey Ball to a website.
You can access it in the replies.
(or just type what you see in the video, I'm not your boss.)
You can access it in the replies.
(or just type what you see in the video, I'm not your boss.)
January 26, 2026 at 12:33 AM
I ported Super Monkey Ball to a website.
You can access it in the replies.
(or just type what you see in the video, I'm not your boss.)
You can access it in the replies.
(or just type what you see in the video, I'm not your boss.)
When Will CSS Grid Lanes Arrive? How Long Until We Can Use It? https://webkit.org/blog/17758/when-will-css-grid-lanes-arrive-how-long-until-we-can-use-it/
When will CSS Grid Lanes arrive? How long until we can use it?
Anytime an exciting new web technology starts to land in browsers, developers want to know “when in the world am I going to be able to use this?” Currently, the finalized syntax for Grid Lanes is available in Safari Technology Preview.
webkit.org
January 26, 2026 at 4:44 PM
When Will CSS Grid Lanes Arrive? How Long Until We Can Use It? https://webkit.org/blog/17758/when-will-css-grid-lanes-arrive-how-long-until-we-can-use-it/
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/