Bundle-time macros with Bun

#​641 — June 1, 2023

Read on the Web

JavaScript Weekly

JavaScript Macros in Bun — Not content with giving the JavaScript world a brand new bundler, Bun’s Jarred has taken it a bit further: ‘macros’ that run at bundle time with the result being directly inlined into your code. They use stage 3 annotated import statements (so may become regular JS eventually) and Jarred shows off some use cases here.

Jarred Sumner

▶  Discussing the Future of React with Two Core Team Members — As part of the celebrations around React’s 10th birthday, Vercel’s Delba de Oliveira interviewed Andrew Clark and Sebastian Markbåge of the React core team on modern topics including server components, Suspense, Actions, and the next steps React will take.

Delba de Oliveira (Vercel)

URL Validation 101 — with Snyk — Keep script injection and server side request forgery out of your JavaScript applications with Snyk.

Snyk sponsor

Aimless.js: The ‘Missing’ JavaScript Randomness Library — If you’ve been itching for functions to give you random characters, numbers from custom distributions, random sequences, random items, weighted random numbers, or more, this is for you.

Christopher Cavalea

⚡️ IN BRIEF:

???? Two big birthdays in the past week: Node.js turned 14 and React turned 10.

Intel and Google have been working together on the Compute Pressure API which you can use, in origin trial, in Chrome 115. It provides a way to measure the ‘computational strain’ of the system your code is running on to then adjust how your app operates accordingly.

???? Misko Hevery, creator of Angular and now Qwik, was on the Stack Overflow Podcast talking about ▶️ how he’s ‘dehydrating the Web’ in an ongoing quest for higher performance.

‘Deferring Module Evaluation’ is a TC39 proposal for basically being able to lazily load modules which are executed only upon use.

You can now use Node.js built-in modules on Deno Deploy, making it easier to run existing JS apps ‘at the edge’ on their platform.

Tom Preston-Werner, GitHub co-founder and Redwood co-creator, writes about how Redwood is going ‘all in on React Server Components’ and announces the first Redwood conference this September.

SupportsCSS: Feature Detection for Modern CSS — Inspired by Modernizr, this script expands on the capabilities of CSS’s @supports feature by adding classes to your HTML and exposing a results object so you can run custom tests live in the browser.

Stephanie Eckles

????  JSDayIE 2023: The First JavaScript Conference in Ireland Is Back! — Join us on September 26th in Dublin to experience everything the Irish JavaScript community and Ireland have to offer.

JSDayIE sponsor

RELEASES:

Electron 25 – Now offering a Chrome-powered net.fetch (as opposed to Node’s flavor of fetch()).

Neutralinojs 4.12 – Desktop app dev framework.

Parcel 2.9

Bootstrap 5.3.0

node-oracledb 6.0

???? Articles & Tutorials

How to Draw Any Regular Shape with Just One JavaScript Function — Mozilla/MDN has a (relatively) new blog — here they share how to use JavaScript to draw any regular shape to a HTML canvas with a single function, and how to modify it to draw multiple shapes.

Ruth John

Sharing WebSocket Connections between Tabs and Windows — If your users open your app in multiple tabs or windows, being able to share a WebSocket connection could be a lot more efficient both at the client and server end. Is it possible? With SharedWorkers (supported by all major browsers, except Chrome on Android), you can.

Szymon Chmal

▶  How React Works Under The Hood: 2023 Edition — Quite a lot of depth for a mere 13-minutes. Covers React broadly, along with the pros and cons of JSX, how the virtual DOM approach works, plus React’s diffing algorithm.

FrontStart

Connected APM and Infrastructure Monitoring at Up to 1/3rd the Cost of Datadog

New Relic sponsor

Why Does a Farmer Emoji Have a Length of 7 in JS? — This is a nicely accessible introduction to a topic that often causes confusion. Get ready to learn a little about grapheme clusters, scalars, and code units.

Evan Hahn

The Evolution of React APIs and Code Reuse — An exploration of common React patterns, from mixins and higher-order components to render props & hooks.

Rem / Frontend Mastery

▶  ‘I Tried 8 Different Postgres ORMs’ — A modern, fast-paced, and slightly irreverent look at working with Postgres from back-end JavaScript runtimes. (9 minutes.)

Beyond Fireship

Automatically Unsubscribe from RxJS Observables in Angular Components

Rob Bell

Deploying Vanilla Node.js Apps on Fly.io

Sam Ruby (Fly)

Asynchronous JavaScript for Beginners

Daniel Agantem

???? Code & Tools

Svelvet: A Svelte Component Library for Interactive Node-Based Diagrams — You can create flow diagrams using pre-built components with seamless zooming and panning, draggable interactivity, customizable edges/nodes, etc.

Svelvet Team

Inkline 4.0: A Customizable Vue.js 3 UI/UX Library — A design system and numerous customizable components designed for mobile-first (but desktop friendly) and built with accessibility in mind.

Alex Grozav

Handsontable: Data Editor for React — There’s a lot of JS data grids out there, but none quite like Handsontable: Excel-like design, keyboard shortcuts, and React support make it the perfect data editor for web apps.

Handsontable Data Grid sponsor

JECS: An Entity Component System (ECS) for JSEntity component systems are common in game development as they provide a lot of flexibility for managing the many objects present in games.

Stuhl

Color Names: A Gigantic List of Handpicked Color Names — At first, I thought this was just going to be a hundred or so obvious choices like the named colors in HTML (???? rebeccapurple) but it’s actually over 30,000 colors with a fantastic array of names and uses, plus JavaScript functions to work with them.

David Aerne

fastgron: High-Performance JSON to GRON Converter‘gron’ is a transpiled form of JSON into individual assignment operations which makes it easier to grep. (fastgron is itself written in C++.)

Adam Ritter

Orama 1.0.3
↳ In-memory, typo-tolerant, text search engine.

Perspective 2.2
↳ WASM-powered high-perf data visualization component.

Javet 2.2 – Java + V8. Embed JS into Java.

OverlayScrollbars 2.2 – JS custom scrollbar plugin.

html-react-parser 4.0 – HTML to React parser.

Vuetify 3.3.2 – Vue component framework.

React Slider 10.2Demos.

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

????  Live-streaming from JavaScript

JSFiddle: Did You Know You Can Stream on Twitch from JavaScript? — This is an interesting experiment, but I tried it and it worked! Twitch added support for WebRTC ingestion a while ago and this CodePen example ties that together with fewer than 50 lines of JavaScript to send your preferred video source to the popular livestreaming service. It’s hardly OBS, but I imagine someone will rustle up something fancier with this approach in time.

Sean DuBois on JSFiddle

Measure Node.js server response time with N|Solid

As software developers, we constantly face new challenges in an ever-changing ecosystem. However, we must always remember the importance of addressing performance and security concerns, which remain at the top of our priority list.

To ensure that our applications based on Node.js can meet our performance and scalability needs without compromising security or incurring costly infrastructure changes, we must be aware of the importance of network optimization in Node.js.

The Impact of Latency/Ping Time on the Performance and Speed of Your Node.js Application

IMG – Ping Cats – via GIPHY

This communication, known as network ping time or latency, is a crucial factor that impacts the performance and speed of your application. Knowing how to measure network ping time between the browser and the server is essential for developers who want to optimize their applications and provide a better user experience. _Have you ever wondered how long it takes for your application to communicate with the server? _

Network Optimization in Node.js

To ensure the optimal performance and scalability of our Node.js applications, we must accurately measure our HTTP server’s connection and response time. Doing so enables us to identify and address potential bottlenecks without compromising security or incurring unnecessary infrastructure changes.

Before delving deeper into measuring connection and response time, let’s explore fundamental concepts and critical differentiators in the network landscape.

HTTP vs. WebSocket:

HTTP and WebSocket are communication protocols used in web development but serve different purposes. HTTP is a stateless protocol commonly used for client-server communication, while WebSocket enables full-duplex communication between clients and servers, allowing real-time data exchange.

Types of Connections and Versions:

When creating APIs, HTTP as a protocol and standard has different versions, such as HTTP 1.1 and 2.0. Additionally, APIs may use alternative protocols like gRPC, which offer different features and capabilities. Understanding these options empowers developers to choose the most suitable tools for their web servers.

TCP/IP Basics:

The Transmission Control Protocol (TCP) and Internet Protocol (IP) are fundamental protocols that form the backbone of computer networks. Among TCP’s critical processes is the three-way handshake, which plays a vital role in establishing a secure and dependable connection between two endpoints. This handshake ensures the orderly and reliable transmission of data. TLS/SSL encryption enhances security, adding an extra layer of protection to the communication between the client and the server.

HTTP vs. HTTPS:

HTTP operates over plain text, which exposes the data being transmitted to potential eavesdropping and tampering.
HTTPS, on the other hand, secures communication through the use of SSL/TLS encryption, providing confidentiality and integrity.
Understanding the trade-offs between HTTP and HTTPS is crucial to making informed data security decisions.

Building a Solid Foundation: Understanding the Three-Way Handshake for Reliable Connections

To evaluate the performance of our HTTP server, we need to differentiate between connection latency and server response time. Connection latency refers to the time it takes for the initial three-way handshake process to complete before data transmission can occur. On the other hand, server response time measures the duration from when the server receives a request to when it generates and sends the response back to the client.

The three-way handshake is a fundamental process in establishing a TCP (Transmission Control Protocol) connection between a client and a server in a network. It involves three steps, a “three-way handshake.” This handshake establishes a reliable and ordered communication channel between the two endpoints.

Here’s a breakdown of the three steps involved in the three-way handshake:

__SYN (Synchronize)__: The client initiates the connection by sending an SYN packet (synchronize) to the server. This packet contains a randomly generated sequence number to initiate the communication.
__SYN-ACK (Synchronize-Acknowledge)__: Upon receiving the SYN packet, the server acknowledges the request by sending an SYN-ACK packet back to the client. The SYN-ACK packet includes its own randomly generated sequence number and an acknowledgment number equal to the client’s sequence number plus one.
__ACK (Acknowledge)__: Finally, the client sends an ACK packet (acknowledge) to the server, confirming the receipt of the SYN-ACK packet. This packet also contains the acknowledgment number equal to the server’s sequence plus one.

Once this three-way handshake process is completed, the client and the server have agreed upon initial sequence numbers, and a reliable connection is established between them. This connection allows for data transmission with proper sequencing and error detection mechanisms, ensuring that the information sent between the client and server is reliable and accurate.

The three-way handshake is essential to establishing TCP connections and is performed before any data transmission can occur. It plays a critical role in ensuring the integrity and reliability of the communication channel, providing a solid foundation for subsequent data exchange between the client and server.

Create a self-serve diagnostic tool for a server-rendered page in Node.js.

The idea is to share an easy-to-follow recipe that will help you create your tool, so let’s start with the ingredients and end with the steps to create a self-serve diagnostic tool for a server-rendered page in Node.js.

Ingredients:

Node.js & NPM installation – https://nodejs.org/

Fastify.js – https://www.fastify.io/

Instructions:

1. Setup a Node.js Project
Use NPM to create your Node project:

$ mkdir diagnostic-tool-nodejs
$ cd diagnostic-tool-nodejs
$ npm init -y

2. Install your NPM packages.
We have Fastify in our recipe, so we must install them first:

$ npm i fastify

3. Create the index.mjs
Create an index.mjs file in the project’s root directory and paste this fastify HTTP server sample code.

import Fastify from “fastify”;

const fastify = Fastify({
logger: true,
});

// Randomly create a timer from 100ms up to X seconds
function timer(time) {
return new Promise((resolve, reject) => {
const ms = Math.floor(Math.random() * time) + 100;
setTimeout(() => {
resolve(ms);
}, ms);
});
};

// Declare the root route and delay the response randomly
fastify.get(“/”, async function (request, reply) {
const wait = await timer(5000);
return { delayTime: wait };
});

// Run the server!
fastify.listen({ port: 3000 }, function (err, address) {
if (err) {
fastify.log.error(err);
process.exit(1);
}
});

This will start the server on port 3000, which you can access by going to http://localhost:3000 in your web browser.

Integrate with N|Solid Console

Be sure you already have N|Solid installed and running on your environment; otherwise, go to https://downloads.nodesource.com and get the installer.

Also, run the console using docker as an alternative to the local installation.

docker run -d -p 6753:6753 -p 9001:9001 -p 9002:9002 -p 9003:9003 nodesource/nsolid-console:hydrogen-alpine-latest

With the application already initialized with npm, Fastify installed, and our index.js in place, we can connect our process with N|Solid

Run the HTTP server with the NSOLID RUNTIME following the instructions on the principal console page.

IMG – Connect N|Solid

In this case, we ran the process by passing the config via environment variables and running a local installation of the Nsolid console.

NSOLID_APPNAME=”NSOLID_RESPONSE_TIME_APP” NSOLID_COMMAND=”127.0.0.1:9001″ nsolid index.mjs

If you instead use our SaaS console, you need to use the NSOLID_SAAS env instead of __NSOLID_COMMAND__.

NSOLID_APPNAME=”NSOLID_RESPONSE_TIME_APP” NSOLID_COMMAND=”XYZ.prod.proxy.saas.nodesource.io:9001″ nsolid index.mjs

After completing those steps, you should be able to watch the app and process connected to the console.

IMG – Connect N|Solid Process

GIF 1 – Connect N|Solid Process

Go to the application process and add the HTTP(S) Server 99th Percentile Duration metric to see in near-real time the HTTP server latency response time and also we have the HTTP(S) Request Median Duration.

GIF 2 – Monitor Process Metrics

After this, we should be able to generate some traffic and see how the response times behave with the sample code provided, generating some response time randomness from 100ms up to 5 secs.

To generate the traffic, we can use autocannon

npx autocannon -d 120 -R 60 localhost:3000

After running autocannon for some minutes, we can see the P99 metric of the HTTP Server. The median and compare them.

IMG – http-latency-response-time-metrics

IMG – http-request-median-duration

IMG – p99-metric

To fully utilize the metrics provided by N|Solid, it is crucial to have a comprehensive understanding of their significance. Two critical metrics offered by N|Solid are the 99th Percentile and the HTTP Median metric. These metrics play a vital role in assessing the performance of Node.js applications in production environments. By getting deeper into their practical application and importance, we can unlock the actual value of these metrics in N|Solid and make informed decisions to optimize our production systems. Let’s explore this further.

The 99th Percentile metric

The 99th percentile is a statistical measure commonly used to analyze and understand response time or latency in a system.

Imagine you have a web application that handles incoming requests. To understand how fast the server responds, you measure the time it takes for each request and gather that data. You can find the 99th percentile response time by looking at the data.

For example, __the 99th percentile response time is 500 milliseconds__.
This means that only 1% of the requests took longer than 500 milliseconds to get a response. In simpler terms, 99% of the requests were handled in 500 milliseconds or less, which is fast.

It helps you identify and address any outliers or performance bottlenecks affecting a small fraction of requests but can significantly impact the user experience or system stability. Monitoring the 99th percentile response time helps you spot any slow requests or performance issues that might affect a few users but still need attention. but can have a significant impact on user experience or system stability.

The HTTP median metric

When sorted in ascending or descending order, the median represents a dataset’s middle value.

To illustrate the difference between the 99th percentile and the median, let’s consider an example. Suppose you have a dataset of response times for a web application consisting of 10 values:
[100ms, 150ms, 200ms, 250ms, __500ms__, 600ms, 700ms, 800ms, 900ms, 1000ms].

The median response time would be the middle value when the dataset is sorted, which is the 5th value, 500ms. This means that 50% of the requests had a response time faster than 500ms, and the other 50% had a response time slower than 500ms.

Connect with NodeSource

If you have any questions, please contact us at [email protected] or through this form.

Experience the Benefits of N|Solid’s Integrated Features
Sign up for a Free Trial Today

To get the best out of Node.js and experience the benefits of its integrated features, including OpenTelemetry support, SBOM integration, and machine learning capabilities. Sign up for a free trial and see how N|Solid can help you achieve your development and operations goals. #KnowyourNode

Microsoft shrunk the TypeScript

#​640 — May 25, 2023

Read on the Web

JavaScript Weekly

DeviceScript: TypeScript for Tiny Thingamabobs — DeviceScript is a new Microsoft effort to take the TypeScript experience to low-resource microcontroller-based devices. It’s compiled to a custom VM bytecode which can run in such constrained environments. (A bit like Go’s TinyGo.) It’s aimed at VS Code users but there’s a CLI option too.

Microsoft

The State of Node.js Performance in 2023 — Node 20 gets put through its paces against 18.16 and 16.20 with a few different benchmark suites running on an EC2 instance. It goes into a lot of depth that’s worth checking out, but if you haven’t got time, the conclusion is “Node 20 is faster.” Good.

Rafael Gonzaga

Lightning Fast JavaScript Data Grid Widget — Try a professional JS data grid component which lets you edit, sort, group and filter datasets with fantastic UX & performance. Includes a TreeGrid, API docs and lots of demos. Seamlessly integrates with React, Angular & Vue apps.

Bryntum Grid sponsor

Deno 1.34: Now deno compile Supports npm PackagesDeno isn’t Node, but it increasingly likes to wear a Node-shaped costume. This release focuses on npm and Node compatibility and Deno’s compile command (for turning projects into single binary executables) now supports npm packages too which opens up a lot of use cases.

The Deno Team

⚡️ IN BRIEF:

TC39’s Hemanth.HM shares some updates from TC39’s 96th meeting. Atomics.waitAsync, the /v flag for regexes, and a method to detect well formatted Unicode strings all move up to stage 4.

The Angular team shares the results of their annual developer survey. Over 12,000 Angular developers responded.

RELEASES:

Astro 2.5

Preact 10.15 – Fast 3KB React alternative.

TypeScript 5.1 RC

Electron 24.4

MapLibre GL JS v3 – WebGL-powered vector tile maps.

???? Articles & Tutorials

Demystifying Tupper’s FormulaTupper’s self-referential formula is a formula that, when plotted, can represent itself. Confused? Luckily Eli shows us how simple the concept is and how to use JavaScript to render your own.

Eli Bendersky

An Introduction to Web Components — A practical and straightforward introduction to using the custom element API now supported in all major browsers to create a basic tabbed panel.

Mohamed Rasvi

▶  Creative Coding with p5.js in Visual Studio Codep5.js is a ‘creative coding’ library that takes a lot of inspiration from Processing. Dan does a great job at showing it off and sharing his enthusiasm for it. The main content starts at about 8-minutes in.

Daniel Shiffman and Olivia Guzzardo

Auth. Built for Devs, by Devs — Easily add login, registration, SSO, MFA, user controls and more auth features to your app in any framework.

FusionAuth sponsor

▶  Why React is Here to Stay — A rebuttal of sorts to Adam Elmore’s video from two weeks ago: ▶️ I’m Done with React.

Joscha Neske

Comparing Three Ways of Processing Arrays Non-Destructively — for-of, .reduce(), and .flatMap() go up against each other.

Dr. Axel Rauschmayer

Build Your First JavaScript ChatGPT Plugin — Plugins provide a way to extend ChatGPT’s functionality.

Mark O’Neill

How I’ve Shifted My Angular App to a Standalone Components Approach

Kamil Konopka

???? Code & Tools

Javy 1.0: A JS to WebAssembly Toolchain — Originally built at Shopify, Java takes your JS code and runs it in a WASM-embedded runtime. It’s worth scanning the example to get a feel for the process. “We’re confident that the Javy CLI is in good enough shape for general use so we’re releasing it as v1.0.0.”

Bytecode Alliance

Inkline 4.0: A Customizable Vue.js 3 UI/UX Library — A design system and numerous customizable components designed for mobile-first (but desktop friendly) and built with accessibility in mind.

Alex Grozav

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

BlockNote: A ‘Notion-Like’ Block-Based Text Editor — Flexible and presents an extensive API so you can integrate it with whatever you want to do. You can drag and drop blocks, add real-time collaboration, add customizable ‘slash command’ menus, and more. Builds on top of ProseMirror and TipTap.

TypeCell

Windstatic: A Set of 170+ Components and Layouts Made with Tailwind and Alpine.js — Categorized under page sections, nav, and forms, and each category includes multiple components you can drop into projects.

Michael Andreuzza

ls-lint 2.0: A Fast File and Directory Name Linter — Written in Go but aimed at JS/front-end dev use cases, ls-lint provides a way to enforce rules for file naming and directory structures.

Lucas Löffel

Jest Puppeteer 9.0: Run Tests using Jest and Puppeteer — A Jest preset enabling end-to-end testing with Puppeteer.

Argos CI

ts-sql-query: Type-Safe SQL Query Builder — Want to build dynamic SQL queries in a type-safe way with TypeScript verifying queries? This is for you. Supports numerous SQL-based database systems and isn’t an ORM itself.

Juan Luis Paz Rojas

React Authentication, Simplified

Userfront sponsor

Hashids.js 2.3
↳ Generate YouTube-like IDs.

Tabulator 5.5
↳ Interactive table and data grid control.

gridstack.js 8.2
↳ Dashboard layout and creation library.

Cypress GitHub Action 5.8
↳ Action for running Cypress end-to-end tests.

ReacType 16.0
↳ Visual prototyping tool that exports React code.

Mongoose 7.2 – MongoDB modelling library.

Eta (η) 2.2 – Embedded JS template engine.

AVA 5.3 – Popular Node test runner.

MelonJS 15.3 – HTML5 game engine.

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

???? Node.js developer? Check out the latest issue of Node Weekly, our sibling newsletter about all things Node.js — from tutorials and screencasts to news and releases. While we include some Node related items here in JavaScript Weekly, we save most of it for there.

→ Check out Node Weekly here.

jQuery lives on; major changes teased

#​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 ReactAnother 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

Why Svelte is converting TypeScript to JSDoc

#​638 — May 11, 2023

Read on the Web

JavaScript Weekly

The JavaScript Ecosystem is Delightfully Weird — There are plenty of examples of how JavaScript is weird but Sam focuses on the why. If you’ve been a JS developer for many years you’ll have seen it go through many phases and morph to fit its environment. Sam paints the big picture, concluding with a talk Dan Abramov gave yesterday called “React from Another Dimension.”

Sam Ruby

The New JS Features Coming in ECMAScript 2023 — The next JavaScript update brings smaller additions familiar from other languages, but there are more significant developments waiting in the wings. 

Mary Branscombe (The New Stack)

Full Stack for Front-End Engineers with Jem Young (Netflix) — Learn what it means to become a well-rounded full-stack engineer with this hands-on video course. You’ll dive into servers, work with the command line, understand networking and security, set up continuous integration and deployment, manage databases, build containers, and more.

Frontend Masters sponsor

Vue 3.3 ‘Rurouni Kenshin’ Released — Named after a popular manga series, the latest release of Vue is focused on developer experience improvements, particular for those using TypeScript.

Evan You

John Komarnicki says ▶️ Vue 3.3’s defineModel macro will change the way you write your components.

Next.js 13.4 Released — Despite the minor version bump, this is a big release for the popular React framework. The new app router and its improved approach to filesystem based routing is now offered as a stable feature, with a new concept of server actions being introduced in alpha as a way to mutate data on the server without needing to create an in-between API layer.

Tim Neutkens and Sebastian Markbåge

⚡️ IN BRIEF:

???? Svelte is converting from TypeScript to JSDoc (example).. sort of. Rich Harris popped up on Hacker News to provide some all important context but the ultimate result will be smaller package sizes and a better experience for Svelte’s maintainers.

React now has official ‘canary’ releases if you want to use newer features than in the stable releases but still be on an officially supported channel.

Newly released Firefox 113 lets you override JS files in its debugger.

No stranger to controversy, Ruby on Rails’s David Heinemeier Hansson (DHH) tweeted: ???? “TypeScript sucked out much of the joy I had writing JavaScript.”

RELEASES:

Glint 1.0 – TypeScript powered tooling for Glimmer / Ember templates.

Elementary 2.0 – JS/C++ library for building audio apps.

???? Articles & Tutorials

ES2023’s New Array Copying Methods — The newest ECMAScript spec introduces some new methods on Array that you’ll eventually find useful in your own programs. Phil gives us the tour.

Phil Nash

Private Class Fields Considered Harmful“As a library author, I’ve decided to avoid private class fields from now on and gradually refactor them out of my existing libraries.” Why? Well, that’s the interesting part..

Lea Verou

▶  I’m Done with React — Going from least-to-most important, the reasons this developer isn’t choosing React for future projects make for interesting watching, particularly if you too are overwhelmed by upheaval in the React world. Solid is one of the alternatives he has warmed to.

Adam Elmore

Constraining Language Runtimes with Deterministic Execution — Explore various challenges encountered while using different language runtimes to execute workflow code deterministically.

Temporal Technologies sponsor

Running JavaScript in Rust with Deno — Deno’s use of Rust makes it a natural choice if you’re building a Rust app and want to integrate a JavaScript engine.

Austin Poor

Regular Expressions in JavaScript — Powerful but often misunderstood, many will benefit from this roundup of the potential regexes offer to JavaScript developers.

Adebayo Adams

How to Measure Page Loading Time with the Performance API — The Performance API is a group of standards used to measure the performance of webapps supported in most modern browsers.

Silvestar Bistrović

How to Build a JS VST or Audio Unit Plugin on macOS — VSTs and Audio Units are both types of audio plugins for audio editing software and they’re usually built in C or C++. This tutorial doesn’t dig into the audio side of things, but more the practicalities of packaging things up to get started.

Chris Mendez

An Introduction to the Bun Runtime — If you’ve not yet played with the newest entrant into the JS runtime space, this is a high level overview.

Craig Buckler

2023 State of the Java Ecosystem

New Relic sponsor

Configuring ESLint, Prettier, and TypeScript Together

Josh Goldberg

DestroyRef: Your New Angular 16 Friend

Ion Prodan

Why Astro is My Favorite Framework

Ryan Trimble

???? Code & Tools

file-type 18.4: Detect the File Type of a Buffer, Uint8Array or ArrayBuffer — For example, give it the raw data from a PNG file, and it’ll tell you it’s a PNG file. Uses magic numbers so is targeted solely at non text-based formats.

Sindre Sorhus

Learn How the Rising Trend of Malicious Packages Can Affect Your Apps — Keep your applications secure with Snyk’s article on the increasing number of malicious OS packages and ways to mitigate these risks.

Snyk sponsor

Livefir: Build Reactive HTML Apps with Go and Alpine.js — Go isn’t a language that often pops up in the context of the frontend, but this is a neat integration between Go on the backend and Alpine.js up front.

Adnaan Badr

JZZ.js: A Developer Friendly MIDI library — For both browsers and Node, JZZ.js provides an abstraction over working with MIDI related concepts. There are many examples, but the easter egg in the top left is our favorite.

Sema / Jazz-Soft

htmlparser2 9.0: A ‘Fast and Forgiving’ HTML and XML Parser — Consumes documents and calls callbacks, but it can generate a DOM as well. Works in both Node and browser.

Felix Böhm

cRonstrue: Library to Convert cron Expressions into Human-Readable Form — Given something like */5 * * * *, it’ll return “Every 5 minutes”. No dependencies.

Brady Holt

Knip: Find Unused Files, Dependencies and Exports in TypeScript Projects — Being Dutch for “snip” is appropriate as Knip can trim away things that aren’t being used in your project.

Lars Kappert

jsPlumb 6.1
↳ Visual connectivity for webapps.

gridstack.js 8.1
↳ Build interactive dashboards quickly.

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

Team Lead Web Development — Experienced with Node, React, and TS? Join us and lead a motivated team of devs and help grow and shape the future of our web app focused on helping millions explore the outdoors.

Komoot

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

???? Don’t tell Satya Nadella..

Fake Windows 11 in Svelte — This is a cute little side project, and the code is available too. The most common complaint I’ve seen is that it’s actually more responsive than the real Windows.. ???? Be sure to check out both ‘VS Code’ and ‘Microsoft Edge’ in this environment.

Yashash Pugalia

???? Prefer Windows XP? Maybe RebornXP is more for you. Complete with the classic starting up sound!

‘It’s a miracle anything about this ecosystem works at all.’

#​637 — May 4, 2023

Read on the Web

Psst.. if you’re wondering about the context of today’s subject line, see the first ⚡️ In Brief.

JavaScript™ Weekly

Angular v16 Released — With the “biggest release since the initial rollout of Angular”, v16 of the extensive framework introduces a preview of a new signals-based reactivity model (a.k.a. Angular Signals), RxJS interop, improved SSR and hydration, experimental esbuild support, Jest unit testing, and more.

Minko Gechev

???? See the end of this issue where Minko makes the case for Angular in 2023.

Qwik Reaches v1.0 — In “other big JS frameworks that aren’t React” news, Qwik has hit a major milestone too. Qwik’s selling point remains performance through serving up as little code as needed on initial page load. “Think of it as streaming for your JavaScript,” they say. Nonetheless, you get the JSX, directory-based routing, and middleware options you may be familiar with.

Qwik Team

Bring Your Team from Zero to 100 Deploys a Day — Curious about how companies such as Atlassian, Google, and Netflix deploy hundreds of times a day? What strategies do they use to achieve efficiency? This guide provides you with tips and tricks on how these companies scaled their deployments so that you can do the same.

Sleuth sponsor

????????  The German Government Invests in JavaScript — Sort of. Germany’s Sovereign Tech Fund has made a big investment in the OpenJS Foundation, a Linux Foundation project that supports the JS ecosystem and hosts projects including Electron, jQuery, Node.js, Node-RED, and webpack.

Robin Ginn (OpenJS Foundation)

⚡️ IN BRIEF:

Mark Erikson (Redux) wrote a Twitter thread about ???? things he has to keep in mind when publishing a library in 2023 – it’s a lot. He summarized: “It’s a miracle anything about this ecosystem works at all.”

We plan to write about this in a future issue, but Deno KV is a new in beta key value store now baked into both the Deno runtime (as of Deno 1.33) and available in the cloud.

The latest VS Code release is out, with improvements to the terminal, new default dark and light color themes, support for profile templates, a built-in color picker, and support for strict nulls for JavaScript in HTML script blocks.

A roundup of what’s new in the Svelte world.

Node.js can now run on every major browser engine as WebContainers now run on Safari, iOS and iPadOS, as well as Chrome and Firefox. Live demo.

Chrome is to replace the ???? icon in the location bar with a vaguer ‘tune’ icon.

Popular app hosting platform Vercel has added three new first-class storage options for files, Postgres databases, and Redis-like key/value stores.

RELEASES:

Capacitor 5.0 – Build cross-platform native PWAs.

Node.js v20.1.0 (Current)

pnpm 8.4 – Efficient package manager.

React Native macOS 0.71

Electron 24.2

???? Articles & Tutorials

A Practical Guide to Not Blocking the Event Loop — Engines typically run JavaScript in a single thread with an event loop. However, the nature of mixing synchronous and asynchronous tasks, along with the increasing popularity of workers for running code on separate threads, makes the landscape harder to navigate than it used to be.

Slava Knyazev

The Interactive Guide to Rendering in React — An interactive, illustrated guide exploring why, when and how React renders, complete with a series of well thought out animations.

Tyler McGinnis

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log, supports Vitest, jest, karma, jasmine, and more.

Wallaby.js sponsor

The const ‘Deception’ — If the exact role of const has confused you in the past, this will be a handy primer that digs into the distinction between “assignment” and “mutation” in JavaScript.

Josh W Comeau

Write Better CSS by Borrowing Ideas from JS? — A curious look at taking best practices from the JavaScript space for writing better CSS.

Yaphi Berhanu

Crafting the Next.js Website — The official Next.js site is impressive, but what went into it? One of the designers shares some of the implementation details which aren’t particularly React-y but may prove inspiring to you.

Rauno Freiberg

Exposing a Rust Library to Node with NAPI-RS

John Murray

???? Code & Tools

date-fns 2.30: A Modern Date Utility Library — It’s been a couple of years since we linked to this “lodash for dates” that’s packed with over 200 date and time manipulation functions, but it continues to get updates and a v3 is on the way. GitHub repo.

Sasha Koss

Chart.js 4.3: Canvas-Based Charts for the Web — One of those libraries that feels like it’s been there forever but still looks fresh and continues to get good updates. Bar, line, area, bubble, pie, fonut, scatter, and radar charts are all a piece of cake to render. Samples and GitHub repo.

Chart.js Contributors

Beautiful Security and License Compliance Reports for Your App’s Dependencies — Free & Open Source: Try the Better NPM Audit for Your App Now.

Sandworm․dev sponsor

Axios 1.4: Promise-Based HTTP Client for Browser and Node — A long standing project and still getting frequent updates despite rapidly being seen as the ‘jQuery of HTTP request libraries.’ If you need it, you’ll know.

Matt Zabriskie

Marked.js 5.0: A Fast Markdown Parser and Compiler — A low-level Markdown compiler built for speed and available as a client-side library, server-side library, and even a CLI. v5.0 deprecates some options in favor of using external plugins. Here’s a live demo.

Christopher Jeffrey

Mock Service Worker 1.2: REST/GraphQL API Mocking Library — Intercepts requests which you can then mock. Capture outgoing requests using an Express-like routing syntax, complete with parameters, wildcards, and regexes. GitHub repo.

Artem Zakharchenko

The Fastest JavaScript Data Grid Component

Bryntum Grid sponsor

Pretty TypeScript Errors: Make Errors Prettier and Human-Readable in VS Code

Yoav Balasiano

next-sitemap: Sitemap Generator for Next.js Apps

Vishnu Sankar

???? Jobs

Team Lead Web Development — Experienced with Node, React, and TS? Join us and lead a motivated team of devs and help grow and shape the future of our web app focused on helping millions explore the outdoors.

Komoot

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.

QUICK RELEASES:

Tremor 2.4 – React library to build dashboards.

oclif 3.9 – Node.js CLI app framework.

github-script 2.1 – GitHub Actions workflows in JS.

Highlight.js 11.8 – Syntax highlighter.

Plotly.js 2.22 – Data visualization library.

ngx-stripe 16.0 – Angular wrapper for Stripe Elements.

???? A quick word from Angular’s Minko Gechev

When Minko reached out to remind us of the Angular v16 launch, we decided we’d remind him that most JavaScript Weekly readers aren’t using Angular (sorry Minko!) but to ask if he’d like to make the case as to why JavaScript developers shouldn’t sleep on Angular in 2023. Here’s what he had to say:

The problem in the JavaScript ecosystem we’re solving with Angular is to provide a reliable, integrated solution that gives you all the core libraries and tools you need to focus on building apps, rather than fixing incompatible dependencies/API changes, etc. I understand that’s what most technologies claim, the difference with Angular is that:

We’re testing all core modules such as framework, router, forms, etc. on over 4,000 Google projects on every commit to guarantee stability and integration.
We’re sharing updates in a predictable release schedule (twice a year) where we evolve everyone via the same mechanism we use to keep every project at Google to the HEAD commit on the main branch on GitHub. It’s integrated as part of the ng update command of the CLI.

With the recent updates we’ve been:

Catching up with some of the use cases we were missing.
Advancing the performance and developer experience, while setting the foundation for more advancements throughout 2023 and 2024.

On the second point, we’re expecting lots of more improvements in reactivity and SSR in the next 12 months.

So there you have it.

Did you know JavaScript is trademarked?

#​636 — April 27, 2023

Read on the Web

JavaScript™ Weekly

Babylon.js 6.0: The Powerful Web-Based 3D Framework — Babylon.js remains one of the world’s leading WebGL-based graphics engines with a visual scene builder and best-in-class physically-based rendering. v6.0 includes a new physics plugin with plenty of docs and demos, fluid rendering, major improvements to how reflections are handled, screen reader support, and more. This is a huge release of a significant project in the JavaScript ecosystem and we can’t do it justice here but there’s even more on the official homepage.

Babylon.js

Handsontable 12.3: What’s New in the Excel-Like Data Grid — Released recently, the popular data editor brings improved support for React 18 and large data sets. But that’s not all – the team behind Handsontable has shared some cool insights about it in a new article. Check it out to learn more.

Handsontable sponsor

????  Oracle’s Lawyers Stir Over JavaScript™ Trademark Use — Last year, we put out a call for anyone who knows Larry Ellison to pass on the word when Ryan Dahl asked Oracle to release the JavaScript trademark, but it appears little has changed with Oracle’s lawyers taking a dim view of a new British company called “Rust for JavaScript Developers Ltd.”

Sid Chatterjee on Twitter

Trivia: This trademark issue is why the standardized form of JS is called ECMAScript.

IN BRIEF:

???? Turns out even Nintendo uses JavaScript. A developer discovered that 2015’s Mario vs. Donkey Kong: Tipping Stars for the Wii U and 3DS was written with HTML and JavaScript under the hood and managed to build a shim to get it running in a normal browser.

Chrome 113’s DevTools will allow you to override network response headers, including CORS headers. It also offers Nuxt, Vite, and Rollup debugging improvements.

???? “Switching to rspack from webpack+babel has reduced our build times by 85%.”

We covered Node.js 20’s release last week, but if you want to dig deeper into the new (experimental) permissions model, here are the full docs.

In a recent bug report on the React repo Dan Abramov noted that if you use Preact Signals with React, you forfeit any guarantee that React will work correctly and that “if React was a piece of hardware, this is exactly the kind of thing that voids the warranty.”

A sneak peek of what’s coming up in Angular 16.

RELEASES:

NodeBB 3.0
↳ JS powered forum system.

Ink 4.2
↳ Build CLI apps React-style.

Rspack 0.1.9
↳ Fast Rust-based web bundler.

create-svelte 4.0
↳ CLI for creating SvelteKit projects.

???? Articles & Tutorials

Exploring the Potential of Web Workers for Multithreading on the Web — Looks at the importance of Web Workers for multithreading in the browser, including the limitations and considerations of using them and the strategies for mitigating potential issues associated with them.

Sarah Oke Okolo

???? Partytown is worth considering if you’d like to run potentially resource intensive third-party scripts in Web Workers.

Dissecting npm Malware: Five Packages and Their ‘Evil’ Install Scripts — npm related security continues to be a big topic and a common security vector is the install script that’s run when you install a package.

Gabi Dobocan (Sandworm)

Automate Visual Tests with Chromatic—Powered by Storybook — Verify visual changes and component logic on each commit. Get started with a $500 credit using code JSWEEKLY.

Chromatic sponsor

Use Fuse.js for Quick and Easy Fuzzy SearchingFuse.js is a zero-dependency fuzzy search library you can use to offer search features in the browser without a dedicated search-oriented backend.

Doug Shipp

Modern Alternatives to Create React App — create-react-app was the ‘go to’ for building single-page React apps, but this article touches on the wide variety of alternatives now in common use. (We’re on team Vite!)

Ayooluwa Aduwo

▶  Hot Takes on the Web — The creator of Svelte shares his thoughts on various frontend trends.

Rich Harris

How to Display a View Counter on Your Blog with React Server Components

Sebastien Castiel

???? Code & Tools

Vuetify 3.2: A Material Design Framework for Vue.js — If you’re building a Vue.js app and would rather hand off the main design decisions to someone else, yet still have a beautifully designed app, this is the component framework for you. GitHub repo.

Vuetify Team

“Super stoked for all the features coming out in v3.2 today but the one that stands out most is the global defaults improvements. It makes virtual components super powerful.”

___
John Leider, creator of Vuetify

TestGPT | Generating Meaningful Tests for Busy Devs — Get non-trivial tests suggested right inside your IDE, so you can code smart, and stay confident when you push.

CodiumAI sponsor

Memize 2.0: Unabashedly-Barebones Memoization Library — The goal here is speed, and it claims to be the fastest option. It clocks in at just 0.3KB minified, too – unsurprising, since the implementation is very straightforward.

Andrew Duthie

w2ui 2.0: A Framework Agnostic UI Library — Somehow we’d never encountered this before, but w2ui is a interesting, compact suite of common components including a grid, toolbar, tabs, and sidebar, that work with vanilla JS projects or those built with Angular, React, etc. Demos here.

Vitali Malinouski

Alfaaz: The Fastest Multilingual Word Counter — We’ll take their.. word for it ???? but at almost 1 gigabyte per second and support for CJK texts and Arabic and Urdu alphabets, there’s a lot on offer here.

Abdullah Atta

Satori: Convert HTML and CSS to SVG — Designed to be used with React and JSX. It doesn’t support all HTML but is designed to provide a familiar way to generate images from code.

Vercel

Add a Full-Featured Notification Center to Your App in Minutes

Courier sponsor

Linker.js: Access C, C++, Rust and Go Libraries from Node.js — A dynamic C-shared library linker that provides an interface for accessing any C-shared libraries (which all of C, C++, Rust and Go can produce). Linux only for now.

Bitair

Editable: An Extensible Rich Text Editor Framework — Currently depends on React, with future plans for a plain JavaScript version. Its primary feature is that it avoids using the contenteditable attribute for better interoperability. Try it in this playground.

Editable

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

QUICK RELEASES:

StatiCrypt 3.3
↳ Password protect a static HTML page.

tween.js 20.0
↳ JavaScript/TypeScript animation engine.

supercluster 8.0
↳ Geospatial point clustering library for browsers & Node.

Mercurius 13.0
↳ Implement GraphQL servers with Fastify.

htmx 1.9.1

Playwright 1.33

NodeForest Status Report – Earth Day Project

In an effort to mitigate our environmental impact and increase awareness among Nodesourcers, NodeSource collaborated with Pal/Projectability to conduct a tree-planting activity in 2022. The initiative was a resounding success, resulting in the planting of a forest called __NodeForest__, which exceeded the original target by 52%.

Read the previous blog-post here ???????? https://nodesource.com/blog/Nodeforest-experience

Ensuring the sustainability of the plantation is a critical aspect of this project. As such, one year after the tree-planting activity was conducted, this report serves to provide a follow-up on the growth of the trees and ensure that they are thriving under optimal conditions.

How are the status of #NodeForest today?

The maintenance of the newly planted trees has been managed by the village aqueduct __AVEZA__, who owns the conservation lands where the trees were planted. We are pleased to report that all trees have been growing in healthy conditions, as verified on-site. These trees represent an important step towards environmental sustainability, and we are committed to ensuring their continued growth and health.

Img 1 – NodeForest

Note: The images are obtained from the rural community that lives in the area.

The Incredible Impact of our Tree Planting Program ‘NodeForest’

During the first year of planting, the estimated impacts are significant.

Img 2 – Individuals In Flowering Stage

Firstly, each tree has the potential to absorb between 16 to 24 kg of carbon dioxide per year, resulting in an average capture of 3 to 4 tons of CO2 during the first year.
Secondly, each tree can provide habitat for around 7 to 10 different species, benefiting more than 1,200 fauna individuals in the area and promoting biodiversity.
Thirdly, trees can prevent erosion by fixing 30% of the runoff water and retain approximately 130 liters of water per year, contributing to the retention of more than 20,000 liters of water annually.

Additionally, the planting will enhance the visual landscape and microclimate of the area and lastly, the planting will have a positive social impact, directly contributing to the production of water for the village aqueduct serving more than 816 families in the region.

Moreover, this initiative create environmental awareness among our NodeSourcers ????.

To locate the planting location, please follow this link: https://goo.gl/maps/8BgLkKpUcg3JHibS7.

Growing a Green Culture: Our Company’s commitment to NodeForest

In NodeSource, we are committed to promoting an environmental culture among our stakeholders that is focused on conserving the planet for current and future generations.

To further promote our organizational environmental culture, we have planned a variety of activities. These include:

Intensifying our tree planting efforts.
Organizing river and stream cleaning days.

Additionally, we have established policies to compensate for our environmental impact, such as the comparison of carbon credits to support specific projects. We are dedicated to making a positive impact on the environment and are continually seeking ways to improve our efforts.

Making Every Day Earth Day – N|Solid

The use of technology has significantly increased the amount of data that is produced and stored. This has led to an increase in energy consumption and a larger carbon footprint.

However, there are solutions available that can help reduce this overhead. A more sustainable future begins with more efficient software; N|Solid is one such solution that enables efficient applications, which in turn reduces energy consumption and lowers costs. By consuming less cloud resources, businesses can help decrease their digital footprint, contributing towards a more sustainable future.

It’s important to note that every effort counts towards this cause , and small changes can make a big difference. #InvestInOurPlanet @Earthday

NodeForest by NodeSource

If you felt inspired by this #NodeForest story. We invite you to create an N|Solid account and helping us to create a forest that will further mitigate the environmental impact of using the Internet and its servers. Remember that with N|Solid, you can observe and have control of your processes to produce more efficient software.

Just give us the green light here, and we’ll plant a tree in your name. ???? ???? #NodeForest by NodeSource

Suggested Resources for ‘EarthDay’

Earth Observatory by NASA – https://earthobservatory.nasa.gov/

Celebrate Earth Day, Digital skills by Google: https://applieddigitalskills.withgoogle.com/c/en/earth-day

Strengthening Node.js Security: NodeSource-GitHub Partnership

Strengthening Node.js Security: NodeSource and GitHub Partner to Boost Security for Software Developers

The NodeSource-GitHub partnership is a game-changer for developers seeking to build secure applications directly integrating NCM’s (Node Certified Modules) powerful security features into their GitHub Actions workflow. With our NCM GitHub App developers can easily add NCM to their repositories, configure organization-wide rules for vulnerability scanning and approval processes, and receive real-time reports on vulnerabilities in pull requests and deployment workflows that target a GitHub environment.

NCM is a core feature of N|Solid, providing enhanced security for Node.js applications in production environments. We help organizations & developers use Node to its fullest through __N|Solid__, the world’s best Node.js observability and security tool built on top of the Node.js runtime. It provides a secure environment for running Node.js applications and advanced features such as worker threads monitoring, memory leak detection, and CPU profiling.

This new integration with GitHub Actions Deployment Protection Rules streamlines managing open-source Node packages, ensuring compliance with licensing requirements, and helps developers proactively identify and mitigate security risks before they deploy their Node.js applications using GitHub Actions Workflows. It adds a valuable layer of security to the development and deployment workflows, enabling developers to identify and fix vulnerabilities before they become major security breaches, ultimately safeguarding Node.js applications and protecting critical data.

Simplifying Vulnerability Management for Open-Source Dependencies

Node.js applications and services rely heavily on open-source Node packages for their source code. Unfortunately, many of these packages have publicly disclosed vulnerabilities, often ignored or overlooked by developers. This can leave applications vulnerable to malicious code execution and secret leaks, potentially resulting in significant security breaches.

To mitigate this risk, developers must be vigilant when selecting and using Node packages in their projects and take prompt action when vulnerabilities are discovered. This requires staying informed about potential security issues and planning to address them.

NCM integration with GitHub Actions Deployment Protection Rules simplifies managing open-source Node packages. Users can add the NCM GitHub App to their repositories via the GitHub Marketplace and check NCM results in the Accounts Portal for every action, such as Pull Requests or Deployments.

With this integration, devs can:

Set up repositories to use the NCM GitHub App by searching and adding it via the GitHub Marketplace or using a direct link from the NodeSource Accounts Portal.

Check the NodeSource Accounts Portal for NCM results related to actions such as Pull Requests or Deployments configured in GitHub repositories.

NCM analyzes and approves or rejects every deployment flow based on organization-configured rules, ensuring secure project deployments.

Receive detailed reports attached to every Pull Request and deployment in configured repositories, indicating NCM’s findings with green or red status markers, helping users make informed security decisions.

Now, with the integration of NCM (Node Certified Modules) directly into N|Solid Console and through the __GitHub Marketplace__, users can access even more powerful toolsets for managing their Node.js applications. This integration streamlines managing open-source Node packages, allowing users to easily track and monitor package dependencies, scan for vulnerabilities, and ensure compliance with licensing requirements.

By leveraging the power of NCM within N|Solid Console and the GitHub Marketplace, organizations can effectively enhance their applications’ security and compliance while ensuring their stability and reliability. NCM provides a robust solution to proactively identify and address security risks, maintain compliance, and improve application performance. It empowers organizations to build and deploy secure, reliable, and compliant applications, ultimately protecting their reputation and mitigating risks associated with security breaches and compliance violations.

NCM is a powerful tool that greatly enhances application security, compliance, stability, and reliability. Organizations can proactively mitigate security risks, maintain compliance, and ensure application stability by integrating NCM into the deployment flow through N|Solid Console and the GitHub Marketplace. Embracing NCM as a part of the development process is a prudent choice for organizations prioritizing application security, compliance, and reliability in today’s dynamic software development landscape.

NCM – Deployment Protection Rule

GitHub Marketplace offers a range of third-party applications and services, such as code analysis tools, project management tools, continuous integration, deployment (CI/CD) tools, and security tools, among others, that can be integrated into pull requests and deployment workflows with GitHub Actions.

With its powerful feature set and certification program, NCM is an essential tool for any developer working with open-source Node packages.

Related Content

Unleashing the Power of NCM – https://nsrc.io/UnleashingNCM

Vulnerability Scanning with NCM – https://nsrc.io/VulnerabilityScanningNS

Avoiding npm substitution attacks using NCM – https://nsrc.io/AvoidAttackswithNCM

Experience the Power of N|Solid

To get the best out of Node.js and experience the benefits of its integrated features, including OpenTelemetry support, SBOM integration, and machine learning capabilities.✍️ Sign up for a free trial and see how N|Solid can help you achieve your development and operations goals. #KnowyourNode

Announcing The NodeSource-GitHub Partnership

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]