Tag: development

jQuery lives on; major changes teased

Posted on by

#​639 — May 18, 2023

Read on the Web

JavaScript Weekly

Bun’s New Bundler: 220x Faster than webpack? — Bun is one of the newest JavaScript runtimes (built atop the JavaScriptCore engine) and focuses on speed while aiming to be a drop-in replacement for Node.js. This week’s v0.6.0 release is the ‘biggest release yet’ with standalone executable generation and more, but its new JavaScript bundler and minifier may attract most of the attention and this post digs into why.

Jarred Sumner

???? If you’d prefer to read what a third party thinks, Shane O’Sullivan gave the new bundler a spin and shared his thoughts. There’s also some discussion on Hacker News. It’s early days and while esbuild may be fast enough for most right now, it’s fantastic to see any progress in bundling.

Deopt Explorer: A VS Code Extension to Inspect V8 Trace Log Info — A thorough introduction to MS’s new tool for performing analysis of the V8 engine’s internals, including CPU profile data, how inline caches operate, deoptimizations, how functions were run (interpreted or compiled) and more. There’s a lot going on.

Ron Buckton (Microsoft)

Supercharge Your Websites and Applications with Cloudflare — Get ready for supercharged speed and reliability with Cloudflare’s suite of performance tools. With ultra-fast CDN, smart traffic routing, media optimization, and more, Cloudflare has everything you need to ensure your site or app runs at peak performance.

Cloudflare sponsor

jQuery 3.7.0 Released — JavaScript Weekly is 638 issues old, or almost 13 years once you take away weeks off, so jQuery was a big deal in our early days. We hold a lot of nostalgia for it, and it remains widely used even if no-one is writing about it anymore ???? v3.7 folds the Sizzle selector engine into the core, adds some unitless CSS properties, gains a new uniqueSort method, and “major changes” are still promised in future. jQuery lives on!

Timmy Willison (jQuery Foundation)

⚡️ IN BRIEF:

TC39’s Hemanth.HM has begun keeping a list of ES2023 code examples like he did for ES2022, ES2021, and ES2020.

???? The New Stack has a story about Meta supporting the OpenJS Foundation – but who wrote the article is what we found more interesting..

The folks at Meta / Facebook have written about the efficiency gains made in Messenger Desktop by moving from Electron to React Native.

One downside to platforms like Cloudflare Workers using V8 isolates has been a lack of support for opening TCP sockets – quite an impediement if you want to talk to a RDBMS over TCP or something. Fear no more, Cloudflare Workers has introduced a connect() API for creating TCP sockets from Workers functions.

Promise.withResolvers progressed to stage 2 at the latest TC39 meeting.

RELEASES:

Node.js 20.2

Rome 12.1
↳ The formatter/linter gains stage 3 decorator support.

Ember.js 5.0 – App framework.

Jasmine 5.0 – Testing framework.

Gatsby 5.10

???? Articles & Tutorials

How to Get Full Type Support with Plain JavaScript — It’s possible to reap the benefits of TypeScript, yet still write plain JavaScript, as TypeScript’s analyzer understands types written in the JSDoc format.

Pausly

TypeScript’s own JS Projects Utilizing TypeScript page has more info on the different levels of strictness you can follow from mere inference on regular JS code through to full on TypeScript with strict enabled.

▶  Coding a Working Game of Chess in Pure JavaScript — No canvas, either. All using the DOM, SVG, and JavaScript. No AI and it’s not perfect, but it’s only 88 minutes long and it’ll give you something to work on..

Ania Kubow

Automate Slack and MS Teams Notifications Using Node.js — Quick guide to send and automate messages via Slack, MS Teams, and any other channel from your Node.js applications.

Courier.com sponsor

Your Jest Tests Might Be Wrong — Is your Jest test suite failing you? You might not be using the testing framework’s full potential, especially when it comes to preventing state leakage between tests.

Jamie Magee

A Guide to Visual Regression Testing with Playwright — The Playwright browser control library can form the basis of an end-to-end testing mechanism all written in JavaScript, and comparing the visual output of tests can help show where things are going wrong.

Dima Ivashchuk (Lost Pixel)

Create a Real Time Multi Host Video Chat in a Browser with Amazon IVS

Amazon Web Services (AWS) sponsor

React Server Components, Next.js App Router and Examples — Addy Osmani’s overview of of the state of React Server Components, the Next.js App Router implementation, other implementations, the move towards hybrid rendering, plus related links.

Addy Osmani

..and if React is your thing, the latest issue of React Status is for you.

???? Code & Tools

VanJS: A 1.2KB Reactive UI Framework Without JSX — A new entrant to an increasingly crowded space, VanJS is particularly light and elegant, and its author has put some serious effort into documenting it and offering tools to convert your HTML to its custom format. It’s short for vanilla JavaScript, by the way.. GitHub repo.

Tao Xin

JavaScript Scratchpad for VS Code (2m+ Downloads) — Quokka.js is the #1 tool for exploring/testing JavaScript with edit-continue experience to see realtime execution and runtime values.

Wallaby.js sponsor

Introducing Legend-State 1.0: Faster State for React — Another state management solution? After a year of effort, Legend State 1.0 claims to be the fastest option “on just about every metric” and they have the benchmarks to prove it. Whatever the case, this thorough intro is worth a look. GitHub repo.

Moo․do

Starry Night: GitHub-Like Syntax Highlighting — Apparently, GitHub’s own syntax highlighting approach isn’t open source, but this takes a similar approach and is. It’s admittedly quite ‘heavy’ (due to using a WASM build of the Oniguruma regex engine) but that’s the price of quality.

Titus Wormer

Garph 0.5: A Fullstack GraphQL Framework for TypeScript — Full-stack ‘batteries included’ GraphQL APIs without codegen. GitHub repo.

Step CI

headless-qr: A Simple, Modern QR Code Library — A slimmer adaptation of an older project without the extra code that isn’t necessary today. Turning the binary into an image is your job, or use something like QRCode.js if you want a canvas-rendered QR code out of the box.

Rich Harris

Scroll Btween: Use Scroll Position to Tween CSS Values on DOM Elements — Scrolling/parallax libraries tend to feel the same but this one demonstrates some diverse examples with colors, images, and text — all with no dependencies.

Olivier Blanc

eslint-plugin-check-file: Rules for Consistent Filename and Folder Names — Allows you to enforce a consistent naming pattern for file and directory names in projects.

Huan

Transformers.js 2.0 – Run Hugging Face transformers directly in browser.

PrimeReact 9.4 – Extensive UI component library.

The Lounge 4.4 – Cross-platform, self-hosted web IRC client.

Faast.js 8.0 – Serverless batch computing made simple.

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

Fullstack Engineer at Everfund.com — Push code, change lives! Help us become the center for good causes on the modern web with our dev tools.

Everfund

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

???? Go with the flow..

js2flowchart.js — A visualization library to convert JavaScript code into attractive SVG flowcharts. Luckily, there’s a live online version if you want to play without having to install anything.

Bohdan Liashenko

Announcing The NodeSource-GitHub Partnership

Posted on by

NODESOURCE PARTNERS WITH GITHUB
For Immediate Release

NodeSource enhances Node.js application security with the NCM integration for GitHub Deployment Protection Rules.

[Seattle, WA, April 13th, 2023] – NodeSource, a leader in Node.js application management, monitoring, and security, is excited to announce our partnership as a launch partner for Deployment Protection Rules with GitHub Actions, the world’s largest software development platform, to integrate Node Certified Modules (NCM) directly into the GitHub Marketplace. This integration brings enhanced security capabilities to the development process in Node.js applications, mitigating vulnerabilities and ensuring compliance with licensing requirements.

Node.js applications and services heavily rely on open-source Node packages for their source code. However, many of these packages may have publicly disclosed vulnerabilities often ignored or overlooked by developers, leaving applications at risk of malicious code execution and data leaks. To address this challenge, NodeSource has developed NCM, a powerful tool that scans for vulnerabilities, tracks package dependencies, and ensures compliance with licensing requirements.

“By enabling partners like NodeSource to create Deployment Protection Rules for users of GitHub Actions, organizations can now leverage NodeSource’s vulnerability management tools to identify security risks and maintain compliance before their applications are deployed to production. These improvements and new controls underscore GitHub’s commitment to empowering developers while enhancing governance, code quality, and security within GitHub Actions.” – Jamie Jones, GitHub VP of Technical Partnerships & Field Services. With NCM GitHub App for [Deployment ProtectionRules]https://github.blog/2023-04-20-announcing-github-actions-deployment-protection-rules-now-in-public-beta, developers can easily add NCM to their repositories, configure organization-wide rules for vulnerability scanning and approval processes.

With the integration of NCM for GitHub Deployment Protection Rules, users can now easily add and configure the NCM app into their GitHub repositories. This allows developers to seamlessly incorporate NCM into their workflow, with every deployment being analyzed and approved or rejected based on organization-configured rules for NCM. NCM provides a comprehensive report for every Pull Request, helping developers identify and mitigate security risks during code reviews. Check the NCM GitHub App.

“NodeSource is committed to providing the Node.js community with the tools and capabilities needed to secure their applications and mitigate risks associated with open-source packages,” said __Russ Whitman, CEO of NodeSource__. “Our partnership with GitHub further strengthens our mission, allowing users to easily access and utilize NCM within their GitHub Actions workflow, ensuring that their Node.js applications remain secure and reliable.”

NodeSource’s NCM also works offline, providing flexibility and convenience for developers in various development environments. NCM offers a comprehensive solution for managing Node.js application dependencies and assessing security vulnerabilities, license concerns, code risks, and code quality.

“Security is a top priority for NodeSource and our community of developers. We are thrilled to be a launch partner for GitHub Deployment Protection Rules and integrate NCM into GitHub Actions, providing our users with a powerful tool for securing their Node.js applications,” said __Adrian Estrada, VP of Technology of NodeSource__. “With NCM’s capabilities seamlessly integrated into GitHub Deployment Protection Rules, developers can now easily track and manage their package dependencies, ensuring that their applications remain secure and compliant.”

Node.js application security is of utmost importance, especially in today’s threat landscape, where supply chain attacks are becoming more prevalent. By leveraging NCM’s capabilities within their GitHub Actions workflows, developers can significantly reduce the risk of vulnerabilities in their Node.js applications, ensuring that their codebase remains secure and reliable.

About NodeSource:

NodeSource is a leading provider of Node.js application management solutions, Node.js Support and services, helping organizations successfully scale and secure their Node.js applications. Node Certified Modules (NCM) is a comprehensive tool that offers visibility, security, and governance for managing Node.js application dependencies. With its powerful features, NCM ensures that Node.js applications remain secure, reliable, and compliant with licensing requirements. For more information, visit www.nodesource.com.

About GitHub:

GitHub is the world’s largest software development platform, providing a collaborative environment for millions of developers to build, test, and deploy their software. GitHub offers many tools and integrations for efficient software development and secure collaboration. For more information, visit www.github.com.

Media Contact:
Russ Whitman
CEO NodeSource
[email protected]

On the origin of packages

Posted on by

#​635 — April 20, 2023

Read on the Web

JavaScript Weekly

Introducing npm Package Provenance — As stewards of the official npm registry, GitHub has been keen to improve its security. As of this week, if you build npm packages through GitHub Actions, you can publish the provenance of a package which gives users a way to verify which repo a package was built from and how. The folks at Socket took a closer look at how it works.

DeHamer and Harrison (GitHub)

What’s New in ECMAScript 2023, Briefly — Last week we mentioned the progression of the ECMAScript 2023 spec but it’s hardly bedtime reading. This post looks more briefly at a few of the new additions including Array#findLast, hashbangs, and Array#toSorted.

Pawel Grzybek

New Course by Kyle Simpson: Practical Problem Solving with Algorithms — Walk through four fun challenges with Kyle in this new video course. You’ll learn how to apply algorithms with techniques like recursion, traversals, and acyclic paths, cover memoization to avoid garbage collection, and come away writing more performant code.

Frontend Masters sponsor

Node.js v20 (Current) Released — Released just two days ago, the newest major version of Node.js includes a variety of interesting updates, including:

An experimental permissions model. This is a feature Deno has at its core but now you can restrict access to certain capabilities in Node too.

V8 11.3 (which includes Regexp /v flag support)
The node:test test runner goes stable.
Official support for Windows on ARM64.
Improvements to the single executable packaging mechanism.

The Node.js Team

As per policy, Node v20 will become the main LTS release this October.

Vite 4.3: Now It’s Even ‘Faaaaster’ — A minor release of the popular frontend toolchain, but one that focuses on performance. The creatively titled How we made Vite 4.3 faaaaster digs into the details.

Evan You and Contributors

IN BRIEF:

TypeScript 5.1 Beta has been released which allows undefined-returning functions to have no return statement, to have unrelated types for get and set accessor properties, namespaced attribute names when using JSX, and more.

The React core team appears to have been affected by Meta’s latest round of layoffs (as has that of Relay), though Dan Abramov recently noted Meta’s continued investment into the ecosystem.

Introducing the TERN Stack & How to Migrate from MERN to TERN

Tigris sponsor

RELEASES:

Shoelace 2.4
↳ Popular library of well designed Web components.

Node.js v18.16.0 (LTS)

Gatsby 5.9

???? Articles & Tutorials

Richer Install UI for PWAs Available in Chrome — Gives progressive web app developers a new opportunity to encourage end users to install their app.

Adriana Jara (Chrome Developers)

Passkeys: What and Why? — The author has been experimenting with passkeys and the associated WebAuthn API that opens them up to the Web. A primer for an increasingly common security approach.

Neal Fennimore

Build Complex Automations 10x Faster, Without Fighting APIs — The flexible workflow automation platform for technical people who want to build complex workflows faster — without struggling with manual scripts.

n8n sponsor

Integrating React Flow and the Web Audio API — React Flow is a component for building node-based editors and interactive diagrams, which makes it well suited for building audio signal chains. There’s a lot of depth here, some nice examples, and these techniques could prove useful for a lot of other use cases.

Hayleigh Thompson

Ways to Create an Enum in JavaScript — An enum is a set of named constants. Plain objects, frozen objects, proxied objects or a class-based approach provide some ways to create enums in JavaScript.

Dmitri Pavlutin

Deno vs. Node: No One is Ready for the Move — Deno has a lot going for it as an alternative to Node, but Node has time, maturity and a huge, established userbase on its side (and continues to develop, as seen with this week’s Node v20).

Piumi Liyana Gunawardhana (Honeypot)

How to Work with Dates and Times in Vanilla JavaScript

Chris Ferdinandi

???? Code & Tools

Tachyon 2.0: A Bite-Sized Script to Make Page Navigation Faster — It does this by prerendering pages before a user navigates to them, making page transitions as quick as can be.

Tachyon

instant.page is another well known option in this space.

Iconoir: 1300+ Open Source SVG Icons — A vast array of clean and simple icons, complete with ways to quickly integrate them into React, React Native, Figma, and other apps – or just using CSS, if you prefer.

Luca Burgio

Tuple – One-Click Code Reviews for Remote Devs — Why waste hours setting up Zoom just to review a couple lines of code? Tuple brings your team together in seconds.

Tuple sponsor

Ark UI: A Headless Library of Customizable, Accessible, and Unstyled UI Components — Compatible with React, Vue, and Solid and powered by Zag.js. All components are built with accessibility standards and are easy to theme in line with your own design system.

Chakra Systems

next-route-visualizer: Visualize Next.js App Routes — A package for visualizing Next.js app directory routes, as seen in this demo.

Alexander Vencel

ohash: Super Fast Hashing Library in Plain JS

UnJS

<relative-time> Element 4.3
↳ Web component extension of <time>

Fable 4.1
↳ F# to JavaScript/TypeScript compiler.

useHotkeys 4.4
↳ React hook for keyboard shortcuts.

AdminJS 7.0 – Admin panel for Node webapps.

lowdb 6.0 – Simple, local JSON database.

imaskjs 6.6 – Vanilla JS input masking.

CKEditor 5 37.1 – Rich text editor framework.

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

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.

???? Let’s get it arted..

DPaint JS: A Deluxe Paint-Inspired Image Editor — Sometimes we like to link to impressive projects built with JavaScript, and if you were ever into the Commodore Amiga, you’ll love this one. It’s a Web-based image editor inspired by Deluxe Paint, itself a hugely inspirational graphics editing tool from 1980s. Now we’re just waiting for a NeoPaint clone.. 🙂

Steffest

Playwright now offers a UI mode

Posted on by

#​631 — March 24, 2023

Read on the Web

JavaScript Weekly

Speeding Up the JavaScript Ecosystem: npm Scripts — The latest in what has been a fascinating series on finding ‘low hanging fruit’ when it comes to performance in the JavaScript world. The author explains it best himself:

“‘npm scripts’ are executed by JavaScript developers … all the time. Despite their high usage they are not particularly well optimized and add about 400ms of overhead. In this article we were able to bring that down to ~22ms.”
What Marvin does here is a valuable skill for all developers to pick up, and you can enjoy more by going back to the start.

Marvin Hagemeister

Playwright v1.32 – Now with UI Mode — The popular Web testing and automation framework is taking more steps toward the ground currently served by tools like Cypress by offering a ‘UI mode’ that lets you explore, run and debug tests in a UI environment, complete with watch mode. ▶️ This video provides a good introduction.

Microsoft

A Grid Component with All the Features & Great Performance — Try our powerful JS data grid component which lets you edit, sort, group and filter datasets with fantastic performance. Includes a TreeGrid, API docs and plenty of demos. Seamless integration with React, Angular & Vue apps.

Bryntum sponsor

Why We Added package.json Support to Deno — Deno shares some provenance with Node.js but till recently it hadn’t focused on supporting Node features like npm modules. But with Node and npm compatibility beginning to improve, the team has faced questions about the runtime’s priorities. Ryan Dahl explains more about their thinking here.

Ryan Dahl

???? In other Deno news, Deno 1.32 has been released with… improved package.json support, and more.

How to Start a React Project in 2023 — There are lots of ways, but this well-regarded author explains the pros and cons of a few approaches, and gives you a few options targeting specific use cases you might have.

Robin Wieruch

IN BRIEF:

GitHub had to update its RSA SSH host key today so you may see security related warnings when pushing and cloning. It’s easy to fix, but check the new fingerprint matches – it’s for your own security.

The New Stack caught up with Svelte’s Rich Harris on SvelteKit and what’s coming for Svelte 4.

The React team shared some cutting edge updates on what they’re working on including React Server Components and an optimizing compiler.

If you were experiencing errors on the official Node site last week, here’s the (detailed) post mortem of why. Config errors and inappropriate caching, mostly.

✨ Did you know there’s a market in fake GitHub stars? Some developers analyzed some repos to learn more about it.

???? Congratulations to Lea Verou on her TC39 appointment9. Her efforts to push the Web forward are legendary. Prism is one project you may be aware of.

Make your opinions known on what should be in the next version of Vite.

RELEASES:

Docusaurus 2.4
↳ Easy to maintain documentation site generator.

Puppeteer 19.8
↳ Headless Chrome Node.js API.

Neutralinojs 4.11
↳ Lightweight cross-platform desktop app framework.

Qwik 0.23

???? Articles & Tutorials

Buying a Hard-to-Get Bicycle using Playwright — An unusual use case for JavaScript, Playwright, and GitHub Actions, but Maciek managed to buy his bike.

Maciek Palmowski

Snyk Top 10: JavaScript OSS Vulnerabilities — Dive into the most prevalent critical and high open source vulnerabilities found by Snyk scans of JavaScript apps in 2022.

Snyk sponsor

The ‘End’ of Front-End Development? — A recent narrative doing the rounds suggests that large language models like GPT-4 (or even tools like Copilot X) could soon put some developers out of a job — however, Josh is “optimistic about what these AI advancements mean for the future of software development”.

Josh W. Comeau

In related news, Eric Elliott put ChatGPT through its paces to see if it would make for a good JavaScript tutor. It did well, though with mixed results.

Migrating from ts-node to Bun — A look at adopting performance-oriented Bun when you’re used to using TypeScript with Node.js. John runs us through porting a console app from the ts-node approach over to Bun — “a pretty easy process,” he says.

John Reilly

▶  A Pinia Crash Course for Beginners — Pinia is a store / state management solution for Vue that does believe in pineapple on pizza.

Alexander Gekov

A Practical Guide to Getting Started with Astro — An extensive walkthrough of Astro that covers all the topics you’ll need to get you started.

Mojtaba Seyedi

???? Test Website Speed Continuously and Rank Higher In Google — You need a fast website to make users happy and meet Google’s Core Web Vitals metrics. Test and optimize with DebugBear.

DebugBear sponsor

Automatic npm Publishing with GitHub Actions and Granular Tokens

Tim Perry

Make Sure You Do This Before Switching to Signals in Angular

Jordan Powell

Six CSS Snippets Every Developer Should Know

Adam Argyle (Google)

???? Code & Tools

trace.cafe: Easy Webperf Trace Sharing — A quick way to share a performance profile saved from your DevTools, available for up to 90 days with the DevTools perf panel embedded (see example).

paul irish

VueUse: A Collection of Vue Composition Utilities — With over 200 functions targeting both Vue 2 and 3, there’ll be something in this suite of Composition API-based utility functions for you, whether it’s working with state, browser capabilities, animations, Electron, Firebase, and more.

Anthony Fu

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

OTPAuth: One Time Password (HOTP/TOTP) Library — When you log in to a site that uses 2FA and you’re asked for some digits from an authentication app, that’s probably a Time-based One-Time Password (or TOTP). This library for Node, Deno, Bun and the browser lets you work with TOTPs and HOTPs from JS.

Héctor Molinero Fernández

Recharts 2.5: Chart Library Built with React and D3 — Easy to deploy with declarative components, native SVG support, and lightweight dependency on D3. Line, bar, scatter, composed, pie, and radar charts are offered. There are lots of examples, complete with code.

recharts

DOCX 8.0: Generate Word .docx Files from JavaScript — The code to lay out documents is verbose but there’s a lot of functionality. Here’s a CodePen example and release notes – GitHub repo.

Dolan Miu

SvHighlight: Code Syntax Highlighter for Svelte — Powered by Highlight.js, it includes a blurring feature to focus attention on specific areas of code and you an customize it with Tailwind. Try the interactive examples to see the effect.

SvHighlight

eslint-formatter-pretty 5.0: Pretty ESLint Formatter — Nicer output than the default. Sort results by severity. Get stylized inline code blocks, and more.

Sindre Sorhus

AWS JWT Verify: Verify JWTs Signed by Amazon Cognito — In both Node.js and the browser.

Amazon Web Services

???? Jobs

Software Engineer (Backend) — 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.

melonJS 15.0
↳ Mature HTML5 game engine.

Marked 4.3
↳ Markdown parser and compiler. (Demo.)

v8go 0.9
↳ Execute JavaScript from Go(lang).

Million 2.1
↳ Fast Virtual DOM to make React faster.

Partytown 0.7.6
↳ Take third-party scripts off the main thread.

???? Bonus Item

Make Bookmarklets — Create and test bookmarklets directly in the browser. Makes an irritating task slightly easier if you need to do it.

Cullan Luther

JavaScript sans build systems?

Posted on by

#​626 — February 17, 2023

Read on the Web

JavaScript Weekly

Writing JavaScript Without a Build System — Using a variety of build tools for things like bundling and transpiling is reasonably standard in modern JavaScript development, but what if you want to keep things simple? For simple things, it’s not necessary, says Julia. This led to a lot of discussion on Hacker News.

Julia Evans

Ryan Dahl, Node.js Creator, Wants to Rebuild the Runtime of the Web — A neat bit of journalism about the alternative JavaScript runtime Deno and what Ryan Dahl is trying to achieve with it and how Ryan handled the stress of being known as the creator of Node.js.

Harry Spitzer / Sequoia

Broadcasting a Live Stream With Nothing but JavaScript — Live streams typically use third-party software to broadcast, but with Amazon Interactive Video Service, you can build a powerful, interactive broadcasting interface with the Web Broadcast SDK and JavaScript. Click here to learn more.

Amazon Web Services (AWS) sponsor

core-js’s Maintainer Complains Open Source Is ‘Broken’ — core-js is a popular universal polyfill for JavaScript features and its author has run into his fair share of bad luck which has culminated in this lengthy post on the state of the project, his issues in securing an income and, well, the downsides to living in Russia. The Register has tried to balance out the story.

The Register

IN BRIEF:

🐒 The just released Firefox 110 for Android now supports Tampermonkey, an extension for running JavaScript ‘userscripts’ on sites you visit.

The Angular project is taking steps to revamp its reactivity model to enable fine-grained change detection via signals.

The latest beta of iOS and iPadOS 16.4 supports the Web Push API for home screen webapps.

🐦 A fun Twitter thread where Qwik’s Miško Hevery attempted to demonstrate why a = 0-x is about 3-10x faster than a = -x before being told about a flaw in his benchmark. There is still a performance difference, though.

▶️ The React.js documentary we mentioned last week has now been released and it’s a heck of a watch – you’ll need 78 minutes of your time though.

RELEASES:

Node.js 19.6.1, 18.14.1, 16.19.1 and 14.21.3.

JavaScript Obfuscator 4.0 – Code scrambler.

Shoelace 2.1
↳ Framework agnostic Web components.

Mermaid 9.4
↳ Text to diagram generator. Now with timeline diagram support.

Cypress 12.6

📒 Articles & Tutorials

Use a MutationObserver to Handle DOM Nodes that Don’t Exist Yet — Comparing the effectiveness of the MutationObserver API with the conventional method of constantly checking for the creation of nodes.

Alex MacArthur

Well-Known Symbols in JavaScript — Hemanth, a TC39 delegate, shows off 14 symbols and where they can come in useful.

Hemanth HM

🚀 Monitor and Optimize Website Speed to Rank Higher in Google — Monitor Google’s Core Web Vitals and optimize performance using in-depth reports built for developers. Improve SEO & UX.

DebugBear sponsor

Why to Use Maps More and Objects Less — A journey down a performance rabbit hole.

Steve Sewell

Adopting React in the Early Days — A personal history lesson providing context around React’s evolution. While React might be an obvious, even safe, choice now, that wasn’t always true.

Sébastien Lorber

An Animated Flythrough with Theatre.js and React Three Fiber — How to fly through a 3D scene using the Theatre.js JavaScript animation library and the React Three Fiber 3D renderer. This is the sort of thing that used to be Very Difficult™ but is now relatively trivial.

Andrew Prifer (Codrops)

How to Change the Tab Bar Color Dynamically with JavaScript

Amit Merchant

Is Deno Ready for Primetime? One Dev’s Opinion

Max Countryman

Using Playwright to Monitor Third-Party Resources That Could Impact User Experience

Stefan Judis

🛠 Code & Tools

Dependency Cruiser: Validate and Visualize JavaScript Dependencies — If you want a look at the output, there’s a whole page of graphs for popular, real world projects including Chalk, Yarn, and React.

Sander Verweij

Devalue: Like JSON.stringify, But.. — “Gets the job done when JSON.stringify can’t.” Namely, it can handle cyclical and repeated references, regular expressions, Map and Set, custom types, and more.

Rich Harris

🧡 JavaScript Scratchpad for VS Code (2m+ Downloads) — Get Quokka.js ‘Community’ for free: #1 tool for exploring/testing JavaScript with edit-continue experience to see realtime execution and runtime values.

Wallaby.js sponsor

NodeGUI: Build Native Cross-Platform Desktop Apps with Node.js — Unlike Electron which leans upon webviews and HTML, NodeGui uses a Qt based approach. This week’s 0.58.0 release is the first stable release based on Qt 6 and offering high DPI support.

NodeGui

DOMPurify 3.0: Fast, Tolerant XSS Sanitizer for HTML and SVG — A project that’s nine years old today but still actively developed. Supports all modern browsers (IE support was only just dropped) and is heavily tested. There’s a live demo here.

Cure53

Pythagora: Generate Express Integration Tests by Recording Activity — This is a neat idea still in its early stages. Add a line of code after setting up an Express.js app and this will capture app usage and generate integration tests based on the interactions. (▶️ Screencast demo.)

zvone187 and LeonOstrez

Try Stream’s Free Trial of SDKs for In-App Chat

Stream sponsor

grep.app: Search Code Across a Half Million GitHub Repos — A code search engine that lets you use regexes or syntax in your search. Considering what it is, it’s pretty fast and has an extensive index (over half a million public repos from GitHub, allegedly).

grep.app

tsParticles: Particles, Confetti and Fireworks for Your Pages — Create customizable particle related effects for use on the Web. Uses the regular 2D canvas for broad support.

Matteo Bruni

💻 Jobs

Software Engineer — Join our happy team. Stimulus is a social platform started by Sticker Mule to show what’s possible if your mission is to increase human happiness.

Stimulus

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

QUICK RELEASES:

Minimatch 6.2
↳ Glob matcher library, as used in npm.
    minimatch(“bar.foo”, “*.foo”)

React Accordion 1.2
↳ Unstyled WAI-ARIA-compliant accordion library.

ScrollTrigger 1.0.6
↳ Have your page react to scroll changes.

VeeValidate 4.7.4
↳ Popular Vue.js form library

Express Admin 2.0
↳ Admin interface for data in MySQL/Postgres/SQLite.

Execa 7.0
↳ Improved process execution from Node.js.

React Tooltip 5.8

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

Posted on by

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.

Instrument your Nodejs Applications with Open Source Tools – Part 2

Posted on by Simon Helberg

As we mentioned in the previous article, at NodeSource, we are dedicated to observability in our day-to-day, and we know that a great way to extend our reach and interoperability is to include the Opentelemetry framework as a standard in our development flows; because in the end our vision is to achieve high-performance software, and it is what we want to accompany the journey of developers in their Node.js base applications.

With this, we know that understanding the bases was very important to know the standard and its scope, but that it is necessary to put it into practice. How to integrate Opentelemetry in our application?; and although NodeSource has direct integration into its product in addition to more than 10 key functionalities in N|Solid, that extend the offer of a traditional APM, as you know, we are great contributors to the Open Source project, we also support the binary distributions of the Node.js project, our DNA is always helping the community and showing you how through Open Source tools you can still increase the visibility. So through this article, we want to share how to set up OpenTelemetry with Open Source tools.

In this article, you will find __How to Apply the OpenTelemetry OS framework in your Node.js Application__, which includes:

Step 1: Export data to the backend

Step 2: Set up the Open Telemetry SDK
__Step 3__: Inspect Prometheus to review we’re receiving data

Step 4: Inspect Jaeger to review we’re receiving data

Step 5: Getting deeper at Jaeger 👀

Note: This article is an extension of our talk at NodeConf.EU, where we had the opportunity to share the talk:

__Dot, line, Plane Trace!__
__Instrument your Node.js applications with Open Source Software__
Get insights into the current state of your running applications/services through OpenTelemetry. It has never been as easy as now to collect data with Open Source SDKs and tools that will help you extract metrics, generate logs and traces and export this data in a standardized format to be analyzed using the best practices. In this talk, We’ll show how easy it is to integrate OpenTelemetry in your Node.js applications and how to get the most out of it using Open Source tools.

To see the talks from this incredible conference, you can watch all sessions through live-stream links below 👇
– Day 1️⃣ – https://youtu.be/1WvHT7FgrAo
– Day 2️⃣ – https://youtu.be/R2RMGQhWyCk
– Day 3️⃣ – https://youtu.be/enklsLqkVdk

Now we are ready to start 💪 📖 👇

Apply the OpenTelemetry OS framework in your Node.js Application

So, going back to the distributed example we described in our previous article, here we can see what the architecture looks like this after adding observability.

Every service will collect signals by using the OpenTelemetry Node.js SDK and export the data to specific backends so we can analyze it.

We are going to use the following:

JAEGER for Traces and Logs.

Prometheus to visualize the metrics.

_Note: _Jaeger and Prometheus are probably the most popular open-source tools in space.

Step 1: Export data to the backend

How the data is exported to the backends differs:
To send data to _JAEGER__, we will use OTLP over HTTP, whereas for _Prometheus__, the data will be pulled from the services using HTTP.

First, we will show you how easy it is to set up the OpenTelemetry SDK to add observability to our applications.

### Step 2: Set up the OpenTelemetry SDK

First, we have the providers in charge of collecting the signals, in our case __NodeTracerProvider__ for traces and __MeterProvider__ for metrics.
Then the exporters send the collected data to the specific backends.
The Resource contains attributes describing the current process, in our case, __ServiceName__ and __Container. Id’s__. The name of these attributes is well defined by the spec (it’s in the __semantic_conventions module__) and will allow us to differentiate where a specific signal comes from.

So to set up traces and metrics, the process is basically the same: we create the provider passing the Resource, then register the specific exporter.

We also register instrumentations of specific modules (either core modules or popular userspace modules), which provide automatic Span creation of those modules.

Finally, the only important thing to remember is that we need to initialize OpenTelemetry before our actual code; the reason is these instrumentation modules (in our case for __http__ and fastify) __monkeypatch__ the module they’re instrumenting.

Also, we create the __meter instruments__ because we will use them on every service: an __HTTP request counter__ and a couple of observable gauges for __CPU usage__ and __ELU usage__.

So let’s spin the application now and send a request to the API. It returns a 401 Not Authorized. Before trying to figure out what’s going on, let’s see if Prometheus and jaeger are actually receiving data.

Step 3: Inspect Prometheus to review we’re receiving data

Let’s look at Prometheus first:
Looking at the HTTP requests counter, we can see there are 2 data points: one for the __API service__ and another one for the __AUTH service__. Notice that the data we had in the Resource is __service_name__ and __container_id__. We also can see the process_cpu is collecting data for the 4 services. The same is true for __thread_elu__.

Step 4: Inspect Jaeger to review we’re receiving data

Let’s look at Jaeger now:
We can see that one trace corresponding to the __HTTP request__ has been generated.

Also, look at this chart where the points represent traces, the X-axis is the timestamp, and the Y-axis is the duration. If we inspect the trace, we can see it consists of 3 spans, where every span represents an __HTTP transaction__, and it has been automatically generated by the instrumentation-HTTP modules:

The 1st span is an HTTP server transaction in the API service (the incoming HTTP request).
The 2nd span represents a POST request to AUTH from API.
The 3rd one represents the incoming HTTP POST in AUTH. If we inspect a bit this last span, apart from the typical attributes associated with the request (HTTP method, request_url, status_code…).

We can see there’s a Log associated with the Span this makes it very useful as we can know exactly which request caused the error. By inspecting it, we found out that the reason for the failure was missing the auth token.

This piece of information wasn’t generated automatically, though, but it’s very easy to do. So in the verify route from the service, in case there’s an error verifying the token, we retrieve the active span from the current context and just call __recordException()__ with the error. As simple as that.

Well, so far, so good. Knowing what the problem is, let’s add the auth token and check if everything works:

curl http://localhost:9000/ -H “Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiIiLCJpYXQiOjE2NjIxMTQyMjAsImV4cCI6MTY5MzY1MDIyMCwiYXVkIjoid3d3LmV4YW1wbGUuY29tIiwic3ViIjoiIiwibGljZW5zZUtleSI6ImZmZmZmLWZmZmZmLWZmZmZmLWZmZmZmLWZmZmZmIiwiZW1haWwiOiJqcm9ja2V0QGV4YW1wbGUuY29tIn0.PYQoR-62ba9R6HCxxumajVWZYyvUWNnFSUEoJBj5t9I”

Ok, now it succeeded. Let’s look at Jaeger now. We can see the new trace here, and we can see that it contains 7 spans, and no error was generated.

Now, it’s time to show one very nice feature of Jaeger. We can compare both traces, and we can see in grey the Spans that are equal, whereas we can see in Green the Spans that are new. So just by looking at this overview, we can see that if we’re correctly Authorized, the API sends a GET request to SERVICE1, which then performs a couple of operations against POSTGRES. If we inspect one of the POSTGRES spans (the query), we can see useful information there, such as the actual QUERY. This is possible because we have registered the instrumentation-pg module in SERVICE1.

And finally, let’s do a more interesting experiment. We will inject load to the application for 20 seconds with autocannon…

If we look at the latency chart, we see some interesting data: up until at least the 90th percentile, the latency is basically below 300ms, whereas starting at least from 97.5%, the latency goes up a lot. More than 3secs. This is Unacceptable 🧐. Let’s see if we can figure out what’s going on 💪.

Step 5: Getting deeper at Jaeger 👀

Looking at Jaeger and limiting this to like 500 spans, we can see that the graph here depicts what the latency char showed. Most of the requests are fast, whereas there are some significant outliers.

Let’s compare one of the fast vs. slow traces. In addition to querying the database, we can see the slow trace in that SERVICE1 sends a request to SERVICE2. That’s useful info for sure. Let’s take a look more closely at the slow trace.

In the __Trace Graph view__, every node represents a Span, and on the left-hand side, we can see the percentage of time with respect to the total trace duration that the subgraph that has this node as root takes. So by inspecting this, we can see that the branch representing the HTTP GET from SERVICE1 to SERVICE2 takes most of the time of the span. So it seems the main suspect is SERVICE2. Let’s take a look at the Metrics now. They might give us more information. If we look at the thread.elu, we can see that for SERVICE2, it went 100% for some seconds. This would explain the observed behavior.

So now, going to the SERVICE2 code route, we can easily spot the issue. We were performing a __Fibonacci operation__. Of course, this was easy to spot as this is a demo, but in real scenarios, this would not be so simple, and we would need some other methods, such as CPU Profiling, but regardless, the info we collected would help us narrow down the issue quite significantly.

So, that’s it for the demo. We’ve created a repo where you can access the full code, so go play with it! 😎

Main Takeaways

Finally, we just want to share the main takeaways about implementing observability with Open Software Tools:

Setting up observability in our Node.js apps is actually not that hard.
It allows us to observe requests as they propagate through a distributed system, giving us a clear picture of what might be happening.
It helps identify points of failure and causes of poor performance. (for some cases, some other tools might also be needed: CPU profiling, heap snapshots).
Adding observability to our code, especially tracing, comes with a cost. So Be cautious! ☠️But we are not going to go deeper into this, as it could be a topic for another article.

Before you go

If you’re looking to implement observability in your project professionally, you might want to check out N|Solid, and our ’10 key functionalities’. We invited you to follow us on Twitter and keep the conversation!

11 Features in Node.js 18 you need to try

Posted on by Simon Helberg

Node.js 18 LTS is now available. What’s new?

Node.js 18 was released on the 19th of April this year. You can read more in the official blog post release or in the OpenJS Blog announcement. The community couldn’t be more excited!

Here at NodeSource,releases are a big deal. As a team of experts, enthusiasts, and core contributors to the open-source project, we love seeing the progress of Node! We are also one of the primary distributors of the runtime and have been since version 0.x (2014).

Developers download and use our binaries worldwide for their production environments (over 100m a year and growing!). We are incredibly proud to support this important piece of the Node ecosystem in addition to building and supporting customers on our Node.js platform – N|Solid.

“If you use Linux, we recommend using a NodeSource installer.” – From the NPM Documentation

If you want to lend a hand, we welcome your ideas or solutions contact us, or if you would like to help us continue supporting open source, you can contribute with an issue here.

Overall, the community is looking forward to this release with many new features and other benefits in addition to the official release earlier this year that included:

Security: Upgrading to OpenSSL 3.0

APIs: Fetch API is Promise based, providing a cleaner and more concise syntax.

If you are interested in thinking about the future of Node, we recommend checking out The next-10 group. They are doing some great work thinking about the strategic direction for the next 10 years of Node.js. Their technical priorities are:

Modern HTTP, WebAssembly, and Types.
ECMAScript modules and Observability

_OpenJS Collaborator Summit 2022
_

But now I’m sure you want to get into the changes in v18. What has improved, and what are the new features? That’s what you’re here for 😉. So let us explain 👇

Hydrogen. What is it?

The codename for this release is ‘Hydrogen’. Support for Node.js 18 will last until April 2025. The name comes from the periodic table, and they have been used in alphabetical order (Argon, Boron, Carbon, Dubnium, Erbium…) 🤓 Read more in StackOverflow.

LTS?

According to the Node.js blog, the “LTS version guarantees that the critical bugs will be fixed for a total of 30 months and Production applications should only use Active LTS, or Maintenance LTS releases”. – https://nodejs.dev/en/about/releases/

In short, it focuses on stability and being a more reliable application after allowing a reasonable time to receive feedback from the community and testing its implementation at any scale.

_Nodejs Releases Screenshot 2022
_

How do I know what version of Node and LTS I have?

You can easily do it by typing in your console:

$ node –version

Run the following to retrieve the name of the LTS release you are using:

$ node -p process.release.lts

_Note: _ The previous property only exists if the release is an LTS. Otherwise, it returns nothing.

If you want to be aware of the release planning in the Node.js community, you can check here: Node.js Release Schedule.

What’s new in Node.js 18?

Contributors are constantly working to improve the runtime, introduce more features, and improve developer experience and usability. Today as the worldwide community uses JS for developing API-driven web applications and serverless cloud development, the changes in this new LTS version are important to understand.

In honor of the number 11 (__#funfact__ Undici means ‘eleven’ in Italian), we decided to make our top 11 Node.js 18 features:

Fetch API
🧪- – watch
🧪 OpenSSL 3 Support
🧪 node:test module
Prefix-only core Modules
🧪 Web Streams API
Other Global APIs: Blob and BrodcastChannel.
V8 Version 10.1
Toolchain and Compiler Upgrades
HTTP Timeouts
Undici Library

The idea of this blog post is to relevel the functionalities one by one, so let’s start:

Feature 1: Native Fetch API in Node.js 18

Finally, v18 provides native fetch functionality in Node.js. This is a standardized web API for conducting HTTP or other types of network requests. Previously Node.js did not support it by default. Because JavaScript is utilized in so many areas, this is fantastic news for the entire ecosystem.

Example:

Feature 2:–watch

Using –watch, your application will automatically restart when an imported file is changed. Just like nodemon. And you can use –watch-path to specify which path should be observed.

Also, these flags cannot be combined with –check, –eval, –interactive, or when used in REPL (read–eval–print loop) mode. It just won’t work.

You can now use Node Watch index on your file name to start watching your files without having to install anything.

Feature 3: OpenSSL 3 Support

OpenSSL is an open-source implementation of, among other things, SSL and TLS protocols for securing communication.

One key feature of OpenSSL 3.0 is the new FIPS (Federal Information Processing Standards) module. FIPS is a set of US government requirements for governing cryptographic usage in the public sector.

More information is available in the OpenSSL3 blog post.

Feature 4: The Experimental node:test

The node:test module facilitates the creation of JavaScript tests that report results in TAP (Test Anything Protocol) format. The TAP output is extensively used and makes the output easier to consume.

import test from node:test

This module is only available under the node:scheme.
Read more in Node.js Docs

This test runner is still in development and is not meant to replace other complete alternatives such as Jest or Mocha, but it provides a quick way to execute a test suite without additional third-party libraries. The test runner supports features like subtests, test skipping, callback tests, etc.

node:test and –test

node:assert

The following is an example of how to use the new test runner.

More information may be found in the Node.js API docs.

Feature 5: Prefix-only core Modules

A new way to ‘import’ modules that leverages a ‘node:’ prefix, which makes it immediately evident that the modules are from Node.js core

To learn more about this functionality, we invite you to read Colin Ihrig‘s article Node.js 18 Introduces Prefix-Only Core Modules.

Feature 6: Experimental Web Streams API

A Web Streams API is a set of streams API. Also experimental, it allows JavaScript to access streams of data received over the network programmatically and process them as desired. This means Stream APIs are now available on the global scope. This would help send the data packets in readable and writable streams.

Methods available are as follows,

ReadableStream

ReadableStreamDefaultReader

ReadableStreamBYOBReader

ReadableStreamBYOBRequest

ReadableByteStreamController

ReadableStreamDefaultController

TransformStream

TransformStreamDefaultController

WritableStream

WritableStreamDefaultWriter

WritableStreamDefaultController

ByteLengthQueuingStrategy

CountQueuingStrategy

TextEncoderStream

TextDecoderStream

CompressionStream

DecompressionStream

Feature 7: Other Global APIs

The following APIs in the Node v18 upgrade are exposed on the global scope: Blob and BroadcastChannel.

Feature 8: V8 Version 10.1

Node.js runs with the V8 engine from the Chromium open-source browser. This engine has been upgraded to version 10.1, which is part of the recent update in Chromium 101.

New array methods for finding the last element and index of an array. Array methods findLast and findLastIndex are now available.
Internationalization support: Intl.Locale and the Intl.supportedValuesOf functions.
Improving the performance of class fields and private class methods.
The data format of the v8.serialize function has changed (No compatible with earlier versions of Node.js.)

Keep an eye out here.

Feature 9: Toolchain and Compiler Upgrades

Node.js always provides pre-built binaries for various platforms. For every latest release, toolchains are evaluated and elevated whenever required. Node.js provides pre-built binaries for several different platforms. For each major release, the minimum toolchains are assessed and raised where appropriate.

Pre-built binaries for Linux are now built on Red Hat Enterprise Linux (RHEL) 8 and are compatible with Linux distributions based on Glibc 2.28 or later, for example, Debian 10, RHEL 8, Ubuntu 20.04.
Pre-built binaries for macOS now require macOS 10.15 or later.
For AIX, the minimum supported architecture has been raised from Power 7 to Power 8.

Note: Build-time user-land snapshot(Experimental)

Users can build a Node.js binary with a custom V8 startup using the
–-node-snapshot-main flag of the configure script.

Feature 10: HTTP Timeouts

The http.server timeouts have changed:

headersTimeout (the time allowed for an HTTP request header to be parsed) is set to 60000 milliseconds (60 seconds).

requestTimeout (the timeout used for an HTTP request) is set to 300000 milliseconds (5 minutes) by default.

Feature 11: Undici Library in Node.js

Undici is an official Node team library, although it’s more like an HTTP 1.1 full-fledged client designed from the ground up in Node.js.

Keep alive by default.
LIFO scheduling
No pipelining
Unlimited connections
Can follow redirected (opt-in)

Of note, we support and love Lizz‘s work, so we recommend you check out her fantastic talk in Nodeconf.EU about New and Exciting features in Node.js to understand more about this feature.

Other Features/Changes:

The project undoubtedly has some great challenges in the near future to continue growing and maintaining its leading position in the ecosystem. These are some of the upcoming features. Most of them are experimental; without being the only ones to discuss, there is much work and proposals from an active community such as the Node.js Community.

Default DNS resolution
ECMAScript modules improvements
Improved support for AbortController and AbortSignal
Updated Platform Support
Async Hooks
Direct Network Imports
Build-time user-land snapshot
Support for JSON Import Assertions
Unflagging of JSON modules (experimental)
Support for HTTPS and HTTP imports
Diagnostic Channel
Trace Events
WASI

You can check the full changelog here.

Final Remarks

Node.js 12 will go End-of-Life in April 2022.
Node.js 14 (LTS) or Node.js 16 (LTS) or Later Node.js 18 will be LTS.
Node.js 18 will be promoted to Long-term Support (LTS) in October 2022 (NOW).
After being promoted to LTS, Node.js 18 will be supported until April 2025.

Upgrade Now!

Moving to the LTS version is the best decision for you to include the following improvements in your development workflow:

FetchAPI and Web Streams
V8: New advanced features, array methods, improvements, and enhancements.
Test runner without the need for third-party packages.
Deprecated APIs: Check the list here

Enhancement in Intl.Locale API.
Performance improvement in both class fields and private class methods.

Migration

To migrate your version of Node, follow these steps:

For Linux and Mac users, follow these commands to upgrade to the latest version of Node. The module n makes version management easy:

npm install n -g

For the latest stable version:

n stable

For the latest version:

n latest

Windows Users
Visit the Node.js download page to install the new version of Node.js.

Special Thanks

With 99 contributors and 1348 commits Node.js 18 LTS came to life 🎉. Special thanks to @_rafaelgss @BethGriggs_ @_richard_lau_ To make this release happen 💚

$ nvm install 18.12.0

And thank you to all of Node.js project contributors. Our complete admiration and support for such incredible work 💪.

NodeSource Node.js Binary Distributions

NodeSource, from the beginning, was created with a great commitment to the developers’ community, which is why it has provided documentation for using the NodeSource Node.js Binary Distributions via .rpm, .deb as well as their setup and support scripts.

If you are looking for NodeSource’s Enterprise-grade Node.js platform, N|Solid, please visit https://downloads.nodesource.com/, and for detailed information on installing and using N|Solid, please refer to the N|Solid User Guide.

We are also aware that as a start-up, you want ‘Enterprise-grade’ at a startup price, this is why we extend our product to small and medium-sized companies, startups, and non-profit organizations with N|Solid SaaS.

Useful Links / References

You can upgrade to NodeJS v18 using the official download link

New Node.js features bring a global fetch API & test runner. Check out the Node version 16-18 report

Welcome Node.js 18 by RedHat
Announcing a new –experimental-modules

Vite 4.0 released

Posted on by Simon Helberg

#​618 — December 9, 2022

Read on the Web

JavaScript Weekly

Vite 4.0 Released — From the same creator as Vue.js, Vite is an exciting piece of frontend tooling offering lots of goodies out of the box: fast hot module replacement, instant server starts, optimized builds with Rollup, TypeScript and JSX support (more on why to use Vite here). You can even give it a quick spin online via vite.new.

Evan You and Vite Contributors

Anjana Vakil on the JavaScript Fundamentals — This video course covers the core skills needed to become a professional JavaScript programmer, including writing reusable code with functions, conditionals, fetching data from APIs, and more. It’s everything you need to continue your journey to become effective at JavaScript.

Frontend Masters sponsor

npm Gains New Security Features — GitHub continues its work in making the npm ecosystem safer. Two new things: granular access tokens so package owners can better control access to publishing workflows, and a new code explorer to look directly at the contents of packages from the official npm site.

Monish Mohan (GitHub)

Console Ninja: console.log Output Right Next to Your Code — A VS Code extension that displays console.log output and runtime errors next to your code. Jack Herrington recorded ▶️ a neat 6 minute intro showing it off recently.

Wallaby.js Team

IN BRIEF:

There’s a React documentary in production – ▶️ here’s the trailer.

AWS has unveiled Step Functions Distributed Map, a way you can run hugely parallel (up to 10,000 simultaneous executions) operations (written in JavaScript, perhaps) over data and documents stored on S3.

A quick look back 27 years to the launch of JavaScript in 1995.

📊 D3 7.7, the latest version of the popular data visualization framework, is out and I wanted to recommend looking at co-creator Mike Bostock’s notebooks if you want inspiration on using D3, a look at new features, etc. He posts interesting stuff.

The JS debugger in the latest VS Code release now supports console.profile for CPU profiling code, as well as nested sourcemaps.

RELEASES:

Rome 11 – Linter in urbe novissima sunt.

Storybook 7.0 beta 0

Rollup 3.7 – ES module bundler.

xv 2.0 – Zero-config Node test runner.

Nx 15.3 (A huge news update post.)

Ember 4.9

Bun 0.3 – The challenger JS runtime.

📒 Articles & Tutorials

Sandboxing with Partytown — Partytown provides a way to run third party scripts within a Web Worker rather than on the main thread. Could this be used for sandboxing? Weston tried it out and concluded it’s not quite there.

Weston Ruter

Build a Mobile-Responsive Telehealth Pager App Using Stream’s Chat API — Build a responsive chat app with emojis/reactions, built-in GIF support, ability to edit/delete messages, direct & group chat, and more.

Stream sponsor

Is Prisma Better Than Your ‘Traditional’ ORM? — Prisma has become a very popular ORM option in the Node space in recent years. The creator of the Practica Node starter app considers if Prisma makes sense as a universal ‘go to’ ORM. No, but..

Yoni Goldberg

When to Use gRPC vs GraphQL — A balanced comparison of two popular API protocols to see where each works best.

Loren Sands-Ramshaw

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

▶  A Discussion on Optimizing Your JavaScript with Rust — A chat with Vercel’s Lee Robinson at the recent Next.js conference.

Ben Popper podcast

🛠 Code & Tools

Codux: A Visual IDE for React — One of the co-founders of Wix introduces a new standalone tool to accelerate the React development process. It currently only supports Chromium-based browsers but you can take it for a test drive or learn more from its homepage.

Nadav Abrahami (Wix)

Harlem 3.0: Simple Extensible State Management for Vue 3 — Provides a simple functional API for creating, reading, and mutating state.

Andrew Courtice

Open Source Firebase Alternative for Web, Mobile, and Flutter Devs

Appwrite sponsor

JS Image Carver: Content-Aware Image Resizer and Object Remover — Uses the seam carving approach (if you’ve used ‘Content Aware Scale’ in Photoshop, you’ve seen it). The live demo on this one is fun to watch.

Oleksii Trekhleb

Civet: The CoffeeScript of TypeScript? — If you liked CoffeeScript back in the day, here’s the same idea in a modern TypeScript-oriented form.

Daniel Moore

Maska 2.1: Zero-Dependency Input Mask — Happy in vanilla situations, but can also integrate with Vue 2/3. GitHub repo.

Alexander Shabunevich

node-calls-python: Call Python from Node — One use case the author mentions is plugging into Python’s rich ecosystem of machine learning tools.

Menyhért Hegedűs

reduced.to: Open Source URL Shortening App Built with Qwik — The app itself is live at reduced.to but you might find it interesting as an example of a frontend built using the Qwik framework.

Ori Granot

📺 Yesterday, This Dot Media published Qwik’s creator Misko Hevery giving ▶️ a live coding introduction to Qwik – a useful way to get up to speed.

💻 Jobs

Software Engineer — Stimulus is a social platform started by Sticker Mule to show what’s possible if your mission is to increase human happiness. Join our engineering team.

Stimulus

Senior UI Dev — Join us and innovate with MicroFrontends, custom Node tools, build systems (Webpack/Github Actions), TypeScript, React, and more with a11y and DX in mind.

Vertex Inc

Find JavaScript Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

Spacetime 7.3
↳ Lightweight JavaScript timezone library.

Partytown 0.7.3
↳ Run intensive third-party scripts in a worker.

Splitter 1.4
↳ React component for split views.

reveal-md 5.4
↳ Reveal.js presentations from Markdown files.

Mongoose 6.8
↳ MongoDB object modeling library.

React Tooltip 5.0