March 8, 2022 Smashing Newsletter: Issue #343
This newsletter issue was sent out to 176,433 subscribers on Tuesday, March 8, 2022.
Editorial
Many years ago, when I just started out in frontend, I found myself jumping from one article to another, reading and bookmarking everything that I found on my way. I was trying not to miss all the critical, important, relevant things that were published all over the web. It was fairly possible back then, but it’s absolutely impossible these days.
It was only years later when I understood that it isn’t necessary to know everything — but it’s very important to have a detailed map of what’s happening in front of you. And then, once you need to make a decision, you can navigate the map comfortably, knowing which route to take to find a proper solution to a given problem.
Still today, the main goal I have is to keep that front-end map in front of me up to date with people I can turn to in times when I need to ask for help, and resources to rely on when I need to dive into specifics of a particular topic. In this newsletter, we’re covering just that — resources and techniques to help you refine your map for frontend a little bit.
To dive deeper, we’ve also just launched “Boosting Web Performance in 2022” , a 2.5h-long workshop on front-end performance. You can pay what you want to attend — all proceeds from this workshop will be donated to humanitarian aid in Ukraine. Your support will be much appreciated.
On another note, please don’t forget to join us on March 17 for a free session powered by Shopify to get hands-on with Hydrogen, a brilliant React-based framework to work with. We look very much forward to seeing you there!
As always, we hope you’ll enjoy this newsletter as much as we enjoyed putting it together for you. Stay healthy, stay passionate, and stay smashing, of course!
— Vitaly (@SmashingMag)
1. Guide To CSS Cascade Layers
Many of us have been in situations where we wanted to override styles from elsewhere in our code — and reverted to specificity hacks or !important to make things work. CSS cascade layers give us full control over which styles take priority, without relying on workarounds like these. Miriam Suzanne’s “Complete Guide to CSS Cascade Layers” helps us make sense of it all.
The guide explores what cascade layers are for, how and why you might choose to use them, the current levels of support, and the syntax of how to use them. With this knowledge, you’ll be able to establish your own layers of the cascade, building from low-priority styles like resets and defaults, through themes, frameworks, and design systems, up to highest-priority styles like components, utilities, and overrides. A must-read. (cm)
2. SVG Icon Stress Test
SVGs are a powerful and performant alternative to icon fonts. But what if you’re dealing with a lot of icons, more than hundreds even? What’s the best technique for implementing them? Tyler Sticka wanted to find out which technique performs best under such a stress test. And, well, as it turns out, it depends.
Tyler found out that if you want all the features of SVG and your icons are well optimized, you can go for inline SVGs. If your icons are complex and poorly optimized or if you don’t need all the features that SVG brings along, image elements turned out to be most performant. Good to know! (cm)
3. Third-Party Script Performance
Creating a modern web app without at least one third-party script is almost impossible. And while they are useful for analytics, ads, processing payments, disabling embeds, and more, they have a downside: they hurt performance. That’s where Partytown comes into play.
Partytown is a new, experimental library that aims to use Web Workers to move intensive third-party scripts execution off the main thread. In his article on the LogRocket blog, Arek Nawo explains everything you need to know about it.
While on the right track, Partytown is still experimental and not production-ready right now. So if you want to minimize the impact that third-party applications have on your site, you might want to rely on a more traditional approach in the meantime. Addy Osmani and Arthur Evans summarized how to measure the impact of third-party scripts, how to load them effectively, and what patterns you should avoid. A great summary. (cm)
4. Upcoming Front-End & UX 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.
As always, here’s an overview of our upcoming workshops:
- Accessibility In Modern Applications Dev
with Marcy Sutton. Mar 22 – Apr 5 - DevOps Masterclass Dev
Denys Mishunov. Apr 4–18 - Designing For Complex UI Masterclass UX
Vitaly Friedman. Apr 6–14 - Successful Design Systems Workflow
with Brad Frost. Apr 18 – May 12 - Jump to all online workshops →
5. The Optimum <head> Order
There are plenty of ways to detect performance bottlenecks and audit CSS. One of them is optimizing the order of how assets are loaded in the head. But what is the optimum <head> order for performance? As Harry Roberts pointed out during his talk at Webexpo Prague last year, there are a lot of complex and often conflicting rules that constitute “good” <head> tags, and cross-referencing everything can soon grow unwieldy. To make his — and your — life easier, he developed a quick way of seeing inside of your code’s <head>: ct.css.
Named after Computed Tomography (CT) scans, ct.css is a little diagnostic snippet that exposes potential performance issues in your page’s <head>. You can add it to your browser’s toolbar as a bookmarklet, browse to any website, and the tool will highlight useful pointers for you to double-check when working around performance bottlenecks. A fantastic way to find hidden issues faster. (cm)
6. Smart Interface Design Patterns
Late February, we’ve finally launched “Smart Interface Design Patterns”, a 10h-video course with Vitaly Friedman, focused on fine little details that make for better interface design. In the course, you’ll explore 100s of hand-picked examples — from complex navigation to filters, tables and web forms. It’s not just a video course though; it’s a growing video library with 25 lessons available today, and more added every few months. Check the free preview.
The course is created specifically for interface designers, UI engineers and developers who’d love to be prepared for complex UI/UX challenges. And if you’d like to dive even deeper, there is a live UX training that with UX certification that happens twice a year. The next one will be taking place in a few weeks. There are some early-bird-prices left. Jump to the details.
7. Handling Text Over Images in CSS
You might have come across a UI component that has text above an image but the text is hard to read. Maybe because the contrast between text and image isn’t high enough, maybe because the image is too busy. However, there’s no need to ditch the text-on-image idea entirely, a few small adjustments can help improve the situation. Ahmad Shadeed explores how to do it.
In his article, Ahmad takes a look at different approaches and solutions that help make text above an image easier to read — from adding a transparent text layer to using a text-shadow or a gradient layer. A special focus lies on gradient overlays and how to enhance them to ensure they don’t cause any accessibility issues. And because some details can easily be missed in CSS, Ahmad also takes a closer look at how to communicate the UI with a front-end developer to make sure that it’s implemented as it’s intended in the design mockup. (cm)
8. A Trick For Autogrowing Textareas
There’s no native solution for an autogrowing <textarea> that expands in height as much as it needs to in order to contain the current value. Based on an idea by Stephen Shaw, Chris Coyier shares a clever workaround for autogrowing textareas that achieves the desired effect until we get a native solution.
The trick is that you replicate the content of the <textarea> in an element that can auto-expand the height, and match its sizing. Then hide the replica visually. Whichever of the children is tallest will push the parent to that height, and the other child will follow. The minimum height of the <textarea> serves as the base height, but as soon as the replicated text element grows taller, everything will grow taller with it. Nice! (cm)
9. Thought-Provoking Insights Into Web3
Web3 is one of Silicon Valley’s latest buzzwords, hoping to become a movement. Blockchains, cryptocurrencies, the metaverse, and NFTs may paint themselves as futuristic solutions to tech and society’s problems, but what are they all about and, most importantly, who benefits from their use?
At our virtual Meets for Good event a few weeks ago, Laura Kalbag took us on a journey through Web3, explaining the underlying technologies, why she believes they raise serious ethical questions, and how they are not the alternative to Big Tech we need. We uploaded the recording to Vimeo, so if you haven’t seen it already, be sure to tune in. Lots of thought-provoking insights are guaranteed. (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.