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

One Reason Markham Roberts Will Always Turn Down a Client

Tuesday, May 21, 2024

View in your browser | Update your preferences ADPro When I spoke with Markham Roberts last week, he was hours away from receiving the Arthur Ross Award for interior design from the Institute of

Has this happened in your business?

Tuesday, May 21, 2024

Dear readers, Can you relate to this? We had an experience recently that's so common. We thought a bunch of people (that's you, dear reader) knew about something we offer, but actualllyyyyy,

#457: Figma Organization

Tuesday, May 21, 2024

Cleaner Figma files, Figma workspace template, organization template, multi-brand Figma kit. Issue #457 • May 21, 2024 • View in the browser Smashing Newsletter Shikamoo Smashing Friends, How do you

Process, Hackerverse, Baseline, UI Density, Adobe vs Delta

Tuesday, May 21, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 21 2024 Process doc.cc On building trust, not checklists.

👨‍💻 Astonishing Management Dashboards + 🏆 Challenge Updates

Monday, May 20, 2024

UpLabs Design Updates Are Dropping Into Your Inbox 📨 Firstly, let's congratulate Md. Sadman Sakib Jisan, the winner of our latest ☎️ WhatsApp Redesign Challenge! Congratulations!! Secondly, don

Accessibility Weekly #397: Best Intention Barriers

Monday, May 20, 2024

May 20, 2024 • Issue #397 View this issue online or browse the full issue archive. Featured: Best intention barriers (ARIA edition) "But there is a certain type of barrier that are more, well,

Touch-tone Keypads, Coding my Handwriting, Media Queries, contrast-color, Code & Pixels

Monday, May 20, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 20 2024 What telephones can tell you about good design

On leading Marketing and Design

Sunday, May 19, 2024

Issue 195: When a designer runs Marketing ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

We Want To Hear From You: Correct Link

Friday, May 17, 2024

Oops! New link for our latest AD PRO survey. Architectural Digest AD PRO Logo AD PRO Survey Dear AD PRO Reader, AD PRO is nothing without the design community. To ensure we're giving you the best

We Want To Hear From You

Friday, May 17, 2024

Architectural Digest AD PRO Logo AD PRO Survey Dear AD PRO Reader, AD PRO is nothing without the design community. To ensure we're giving you the best experience, help us by answering this short