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.

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!).

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 Tree.fm!

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.

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.

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.

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.

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:

• DevOps Masterclass Dev
  with Denys Mishunov. June 21 – July 5
• Figma Workflow Masterclass UX
  with Christine Vallaure. July 7–22
• Effective Usability Testing UX
  with Steph Troeth. July 11–25
• Level-Up With Modern CSS Dev
  with Stephanie Eckles. July 11–25
• Designing Better UX With Top Tasks UX
  with Gerry McGovern. Sep 13–27
• Interface Design Patterns UX Training UX
  with Vitaly Friedman (Live UX training + video course). Sep 9 – Oct 7
• Jump to all online 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.

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

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.

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

• Expert Wordpress Developer
  at Red Edge (Arlington, VA)
• Product Owner
  at Health Resources in Action (Remote)
• WordPress Developer
  at Codeable (Minneapolis, MN)

10. Recent Smashing Articles

• Adding Search To Your Site In 15 Minutes
• How To Apply UX Principles To Embedded Systems: Learnings From The Field
• The Future Of Frontend Build Tools
• Simplify Your Color Palette With CSS Color-Mix()

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 rock.

Follow us on Twitter • Join us on Facebook