Smashing Magazine - #357: The Web is Fun!

With exciting and obscure websites — some of them not necessarily useful but remind us why we love the web so much in the first place. Issue #357 June 14, 2022 View in the browser 💨

Smashing Newsletter

Hallå Smashing Friends,

In our day-to-day routine, we often focus on things that bring value to our work. Yet there is an uncharted world of lovely little websites out there, with fun random places that might not be very valuable for our work but spark a little bit of joy or curiosity. We’ve collected some of these websites in this newsletter. Some of these sites are useful — others not so much — but they are the reason why we all love the web so much in the first place.

This week, we are heading to SmashingConf San Francisco 2022, our very first conference after two long years. We are excited to get together as a team again and meet wonderful speakers and incredible attendees. We’d love to see you there, of course. In fact, a few tickets are still available.

SmashingConf SF 2022

And if you can’t make it this time around, please join us tomorrow for a very special edition of Smashing Hour with Sara Soueidan — which happens to be running on Sara’s birthday. You might need to sing eventually (just saying!).

Smashing Hour

We hope you enjoy this little newsletter and hope to see you in person next week!

Vitaly (@smashingmag)

1. The Sound Of The Forest

So how about tuning in to a different kind of playlist for a change? One that takes your mind on a journey and helps you unwind, no matter where you are? There are no drums, bass, or electronic beats. Instead you’ll hear falling raindrops, rustling leaves, singing birds, and occasionally a monkey. Welcome to!

For the project, people from around the world recorded the sounds of their forests to give you the feeling that you’re right there, in the middle of a random forest somewhere in Spain or Ghana, in India or South Korea. The short sound snippets breathe with life and beauty and are not only a fantastic opportunity to take a break and relax for a moment but also a reminder of how endangered our forests are and that we need to do everything we can in order to protect them. (cm)

2. Keyboard Accordion Web App

Some projects just leave you in awe right from the moment when you first come across them. Tania Rascia’s Keyboard Accordion is such a project. It doesn’t have anything to do with the accordion component that we use in interfaces but with the musical instrument, the diatonic button accordion, which is popular in folk music. Tania acquired a button accordion recently, and because she didn’t want to annoy her neighbors, she decided to build a web app that she could use for practicing. That’s when Keyboard Accordion was born.

Keyboard Accordion

The web app brings the full functionality of a diatonic button accordion right to your browser. All you need to play it is a computer keyboard. Apart from the fact that it’s a lot of fun to make up little tunes on it — even for people who don’t have any musical knowledge — the project is a beautiful example that you can code anything you like if you only think outside the box. In her blog post “Building a Musical Instrument with the Web Audio API”, Tania shares an interesting look into the code. (cm)

3. The Beauty Of Vintage Seed Catalogs

Hand-illustrated type designs, ornamental borders, vibrant chromolithographs — 19th-century seed catalogs were pioneers in advertising. They date back to a time when the market of exotic trees and blooms turned into a consumer trade and the ritual of eating wasn’t about going to the nearest supermarket but about raising crops at home.

19th-century seed catalogs

If you are curious to learn more about the horticultural catalog boom, Ellie Howard wrote a fantastic article on seed catalogs from the 19th and early 20th century. It’s not only nostalgic eye candy but shares interesting research on the creative strategy behind them and the technical and societal progress that made it all possible. (cm)

4. Interneting Is Hard

HTML and CSS are hard. But they don’t have to be. That’s the idea behind Interneting Is Hard, a free HTML and CSS tutorial that Oliver James created to make web development accessible to as many people as possible, whether they are complete beginners or professional web developers who want to brush up on the state of the industry.

Interneting Is Hard

The curriculum covers every aspect of crafting a quality web page, thousands of code examples explain each HTML element and CSS property, and a textbook-worth of words provide real-world context around when and why you’d want to use each of them. To help you build mental models of complicated concepts, the tutorial also relies on 250 diagrams. From the basics of building a web page to Flexbox, responsive images, and web typography, Interneting Is Hard is a guide you might want to keep close or share with people new to the field. (cm)

5. Upcoming Online Workshops

You might have heard it: we run online workshops around frontend and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.

Smashing Online Events
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.

As always, here’s an overview of our upcoming workshops:

6. The History Of Web Design

The web is constantly evolving, and the web design trends that are state of the art today are likely to be outdated in just a few years. Just like the good ol’ interactive flash websites, blinking banners, and pixel art that were a thing around the turn of the millennium. If you are up for a journey back to the early days of the web, the Web Design Museum exhibits over 2,000 carefully selected websites from between 1991 and 2006.

Web Design Musem

The goal of the digital museum is to preserve the creative legacy of web designers for future generations — after all, the internet would not be what it is today without their work. You can browse through website showcases, visit exhibitions, or dive deeper into the software that used to fuel the web back in the days. And if you by any chance find a screenshot of a website dating back to the 1990s or early 2000s, you are welcome to contribute it to the museum. Happy exploring! (cm)

From our sponsor

Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern Information Design and Strategy.
Earn your master’s degree online.

7. Open-Source Pixel Art Icons

Everybody loves icons, right? A versatile open-source icon set comes from Gerrit Halfman: Pixelarticons. It includes more than 350 icons in pixel-art style based on a 24x24px grid and currentColor fills.


The themes include UI, tech, and e-commerce-related motifs. All icons were made individually using rectangles to recreate a non-anti-aliased look and making use of subtle padding for each icon. Gerrit recommends to use the icons with a width of 24px, 48px, 72px, 96px as all scales outside of 24px will make the icons look blurry. You can download the complete ZIP for free or copy individual icons as SVGs. Nice! (cm)

8. The Era Of Rebellious Web Design

In the editorial-media landscape, clean user interfaces, hamburger menus, and newsletter-like formats are still dominating. A refreshing rebellion from the clean responsive designs that we usually see on the web these days is the website portfolio of BDG where things are messier, more scribbly, and just a little more interesting. Angelica Frey takes a closer look at this new era of rebellious web design.

The Era Of Rebellious Web Design

As Angelica explores in her article, the root of this new visual language is based on a card format that the agency Code and Theory designed for The Outline with the intent to make a website feel like a product. BDG’s designs build upon this vision: The card system is the common thread between all properties but also a blank canvas that offers room for play and experiments. On Gawker, for example, you’ll see bold and clean typography with clear hierarchy and a spotlight on photography; Nylon plays with grungy textures, hand-written graphics, and energetic typography; and Input shines with colorful, paint-like vibes. An inspiring look at rethinking what a website can look like and breaking the rules without losing sense of the bigger picture. (cm)

9. New On Smashing Job Board

10. Recent Smashing Articles

That’s All, Folks!

Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

#356: Useful Front-End Tools

Tuesday, June 7, 2022

With clamp() calculator, SVG techniques, Arraybuilder, text cleaner, font subsetting and Illustrator Figma plugin. Issue #356• June 7, 2022 • View in the browser 💨 Smashing Newsletter Howdy Smashing

#355: Multi-Language UX

Tuesday, May 31, 2022

How to design a better language selector, localization case studies, internationalization in React and UX across cultures. Issue #355• May 31, 2022 • View in the browser 💨 Smashing Newsletter Góðan

#354: Front-End Accessibility

Tuesday, May 24, 2022

Accessible autocomplete, hidden content, custom radio and checkboxes, and accessibility linter. Issue #354 • May 24, 2022 • View in the browser 💨 Smashing Newsletter Merhaba Smashing Friends, We often

#353: Dashboards and Data Visualization

Tuesday, May 17, 2022

Dashboard design, better charts and how to make better decisions around data visualization. Issue #353 • May 17, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends, I had a dream

#352: Front-End Tooling

Tuesday, May 10, 2022

Terminal tools, VS Code extensions, DOM events, bundle analyzer and accessible Vue.js. Issue #352 • May 10, 2022 • View in the browser 💨 Smashing Newsletter Dobryy vechir Smashing Friends, There will

Should Product Managers Wireframe? Here's Balsamiq's take on it

Wednesday, June 29, 2022

When is it appropriate for PMs (but also founders, developers, marketers) to create wireframes? The latest news from Balsamiq: When is it appropriate for PMs (but also founders, developers, marketers)

Your PR questions answered - edition #2

Wednesday, June 29, 2022

Advice from Nora Wolf Welcome to the second edition of PR Questions with Nora. This new monthly newsletter feature was inspired by you! If you've attended one of our recent PR workshops, you likely

UX Writing, Making Rectangles, CSS Mistakes, Number Input, Figma Presentations

Wednesday, June 29, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 29 2022 UX Writing: Study Guide Unsure where

How Much Has the Real Estate Boom Changed Interiors?

Tuesday, June 28, 2022

Plus, this group is working to keep queer landmarks in plain sight View in your browser | Update your preferences Architectural Digest AD PRO Logo Man hanging the Stonewall street sign at Christopher

#359: A Mixed Bag of Goodies

Tuesday, June 28, 2022

From book covers and machine learning to accessibility and moodboards. A mix of goodies for everyone! Issue #359• June 28, 2022 • View in the browser 💨 Smashing Newsletter Hyvää päivää Smashing Friends

2022 Logo Trend Report

Tuesday, June 28, 2022

Hi Reader, these are my design and frontend picks this week. Highlights of the week Get the most of built-in interactivity of coded UI components - Design with fully interactive elements that make

Browser Choice, Defensive CSS, Keksdose, Email Workflow, Career Advice

Tuesday, June 28, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 28 2022 Apple Is Not Defending Browser Engine Choice

A Marcel Breuer–Designed Home Hits the Market + More Real Estate News

Monday, June 27, 2022

Plus, armchair-travel to the Netherlands with these TEFAF Maastricht standouts View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Furniture, Chair, Wood,

✨ Nifty NFT Landing Page Designs + 🏆 Challenge Updates

Monday, June 27, 2022

Find Out What's New In The UpLabs Design Realm This Week 🧐 Firstly, we're congratulating Itai Bracha, the winner of our latest 🖥 Design Agency Website Challenge! Lastly, here's a friendly

Accessibility Weekly #298: Using Accessibility Literacy to Counter Accessibility Ignorance

Monday, June 27, 2022

Sponsored by Automattic. They're hiring. June 27, 2022 • Issue #298 View this issue online or browse the full issue archive. Featured: Using accessibility literacy to counter accessibility