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.
DevelopmentTools
MSHR
Pick ready-made CSS mesh gradients, or create yours.
DevelopmentResources
BroadcastChannel API
Basic communication between browsing contexts.
DevelopmentResources
Baseline with fallback strategies
How to decide on polyfills and progressive enhancement.
DevelopmentSamples
Awesome Docs Gallery
A collection of outstanding developer documentations.
DevelopmentOpinions
The underrated HTML ‘dl’ element
A natural fit for common visual design patterns.
DevelopmentSamples
Preloading fonts for web performance
A low-effort yet effective optimization technique.
DevelopmentTrends
Web development trends in 2024
The return to simpler web development practices.
DevelopmentOpinions
Node.js now supports TypeScript by default
Node 23 will soon run TypeScript files out of the box.
DevelopmentTools
Ghostty
A fast, feature-rich, and cross-platform terminal emulator.
DevelopmentSamples
I cannot wait for the CSS @function
How it would enhance an excellent CSS trick.
DevelopmentSamples
HTML ‘datalist’ is more powerful than you think
What if we mix in field types like color and date?
DevelopmentResources
HTML iframes to embed arbitrary content
Why general page content is best kept out of iframes.