August 22, 2023 Smashing Newsletter: Issue #419
This newsletter issue was sent out to 209,415 subscribers on Tuesday, August 22, 2023.
Editorial
What’s going on in JavaScript these days? How do we write better asynchronous code? What are some of the hidden things that many developers don’t know about React? What’s a better way to validate web forms and build scroll-driven animations these days? Well, in this issue, we cover it all!
If you want to dive even deeper into the technical intricacies of CSS and good ol’ HTML Email, we have 2 new online workshops coming up later this year: Building Modern HTML Email with Rémi (Nov 9–17) and Advanced Modern CSS Masterclass with Manuel (Nov 27–Dec 11).
And while you are on it, take a look at our friendly printed books, with a shiny new book on “Success at Scale” by Addy Osmani — with technical case studies from industry experts, coming up later this year.
Happy reading, everyone! 🥳
— Vitaly (@vitalyf)
1. The Virtual Keyboard API
We all have encountered mobile interfaces where the virtual keyboard causes trouble with fixed elements. Let’s say you have a sticky header at the top and a sticky floating action button at the bottom right of your UI. When the virtual keyboard shows, the browser usually scrolls upwards, making the input appear above the keyboard. The problem: Your sticky header moves out of view and the action button is hidden. Is there a way we can fix this? There is, as Ahmad Shadeed shows.
In his post “The Virtual Keyboard API,” Ahmad explores the problem, why it happens, and how we can solve it. As he explains, we can use the Virtual Keyboard API to define that both the visual viewport (the visible part) and the layout viewport (the hidden parts along with what’s currently visible) are equal.
This makes it possible to detect the keyboard position and dimensions with CSS variables and alter the layout when the virtual keyboard is active. The API is currently only supported in Chrome for Android, though. (cm)
2. Better Async Code In JS
Debugging asynchronous code in JavaScript can be tricky. Luckily, there are linters that catch bugs before they make it into production. Maxim Orlov compiled a list of fourteen useful linting rules to help you with writing asynchronous code in JavaScript and Node.js.
Maxim’s list features ESLint base rules, Node.js-specific rules, and additional rules for TypeScript users. To help you enable the rules in your project, he also published an ESLint configuration that exports all three types of rules separately. Even if you don’t use them, reading the description of each of the rules can help you better understand async code. (cm)
3. Things You Never Knew About React
Like many developers, you might still consider React the modern standard in front end. The reality looks different, though. In his post “Things you forgot (or never knew) because of React,” Josh Collinsworth pokes at the React bubble and explains why it’s time to advance.
Josh argues that the fact that React benefited from being early to the framework game also comes with drawbacks in adaptability. If you focused on React in the past years, he shares some things you might have missed (or forgotten) because you’ve used React for so long.
Josh also covers several powerful React alternatives and their use cases. A great reminder to push beyond our comfort zones and reconsider existing preferences regarding the tools we use. (cm)
4. Common React Beginner Mistakes
When working with React, there are some things that catch many developers off guard — particularly if they are just getting started with React. Josh W. Comeau wrote a helpful tutorial in which he explores nine of the most common gotchas and how to steer around them to avoid frustration.
The tutorial is aimed at developers who are already familiar with React but still at the beginning of their journey. It examines some of the most pervasive mistakes often seen in production apps and on the web and explains what’s behind the cryptic warnings you’ve likely seen before. The practical examples not only help you fix nasty bugs but also build a mental model of why React works the way it does. (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:
- Interface Design Patterns UX Training UX
with Vitaly Friedman. Sep 8 – Oct 6 - Accessible UI Components Dev
with Carie Fisher. Sep 14–22 - Design Management Masterclass UX
with Slava Shestopalov. Oct 5–13 - Typography Masterclass UX
with Elliot Jay Stocks. Oct 16–30 - Customer-Centric Product Strategy Workshop UX
with Debbie Levitt. Oct 18–26 - Design KPIs Masterclass UX
with Vitaly Friedman. Oct 31 – Nov 8 - Accessibility for Designers UX
with Stéphanie Walter. Nov 6–15 - Smart Interface Design Patterns Video Course UX
9h-video + Live UX Training with Vitaly Friedman - Jump to all workshops →
6. Progressively Enhanced Form Validation
Browsers ship with various built-in HTML and CSS features that offer a solid foundation for form validation. However, regarding accessibility and customizability, there’s still a lot of room for improvement.
To help us create better form validation experiences, Gerardo Rodriguez wrote an in-depth guide to progressively enhancing the default experience by layering ARIA attributes, JavaScript, and the Constraint Validation API.
Apparently, sprinkling in some JavaScript magic addresses all the drawbacks of HTML- and CSS-only form validation: It helps you display consistent error message designs, prevent invalid styles from showing prematurely for all browsers, provide live validation feedback, and create a more accessible user experience. (cm)
7. Better Scroll-Driven Animations
Scroll-driven animations can create some interesting effects. Think of parallax background images or reading indicators which move as you scroll or elements fading in as they come into view. The classic approach to creating scroll-driven animations would be to respond to the scroll event on the main thread. If you ever tried it, you might know how difficult it is to ensure the animations are performant and in-sync with scrolling. A new set of APIs is here to change that.
Introduced by Chrome, the APIs support scroll-driven animations which you can use from CSS or JavaScript. They try to use as few main thread resources as possible, making scroll-driven animations far easier to implement and much smoother.
If you want to see how they perform in action, Yuriko Hirota wrote a case study in which she compares the new approach with the classic JavaScript technique to show how easy and silky-smooth scroll-driven animations can be. (cm)
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.