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]

On the origin of packages

#​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 APIReact 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 MoveDeno 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

Unleashing the Power of NCM: Safeguarding Node.js Applications with Next-Generation Security in N|Solid

In the world of Node.js, application development, speed, flexibility, and scalability are critical for modern software development. However, the risk of vulnerabilities and security breaches looms with the increasing reliance on open-source Node packages. NCM (NodeSource Certified Modules) is the next-generation security solution that empowers Node.js developers to safeguard their applications easily and confidently.

This article will explore how NCM, a key N|Solid platform feature, revolutionizes how Node.js applications are secured, offering advanced security features, enhanced visibility, and peace of mind. Get ready to unleash the power of NCM and take your Node.js applications to new heights of security and reliability with N|Solid.

_Image 1 – Security Vulnerabilities in N|Solid View
_

Don’t miss out on this opportunity to try N|Solid for free and unlock the full potential of your Node.js applications.✍️ Sign up now and take your monitoring to the next level!

What is N|Solid?

_Image 2 – N|Solid Product View
_

N|Solid provides enhanced security for Node.js applications in production environments. It is 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. We have +15 features in our product, including OpenTelemetry support, SBOM integration, and Machine Learning capabilities. Discover More HERE ‘__Top 10 N|Solid —APM for Node— features you needed to use__’ – HERE: ???????? nsrc.io/TopNSolidFeatures.

N|Solid offers many benefits over the standard Node.js runtime, including improved security through features like runtime vulnerability scanning, access control, and enhanced monitoring capabilities that allow developers to identify and address issues in real-time.

N|Solid is well-suited for enterprise applications requiring high performance, scalability, and security levels. It is widely used in finance, healthcare, and e-commerce. It is developed and maintained by __NodeSource__, a company specializing in enterprise-grade Node.js solutions.

In the previous section, we discussed N|Solid as a solution that provides enhanced security for Node.js applications in production environments. Let’s discuss the difference between NSolid Console, N|Solid Runtime, and N|Solid SaaS. It’s important to differentiate between these components for several reasons, including functionality, user experience, and flexibility.

What is the difference between NSolid Console, N|Solid Runtime, and N|Solid SaaS?

Differentiating between the Console, Runtime, and SaaS setup in N|Solid is essential for a few reasons: functionality, user experience, and flexibility.

Users can deploy N|Solid in multiple ways, including using the N|Solid Console, N|Solid Runtime, or N|Solid SaaS setup, depending on their requirements and infrastructure setup. It is essential to provide distinct functionalities to enhance user experience and offer flexibility in deployment options, allowing scalability, customization, and integration with existing workflows. Here’s a brief description of each:

N|Solid Runtime is the runtime environment for Node.js applications. It includes a modified version of the Node.js runtime, enhanced with additional security, monitoring, and debugging features. These features include advanced profiling and tracing capabilities, heap and CPU profiling, and runtime vulnerability scanning.
???????? https://bit.ly/NSolidRuntime-npm

_Image 3 – N|Solid Runtime Installation
_

__N|Solid Console__, on the other hand, is a web-based dashboard that provides a graphical user interface for monitoring and managing Node.js applications running on N|Solid Runtime. It lets users view their applications’ real-time metrics and performance data, monitor resource utilization, and set alerts for specific events or thresholds. N|Solid Console also provides features for managing user access and permissions, configuring application settings, and integrating with third-party tools and services. It can manage multiple N|Solid Runtimes across a distributed environment, making it ideal for large-scale enterprise deployments.
???????? https://nsrc.io/NSolidConsole

_Image 4 – N|Solid Console Overview
_

__N|Solid SaaS__: N|Solid also offers a SaaS (Software-as-a-Service) setup so users can leverage N|Solid’s enhanced security and performance features without managing their own infrastructure. With N|Solid SaaS, users can simply sign up for a subscription and use N|Solid’s features through a cloud-based service without needing on-premises installation or maintenance. ???????? https://nsrc.io/NSolidSaaS

_Image 5 – N|Solid SaaS Overview
_

N|Solid offers multiple deployment options; these components provide distinct functionalities, user experiences, and deployment flexibilities, catering to the diverse needs of enterprise Node.js applications.

But, What about NCM?

NodeSource Certified Modules (NCM) is another product developed by NodeSource that provides you and your teams with actionable insights into the risk levels of using third-party packages. Using a series of tests, we score packages on npm to look for several weighted criteria. With NCM CLI, you can scan your projects for existing security vulnerabilities, license concerns, code risk, and code quality. This helps you understand the level of risk exposure and how to mitigate it. NodeSource Certified Modules (NCM) also work in offline mode. Explore Further ‘__Avoiding npm substitution attacks using NCM__’ HERE ????????https://nsrc.io/AvoidAttackswithNCM

_Image 6 – NCM CLI Report
_

NodeSource Certified Modules (NCM) is a security, compliance, and curation tool around the 3rd-Party Node.js & JavaScript package ecosystem. It is designed to be used with npm to provide protection against known security vulnerabilities and potential license compliance issues and provide general quality or risk assessment information to improve your ability to work with the 3rd-Party ecosystem.

Since the release of N|Solid 4.1.0, we have consolidated NCM into a single product with NCM’s features being pulled into N|Solid Runtime, N|Solid SaaS, and the N|Solid Console for optimal user experience. It also provides alerts and notifications when new vulnerabilities are discovered in modules used by an organization’s applications and helps users quickly identify and remediate any potential security risks.NCM is a valuable tool for organizations that rely on Node.js and open-source modules, helping to ensure that their applications are secure, reliable, and compliant with industry standards and regulations.

NCM now assesses packages based on multiple attributes: security, compliance, risk, and quality. These attributes are combined to generate an overall risk level for each package, providing valuable insights to manage third-party code in your Node.js applications effectively. With NCM’s scoring system, you can:

__Manage acceptable risk levels__: NCM helps you assess the risk associated with third-party packages by providing an overall risk level for each package. This allows you to make informed decisions about the level of risk you are willing to accept in your application.
__Understand security vulnerabilities__: NCM identifies and highlights security vulnerabilities in third-party modules, allowing you to understand the severity of the vulnerabilities and take appropriate actions to address them in your code.
__Manage license and compliance risks__: NCM helps you identify potential license and compliance risks introduced by third-party modules, ensuring that your application adheres to licensing requirements and compliance standards.
__Identify potential risk vectors__: NCM goes beyond known security vulnerabilities and identifies potential risks that may not have surfaced in security vulnerabilities yet. This helps you proactively identify and address potential risks in your code.
__Improve code quality__: NCM provides insights into quality attributes that align with best practices, helping you improve the quality of your code and make it more manageable and secure.

Together, these attributes in NCM’s scoring system (security, compliance, risk, and quality.) provide a comprehensive assessment of third-party packages, enabling you to effectively manage and secure your Node.js applications by addressing security vulnerabilities, managing compliance risks, assessing package risk, and provides insights to improve code quality. Find Out More about ‘Vulnerability Scanning & 3rd-Party Modules Certification’- HERE ???????? nsrc.io/VulnerabilityScanningNS

The Importance of Node.js Application Security

Selecting the right tools and applications for your developer pipeline requires careful consideration of your team’s workflow and project needs. This might involve assessing your tech stack, deployment processes, and the number of steps in your pipeline and identifying areas where guardrails can be implemented to improve security and reliability.

_Image 7 – NCM Criteria
_

Fortunately, numerous tools and applications are available to assist in managing your pipeline and ensuring the security and compliance of your applications. One powerful tool in this regard is NCM (NodeSource Certified Modules). NCM is a comprehensive security, compliance, and curation tool that offers advanced capabilities for managing dependencies in Node.js applications. By integrating NCM into your pipeline, you can effortlessly scan for vulnerabilities, track package dependencies, and ensure compliance with licensing requirements.

NCM enables you to elevate your pipeline to the next level, enhancing your application’s performance, reliability, and security while safeguarding against __SUPPLY CHAIN ATTACKS__. With the consolidation of NCM into N|Solid, you can now seamlessly access these powerful capabilities through the N|Solid Console for a streamlined user experience.

Note: Supply chain attacks are a type of cyber attack that targets the weakest link in a software supply chain. Instead of directly attacking a target, hackers infiltrate a trusted third-party vendor, supplier, or service provider to gain access to their customer’s systems and data. This allows the attackers to distribute malicious code or compromise software updates, which can then infect the entire supply chain and cause widespread damage. Supply chain attacks can be difficult to detect and prevent, making them a growing threat to organizations of all sizes and industries.

The importance of NCM

The consolidation of NCM 2 into N|Solid represents a significant milestone in providing a comprehensive solution for ensuring the security, reliability, and performance of Node.js applications. With features such as:

Projects & Applications Monitoring – https://nsrc.io/ProjectApplicationsMonitoringNS

Process Monitoring – https://nsrc.io/ProcessMonitoringNS

CPU Profiling – https://nsrc.io/CPUProfilingNS

Worker Threads Monitoring – https://nsrc.io/WorkerThreadsNS

Capture Heap Snapshots – https://nsrc.io/HeapSnapshotsNS

Memory Anomaly Detection – https://nsrc.io/MemoryAnomalyNS

Vulnerability Scanning & 3rd party Modules Certification – https://nsrc.io/VulnerabilityScanningNS
HTTP Tracing Support – https://nsrc.io/HTTPTracingNS

Global Alerts & Integrations – https://nsrc.io/GlobalAlertsIntegrationsNS

Distributed Tracing – https://nsrc.io/DistributedTracingNS

Open Telemetry Support – nsrc.io/AIOpsNSolid

SBOM Support – nsrc.io/SBOM-NSolid

Machine Learning Support – nsrc.io/ML-NSolid

N|Solid offers a robust and all-encompassing solution for managing the entire lifecycle of Node.js applications. By incorporating NCM’s powerful capabilities for security, compliance, and curation, N|Solid empowers developers and organizations to proactively identify and address vulnerabilities, track dependencies, and ensure licensing compliance, ultimately elevating the overall performance, reliability, and security of their applications. With N|Solid, organizations can confidently build and deploy Node.js applications with peace of mind, knowing their software is protected against potential risks and supply chain attacks.

Conclusion:

Securing Node.js applications is paramount in today’s software development landscape. With the powerful features of NSolid, including the N|Solid Console and N|Solid Runtime, combined with the cutting-edge security capabilities of NCM, developers can safeguard their Node.js applications with next-generation security measures or simply leaving the maintenance and infrastructure to us by selecting our N|Solid SaaS option. By leveraging the power of NCM in the N|Solid platform, developers can proactively mitigate vulnerabilities and ensure the reliability and stability of their Node.js applications. Embrace the power of NCM in N|Solid today and unleash the full potential of your Node.js applications with advanced security measures.

NodeSource’s Products:

N|Solid Runtime is the Node.js runtime environment with enhanced security, monitoring, and debugging features.

N|Solid Console is a web-based dashboard for managing and monitoring Node.js applications running on N|Solid Runtime.
__N|Solid SaaS__: Benefit from N|Solid’s advanced security and performance features through a cloud-based subscription service, eliminating the need for on-premises installation or maintenance.

NCM is a cutting-edge security feature integrated into the N|Solid platform that provides continuous monitoring, vulnerability scanning, and risk assessment of open-source Node.js packages used in Node.js applications.

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