Smashing Newsletter: Issue #253

Editorial

We’ve been thinking about the different ways we can connect with the Smashing community, and to help you all connect with each other during this time of social distancing. We have launched our online workshops which started off with a couple of initial workshops led by Vitaly and myself.

However, they turned out to be such a success, and the feedback from attendees has been so amazing that we decided to quickly book in more speakers. We’re so happy at how well these have been received, and for us to be able to bring you closer to more of your favorite speakers.

Upcoming online workshops with Topple the Cat, and its friends.

Coming up, we have:

CSS and Sass with Miriam Suzanne,
Web Performance with Harry Roberts,
Front-end Accessibility with Marcy Sutton,
HTML Email with Rémi Parmentier and
Smart Interface Design Patterns with Vitaly Friedman.

I’ll be running a CSS Layout workshop in June, but until then, we’re also putting together our very first Smashing Meets! Working in collaboration with meetup organizers around the world, we are planning two global meetups for the Smashing community and our friends. More information will be shared in the next week or so, but you can already register for free.

We have two Meets planned: one on May 18 at 1 PM PDT (a good time for the US) and another on May 19 at 2 PM CEST which is a better time for folks based in Europe and Asia. However, you can join whichever works best for you — no matter where in the world you are.

With so much happening right now that is quite relevant to our industry, we may send one or two more emails than usual about the things we are doing at Smashing. Don’t worry, we aren’t about to turn into some sort of cat-themed spamming machine! However, right now email is the best way to let our community know what is happening and make sure you get the chance to sign up for things like our Smashing Meets.

Looking forward to meeting you at one of our online events!
— Rachel Andrew (@rachelandrew)

Accessible Component Libraries
Profiling React.js Performance
Command Line Love
Front-End Bookmarks
Inspect Text By Right-Clicking It
Confirm Or Undo?
Color Themes For Your Dev Environment
A Minimalist And Modern Media Player Library
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. Profiling React Performance

You’ve built a React app and aren’t quite sure how to identify possible performance bottlenecks? Addy Osmani wrote a comprehensive guide to profiling React.js performance.

At the example of a Movie queueing app, the guide dives deep into render performance, measuring interactions, and measuring custom metrics. Andy shows how to use the React Profiler API to measure renders as well as the cost of rendering, and how the new experimental Interaction Tracing API helps answer questions like, “How long does a button click take to update the DOM?” Last but not least, you can learn more about how the User Timing API enables you to measure custom performance metrics using high-precision timestamps. A great summary. (cm)

2. Confirm Or Undo?

As designers, when it comes to critical actions in our UIs — like moving records or archiving cards or deleting email lists — we tend to be cautious and protective. We don’t want our customers to make costly mistakes just by hitting a wrong button, or by tapping on a wrong spot unintentionally. So we try to verify intent with confirmation dialogs, usually asking to confirm the action, and sometimes asking to type in a word explicitly. But is it always the right design decision?

In his article, Confirm or Undo, Josh Wayne argues that customers often don’t read confirm dialogs and habitually click confirm. His suggestion is to avoid confirmation dialogs and use undo instead: a visible notification allowing users to restore or recover the initial state of things with a click. Kinneret Yifrah agrees as well, arguing that a decision will depend on reversibility of action, its severity, complexity and frequency. The less severe the action, the less likely confirmation dialogs to be needed.

As Alan Cooper writes, “For confirmation dialog boxes to work, they must only appear when a user will almost definitely click the No or Cancel button, and they should never appear when a user is likely to click the Yes or OK button.” So perhaps we don’t need confirmation dialogs as much as we think we do. (vf)

3. Accessible Component Libraries

While many of the component libraries we create are trying to cover all the usual suspects (the accordions, the tables, the carousels, the drop-downs, along with typography, colors and box shadows), No Style Design System by Adam Silver is focused primarily around accessibility and web forms.

As a system created for and used in his book on Form Design Patterns, Adam’s library provides a set of accessible components for everything from autocomplete, checkboxes and password reveal to radios, select boxes and steppers. Most of them have a minimal CSS styling with clean, accessible markup. And if you need slightly more advanced components, Heydon Pickering’s Inclusive Components has got your back: with comprehensive tutorials on accessible cards, data tables, notifications, sliders, tabbed inerfaces, tooltips, menus and toggles. (vf)

4. Command Line Love

It’s not uncommon for technical documentation to be dry and feel intimidating, especially for people who are just getting started with a new tool. That can get quite frustrating especially when a manual is difficult to read or follow, or the explanations are verbose and lack examples.

Dash Dash takes the Unix (Linux, BSD, macOS) open source manual pages and sets the content in a beautiful type and layout. It provides not only explanations of all commands, but also search, examples and TL;DR sections. Also, The Art of Command Line takes you on a journey to Command Line from basics to system debugging.

And if you are up for advanced command line techniques, cmdchallenge prompts you to solve tasks with a single line of bash. (vf)

5. Front-End Bookmarks

Some of us save all the useful articles and talks they come across in one ever-growing bookmark folder (which can make finding what you’re looking for quite a challenge at times), others have a more organized approach. Like Manuel Matuzović.

Manuel collects articles and talks about HTML, CSS, and JavaScript on his site Front-End Bookmarks, grouped alphabetically by elements, attributes, properties, selectors, methods, and expressions. No matter if you’re looking for information on how to correctly use aria-labelledby or what the ::marker pseudo-element is all about, chances are good that Manuel already compiled helpful resources on the topic. By the way, if you feel that a resource is missing in the collection, don’t hesitate to contribute to it on GitHub. (cm)

6. Color Themes For Your Dev Environment

Have you ever wished for a streamlined color theme across your entire development environment? One that is pleasant for the eyes and that stays the same when you switch from your code editor to the terminal across to Slack? Matt Swensen built a little tool that helps you achieve just that.

themer takes a set of colors and generates themes for your development environment based on them. You can either start with a pre-built color set or create one from scratch by entering two main shades for background color and foreground text and accent colors for syntax highlighting. Once you’re happy with the result, you can download the themes you want to generate from the palette — different terminals and text editors are supported, just like Slack, Alfred, Chrome, Prism, and some other tools and services. To make the color coordination complete, there are matching wallpapers based on your theme, too. Beautiful! (cm)

7. Inspect Text By Right-Clicking It

Some tools are small yet genius, and once you’ve used them for a while, you wonder how you could have gotten along without them. Fontanello might be one of those handy little helpers you’ve already been missing in your toolbox.

Available for Chrome and Firefox, the browser extension lets you display the basic typographic styles of a text. Just right-click the text, and Fontanello shows you information about the typeface, weight, size, color, and contrast. A real timesaver compared to opening up DevTools and searching for the style manually. (cm)

8. A Minimalist And Modern Media Player Library

If you want to embed a media player on your site, Vime might be worth taking a closer look at. Built around the idea that you control the player, not the other way around, the open-source library provides an alternative to Videojs and Plyr and supports HTML5, HLS, Dash, YouTube, Vimeo, and Dailymotion.

Vime does not only shine with a minimalist, sleek look, but it is responsive, accessible, modular, and lightweight, too. It gets by without any external dependencies and comes in different packages tailored to different needs so that you can pick just what’s required for your use case. And since minimalist doesn’t mean bland, Vime is backed up by a plugin system that offers a lot of room for customization — think custom controls, settings, tooltips, and more. The last two versions of all modern browsers as well as IE11 are supported. (cm)

9. Upcoming In Smashing Membership

A few weeks ago, we released the Smart Interface Design Checklists, a free PDF deck with questions for designers and developers to consider when designing anything from accordions and hamburgers to maps and tables. Made possible with the kind support of Smashing Members. So thank you! ❤️

“Designing UX, Live” with Paul Boag— May 1 at 17:00 London time

Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉

10. Our Next Smashing Workshops

In our workshops, we explore best practices and interesting techniques in front-end and interface design, always focusing on actual solutions to real-life problems.

We also have online workshops that are designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.

Advanced CSS/Sass with Miriam Suzanne (May 7–22)
Smart Interface Design Patterns with Vitaly Friedman (May 12–26)
The CSS Layout Masterclass with Rachel Andrew (June 11–12)
Front-End Accessibility Masterclass with Marcy Sutton (June 16-30)
Web Performance Masterclass with Harry Roberts (May 28 — June 12)
Modern HTML Emails with Rémi Parmentier (June 18 — June 26)

Meet Smashing Online Workshops on front-end & UX, with Miriam Suzanne, Marcy Sutton, Harry Roberts and many others.

Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)

April 28, 2020 Smashing Newsletter: Issue #253

Previous Issues