Remote Work, Postponed Events, And A New Book
The team behind Smashing Magazine doesn't operate from a single office. The project began in Freiburg, Germany, and the people working on it are spread across the globe, with most not working full-time for the publication. So when COVID-19 forced many teams to go remote, editor-in-chief Rachel Andrew shared advice on staying connected and continuing to learn in this new environment. Given the travel restrictions and broader circumstances, SmashingConf SF has also been postponed to November; organizers stated that safety and health come first.
The big recent release is The Ethical Design Handbook, which is shipping now. The book aims to give teams the practical tooling needed to shift a company toward a more sustainable and healthy digital footprint over time. Response to the launch has been strong, with formal reviews promised shortly. A free PDF excerpt is available if you want to sample the content before buying.
Podcasts And Conference Talks To Save For Later
The Smashing Podcast has reached its 12th episode, in which guests from different backgrounds share their experiences. With busy schedules in mind, episodes are available for listening anytime, plus transcripts. Follow @SmashingPod for regular updates.
A live stream is soon approaching as well. On March 19 at 17:00 London time, Cassidy Williams will host a Smashing TV webinar explaining how to structure a modern React application and then build an Electron application on top of it. Smashing Members can download recordings and receive extra perks through their membership. The events can watch last-minute learning moments.
Beyond the recent live-stream news, talks from past SmashingConfs cover live designing and debugging, all presented on the big screen by speakers digging into real examples from their own projects. Catch videos of talks from many previous events:
Want more where that came from? Search all SmashingConf videos for talks on any topic — this category extends back to the first Freiburg event in 2012.
What’s Trending In The Inbox
Recent posts that are gaining solid traction neatly tie technical topics to design practice. One asks the uncomfortable question: “Why Are We Talking About CSS4?” The piece by Rachel Andrew works through the pros and cons of formalizing a new CSS version — perhaps naming it CSS4 — and invites you to weigh in within the CSS Working Group context.
Meanwhile, browser changes have revived the importance of setting width and height attributes on images. Doing so helps prevent layout shifts and directly benefits the visitor experience.
Worth reviewing if you’re starting new projects are two views on front-end architecture:
- Single-file styling for Tailwind CSS in a React project, aimed at the border between design tokens and hand-coded styles — emphasis on production-ready setup steps.
- Alpine.js introduces a minimal JavaScript approach for adding basic interactions without build steps. The file is a fraction of full-scale frameworks, both flexible and pragmatic.
- Design logic that keeps ergonomics in mind, especially as fewer people hold phones with two hands: exactly what “How To Design Mobile Apps For One-Hand Usage” covers.
If you prefer the audio format for staying current on front-end topics and like watching talk recordings after the fact, this month’s roundup will keep your queue for runs, commutes or tedious tasks covered.
Design Lint: Catching Figma Inconsistencies Before They Ship
When you are deep in a project, it is easy to lose the objectivity needed to spot small errors like an incorrect border radius or a missing text style. The free, open-source Figma plugin Design Lint helps you find and fix these mistakes so they never reach production.
The plugin checks for missing fill, stroke, and effects styles and flags incorrect border-radius values on layers. It updates automatically as you correct issues, keeping your workflow uninterrupted. Since the repository is on GitHub, you can write custom rules to adapt the plugin to your specific process.
Learning CSS Positioning With Help From Cats
An interactive guide from Ahmad Shadeed takes an unconventional approach to teaching CSS positioning by using cartoon cats. The tutorial walks you through positioning three felines and a blanket inside a box using CSS.
Once you have mastered the concept, an interactive demo lets you edit values and immediately see how the result changes. It turns a technical topic into an engaging, hands-on exercise.
Highlighting Designer-Focused Tools and Resources
The following projects stand out for solving practical problems or pushing creative boundaries. They range from asset management apps to experimental art pieces.
Iconset: Centralized SVG Icon Management
Iconset is a free cross-platform app for collecting, customizing, sharing, and managing SVG icon sets. You can organize icons with tags or sets, making it quicker to find what you need. Icons can be dragged directly into your favorite tool.
Cloud services such as Dropbox or OneDrive keep icons in sync across team members. The app is available for macOS and Windows.
Heraclos: A WebGL Adventure Game
The browser-based game Heraclos follows a reluctant hero in ancient Greece who stumbles upon an amphora belonging to a god. He is declared the chosen one and sent to climb a secret mountain to return it.
The project stands out for its parody of heroic narratives and for its technical pedigree. Designed in only three months by students at the Gobelins school of images in Paris, it was built with WebGL and Cannon.js, demonstrating noteworthy capability on the web.
Kap: An Open-Source Screen Recorder
Kap is an open-source screen recorder built with web technologies. It produces high-quality recordings in GIF, MP4, WebM, or APNG formats, and supports audio from your microphone, click highlighting, and trimming.
For sharing, Kap integrates with Giphy, ZEIT now, and Streamable, making it practical for producing technical demos.
Open Peeps: A Hand-Drawn Illustration Library
Pablo Stanley’s Open Peeps library offers 584,688 possible combinations. You mix and match vector elements—clothing, hairstyles, facial expressions, and poses—to create diverse characters. Ready-to-download versions are also available for quick use.
Released under a CC0 license, the library is free for personal and commercial projects, giving designers a handcrafted feel without licensing restrictions.
Making Inputs More Inclusive and Accessible
WebAim’s 2019 analysis of the top one million websites estimated that fewer than one percent of pages were error-free. Oscar Braunert’s article on inclusive inputs starts with the basics of WAI, ARIA, and WCAG before exploring how to make input fields more accessible. The recommended changes do not require altering the user interface.
“If in doubt, just do it. Nobody will notice. Except some of your users. And they will thank you for it.”
Developer-Facing Typefaces and Reference Guides
JetBrains Mono: Readability for Code
JetBrains Mono addresses common developer typography needs. Compared with other monospace fonts, its height is increased while characters remain standard in width to maintain expected line lengths. It includes 138 code-specific ligatures to reduce visual noise and improve whitespace balance.
The font is available in four weights and supports 145 languages.
Defending the iframe
Iframes have earned a negative reputation, but JavaScript developer Nada Rifki argues they have legitimate use cases. Her ultimate guide covers iframe features, practical use cases, and how to secure them against vulnerabilities. It offers a balanced perspective on when this element makes sense.
Consolidating Console Command Knowledge
Browser debugging consoles have grown from simple error reporters to tools that log network requests, security issues, and warnings. Websites can also trigger console output via JavaScript for debugging. While features vary between browsers, Travis Almand’s guide provides a comprehensive overview that covers both Firefox and Chrome.
It details the various commands available in the console output or through JavaScript, serving as a reference for developers.
Creative Experiments and Further Reading
Beyond functional tools, a few web experiments deserve attention.
Intimacy: An Interactive Poem
Design student Thibaud Giffon created “Intimacy,” an interactive short poem exploring its theme through abstract images, sound, and text. The piece has eight chapters, including compassion, distance, confusion, and touch, each reflecting the subject differently—from warm harmonic waves to dissonant strings and bursting colorful bubbles.
Continued Learning Paths
For more background on related topics, browse these selections:
- How To Design Effective Conversational AI Experiences: A Comprehensive Guide
- The Modern Guide For Making CSS Shapes
- Recreating YouTube’s Ambient Mode Glow Effect
- An Introduction To Full Stack Composability
