Newsletter Subject

#343: New Front-End Techniques

From

smashingmagazine.com

Email Address

newsletter@smashingmagazine.com

Sent On

Tue, Mar 8, 2022 01:55 PM

Email Preheader Text

With CSS cascade layers, SVG stress test, handling text over images, third-party JavaScript and perf

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 Workshops]( 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]( - [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 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 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” 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 : [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 . 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 [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- 8. A Trick For Autogrowing Textareas There’s no native solution for an autogrowing