July 7, 2026 Smashing Newsletter: Issue #566
This newsletter issue was sent out to 175,671 subscribers on Tuesday, July 7, 2026.
Editorial
Chances are high that you’ve signed up for this newsletter years or even decades ago. Back then front-end used to be quite different: we had to struggle around quirky browsers, limited support of CSS and JavaScript features, and a universe of jQuery plugins and CSS/JS workarounds.
Current times are different, yet our passion for CSS and JavaScript never really faded away. And in this newsletter, we’d like to highlight a few useful tools for front-end engineers. (Psssst! We’ll also dive into front-end and UX at 🇩🇪 SmashingConf Freiburg 2026 this year.)
- Designing Complex UIs in the Age of AI Free
with Vitaly Friedman. July 9 - Spotting Accessibility Issues Early Free
with Stéphanie Walter. Sep 1 - Designing 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 - Accessibility For Designers UX
with Stéphanie Walter. Sep 21–29 - How To Measure UX and Design Impact UX
with Vitaly Friedman. Video course + UX training - Jump to all workshops →
And thank you so much for subscribing and reading and opening these emails all along! We’d love to hear when and how you signed up, and why — so please reply to this email to share your story. We’ll read and reply to every email.
Thank you, and stay smashing, in every possible way!
— Vitaly
1. Ponytail
Maybe you know that one senior developer on the team who can replace fifty lines of code with just one line that, well, just works. Dietrich Gebert built a ruleset that turns your AI coding agent into exactly that developer. Following the credo “The best code is the code never written,” Ponytail trains your agent to write the least code necessary to make things work, without simplifying away safety or accessibility.
2. Useful Keyboard Shortcuts
Who doesn’t love some good keyboard shortcuts to speed up recurring tasks? Whether it’s creating a new component in Figma, setting a status in Slack, or deleting a current conversation in Claude, Shrtcts showcases keyboard shortcuts for more than 20 design, video, code, and productivity tools. A handy resource to make working with your favorite tools just a bit more efficient.
3. Get The Most Out Of Your Fonts
Layout features, supported languages, unicode support — if you’re looking for a quick and efficient way to find out what your font can do, Roel Nieskens’ Wakamai Fondue is for you. Just upload a font to it, and you get a detailed overview over its features.
If you plan to self-host your fonts — which has quite some benefits, particularly for EU-based sites to conform with GDPR — be sure to check out FontSelf. The site lets you browse more than 1,400 font families and provides you with the assets you need to self-host them.
4. Loop Engineering
Loop engineering takes AI-assisted coding to the next level. Instead of prompting the agent yourself, you design the system that does it for you. In his guide to loop engineering, Addy Osmani explores the building blocks that make a loop work and gives a preview of what this evolution could mean for the work of engineers.
5. CSS @function
The new @function CSS at-rule makes it possible to encapsulate and reuse property behaviors across style sheets, without duplicating code or polluting the DOM with single-use variables. To get you started, Jane Ori wrote an introductory guide in which she explores the potential of custom functions, as well as gotchas to watch out for.
6. Reducing JS Workload
Whether it’s managing accordions, lazy-loading videos, or expanding form fields, whenever HTML or CSS couldn’t do what we wanted, we threw in some lines of JavaScript to do the heavy lifting. Now, as HTML and CSS are continuing to mature, we can finally start transferring JavaScript workload to them. Aaron T. Grogg’s NoLoJS provides an overview of common JavaScript patterns that can be replaced with just HTML, CSS, and no (or very low) JS.
7. 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.
8. 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:
- Designing Complex UIs in the Age of AI Free Free
with Vitaly Friedman. July 9 - Spotting Accessibility Issues Early Free
with Stéphanie Walter. Sep 1 - Designing Complex UIs and 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 - How To Measure UX and Design Impact UX
with Vitaly Friedman. Video course + UX training - Accessibility For Designers UX
with Stéphanie Walter. Sep 21–29 - 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.