A Month of Remote Workshops, New Books, and Podcast Episodes
Keeping up with the web industry is a full-time job in itself. Here’s a rundown of what we’ve been up to at Smashing Magazine over the last month, along with some highlights from the community.
The shift to fully online events has pushed us to rethink how we deliver the SmashingConf experience. Our online workshops have turned out to be surprisingly effective: participants from around the globe now collaborate on group exercises in ways that would be impossible at a physical venue. Each session includes takeaways, exercises, access to slides, recordings, and live Q&A time with the instructor.
If you want to join in, the full schedule of online workshops is live, so you can plan ahead. If you need help making the case to your employer, we’ve prepared a Convince-Your-Boss template you can use.
- Follow @smashingconf on Twitter
- Subscribe to the SmashingConf Newsletter
- Watch previous SmashingConf videos
New Releases From the Book Shelf
Paul Boag’s Click! Encourage Clicks Without Shady Tricks is in its final production stage, with the pre-release kicking off on May 12. The book’s 11 chapters walk you through practical, straightforward steps to boost your conversion rates without resorting to dark patterns. You can sign up for a pre-order discount to be among the first to grab a copy.
Meanwhile, printed copies of The Ethical Design Handbook have been making their way to readers, and the early responses have been encouraging. If you haven’t seen it yet, you can download a free PDF excerpt (5 MB) to get a feel for the content.
In the latest Smashing Podcast episodes, Drew has been talking to a range of interesting people. Laura Kalbag discussed privacy and digital rights, while Trine Falbe and Martin Michael Frederiksen dug into what ethical design really means in practice. There’s also the episode with Eduardo Bouças on serverless and Stéphanie Walter on mobile UX. You can subscribe wherever you get your podcasts.
- All previous Smashing Podcast episodes with transcripts
- Follow @SmashingPod on Twitter
What Readers Have Been Reading
We publish fresh articles every day, and a few recent pieces have really connected with readers:
- “Best Practices With React Hooks”
by Adeneye David Abiodun
An exploration of React Hooks rules and how to use them effectively in your projects. A working knowledge of React Hooks is assumed. - “Inspired Design Decisions With Herb Lubalin”
by Andy Clarke
Combining elements to create powerful headers and calls to action, using pre-formatted HTML text and SVG text elements for precise typography, and making SVG text accessible. - “Baking Structured Data Into The Design Process”
by Frederick O’Brien
SEO retrofits only take you so far. As metadata gets smarter, building it into your design process from the start becomes increasingly important. - “How To Make Life Easier When Using Git”
by Shane Hudson
Practical tips for daily Git users who don’t want to think about trees and dangling blobs.
Remote Work, CSS Tooling, And Browser-Based Utilities
Leading A Distributed Design Team
Managing a remote design team for the first time can be intimidating, but veterans have already worked out playbooks worth borrowing. Mark Boulton has summarized the approaches that helped him lead remote teams for years, from preserving team rituals to setting clear expectations about availability and coaching people through the realities of working from home. None of the advice is hard to implement, yet it can meaningfully change how a team functions.
Practical CSS Viewport Unit Usage
Viewport units let you size elements fluidly without JavaScript. Ahmad Shadeed’s guide to CSS viewport units walks through the basics of vw, vh, vmin, and vmax, contrasts how they behave versus percentages, and shows concrete use cases for putting them into production.
A More Capable File Uploader
Uppload is an open-source JavaScript image uploader built by Anand Chowdhary that works with any file upload backend. Drag-and-drop is only one option: users can also import from a camera, URL, social media, or even generate a screenshot from a given URL. Effects and filters such as brightness, contrast, and saturation can be applied during upload, and the modular design means you can tree-shake unused plugins. The library ships with more than 30 plugins and supports browsers back to IE10.
Countdown With Flip Counter
Rik Schennink’s Flip Counter is an open-source, dependency-free plugin for countdowns, clocks, and sales counters. The signature feature is the smooth card-flip animation. Presets provide starting points for common scenarios, and everything visual is customizable with CSS.
Email Code Done Right
Mark Robbins’ Good Email Code library gives you copy-paste-ready HTML email patterns alongside the reasoning behind each technique. The priority, Robbins explains, is semantic, functional, accessible code that meets user expectations; cross-client consistency and pixel-perfect layouts matter but come second.
Tooltips, Popovers, And Menus In One Library
Tippy.js handles the logic and styling for any element that should overlay the document flow, such as tooltips, popovers, dropdowns, and menus. It is optimized to prevent flipping and overflow, follows WAI-ARIA guidance, and works across modern browsers, including acceptable performance on low-end devices. Styling is done with standard CSS, and TypeScript types are included.
Animated Product Mockups In The Browser
When Alyssa X could not find a tool to produce animated product GIFs and videos, she built Animockup. Drag screen footage into the browser-based editor and it is automatically placed inside a device mockup of your choosing. Text and styling can be added, and presets optimize the output for platforms such as Twitter, Instagram, and Dribbble.
Gradient Generation Without The Guesswork
Choosing harmonious gradient colors is tricky, especially under time pressure. The color gradient generator from My Brand New Logo relies on gradient algorithms to produce well-balanced palettes from a single base color. Four gradient styles range from subtle to deep, intense, or pearl-like effects; sliders provide fine control, and the final output is copy-paste-ready CSS.
Collaborative Whiteboarding
Excalidraw is a virtual whiteboard meant to be as immediate as pen and paper. You get shapes, lines, arrows, text, and a restrained set of styling options so the focus stays on the idea. For remote teams, the highlight is live collaboration that can be shared with team members or clients, with export and save options included.
BEM Naming, Simplified
BEM keeps CSS scalable and collaborative but naming can stall experienced developers. The team at 9elements published a BEM cheat sheet with naming suggestions for common components: breadcrumbs, buttons, cards, lists, tabs, form checkboxes, sidebars, and more.
For deeper BEM territory, Luke Whitehouse tackles the recurring question of grandchildren — elements tied to another element rather than the block. He reviews three strategies: flattening the hierarchy, forming new blocks, and extending the naming convention itself.
Where Retro Games Live On
ClassicReload preserves more than 6,000 titles — retro games and abandoned DOS/Windows interfaces — playable directly in the browser. Search by name or filter by year, genre, or platform. Whether you want The Oregon Trail, Prince of Persia, or Dangerous Dave, a detour here will cost you some time.
DOM Scripting Without A Library
Phuoc Nguyen has collected 100 native DOM scripting snippets with explanations, each labeled by difficulty. Examples climb from simple checks (is an element focused?) through exporting a table to CSV to advanced interactions like a range slider. Relatedly, the "You might not need jQuery" project lists alternative utility snippets for anyone questioning whether that dependency is necessary.
The Case For Unusual Color Names
Snail-paced soft pink, unsealed mahogany, and lousy watermelon do not sound like a palette, but that is exactly what colors.lol offers. Creator Adam Fuhrer curates the site from the Twitter bot @colorschemez, which generates random color schemes and pairs every hex value with an adjective drawn from a 20,000+ word list. Even with the ridiculous labels, the underlying values are real, ready-to-use hex codes like #FDB0C0, #4A0100, and #FD4659.
Repeating SVG Masks With CSS Colors
Tyler Gaw wanted a flexible header whose bottom edge ended in a squiggle rather than a straight border — a seamless horizontally repeating pattern that could be recolored via CSS at any time. His answer: flexible repeating SVG masks. SVG supplies the repeated shape, CSS controls the color, and mask-image hides all parts of the underlying div that do not intersect with that shape.
Drawing From The Community Queue
Several other submissions caught the editorial team’s attention this cycle. Excalidraw carried the collaborative diagramming torch; Uppload brought useful pragmatism to image handling; Mark Boulton’s guidance arrived at a timely moment for teams adjusting to distributed work.
The newsletter selections above capture only a fraction of what lands in the inbox. With each issue the editorial challenge is restraint — there is no shortage of talented people producing clever, useful tools worth sharing. For those inclined to browse further, recent longer reads from the magazine cover designing conversational AI experiences, improving conference speaking skills, valuable email newsletters for designers, and ongoing investigations into CSS viewport unit limitations.
