Smashing Magazine - #368: JavaScript

JavaScript techniques, libraries and case studies: from building a design system with React to JavaScript visualized. Issue #368 August 30, 2022 View in the browser 💨

Smashing Newsletter

Salut Smashing Friends,

Let’s talk about JavaScript. In this issue, we explore some case studies around building components, how to keep the JavaScript-heavy code base accessible, and how to better understand some slightly more complex concepts — from event loop and hoisting to promises and async/await.

SmashingConf Freiburg 2022
SmashingConf Freiburg is back, on Sep 5–7, 2022, in-person and online. We’re coming back to New York, too! ;-)

This week, the Smashing family is getting ready for SmashingConf Freiburg, our in-person conference in our lovely hometown surrounded by the Black Forest. There is still a handful of tickets left, but you can also get an online ticket to watch the live stream as well. We can’t wait to see you in person, and get together after all these years, in our hometown!

Interface Design Patterns UX Training

Also, we have just 4 tickets left for our friendly upcoming Live Interface Design Patterns UX Training (starts Sep 9). For everything from complex enterprise-grade tables to nested multi-level mega-dropdowns. Plus, a UX certificate for your hard work. Ah, and you get the 7h-video course on UX as well!

For now though, off we diving deep into the tricky parts of JavaScript!

Vitaly (@vitalyf)

1. JavaScript Visualized

JavaScript can be confusing. To make complicated JavaScript concepts easier to grasp, Lydia Hallie decided to take a visual approach to explaining them — with GIFs.

JavaScript Visualized

Lydia’s seven-part article series JavaScript Visualized visualizes event loop, hoisting, scope, the JavaScript engine, prototypal inheritance, generators and iterators, as well as promises and async/await. No matter if you’ve come across one of the terms after googling an annoying bug and want to make sense of it for good or if you’re a visual learner who needs a practical example to better understand the concepts, Lydia’s rundown has got your back. (cm)

2. @mention Autocomplete Tips

Apps like Twitter, Slack, Notion, and Google Docs made the “@mention” pattern popular. We can type @ to mention a person or # to mention a channel, we can trigger actions with /, or bring up a selection of emojis by typing :. Sarah Dayan takes a closer look at what makes a great “@mention” autocomplete feature.

So, You Want to Build an @mention Autocomplete Feature?

As Sarah points out, augmenting the typing experience is about uncovering content as well as reducing friction and the cognitive load by bringing the right information at the right time. And well, her real-world examples and demos illustrate how versatile the @mention design pattern really is — from a simple mention to a conversational interface between the user and the app. Inspiring! (cm)

From our sponsor

Optimizing Your Visual Media Is Critical

Optimizing Your Visual Media Is Critical
Every unused, unprocessed, or unoptimized video is costing you opportunities for your business. Stream videos with HLS, the most advanced adaptive bitrate protocol. With the imgix Video API, get the best video quality and bandwidth adaptability and use your existing storage — with no asset migration needed.

3. Command Menu React Component

A command menu is a fantastic way to give your product’s users quick access to actions and content. Paco Coursey created a handy little React component that helps you build command menus that are fast, composable, and can be styled to your liking. Say hello to ⌘K.


⌘K is not only a command menu component but can also be used as an accessible combobox. You render items, and it filters and sorts them automatically. ⌘K supports a fully composable API, so you can wrap items in other components or even as static JSX. To see what it looks like in practice, be sure to check out the demo. (cm)

4. Upcoming Online Workshops

That’s right! We run online workshops on frontend and design, be it accessibility, performance, navigation, or landing pages. 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 an overview of our upcoming workshops:

5. Building A Timeline Component

Building a component for a design system can be a tedious task. So how to best tackle it? Josh Cusick shares valuable insights into how their Design Systems team at Gusto built a timeline component for their Workbench design system. It’s not only a fantastic overview of building a well-thought-out, accessible component but also a helpful rundown of what a collaborative design process can look like.

Building Workbench. How we created the Timeline component.

Josh takes us step by step through the process of building the component in Figma and code — from understanding the problem and the use cases for the component to performing final checks before shipping it. He explores API and design explorations, design and engineering specs, how they built the component in Figma and React, as well as how they handle usage guidelines and final documentation at the end of the process. Lots of interesting takeaways that you can apply to your team’s workflow, too. (cm)

6. Accessible UI Primitives With React

Buttons, pickers, menus, overlays, date and time, navigation. React Aria is a library of React Hooks that provides accessibility and behavior for common UI components to help you build your own accessible component library.

React Aria

To ensure the best experience for all users, the components have been thoroughly tested and are in line with WAI-ARIA Authoring Practices to offer full support and consistent behavior for mouse, touch, keyboard, and screen reader interactions. React Aria supports more than 30 languages, including right-to-left-specific behavior, internationalized date and number formatting, and more. The design of the components is fully customizable. A fantastic base for an accessible design system. (cm)

From our sponsor

Join The Upwork Affiliate Program

Join The Upwork Affiliate Program
Everyone comes to Upwork with a vision in mind. As an Upwork affiliate, you can promote two services to help your audience connect with the talent they need to realize their vision: Project Catalog and Talent Marketplace.

7. Documentation Made Easy

It’s complicated enough to write good documentation, let alone create the HTML, CSS, and JavaScript that a good-looking documentation website calls for. Docusaurus 2.0 is here to change that. Created by the Meta Open Source Team, Docusaurus generates an optimized website that is easy to host anywhere so that you can focus on what really matters: writing the content.


All you need to do is write Markdown files, and Docusaurus takes care of the rest. It ships with out-of-the-box versioning, search, and internationalization functionalities, with a call to accessibility and search engine optimizations, while React enables a modern Single Page Application navigation. The flexible theming system lets you adapt the UI to match your branding. Docusaurus might also be worth considering if you’re looking for a quick and easy solution for a blog, knowledge base, or portfolio. (cm)

8. The Modern JavaScript Tutorial

Do you want to learn JavaScript, but don’t know where to start? Or maybe you’re already proficient in writing JavaScript and want to take your skills to the next level? Either way, The Modern JavaScript Tutorial has got your back. Created by Ilya Kantor in 2007 and regularly updated since then, the tutorial takes you through all things JavaScript, from the basics to advanced topics.

The Modern JavaScript Tutorial

The website contains 1,300 pages, divided into three parts. Part 1 focuses on the JavaScript language itself, starting from scratch and going on to advanced concepts like OOP. Part 2 teaches you how to manage the browser page, add elements, manipulate their size and position, and dynamically create interfaces and interact with the visitor. In part 3, you’ll find additional articles and extra topics. The content is open source and available in 12 languages. If you prefer to read offline, an eBook version (in PDF and ePUB formats) is available for purchase. Happy learning! (cm)

From our sponsor

Northwestern’s Online MS in Information Design and Strategy

Northwestern’s Online MS in Information Design and Strategy
Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. Learn more.

9. New On Smashing Job Board

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 (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

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

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#367: Front-End Helpers

Tuesday, August 23, 2022

Little helpers for JavaScript and CSS, with a few tools for HTML email workflow and interactive timelines.Issue #367• August 23, 2022 • View in the browser 💨 Smashing Newsletter Yasou Smashing Friends,

#366: Fearless Salary Negotiation and Job Interviews

Tuesday, August 16, 2022

Better salary negotiations, job interviews, company culture and software engineering skills. Issue #366 • August 16, 2022 • View in the browser 💨 Smashing Newsletter Yasou Smashing Friends, Producing

NL #365: Design Systems

Tuesday, August 9, 2022

On motion and accessibility in design systems, naming conventions, and design systems in enterprise settings. Issue #365• August 9, 2022 • View in the browser 💨 Smashing Newsletter Howdy Smashing

#364: Design and UX

Tuesday, August 2, 2022

With UX encyclopedia, authentication UX, data visualization, accessibility, and an exquisite look in Leonardo da Vinci's work. Issue #364• August 2, 2022 • View in the browser 💨 Smashing Newsletter

#363: Friendly Little Front-End Tools

Tuesday, July 26, 2022

Useful little helpers for the command line, better thinking, maps, SVG, interface copy and timing. Issue #363 • July 26, 2022 • View in the browser 💨 Smashing Newsletter Dobar dan Smashing Friends, Who

AI and Design, Grid Areas, FigStats, ChatGPT, Payments UX

Tuesday, February 7, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar February 7 2023 Combining AI and Design: A Step-by-Step Guide

Game On! 23 Glorious Game Rooms From the AD Archive

Monday, February 6, 2023

Plus, The Future Perfect spotlights contemporary Korean design & more news View in your browser | Update your preferences Architectural Digest AD PRO Logo moon jars on a shelf THE FUTURE PERFECT

🏡 Flawless Smart Home Mobile Apps + 🏆 Challenge Updates

Monday, February 6, 2023

Your UpLabs Design Fix Is Here 🙌 First and foremost, we want to congratulate RH Agency, the winner of our latest 📑 Asana Redesign Challenge! Congrats! Secondly, the end of January has brought us an

Accessibility Weekly #330: Modern Health, Frameworks, Performance, and Harm

Monday, February 6, 2023

Sponsored by Automattic. They're hiring. February 6, 2023 • Issue #330 View this issue online or browse the full issue archive. Featured: Modern Health, frameworks, performance, and harm “A person

Latest stories

Monday, February 6, 2023

Submit Story Techcopes – The best free online SEO tools you will ever need Unlock the Full Potential of Your Youtube Channel with These Must-Have Free Online SEO Tools and more Find used fonts on any

Netflix Users, color-mix(), Poline, WhatsApp, TresJS

Monday, February 6, 2023

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar February 6 2023 The users Netflix forgot about

Pondering the future of web interactions

Sunday, February 5, 2023

Issue 129: If the internet was designed today, what would it feel like? ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Latest stories

Sunday, February 5, 2023

Submit Story ColorMagic – Generate ideal color palettes with the power of AI ColorMagic is a color palette generator with GPT-3 AI. Just enter a color mood or image in text to generate a ready-to-use

Latest stories

Saturday, February 4, 2023

Submit Story UX Podcasts For Designers Podcasts are a fantastic opportunity to get up close with the people who know their craft. In this post, we compiled podcasts that are bound to provide valuable

Color Toilets and Sinks—Fixtures of Midcentury, Kitschy Interiors—Are Chic Now

Friday, February 3, 2023

Plus, a "Westworld" house goes on the market + more real estate news View in your browser | Update your preferences Architectural Digest AD PRO Logo A WESTWORLD HOUSE GOES ON THE MARKET,