Smashing Magazine - #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).

Meet a new Smashing Book by Addy Osmani: Success at Scale, with practical case studies from industry experts. Pre-order now, shipping in fall 2023.
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 Events
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. 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


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

unsubscribe update preferences view in your browser

Older messages

#418: UX Writing and Microcopy

Tuesday, August 15, 2023

On UX writing, bias-free language, and guidelines around readability and plain language for more inclusive writing. Issue #418 • August 15, 2023 • View in the browser Smashing Newsletter Hello Smashing

#417: Inclusive Design

Tuesday, August 8, 2023

With gender-inclusive writing, inclusive design principles, inclusive mindset workbook and empathy prompts. Issue #417 • August 8, 2023 • View in the browser Smashing Newsletter Kalimera Smashing

#416: Figma Tools and Workflow

Tuesday, August 1, 2023

Figma workflow, variables, design system structure, design specs, file management UI library and a user journey map template. Issue #416 • August 1, 2023 • View in the browser Smashing Newsletter

#415: UX Workflow

Tuesday, July 25, 2023

Designing better meetings, folder structure, design critiques, UX design self-evaluation matrix and structuring files in Figma. Issue #415 • July 25, 2023 • View in the browser Smashing Newsletter Buen

#414: CSS

Tuesday, July 18, 2023

Modern CSS, proportional UI components, stacking elements, text reveal, sticky content and the ABCs of CSS. Issue #413 • July 18, 2023 • View in the browser Smashing Newsletter God eftermiddag Smashing

You Might Also Like

Celeb Homes at the Holidays—and a Few More Things to Make You Merry

Tuesday, December 24, 2024

View in your browser | Update your preferences ADPro Holiday Cheer Whether your taste leans traditional, modern, or all-out extravagant, AD is rife with inspiration for your holiday. In the spirit of

#488: Fun And Useful Gems

Tuesday, December 24, 2024

Radio garden, Zoom backgrounds, visual history of the alphabet and fun interactive experiences. Issue #488 • Dec 24, 2024 • View in the browser Smashing Newsletter Hello Smashing Friends, As we are

Accessibility Weekly #428: Putting AI to the (Accessibility) Test

Monday, December 23, 2024

December 23, 2024 • Issue #428 View this issue online or browse the full issue archive. Hey accessibility friends! It's the time of year where news and information slows down as many people take

2024 magic moments

Sunday, December 22, 2024

Issue 225: The year from my personal lens ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Planning mode

Friday, December 20, 2024

Lessons from our first-ever annual planning sprint ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

We Co-Sign This AD100-Approved Trend

Thursday, December 19, 2024

View in your browser | Update your preferences ADPro Emboldening the Bath Marble, marble, everywhere, and every drop is chic. According to AD100 designer Jake Arnold, “material drenching”—that is,

177 / Keep calm by listening to these ambient sounds

Thursday, December 19, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Dec 2024 • Part 1 View in browser Welcome to Issue 177 Lately, I've been driving a lot of inspiration from the things I see in real life. The range

The Year in Color: Hella Jongerius, Mocha Mousse, and More

Thursday, December 19, 2024

View in your browser | Update your preferences ADPro Color Our World Since the summer, AD PRO has kept its finger on the pulse of color predictions. Overall, the vibe right now is down to earth,

🐺Get Media Features in 2025

Thursday, December 19, 2024

A BIG Wolf Craft announcement!! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Small teams

Thursday, December 19, 2024

Issue 224: Why the mentality of lean and small always wins ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏