Frontend Focus πŸš€'s Avatar

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.

1,892 Followers  |  53 Following  |  474 Posts  |  Joined: 21.10.2024
Posts Following

Posts by Frontend Focus πŸš€ (@frontendfocus.bsky.social)

Preview
PlaceCats - Purr-fect Placeholders Free, fast, and adorable cat placeholders for your design projects. Supports resizing, fit/position adjustments, and grayscale.

😻 Place Cats: Image Placeholders for Your In-Progress Projects - https://placecats.com/

26.02.2026 21:44 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
How to scale elements and their layout with CSS "zoom" The CSS zoom property, unlike scale, affects an element's layout size, not just its visual appearance.

How to scale elements and their layout with CSS "zoom": https://www.stefanjudis.com/today-i-learned/css-zoom-to-scale-elements/

26.02.2026 20:44 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
A Complete Guide to Bookmarklets | CSS-Tricks Browsers don't just let you bookmark web pages. You can also bookmark JavaScript, allowing you to do so much more than merely save pages.

A Complete Guide to Bookmarklets: https://css-tricks.com/a-complete-guide-to-bookmarklets/

26.02.2026 19:44 β€” πŸ‘ 2    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
Learn Visual Studio Code A collection of 150+ tips and customizations on using Visual Studio Code, the world's most popular code editor. These tips are almost entirely based on built-in features of VS Code – no extensions or external tools needed. You'll learn how to customize VS Code's UI, find and change settings you didn't know existed, use little-known features, and lots more.Includes more than 150 tips across 346 pages (PDF version; EPUB is more variable in page length) with 450+ full-color, high-resolution screenshots and captions with clear instructions on every feature discussed. Nearly all features and screenshots are up to date with the latest version of VS Code as of January 2026.There are tips in here for beginners, but most of the tips are little-known features that even advanced users don't know about. It doesn't matter if you're a Mac or Windows user, almost all the content is applicable to both operating systems. Much of the code examples are focused on front-end technologies (JS, HTML, CSS, TypeScript, etc.) but the concepts are applicable to any language used inside VS Code.Lots of unique content is covered, including: Using the Settings UI Little-known Terminal Tips The Code Snippets feature Editing Keyboard Shortcuts Using Zen Mode VS Code Workspaces Working with Profiles Extension Trust & Security Managing Tabs & Windows Customizing Labels & Buttons Using IntelliSense Accessibility Tips ... and lots more! Some of the content includes links to animated GIFs so you can see the tip or customization in action. The GIFs aren't necessary to understand the content, but they are helpful if you're reading online. Check out a couple of sample pages below!

Learn Visual Studio Code: https://lazarpress.gumroad.com/l/learnvscode

26.02.2026 18:44 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
Sprites on the Web β€’ Josh W. Comeau In game development, it’s common to use spritesheets for animation, but this technique isn’t as widely used on the web. Which is a shame, because we can do some pretty cool stuff with sprites! In this post, we’ll share the niche CSS function you can use to leverage this technique, and explore some of the potential use cases.

Sprites on the Web: https://www.joshwcomeau.com/animation/sprites/

25.02.2026 20:44 β€” πŸ‘ 2    πŸ” 1    πŸ’¬ 0    πŸ“Œ 0
Preview
The Four New Color Palettes added to Tailwind CSS v4.2 Mauve, olive, mist, and taupe join the default palette β€” all offer a swatch of tinted neutrals.

The Four New Color Palettes added to Tailwind CSS v4.2: https://superhighway.dev/tailwind-v4-2-new-palettes

25.02.2026 22:44 β€” πŸ‘ 0    πŸ” 1    πŸ’¬ 0    πŸ“Œ 0
Preview
GitHub - Toheeb/base: The web's first multipurpose classless stylesheet, with the most semantic rules, for complete customization and personalization of a webpage. The web's first multipurpose classless stylesheet, with the most semantic rules, for complete customization and personalization of a webpage. - Toheeb/base

Base.css: A Multi-Purpose, Classless Stylesheet With Semantic Rules - https://github.com/Toheeb/base

26.02.2026 01:44 β€” πŸ‘ 1    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
PWAscore - PWA Browser Scorecards Compare Progressive Web App support across popular mobile (and soon, desktop) browsers.

PWAscore: Compare Progressive Web App Capabilities Across Popular Mobile Browsers - https://pwascore.com/

26.02.2026 00:44 β€” πŸ‘ 1    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
Everything you never wanted to know about visually-hidden The one where I attempt to answer a question

Everything You Never Wanted to Know About `visually-hidden`: https://dbushell.com/2026/02/20/visually-hidden/

25.02.2026 23:44 β€” πŸ‘ 1    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
The Four New Color Palettes added to Tailwind CSS v4.2 Mauve, olive, mist, and taupe join the default palette β€” all offer a swatch of tinted neutrals.

The Four New Color Palettes added to Tailwind CSS v4.2: https://superhighway.dev/tailwind-v4-2-new-palettes

25.02.2026 22:44 β€” πŸ‘ 0    πŸ” 1    πŸ’¬ 0    πŸ“Œ 0
Preview
Underlining Links With CSS A practical guide to styling link underlines with modern CSS text-decoration properties. Perfect for bookmarking when you need a quick reference!

Underlining Links With CSS: https://www.alwaystwisted.com/articles/underlining-links-with-css

25.02.2026 21:44 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
Sprites on the Web β€’ Josh W. Comeau In game development, it’s common to use spritesheets for animation, but this technique isn’t as widely used on the web. Which is a shame, because we can do some pretty cool stuff with sprites! In this post, we’ll share the niche CSS function you can use to leverage this technique, and explore some of the potential use cases.

Sprites on the Web: https://www.joshwcomeau.com/animation/sprites/

25.02.2026 20:44 β€” πŸ‘ 2    πŸ” 1    πŸ’¬ 0    πŸ“Œ 0
Preview
Loading Smarter: SVG vs. Raster Loaders in Modern Web Design | CSS-Tricks Let’s get nuanced in this article and discuss the capabilities of both SVG and raster imaged so that you can make informed decisions in your own work.

Loading Smarter: SVG vs. Raster Loaders in Modern Web Design - https://css-tricks.com/loading-smarter-svg-vs-raster-loaders-in-modern-web-design/

25.02.2026 19:44 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
An in-depth guide to customising lists with CSS Richard Rutter helps you to make sense of list-style, list-item, ::marker, counters(), counter(), @counter-style, symbolic, symbols(), symbols and more to push your HTML and CSS lists to the next level.

An In-Depth Guide to Customizing Lists With CSS: https://piccalil.li/blog/an-in-depth-guide-to-customising-lists-with-css/ (Richard goes deep, with code examples aplenty. You'll probably come away having learnt something here.)

25.02.2026 18:44 β€” πŸ‘ 1    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
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.

Interop 2026: Browsers Are Finally Catching Up - https://www.youtube.com/watch?v=UVIeyRE6zLU

25.02.2026 17:44 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
Native HTML components don’t guarantee good UX Adam Silver – interaction designer - London, UK

Native HTML Components Don’t Guarantee Good UX: https://adamsilver.io/blog/native-html-components-dont-guarantee-good-ux/

25.02.2026 16:44 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
A Designer’s Guide To Eco-Friendly Interfaces β€” Smashing Magazine Every high-resolution hero image, autoplay video, and complex JavaScript animation carries a cost. Sustainable UX challenges the era of β€œunlimited pixels” and reframes performance as responsibility. In 2026, truly sophisticated design is defined not by how much it adds, but by how thoughtfully it reduces its footprint.

A Designer’s Guide To Eco-Friendly Interfaces: https://www.smashingmagazine.com/2026/02/designer-guide-eco-friendly-interfaces/

25.02.2026 15:44 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
Standard HTML Video & Audio Lazy-loading is Coming! | Scott Jehl, Web Designer/Developer A quick update on my team's work to bring video and audio lazy loading to browsers today

Standard HTML Video & Audio Lazy-loading is coming: https://scottjehl.com/posts/lazy-media/

25.02.2026 14:44 β€” πŸ‘ 2    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Abstract geometric artwork with big white dots on black background.

Abstract geometric artwork with big white dots on black background.

Abstract circular geometric white dots on black.

Abstract circular geometric white dots on black.

Abstract black arrows in circles, on white background.

Abstract black arrows in circles, on white background.

Abstract thin dotted line graphics.

Abstract thin dotted line graphics.

You'll never guess how I made these illustrations!

(pssst: I'm using CSS gap decorations)

Check out the source code ➑️ patrickbrosset.com/lab/gap-deco...
⚠️ This currently requires a recent Chromium browser.

25.02.2026 14:07 β€” πŸ‘ 30    πŸ” 6    πŸ’¬ 3    πŸ“Œ 1
Preview
The Four New Color Palettes added to Tailwind CSS v4.2 Mauve, olive, mist, and taupe join the default palette β€” all offer a swatch of tinted neutrals.

Here's a quick look at the four new color palette options recently added to Tailwind CSS.

25.02.2026 12:22 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0

New issue later today!

25.02.2026 11:43 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
sugarcube β€’ sugarcube Design tokens, generated CSS, and optional components. Build front ends on strong, reusable foundations.

Introducing the 'sugarcube' Toolkit: https://sugarcube.sh/

24.02.2026 13:44 β€” πŸ‘ 1    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
GitHub - keithamus/invokers-polyfill Contribute to keithamus/invokers-polyfill development by creating an account on GitHub.

Invoker Buttons Polyfill: A Polyfill for the Newly Supported `command` and `commandfor` HTML Attributes - https://github.com/keithamus/invokers-polyfill

24.02.2026 12:44 β€” πŸ‘ 2    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
A Broken Heart Or, getting a 100x speedup with one dumb line of code.

How a πŸ’” Broken Heart made a page 100x slower in Safari: https://allenpike.com/2026/a-broken-heart/

12.02.2026 02:44 β€” πŸ‘ 2    πŸ” 1    πŸ’¬ 0    πŸ“Œ 2
Preview
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.

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.

12.02.2026 17:07 β€” πŸ‘ 36    πŸ” 7    πŸ’¬ 3    πŸ“Œ 0
Preview
State of JavaScript 2025 The 2025 edition of the annual survey about the latest trends in the JavaScript ecosystem.

State of JavaScript 2025: https://2025.stateofjs.com/en-US/

12.02.2026 03:44 β€” πŸ‘ 1    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
A Broken Heart Or, getting a 100x speedup with one dumb line of code.

How a πŸ’” Broken Heart made a page 100x slower in Safari: https://allenpike.com/2026/a-broken-heart/

12.02.2026 02:44 β€” πŸ‘ 2    πŸ” 1    πŸ’¬ 0    πŸ“Œ 2
Preview
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.

A Guide to Browser DevTools: The Network Monitor: https://spin.atomicobject.com/devtools-network-monitor/

12.02.2026 01:44 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
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.

The Browser Hates Surprises: https://frontendmasters.com/blog/the-browser-hates-surprises/

12.02.2026 00:44 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0
Preview
Interop 2025: A year of convergence Interop 2025 has come to a close, and the results speak for themselves.

Interop 2025: A Year of Convergence - https://webkit.org/blog/17808/interop-2025-review/

11.02.2026 23:44 β€” πŸ‘ 0    πŸ” 0    πŸ’¬ 0    πŸ“Œ 0