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 🚀
Automattic files counterclaims against WP Engine's October 2024 lawsuit and alleges that WP Engine has been abusing the WordPress trademark (Sarah Perez/TechCrunch)
Main Link | Techmeme Permalink
Main Link | Techmeme Permalink
October 24, 2025 at 3:35 PM
Automattic files counterclaims against WP Engine's October 2024 lawsuit and alleges that WP Engine has been abusing the WordPress trademark (Sarah Perez/TechCrunch)
Main Link | Techmeme Permalink
Main Link | Techmeme Permalink
Reposted by Frontend Focus 🚀
💌 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
November 20, 2024 at 4:36 PM
💌 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 🚀
Interop 2025 is looking good!
October 20, 2025 at 7:53 PM
Interop 2025 is looking good!
Reposted by Frontend Focus 🚀
I often see the word 'kerning' used incorrectly by CSS heads when the term they're actually looking for to describe letter spacing is 'tracking'. Let me explain using CSS terminology!
Tracking is the same as gap in flex layouts; consistent spacing applied across the entire text.
But what if... 🧵
Tracking is the same as gap in flex layouts; consistent spacing applied across the entire text.
But what if... 🧵
October 16, 2025 at 10:12 AM
I often see the word 'kerning' used incorrectly by CSS heads when the term they're actually looking for to describe letter spacing is 'tracking'. Let me explain using CSS terminology!
Tracking is the same as gap in flex layouts; consistent spacing applied across the entire text.
But what if... 🧵
Tracking is the same as gap in flex layouts; consistent spacing applied across the entire text.
But what if... 🧵
Shares some solid scenarios where you may want to use this handy function. https://www.amitmerchant.com/the-progress-function-css/
The new progress() function in CSS
Imagine a responsive hero image that becomes more transparent as the viewport gets narrower, helping text readability on small screens or a card that scales up slightly as the viewport grows, adding a subtle polish.
www.amitmerchant.com
October 16, 2025 at 6:44 PM
Shares some solid scenarios where you may want to use this handy function. https://www.amitmerchant.com/the-progress-function-css/
Interop Feature Ranking: https://interop-rank.jakearchibald.com/
Help rank the focus areas for Interop 2026!
Help rank the focus areas for Interop 2026!
Interop Feature Ranking
Rank the web platform features you care most about
interop-rank.jakearchibald.com
October 16, 2025 at 5:44 PM
Interop Feature Ranking: https://interop-rank.jakearchibald.com/
Help rank the focus areas for Interop 2026!
Help rank the focus areas for Interop 2026!
CSS Grid: A Helpful Mental Model and The Power of Grid Lines - https://webkit.org/blog/17474/css-grid-a-helpful-mental-model-and-the-power-of-grid-lines/
CSS Grid: A helpful mental model and the power of grid lines
Grid is a powerful, flexible tool that brings complex layouts to life.
webkit.org
October 16, 2025 at 4:44 PM
CSS Grid: A Helpful Mental Model and The Power of Grid Lines - https://webkit.org/blog/17474/css-grid-a-helpful-mental-model-and-the-power-of-grid-lines/
Vite: The Documentary - https://www.youtube.com/watch?v=bmWQqAKLgT4
Auf YouTube findest du die angesagtesten Videos und Tracks. Außerdem kannst du eigene Inhalte hochladen und mit Freunden oder gleich der ganzen Welt teilen.
www.youtube.com
October 16, 2025 at 3:44 PM
Vite: The Documentary - https://www.youtube.com/watch?v=bmWQqAKLgT4
The W3C logo has had a refresh: https://www.w3.org/blog/2025/w3c-logo-refresh-more-than-a-cosmetic-change-a-small-step-towards-durable-and-sustainable-success/
W3C logo refresh: more than a cosmetic change, a small step towards durable and sustainable success
In this blog post, W3C CEO Seth Dobbs positions W3C’s adoption of a new logo and tagline as one step towards W3C achieving key strategic goals by drawing attention and making the right impression. Read more to find out how this helps in terms of welcoming new stakeholders, diversifying our support, and broadening our impact.
www.w3.org
October 16, 2025 at 2:44 PM
The W3C logo has had a refresh: https://www.w3.org/blog/2025/w3c-logo-refresh-more-than-a-cosmetic-change-a-small-step-towards-durable-and-sustainable-success/
Modern CSS Round-Out Tabs: https://frontendmasters.com/blog/modern-css-round-out-tabs/
Chris revisits an old tabular user interface pattern and updates it with `shape`.
Chris revisits an old tabular user interface pattern and updates it with `shape`.
Modern CSS Round-Out Tabs – Frontend Masters Blog
We can use `shape()` to carve away the edges of an element to look like a folder tab. By hand.
frontendmasters.com
October 16, 2025 at 1:44 PM
Modern CSS Round-Out Tabs: https://frontendmasters.com/blog/modern-css-round-out-tabs/
Chris revisits an old tabular user interface pattern and updates it with `shape`.
Chris revisits an old tabular user interface pattern and updates it with `shape`.
Dev Tools: 20+ Privacy-First Productivity Tools for Developers - https://dev-tool.dev/
Dev Tools - Your Ultimate Developer Toolkit | Free Online Tools
Free online developer tools including JSON viewer, Base64 converter, UUID generator, JWT decoder, and more. All tools work offline for privacy and speed. No registration required.
dev-tool.dev
October 16, 2025 at 12:44 PM
Dev Tools: 20+ Privacy-First Productivity Tools for Developers - https://dev-tool.dev/
ogImage.click: A Free Open Graph Image Generator - https://ogimage.click/
Free OG Image Generator
Create beautiful OG Images, Twitter/X Header Images, Blog Featured Images & more for free, in simple clicks.
ogimage.click
October 16, 2025 at 10:44 AM
ogImage.click: A Free Open Graph Image Generator - https://ogimage.click/
Reposted by Frontend Focus 🚀
As an experiment, we (the Firefox team) wanted to try a new way to get feedback on which Interop proposals matter most.
So, here's a web app where you can rank the proposals you care about, giving us data we can use when reviewing which ones to champion.
interop-rank.jakearchibald.com
So, here's a web app where you can rank the proposals you care about, giving us data we can use when reviewing which ones to champion.
interop-rank.jakearchibald.com
Interop Feature Ranking
Rank the web platform features you care most about
interop-rank.jakearchibald.com
October 9, 2025 at 5:00 PM
As an experiment, we (the Firefox team) wanted to try a new way to get feedback on which Interop proposals matter most.
So, here's a web app where you can rank the proposals you care about, giving us data we can use when reviewing which ones to champion.
interop-rank.jakearchibald.com
So, here's a web app where you can rank the proposals you care about, giving us data we can use when reviewing which ones to champion.
interop-rank.jakearchibald.com
Reposted by Frontend Focus 🚀
What an amazing milestone.
Celebrating 1 Trillion Web Pages Archived | Internet Archive Blogs
The series of events scheduled throughout October will highlight the memories, makers, and movements that have made this achievement possible, and will look ahead to the future of web preservation as we continue building the web’s collective memory together.
blog.archive.org
October 7, 2025 at 8:31 PM
What an amazing milestone.
Reposted by Frontend Focus 🚀
BlueSky Likes: Flexible Components for Displaying Bluesky Likes - https://github.com/LeaVerou/bluesky-likes
GitHub - LeaVerou/bluesky-likes: Flexible components for displaying Bluesky likes
Flexible components for displaying Bluesky likes. Contribute to LeaVerou/bluesky-likes development by creating an account on GitHub.
github.com
September 17, 2025 at 8:44 PM
BlueSky Likes: Flexible Components for Displaying Bluesky Likes - https://github.com/LeaVerou/bluesky-likes
Reposted by Frontend Focus 🚀
Anchor Positioning has a way to declare where the item appears. Use the `position-area` property with pre-named areas! @saron.bsky.social realized maybe some of the names are confusing. Read more & help decide — should the names be changed?
webkit.org/blog/17417/p...
What do you think??
webkit.org/blog/17417/p...
What do you think??
Position-area: Clear and explicit or short and sweet?
When I first learned anchor positioning, I built a demo to help me figure out how it all worked.
webkit.org
September 30, 2025 at 6:11 PM
Anchor Positioning has a way to declare where the item appears. Use the `position-area` property with pre-named areas! @saron.bsky.social realized maybe some of the names are confusing. Read more & help decide — should the names be changed?
webkit.org/blog/17417/p...
What do you think??
webkit.org/blog/17417/p...
What do you think??
Reposted by Frontend Focus 🚀
Color Shifting in CSS: https://www.joshwcomeau.com/animation/color-shifting/
Color Shifting in CSS • Josh W. Comeau
A little while ago, I was trying to animate an element’s background color, so that it cycled through the rainbow. Seems easy, but it turns out, browsers have a surprisingly big limitation when it comes to color processing! In this tutorial, we’ll dig into the issue, and I’ll share a couple of strategies you can use to work around this limitation.
www.joshwcomeau.com
September 20, 2025 at 6:44 AM
Color Shifting in CSS: https://www.joshwcomeau.com/animation/color-shifting/
Reposted by Frontend Focus 🚀
Follow-the-Leader Pattern with CSS Anchor Positioning: https://una.im/follow-the-anchor/
una.im | Follow-the-leader pattern with CSS anchor positioning
Learn how to create a dynamically re-anchored pointer element.
una.im
September 18, 2025 at 1:44 AM
Follow-the-Leader Pattern with CSS Anchor Positioning: https://una.im/follow-the-anchor/
Reposted by Frontend Focus 🚀
Should You Preload Fonts for Performance? https://www.erwinhofman.com/blog/should-you-preload-fonts-for-performance/
Should you preload fonts for performance?
Preloading fonts can speed up or slow down your site. Learn how it affects FCP/LCP, how Chrome handles preloads, and when to use them for better performance.
www.erwinhofman.com
September 19, 2025 at 8:44 PM
Should You Preload Fonts for Performance? https://www.erwinhofman.com/blog/should-you-preload-fonts-for-performance/
Reposted by Frontend Focus 🚀
The Basics of Anchor Positioning: https://ishadeed.com/article/anchor-positioning/
The Basics of Anchor Positioning
Learn the basics of Anchor Positioning in CSS
ishadeed.com
September 19, 2025 at 7:44 PM
The Basics of Anchor Positioning: https://ishadeed.com/article/anchor-positioning/
Is it Time to Un-Sass? https://css-tricks.com/is-it-time-to-un-sass/
Is it Time to Un-Sass? | CSS-Tricks
Many of the Sass features we've grown to love have made their way into native CSS in some shape or form. So, should we still use Sass? This is how developer Jeff Bridgforth is thinking about it.
css-tricks.com
September 20, 2025 at 9:44 AM
Is it Time to Un-Sass? https://css-tricks.com/is-it-time-to-un-sass/
Reposted by Frontend Focus 🚀
10 CSS Features I've Found Really Useful: https://koolcodez.com/blog/useful-css-features/
10 CSS Features I've Found Really Useful - Kool Codez
Some lesser known CSS properties that solve common problems elegantly.
koolcodez.com
September 20, 2025 at 12:44 AM
10 CSS Features I've Found Really Useful: https://koolcodez.com/blog/useful-css-features/
How To Minimize The Environmental Impact Of Your Website: https://www.smashingmagazine.com/2025/09/how-minimize-environmental-impact-website/
How To Minimize The Environmental Impact Of Your Website — Smashing Magazine
As responsible digital professionals, we are becoming increasingly aware of the environmental impact of our work and need to find effective and pragmatic ways to reduce it. James Chudley shares a new decarbonising approach that will help you to minimise the environmental impact of your website, benefiting people, profit, purpose, performance, and the planet.
www.smashingmagazine.com
September 20, 2025 at 8:44 AM
How To Minimize The Environmental Impact Of Your Website: https://www.smashingmagazine.com/2025/09/how-minimize-environmental-impact-website/
Webflow Donates $150,000 to Support Astro’s Open Source Mission: https://astro.build/blog/webflow-official-partner/
Webflow Donates $150,000 to Support Astro's Open Source Mission | Astro
We are happy to announce Webflow's $150,000 donation to Astro and selection of Astro to power their new AI code gen capabilities, coming soon.
astro.build
September 20, 2025 at 7:44 AM
Webflow Donates $150,000 to Support Astro’s Open Source Mission: https://astro.build/blog/webflow-official-partner/