Modulor

An all-purpose, ready-to-use design system for your website.

CSS Masking

What it is, how it works, practical use cases, and examples.

The WebAIM Million 2023

The annual report on the accessibility of the top 1,000,000 home pages.

Improving CSS Shapes with trigonometric functions

We now have a lot of ways to work with CSS Shapes.

Safari releases are development hell

“We only have such serious problems with Apple and Safari.”

New in Chrome 112

The Chrome browser now supports CSS nesting rules.

“ChatGPT won’t replace developers. ChatGTP will replace StackOverflow.”

PWAs in app stores

More and more app stores are welcoming Progressive Web Apps.

Chrome ships WebGPU

After years of development, WebGPU is getting released in Chromium 113.

WebGPU API

The MDN documentation for WebGPU, the successor to WebGL.

“What’s it called when you fix a bug at your current job that you accidentally created when you were at your previous job?”

Largest contentful paint change in Chrome 112 to ignore low-entropy images

How the change affects a website’s web performance metrics.

CSS text balancing with text-wrap:balance

How the upcoming CSS feature can enhance your web typography.

Saying goodbye to GitHub

How a programmer’s experience of GitHub has changed over the years.

Modern HTML email (tables no longer required)

How should we build emails now?

What’s new in PHP 8.3

Readonly amendments, json_validate() function, stack overflow detection, and more.

The Golden Rule of Performance revisited

Does the rule “80-90% of the end-user response time is spent on the front-end” still matters?

“CSS tip: read the specs. That’s it; that’s the whole tip.”

It’s time to learn OKLCH color

The HSL color model has been king for over a decade; why choose another?

Observing CSS

Did you know you can observe CSS properties in JavaScript?

JavaScript algorithms and data structures

A vast repository with explanations, examples, and related links.

“Being overly clever with your code is a disservice to the programmer and the reader. It makes the code more difficult to understand and maintain and prevents others from learning from it.”

Glyphhanger

A way to considerably reduce the file size of a web font.

WebGPU Fundamentals

Articles to learn WebGPU, an API exposing GPU capabilities for the web.

“95% of my accessibility discussions end with: ‘…use semantic HTML’. It’s that simple!”

The best ways to embed images in HTML email

Linked images, CID embedding, inline embedding, and more.

What’s new in ECMAScript 2023

Expected features in the upcoming ECMAScript version.

CSS container query units and fluid typography

New ways to create dynamically calculated typography rules.

Answering “What ARIA can I use?”

The ARIA Authoring Practices Guide now includes Assistive Technology Support tables.

A list of programming playgrounds

A community-sourced collection of playgrounds for web developers.

AI Playground

Play, compare, and tune with the latest AI language models.

Offline is just online with extreme latency

What if an internet connection was only progressive enhancement?

Hiding empty elements with CSS :empty and :has()

Pseudo-classes can help to conceal various kinds of empty elements.

Bard now helps you code

Google’s AI chatbot is ready to assist you with programming tasks.

Handwriting with the Canvas API

An alternative way to create custom typefaces and hand-drawn effects.

JavaScript Katas

Continuously learn JavaScript at your level and at your speed.

Babylon.js

A powerful web-based 3D rendering engine.

Scoped CSS is back

What it is, how it works, and why it is so promising.

“My toxic trait is committing directly from the GitHub mobile app.”

What’s new in DevTools (Chrome 113)

You can now override HTTP response headers and add custom headers.

Modern PHP

All the good things that have been added to the language recently.

Badging for home screen web apps

WebKit now supports the W3C’s Badging API on iOS/iPadOS.

Open Source Guides

Learn how to run and contribute to an open-source project.

Codeshare

An online code editor for real-time collaboration, teaching, and interviews.

Hide text in CSS pseudo elements from screen readers

How to add empty ‘alt text’ to decorative pseudo element content.

Why is OAuth still hard in 2023?

“We implemented OAuth for the 50 most popular APIs. It is still a mess.”

Rebuilding a featured news section with modern CSS

How the latest CSS features can help to build a responsive layout.

30th anniversary of licensing the web for general use and at no cost

The World Wide Web has changed our lives.

Chrome DevTools tricks that deserve a spotlight

Some of the DevTools features you might not know about.

Deno KV

A global database built for JavaScript and TypeScript with zero setup.

Introducing storage on Vercel

Vercel makes databases a first-class part of its frontend cloud.

CSS blend modes

Interactive demonstrations of pixel blending techniques.

SupportsCSS

Feature detection for modern CSS, inspired by the legacy of Modernizr.

An update on the lock Icon

Google will replace the lock icon in Chrome’s address bar with a new ‘tune’ icon.

Qwik reaches v1.0

The full-stack web framework brings a new approach to delivering instant apps at scale.

Don’t use custom CSS scrollbars

Just because you can style browser scrollbars doesn’t mean you should.

Adaptable components with CSS Style Queries

Expand your CSS design options with custom view queries.

I want to talk about WebGPU

What the arrival of the new WebGL means for programmers.

Monoliths are not dinosaurs

Building evolvable software systems is a strategy, not a religion.

Frontend web performance checklist

Ways to optimize page loading, improve smoothness, and reduce layout shifts.

The problem with sticky menus and what to do instead

Sticky menus can hurt UX far more than they improve it.

Using OpenAI with JavaScript

Let’s build a chat application with a vector database.

Proportio

A tool to create proportional scales for UI elements in design systems.

The new JavaScript features coming in ECMAScript 2023

Smaller additions arrive this year; bigger ones are on the horizon.

Rearrange/Animate CSS Grid layouts with the View Transition API

With a few lines of JavaScript and CSS, you can animate your grid layout.

Introducing Baseline: a unified view of stable web features

A fresh approach to documenting browser support for web features.

Advancing Interaction to Next Paint

Interaction to Next Paint (INP) becomes a Core Web Vital next year.

Memory allocation

An interactive introduction to memory allocation with visuals and a playground.

How to style links that don’t look ugly

Some ways to make underlined links look more attractive.

Go with PHP

“PHP has become faster, more secure, and more enjoyable to use.”

IP Lookup

Find out if an IP address is a threat.

The JavaScript ecosystem is delightfully weird

The many ways people aren’t writing JavaScript anymore.

The new .zip TLD is going to cause some problems

How to know whether ‘example.zip’ is an URL or a filename?

New TLDs: not bad, actually

Why the debut of .zip and .mov as top-level domains has caused a stir.

Web browsing and Plugins are now rolling out in beta

ChatGPT adds internet access and 70+ third-party plugins.

:root isn’t global

The problem of CSS Custom Properties defined on :root.

Building a modern design system in layers

Proper layering facilitates the long-term evolution of a design system.

Conditional CSS with :has and :nth-last-child

Further ways to create dynamic components with modern CSS.

TTFB Test

Measure your website’s Time to First Byte (TTFB) from many locations worldwide.

Lighthouse diff + WebPageTest

Google’s web performance auditing tool now has a diff tool.

The ongoing defense of front-end as a full-time job

Why a front-end developer is anything but a mediocre coder.

Animated Background Headers

Easily configure and generate an animated header for your website.

The Bun Bundler

A fast JavaScript bundler deeply integrated into Bun’s runtime.

TLS byte by byte

Watch a web page performing a live, annotated https request for itself.

WebKit features in Safari 16.5

CSS Nesting, CSS user valid and invalid pseudo-classes, and more.

Preparing to ship the Privacy Sandbox relevance and measurement APIs

Google remains on track to completely deprecate third-party cookies.

RedMonk top 20 programming languages over time

The top four languages are still the same for over a decade now.

Getting started with View Transitions on multi-page apps

“The ability to easily create quality 60 FPS page transitions is a game changer.”

Detecting if an event was triggered by a user or by JavaScript

Nothing is built-in to JavaScript to help us, so what to do?

capo.js

Optimize web performance by identifying out-of-order head tag elements.

Using linear() for better animation

Bounce, spring, and elastic effects with the upcoming CSS linear() easing function.

“‘Pick the right tool for the job’ is always the right answer, especially when someone’s trying to debate you on why their tool is better than ‘your tool.’”

Introducing the popover API

New HTML APIs for building popovers are coming to browsers.

Deploying AVIF for more responsive websites

How the new image format has been adopted in the ecosystem.

HTML best practices for login and sign-up forms

These forms are simple, but many websites still have mistakes.

‘display: contents’ considered harmful

What you risk when you rely on the CSS declaration ‘display: contents.’

The retro magic of style switchers

Why stop with just a dark mode? Let’s go back to the future.

“To replace programmers with AI, clients will need to accurately describe what they want. We’re safe.”

Mastering CSS blend modes

Blend modes are a powerful way to create endless visual effects.

First experiments with view transitions for multi-page apps

Let’s discover the potential of the new View Transitions API.