Dear Friend,
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.
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)
Table of Contents
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.
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)
From our sponsor
Free coaching to help you be seen in tech — Get a free resume review
Are you looking for a tech job where you clock in... or for a career where you’ll be seen? Seen by Indeed, a matching service for software engineers, product managers and other tech pros, sorts through 1000s of companies like Twilio, Overstock, VRBO, and Paypal, and matches tech talent like you to the role that’ll take you further.
Free coaching to help you be seen in tech join for free.
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! ❤️
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.
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)
10. New On Smashing Job Board
-
Senior PHP / WordPress Plugin Developer at WP White Security (Remote)
“Join our growing distributed team and develop plugins that help thousands of WordPress websites administrators! If you love writing code and are fond of the WordPress and open source communities, we want to hear from you.”
-
UX Research Writer & Analyst at Baymard Institute (US East Coast + UK)
“In this position, you will join Baymard’s team of usability researchers and primarily work with analyzing our raw annotated usability test data and writing the insights from this into usability guidelines.”
-
Technical Delivery Consultant Security & Identity (m/w/d) at Microsoft (Reading)
“If you would like to join a team where you help customers use the latest technology and where you receive cutting edge training and where you’re empowered to make a difference, then we really want to get to know you.”
11. Our Most Popular Articles
-
How To Set Up An Express API Backend Project With PostgreSQL
In this article, we will create a set of API endpoints using Express from scratch in ES6 syntax, and cover some development best practices. Find out how all the pieces work together as you create a small project using Continuous Integration and Test-Driven Development before deploying to Heroku.
-
What Should You Do When A Web Design Trend Becomes Too Popular?
By now, you’re probably used to seeing design trends come and go. But have you ever given any thought to what passing trends do to a website when left there for too long? This guide will help you figure out which approach makes the most sense for your site.
-
Create Your Free Developer Blog Using Hugo And Firebase
Writing is a crucial skill every software developer should cultivate. Creating and hosting a technical blog provides an opportunity to do just that. Let’s take a look at how to deploy a blog for free and with minimal effort using Hugo and Firebase.
This newsletter issue was written and researched by Cosima Mielke, Iris Lješnjanin, Rachel Andrew, Vitaly Friedman and Christiane Rosenberger.
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
