Smashing Magazine - #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 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:


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
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


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

#453: Design Systems

Tuesday, April 23, 2024

Design system generator, types of design systems and how to consolidate design systems. Issue #453 • Apr 23, 2024 • View in the browser Smashing Newsletter Buổi tối vui vẻ Smashing Friends, Ah, design

#452: Design Workflow

Tuesday, April 16, 2024

How to choose the right idea, navigate difficult conversations and communicate design. Issue #452 • Apr 16, 2024 • View in the browser Smashing Newsletter Iyi akşamlar Smashing Friends, Design workflow

#451: Interface Design

Tuesday, April 9, 2024

100 Figma Design Tips, UX challenges, Icon design, context menus, Confirm or Undo. Issue #451 • Apr 9, 2024 • View in the browser Smashing Newsletter Dobrý večer Smashing Friends, If you spend a lot of

#450: Localization and Internationalization

Tuesday, April 2, 2024

Issue #450 • Apr 2, 2024 • View in the browser Smashing Newsletter Iyi akşamlar Smashing Friends, How would you go around localizing your product? When we speak of localization, we think about how to

#449: UX Research

Tuesday, March 26, 2024

UX research impact, research invite emails, research without access to users, and UX research methods cheat sheet. Issue #449 • Mar 26, 2024 • View in the browser Smashing Newsletter Joh-eun jeonyeog-

You Might Also Like

Behind the Design of Lauren Santo Domingo’s Ski House

Thursday, November 21, 2024

View in your browser | Update your preferences ADPro Peak Style When it comes to clients, says AD100 designer Andre Mellone, “my biggest nightmare is a person who says, 'Carte blanche, do whatever

2025 Interior Design Trends, Revealed

Wednesday, November 20, 2024

View in your browser | Update your preferences ADPro Image may contain: Furniture, Chair, Interior Design, Indoors, Home Decor, and Rug Inside Our Newest Trend Report “Design, like fashion, tries to

Want a free strategy session with us?

Wednesday, November 20, 2024

Plus, the emails editors open most often. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

One Simple Thing You Can Do to Retain Your Staff

Tuesday, November 19, 2024

View in your browser | Update your preferences ADPro By my account, it's not fall until I've watched You've Got Mail, Nora Ephron's '90s film adaptation of the 1930s Hungarian play

#483: UX Writing

Tuesday, November 19, 2024

With writing guides, content testing and practical guides for better content design. Issue #483 • Nov 19, 2024 • View in the browser Smashing Newsletter Hej Smashing Friends, Every digital product

Accessibility Weekly #423: Beautiful Focus Outlines

Monday, November 18, 2024

November 18, 2024 • Issue #423 View this issue online or browse the full issue archive. Featured: Beautiful focus outlines "Unfortunately, focus outlines are often overlooked in web design.

175 / Build your ideas without writing any code

Monday, November 18, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Nov 2024 • Part 1 View in browser Welcome to Issue 175 One month ago, I quit my longest-standing job and embarked on a pathless path to let my

Into the Fediverse

Sunday, November 17, 2024

Issue 221: We need decentralized social networks ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The Books AD Editors Can’t Put Down Right Now

Friday, November 15, 2024

View in your browser | Update your preferences ADPro Good Reads Here at AD PRO, we're all about celebrating a good coffee table book. With crisp project imagery and behind-the-scenes stories tucked

What astrology has to do with PR?

Wednesday, November 13, 2024

and, no we won't tell you to read your chart! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏