#419: JavaScript

React mistakes, better async code, scroll-driven animations and Virtual Keyboard API. Issue #419 • August 22, 2023 • [View in the browser]( [Smashing Newsletter]( Tünaydın Smashing Friends, 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). [Success at Scale]( New Smashing Book by Addy Osmani: [Success at Scale]( with practical case studies from industry experts. [Pre-order now]( shipping in fall 2023. 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. [The Virtual Keyboard API]( 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. [14 Linting Rules To Help You Write Asynchronous Code in JavaScript]( 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. [Things you forgot (or never knew) because of React]( 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) --------------------------------------------------------------- From our sponsor WebPulse 2023: The Web Dev Community Speaks [WebPulse 2023: The Web Dev Community Speaks]( If you’re reading this, please know that your voice is essential in the ever-evolving realm of web development. By taking a moment to [complete this survey]( you’re not just sharing insights — you’re sculpting the conversation and influencing the industry’s trajectory. Become a beacon for change. We’re counting on you. Thank you for making a difference. --------------------------------------------------------------- 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. [Common Beginner Mistakes With React]( 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. [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: - [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. [Progressively Enhanced Form Validation]( 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) --------------------------------------------------------------- From our sponsor Level Up Your Research Practices For Superior Business Results [Level up your research practices for superior business results]( With data from 500+ practitioners, Maze’s latest report presents a new Research Maturity Model and explores what sets research-mature orgs apart. Take a look to see where you fall on the scale, and learn how to scale your research practices to advance strategic company goals. [Learn more →]( --------------------------------------------------------------- 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. [A case study on scroll-driven animations performance]( 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) --------------------------------------------------------------- 8. Recent Smashing Articles - [Better Context Menus With Safe Triangles]( - [Modern Methods For Improving Drupal’s Largest Contentful Paint Core Web Vital]( - [Knip: An Automated Tool For Finding Unused Files, Exports, And Dependencies]( - [Designing Accessible Text Over Images: Best Practices, Techniques And Resources (Part 2)]( - [Read more on Smashing Magazine →]( --------------------------------------------------------------- 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](