What do you think about HTML in 2023?

Take the State of HTML 2023 Survey (and Change the Web) — A new survey from the folks behind State of JavaScript and State of CSS. This is a natural companion to the other two surveys and should result in a more complete overview of the web platform as a whole. We encourage everyone to fill it out as answers submitted by October 1 will be used to inform this year's Interop 2024 proposals. Lea Verou outlines how this survey came to be and what you need to know. We'll share the results too, in due course.

Devographics

Cloudflare Fonts: Enhancing Web Font Privacy and Speed — A new one-click service coming to Cloudflare users that means sites using Google Fonts will be able to load the fonts from their own domain rather than from Google and reduce the number of round trips from eight to one.

Bullock and Woodhead (Cloudflare)

CSS Foundations with Emma Bostian — This extensive video course will help you nail the CSS essentials. You'll learn core terminology, practical skills (such as Flexbox and Grid), and gain hands-on experience — all of which will equip you with the fundamentals required for creating professional responsive sites.

Frontend Masters sponsor

The Path to Awesome CSS Easing with linear() — The new CSS linear() easing function is on the horizon, expanding what we can do when it comes to creating more natural-feeling animations and transitions. This post looks at what the current state of CSS easing is and demonstrates what we can expect from linear() once it lands.

Jhey Tompkins

Why HTTP/3 is Eating the World — What problems HTTP/3 solves, how it performs, why it’s seen such swift adoption, and what limitations it's still working to overcome.

Robin Marx

📙 Tutorials, Articles & Opinion

The Design System Ecosystem — This post goes deep into the weeds on a ‘layer-cake approach’ to creating robust, mature design systems. Of course, the advice isn’t one size fits all, but there’s plenty of good takeaways here.

Brad Frost

Responsive Type Scales with Composable CSS Utilities — With the help of calc(), clamp() and CSS vars, we can create composable, responsive, and fluid type scales that smoothly adapts to viewport and container widths.

Tobias Ahlin Bjerrome

Debugging Errors Faster with Distributed Tracing — Join us October 17, to learn how distributed tracing helps uncover elusive bugs & performance problems in microservices.

Sentry sponsor

'Web Push Is Almost Usable with iOS 17' — “with enough dedication and grit, you can get push notifications to show up on iOS devices, and it’s a little easier with iOS 17”

Matt Steele

▶  CSS Terminology Demystified — A 5 minute video to help you talk more confidently about CSS terminology, such as declarations, statements, etc.

Zoran Jambor beginner

Your Cache Headers Could Probably be More Aggressive — A look at what we can do to push cache performance (for some assets) even further.

Alex MacArthur

▶  Accessibility Is Easy … Except for When It Isn’t — A half-hour look at how to approach making complicated UIs accessible using standard techniques and a “little more creative thinking”.

Ian Lloyd

Solved by CSS Scroll-Driven Animations: Detect if an Element Can Scroll or Not
Bramus Van Damme

What Can You Do with data- Attributes?
Chris Ferdinandi

🔧 Code, Tools & Resources

ChatGPT.js: A JavaScript Library for Working with ChatGPT's DOM — Includes a fairly extensive API that lets you interact with ChatGPT for use in Chrome extensions, Tampermonkey scripts, and so on. Take note of the rather in-your-face design of this page - wow! 😅

KudoAI

Mimic.css: A CSS Animation Library of Unique Animations — Not a new project but we can almost guarantee these are animations you haven’t seen before! Examples here, where you can try out lawn mower, candle in the wind, drop it like it’s hot, and more.

Eric Treacy

Repo Trends: View and Analyze Trends in GitHub Repository Issues Over Time — A nicely designed tool that displays visual data for open issues and pull requests on a given GitHub repository.

Steve Sanders

Media-Card-Web-Component: A Web Component to Fetch Details on Books, Movies, Music, etc. — This will tap into various third-party APIs for Open Library, iTunes, The Movie Database, and so on, to display media and info for the requested item. Examples here.

Marketing Pipeline

little-rat: A Chrome Extension to Monitor (and Optionally Block) Other Extensions' Network Calls

Daniel Nakov