Bringing You The Best Of Smashing — Smashing Magazine

A Year of Pivots and New Formats

It has been a challenging year for everyone, and the team at Smashing has had to adapt quickly. With the ongoing effects of COVID-19 still being felt worldwide, all 2020 conferences have been moved online. As editor-in-chief Rachel Andrew notes, this required figuring out new ways to deliver great content quickly, a process encouraged by the community’s enthusiasm and willingness to try new formats. The focus remains on safety, wellbeing, and creative wellness within the community.

These efforts are made possible by reader support, which the team sincerely appreciates.

Learning From Home With Interactive Workshops

The new online workshop format is designed to deliver the same experience and access to experts as an in-person event, without leaving your desk. This allows participants to learn at their own pace and time, following along with interactive exercises.

The lineup includes a balance of design- and frontend-related workshops to help you boost your skills.

The Smashing Podcast: Learning on the Go

For those who want to take Smashing content along with them, the Smashing Podcast is an ideal companion for a commute, a workout, or chores. Hosted every two weeks by Drew McLellan, the show features conversations with design and development experts about their work on the web. You can subscribe in your favorite app to receive new episodes as soon as they are available.

If you have a topic you would like to hear covered, or if you know someone who would be a good guest to discuss a web- or design-related topic, the team is eager to hear from you on Twitter.

New from the Smashing Bookshelf

The first copies of Click! How to Encourage Clicks Without Shady Tricks have recently shipped. Those who pre-ordered received a personal note from author Paul Boag, and the reaction on social media has been positive. The book arrives at a time when many could use a creative nudge, offering a fresh perspective on what works—and what doesn’t—when building online sites and services.

For those interested, the table of contents is available online, as is a free PDF excerpt of the book at 17.3 MB.

Popular Articles on Smashing Magazine

A new article is published every day on Smashing Magazine, and the following pieces have been particularly popular with readers recently:

• “CSS News July 2020,” Rachel Andrew
• “An Introduction To React’s Context API,” Yusuff Faruq
• “How To Pass Data Between Components In Vue.js,” Matt Maribojoc
• “Setting Height And Width On Images Is Important Again,” Barry Pollard
• “Differences Between Static Generated Sites And Server-Side Rendered Apps,” Timi Omoyeni

Handpicked Tools and Reads for the Busy Front-End Developer

Every other week, the Smashing Newsletter rounds up useful projects and thoughtful articles from around the web. For this edition, we have collected a fresh batch of resources covering everything from free typography and build tool comparisons to clever CSS tricks and a deep look at cybersecurity culture.

Typography Finds and Font Rendering Fixes

For designers looking for distinctive typefaces without a licensing fee, Argentina-based foundry Rostype offers 15 free fonts for both personal and commercial use. From retro-inspired display faces to futuristic and dynamic designs, the collection covers a wide range of aesthetics, including a typeface inspired by the lockdown period.

If you are more interested in how typefaces are made, Chris Bettig, Design Director at YouTube, shares a case study on the creation of YouTube Sans. Before this custom font, the platform used a modified version of Alternate Gothic for its wordmark without any clear typographic direction. The new typeface was built to work across all of YouTube’s products while reflecting the brand’s worldview. Bettig walks through the challenges the team faced bringing the font to life.

Fonts can also behave differently across browsers, as Stephanie Stimac discovered when the title of her personal website rendered much bolder in Safari than elsewhere. She dug into the differences between user-agent stylesheets and computed CSS properties to understand where the inconsistency came from. After testing Chrome, Firefox, and Edge, she found a simple safeguard: explicitly define font weights with numerical values instead of relying on keyword values, preventing the browser from making its own decisions.

Performance Monitoring and Notification Design

Keeping a site fast after launch can be a challenge if it is updated frequently. Zach Leatherman’s Speedlify is an open-source static site tool that automates continuous performance checks. It runs Lighthouse and Axe tests locally or on Netlify, publishing results automatically up to once an hour, and can also be triggered manually to keep performance metrics visible in a repository.

Push notifications have evolved significantly since they first appeared on iOS in 2009, followed by web support four years later. With variations across platforms such as Android, Windows, Safari, and Chrome, it is difficult to track where icons and line breaks fit. Lee Munroe has published a helpful design anatomy overview that summarizes character limits and formatting requirements per operating system, which is useful for previewing how a push notification will look on systems you might not have direct access to.

Animation, Build Tools, and Clever CSS Projects

Mitch Samuels created Keyframes.app to spare developers the constant switching between editor and browser while working with CSS animations. The tool provides a visual timeline editor where you can set CSS properties for each step and see an animated preview update live. Once the animation is ready, the generated CSS can be copied directly into a project. A Chrome extension version is also available.

When deciding on a build tool for a project, the Google Chrome developer relations team has built Tooling.Report to simplify the process. It runs a suite of tests to evaluate how well various bundlers adhere to best practices and gives an overview of the features each tool supports. Beyond helping you pick the right option for a new project, it also serves as a reference for integrating such practices into existing codebases.

On the creative side, Lynn Fisher shows what is possible with pure CSS by adding horizontal and vertical creases and a drop shadow to turn a flat image into a folded poster effect. While this may not be something you need daily, it is a good example of experimental thinking with modern CSS.

Elsewhere, Sandrina Pereira explores building a select element that is both good-looking and accessible. In her article on balancing native and custom select elements, the approach defaults to an entirely native select element for users of assistive technology, while mouse users see a styled alternative designed to behave like the native control.

Lea Verou also presents a JavaScript-free solution for “sticky until the header scrolls away” page navigation. Rather than relying on position: sticky alone, her approach in this write-up uses CSS variables and the max() function to apply min/max constraints to positioning, with a feature detection fallback for browsers without max() support.

Cybersecurity Stories Worth Your Time

Jack Rhysider’s podcast Darknet Diaries explores the people and incidents behind data breaches, hacktivism, and cybercrime. Episodes cover stories from a gambler who exploited a bug in a video poker machine to penetration testers breaking into businesses, all fact-checked and ethically sourced. It aims to inform listeners about the broader culture of cybersecurity so they can be more responsible digital citizens.

Further Reading on Smashing

• How To Design Effective Conversational AI Experiences: A Comprehensive Guide
• A Guide To Designing For Older Adults
• A Simple Guide To Retrieval Augmented Generation Language Models
• Getting Started With Neon Branching