Bringing page transitions to the web

An introduction to the upcoming page transition API.

COLRv1 and CSS font-palette: web typography gets colorful

“Color fonts open up an entirely new vein of typographic creativity.”

Markdoc

A powerful Markdown-based content authoring system.

WordPress’ market share is shrinking

“WordPress, for the first time in a decade, is being out-‘innovated’.”

Bootstrap 5.2.0 beta

Redesigned docs, component CSS variables, design tweaks, and more.

Building a musical instrument with the Web Audio API

A keyboard accordion based on the Web Audio API, plain JavaScript, and Svelte.

Motion DevTools

A Chrome extension for creating CSS and Motion One web animations.

8 JavaScript quiz questions that may confuse you

Some fundamental and tricky stuff around JavaScript.

Don’t fight the browser preload scanner

When it comes to web performance, some browser internals matter.

“There are plenty of frameworks/libraries/tools I don’t like, but I try not to talk shit about them. I’ve been on the receiving end of people criticizing the free and open-source stuff I’ve built, and it isn’t fun at all.”

Google I/O 2022: that’s a wrap

Web-related announcements from Google’s latest developer conference.

The surprising truth about pixels and accessibility

Let’s answer the question “Should I use pixels or rems?” once and for all.

How do modern frameworks perform on the new INP metric

The Interaction to Next Paint of popular JavaScript frameworks in comparison.

I replaced my native iOS app with a cross-platform web app and no one noticed

It’s worth taking a look at cross-platform web apps.

Rethinking Server-Timing as a critical monitoring tool

Why the HTTP Server-Timing header deserves our attention.

“It’s pretty wild how many framework authors out here are basically admitting that they don’t grok how HTML and DOM work.“

Pleasantest

Automated UI testing in a real browser, with a familiar and intuitive syntax.

WCAG 2.2. and WCAG 3 status updates

“We expect WCAG 2.2 to be available later this year. WCAG 3 will not be available for at least 4 years.”

css-buttons

In this CSS button collection, there is something for everyone.

Find and manage your installed apps and sites

With Microsoft Edge, you can install any website as an app.

Web Accessibility Checklist

A checklist for creating accessible websites and web applications.

Ahrefs SEO Toolbar

SEO report, broken link checker, redirect tracer, and more in one browser extension.

First look at the CSS object-view-box property

A new CSS property to crop and zoom images, just like SVG.

Stack under attack

DDoS attacks can often come with success on the internet.

ARIA Authoring Practices Guide

How to build accessibility semantics into web patterns and widgets.

The balance has shifted away from SPAs

“Single-page applications are no longer the cool kids they once were 10 years ago.”

Building accessible toggle buttons

With examples for the web frameworks Svelte, Vue, and React.

A dev’s thoughts on developer productivity

“If we don’t talk about developer productivity, someone else will.”

Solid in 100 seconds

A short overview on a JavaScript web framework similar to React.

Layouts RFC

The biggest update to Next.js since it was introduced in 2016.

“There are parallels between accessibility and performance: both often underfunded, not prioritized and hard to instill within organizations. Both also critical to access and equity on the web.”

Min-Max-Value Interpolation

CSS clamp() calculator that helps to create fluid types and spacing.

WordPress 6.0 “Arturo”

Better writing and designing experience, stability, performance, and usability.

Announcing TypeScript 4.7

ECMAScript module support in Node.js, more powerful conditional types, and so on.

What’s new for Microsoft Edge at Build 2022

Highlights of WebView2, Progressive Web Apps on Windows, and Edge DevTools.

Dark mode toggles should be a browser feature

“There should be easier ways to switch Dark Mode on a per-site basis.”

Lesser-known and underused CSS features in 2022

What if one of your requested CSS features is already available?

Customizing color fonts on the web

Color fonts are a great improvement over graphic images.

Introducing the Email Markup Consortium (EMC)

A group of industry professionals that aims to improve the email experience.

Storybook 6.5

New workflows to develop, test, and document UIs in isolation.

A city in a bottle

A small marvel in 256 bytes made with HTML and JavaScript.

Accessibility from different perspectives

“Focus on developer experience may not be a terrible idea to improve user experience.”

Wolvic 0.9.6 released

Another step forward for the WebXR browser ecosystem.

How to use P3 colors with SVGs

A CSS media query to set up a more vibrant SVG version.

Snaplink

Generate custom link preview images for your webpages from code.

onClick() queueMicrotask()

Did you know about queueMicrotask() in JavaScript? It’s pretty handy.

The case for design engineers

The role of design engineers in the modern web design process.

Hey Meta

Easily check, improve, and generate your website’s meta tags.

HTML media capture

Access camera and mic of mobile devices via HTML file inputs.

Oh My Git!

The game introduces players to the popular version control system Git.

Accessibility Not-Checklist

What you can do to make your work more accessible and inclusive.

How to store an SSH Key on a Yubikey

An alternative way to store your private SSH keys in hardware.

Angular v14 is now available

The web application framework now with typed forms, standalone components, and more.

WebKit features in Safari 16 beta

CSS Container Queries, Subgrid, Flexbox Inspector, and much more.

Am I on the IndieWeb yet?

Whatever it looks like, it will take a lot of work to get there.

Input

A flexible system of fonts designed specifically for code.

pkg.land

A web tool that helps JavaScript developers to find alternative npm packages.

Obscure CSS: implicit list-item counter

Why you might think about retiring CSS custom counters.

Meet web push

Web Push arrived in Safari on macOS and is coming on iOS/iPadOS in 2023.

“‘Who wrote this shit?’ Me picking back up a project where I am the sole developer.”

Sunsetting Atom

GitHub has decided to retire Atom, its once-popular code editor.

WebContainers are now supported in Firefox on desktop and Android

You can now build Node.js apps directly in the browser.

Building a toy browser

The online book Web Browser Engineering get you started.

It’s time to learn about passkeys

Apple’s, Google’s, and Microsoft’s no-password login technology.

Component Encyclopedia

Explore the world’s UI components to learn techniques that actually work.

Better scrolling through modern CSS

There’s more to scrollbars than you might expect.

CSS GUI

A growing collection of composable visual editors for CSS properties.

The end of localhost

Development environments should be cattle, not pets.

“Regex is just typing random letters and symbols until it works.”

End of life: Internet Explorer

Today, Microsoft officially retires its once-dominant web browser.

Firefox rolls out Total Cookie Protection to all users worldwide

Mozilla is shipping Firefox’s strongest privacy protection to date.

SQLite’s web renaissance

The little embedded database is having another moment.

Internet Explorer 11 has retired and is officially out of support

What you need to know.

Simplifying Search Console reports with an updated item classification

See more quickly which issues affect your site’s appearance on Google.

AbortController is your friend

There are more use-cases for the new JavaScript feature than you might think.

New syntax for range media queries in Chrome 104

A look at how it can streamline your media queries.

What’s new in DevTools (Chrome 103)

Picking a color outside the browser, improvements in many panels, and more.

Conditionally styling selected elements in a grid container

A neat way to display selectable options in a grid.

Tauri

A toolkit for developers to build desktop applications with a web frontend.

The real Internet Explorer gravestone

“He was a good tool to download other browsers.”

The cost of convenience

A profound exploration of what makes a good developer experience.

Using Display-P3 color

How to use particularly bright accent colors on the web.

Complex vs compound CSS selectors

Do you need to learn the difference?

Macaron

An open-source UI design tool to create and maintain Web Components.

Svelte Tutorial

Learn the popular tool for building web apps right inside your browser.

CSS Reset

A CSS reset that uses modern features such as :where() and logical properties.

Code overflows

When your code finally works but you have no idea how.

AutoAnimate

Add motion to your apps with a single line of code.

Full-width background color

A CSS one-liner to extend the background color beyond an element.

GitHub Copilot is generally available to all developers

It’s free for maintainers of popular open-source projects and students.

Release notes for Safari Technology Preview 147

Passkeys, Web push, Flexbox Inspector, Web Inspector Extensions, and more.

The smallest CSS

“It’s kind of amazing what you can do with less than 15 lines of CSS.”

One-liner for running queries against CSV files with SQLite

The default sqlite3 command line utility makes it possible.

What makes a great developer experience?

A wide range of opinions about great DX in different development activities.

Stack Overflow Developer Survey 2022

What developers want, how they level up, and which tools they use.

Early Hints update

How Cloudflare, Google, and Shopify build a faster Internet for everyone.

Defensive CSS

Practical CSS and design tips that helps in building future-proof user interfaces.

Parti

Google AI’s model that creates photorealistic images from descriptions.

JavaScript battle

While four parties quarrel, a fifth rejoices.

Apple is not defending browser engine choice

“Apple uses its power over browsers to strip-mine and sabotage the web.”