Optimize Interaction to Next Paint

Web performance optimization for the Interaction to Next Paint metric.

12 Days of Web 2022

A year-end celebration of fundamental web technologies: HTML, CSS, and JavaScript.

CSS for URLs and HTTP headers

What if you could write CSS based on HTTP responses?

Unovis

A data visualization framework for React, Angular, Svelte, and vanilla JavaScript or TypeScript.

Inside the mind of a frontend developer: Article layout

The thought process behind building an article layout with CSS techniques.

What’s new in web performance?

How web performance tools and technologies have changed in 2022.

One day we’ll have a fully customizable select

The HTML element ‘selectmenu’ is like ‘select’ but with styling options.

Dev environments in the cloud are a half-baked solution

What’s broken with current solutions, and how we could achieve wider adoption.

A few times Container Size Queries would have helped me out

Use cases for the shiny new CSS Container Size Queries.

Announcing SvelteKit 1.0

The framework for building web apps on top of Svelte has reached 1.0.

WCAG 3.0: are we there yet?

It’s too early to bring the Accessibility Guidelines 2.0 to the junkyard.

Contemplating codec comparisons

Should we really drop the promising new JPEG XL image format?

WebGPU: all of the cores, none of the canvas

“Having a modern API to talk to GPUs on the web is going to be very interesting.”

Logical border radius

Sometimes logical properties for border radius might be a good idea.

I Code This

Daily projects you can build to improve your coding skills.

Storybook 7.0 beta

The UI component builder improves UX, performance, docs, and more.

Ways CSS :has() can make your HTML forms even better

“Forms offer some of my favorite use cases for CSS :has().”

Adding ActivityPub to your static site

Auto-publish blog posts without the need to spin up an instance of Mastodon.

CSS Style Queries

An exploration of the new Style Queries with many use cases and examples.

JS Drops

A weekly series of online courses on topics in the JavaScript ecosystem.

“Nothing says you’ve hit middle age like finally deciding not to renew that domain you’ve had and never used for 21 years.”

WordPress Playground

Experience a WordPress that runs entirely in your browser.

The performance inequality gap, 2023

When digital is society’s default, slow is exclusionary.

Fancy frames with CSS

Is your website a bit too rectangular? Break out of the box.

An HTML-first mental model

Let’s make an app fast while maintaining a framework-less developer experience.

A theory of web relativity

The HTML ‘rel’ attribute has the potential to take the internet to the next level.

Aligning Jakob Nielsen’s 10 usability heuristics with the WCAG 2.1

A look at each usability heuristic and the applicable WCAG 2.1 success criteria.

About modern Sass

Should we use Sass in 2022/2023? Is it still relevant and helpful?

Why I’m optimistic about JavaScript’s future

The JavaScript way: learn once, write everywhere.

CodeImage

Beautify your code for presentations and social media.

Coding a snowflake generator

Hand-code an SVG snowflake or use the Snowflake Machine.

HTTP/3 prioritization demystified

What prioritization is, how it works, and why it matters for web performance.

CSS color spaces and relative color syntax

New CSS specs will change how we work with color on the web.

Counting unique visitors without using cookies, UIDs or fingerprinting

The solution even works with the oldest browsers.

“Software documentation is one of those things that you don’t appreciate until you have to work without it.”

JavaScript frameworks 2023

Where JavaScript frameworks might be heading into the next year.

CSS Subgrid

It’s a great time to start to play with the new CSS feature.

How the IE 11 UA string broke sites in Firefox

Mozilla has frozen another part of its UA string for compatibility.

Happy New Year!

Share to Mastodon web component v2.0 released

Add a handy “Share to Mastodon” link to your website or blog posts.

Auth.js

A complete open source authentication solution for Next.js applications.

Detecting fonts ready

There’s a JavaSript event that tells you when all fonts have loaded.

Compress an image before upload with JavaScript

A way to compress images selected with a file input element.

Resend

Build, test, and send transactional emails at scale.

What does it look like for the web to lose?

It would suck, so let’s not have that happen.

Standalone Elements

Individual open source web components with zero or few dependencies.

HTTPie AI

A new way to interact with APIs: create requests using human language.

2022 JavaScript Rising Stars

Trending projects in the JavaScript ecosystem over the last 12 months.

Will ChatGPT threaten the future of the digital accessibility field?

A conversation with the popular AI chatbot.

Web Activity Time Tracker

A Chrome extension that lets you track and limit the time you spend on websites.

Micro Frontend dev

Breaking down complex applications into smaller, deployable components.

Best CMS platforms in 2023

An in-depth comparison of popular Content Management Systems.

All Things AI

A comprehensive collection of AI-powered tools and services.

Introducing Web Components Guide

A new way to learn how to create reusable custom HTML elements.

Data binding in React

How to wire up all of the different form controls in React.

Conditional CSS

Why it’s worth to think of CSS as a conditional design language.

Clever code considered harmful

“The hard thing is solving complex problems with simple code.”

The State of JavaScript 2022

JavaScript and TypeScript are more vibrant than ever.

Why not document.write()?

How script injection using document.write() hurts web performance.

Igalia brings MathML back to Chromium

MathML Core is now supported and enabled by default in Chrome 109.

Our top Core Web Vitals recommendations for 2023

Things you can do to improve your website performance effectively.

“How many web developers does it take to change a lightbulb? None, they insist everything has to be in Dark Mode.”

SQLite Wasm in the browser

Now you can use SQLite Wasm with the Origin Private File System persistence backend.

:is() :where() :has()

The powerful new CSS pseudo-classes explained.

Sibling scopes in CSS, thanks to :has()

Leverage :has() to select all siblings between two boundaries.

Supporting the use of Rust in the Chromium project

Google is bringing the Rust language into Chromium.

Past informs the present: Our approach to CSS

The evolution of CSS and its methodologies.

Introducing Docker support in CodeSandbox

CodeSandbox now lets you create sandboxes for any programming language.

Chrome 110 beta

CSS initial letters, web app launch handler, IFrame credentialless, and more.

“Under-engineer. That’s almost always better for usability and accessibility. Simple solutions are almost always more robust.”

Building an accessible theme picker with HTML, CSS and JavaScript

When a light and a dark mode are not enough.

Identity crisis

Unique Ids for modern applications: UUIDs/GUIDs vs. Cuid2.

Line heights in CSS work better with ratios

Ratio-based line height will always be proportionate.

Servo to advance in 2023

The independent, Rust-based browser engine will begin to take shape.

PHP in 2023

The current state of the scripting language: a look back and forward.

Using CSS :is() in complex selectors selects more than you might initially think

A demo and an explanation.

Ways you can use ChatGPT to write code

From improving code to tracking bugs, writing test cases, and documentation.

(Almost) everything about storing data on the web

Options to store data locally on a user’s device for client-side or offline access.

Discovering the capable web

Project Fugu aims to make web apps as powerful as native apps.

Status of the new SVG engine in WebKit

Igalias motivation behind the work and the current status of the project.

Comparing manual and free automated WCAG reviews

“Automated accessibility checkers lack the context of a page and user.”

The truth about CSS selector performance

The impact of CSS selectors on page speed and how you can measure it.

Indentation for accessibility

It matters if you use tabs or spaces for indentation in code editors.

Level up your CSS skills with the :has() selector

How you can create advanced CSS selectors with :has().

Complete guide to make you a RegEx guru

What you need to know about Regular Expressions for daily usage.

Astro 2.0

Content collections, hybrid rendering static/dynamic, and more.

Degrees of open source

What to consider when you’re planning a new open source project.

Refraction, dispersion, and other shader light effects

How you can use light and its properties to recreate amazing 3D effects.

“It’s absolutely wild that being good at interviewing for the developer job and being good at the actual job are two completely separate skills.”

100 million developers and counting

GitHub is celebrating 100 million users around the world on its platform.

What’s new in WCAG 2.2 Draft

The proposed new success criteria for Web Content Accessibility Guidelines (WCAG) 2.2.

Scrollend, a new JavaScript event

The reliable way to detect if a user scroll is complete.

Release notes for Safari Technology Preview 162

CSS Nesting, declarative Shadow DOM, ARIA for custom elements, and more.

Announcing TypeScript 5.0 Beta

Smaller, simpler, faster, and many new features such as ECMAScript decorators.

Use the dialog element (reasonably)

An HTML spec change to the dialog element resolves a multi-year discussion.

Screen Readers support for text level HTML semantics

How JAWS, NVDA, and Narrator deal with ‘strong’, ‘em’, and the like.

New WCAG 2.2 features rated

What to expect from the new success criteria in the Web Content Accessibility Guidelines 2.2.

Netcraft Web Server Survey January 2023

Cloudflare becomes the most popular web server, surpassing Apache and nginx.

Vite PWA

Framework-agnostic PWA integrations for Vite and the ecosystem.

CSS color-mix()

Mix colors, in any of the supported color spaces, right from your CSS.