Dear Friend,
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.
Coming up, we have:
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)
Table of Contents
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)
From our sponsor
Free coaching to help you be seen in tech — Get a free resume review
Are you looking for a tech job where you clock in... or for a career where you’ll be seen? Seen by Indeed, a matching service for software engineers, product managers and other tech pros, sorts through 1000s of companies like Twilio, Overstock, VRBO, and Paypal, and matches tech talent like you to the role that’ll take you further.
Free coaching to help you be seen in tech join for free.
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! ❤️
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.
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)
11. New On Smashing Job Board
-
Senior PHP / WordPress Plugin Developer at WP White Security (Anywhere)
“You will be leading the development of our WordPress plugins portfolio. Your tasks will span from designing new features, writing code and bug fixing, expecting that new and changed code is thoroughly tested and well documented.”
-
UX Research Writer & Analyst at Baymard Institute (US East Coast + UK)
“Would you like to join a team of dedicated usability research writers, who analyze and write about cutting-edge User Experience research? Producing UX research findings that will be used by thousands of web professionals, including some of the biggest brands in the world (including Nike, Sears, Lenovo, Etsy)?”
-
UX/UI Designer (d/f/m) at moovel Group GmbH (Hamburg, Germany)
“If you’re a product and interaction driven design enthusiast you should join us on our journey inventing the future of mobility! For our team, we are searching for a UX/UI Designer (d/f/m) in Hamburg.”
12. Our Most Popular Articles
-
How To Create A Compelling Landing Page
Creating a compelling landing page involves a combination of clear focus, persuasive copy, considered design and relentless testing. Without all four your page will fail.
-
Implementing Skeleton Screens In React
In this tutorial, you’ll learn what a skeleton screen UI is and some types of skeleton screen libraries, along with their pros and cons. We’ll build a YouTube-like skeleton screen UI using React Loading Skeleton. Then, you can experiment on your own with the skeleton screen React package of your choice.
-
Best Practices With React Hooks
This article covers the rules of React Hooks and how to effectively start using them in your projects. Please note that in order to follow this article in detail, you will need to know how to use React Hooks.
This newsletter issue was written and researched by Cosima Mielke, Iris Lješnjanin, Rachel Andrew, Vitaly Friedman and Christiane Rosenberger.
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
