Alt text for CSS generated content

A closer look at Safari's new accessible ‘content’ fallback.

Interaction to Next Paint is now officially a Core Web Vital

Interaction to Next Paint (INP) replaces First Input Delay (FID).

Embedding alternative text metadata into images

Does ‘alt text’ in images improve accessibility?

Surprising tech trends in WordPress and beyond

Current usage of CMS technologies on the internet.

5 exciting new JavaScript features in 2024

Features likely to be included in this year’s ECMAScript version.

You want ‘border-color: transparent’, not ‘border: none’

Don’t remove a feature used by many low-vision users.

Git by example

An interactive guide to Git with real-world use cases.

Network panel improvements

New features in Chrome Devtools’ network panel.

Creating color palettes with the CSS color-mix() function

It can be a game-changer for your design process.

Reducing PHP’s CPU usage by nearly 40%

The side-effect of an Ubuntu 20.04 LTS to 22.04 LTS upgrade.

DOM to PNG directly in the browser

Take screenshots of webpages without backend service.

Web performance tooling in 2024 and beyond

Google plans to integrate Lighthouse deeply into DevTools.

“Take care of yourself. Sleep. Eat. Exercise. Rest. Relax. Take care of other people, as best you can. People are important. Software is just fun.”

How to keep the screen awake using JavaScript

Preventing screens from sleeping or being dimmed.

How to kill the CSS cascade

“We’ve always needed local resets, and now we finally have them.”

pkg-size

Find the true size of an npm package.

There are no standards police

The internet’s success is built on voluntary standards.

Welcome to the future

How far are we from automating front-end engineering?

VPS showdown (March 2024)

Virtual private servers: DigitalOcean vs. Linode vs. Vultr.

Giving your app a temporary public URL

Visual Studio Code now supports port forwarding.

Email obfuscation: what works in 2024?

The art of protecting email addresses from spam bots.

Natural input for WebXR in Apple Vision Pro

WebXR now includes a better method for interaction.

Choosing between gzip, Brotli and zStandard compression

Which compression method is right for your content?

CSS button styles you might not know

Handy ways to enhance your website buttons.

New in Chrome 123

light-dark function, Service Worker Routing API, and more.

Website and PDF from the same codebase

How to create digital and print editions from CMS content.

The CSS box model and box sizing

A look at one of those most important CSS aspects.

Optimizing Javascript for fun and for profit

Handy speed optimization techniques illustrated.

On popover accessibility

What does ‘built in accessibility’ actually mean for browsers?

CSS-Tricks update

DigitalOcean is about to revitalize the CSS-Tricks website.

The IndieWeb is for developers

Why is the IndieWeb not more widely used?

A view source web

When you read a web page and it’s source at the same time.

Understanding passkeys

What to expect from the passwordless login solution.

Web Accessibility Survey Results

Americaneagle’s results, with a comparison to those of WebAIM.

PHP in 2024

“There are very good reasons to be excited about PHP these days.”

What you need to know about modern CSS

The incredible new additions to CSS at a glance.

The case for defining base ‘font-size’

How to properly set a base ‘font-size’ for your website.

CSS color-scheme-dependent colors with light-dark()

Simpler dark mode setup with the light-dark() function.

Comparing JavaScript frameworks (part 1)

Let’s compare the template languages of the frameworks.

The ultimate ideal bestest base font size

“It’s none (or something like ‘font-size: 100%;’).”

How to animate borders in CSS

“Animating borders in CSS can be surprisingly difficult.”

Open Web Docs Report 2023

The open source group’s impact on web documentation.

Some Git poll results

How developers use and think about Git.

The unreasonable effectiveness of inlining CSS

How inline CSS can help improve web performance.

JavaScript Signals standard proposal

An early common direction for signals in JavaScript.

How to align column rows with CSS subgrid

Aligning content of boxes that sit side by side.

An interactive guide to CSS container queries

How they help us to write fluid components

Learn JavaScript

An in-depth course on the basics of JavaScript.

What AI can do for (and to) existing web accessibility tools

Let’s explore AI and accessibility from three angles.

The many, confusing file system APIs

Let’s find a way out of this labyrinth.

Jpegli

Google introduces an advanced JPEG coding library.

Custom CSS pseudo-classes for web components

Get ready for a basic feature for custom HTML elements.

JavaScript visualized: Promise execution

A deep dive into some of the inner workings of promises.

Optimizing SQLite for servers

How to tweak an underestimated database engine.

Cally

Small, feature-rich calendar web components.

“Don’t try to be clever. Don’t try to fight the browser. Lean into it and let the platform do what it does best.”

The value of design tokens in modern web development

“The secret to building consistent, maintainable websites.”

A complete guide to CSS logical properties

What they are, how they work, and their use cases.

Testing HTML with modern CSS

How to mark problematic HTML patterns without JavaScript.

Front-end development’s identity crisis

What am I – and if so, which ones?

New to the web platform (March 2024)

The latest browser features at a glance.

The debugger’s toolkit

How to master the art of troubleshooting code.

Understanding Interaction to Next Paint (INP)

How the new web performance metric works.

Release notes for Safari Technology Preview 192

You can now get a sneak peek of View Transitions in Safari.

People are bailing on Safari after DMA impact

Indie browsers report significant spikes in users.

WebAssembly adoption

Is slow and steady winning the race?

Distributed SQLite: Paradigm shift or hype?

Web apps can already become globally blazing fast.

Creating perfect font fallbacks in CSS

The power of ‘size-adjust’, ‘ascent-override’, and ‘descent-override’.

‘AI’ won’t solve accessibility

“We already have all the technology to make wide-spread accessibility a reality.”

Blockin’ bots

How to block AI bots effectively with your site’s .htaccess.

Web Check

Get insights into the inner workings of your website.

Faces.js

Generate vector-based cartoon faces with a JavaScript library.

Layered toggles: optional CSS mixins

“The next evolution of space and cyclic toggles.”

CSS tricks to master the ‘clip-path’ property

Techniques that can simplify the creation of CSS shapes.

CSS in React Server Components

Understanding the future of CSS-in-JS and React.

HTMX is so cool I rolled my own

“The philosophy behind it embarrasses the modern JavaScript developer.”

New in Chrome 124

Better view transitions, new declarative shadow DOM APIs, and more.

Centering things

The hardest nut to crack in computer science.

Mixins three ways

“The web community isn’t done with mixins yet.”

Upgrading jQuery

It’s important to keep your jQuery version up-to-date.

Chrome 125 beta

CSS anchor positioning, keyboard-focusable scroll containers, and more.

CSS ‘align-content’ for block layouts is now part of Baseline

Easier block direction alignment without CSS flexbox/grid.

The showy/hidey navigation bar

How to build the popular navigation bar pattern.

Coming soon to JavaScript near you?

Some striking TC39 stage 2 proposals currently in the works.

A primer on the cascade and specificity

Two of the most fundamental parts of CSS explained.

Why PHP usage has declined by 40% in just over 2 years

What WordPress’s shift to ‘JavaScript-first’ means for PHP.

PHPUgly

“The podcast your mother warned you about.”

Announcing Mini Web Machines

A video series featuring code bits that power great UX.

Introducing JS Naked Day

Let’s disable JavaScript on our sites or surf without it on April 24th.

Gobble Bot

A scraper to digest your content into one text file.

Considerations for AI opt-out

The current status of website AI opt-out mechanisms.

Long alt text

Ways not to write text descriptions for images.

Help us invent CSS Grid Level 3

How should CSS handle masonry-style layouts?

What even are dragging movements?

Ways to make dragging patterns more accessible.

CSS Shape

A collection of easily customizable CSS-only shapes.

The Front-end Developer/Engineer Handbook 2024

An in-depth guide to front-end skills, tools, and tech.

The slow death of CSS vendor prefixes

Which CSS properties still require a prefix?

These weeks in Firefox (issue 159)

Better performance, popover API support, and more.

Invoking elements by using only HTML

“Something we need and probably long overdue.”

HTML attributes vs. DOM properties

What fewer and fewer developers seem to know.