April 30, 2024 Smashing Newsletter: Issue #454
This newsletter issue was sent out to 205,168 subscribers on Tuesday, April 30, 2024.
Editorial
Let’s talk JavaScript! With React 19, Next.js 14 and Node.js 21, the world of JavaScript seems to be ever-evolving, spinning faster and changing rapidly. In this newsletter, we take a look at some of the useful things to keep in mind if you spend most of your time in JavaScript.
If you’d like to deep-dive into front-end, you can take a look at Addy’s wonderful new Developer Experience Book (free book), recently published Success at Scale, or React Field Guide. And if you are all into Next.js, there is a free Learn Next.js course as well. Now, this should have you covered for a while!
And, of course, if you’d like to dive deeper into JavaScript and web performance, we have SmashingConf New York 2024 🇺🇸 — Front-End & UX, Oct 7–10, a wonderful lil’ conference — with friendly bundle tickets for friendly teams!
In the meantime, let’s explore a few helpful goodies for front-end engineers! 🎉🥳
— Vitaly
1. Front-End Developer/Engineer Handbook 2024
What’s the front-end landscape like these days? What are common job titles and areas of focus for front-end engineers? The Front End Developer/Engineer Handbook 2024 explores these and many other questions in a comprehensive guide written by Cody Lindley and published by Front-End Masters.
The guide explores frontend-related job titles and resources for learning, education, and training, as well as foundational aspects, core competencies, and tooling. A handy reference to keep close when exploring and explaining what front-end engineering is all about. One for the bookmarks! (vf)
2. Interactive JavaScript Cheatsheet
A good cheatsheet can be worth gold. If you are looking for a JavaScript cheatsheet to help you master your daily coding challenges while getting a better understanding of the JavaScript language, the interactive JS CheatSheet is for you.
The JS CheatSheet contains useful code examples for anything from the very basics of the JavaScript syntax to working with loops and variables to using data types, strings, events, and more. The code examples all come with comments (you can switch them on and off with just a click), which makes the cheat sheet particularly helpful for anyone who’s just getting started with JavaScript. One for the bookmarks. (cm)
3. Upgrading jQuery
Since its introduction in 2006, jQuery has played a major role in the evolution of web standards and browser capabilities. And while developers often turn to modern JavaScript frameworks instead of jQuery these days, jQuery is still in use on 90% of all websites, as the OpenJS Foundation estimates. However, about a third of those websites use an outdated jQuery version. Let’s change that!
Timmy Willison wrote a practical guide to safely upgrading jQuery. It dives deeper into how upgrading jQuery improves the security of your application and walks you through the upgrading process step-by-step. A great reminder to keep your codebase up to date to address security vulnerabilities and maintain the performance and compatibility of your web application. (cm)
4. 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:
- Scalable CSS Masterclass dev
with Andy Bell. May 9–23 - Accessibility for Designers ux
with Stéphanie Walter. June 3–12 - Design Token and UI Component Architecture workflow
with Nathan Curtis. June 6–14 - Typography Masterclass design
with Elliot Jay Stocks. June 10–24 - Designing For Complex UI Masterclass ux
with Vitaly Friedman. June 20–July 2 - Interface Design Patterns UX Training (Autumn 2024) ux
with Vitaly Friedman. Nov 1–Dec 2 - Smart Interface Design Patterns (10h) ux
with Vitaly Friedman. Video library. - Jump to all workshops →
5. File System APIs
Let’s say you are developing a feature that can save directories of files to the user’s file system. With the right API, it should be an easy challenge to solve, right? But which one is the right “File System API”? If you search for “File System API,” you’ll get many results, all with similar names.
Scott Vandehey was in the same situation recently and decided to get to the bottom of the many confusing file system APIs. As he found out, the different APIs build on each other, adding different layers of functionality — from simply adding the ability to read a file to reading directories and prompting the user for access to their file system. Scott summarized his findings in a blog post to help developers make an informed decision on which API to use. (cm)
6. A Look Into The Future: Invokers
HTML is for meaning, CSS is for presentation, and JavaScript is for interaction. So, the theory. In reality, things often aren’t that clear. In particular, a seemingly mundane task like adding basic interactivity can turn out to be much harder than it should be. With invokers on the horizon, this could soon be a problem of the past. Robin Rendle wrote a comprehensive blog post in which he explains why he already loves invokers today and why you should, too.
A proposal from Open UI, invokers extend HTML in a smart way. For example, they allow simple things like pausing and playing a video without the need for boilerplate code. You can write custom behavior to make your own actions for invokers, but they also come with smart default behaviors. Exciting times! Fingers crossed that it won’t take too long until invokers will finally make it into browsers. (cm)
7. A TC39 Proposal For Signals
What does the future of JavaScript look like? A promising initiative to move JavaScript — and the web — forward comes from Rob Eisenberg, Daniel Ehrenberg, and a team of dedicated minds: a potential standard for signals. What started out as an idea in August last year is now publicly available as a v0 draft of a proposal, along with a spec-compliant polyfill.
As Rob points out in the proposal, complicated user interfaces commonly involve more than just managing simple values for different application states. The goal of the signals standard is to provide infrastructure for managing such application states so that developers can focus on business logic rather than repetitive details. Signals can also be useful in non-UI contexts — to avoid unnecessary rebuilds in build systems or to remove the need to manage updating in applications in reactive programming, for example. If you want to learn more about signals, the current state of the proposal, and how to get involved, be sure to check out Rob’s post on Medium. (cm)
8. News From The Smashing Library 📚
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?
- Success at Scale by Addy Osmani
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Check out all books →
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.