#470: What’s New In Front-End?

Web components, CSS Grid Areas, @property in CSS, accessibility, bug reporting and box-shadows. Issue #470 • Aug 20, 2024 • [View in the browser]( [Smashing Newsletter]( Bună după-amiază Smashing Friends, 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. [Smashing Hour with Lynn Fisher]( [Free Smashing Hour on CSS]( with Lynn Fisher, hosted by Geoff Graham. Today, [free for everyone](. 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. [CSS Grid Areas]( 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. [Web Accessibility Checklist]( 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. [Perfect Bug Reporting]( 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) --------------------------------------------------------------- From our sponsor There Are Better Things To Code Than Forms [SurveyJS]( Coding forms is rarely a value-add activity. Instead, integrate [SurveyJS UI components]( to build a fully-integrated form management platform with a drag-and-drop interface. Generate and style dynamic JSON-driven forms of any complexity, right in your JavaScript application — no need for manual coding. [Try it yourself with a fully-featured demo](. --------------------------------------------------------------- 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. [How Not To Use Box Shadows]( 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. [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 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. You’re curious to learn more? Una Kravets summarized the [benefits of @property]( and how to use it to create custom properties. [Next-gen CSS variables now with universal browser support]( 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) --------------------------------------------------------------- From our sponsor Deliver Great UI With Easily Customizable Page Templates and Building Blocks [Progress]( Deliver a great user experience with professionally designed and easily customizable Page Templates and Building Blocks! Utilize a collection of [over 50 building blocks and 10 page templates]( designed to help you build modern UI in no time. All you need to do is copy and paste! --------------------------------------------------------------- 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. [Web Performance Guide]( 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. [Learning Web Components]( 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) --------------------------------------------------------------- From our sponsor Join Stories On The Road 2024! [Storyblok]( Join our global tour and connect with industry leaders from companies like Cognizant, AWS, and American Eagle. Attend expert-led talks and gain insights into the latest trends in tech and business. Don’t miss your chance — [reserve your free spot today]( --------------------------------------------------------------- 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 →]( [Success At Scale]( It’s here, and it’s shipping! [Success At Scale]( a new book by Addy Osmani. [Get the book]( or [browse the complete library](. --------------------------------------------------------------- 10. Recent Smashing Articles - [Pricing Projects As A Freelancer Or Agency Owner]( - [How To Defend Your Design Process]( - [If I Was Starting My Career Today: Thoughts After 15 Years Spent In UX Design (Part 2)]( - [Best Of Pro Scheduler Libraries]( --------------------------------------------------------------- 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 rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](