Counting Down To Bundles Of Smashing Joy And Workshops In 2021 — Smashing Magazine

Workshop Bundles for the Year Ahead

Smashing Events has expanded its live design and coding sessions with workshop bundles, letting you pick three, five, or ten workshop tickets across the lineup. The tickets apply to ongoing, upcoming, and future workshops. If you don't see a topic that fits your work, the team is open to suggestions — reach them on Twitter. For early-bird pricing and notifications as new sessions are announced, subscribe to the list.

Membership Perks and Podcast Growth

Smashing's membership program continues to grow, with discounts on printed books, conference tickets, and job postings for members. Joining is also a way to support the publication's running costs.

The Smashing Podcast has passed 56,000 downloads since its rollout of a new episode every two weeks, with 34 guests so far. Host Drew McLellan and the podcast's Twitter account are open to topic requests from listeners.

Preventing Layout Shifts With CSS Grid

CSS Grid is well known for building complex layouts, but Hubert Sablonnière discovered it can also help prevent layout shifts. His "Anti Layout Shift Grid Stacking Technique" solves toggling-state UI problems that often occur with components that need to swap between multiple panels.

Unlike absolute positioning, the Grid-based approach supports situations requiring more than two panels, and you don't need to assume which panel should determine the component's overall size. Sablonnière's blog post covers practical details for preventing both vertical and horizontal shifts.

Fixing Headers And Jump Links

Fixed headers frequently hide content when users navigate via jump links. A well-supported CSS solution now exists: scroll-margin-top. Assign it to your target elements, and the position: fixed header won't obscure them when a jump link brings the user to that section. It's a short line of code with significant usability impact.

Fluid Typography With clamp()

CSS has added powerful functions for fluid scaling: clamp(), min(), and max(). The latter two return the respective minimum and maximum values as the viewport changes, while clamp() accepts both a minimum and maximum plus a preferred size.

Trys Mudford highlights that clamp() is especially useful for broadly fluid typography when you don't need to precisely define the relationship between varying sizes. His in-depth article offers practical tips for using the feature effectively.

Open-Source Screen Recorder And Annotation Tool

Alyssa X's Screenity is a free, open-source screen recorder designed for context-rich feedback and product demonstrations. It supports drawing on screen, adding text and arrows, highlighting clicks, focusing on the mouse, and push-to-talk, all without time limits.

The tool is available for Chrome.

A Human-Friendly Date Picker

Tommy Feldt's date picker proof of concept demonstrates how accessible date selection should work. Using Chrono.js, it accepts natural language input such as "tomorrow", "December 2", or "in 5 days", and includes shortcut buttons for common dates.

The component is fully keyboard- and screen-reader-accessible, offers an on-demand help feature, and degrades gracefully when JavaScript or CSS is unavailable.

Becoming A Jamstack Explorer

Jamstack Explorers offers a structured path into modern web development. Three courses cover Angular with Tara Z. Manicsic, serving and tracking multiple site versions with Netlify taught by Phil Hawksworth, and Next.js essentials guided by Cassidy Williams.

Progress tracking and rewards lead to a certificate and the Jamstack Explorer title once all three missions are complete.

Making Remote Design Work

InVision has compiled resources to help remote design teams handle creative collaboration, coordination, and focus. A companion eBook draws on InVision's experience running a fully distributed team of 700 employees across 30 countries.

Full-Screen Countdown Timer

Koos Looijesteijn built Big Timer to help keep video calls, talks, and workshops on schedule. The bold, minimal browser-based countdown survives accidental tab closures and device restarts, with keyboard shortcuts for adjusting duration, pausing, or stopping.

Focusing Soundscapes And Music

Several tools address the need for background sound while working. I Miss The Office recreates workspace audio with typing, squeaking chairs, and watercooler chatter. For those who prefer other ambience, Noizio mixes nature and city sounds, while Brain.fm and Focus@Will both use their own neuroscience-based approaches to design functional music for improved attention.

The Web Almanac 2020

The yearly Web Almanac examines the current web landscape by combining HTTP Archive data with community expertise, drawing on statistics from more than 7.5 million websites. Its 22 chapters span four parts — content, experience, publishing, and distribution — with an in-depth look at performance included.

Mapping Your Site's Requests

Simon Hearne's request map generator visualizes every request on a page for a given URL. Node size is proportional to the percentage of total bytes, and hovering reveals response and load time details, offering a quick way to understand where external bytes concentrate.

Modernizing JavaScript Bundles

Older JavaScript code often carries outdated polyfills or syntax that limit performance. EStimator analyzes a site's bundles and calculates the size and speed improvements achievable by switching to modern syntax, showing which bundles benefit most. The source code is on GitHub.

Further Reading

• Getting Started With Neon Branching
• SVG Coding Examples: Useful Recipes For Writing Vectors By Hand
• How To Design Effective Conversational AI Experiences: A Comprehensive Guide