Zdravo Smashing Friends,

The web is a magical place. We often focus on the latest technologies and the latest frameworks, but what makes it truly wonderful is what folks around the globe actually manage to accomplish with these technologies and frameworks.

In today’s newsletter issue, we look at fascinating, beautiful projects and tools that designers and developers have built with so much detail and attention. They are simple things that make our life better by enriching our world and making the web feel like a magical place.

Nothing really beats the conference vibe in New York: full of energy, creativity and great speakers. Get your ticket.

Speaking about magic: we won’t have any extraordinary magic tricks at our upcoming SmashingConf NYC 🍕, but we’ll do everything possible to create a memorable, incredible conference experience for front-end engineers and designers — with plenty of useful sessions and hands-on workshops along the way. We hope to see you there! 🎉🥳

Smashing Hour is free for all — bring along your friends!

Alongside our friendly front-end & UX workshops, we have another special free online event coming up on Tue, Oct 4: we’ll be doing another Smashing Hour — this time all around Figma tricks and techniques with the one-and-only Christine Vallaure. And it’s free! Get your free ticket!

In the meantime though, off we go exploring all these little friendly tools — happy experimenting, everyone! :)

— Vitaly (@vitalyf)

1. Interactive Music Theory Tools

Music is fun, but the music theory behind it often isn’t. Or is it? Well, it can be! No matter if you’re learning an instrument and need some help with things like scale formulas, key signature, or the circle of fifths or if you never had any musical ambitions at all, muted.io is bound to tickle your fascination for the mechanisms that fuel music.

muted.io is a collection of interactive music theory tools and visual references to learn music online for free — and, of course, to have some fun with it. It includes an interactive music theory cheatsheet, a virtual piano, a mini music and melody maker for creating musical loops, a beat-making machine, and everything else you need to find your way around in the world of music.

This includes scales, a scale finder, chords, BPM counter and a note identification game. A fantastic resource — for (aspiring) musicians and everybody who loves a good, interactive website. (cm)

2. Free SVG Brand Logos

Whenever you need an SVG version of a certain brand logo, chances are high that you’ll find what you’re looking for on Simple Icons. The site offers more than 2,300 free SVG icons for popular brands.

The logos in the collection range from tech companies and tools to media, sports and clothing brands, personal transport, and much more. You can download each icon individually or copy the hex value of the brand’s color to your clipboard with a click. Icons can also be served from a CDN and are available through npm and Packagist packages. One for the bookmarks. (cm)

From our sponsor

Managing Projects Doesn’t Have To Be A Mess

Basecamp helps teams organize projects in a way that makes sense for all. Stop guessing where files are or when discussions happened. Try Basecamp today.

3. Real-World UX Challenges

Theory is good, practice is better. If you want to train your UX skills, UX Tools offers a variety of real-world UX challenges for you to solve. Aimed at beginners and experts alike, you’ll not only improve your skills but also take away portfolio-worthy deliverables once you’ve mastered a challenge.

From user interviews and user flows to wireframes, information architecture, and form design, 18 UX challenges are waiting to be solved. Each challenge consists of a scenario and a task. If you need help, you can check out the hand-picked tutorial recommendations. There are also recommendations for tools that might come in handy. A great opportunity to put your UX design skills to the test. (cm)

4. Text-To-Timeline Tool

So you need to create a timeline? To map out the timeframe for a project, for example? Markwhen offers a very straightforward approach to timelines: You write text that resembles Markdown, and the tool converts it into a nice-looking timeline for you. All of that happens right in the browser.

There are three different views available for your timeline: a classical, cascading timeline, a map, which comes in handy if you want to map the events to locations, and a text document view. Sharing a timeline is easy, too. You can use a link to share the timeline document and, if necessary, specify who can view it. Alternatively, there are PDF and PNG downloads available. A handy little helper. (cm)

5. Upcoming Front-End & UX Workshops

That’s right! We run online workshops on 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 online workshops:

• Architecting Design Systems Workflow
  with Nathan Curtis. Oct 6–14
• Optimistic UI Masterclass Dev
  with Zell Liew. Oct 6–14
• Designing for Emotion Masterclass UX
  with Aarron Walter. Oct 17–18
• Designing The Perfect Web Forms UX
  with Vitaly Friedman. Nov 17–18
• Designing Better Products Masterclass UX
  with Stéphanie Walter. Nov 28 – Dec 12
• Smart Interface Design Patterns UX
  8h-video course on interface design with Vitaly Friedman

6. How To Say No

We all know how hard it can be to say ‘no’. No matter if it’s to a project, a meeting, a phone call, a guest post, to pushy salespeople, or anything else you don’t have the time for or don’t feel comfortable with. So how to find the right words in situations like these? How to express that you don’t consent to something, in a polite yet clear way?

The site How to say no has got your back. With 31 email templates that help you say ‘no’ in any situation. You can filter the replies depending on the situation and either copy the template you want to use to your clipboard with one click or add it directly to Gmail. If you have another great example of how to say ‘no’, you are welcome to submit it. (cm)

7. Sounds To Keep You Focused

How about a short visit to the Kalahari desert, an Icelandic nature reserve, or Java’s last rainforest? Well, Earth.fm takes you to places you’ve probably never been to before.

Earth.fm is a free repository of pure, immersive natural soundscapes from all across the globe. Just choose your destination from the world map and dive right into the sounds of singing birds, rustling leaves, or roaring waves. The idea behind the project is not only to positively impact our well-being but also to raise awareness of the fact that natural ecosystems like the ones in the soundscapes become increasingly scarce as humans continue to destroy them.

Another fantastic resource to keep you focused when coding or designing is The Sound Of Colleagues. If you’re working remotely and miss the familiar office sounds, the site lets you create your personal office ambient mix from sounds like keyboards, telephones, street noises, and, of course, people. (cm)

From our sponsor

Northwestern’s Online MS in Information Design and Strategy

Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. Learn more.

8. Encyclopedia Of Visual Art

Making the world’s art accessible to anyone and anywhere. That’s the mission behind WikiArt. The visual art encyclopedia already features more than 250,000 artworks by 3,000 artists — and more are to come, as the vision of the non-profit project run by a volunteer team is to cover the entire art history of Earth, from cave artworks to modern private collections.

The featured artworks can be found in museums, universities, town halls, and other civic buildings of more than 100 countries. Most of them aren’t even on public view. You can browse the artworks by style, media, genre, movement, artist, century, nationality, and more. A breathtaking journey through the history of art. (cm)

9. New On Smashing Job Board

• E-Commerce UX Auditor
  at Baymard Institute (Remote)
• Front End Web Developer
  at CTAC (United States)
• Java Developer
  at Integrated Data Services (USA)

10. Recent Smashing Articles

• What’s New In Gatsby 2022?
• Building A Retro Draggable Web Component Using Lit
• Rethinking Star Ratings For Readers
• Headless In Times Of Accessibility
• JavaScript APIs You Don’t Know About
• Read more articles on Smashing Magazine →

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