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
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.
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.
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).
- Design & UI Inspiration
- All Things UX
- Lovely Little Website Gems
- Inclusive Design and Accessibility
- UX Writing and Microcopy
- Inclusive Design
- Figma Tools and Workflow
- UX Workflow
Looking for older issues? Drop us an email and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.