June 10, 2025 Smashing Newsletter: Issue #511
This newsletter issue was sent out to 189,838 subscribers on Tuesday, June 10, 2025.
Editorial
What a time to be a front-end engineer! As we are automating and streamlining our workflow, we still need reliable tools that can flag issues and challenges with a high degree of accuracy. Surely, AI might get 70% of the job done, but the missing 30% requires knowledge, skills, experience, and reliable tools.
In this newsletter, we look at some front-end tools and techniques for engineers to get to better results faster — from decluttering TypeScript and API design to code generators and a million little secrets for whimsical animations.
Later this month, we’ll be running a workshop on Design Patterns For AI (June 23, in 🇺🇸 New York, USA) — in-person, live, in the very heart of Manhattan, with plenty of real-life examples for designers and UI engineers. Jump to the details.
On another note, join us tomorrow at 8:00 AM (PT) 🌍 for a third episode of OPEN UP with Brad Frost and Geoff Graham who’ll join you live and share their personal and career advice and solutions. You’re welcome to submit any questions beforehand and bring a friend along (tickets are free)!
Until next time, I’m wishing you a truly fantastic, productive week ahead!
— Vitaly
1. Declutter Your JavaScript And TypeScript Projects
Most projects have at least a few unused files, exports, and dependencies lying around, and deleting something is quite scary when you don’t know how things depend on each other and if there will be knock-on effects on your application. Lars Kappert created a tool that offers a solution to all of this: Knip.
Knip finds and fixes unused dependencies, exports, and files in your JavaScript and TypeScript projects for you. It has built-in support for monorepos, works seamlessly with any package manager, and comes with over 90 plugins for tools and frameworks such as Astro, Cypress, ESLint, Next.js, Storybook, Svelte, Webpack, and many more. A quick and easy way to improve performance and simplify maintenance and refactorings. (cm)
2. Figma MCP: From Design to Prototype In Seconds
Last week, Figma launched the Dev Mode MCP Server, enabling access to Figma from AI-powered coding tools (such as VS Code, Cursor, Claude, Windsurf, etc.). With it, AI tools integrated in your code editor can now pull in variables, design tokens, layers, frames, and components directly into the code editor — and with it, better mapping between design and code, without studying screenshots.
Romina Kavcic provides a detailed guide on how to set it up. Once you’ve designed a screen with styles, variables, named layers, and auto-layout, you can enable Dev Mode MCP Server in “Preferences” first. Then, head to your code editor and add the MCP code for Figma (in the guide).
Next, you can select a frame or share a link, and the code editor will try to map design decisions and generate code. It’s definitely not going to be production-ready, but can be a good start for a rough but quick prototype.
4. Upcoming Workshops and Conferences
We run online workshops on frontend and UX, 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:
- Accessibility for Designers UX
with Stéphanie Walter. - Figma Workflow Masterclass Design
with Christina Vallaure. July 23–29 - Building Interactive, Accessible Components with Modern CSS & JS Dev
with Stephanie Eckles. Aug 18–27 - UX Strategy Masterclass UX
with Vitaly Friedman. Aug 20–29 - How To Measure UX & Design Impact UX
with Vitaly Friedman. Video course + UX training - Smart Interface Design Patterns UX
with Vitaly Friedman. Video course + UX training - Jump to all workshops →
5. Code Generators For Developers
Whether you’re just starting your journey into the world of web development or a seasoned web developer looking to save time, Web Code Tools will surely come in handy in a lot of scenarios.
Web Code Tools is a collection of code generators aimed at front-end developers. They generate highly customizable CSS properties and HTML elements for you, but also JSON-LD structured data, meta tags, Open Graph meta tags, and robots.txt files. You can preview the results before copying them to your project. One for the bookmarks. (cm)
6. A Million Little Secrets
When was the last time you came across a website that left you inspired and with a big smile on your face? With a lot of sites looking rather generic these days, these moments have gotten quite rare. But they do exist, and the landing page that Josh W. Comeau created for his Whimsical Animations course is such an outstanding example.
In his blog post, “A Million Little Secrets,” Josh shares a behind-the-scenes look at the landing page and how he built it. At first glance, the page might look pretty straightforward, but there is a lot going on under the surface, with several little surprises baked into it. So, before you read the blog post, be sure to check out the landing page first to avoid spoiling the surprise. A wonderful example of a website that ventures off the beaten path to create a truly unique experience. (cm)
7. Recently Published Books 📚
Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?
- Success at Scale by Addy Osmani
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Check out all books →
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.