Smashing Newsletter: Issue #252

Editorial

Nothing has boosted digital transformation faster than 2020. Yet when we look at digital, we often see the obvious downsides — audio and video issues, poor communication, never-ending email chains and a myriad of tools for everything from noise cancellation to scheduling meetings.

For the last two weeks, I’ve been running our very first Smashing Online Workshops with dozens of attendees from around the world. My previous experience with such workshops was never really great; they felt very much like painfully slow, half-broken webinars, and so frankly, I was quite nervous beforehand.

Topple the Cat — Meet Smashing Online Workshops on front-end & UX, with Brad Frost, Joe Leech, Miriam Suzanne and others. Can you spot them? ;-)

It all changed completely in the blink of a second. It was that incredible moment when I suddenly saw all these wonderful people in their home offices, with their kitchenettes and to-do-notes and their virtual backgrounds. While everything feels orderly and sterile on stage and in workshop auditoriums, online feels much more realistic and honest, with everybody joining in from their own home.

It might not sound like a big deal, but it’s changing everything. It really sets a different baseline for the learning experience, as everybody feels perfectly comfortable to type any question or comment in the chat, or quickly ask for a follow-up. It’s a very open-minded, inclusive and collaborative space where attendees take notes together, plug in relevant URLs, answer each other’s questions, fix formatting issues and even correct each other’s typos.

Plus, it’s a truly global interactive experience, where you see people with sunbeams reflecting in the windows while other people are just turning on their evening lights. In some ways, it feels like an informal gathering of like-minded people who truly care about what they do, and they want to get better together. So in the sessions, we’ve had literally people from all over the world working on group exercises, collaboratively — something we’d never be able to achieve with an in-person event.

What promised to be a subpar, difficult experience turned out to be a fascinating and very rewarding one. Digital space has obvious challenges, but it also provides incredible opportunities for us to connect and learn in ways we just couldn’t do otherwise.

I wouldn’t expect that I’d write this a few weeks ago, but I truly can’t wait to see all the wonderful people in the class this week again, and I can’t wait to run way more online workshops in the future. I’d be honored if you choose to join our wonderful speakers (or me) as well. Let's stay connected!

Can’t wait to see you soon! :-)
— Vitaly (@smashingmag)

Mastering BEM Naming Conventions
Managing HTML DOM And jQuery Alternatives
Flexible Repeating SVG Masks
Handling Monetary Values In JavaScript
Overly Descriptive Color Palettes
A Preserve For Classic Games
Vintage Movie Poster Inspiration
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. Mastering BEM Naming Conventions

BEM makes your code scalable and reusable, prevents it from becoming messy, and facilitates teamwork. However, even experienced CSS developers struggle with the naming conventions sometimes. To prevent you from getting lost in the BEM cosmos, the folks at 9elements put together the BEM Cheat Sheet with naming suggestions for some of the most common web components: breadcrumb navigation, buttons, cards, lists, tabs, form checkboxes, sidebars, and more.

If you want to dive in even deeper into the BEM methodology, Luke Whitehouse shares tips to tackle an ever-present issue in BEM: grandchildren, i.e. elements that are tied to another element, rather than to the block itself. Luke explores three different approaches to master the challenge: flattening the grandchildren and treating them as if they have no relation with their parent element, by creating new blocks, and by extending the BEM naming convention. A good read. (cm)

2. Managing HTML DOM And jQuery Alternatives

How do you manage HTML DOM with vanilla JavaScript only? Phuoc Nguyen collected 100 native DOM scripting snippets along with explanations on how to use them. The snippets are labeled by difficulty and range from basic (e.g. detecting if an element is focused) to more intermediate tasks like exporting a table to CSV and, finally, advanced use cases like creating a range slider.

How to manage HTML DOM with vanilla JavaScript only

Speaking of going vanilla: If you’re using jQuery in your projects, it might be a good idea to check if you actually need the additional dependency or if a few lines of utility code could do the trick. “You might not need jQuery” lists useful alternative code snippets that help you forgo jQuery. (cm)

3. Flexible Repeating SVG Masks

Sometimes it’s a small idea, a little detail in a project that you tinker with and that you can’t let go off until you come up with a tailor-made solution to make it happen. Nothing that seems like a big deal at first glance, but that requires you to think outside the box. In Tyler Gaw’s case, this little detail was a flexible header with a little squiggle at the bottom instead of a straight line. The twist: to make the component future-proof, Tyler wanted to use a seamless, horizontal repeating pattern that he could color with CSS in any color he liked.

To get the job done, Tyler settled on flexible repeating SVG masks. SVG provides the shape, CSS handles the color, and mask-image does the heavy lifting by hiding anything in the underlying div that doesn’t intersect with the shape. A clever approach that can be used as the base for some fun experiments. (cm)

4. Handling Monetary Values In JavaScript

If you need to work with monetary values, Dinero.js might be just what you’ve been looking for to make your life easier. The library helps you create, calculate, and format monetary values in JavaScript.

You can perform arithmetic operations with it, extensively parse and format them, and check for a number of things to make your development process safer and more efficient. Dinero.js works with any browser that supports the Internationalization API. A polyfilled version is available for older browsers. Handy! (cm)

5. Overly Descriptive Color Palettes

Have you ever considered combining snail-paced soft pink with unsealed mahogany and lousy watermelon as a color scheme for your next project? Well, what might sound a bit weird at first, is the concept behind colors.lol, a color inspiration site with “overly descriptive color palettes”, as its creator Adam Fuhrer describes it.

Created as a fun way to discover interesting color combinations, the palettes are hand-selected from the Twitter bot @colorschemez. The feed randomly generates color combinations and matches each color with an adjective from a list of over 20,000 words. Hiding behind the unusual names are of course real hex color values that you can use right away — #FDB0C0, #4A0100, and #FD4659 in the case of snail-paced soft pink and its fellas, for example. A fun take on color. (cm)

6. A Preserve For Classic Games

Do you feel nostalgic when you think of the video games you played back in the 80s and 90s? Well, why not take a little trip back to those days when games were just as much fun without the fancy effects they shine with today?

ClassicReload preserves more than 6,000 old retro games and abandoned OD/interfaces that you can play right in your browser. You can search for your favorite or browse the games by name, year, genre, and platform to discover something new. No matter if it’s The Oregon Trail, Prince of Persia, or Dangerous Dave you’ve been longing for for so long, if you’ve got a sweet spot for games, the site will keep you entertained for quite a while. (cm)

7. Vintage Movie Poster Inspiration

Movie posters are icons of the design aesthetic of their times. Typography, layout, color, copywriting — all these little details add up to paint a characteristic image of their time.

If you’re up for some vintage design inspiration, the Harry Ransom Center at the University of Texas keeps a comprehensive digital collection of movie posters. 5,000 posters are part of the collection, spanning the 1940s to the 1970s and browsable by genre, date, or title. A treasure chest. (cm)

8. Upcoming In Smashing Membership

A few weeks ago, we released Smart Interface Design Checklists, a free PDF deck with questions for designers and developers to consider when designing anything from accordions and hamburgers to maps and tables. Made possible with the kind support of Smashing Members. So thank you! ❤️

“Inspired Design Decisions: Herb Lubalin (Expressive Typography)” with Andy Clarke— April 14 at 15:00 London time

Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉

9. Our Next Smashing Workshops

In our workshops, we explore best practices and interesting techniques in front-end and interface design, always focusing on actual solutions to real-life problems.

We also have online workshops that are designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.

Design Systems with Brad Frost (Apr 22–May 6)
Psychology For UX with Joe Leech (Apr 27–May 6)
Advanced CSS/Sass with Miriam Suzanne (May 7–22)
Smart Interface Design Patterns with Vitaly Friedman (May 12–26)

Meet Smashing Online Workshops on front-end & UX, with Brad Frost, Joe Leech, Miriam Suzanne and others.

Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)

April 14, 2020 Smashing Newsletter: Issue #252

Previous Issues