In these current strange times of isolation and social distancing (with almost all events and conferences being cancelled), it can be quite difficult to feel connected to family, friends and colleagues. Here at Smashing, we believe that is is now more important than ever to stay in touch and support each other. Behind the scenes, the team is working tirelessly on ways to keep the community connected, and oh boy do we have a lot of things in store for you! You didn’t really think we’d give up that easily, did you?

We’ve been busy over the last few weeks, and we’re not stopping yet! We have online workshops, SmashingConf Live, Smashing Meets and last but not least, Smashing TV coming right at your fingertips! But first, let’s see what else we’ve been up to…

Look What’s Cookin’!

Exciting times! Click!, our latest Smashing book, is available for pre-order with a friendly discount — you can already start reading the eBook until your printed copy arrives at your doorstep. Written by Paul Boag and beautifully designed by Veerle Pieters, the book is split into 11 chapters: from exploring the psychology of decision making and how to measure conversion to exploring ways of how to encourage users to act without alienating them.

Of course, if you’re feeling smashing today, we’d like to invite you join the Smashing family and get the eBook for free (among with many other eBooks and a few fancy cats!).

Learning And Networking, The Smashing Way

Despite the current circumstances, we’re keen to find ways in which we can offer Smashing experiences to anyone interested in learning from experts in our industry — without needing to leave your desk! We’ve been asking what type of resources you’d like to have, and so all of the following online events is what has landed in our Smashing wishing well. Thank you to everyone who has shared their thoughts and feedback — we’ve been all ears!

1. Online Workshops (May–July)

Our friendly online front-end/UX workshops are bound to boost your skills and help you gain practical, actionable insights from experts in the industry — live. There will be plenty of insightful takeaways, exercises, slides, recordings and friendly Q&A time. Of course, we’re happy to provide discounts for large groups and students.

We already have you covered for the next three months — make sure to save your spot as soon as you can:

Note: If you’re also interested in how you too can run online workshops, listen to Smashing Podcast episode 14 with Rachel Andrew in which she talks about running online workshops and how a traditional event can adapt when participants can’t attend in person.

2. SmashingConf Live (June 9–10)

Meet SmashingConf Live (June 9–10), a truly smashing, friendly online conference on front-end & UX. With interactive live sessions, practical insights, accessible speakers, collaborative notes and fireplace chats with like-minded folks. Jump to first confirmed speakers. Check schedule →

Both days start at 8 AM PDT (check your time), with interactive sessions, followed up with a time for Q&As and discussion zones.

Ah, and the best bit: a conference in which you play an active role — taking part in live sessions, Q&As, discussion zones and challenges. To the schedule. But of course that’s not all! Be prepared for design & coding challenges, scavenger hunt and fireplace sessions with mystery guests. And to keep in style, of course we’ll throw a Smashing Party.

Do you like what you see, but are worried about getting some time off from work? Well, you surely didn’t think we would leave your hanging? We know how difficult it can sometimes be, and so we’ve prepared a neat lil’ Convince-Your-Boss template to help you out. Good luck!

3. Smashing Meets (Free)

We’re super excited to run our very first Smashing meetup next week! We will focus on front-end and UX, but also cover all sorts of topics from performance to accessibility. Smashing Meets wouldn’t be possible without some amazing communities from around the world, so another Thank You to everyone involved!

4. Smashing TV (Free Webinar on May 19th)

Looking for ways to help you expand your accessibility test coverage beyond automation? With very little resources, you can make a meaningful difference. Join us with Carie Fisher and Harris Schneiderman at 7:00 PM CET/1:00 PM EDT who will demonstrate the basics of automated testing and share key lessons on on maximizing your accessibility impact.

Sharing Personal Experiences And Stories

We’re moving onto our 16^th episode of the Smashing Podcast next week! The Smashing Podcast is the perfect way to take a little bit of Smashing along with you on your morning walks, while washing the dishes, or anytime you like really. You can subscribe in your favorite app to get new episodes as soon as they’re ready.

• Previous Smashing Podcast episodes (including transcripts)
• Follow @SmashingPod on Twitter

Trending Topics On Smashing Magazine

We publish a new article every day on various topics that are current in the web industry. Here are some that our readers seemed to enjoy the most and have recommended further:

• “Setting TypeScript For Modern React Projects Using Webpack And Babel”
  by Blessing Krofegha
  This article introduces Typescript, a superscript of JavaScript that presents the static type feature for spotting common errors as developers codes, which enhances performance, hence results in robust enterprise applications. You’ll also learn how to efficiently set up TypeScript in a React Project as we build a Money Heist Episode Picker App, exploring TypeScript, React hooks such as useReducer, useContext and Reach Router.
• “A Complete Guide To Mechanical Keyboards”
  by Ben Frain
  How much thought have you put into your primary input device? Ever considered how much better your interface with your computer might be? In this article, we dive into the possibilities of mechanical keyboards. The different layouts, switch types and even keycap material. Strap yourself in — this will be a deep dive!
• “Micro-Typography: How To Space And Kern Punctuation Marks And Other Symbols”
  by Thomas Bohm
  For hundreds of years, we have been using white space in typography. Today, in 2020, how do we add spacing to punctuation marks and other symbols, and how do we adjust the space on the left and right side in an easy and consistent way? It is actually not as easy and quick as it should be.
• “How To Pass Data Between Components In Vue.js”
  by Matt Maribojoc
  With so many different ways to share data across components, you should know which technique is best for your situation. Let’s analyze three of the most common ways to pass data in VueJS.
• “Reducing Design Risk”
  by Eric Olive
  The pressure to rush market and usability research carries risk. We’ll offer four practical techniques to mitigate this risk and create designs that better serve customers and the company: context over convenience, compromise, better design decisions, design reduction.

Best Picks From Our Newsletter

We’ll be honest: Every second week, we struggle with keeping the Smashing Newsletter issues at a moderate length — there are just so many talented folks out there working on brilliant projects! Kudos to everyone involved!

Interested in sponsoring? Feel free to check out our partnership options and get in touch with the team anytime — they’ll be sure to get back to you right away.

P.S. A huge thank you to Cosima Mielke for writing and preparing these posts!

Creating Accessible Color Palettes

Finding the perfect tint or shade of a color is not only a matter of taste but also accessibility. After all, if color contrast is lacking, a product could, in the worst case, even become unusable for people with vision impairments. A very detailed contrast checker to help you detect potential pitfalls ahead of time comes from Gianluca Gini: Geenes.

The tool lets you tinker with hue ranges and saturation and apply the color palettes to one of three selectable UI mockups. Once applied, you can trigger different kinds of vision impairments to see how affected people see the colors and, finally, make an informed decision on the best tones for your palette. To use the colors right away, just copy and paste their code or export them to Sketch.

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)

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)

Custom CSS Cascades

Miriam Suzanne built a demo to illustrate a very clever way to define a cascade of custom properties. One that allows you to determine which intent should take priority, without worrying about the specificity of how the value is defined.

Miriam shows how it works at the example of a button. Due to how the cascade is arranged, the default button is always falling back to --btn-bg--default. Adding the disabled attribute, always overrides any other button colors, no matter where they are defined, and, when new button types are created, --btn-bg--type ensures that only the defaults are overridden but not the state. The approach also lets you set these values contextually. A smart solution to avoid the usual dangers that highly-specified inline styles usually bring along.

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.

GitHub Tips And Tricks

Do you know how to automatically squash commits on GitHub when merging pull requests? Or how to open a repo in the browser using GitHub CLI? If not, Joe Previte’s collection of GitHub tips and tricks might be for you.

In bite-sized videos, Joe shares small but powerful tips to take your GitHub workflow to the next level. And for those of you who prefer to learn by reading, most tips are also available as short blog posts. Handy little timesavers.

The Sound Of Colleagues

Working from home can have some real advantages over working from an office, but let’s be honest, it can be a rather lonely experience, too, when there are no colleagues around. If you feel your home office is getting too quiet and you need some bustle in the background to stay focused, The Sound of Colleagues has got your back.

The Sound of Colleagues lets you mix office noises to create your custom office ambient noise. People typing and talking, phones ringing, the coffee machine, the printer — all of these little things add up to bring a bit of office feeling to your home. Maybe it’ll even help you boost your productivity, who knows?

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.

Smashing Newsletter

Every second Tuesday, we send a newsletter with useful techniques on front-end and UX. Subscribe and get Smart Interface Design Checklists PDF in your inbox.

Your (smashing) email

Subscribe →

Front-end, design and UX. Sent 2× a month.
You can always unsubscribe with just one click.

(cm, vf, ra)