Introducing our grid-aware websites project

The goal is a developer toolkit to make eco-friendly choices.

The stretch keyword

A better alternative to ‘width: 100%’ in CSS?

Will we care about frameworks in the future?

“I dunno, but it will be a lot of fun to find out.”

Top 200 most common passwords

The most popular passwords by country and worldwide.

Universal browser display of web feeds

How to render RSS/Atom feeds in any browser.

Landing page templates

A collection of pre-designed web page layouts.

“In an online world dominated by huge online presences, maybe we should start spending more time celebrating smallness. Because, from a purely human perspective, small scale is the best scale.”

Motion

A modern animation library for JavaScript and React.

Git Cheat Sheet

A Git command guide to master version control.

The joy of accidentally weird-looking websites

Why proper fallback fonts make a difference.

Design systems Q&A

A session on modern design system practices.

JavaScript truthy and falsy

A fundamental yet often misunderstood concept.

Using auto layout in Figma

How to create responsive and robust components.

What’s your excuse for not using it?

“It is a crime people don’t use the web share API more.”

Checkout UX 2024

“Most sites have a long way to go to improve checkout UX.”

The root causes for the development-design mismatch

“Product designers will have to give up their beloved free-form canvas.”

Types of disability

Overview of seeing, hearing, moving, and thinking disabilities.

Why responsive design is failing modern users

“Responsive design isn’t dead, but it’s no longer enough.”

Managing reactive state using custom elements

Signals work great in custom elements too.

“It’s popular to claim that AI is now as bad as it will ever be. I think it’s naive to underestimate how much worse anything designed by humans can become in the future.”

AI’s transformative impact on web design

Supercharging productivity across the industry.

OpenStreetMap’s new vector tiles

The open map provider is adding vector tile support.

Clashing colors in UI/UX design

How we can use them mindfully and effectively.

Importing a frontend JavaScript library

What if you want to set it up without a build system?

CSS anchor positioning is disruptive

“It’s going to unlock some surprising new layouts.”

Combining light DOM and shadow DOM

How to mix-and-match both in a web component.

CSS ‘background-clip: border-area’

Creative borders with images or gradients made easy.

Click, type, find

Search bars are far more than icons and inputs.

Let’s Encrypt started 10 years ago

Now 450 million websites use their TLS certificates.

Avoid read-only controls

Why they are not better than disabled form controls.

My most-wanted CSS table features

CSS features that would help with responsive tables.

Handling cookies is a minefield

How do we fix issues in 30-year-old specifications?

What’s next for WebGPU

An outline of new opportunities for web graphics.

Brief and practical tips for public speaking

“It’s important to know why you want to pursue speaking.”

Authentication in JavaScript/TypeScript

Doing it yourself might be easier than you think.

Syncing Figma variables to CSS variables

How to bridge the gap between design and engineering.

Smarter and safer work with checklists

Why they are so powerful and how to craft yours.

What I look for in blogs

An insider’s view on authentic and engaging blogging.

‘bluesky-post’ web component

Display Bluesky posts with engagement counts on your website.

DNS Surf

Investigate DNS responses in different regions worldwide.

Fun with flags… with CSS

Learn CSS gradients by recreating country flags.

The future of design

How AI is shifting designers from makers to curators.

Self-hosting isn’t a solution

“What people actually need are laws.”

Chrome monopoly won’t crack anytime soon

“I don’t see Google being forced to drop Chrome.”

Solved by CSS: donuts scopes

How to prevent parent-to-child style leakage.

The semantic interface palette is simple

How semantic layers enhance color palettes.

An undefeated pull request template

It enables focused and efficient code reviews.

I don’t have time to learn React

“Stand out by picking up some more fundamentals.”

Old ‘alt’ text advice

An updated guide originally written for the HTML5 specification.

Uncomfortable truths of design systems

Design systems are powerful, but not perfect.

Fuzzy ‘max-age’ Calculator

A human-friendly way to define browser cache durations.

Free Mockups

High quality mockups to showcase your products.

A framework for evaluating browser support

When is it safe to use a modern CSS feature?

The hype around signals

How signals reshaped our approach to UI reactivity.

Modern solutions against cross-site attacks

“If you want to improve security you have to move.”

Subscriptions are killing creativity in design

“We cannot afford to let subscription models dictate our futures.”

Type scale graphs

Utopia’s fluid-type scale calculator gets a visualizer.

Designing a new web performance score

CrRRUX simplifies competitor analysis into a single number.

How to use grayscale

A quick way to check accessibility and visual design.

Font performance resources

Handy resources for understanding web font performance.

Preloading responsive images

Thoughtful preloading significantly improves load times.

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.

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.