Staying Connected While Staying Home

With conferences canceled and social distancing in place, the design community has had to rethink how it gathers, learns, and shares knowledge. Smashing Magazine has responded by shifting its programming online, offering a mix of paid workshops, free meetups, and live-streamed events designed to keep the community engaged. Here’s what the team has lined up for the coming weeks and months.

New Book: Click!

Paul Boag's latest book, Click!, is now available for pre-order at a discount. The print edition ships later, but the eBook is available immediately. Across 11 chapters, Boag explores the psychology behind user decisions, how to measure conversion, and strategies for encouraging users to act without making them feel pressured. Readers who join the Smashing membership get the eBook for free, along with access to other titles.

Online Workshops: May Through July

Smashing's front-end and UX workshops are moving online, with live sessions led by industry experts. Each workshop includes exercises, slides, recordings, and dedicated Q&A time, allowing participants to get practical, actionable insights without leaving home. Discounts are available for students and large groups.

Spots are limited, so early registration is recommended for the next three months of sessions.

For those interested in hosting their own online workshops, Smashing Podcast episode 14 features Rachel Andrew discussing how to run such events and adapt traditional conferences when in-person attendance isn’t possible.

SmashingConf Live: June 9–10

SmashingConf Live is a two-day online conference focused on front-end and UX. The event kicks off at 8 AM PDT on both days with interactive sessions, followed by Q&As and discussion zones. Attendees can expect design and coding challenges, a scavenger hunt, fireplace chats with mystery guests, and a closing party. Active participation is encouraged, making it a conference where attendees play a role rather than just watching.

For those who need help getting time off, Smashing provides a Convince-Your-Boss template to ease the conversation with employers.

Free Community Events

Smashing Meets is a free meetup series starting next week, covering front-end, UX, performance, and accessibility topics. The first events are made possible with support from design communities around the world.

Smashing TV is also hosting a free webinar on May 19th. Carie Fisher and Harris Schneiderman will demonstrate automated testing basics and offer lessons on expanding accessibility test coverage beyond automation—without requiring significant resources.

Podcast And Community Spotlight

Moving into its 16th episode, the Smashing Podcast shares conversations with designers and developers, and is available for subscription on favorite podcast apps. Transcripts are available for previous episodes, and updates are posted on Twitter.

The magazine is also looking for creative wallpaper designs, encouraging artists and designers to submit their ideas for a chance to be featured on Smashing Magazine.

What To Read This Month

Smashing Magazine publishes new articles daily, and a few recent posts resonated particularly well with readers:

  • “Setting TypeScript For Modern React Projects Using Webpack And Babel” by Blessing Krofegha — A practical guide to bringing static typing to React with TypeScript, hooks, and Reach Router.
  • “A Complete Guide To Mechanical Keyboards” by Ben Frain — A look at layouts, switch types, and keycap materials for anyone who spends hours at a keyboard.
  • “Micro-Typography: How To Space And Kern Punctuation Marks And Other Symbols” by Thomas Bohm — An examination of how to properly handle white space and punctuation in web design today.
  • “How To Pass Data Between Components In Vue.js” by Matt Maribojoc — An analysis of three common techniques for sharing data across Vue components and when to use each.
  • “Reducing Design Risk” by Eric Olive — Four practical techniques to mitigate risk in the design process while managing pressure to rush research.

Useful Tools and Resources to Bookmark

Designing for Accessibility and Forms

Color selection is about more than aesthetics. Poor contrast can make a product difficult or impossible to use for people with vision impairments. Geenes, a detailed contrast checker by Gianluca Gini, helps you spot potential issues early. The tool lets you experiment with hue ranges and saturation, then applies palettes to one of three UI mockups. You can simulate various vision impairments to understand how affected users perceive colors before deciding on final tones, then copy the code or export directly to Sketch.

Geenes

For component libraries, Adam Silver's No Style Design System prioritizes accessibility and web forms over the usual assortment of accordions, carousels, and dropdowns. Built for his book on Form Design Patterns, the system covers autocomplete, checkboxes, password reveal, radios, select boxes, and steppers—most with minimal styling and clean markup. For more complex patterns, Inclusive Components by Heydon Pickering offers tutorials on accessible cards, data tables, notifications, sliders, tabbed interfaces, tooltips, menus, and toggles.

Accessible Component Libraries

Increasing CSS Control

Miriam Suzanne created a demo showing a clever technique for defining a cascade of custom properties. The approach lets you specify which intent should take priority without worrying about the specificity of how a value is defined. Using a button as an example, the default style always falls back to --btn-bg--default. Adding the disabled attribute overrides any other button colors regardless of where they're set, while new button types use --btn-bg--type to override only defaults, not states. The values can also be set contextually, avoiding the usual pitfalls of highly-specified inline styles.

See the Pen Custom Cascades by Miriam Suzanne.

See the Pen Custom Cascades by Miriam Suzanne.

Another useful reference is Front-End Bookmarks, where Manuel Matuzović curates articles and talks on HTML, CSS, and JavaScript. Resources are grouped alphabetically by elements, attributes, properties, selectors, methods, and expressions. Whether you need guidance on aria-labelledby or the ::marker pseudo-element, the collection likely has something helpful—and you can contribute missing resources on GitHub.

Front-End Bookmarks

Streamlining Development Workflows

Command line documentation often feels dry and intimidating. Dash Dash reformats Unix (Linux, BSD, macOS) manual pages with clean typography and layout, adding search, examples, and TL;DR sections. For a broader journey from basics to system debugging, The Art of Command Line is a solid guide. If you need advanced practice, cmdchallenge asks you to solve tasks with a single line of bash.

Dash Dash

GitHub has many underused features. Joe Previte's collection of GitHub tips and tricks covers automations and shortcuts in bite-sized videos—like squashing commits on merge or opening a repository in the browser with GitHub CLI. Most tips also appear as short blog posts for those who prefer reading.

GitHub Tips And Tricks

New Tools for Interaction and Focus

Vime is an open-source media player library designed to give you control. It supports HTML5, HLS, Dash, YouTube, Vimeo, and Dailymotion, offering a lightweight, responsive, accessible alternative to Videojs and Plyr. Vime has no external dependencies and ships in packages tailored to different needs. Its plugin system allows extensive customization—think custom controls, settings, and tooltips—while supporting the last two versions of modern browsers and IE11.

Vime

Remote work can be isolating. The Sound of Colleagues mixes office noises—typing, talking, phones, coffee machine, printer—so you can build custom ambient soundscapes that bring a bit of office bustle to your home office.

The Sound Of Colleagues

Further Reading

Smashing Editorial (cm, vf, ra, mrn)