Frontend Focus 🚀

Смотрите любимые видео, слушайте любимые песни, загружайте собственные ролики и делитесь ими с друзьями, близкими и целым миром.

Smart Layouts: https://www.youtube.com/watch?v=_njUxg5UfR0

Смотрите любимые видео, слушайте любимые песни, загружайте собственные ролики и делитесь ими с друзьями, близкими и целым миром.

Trying the New CodePen 2.0: https://www.youtube.com/watch?v=0R4l8nlmCAQ

The most-seen UI on the Internet? Redesigning Turnstile and Challenge Pages We serve 7.6 billion challenges daily. Here’s how we used research, AAA accessibility standards, and a unified architecture to redesign the Internet’s most-seen user interface.

The Most-Seen UI on the Internet? Redesigning Turnstile And Challenge Pages: https://blog.cloudflare.com/the-most-seen-ui-on-the-internet-redesigning-turnstile-and-challenge-pages/

The Odometer Effect (without JavaScript) – Frontend Masters Blog We can take a value set in an HTML attribute and use it in CSS, even extracting each individual digit in order to animate separately.

Preethi shares how to approach creating a dynamic display for showing changing numeric values with just CSS and HTML: https://frontendmasters.com/blog/the-odometer-effect-in-css/

Sticky Grid Scroll: Building a Scroll-Driven Animated Grid | Codrops Learn how to build a structured scroll-driven image grid where movement unfolds progressively within a sticky layout.

Sticky Grid Scroll: Building a Scroll-Driven Animated Grid - https://tympanus.net/codrops/2026/03/02/sticky-grid-scroll-building-a-scroll-driven-animated-grid/

Get features faster with Chrome's two-week release cycle  |  Blog  |  Chrome for Developers From September 2026 Chrome releases will be every two weeks.

Chrome Is Moving To A Two-Week Release Cycle: https://developer.chrome.com/blog/chrome-two-week-release

You can use newline characters in URLs We locate web content using special addresses called URLs. We are all familiar with addresses like https://google.com. Sometimes, URLs can get long and they can become difficult to read. Thus, we might be tempted to format them like so in HTML using newline and tab characters, like so: <a href="https://lemire.me/blog/2026/02/21/ how-fast-do-browsers-correct-utf-16-strings/">my blog post</a> It will … Continue reading You can use newline characters in URLs

You Can Use Newline Characters in URLs: https://lemire.me/blog/2026/02/28/you-can-use-newline-characters-in-urls/

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.

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!

Soon across all browsers: CSS contrast-color()!

It returns a color that has guaranteed contrast against an other color.

Very useful for computing text color with enough contrast against an unknown background.

Demo ➡️ codepen.io/captainbross...
Docs ➡️ developer.mozilla.org/en-US/docs/W...

It seems we can now customize the select element, right? right?!

Demo: codepen.io/t_afif/pen/P... via @codepen.io

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/

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/

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/

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 &amp; Security Managing Tabs &amp; Windows Customizing Labels &amp; 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

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/

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

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

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/

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/

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

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

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/

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/

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.)

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

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/

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/

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/

Abstract geometric artwork with big white dots on black background.

Abstract circular geometric white dots on black.

Abstract black arrows in circles, on white background.

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.

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.