mediaquery.style

Popular media queries with a handy button to copy the snippet you need.

How to eliminate render blocking resources

They can slow down your website, but there are countermeasures.

Using grid named areas to visualize your layout

The benefits of documenting CSS Grid layouts with ASCII visuals.

Total TypeScript

An interactive TypeScript tutorial for beginners.

Do you know about overflow: clip?

CSS ‘overflow: clip’ enables several interesting features.

The Jammies Awards

A chance to recognize your peers as standouts in web development.

GIFs

A collection of amusing and illustrating animated GIFs around CSS.

Webhooks.fyi

A collection of best practices for providing and consuming webhooks.

Use TouchID to authenticate sudo on macOS

How to approve sudo commands with your fingerprint.

Container Queries

A collection of demos and use cases for CSS Container Queries

CSS container queries are finally here

Are you ready to see the new game-changer CSS feature?

New in Chrome 105

CSS Container Queries, :has() pseudo-class, Sanitizer API, and more.

Practical Git Guide

Handy solutions to your daily Git challenges.

“My toxic trait is that I 100% believe that a bundler is not a baseline requirement when building a professional web site.”

WebKit on GitHub

Apple’s web browser engine transitioned to Git hosted on GitHub.

Vanilla Breeze

A web tool to convert Tailwind CSS to semantic CSS.

Modern web debugging in Chrome DevTools

As of Chrome 106, you can debug the original instead of minified code.

Enhance

An HTML framework to build and progressively enhance your web app.

A well-known links resource

What if everyone surfaced their outbound links in an open, accessible way?

Fragment

A web development environment for creative coding.

Meet the CSS highlight pseudos

A radical departure from older browsers with ::selection.

Whyframe

A simple way to develop components in isolation for your UI framework.

Should I use a button or a link?

Let’s get to the bottom of a highly contentious question in web accessibility.

Parents counting children in CSS

We can use :has() to determine how many children a parent element has.

“Docs are hard, often harder than code.”

Tinybench

A lightweight library to run your benchmarks in multiple JavaScript runtimes.

JavaScript Patterns

Design patterns to improve the code architecture of your web apps.

“I love when deleting code makes everything work.”

Apple joins the Open Web Docs Steering Committee

They are joining the committees’ mission to document the web for developers.

Web Performance Snippets

Curated snippets to use web performance metrics in the browser console.

Critical CSS? Not so fast!

The popular performance technique may be more questionable than you think.

Introducing Preact Signals

A reactive state primitive that is fast by default.

Release notes for Safari Technology Preview 153

Imperative Slot API, ‘forced-colors’ media query, import-assertion, and more.

CSS specificity wars over? All hail Cascade Layers

The CSS architectural solution we’ve all been waiting for.

Lightning CSS (formerly Parcel CSS)

An extremely fast CSS parser, transformer, bundler, and minifier.

Cypress testing

A guide to running automated web application tests.

So your designer wants stuff to overlap

Try CSS Grid, transform, absolute positioning, or negative margins.

Why developers are building so many side projects

“Side projects can be your career in tech.”

Diode

Build, program, and run hardware projects in the browser.

WebC

A framework-independent HTML compiler for Single File Web Components.

Fresh 1.1

Deno’s full stack web framework brings significant improvements.

How your favourite UI libraries manage their icons

“Managing icons is an under-discussed part of UI library management.”

Ladybird

A new cross-platform browser project.

WebKit features in Safari 16.0

CSS Subgrid, Container Queries, :has(), AVIF, passkeys, and more.

JSON Hero

A web tool to browse, search and navigate your JSON files.

“There is no pain quite as exquisite as coding HTML emails.”

“We need to stop treating accessibility as though it’s simply a feature to be implemented.”

Text is the universal interface

The power of language models in machine learning and artificial intelligence.

What’s new in WCAG 2.2?

WCAG 2.2 is now pretty close to becoming an official standard.

Wtf is an island and why is it in my website?

What to expect from the Islands Architecture of the newest UI frameworks.

The power of CSS blend modes

Cool photo effects using just a few lines of CSS.

“We’re wrongfully downplaying the complexity of HTML due to the simplicity of its syntax.”

The new HTTPS report in Search Console

Solve issues that prevent your pages from being served over HTTPS.

QR codes

The fascinating story about how QR codes work.

Pop-ups are making a resurgence

The Open UI initiative is making it easier to build better pop-ups.

Detecting CSS selector support

What to keep in mind when using @supports selector().

Container Queries in browsers!

A highly-requested CSS feature has finally arrived in major browsers.

A debugging manifesto

Ways to get rid of weird software bugs.

Why we prefer Sanity over Contentful

Tinloof’s first choice when it comes to headless CMS.

History++: a better way to do versioning

Replit’s high-fidelity take on the historical states of code.

Why the number input is the worst input

Do you think that web form has got your number?

A quick primer on testing JavaScript

Ways you can test your vanilla JavaScript code.

Buttons and the Baader–Meinhof phenomenon

Correct and wrong ways of labelling buttons.

Fallback Font Generator

Reduce layout shifts by adjusting web fonts and system font fallbacks.

0 of the global top 100 websites use valid HTML (in 2022)

“We’re at the absolute low point with HTML.”

Token CSS

Seamlessly integrate Design Tokens into your development workflow.

JSON Crack

A tool that generates graph diagrams from JSON objects.

Qwik and Qwik City have reached beta

A React-like framework reimagined for the edge.

The database cookbook for developers

An SQL cookbook with many small independent recipes.

Stable Diffusion based image compression

The AI model delivers impressive lossy image compression results.

Wasmtime reaches 1.0

The standalone runtime for WebAssembly is now production ready.

Display content in the title bar

Progressive Web Apps can have their own app windows and title bars.

Will serving real HTML content make a website faster?

“It can be one of the best things you can do for a site’s performance.”

Appwrite

An open-source backend server for web, mobile, and Flutter developers.

React I love you, but you’re bringing me down

“The flaws of the React framework make me want to cry sometimes.”

Use cases for CSS comparison functions

The many things you can do with min(), max(), and clamp().

Introducing commenting on Preview Deployments

Vercel, the front-end development platform, is now even more collaborative.

Announcing TypeScript 4.9 beta

New ‘satisfies’ operator, improved ‘in’ operator narrowing, and more.

Appt

App-accessibility platform with guidelines, accessibility features, and code samples.

“Can’t believe we’re all still suffering with JSON that doesn’t support comments.”

Dub

An open-source link shortener with custom domains and built-in analytics.

Randomness in CSS

The CSS way of generating random values and effects.

Web Almanac 2022

HTTP Archive’s annual state of the web report.

Fontsource

Self-host open-source fonts in neatly bundled NPM packages.

Experimenting a new syntax to write SVG

What if we could write all SVG attributes in CSS?

Aging programmer

Reflections of a 40-year-old programmer that looks back.

6+5 ways to make a two-column layout

Reasonable and weird layouts with HTML, CSS, and SVG.

Closing a 30 pixel gap between native and web

Windows web apps can now look and feel like native apps.

Introducing workerd

The JavaScript/Wasm runtime based on Cloudflare Workers is now open-source.

The new wave of Javascript web frameworks

Making sense of React, Vue, Svelte, Solid, Next, Remix, Qwik, and MPAs.

Introducing Stark for Mac

A toolbox that helps you meet the latest accessibility compliance standards.

How fast is your web app?

How to test page transition performance in WebPageTest.

Yes, accessibility is also a backend concern

Accessibility is a practice that touches every aspect of a digital experience.

Dear Console…

A collection of valuable snippets you can use in the browser console.

GIFs Without the .gif

“There’s really no good reason to use the bulky .gif file format anymore.”

Type-Level TypeScript

How to unleash the full potential of TypeScript’s type system.

Lessons from a professional password cracker

“The password burden has to shift away from the user to the backend.”

“If you accept that we are living in a simulation, then you must also accept that the simulation is likely written in JavaScript.”

Templating in HTML

How the HTML ‘template’ element can make your life simpler.

Learn HTML

A course for web developers, from novice to expert level HTML.