#566: New Adventures in Front-End

With CSS @function, loop engineering, Ponytail, fontself and keyboard shortcuts. Issue #566 July 7, 2026 View in the browser

Smashing Newsletter

Bonjour Smashing Friends,

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
Free for everyone this Wed, Jul 8 (with recordings + Google Doc): Designing Complex UIs In Times of AI

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.

Ponytail


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.

Shrtcts


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.

FontSelf


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.

Loop Engineering


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.

The Fundamentals and Dev Experience of CSS @function


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.

NoLoJS


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
Meet our brand-new book: “Accessible UX Research” by Michele A. Williams. Printed copies shipping now.

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.

Smashing Online Events
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s a quick overview:


9. Person Of The Week: Jamie Mill

Please give a warm round of applause for our Person of the Week: Jamie Mill. Jamie is an experienced UX designer, design strategist, and all-round product person. He currently leads Product Design at the French startup Polar Analytics.

The Person of the Week is Jamie Mill.

Interested in end-to-end product design, Jamie builds AI-assisted design tools and writes about how design practice changes when AI does the easy parts. He is the author of The Elements of Product Design and creator of Layers, a framework and AI skills pack for designing products with depth in the age of generative AI.

Thank you for everything you do for the community, dear Jamie! 🧡


10. Recent Smashing Articles


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 Cosima Mielke, Vitaly Friedman, and Iris Lješnjanin.


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.

Follow us on Mastadon Join us on Bluesky

Popular posts from this blog

Would you pay Meta £14.99 p/m for this?

🎧 How to Use Claude Code as a Second Brain

How I Use Claude Code to Ship Like a Team of Five