August 20, 2024 Smashing Newsletter: Issue #470
This newsletter issue was sent out to 198,321 subscribers on Tuesday, August 20, 2024.
Editorial
What’s happening in front-end these days? That’s not an easy question to answer! If you find yourself in CSS space, you might have heard about subgrid, font-size-adjust, @property and conditional layouts with :has().
If you work with JavaScript, you might have heard of decorators, top-level await and Temporal API. In the accessibility world, we’ve seen WCAG 2.2 for a while now, but also new legal requirements with the EU Accessibility Act.
In this newsletter, we’ll shed some light on a few useful front-end pointers, tools, and resources. Hopefully, they will help you craft better front-end for your products and applications.
On our end, we can’t wait to welcome you to a few upcoming Smashing events, and one of them coming up shortly:
- Smashing Hour with Lynn Fisher (CSS, front-end, Aug 20)
- SmashingConf Freiburg 🥨 (sold out → online tickets)
- SmashingConf NYC 🥯 (Front-End & UX, Oct 7–10)
- SmashingConf Antwerp 🍫 (Design & UX, Oct 28–31)
- New Front-End & UX Workshops 🍭 (AI, CSS, Figma)
We absolutely can’t wait to see you again, in-person or online, or somewhere between emails and Slack conversations! So with that, let’s dive deep into good ol’ front-end! :-)
— Vitaly
1. CSS Grid Areas
Although CSS Grid has been widely available since 2017, many developers are still avoiding the grid template areas feature — to no surprise, as making sense of the grid can already be challenging enough. The effort it takes to finally wrap one’s head around grid areas is well worth it, though: they are a great way to have a visual of the grid layout in CSS.
To help you use CSS grid areas to their full potential, Ahmad Shadeed wrote a comprehensive interactive guide to grid areas. With lots of practical examples, it makes it easy to finally make sense of the feature.
When you’re working with CSS Grid, you might also want to check out the CSS Grid Generator. All you need to do is specify the number of columns, rows, and gaps, and after a few clicks, the tool provides you with the generated HTML and CSS code you need to bring your grid layout to life. (cm)
2. Accessibility Acceptance Criteria
What do you need to remember when you test a form for accessibility? What’s to consider with navigation landmarks? And what about tooltips? The Accessibility Acceptance Criteria Checklist that the T-Mobile Accessibility Resource Center maintains gives you step-by-step instructions on how to test different components for accessibility.
To create a custom testing checklist, you can choose the components you want to test, and the tool displays the testing criteria in Markdown (perfect for copy-pasting it into your favorite project management tool).
The testing instructions include how to test with a keyboard, screen reader, and screen reader on mobile. Each entry also contains video demos with recommended screen reader browser pairings, code examples, developer notes, and links to official WCAG and WAI-ARIA documentation. (cm)
3. Perfect Bug Report
No one likes bugs, and no one likes vague bug reports. To make your developers’ lives easier, be sure to bookmark the site Perfect Bug Report so you can refer to it the next time you need to report a bug.
In a nutshell, Perfect Bug Report is a simple checklist to help you write bug reports that developers love. It lists all the essential items to include in a bug report — from choosing a title and describing steps to reproduce the bug to specifying the environment where the bug occurred and adding console logs. Seven simple steps to keep in mind to make your bug reports efficient and straightforward. (cm)
4. Designing Better box-shadows
The world we live in is three-dimensional, the screens we design for are flat. But that doesn’t mean we can’t bring depth into our designs. Shadows are one way to do so. And well, if you think you know box shadows, David Gerrells will prove you differently.
David wanted to find out how far you can push box shadows and created a series of creative experiments of which he himself says that “they shouldn’t work at all, yet somehow they do.” They certainly aren’t something you might want to try in an actual project anytime soon but rather an inspiring, in-depth exploration of what can be achieved when you think outside the box.
Apart from shadows, we have another tool at hand to add depth: layering objects. Rauno Freiberg wrote a wonderful guide in which he explores real-life examples of how to enhance a composition with foreground and background objects and employing motion choreography. An inspiring look at how introducing principles from nature can create visual interest. (cm)
5. Upcoming Workshops and Conferences
That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. 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 a quick overview:
- Behavioral Design Workshop UX
with Susan and Guthrie Weinschenk. Aug 22 – Sept 5 - Successful Design Systems workflow
with Brad Frost. Aug 27 – Sept 10 - Deep Dive On Accessibility Testing dev
with Manuel Matuzović. Sep 23 – Oct 7 - Inclusive Design Patterns For 2025 free
with Vitaly Friedman. Sep 24 - Accessible Typography for Web & UI Design design
with Oliver Schöndorfer. Oct 10 – 18 - Cascading Style Systems: Resilient & Maintainable CSS dev
with Miriam Suzanne. Oct 14 – 18 - Interface Design Patterns UX Training (Autumn 2024) ux
with Vitaly Friedman. Nov 1 – Dec 2 - Jump to all workshops →
6. @property In CSS
CSS has gotten a power-up: The @property rule is now fully supported across all modern browsers, giving us more control and flexibility for CSS custom properties and making our stylesheets smarter and more dynamic. Are you curious to learn more? Una Kravets summarized the benefits of @property and how to use it to create custom properties.
In her rundown of the newly supported rule, Una also explores one of its applications in detail: creating a twinkling gradient background. The use case beautifully illustrates how @property enables us to finally animate properties that were previously impossible to transition, like gradients. A must-read to take your CSS game to the next level. (cm)
7. Web Performance Guide
Are you new to web performance? Then SpeedCurve’s free Web Performance Guide is for you. It introduces you to everything you need to know to master website monitoring, analytics, and diagnostics to deliver a fast experience to your users.
The guide explores how web performance affects every business metric — from bounce rate to conversions to search rank. You’ll learn how to track and improve Core Web Vitals and dive deep into best practices for creating performance budgets and optimizing images, JavaScript, CSS, SPAs, third-party scripts, and more. And you’ll learn to make sense of terminology in the web performance space so you can understand what you’re seeing in your site speed testing tools. (cm)
8. Learning Web Components
Web Components allow developers to create interactive, reusable components that work in any front-end framework. If you want to learn how to build your own Web Components but don’t know where to start, Andrico Karoulla created a roadmap with resources that take you through the process step by step.
Another great companion on your learning journey is the free eBook that Zeroheight offers for download: The Case for Web Components was written by David Darnes and explores why you should consider Web Components, what they are, what makes a Web Component, and how to build your first Web Component.
With explanations, experiences, resources, articles, and expert recommendations, the eBook equips you with everything you need to know to harness the power of Web Components. (cm)
9. Recently Published Books 📚
Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?
- Success at Scale by Addy Osmani
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Check out all books →
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 Geoff Graham (gg), 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.