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.
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:
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)
From our sponsor
There Are Better Things To Code Than Forms
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.
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.
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:
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.
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
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.
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)
From our sponsor
Join Stories On The Road 2024!
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?
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
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
