Salut Smashing Friends,
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!
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!
— Vitaly (@vitalyf)
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)
From our sponsor
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.
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.
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)
From our sponsor
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
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)
From our sponsor
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 rock.
Follow us on Twitter • Join us on Facebook