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!
— 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)
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
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)
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).
- Design Systems
- Lovely Little Websites
- UX Guides, Templates and Career Ladders
- Useful Front-End Tools
- Design Systems
- Data Visualization And Dashboards
- Designing For Mobile
- Design & UI Inspiration
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.