#454: JavaScript

Front-End Engineer Handbook, JavaScript Cheatsheet, File System APIs and Invokers. Issue #454 • Apr 30, 2024 • [View in the browser]( [Smashing Newsletter]( Labas vakaras Smashing Friends, 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! [SmashingConf New York 2024]( Meet [SmashingConf NYC 2024]( (Oct 7–10), a friendly conference all around front-end and UX. 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 Front End Developer/Engineer Handbook 2024]( 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. [JS CheatSheet]( 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 cheatsheet particularly helpful for anyone who’s just getting started with JavaScript. One for the bookmarks. (cm) --------------------------------------------------------------- From our sponsor Stop Coding Forms With Fully-Integrated Drag-and-Drop Form Builder [SurveyJS]( [SurveyJS]( is a product suite of open-source JavaScript client-side components designed to simplify the creation of a full-cycle form management system fully integrated in your IT infrastructure. The libraries utilize JSON objects for form metadata and results, and seamlessly integrate with any backend system. The JSON form builder component offers a user-friendly drag-and-drop interface, GUI for form branching, and an integrated CSS theme editor for customizing form design. [Check the free full-featured demo to explore its capabilities firsthand](. --------------------------------------------------------------- 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! [Upgrading jQuery]( 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. [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: - [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. [The Many, Confusing File System APIs]( 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) --------------------------------------------------------------- From our sponsor Learn The Story Structure That Made Toy Story A Success At Sanity Connect [Sanity]( Matthew Luhn, creative force behind Toy Story, Finding Nemo, and more, joins Sanity Connect. He’ll share tips on telling compelling stories in the AI age, so you can scale content while preserving your brand’s unique voice. [Join us and get a chance to win Matthew’s book “The Best Story Wins”.]( --------------------------------------------------------------- 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. [I love invokers and 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](. [A TC39 Proposal for Signals]( 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 state 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) --------------------------------------------------------------- From our sponsor Zeplin Is Where Teams Go To Unite Design And Development 🤝 [Zeplin]( Doing developer handoff in your design tool might consolidate one workflow, but your team pays for it elsewhere — with file bloat, rework, and losing critical details across modes and pages. Zeplin is an equal, dedicated space for the entire team to align on the build, faster. [Try it for free](. --------------------------------------------------------------- 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 →]( [Success At Scale]( It’s here, and it’s shipping! [Success At Scale]( a new book by Addy Osmani. [Get the book]( or [browse the complete library](. --------------------------------------------------------------- 9. Recent Smashing Articles - [Conducting Accessibility Research In An Inaccessible Ecosystem]( - [Using AI For Neurodiversity And Building Inclusive Tools]( - [F-Shape Pattern And How Users Read]( --------------------------------------------------------------- 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](