Frosted glass from games to the web

Let’s create a stunning glass effect step by step.

The modern guide to robots.txt

How to use it avoiding the pitfalls.

Avoid hotlinking images with CORP

How to stop other websites from serving your images.

Are icon fonts a bad practice?

What’s certain is that SVG icons are the better choice.

Full-bleed layout with modern CSS

How to expand a contained element to the edge of a page.

Math4Devs

The JavaScript equivalents of mathematical symbols.

HTMHell Advent Calendar 2024

24 articles in 24 days, mainly on front-end development.

Advent of Code 2024

An advent calendar of small programming puzzles.

Web Performance Calendar 2024

The yearly publication about everything web performance.

Development advent calendars for 2024

A variety of advent calendars, mainly on web development.

The best approach to SVG icons

Inline SVG, ‘use’, ‘img’, spritesheet, or JSX?

Turn off AI features by default

Why you should only activate them when needed.

Which IDEs do software engineers love?

Developer’s favorite coding editors with AI features.

Logo link in the header

What should be the alt text of the logo image?

Git ‘includeIf’

The configuration superpower you need to know.

A more powerful CSS attr() function

What to expect from the upcoming enhancement.

New to the web platform (November 2024)

The latest browser features at a glance.

Next-level frosted glass effect

How you can make the effect much more vibrant.

“Value is produced from caring. By caring, we produce quality, which in turn produces users who are delighted by our products and want to use them.”

Smooth multi-page experiences

How to get started with just a single line of CSS.

Layout grids in the browser

An overlay to view your grid system in action.

A layered approach to speculation rules

How you can accelerate user paths even more.

Never trust AI type

AI’s struggle with typography, illustrated by an example.

The sorry state of states

Figma assets need better design-code alignment.

Viewport resize behavior on mobile

How to control it with ‘interactive-widget’.

How people use Google

“Google has become every brand’s home page.”

Figma’s first draft AI feature

The design tools’ AI isn’t what you might think.

Authors Together

The new homes of classic A Book Apart books.

The 70% problem

“AI tools help experienced developers more than beginners.”

Mastodon/Bluesky comments

A web component to show comments from Mastodon and Bluesky.

Reclaim the internet

Mozilla’s rebrand for the next era of tech.

Creating a scroll grid

A multi-directional layout with a navigation aid.

CSS wrapped 2024

The amazing CSS journey in snippets and demos.

Optimizing SVG usage for web performance

A comparison of various SVG loading techniques.

React version 19

The UI library is now on npm, supports web components, and more.

Stop wireframing

Why wireframes are outdated and what to use today.

Beware the ‘early Januaries’ content pattern

User-provided data can be unevenly distributed.

How web browser features get built

Guess what? You can pay for browser features!

Gauge Generator

An online tool to quickly create beautiful gauges.

Lighthouse feed finder

Surface all public RSS/Atom feeds on any website.

Countless

Explore, compare, and calculate costs for every AI model.

The law of diminishing returns

Striking the right balance can be tough.

The evolution of instant web

How speculation rules complement traditional speed optimization.

Your website is a restaurant

What websites and restaurants have in common.

Easing Wizard

Easing made easy for CSS and Tailwind CSS.

Will AI eat the browser?

“Over the next decade the browser will need to adapt or die.”

Stop saying ‘Learn more’

How to create buttons that convert visitors into patrons.

Do we need even more top-level domains?

The good, the bad, and the ugly of new TLDs.

Sustainable font choices in digital design

“More sustainable fonts are also more legible and accessible.”

Checklist for accessible data visualizations

Key steps that help you create accessible charts.

Solved by modern CSS: feature image

Feature image with container queries and :has().

Cloudflare Radar 2024 Year in Review

Trends and patterns in internet usage over the year.

Buildless testing

How to test your JavaScript code in the browser.

Firefox removes ‘do not track’ support

Will other web browsers follow this move?

The State of UX in 2025

Design control is shifting to stakeholders and algorithms.

The next era of design is intent-driven

How adaptive UIs are transforming user-centered design.

WebKit features in Safari 18.2

New CSS options, including View Transitions, and more.

Isomorphic web components

Who says web components can’t be rendered server-side?

Baseline 2024

How the initiative supports web developers today.

Bing removes cache link from search results

Microsoft follows Google’s earlier removal of the cache link.

Fluid superscripts and subscripts

A modern solution using CSS calculations.

W3C Statement on ethical web principles

“They remind us that the web extends beyond technology.”

Another year, another Figma pricing update

“They’re forcing you to buy products you probably don’t need.”

12 Days of Web 2024

A year-end celebration of fundamental web technologies.

Stop building features ‘for exposure’

Great UX design doesn’t ensure valuable outcomes.

The fine art of hyphenation

Pros and cons of various hyphenation techniques.

CMS market share trends

Today’s market-dominating content management systems.

Panel of advisors to ask for advice

A simple way to guide yourself through tough decisions.

InclusiveColors

A versatile tool for creating accessible color palettes.

“Be inclusive, be kind, be transparent, and contribute to a better web. We have ample evidence of what doesn’t work and of things that have gone wrong, and we can take carefully considered steps towards something better.”

Harper

An open-source grammar checker for developers.

Page by page

How pagination makes the web accessible.

Minimap section headers in VS Code

How to optimize minimaps for your coding workflow.

Map of GitHub

A map of 400,000+ GitHub projects, each shown as a dot.

How to figure out good color palettes

A guide to color palettes for data visualizations.

CSS @import is cool, actually

It delivers some useful features a ‘link’ doesn’t offer.

State of JavaScript 2024

What JavaScript has been up to this year!

‘Experience Design’ is better than ‘Product Design’

“It might be the best term we came up with so far.”

25 years of Dillo

Firefox isn’t the only browser turning 25 this year.

ChatGPT Search

The AI-powered search engine from OpenAI for public use.

When users interact

What user interactions during page loading reveal.

Color Buddy

A phenomenal tool for creating and checking color palettes.

CSS ‘transition-behavior’ property

Browser support, Syntax, basic usage, and demo.

The rise of the AI crawler

What it means for AI users and website owners.

Approaches to amplify your design projects

The key is adjusting your mindset before kickoff.

CSS ‘content-visibility’

What it is, how it works, and where it shines.

Does schema still matter in AI search?

Though not required, it still has its place and value.

HTML conformance

A comparison of 6.5 popular npm validator packages.

CSS ‘::target-text’ for text highlighting

How browsers can make text sharing more user-friendly.

Free GitHub Copilot for VS Code

Microsoft adds three free AI models to its code editor.

The Automattic and WP Engine conflict

What WordPress users need to know about.

Penpot’s upcoming business model

The approach of the open-source Figma alternative.

Getting oriented with HTML video

How to serve a clip in portrait or landscape format.

Bringing more magic to Bing Image Creator

Bing now lets you make images via the search bar.

New to the web platform (December 2024)

The latest browser features at a glance.

Where did all the design grids go?

Modern design tools simplify life but dull the basics.

Why I’m excited about ‘text-box-trim’

How a new CSS capability will boost our designs.

Every design token is a feature

“Like features, tokens can create little piles of technical debt.”

JavaScript Import Maps

A powerful way to handle JS dependencies in the browser.

My favourite color is Chuck Norris red

What makes the web work, no matter what we throw at it.