Smashing Magazine - #359: A Mixed Bag of Goodies

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,

It happened again last week. At the wonderful SmashingConf SF, a friendly fella asked me why we don’t run separate tracks at the conference — one for designers and one for engineers. For years, we’ve debated this question in a lot of fine detail and have come to the same conclusion every single time.

Accessibility Illustrations
Miriam Suzanne speaking about the shiny new features in CSS. (Photo taken by the wonderful Marc Thiele.)

Surely, we all are specialists in some areas and unavoidably less fluent in others. That’s just the nature of things, and given how multi-faceted the web is, it’s to be expected. Yet, in the age of specialization, there is a lot of value in being a generalist, too.

Personally, if I had to pick one single thing that helped me stay afloat throughout the years, it’s the ability to clearly see the web from a bird’s eye perspective. I might not need to be able to dive into every area immediately, but I know enough about what’s going on to be able to navigate that space comfortably.

That clear big picture is the value we try to provide with everything we do. There are plenty of options to dive into all the fine rabbit holes of each area, but we need to be able to spot these rabbit holes first. And we do so by learning about things that we don’t necessarily do ourselves, but that ultimately affect our work as well. So we can better understand why a designer insists on X or a developer prefers Y.

This very newsletter is very much a testament to this view. This time, we highlight a mixed bag of things — for developers, designers and everybody in-between. You might not be interested in everything, but you’ll find some things that are for you as well. And if you find them all interesting, well then you might be just one of us after all!

Happy reading, everyone!

Vitaly (@smashingmag)


1. Machine Learning And Design

Machine learning sounds like something that happens in giant data centers? Well, not at all. It’s closer to your work than you might think. If you’re curious about machine learning but you don’t know where to start, ML + Design is for you.

ML + Design

Created by Vlad Kyshkan, ML + Design is a collection of resources for the intersection of design, user experience, machine learning, and artificial intelligence. It currently features more than 100 articles, books, videos, podcasts, tools, and other useful links that equip you with the knowledge to take your first steps in the field. Happy experimenting! (cm)


2. Accessibility Illustrations

After spending two days in accessibility training with accessibility expert Marie Guillaumet, Stéphanie Walter was so inspired by the metaphors that Marie used to explain different aspects of accessibility that she decided to turn them into illustrations and share them with the community.

Accessibility Illustrations

From the rainbow of disabled people’s needs to the A, AA, and AAA mountain peaks to reach, Stéphanie created five illustrations to help understand and promote accessibility. Each one is dedicated to one of Marie’s metaphors and makes it easier to remember accessibility concepts and criteria. If you want to share the illustrations on your blog or social media, feel free to do so, but please remember to credit Stéphanie and link to the source. (cm)


3. Can I DevTools?

There is a lot of coverage on browser devtools but often it is exclusively focused on Chrome. So what about other browsers? What are their devtools capable of? To help you find out, Pankaj Parashar created Can I DevTools, a Can I Use for, well, devtools.

Can I DevTools

Can I DevTools compares and contrasts 55 devtool features across all major browsers. Can your browser’s devtools find unused CSS? Can it debug event listeners? And what about preserving console logs? Can I DevTools show you the current state of support at a glance. One for the bookmarks. (cm)


From our sponsor

Connect, Manage And Protect Apple Devices With Jamf Fundamentals

Connect, Manage And Protect Apple Devices With Jamf Fundamentals
The Jamf Fundamentals Plan is a powerful mobile device management solution with unique capabilities to protect, connect, and empower businesses. Manage your first three devices for free and add on more devices for just $4 per device per month.


4. From Google Docs To Wiki

Whether it’s onboarding new employees, documenting processes, or having a centralized location for knowledge, a wiki is helpful in many situations. If you ever played with the idea of creating a wiki but the process seemed too complicated, YNAW offers a quick and easy solution to get you started.

Wiki

YNAW (short for “You need a wiki”) lets you import your existing Google Drive folders and files and turns them into a wiki that you can share with team members or contacts. Everything saves to Google Drive, and changes you make to your Docs and Drive are instantly shown in your wiki, too.

You can make use of powerful Google Doc features like editing, live collaboration, and advanced formatting, while aft but not least, read-only mode prevents accidental updates. YNAW is free for one user, and there are discounts on the regular plans for registered non-profit organizations. A handy little helper! (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. Smart Interface Design Patterns

We’ve just added a few new videos to “Smart Interface Design Patterns”, a 7h-video course with Vitaly Friedman, focused on fine little details that make for smarter interface design — from complex navigation to filters, tables and web forms. Check the free preview.

Smart Interface Design Patterns

The course is created specifically for interface designers, UI engineers and developers who’d love to be prepared for complex UI/UX challenges. There is a live UX training that with UX certification that happens twice a year. Ah, there are just a few early-bird-tickets left! Jump to the details.


6. Moodboards Made Easy

Moodboards are fantastic helpers in the creative process, but creating them can be quite time-consuming. If you don’t want to spend a lot of time on resizing, realigning, and jumping between tools to create a moodboard, set.new might be worth taking a closer look at.

set.new

set.new is a free moodboard tool that works right in your browser. It features a built-in background remover and has several automatic tidy-up options that align your images in a cluster, rows, or columns, so that you don’t have to worry about formatting and can focus on visualizing your ideas instead. The tool is currently in private beta. To get the full experience, you need to sign up. Promising! (cm)


7. Icon Freebies

Icons! Who doesn’t love them? We recently came across some lovely free icon sets that are too good not to be shared. One of them is BlobsIcons. From a coffee maker, crab, and apple pie to a drilling machine, guitar, and windmill, the 328 icons-strong set includes motifs you won’t see so often anywhere else. And as bold as the choice of motifs is the color scheme, shining in red, green, blue, yellow, and black. The icons are available in SVG format.

Free Notion-style Icons

The 50 free Notion-style icons that Mary Amato designed have a unique doodled look. They are available in SVG and PNG formats and are fully scalable and customizable. You can use them for free in personal and commercial projects or pay what you want to give back to the designer.

Last but not least, there’s Eva Icons, a pack of more than 480 simple but beautifully crafted open-source icons for common actions and items. Perfect for user interfaces, they come in outlined and filled versions. SVG and PNG are available. (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.


8. The Book Cover Archive

We all know the saying, “Don’t judge a book by its cover”. And while it’s valid to say so, book covers have a special fascination to them, tickling our curiosity and waking expectations for what’s awaiting us on the inside. And, of course, they offer wonderful design and typography inspiration, too. A treasure chest for excellent book cover design is the Book Cover Archive.

Book Cover Archive

The Book Cover Archive is maintained by Ben Pieratt and Eric Jacobsen as an attempt to appreciate and categorize outstanding book cover designs. There are hundreds of book covers waiting to be explored — novels and biographies just like non-fiction books. Each cover features design info like the name of the designer, art director, or illustrator, and sometimes even typeface identification. Eye candy! (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
rock.

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Key phrases

Older messages

#358: Design Tools and Advice

Tuesday, June 21, 2022

With tips on colors in design systems, comparing design tools and taking a closer look at how emotional design works. Issue #358• June 21, 2022 • View in the browser 💨 Smashing Newsletter Ahoy Smashing

#357: The Web is Fun!

Tuesday, June 14, 2022

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

#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

You Might Also Like

Car UX, DevTools Tips, CSS Patterns, iOS404, Internet Cables

Thursday, April 18, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 18 2024 Steering the future: a new vision for car UX

Big Tents, Pistachio Palettes, and Other Late-Breaking Milan Discoveries

Wednesday, April 17, 2024

View in your browser | Update your preferences We've had a remodel! From now on, you'll be hearing from AD PRO in your inbox twice a week—once with a deep dive into trends to watch and subjects

163 / Dieter Rams inspired Framer components, America's national parks and more free resources…

Wednesday, April 17, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Apr 2024 • Part 1 View in browser Welcome to Issue 163! I'm comfortable talking to a human on camera, but talking at the camera, not so much. The

Logo System, BCWA Identity, War Robots, 84—24, 19th-Century Atlas

Wednesday, April 17, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 17 2024 Logo System: Explore 400+ logo designs logosystem

Emma Roberts's Home: AD100 Firm Pierce & Ward Share Their Secret Sources

Tuesday, April 16, 2024

Plus, the best exterior house colors View in your browser | Update your preferences Architectural Digest AD PRO Logo exterior of two residential buildings painted with blue trim with a brick patio and

#452: Design Workflow

Tuesday, April 16, 2024

How to choose the right idea, navigate difficult conversations and communicate design. Issue #452 • Apr 16, 2024 • View in the browser Smashing Newsletter Iyi akşamlar Smashing Friends, Design workflow

Mario & Pareto, faces.js, Sleep vs Blog, Dark Mode, DOM Folding

Tuesday, April 16, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 16 2024 Mario meets Pareto mayerowitz.io Discover how to

Gap, Teenagers, Artistic Intelligence, Should Designers Code, CSS in RSCs

Tuesday, April 16, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 15 2024 Gap is the new Margin frontendmasters.com In 2020

How to Combat Allergies at Home—Designers Weigh In

Monday, April 15, 2024

Plus, 5 gorgeous greenhouses from the AD Archive View in your browser | Update your preferences Architectural Digest AD PRO Logo a conservatory-style greenhouse at the back of a lush floral garden

Accessibility Weekly #392: Socks, Lies, and Accessibility

Monday, April 15, 2024

April 15, 2024 • Issue #392 View this issue online or browse the full issue archive. Featured: Socks, lies, and accessibility "Global Accessibility Awareness Day (GAAD) is around the corner.