#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. [SmashingCong 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]( ⌘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 Workshops]( 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]( - [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. [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. [Docusaurus]( 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 - [Java Developer]( at Integrated Data Services (USA) - [UI Developer]( at Integrated Data Services (Remote) - [Software Engineer]( at Vestcom (Remote) --------------------------------------------------------------- 10. Recent Smashing Articles - [How To Improve And Measure Your Progress Learning Web Design]( - [Better Video Streaming With imgix]( - [Designing Better Error Messages UX]( - [Smashing Podcast: What’s The Value Of A Design System?]( - [What Makes A Great Toggle Button? (Case Study, Part 1)]( - [What Makes A Great Toggle Button? (Case Study, Part 2)]( - [Read more articles on Smashing Magazine →]( --------------------------------------------------------------- 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 rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](