August 11, 2026 Smashing Newsletter: Issue #571
This newsletter issue was sent out to 175,220 subscribers on Tuesday, August 11, 2026.
Editorial
How do you measure the performance of a specific UI component? What is new in JavaScript and TypeScript in 2026? How do we bring editorial typography to the web? Is there a place for a design system for UI sounds in our digital products?
Well, in this newsletter we explore just that — what’s new in front-end, with a few useful techniques and front-end tools to explore for front-end and UI engineers.
Friendly reminder: SmashingConf Freiburg 2026 🇩🇪 takes place this September, bringing together designers and engineers for 4 inspiring days of talks and workshops. Jump to last tickets.
A peek at the SmashingConf Freiburg line-up. See you there?
As usual, we do have online workshops on UX and frontend coming up — on design systems, accessibility, Figma, CSS, and enterprise UX:
- Spotting Accessibility Issues Early Free
with Stéphanie Walter. Sep 1 - Complex UIs & Enterprise UX UX
with Vitaly Friedman. Sep 2–3 - Naming Design Systems DS
with Samantha Gordashko. Sep 8–22 - Interface Design Patterns Live UX Training UX
with Vitaly Friedman. Sep 11 – Oct 12 - Figma MCP Masterclass Design
with Christine Vallaure. Sep 14 - Accessibility For Designers UX
with Stéphanie Walter. Sep 21–29 - Jump to all workshops →
One more thing before we dive deep into good ol’ frontend, we’re happy to provide scholarships and we have friendly discounts for large groups (5+ attendees) and schools and students. Interested? Just fill out this form and we’ll sort it out! Get your ticket.
Also, excited to join, but your manager needs a little more persuasion? As always, we’ve got your back!
— Vitaly
1. World Cup Standings Layout
Do you sometimes open DevTools to see how a particular layout is built? Ahmad Shadeed does too, and this time, the FIFA standings page for the World Cup made him curious. So after inspecting the original solution, he decided to rebuild the layout with CSS grid and subgrid. If you want to follow along, Ahmad shares his process in a step-by-step guide, from defining the main grid to making the layout responsive.
2. Reading A Performance Profile
The performance panel in Chrome DevTools is full of valuable insights, but how to make sense of it all? Joan León published an interactive field guide that helps you build the mental models needed to quickly read network waterfalls and flame charts. With interactive figures, real, annotated captures, and a workflow checklist, the guide is not only great for beginners but also for anyone who wants to get more out of the performance panel.
3. How To Choose A UI Font
Inter is an easy choice when you’re looking for a UI font. It sits perfectly in an interface every time, without any manual CSS tweaks. However, it has one downside: It’s everywhere. If you’re looking for alternatives, Yep! Type Foundry shares two simple criteria that help you pick a font that’s just as low-maintenance as the popular Inter, as well as ten Inter alternatives you might want to look into.
4. UI Sound Design
Whether it’s confirming a selection, signaling success or failure, or announcing a message, UI sound design helps reinforce visible feedback. If you plan to include sound effects in your design, be sure to check out UI SFX, a wonderful open-source library of interface sound effects. It covers every possible product stage and offers 12 distinct feels for each UI cue.
5. Editorial Typography With CSS
Fluid scales, balanced headlines, optical sizing, hanging punctuation. Typesetting details like these have long been exclusive to print. Luckily, browsers have quietly caught up in the last few years and added fancy typesetting features to their toolkits. Carmen Ansio shows how you can use them to take your web typography to the next level.
6. Measuring Component Performance
Standard web performance metrics are super valuable, but they don’t give us insight into component performance. The new Container Timing API is about to change that. Currently available in Chrome origin trial, the API allows us to annotate a whole region of the DOM and receive entries as new, contentful parts of it are painted. Harry Roberts dives deeper into how Container Timing works and the implications that come with it.
7. JavaScript In 2026
What to know in JavaScript in 2026? Chris Coyier wrote a comprehensive guide in which he shines a light on everything that’s new in JavaScript this year, not only in the language, but also in frameworks, runtimes, libraries, and tooling.
To get you up to date on ECMAScript, Paweł Grzybek summarized all the new additions that Ecma International approved a few weeks ago. And if you’re curious how the language has changed over the last decade, Paweł has got you covered, too.
8. TypeScript 7.0
In early July, Microsoft announced TypeScript 7.0. A 10x faster native port of TypeScript, it streamlines your complete workflow, from loading your project instantaneously to cutting down on delays in find-all-references, auto-completion, and diagnostics. Daniel Rosenwasser’s announcement post shares valuable insights into how the new release makes your coding experience faster and more productive.
9. Accessible UX Research, Now Shipping 📚
We’ve got exciting news! Our newest Smashing book, Accessible UX Research by Michele A. Williams, is finally shipping worldwide! Get the book right away or order the eBook for instant download.
Accessible UX Research is your practical guide to making UX research more inclusive of participants with different needs — from planning and recruiting to facilitation, asking better questions, avoiding bias, and building trust. Download a free sample (PDF, 2.3MB) or get the book right away.
10. Upcoming Workshops and Conferences
That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s a quick overview:
- Spotting Accessibility Issues Early Free
with Stéphanie Walter. Sep 1 - Design Patterns For Complex UIs and Enterprise UX UX
with Vitaly Friedman. Sep 2–3 - Naming Design Systems DS
with Samantha Gordashko. Sep 8–22 - Live UX Training UX
with Vitaly Friedman. Sep 11 – Oct 12 - Figma MCP Masterclass Design
with Christine Vallaure. Sep 14 - Accessibility For Designers UX
with Stéphanie Walter. Sep 21–29 - Design Patterns For AI Interfaces UX
with Vitaly Friedman. Video course + live UX training - How To Measure UX and Design Impact UX
with Vitaly Friedman. Video course + live UX training - Jump to all workshops →
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.