DevelopmentSamples
Addition for CSS reset: interpolate-size
“Animating from 0 to auto has never been so easy.”
DevelopmentResources
The HTML ‘br’ element
The line break that can easily break things.
DevelopmentResources
What no one told me about Postgres
Missing bits in the official database documentation.
DevelopmentResources
Two books, no longer apart
The responsive design pioneer’s classics are now free to read.
DevelopmentTools
Introducing our grid-aware websites project
The goal is a developer toolkit to make eco-friendly choices.
DevelopmentResources
The stretch keyword
A better alternative to ‘width: 100%’ in CSS?
DevelopmentSamples
Will we care about frameworks in the future?
“I dunno, but it will be a lot of fun to find out.”
DevelopmentSamples
Universal browser display of web feeds
How to render RSS/Atom feeds in any browser.
DevelopmentResources
Motion
A modern animation library for JavaScript and React.
DevelopmentResources
Git Cheat Sheet
A Git command guide to master version control.
DevelopmentResources
JavaScript truthy and falsy
A fundamental yet often misunderstood concept.
DevelopmentResources
What’s your excuse for not using it?
“It is a crime people don’t use the web share API more.”
DevelopmentResources
Why responsive design is failing modern users
“Responsive design isn’t dead, but it’s no longer enough.”
DevelopmentSamples
Managing reactive state using custom elements
Signals work great in custom elements too.
DevelopmentTools
OpenStreetMap’s new vector tiles
The open map provider is adding vector tile support.
DevelopmentSamples
Importing a frontend JavaScript library
What if you want to set it up without a build system?
DevelopmentOpinions
CSS anchor positioning is disruptive
“It’s going to unlock some surprising new layouts.”
DevelopmentSamples
Combining light DOM and shadow DOM
How to mix-and-match both in a web component.
DevelopmentTools
CSS ‘background-clip: border-area’
Creative borders with images or gradients made easy.
DevelopmentResources
Let’s Encrypt started 10 years ago
Now 450 million websites use their TLS certificates.
DevelopmentOpinions
Avoid read-only controls
Why they are not better than disabled form controls.
DevelopmentSamples
My most-wanted CSS table features
CSS features that would help with responsive tables.
DevelopmentSamples
Handling cookies is a minefield
How do we fix issues in 30-year-old specifications?
DevelopmentOpinions
What’s next for WebGPU
An outline of new opportunities for web graphics.
DevelopmentSamples
Authentication in JavaScript/TypeScript
Doing it yourself might be easier than you think.
DevelopmentSamples
Syncing Figma variables to CSS variables
How to bridge the gap between design and engineering.
DevelopmentResources
‘bluesky-post’ web component
Display Bluesky posts with engagement counts on your website.
DevelopmentTools
DNS Surf
Investigate DNS responses in different regions worldwide.
DevelopmentSamples
Fun with flags… with CSS
Learn CSS gradients by recreating country flags.
DevelopmentSamples
Solved by CSS: donuts scopes
How to prevent parent-to-child style leakage.
DevelopmentResources
An undefeated pull request template
It enables focused and efficient code reviews.
DevelopmentOpinions
I don’t have time to learn React
“Stand out by picking up some more fundamentals.”
DevelopmentResources
Old ‘alt’ text advice
An updated guide originally written for the HTML5 specification.
DevelopmentTools
Fuzzy ‘max-age’ Calculator
A human-friendly way to define browser cache durations.
DevelopmentSamples
A framework for evaluating browser support
When is it safe to use a modern CSS feature?
DevelopmentTrends
The hype around signals
How signals reshaped our approach to UI reactivity.
DevelopmentSamples
Modern solutions against cross-site attacks
“If you want to improve security you have to move.”
DevelopmentSamples
Designing a new web performance score
CrRRUX simplifies competitor analysis into a single number.
DevelopmentResources
Font performance resources
Handy resources for understanding web font performance.
DevelopmentSamples
Preloading responsive images
Thoughtful preloading significantly improves load times.
DevelopmentSamples
Frosted glass from games to the web
Let’s create a stunning glass effect step by step.
DevelopmentSamples
Avoid hotlinking images with CORP
How to stop other websites from serving your images.
DevelopmentSamples
Full-bleed layout with modern CSS
How to expand a contained element to the edge of a page.
DevelopmentResources
Math4Devs
The JavaScript equivalents of mathematical symbols.
DevelopmentResources
HTMHell Advent Calendar 2024
24 articles in 24 days, mainly on front-end development.
DevelopmentFun
Advent of Code 2024
An advent calendar of small programming puzzles.
DevelopmentResources
Web Performance Calendar 2024
The yearly publication about everything web performance.
DevelopmentResources
Development advent calendars for 2024
A variety of advent calendars, mainly on web development.
DevelopmentResources
The best approach to SVG icons
Inline SVG, ‘use’, ‘img’, spritesheet, or JSX?
DevelopmentOpinions
Which IDEs do software engineers love?
Developer’s favorite coding editors with AI features.
DevelopmentResources
Logo link in the header
What should be the alt text of the logo image?
DevelopmentSamples
Git ‘includeIf’
The configuration superpower you need to know.
DevelopmentResources
A more powerful CSS attr() function
What to expect from the upcoming enhancement.
DevelopmentResources
New to the web platform (November 2024)
The latest browser features at a glance.
DevelopmentSamples
Next-level frosted glass effect
How you can make the effect much more vibrant.
DevelopmentResources
Smooth multi-page experiences
How to get started with just a single line of CSS.
DevelopmentSamples
Layout grids in the browser
An overlay to view your grid system in action.
DevelopmentResources
A layered approach to speculation rules
How you can accelerate user paths even more.
DevelopmentSamples
Viewport resize behavior on mobile
How to control it with ‘interactive-widget’.
DevelopmentOpinions
The 70% problem
“AI tools help experienced developers more than beginners.”
DevelopmentResources
Mastodon/Bluesky comments
A web component to show comments from Mastodon and Bluesky.
DevelopmentSamples
Creating a scroll grid
A multi-directional layout with a navigation aid.
DevelopmentResources
CSS wrapped 2024
The amazing CSS journey in snippets and demos.
DevelopmentResources
Optimizing SVG usage for web performance
A comparison of various SVG loading techniques.
DevelopmentResources
React version 19
The UI library is now on npm, supports web components, and more.
DevelopmentTools
How web browser features get built
Guess what? You can pay for browser features!
DevelopmentResources
Countless
Explore, compare, and calculate costs for every AI model.
DevelopmentResources
The law of diminishing returns
Striking the right balance can be tough.
DevelopmentSamples
The evolution of instant web
How speculation rules complement traditional speed optimization.
DevelopmentSamples
Your website is a restaurant
What websites and restaurants have in common.
DevelopmentTools
Easing Wizard
Easing made easy for CSS and Tailwind CSS.
DevelopmentResources
Checklist for accessible data visualizations
Key steps that help you create accessible charts.
DevelopmentSamples
Solved by modern CSS: feature image
Feature image with container queries and :has().
DevelopmentTrends
Cloudflare Radar 2024 Year in Review
Trends and patterns in internet usage over the year.
DevelopmentSamples
Buildless testing
How to test your JavaScript code in the browser.
DevelopmentTools
WebKit features in Safari 18.2
New CSS options, including View Transitions, and more.
DevelopmentSamples
Isomorphic web components
Who says web components can’t be rendered server-side?
DevelopmentResources
Baseline 2024
How the initiative supports web developers today.
DevelopmentSamples
Fluid superscripts and subscripts
A modern solution using CSS calculations.
DevelopmentResources
12 Days of Web 2024
A year-end celebration of fundamental web technologies.
DevelopmentSamples
The fine art of hyphenation
Pros and cons of various hyphenation techniques.
DevelopmentTrends
CMS market share trends
Today’s market-dominating content management systems.
DevelopmentTools
InclusiveColors
A versatile tool for creating accessible color palettes.
DevelopmentResources
Page by page
How pagination makes the web accessible.
DevelopmentSamples
Minimap section headers in VS Code
How to optimize minimaps for your coding workflow.
DevelopmentTools
Map of GitHub
A map of 400,000+ GitHub projects, each shown as a dot.
DevelopmentOpinions
CSS @import is cool, actually
It delivers some useful features a ‘link’ doesn’t offer.
DevelopmentTrends
State of JavaScript 2024
What JavaScript has been up to this year!
DevelopmentTools
25 years of Dillo
Firefox isn’t the only browser turning 25 this year.
DevelopmentSamples
When users interact
What user interactions during page loading reveal.
DevelopmentResources
CSS ‘transition-behavior’ property
Browser support, Syntax, basic usage, and demo.
DevelopmentResources
CSS ‘content-visibility’
What it is, how it works, and where it shines.
DevelopmentResources
HTML conformance
A comparison of 6.5 popular npm validator packages.
DevelopmentResources
CSS ‘::target-text’ for text highlighting
How browsers can make text sharing more user-friendly.
DevelopmentTools
Free GitHub Copilot for VS Code
Microsoft adds three free AI models to its code editor.
DevelopmentOpinions
The Automattic and WP Engine conflict
What WordPress users need to know about.
DevelopmentSamples
Getting oriented with HTML video
How to serve a clip in portrait or landscape format.
DevelopmentResources
New to the web platform (December 2024)
The latest browser features at a glance.
DevelopmentSamples
JavaScript Import Maps
A powerful way to handle JS dependencies in the browser.
DevelopmentFun
My favourite color is Chuck Norris red
What makes the web work, no matter what we throw at it.