A Monthly Update On All Things Smashing — Smashing Magazine

Community Meetups and What’s New in the Workshop Lineup

The Smashing team recently wrapped up a series of open Smashing Meets events spanning three days. The sessions covered performance, CSS, GraphQL, and creative courage, with dedicated slots for Q&A and networking. The team reports strong engagement and feedback from attendees who appreciated the direct interaction with speakers.

Upcoming Online Workshops

A new batch of online workshops is now open for registration, with topics ranging from CSS and accessibility to performance and UX. Given that previous sessions have frequently sold out, early registration is recommended.

For those needing to make a business case to attend, Smashing provides a "Convince Your Boss" template designed to help secure managerial approval.

New Book Release: Click!

Paul Boag’s latest book, Click! How To Encourage Clicks Without Shady Tricks, is now shipping. The book examines strategies for improving conversion rates and meeting KPIs while maintaining customer trust. A free PDF excerpt (17.3 MB) is available for download, along with the full table of contents.

Smashing Podcast: Recent Episodes

Now 18 episodes in, the Smashing Podcast continues its bi-weekly release schedule. Host Drew McLellan interviews practitioners from across the industry. All previous episodes, including transcripts, are accessible online, and the show can be followed via @SmashingPod on Twitter.

Popular Articles This Month

The following articles published on Smashing Magazine have drawn particular attention from readers:

• "Equivalent Experiences: Thinking Equivalently," Eric Bailey
• "12 Ways To Improve User Interview Questions," Slava Shestopalov
• "How To Pass Data Between Components In Vue.js," Matt Maribojoc
• "An Introduction To React's Context API," Yusuff Faruq
• "How To Test A Design Concept For Effectiveness," Paul Boag

Modern CSS, Practical Tools, And A Peek At AR

Stephanie Eckles has spent 13 years as a front-end developer, and she has turned the problems she kept solving into Modern CSS Solutions for Old CSS Problems. The series tackles familiar pain points — the eternal centering question, equal-height elements, accessible dropdown menus, button styling — with contemporary CSS techniques. New topics are added regularly.

Illustrations Without The Illustrator

Not every project has the budget for custom illustration work. During lockdown, Pablo Stanley and friends built Blush to fill that gap. The tool collects 13 mix-and-match illustration libraries from artists worldwide, covering characters, cityscapes, plants, food, and abstract art. You pick a starting point and customize details until the image fits your story — “like playing legos made of vectors,” as Stanley puts it. High-quality PNGs download for free, and illustrators can apply to have their work featured.

Flexbox In 30 Bite-Sized Lessons

Samantha Ming’s free course Flexbox30 breaks the layout model into 30 short lessons. It starts with core concepts, then works through parent and child properties. Each lesson includes a downloadable cheat sheet, which makes the course useful as a refresher for anyone who understands Flexbox but forgets specific property details.

Speed Tests From Around The World

Most performance tools measure from a single location, which tells you little about how the site feels elsewhere. Fast or Slow, built by the team behind the Wordfence WordPress security plugin, takes a different approach. It draws on 13 calibrated servers in 13 cities, so measurements reflect real-user experience across geographies. The free tool returns an overall score plus location-specific breakdowns, and audits for CSS minification, image optimization, and caching help isolate bottlenecks.

Screenshots With A Proper Frame

Raw screenshots look bare, while full-window captures include distracting chrome. Browserframe offers a middle path: drag an image in, and it wraps the shot in a browser frame. You pick from multiple browsers, operating systems, and themes, and adjust background color, shadow, and padding before downloading. Useful for blog posts, slides, and social media.

Making Sense Of SVG Path Data

SVG path syntax is powerful but cryptic. Mathieu Dutour built the SVG Path Visualizer to decode it. Enter path data and the tool visualizes each command, with curated examples to help you learn the structure.

Copy And Paste From Reality

The research prototype AR Copy Paste lets you take a physical object — say, a book on your desk — and paste it into image editing software. Three modules work together: a mobile app captures the subject, a local server bridges the app and Photoshop and finds the right screen position, and a background-removal service cuts the image into shape. It is an early but working glimpse at augmented reality in creative workflows.

Diverse Visuals For Every Project

Black people and people of color remain underrepresented in stock-style illustrations. The team at 5four addresses that with Black Illustrations, packs depicting Black people across office, healthcare, education, and lifestyle settings. Two packs are free: “The Office Hustle” covers office and work-from-home scenarios, and “The Movement Pack” focuses on #BlackLivesMatter and racial equality. All packs work on websites, pitch decks, and infographics.

Easing Curves, Visualized

Easing curves make web motion feel natural, but their effect is hard to picture from a code snippet. Paul Macgregor’s Easings demonstrates common curves on real interfaces — gallery carousels, side menus, scroll-jacked sections, modals. Pick a curve from the collection or enter your own custom cubic-bezier to see it applied.

What 65,000 Developers Told Stack Overflow

The 2020 Stack Overflow Developer Survey reached 65,000 developers in February, and the results sketch a detailed picture of the community. Beyond demographics and professional background, the survey covers tool popularity, development environments, learning habits, problem-solving approaches, and job priorities — a broad look at how developers work today.

One Div, Infinite CSS Art

Lynn Fisher’s A Single Div project answers a creative constraint: every drawing is built from CSS inside one div element. Fisher uses Pug for templating and Stylus for preprocessing. The result is a gallery of lettering, patterns, objects, and characters that shows the range of pure CSS.

A Social Notebook For Data Science

Observable applies the open-source ethos to data work. The platform is a “magic notebook for exploring data and thinking with code” where you sketch with live data, prototype visualizations, and connect to Web APIs. Notebooks update instantly as you edit, and the community model encourages sharing and reusing components. Teams can edit the same notebook together in real time, opening the door to collaborative reports, explanatory visualizations, UI prototypes, and art projects.

Further Reading

• How To Design Effective Conversational AI Experiences: A Comprehensive Guide
• Useful Email Newsletters For Designers
• It’s Time To Talk About “CSS5”
• What Are CSS Container Style Queries Good For?