August 30, 2022 Smashing Newsletter: Issue #368
This newsletter issue was sent out to 223,299 subscribers on Tuesday, August 30, 2022.
Editorial
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.
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!
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 9h-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.
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.
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)
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.
As always, here’s an overview of our upcoming workshops:
- Interface Design Patterns UX Training UX
with Vitaly Friedman. Sep 9 – Oct 7 - Designing Better UX With Top Tasks Workflow
with Gerry McGovern. Sept 13–27 - Designing Better Products Masterclass UX
with Stéphanie Walter. Sept 21 – Oct 5 - Architecting Design Systems Workflow
with Nathan Curtis. Oct 6–14 - Optimistic UI Masterclass Dev
with Zell Liew. Oct 6–14 - Designing for Emotion Masterclass UX
with Aarron Walter. Oct 17–18 - Designing The Perfect Web Forms UX
with Vitaly Friedman. Nov 17–18
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.
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.
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)
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 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)
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.