Douglas Crockford calls JavaScript ‘smelly.’

#​642 — June 8, 2023

Read on the Web

JavaScript Weekly

Polywasm: A Polyfill to Run WASM in JS Environments — The creator of esbuild is back with something fresh: a polyfill that uses live translation to be able to run .wasm files in JS environments that either lack a WebAssembly implementation or have it disabled. You can see how it performs in this special version of the esbuild playground.

Evan Wallace

Announcing TypeScript 5.1 — This release of the statically typed JavaScript superset is a gentle ‘quality of life’ step forward rather than a featureful extravaganza, but we get support for linked editing of JSX tag names, namespaced JSX attributes, the ability to have unrelated types for getters and setters, and undefined-returning functions no longer need an explicit return.

Daniel Rosenwasser (Microsoft)

How to Send Password Resets via SMS and Email Using Node.js & Next.js — When you’re building a web application, there’s a decision to make about how to handle users and authentication. There are many services and libraries to choose from, and the right choice will depend on the requirements of what you are building.

Courier.com sponsor

NakedJSX: Use JSX Without React — If you like JSX and would like to use it to help in the production of static HTML without using React itself, this command line tool is for you. It even extracts scoped CSS classes and deduplicates them.

David Hogan

Oh, you can also use NakedJSX to use JSX with jQuery, which you may either find useful or a fun way to troll your team, depending on how you roll. 😏

Dan Abramov Rebuilds React Server Components from Scratch — Having faced a raft of questions about Server Components, Dan has begun to write a series covering everything from the ground up by reimplementing a basic form of RSC from scratch. It’s not aimed at day-to-day React developers, but those who want to grok the ideas behind RSCs.

Dan Abramov

⚡️ IN BRIEF:

⭐️ Douglas Crockford, of JS: The Good Parts fame, ▶️ is back pointing out JavaScript is a ‘smelly’ language and ‘it’s time for the next thing.’ 😬

MDN’s reference pages on regular expressions in JavaScript have been substantially improved.

From Apple’s WWDC this week comes ▶️ a handy presentation on Safari’s DevTools, plus a barrage of news about Safari enhancements around the ‘spatial web’, JPEG XL support, the popover API, offscreen canvas support, local storage policies, extra JS regex features, and more.

Emma Twersky shares everything Angular related from the recent Google I/O 2023 event.

📘 Faraz K. Kelhini’s Text Processing with JavaScript is a new book, currently in beta with a final release due in August from Pragmatic Bookshelf. The table of contents shows it to be packed with useful stuff.

RELEASES:

Tesseract.js 4.1 – Pure JavaScript OCR.

BlockNote 0.8 – ‘Notion-style’ block-based editor.

Redwood 5.3 – React + GraphQL full stack framework.

TensorFlow.js 4.7 – ML in the browser.

Madge 6.1 – Create graphs of module dependencies.

📒 Articles & Tutorials

Why (and How) You Should Write Your WebAssembly in TypeScript — Performance is the main argument made by the author who shows off Wasmati, a library for creating WebAssembly modules by writing TypeScript using an API that corresponds to WASM operations. It works in modern browsers, Node, and Deno.

Gregor Mitscha-Baude

Backtick Strings are Likely the Wrong Tool for Your Job — It’s too common to try to put together query strings using JavaScript’s template strings, says Mattie, and this leads to potential injection problems. Luckily, there’s an alternative way..

Mattie Behrens

Dynaboard: AI Meets Low-Code to Get More Done, Faster — Build high performance authenticated web applications in a collaborative — full-stack — development environment.

Dynaboard sponsor

Is React Having an ‘Angular.js Moment’? — The author puts forward an argument comparing the discontinuity from AngularJS to Angular 2 in 2014 with current shifts in the React ecosystem.

François Zaninotto

Painless WebGPU Programming with taichi.jstaichi.js is a GPU computing framework that transforms JavaScript functions into parallelizable WebGPU compute shaders. You can see a live demo here using the Game of Life.

Dunfan Lu

A Preview of Web Apps on macOS Sonoma 14 Beta — The next version of macOS will double down on the idea of well integrated, desktop-installable webapps. Here’s a dig around into how it works so far.

Thomas Steiner

Live Streaming with Multiple Hosts in a Browser with Amazon IVS

Amazon Web Services (AWS) sponsor

The Many Ways to Select the n-th Character from a String

Christian Heilmann

Primitive Objects in JavaScript: When To Use Them

Kirill Myshkin

A Quick Primer on Node.js’s New Built-in Test Runner

endpts

🛠 Code & Tools

Algolia AutoComplete: A Fast, Full-Featured Autocomplete Library — This isn’t a UI widget – you’re in full control of rendering the experience – but this will let you wire up the experience you want users to have. There’s a getting started tutorial and a CodeSandbox demo where you can play around with some live code.

Algolia

Perfectionist 1.0: ESLint Plugin for Sorting Data — It supports sorting all sorts of things (props, imports, types..) and enforcing that with ESLint. It supports alphabetical and natural sorting, as well as by line length which leads to a neat aesthetic..

Azat S.

Comprehensive Full-Stack Application Monitoring Solution — A flexible application monitoring tool that doesn’t break the bank.

TelemetryHub sponsor

pgsql-ast-parser 11.1: A Simple SQL Parser — A TypeScript-based Postgres SQL syntax parser that can produce a typed AST for most queries (PL/pgSQL is not supported). It’s used as part of the author’s pg-mem project which provides a mini, ‘in memory’ Postgres clone in Node or the browser (here’s a live demo of that).

Olivier Guimbal

Goxygen 0.4: Quickly Generate a Go(lang) Backend for a JS Project — A tool that sets up a new Go-based project with Angular, React, or Vue in the front-end, and Docker and Docker Compose files to spin it up. It’s been around a few years, but has now added Vue 3.3 support and a Vite-based Vue template.

Sasha Shpota

Noble Curves 1.1
↳ Audited elliptic curve cryptography library.

Taxi 1.3
↳ Add slick PJAX navigation to a site.

Inngest 2.0
↳ Build serverless job systems with TypeScript.

TinyBase 3.2
↳ Reactive data store for local‑first apps.

React Arborist 3.1
↳ Complete tree view component (demo).

Alova 2.6
↳ Request strategy library for Vue, React and Svelte.

💻 Jobs

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

🧑‍💻 Got a job listing to share? Here’s how.

🛠 Useful Thing of the Week

bundlejs: Online npm Package Bundle Size Checker — A browser-based tool that can treeshake, bundle, minify, and compress (gzip and brotli) packages to show you what their weight impact is. It runs entirely in the browser, too, using the WebAssembly build of esbuild.

Okiki Ojo

Transformers: JavaScript in Disguise

#​630 — March 17, 2023

Read on the Web

JavaScript Weekly

????  Transformers.js: Running ML Models in the Browser — Transformers are a type of machine learning model often used for natural language or visual processing and while running such models directly in the browser is in its infancy, Transformers.js opens up some ML models to you with some impressive demos here.

Xenova

????  Celebrating 10 Years of Electron — It feels like Electron pops up everywhere (Slack, Spotify, VS Code, and more) so it might feel surprising it’s only been with us for a decade. Slack and Electron developer Erick Zhao gives thanks to Electron’s developers, the community, gives us a bit of Electron related history, and reassures us Electron is still going strong.

Erick Zhao

Dynaboard: A Visual Web App IDE Made for Developers — Build high performance public and private web applications in a collaborative — full-stack — development environment.

Dynaboard sponsor

Announcing TypeScript 5.0 — Note that TypeScript doesn’t follow semantic versioning, so this is as much a ‘major’ release as 4.9 was.. but 5.0 looks cool anyway. This release of the typed JavaScript superset is packed with features like decorators, improved ESM project support for Node and bundlers, const type parameters, and more.

Daniel Rosenwasser (Microsoft)

Turbowatch: File Change Detector and Task Orchestrator — Not just that but it claims to be extremely fast and “if you ever wanted something like Nodemon but more capable, then you are at the right place.” This looks very promising and the README is full of examples.

Gajus Kuizinas

IN BRIEF:

BREAKING NEWS: The JS Party podcast has just dropped an episode called ▶️ The Future of React – so new, we haven’t listened to it, but it features Dan Abramov and Joe Savona so may make for good weekend listening..

“The most dangerous command you run every day: npm install” says Socket, who are introducing what they call ‘safe npm’, a transparent wrapper around npm designed to, well, make it less dangerous.

CORRECTION: In issue 627 we suggested the ECMAScript 2023 spec had entered a new draft stage. TC39 member Jordan Harband pointed out to us that it has been in such a state for some time. “There’s still a stage 4 PR not yet merged,” he noted, but there will be some progress in the next month.

Defer is a new ‘zero-infrastructure’ background jobs platform for Node.js apps.

Recently we linked to ???? Dittytoy, a fun online JavaScript environment for audio coding/experiments. Someone has somehow implemented an entire Commodore 64 SID synthesizer in it!

????  Developer Day: A Front-Row Seat to What’s New with Retool

Retool sponsor

RELEASES:

Node.js v19.8.0/1 (Current)

Jasmine 4.6
↳ Testing framework for browsers and Node.

pm2 5.3
↳ Popular Node production process manager.

Mongoose 7.0
↳ Popular MongoDB ODM for Node.js.

ESLint 8.36

???? Articles & Tutorials

Chrome 111 Gains a ‘View Transition’ Feature for SPAs — The View Transition API is only supported by Chrome so far, but allows easy animated page transitions within single-page apps (demo here). Luckily it suits progressive enhancement so you can start using it right now without feeling too guilty 😉 Multi-page app support is forthcoming.

Jake Archibald (Chrome Developers)

Create and Download Text Files with JavaScript — If you want your code to be able to generate a text (such as JSON) file on the fly and have it downloaded by the user’s browser, it’s reasonably easy.

Amit Merchant

Five Mistakes I Made When Starting My First React Project — Richard shares his early React mistakes with the hope you can learn from his misfortunes. He tackles topics like using defaultProps, propTypes, and class components.

Richard Oliver Bray

Too Much Tech Debt in Your node_modules? Our Team of JS Devs Can Help — We are a team of senior software engineers who specialize in tech debt. Let us modernize your JavaScript stack ????

UpgradeJS.com | JavaScript Upgrade Services sponsor

Progressively Enhancing a Table with a Web Component — Building a web component wrapper to add table sorting.

Raymond Camden

Shell-Free Node.js Scripting with Execa 7.1Execa is a popular process execution library for Node and the latest version includes an interesting $ method feature for writing zx-style scripts with it, making it even more useful for shell scripting style usecases.

ehmicky

What is Vite and Why Use It Over Create React App?

Luke Twomey

Pointers on Upgrading from Cypress v9 to v12

Gleb Bahmutov

How to Use v-model with Form Inputs in Vue

Dmitri Pavlutin

How to Create and Use Path Aliases in TypeScript Imports with Vite

Hasibul Hasan

What Is Deno and How to Use Its Sandbox?

Roman Zaynetdinov

???? Code & Tools

Template: A Simple Framework for Webapps — The author built it for his own projects, but notes: “It’s a joy to work in, feels “frameworky” but it’s just web standards with <100 lines of convenience JS wrapped around it. There is no magic beyond what the browser provides – I like it that way.” We do too.

William Blankenship

React ProseMirror: Integrate the ProseMirror Editor with ReactProseMirror is a toolkit for building rich text editors for the Web.

The New York Times

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log, now with support for Vitest.

Wallaby.js sponsor

Fable 4.0: F# to JavaScript Compiler — If you fancy F#’s flavor of almost-entirely-functional development, this could be for you. GitHub repo.

Fable

MiniSearch: Small In-Memory Fulltext Search Engine for Browser and Node — The strength is that the indexed data is stored locally, allowing it to work offline and giving good performance, as seen in this demo.

Luca Ongaro

css-variable: Tiny Treeshakable Library to Define CSS Custom Properties in JS — Compatible with popular CSS-in-JS libraries like Emotion, styled-components, Linaria, etc., and it boasts better CSS minification and smaller virtual DOM updates, among other features.

Jan Nicklas

Tremor 2.0: The React Library to Build Dashboards Fast — Provides an array of modular components to build data-driven dashboards. v2.0 is the “first step towards a production-ready version of Tremor” and sees a full switch to Tailwind CSS. Homepage.

Tremor Labs

Stable Diffusion Plugin for Photoshop — Writing code that worked with Adobe’s weird JS variant was ghastly, but this uses their new ‘UXP’ based approach, so is interesting enough for that alone. This plugin also opens up the Stable Diffusion generative art system to Photoshop users.

Abdullah Alfaraj

Flexboard: A React Component Library for Resizable Sidebars — Try the live example. The code allows you to set min/max sizes for the resizable parts of the layout.

Dorbus

???? Jobs

Full Stack JavaScript Engineer @ Emerging Cybersecurity Startup — Small team/big results. Fun + flexible + always interesting. Come build our award-winning, all-in-one cybersecurity platform.

Defendify

Software Engineer (Frontend) — Join our “kick ass” team. Our software team operates from 17 countries and we’re always looking for more exceptional engineers.

Sticker Mule

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

????‍???? Got a job listing to share? Here’s how.

Fuite 2.0
↳ Tool for finding memory leaks in web apps.

???? wavesurfer.js 6.6
↳ Navigable waveform built on Web Audio & canvas.

Svelte-Inview 4.0
↳ Svelte action that monitors when an element enters/leaves the viewport.

Discord.js 14.8
↳ Library for using the Discord chat API.

Plotly.js 2.20
↳ Powerful charting library. (Examples.)

Recharts 2.5
↳ React + D3 charting library. (Examples.)

deepmerge 4.3.1
↳ Merges the enumerable properties of objects.

Vue Testing Library 7.0

React Table Library 4.1

Nodesource introduces Machine learning on its N|Solid platform to help make better Node Apps

N|Solid is an incredibly versatile platform for helping developers and devops engineers build and manage highly performant and secure Node.js web applications. With the advancement of machine learning you can unlock even more potential. Our M/L solution is a powerful tool that can increase the quality of user experience and boost efficiency for organizations with their Node.js applications. In this article, we’ll explore what machine learning is and how you can use it within N|Solid, pluswe’ll provide tips and best practices for leveraging this new capability to get the most out of your Node.js project.

AI – growing in value in the software development lifecycle

Img #1 AI vs ML concepts

Put in context, artificial intelligence refers to the general ability of computers to emulate human thought and perform tasks in real-world environments, while machine learning refers to the technologies and algorithms that enable systems to identify patterns, make decisions, and improve themselves through experience. — https://ai.engineering.columbia.edu

The technology world has been abuzz with the growing hype of artificial intelligence (AI). This is understandable as AI promises to revolutionize business and everyday life; from self-driving cars to automated customer service, AI will shape the future of our civilization. As technology continues to advance, the potential applications for AI are seemingly endless.

AI and ML (Machine Learning) are closely related, but not identical. AI is the broader concept of machines being able to perform tasks that would normally require human intelligence, such as visual perception, speech recognition, decision-making, and language understanding. ML is a specific subset of AI that is focused on the development of algorithms and statistical models that allow computers to “learn” from data, without being explicitly programmed. In other words, ML is a method for achieving AI.

ML and AI can help developers build better software in several ways. Some examples include:

Automating repetitive tasks: ML algorithms can be used to automate repetitive tasks that would otherwise require human intervention. For example, a ML model could be trained to automatically classify and categorize emails, reducing the need for manual sorting.

Improving software performance: ML algorithms can be used to optimize the performance of software systems. For example, a ML model could be trained to predict the load on a server, allowing the software to dynamically adjust its resource usage in response.

Enhancing the user experience: AI-powered software can provide a more personalized and intuitive experience for users. For example, a chatbot powered by natural language processing (NLP) could be used to provide customer service, or a recommendation system powered by ML could be used to suggest products to customers.

Predictive Maintenance: AI and ML algorithms can be used to predict when a machine or equipment is likely to fail, allowing maintenance to be performed before the failure occurs.

Identify and Fix Bugs: AI and ML can be used to automatically identify and fix software bugs, reducing the need for human intervention.

Improve Cybersecurity: AI and ML can be used to identify and mitigate cyber threats and detect suspicious activity on a network, which help to improve cybersecurity.

We believe there is great promise for developers to leverage new tooling that helps them focus on the solution and resolve issues as fast as possible, reducing security risks and deliver amazing user experiences. We see AI and ML as a major step forward to build better software.

Node.js expose the potential of AI.

Img 2 – AI Frameworks

We believe Node.js is a powerful technology for leveraging the potential of AI. It allows developers to easily create and manage AI applications, as it features extensive APIs for interacting with AI-related services. With Node.js, developers can create AI-backed applications that can be deployed across various platforms, making it an invaluable asset for businesses looking to leverage the power of AI.

The combination of Node.js and AI will also make it possible to create sophisticated applications that can interpret data in real-time, allowing businesses to improve their customer experience dramatically. As AI advances, Node.js will be a key tool in helping developers make the most out of the technology.

Recently there are several AI projects that are ushering a massive wave of exploration. OpenAI and its ChatGPT has become one of the fastest tools ever adopted. We are impressed with the incredible progress of the OpenAI project and many others,we continue to study, experiment, and review implementations of these technologies and their potential for the ecosystem.

Links to other cool resources

GitHub OpenAI: https://github.com/openai/openai-quickstart-node

OpenAI Docs: https://beta.openai.com/docs/quickstart

Already, Node.js is being used by many companies to power their AI-driven applications, and this trend will only continue as more companies seek to take advantage of the power of AI. Node.js also allows developers to quickly set up and deploy AI-driven applications, further accelerating the development process. With Node.js and AI, businesses can create smarter, faster, and more efficient applications.

Nodesource Introduces Machine learning in N|Solid platform

N|Solid is a Node.js platform with an integrated AI development environment.

This feature allows for training models that will later detect similar patterns in your application data and fire custom events.

It also offers advanced analytics capabilities and support for various AI technologies, making it a powerful tool for businesses looking to capitalize on the potential of AI.

Img 3 – ML Feature Cover

N|Solid is part of a larger trend toward making AI and ML more accessible to developers, helping to utilize these advancements to deliver software solutions.. By providing an integrated platform for Node.js in production, N|Solid is making it easier for businesses to create sophisticated AI-driven models and reap the benefits that come with them.

Developers can start using this new feature in N|Solid immediately to:

Identify performance issues and present insights to resolve quickly
Apply insights across multiple applications
Smart analysis and detection of common Node.js performance issues with the bundled models we provide
Training of custom models to detect specific problems
Global notifications and events tracking for processes and applications

Below you will see ML in action inside N|Solid.

Machine Learning UI

In the N|Solid Console, the Machine Learning feature can be accessed from the app summary or process detail views.

Each handles different data sets and will have a different effect on the model you train.

Training ML Models

The Machine Learning models can be trained using two kinds of data sets. The models trained in the app summary view will use the aggregated data of all the processes running inside the app.

On the other hand, the models trained in the process detail view will use process-specific data.

Train a model in the app summary view.

When a process/app is first connected, it will take a certain amount of data to be successfully trained; you will find a progress loader under process configuration:

To train a model in an app summary page, click on Train ML Model button.

Train a model in a process detail view.

To train a model in a process detail page, click on Train ML Model button.

Modal creation and training

After clicking on the Train ML Model button, a modal will open; here, you can create, filter, and train models; this modal is the same for both pages.

To create a model, click on CREATE NEW MODEL.

Name and briefly describe the model, then save.

Select the created modal and click on ‘TRAIN.’

When the trained model finds a data pattern similar to the one it was trained with, it will fire an event and show a banner on top of the navbar.

Click on View Event to be redirected to the events tab; here, you will find the most recent machine learning event.

The events will also appear in the application status section; clicking on VIEW ANOMALIES will redirect to the events tab.

Manage the default and custom models.

Machine Learning models can be administered in the settings tab, where you will find a set of default models and the user-trained models; here, the frequency of events being fired can be modified, and the custom user models can be deactivated, deleted, or edited.

For a full reset of the created models, click on RESET MODELS.

Custom user models have edit and delete icons; these models are found beneath the default models.

PLEASE NOTE Only the name and description of the user-created model can be edited; if you want to change the model data, please retrain the model in-app summary or in the process detail pages. Default models are activated by default; these can only be activated or deactivated.

Our Machine learning feature has been live since November 2022; if you want to review the official documentation, you can do it here.

One Last Thing…

To get the best out of Enterprise Node.js, start a free trial of N|Solid SaaS, an augmented version of the Node.js runtime, enhanced to deliver low-impact performance insights and greater security for mission-critical Node.js applications.