Smashing Magazine - #343: New Front-End Techniques

With CSS cascade layers, SVG stress test, handling text over images, third-party JavaScript and performance optimization. Issue #343 Mar 8, 2022 View in the browser 💨

Smashing Newsletter

Dobryden’ Smashing Friends,

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.

Boosting Web Performance in 2022

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!

Building Headless Storefronts on Shopify with Hydrogen

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.

A Complete Guide to CSS Cascade Layers

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.

Which SVG technique performs best for way too many icons?

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)

From our sponsor

Using A Headless CMS With Your Frontend Framework Is Easier Than Ever

Using A Headless CMS With Your Frontend Framework Is Easier Than Ever
Storyblok, as the first headless CMS with Visual Editor introduces a whole new DX with the latest sdks for JavaScript, Svelte, React, Nuxt and Vue. Check it and build your next Jamstack website with your favorite framework!

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.

Using Web Workers to boost third-party script performance

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.

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:

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.

Getting Your head Straight: A New CSS Performance Diagnostics Snippet

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 6h-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.

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. 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.

Handling Text Over Images in CSS

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)

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. 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 Cleanest Trick for Autogrowing Textareas

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?

Web3 — Creating Problems Where We Need Solutions

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)

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

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

342: Interface Design & UX

Tuesday, March 1, 2022

With design patterns, interface design techniques and pointers to useful UX resources. Issue #342 • Mar 1, 2022 • View in the browser 💨 Smashing Newsletter Dobryden' Smashing Friends, I was born

341: Front-End & UX Reading

Tuesday, February 22, 2022

With design patterns, UX guides, free JavaScript books, UX guides and books from the community. Issue #341 • February 22, 2022 • View in the browser 💨 Smashing Newsletter Bom Dia Smashing Friends, When

Meet “Touch Design for Mobile Interfaces”, a new Smashing Book

Wednesday, February 16, 2022

Meet our shiny new Smashing Book for accessible and usable mobile interfaces, with guidelines, examples and best practices. It's here! Touch Design for Mobile Interfaces, our new guide for better

#340: Productivity Helpers

Tuesday, February 15, 2022

With little helpers for getting work done faster in browsers, Figma and other tools that you use daily. Issue #340 • February 15, 2022 • View in the browser 💨 Smashing Newsletter Bună dimineaţa

#339: Modern CSS Techniques

Tuesday, February 8, 2022

With modern CSS, techniques for better CSS shadows, SVG icons, CSS Reset and even CSS pseudo commas. Issue #339 • February 8, 2022 • View in the browser 💨 Smashing Newsletter Dear Smashing Friends,

Lessons from PM & UXR collaboration

Monday, May 23, 2022

Part 2: What we learned from working on a new product project together ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

🤩 Magnificent Landing Page Designs + 🏆 Challenge Updates

Monday, May 23, 2022

Your Freshest UpLabs Design News Is Here! 🙌 First off, congratulations to Arjun Makwana, the winner of our latest 🛒 Ebay Website Redesign Challenge! Next off, remember that the second week to vote in

Step Inside Ken Fulk’s Cinematic Universe

Monday, May 23, 2022

Plus, 6 new glass collections to know View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Confectionery, Food, Sweets, and Plant GLASS IS RED-HOT: HERE

An Op-Art Loft in Los Angeles

Monday, May 23, 2022

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman Photo: Lane Barden Architect, critic,

Into the Archive: California Dreaming

Monday, May 23, 2022

Plus, everything you need to know about designing an ADU (image) Architectural Digest AD PRO Logo Into the Archive: California Dreaming The June 2022 issue of AD is all about families. But from cover

Button Component, Line Length, Design Thinking, Glenn Davis, Keyboard Accordion

Monday, May 23, 2022

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 23 2022 Building a button component A foundational

✏ Exciting New Tools for Designers May 2022, and more…

Sunday, May 22, 2022

Your Inbox Needs This Clever Business Newsletter [ad] MORNINGBREW.COM Exciting New Tools for Designers, May 2022 WEBDESIGNERDEPOT.COM COMMENTS HTMLrev - 50 Beautiful HTML Landing Page Templates Library

Invoke fun at work

Sunday, May 22, 2022

Issue 93: Fun and play leads to sustainable creativity ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

The 7 Design Trends All the Spring Markets Agreed On

Friday, May 20, 2022

Plus, Victor Glemaud teams up with Schumacher, Hermès opens in Austin, and more news View in your browser | Update your preferences Architectural Digest AD PRO Logo Image may contain: Shop, Flooring,

The Games Table Is Having a Moment—And We're All In

Friday, May 20, 2022

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Welcome to the PROcurement, our weekly roundup of the best designs to source and