September 20, 2022 Smashing Newsletter: Issue #371
This newsletter issue was sent out to 222,845 subscribers on Tuesday, September 20, 2022.
Editorial
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.
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! 🥳
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)
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. ;-)
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
9h-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)
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)
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).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.