Every Framework Everywhere All at Once

#​665 — November 30, 2023

Read on the Web

JavaScript Weekly

Eliminating JS Framework Lock-in with Web Components? — Can you build an app where each component is using a different framework? Amazingly, yes. Web components aren’t new but are ‘having a moment’ and Jake demos an interesting, if contrived, use case. He explains: “Say you’re writing a Vue app and you really want to use a library that’s only available as a React component. You can wrap that library in a web component and use it in your Vue app…”

Jake Lazaroff

Announcing Deno Cron — Deno adds a cron-style feature to run code on a pre-defined schedule using Deno.cron. This works locally (behind –unstable) in a long-running process, but on Deno Deploy it analyzes the definition and runs the code on time, as you’d expect, with no extra work needed.

Zinkovsky and Jiang (Deno)

Feel the Power of More Than 420,000 Teammates and Work #LikeABosch — At Bosch, we shape the future with high-quality technologies and services to inspire people and improve their lives. And it’s our people who make us remarkable. Our success is your success. Let’s celebrate together. Learn more.

Bosch sponsor

The Biome Formatter Wins the ‘Prettier Challenge’ — Two weeks ago, the creator of Prettier put up a $10k bounty for a Rust-powered code formatter that could pass over 95% of Prettier’s tests. Biome, the toolchain forked from Rome, has already managed to claim the prize, topped up by further contributors.

Biome

🤔 There’s a post from the Prettier POV where @vjeux explains why he offered the bounty: he felt a ‘a lack of competition’ was holding Prettier back.

IN BRIEF:

📺 Evan You, creator of Vue.js, presented an update on the state of Vue and Vite for VueConf Toronto attendees. (48 minutes.)

🟩 The two LTS Node.js branches have received releases backporting features from newer versions: Node v20.10.0 (LTS) gains WebSocket and an experimental flag to auto-detect ESM code. Node v18.19.0 (LTS) gets npm 10 and tweaks for customization hooks and loaders.

🎙️ Off The Main Thread is a new podcast featuring Jake Archibald and Surma (both formerly of Google / HTTP 203).

🎂 Not to do with JS – though some of you may use it – but Notepad++ is 20 years old. It’s a popular open source code editor and Notepad replacement for Windows.

🙋 The State of JavaScript 2023 survey is still open to take.

RELEASES:

Passport 0.7 – Popular authentication middleware for Express-based apps.

eta (η) 3.2 – Embedded JS template engine for Node, Deno, and browsers.

Fable 4.6 – F# to JavaScript transpiler.

📄 Articles & Tutorials

▶  10 JavaScript Changes You (May Have) Missed in 2023 — We’ve covered most of these, but this is still a productive refresher in just six minutes, covering things like toSorted(), iOS Web Push, Next.js updates, Angular 17, and the rapid rise of Bun.

Fireship on YouTube

Fireship is a great channel for these sort of quick-fire roundups, and if you want more 100+ JavaScript Concepts You Need to Know is a fun one.

Tracking Frontend JS Exceptions with Playwright Fixtures — Playwright is commonly used to test frontend apps and ensure they’re rendering and behaving correctly, but what if you want to be sure the underlying JavaScript is working as expected too? Stefan has some tips.

Stefan Judis

Lesser Spotted React Mistakes and How to Avoid Them — Read about common pitfalls that occur when writing React code. Cut, paste, & try the included examples in your own code.

Sonar sponsor

A Deep Dive into CheerpJ 3.0: A WASM JVM for the Browser — A look at an interesting WebAssembly-based Java Virtual Machine that runs client side in the browser, opening up bidirectional Java-JavaScript interop, if you need it. Note that it’s commercial, but can be used free for personal projects and evaluation.

Pignotti, Bates, and De Rossi

A Simple WebSocket Benchmark: Node vs Bun — Using as ‘textbook’ an example of WebSocket communication as possible, the author pits Node and Bun against each other.

Daniel Lemire

Svelte Through the Eyes of a React Developer

Ido Shamun

🛠 Code & Tools

FullCalendar: A Full Sized JavaScript Calendar Control — An interesting option if you want a Google Calendar style experience for your own apps. Has connectors for React, Vue and Angular. The base version is MIT licensed, but there’s a commercial version too with extra features.

Adam Shaw

Knip 3.3: Find Unused Files, Dependencies and Exports — Finds unused files, dependencies and exports in your projects and lets you cut/knip them away.

Lars Kappert

😍 Knip has continued to evolve a lot this year, and now also has a snazzy new homepage. You can also learn more about what’s new in 3.x.

Inline REPL Anywhere in Your Code — Execute context aware code snippets directly in your editor, anywhere in your project, even if your application/tests are not working.

Wallaby Team sponsor

Syntax.js: Code Syntax Highlighting Library — There are many long standing options in this area, such as Prism and highlight.js, but it’s interesting to see a fresh and lightweight take.

William Troup

ai2html: Turn Adobe Illustrator Files into HTML — We noticed this tool being used by the Financial Times to share graphs they’ve designed, and the result is really good. This project isn’t new, but we haven’t shared it before, it’s well maintained, and there are lots of examples.

The New York Times Company

aws-lite: A New Node.js-Powered AWS API Client — AWS does a good job with its APIs and tooling, but sometimes their approach is a little heavyweight. aws-lite provides a simpler, faster option. “You can think of it as a community-driven alternative to AWS’s JavaScript SDK.”

Begin

Hire Vetted Developers in US Time Zones, Fast

Revelo sponsor

Neutralinojs 4.15.0 – Cross-platform desktop app framework – lighter than Electron as it uses the locally available browser engine.

jest-image-snapshot 6.3 – Jest matcher for image comparisons.

Mongoose 8.0 – MongoDB object modelling approach.

edit-in-place 1.9 – Edit in place library for Angular apps.

Jotai 2.6 – Simple, flexible state management for React.

sql.js 1.9 – SQLite 3.44 compiled to JavaScript.

React Share 5.0 – Social media sharing buttons.

np 9.0 – A better npm publish.

pnpm 8.11 – Fast, disk space efficient package manager.

NOTABLE QUOTABLE

“As a principal engineer, I view it as my role to keep us off the bleeding edge as much as possible. That way, when we really do need to innovate, we have the capacity to do so. And when we don’t need to, we can go really freaking fast.”

___
Nicole Tietz

3 Takeaways from Web Summit 2023

Along with approximately 70,000 other souls from around the globe, the NodeSource team attended Web Summit 2023 earlier this month. Famous for being the largest European tech event (or even the world), Web Summit was full of riveting AI conversations, more than 2,600 startups, and plenty of tasty food trucks and, of course, amazing local cuisine.

On the heels of this successful event, we’d like to share our team’s biggest event takeaways as we close this year on a strong note and get ready for what 2024 has in store.

#1 Everyone has a unique take on using AI.

From session topics to conversations with our peers, AI was all the buzz at the event and we were definitely not the only ones leaning into the AI movement. Startups across all industries are injecting AI into their products and services, and many are at different points in their adoption of the technology. While there are many who are only an inch deep into AI, some are using it in more advanced and compelling ways.

For example, Riccardo Semadeni, MediRapp AG’s CEO, is transforming ultrasound diagnostics and improving global patient outcomes by automating everything from data collection to diagnosis to reporting. With AI, MediRapp is making the entire process faster, more accurate, and more effective while significantly elevating patient care. This is a great showcase of how AI can process nearly unlimited amounts of data and provide analysis that significantly increases the quality of outputs and helps make better decisions.

On the other hand, another company, Harry, is using AI in a completely different way. Simo Alami explained how they are creating AI powered resources for companies. Do you need a content writer? SEO specialist? PR manager? Other marketing talent? Harry will create a customized AI resource for your organization. This is a very interesting use of generative AI to create meaningful value for small and even large organizations by augmenting teams with AI powered by data.

These two examples showcase how innovative leaders are identifying new ways to use AI advancements to transform their industries.

#2 Collaboration paves the way for continued transformation.

Our team traveled from all over the world to attend Web Summit—Seoul, Madrid, Sao Paulo, Utah, Seattle, Medellin, Bogata, Vancouver, and Berlin. With this in-person time together, we dove deep into ways we could continue to elevate our offering and customer experience. We discussed ways to evolve our recently open-sourced N|Solid Runtime and advance our AI powered Node.js Copilot, which we released on the first day of Web Summit. This time allowed us to gather essential insights from our community who shared the common consensus that NodeSource’s ability to open-source our runtime would be transformative for development teams.

Having dedicated time to come together as a team to bond, share, and test new ideas is critical to our success and we look forward to putting these plans into motion.

#3 Our industry is full of startup founders dedicated to making an impact.

On the event’s opening day, NodeSource was one of 300 startups selected for a special event, “The Gathering.” During the day, we participated in group sessions discussing a range of topics from leadership to raising capital to AI. While these discussions were full of great insights, what was even more notable was the ability to connect with fellow founders looking to make an impact.

Web Summit was full of lively conversation about taking our industry to the next level. We chatted with startup entrepreneurs, learned from headliners with unique stories, and shared exciting updates with investors, press, and customers. We thoroughly enjoyed connecting with founders and enterprise leaders whose digital products rely on Node.js and tech builders that leverage and build with Node.

Overall, NodeSource had a wonderful time at Web Summit and even had the opportunity to visit some local sites, like visiting CasCais by way of a winding trek along the coast and then up into the hills to the westernmost point of all of Europe at Cabo Da Roca. Heading into the new year, we can’t wait to attend Web Summit 2024!

The unbearable weight of massive JavaScript

#​664 — November 23, 2023

Read on the Web

JavaScript Weekly

Time to Take the State of JavaScript 2023 — The long standing State of JavaScript survey is back for another run at figuring out what the community is up to and what tools we’re using. The results are always illuminating and we’ll share the tastiest parts once available.

Devographics

▶  The Unbearable Weight of Massive JavaScript — An extensive talk looking at what can be achieved by simplifying web architecture, chiefly by using new or upcoming Web Platform APIs and getting back to building fast, maintainable, user-friendly frontends. Slidedeck.

Ryan Townsend

Stop Building Auth, Start Building Apps with EdgeDB + Next.js — It’s hard enough to come up with an idea worth trying. See how EdgeDB and our new authentication extension makes it easy to go from idea to working application in record time using Next.js.

EdgeDB sponsor

TypeScript 5.3 Released — The latest edition of the type-enhanced JavaScript superset is here. The headline feature is full support for the import attributes proposal (as it currently stands, at stage 3 in TC39), but there are many enhancements around type narrowing, interactive inlay hints for types in editors, and more. Not the biggest update, but progress nonetheless.

Daniel Rosenwasser (Microsoft)

Vite 5.0 Released — The Vite suite of frontend tooling may have started life in the Vue.js world, but is now used by projects aplenty including SvelteKit, Remix, and Astro. v5 now uses Rollup 4, removes many deprecated features, and requires Node 18+. There’s a migration guide to help with your v4 to v5 progression.

Evan You and Contributors

IN BRIEF:

The Node.js 20.x runtime is now available on AWS Lambda.

🎁 A bumper list of dev-related tools & services running Black Friday deals.

GitHub looks at what’s new in the latest Git release: Git 2.43.

The AWS Amplify team teases ‘Gen 2’ of their fullstack app platform.

RELEASES:

⭐️ Transformers.js v2.9 – State of the art ML in JavaScript. v2.9 adds support for depth estimation, zero-shot object detection, and optical document understanding.

Redux Toolkit 2.0 rc.0, Redux 5.0 rc.0, React-Redux 9.0 rc.0 – Initial RCs with better packaging and smaller bundles. Final releases due soon.

Bun 1.0.14 – Introduces a high-perf globbing API for matching files and strings.

Rspack 0.4 including Rsbuild 0.1 – A fast Rust-based web bundler.

Node v21.2.0 (Current) and Node v20.10.0 (LTS)

Starlight 0.13.0 – Beautiful docs sites atop Astro.

📄 Articles & Tutorials

▶  4 Web Devs, 1 App Idea — Salma Alam-Naylor, Scott Tolinski, and Eve Porcello join Jason Lengstorf to kick off a fun new series where several developers all implement the same type of app, show off how they went about it, and react to each other’s approaches. Svelte, Astro, and Next.js each make an appearance.

Learn with Jason

Promises Training — Practice working with promises through a curated collection of interactive challenges. Aimed at developers with at least an intermediate understanding of promises who want to dig deeper.

Henrique Inonhe

JavaScript Error and Performance Monitoring — Track, trace, debug and resolve JavaScript errors across platforms. Are your releases that easy? Join us live.

Sentry sponsor

An Attempted Taxonomy of Web Components — A collection of open-source web components (and lessons learned from using them) that may help you on your journey in this complex, developing space.

Zach Leatherman

Using OpenAI APIs to Analyze Automated Test Failures — A look at how to develop a Nightwatch.js plugin which sends the test failure and associated errors to a service that integrates with OpenAI’s platform to analyze said errors and provide actionable feedback.

Andrei Rusu

🛠 Code & Tools

Bruno: An Open-Source HTTP API Exploration App — There are a lot of ‘API client’ tools like this, commercial and non-commercial, with varying levels of features, but this is an open source one entirely built in JavaScript with a fully-offline ethos some might appreciate. GitHub repo.

Anoop M D, Anusree P S and Contributors

debounce 2.0: Delay Function Calls Until a Set Time Elapses — If you don’t want something to run too often, debouncing is the strategy for you and this library makes it simple. v2 adds types and brings the code up to modern standards.

Sindre Sorhus et al.

Level Up Your UX With Bryntum — Empower your users with advanced widgets like data grids, calendars, schedulers, and Gantt charts.

Bryntum sponsor

H3: A Minimal HTTP Framework for Multiple JS Platforms — Aims to be as universal as possible and works across numerous platforms, including Node, while offering the basic HTTP framework features and a compatibility layer with Express middleware. v1.9 just landed.

UnJS

request-animation-frames: Use requestAnimationFrame Anywhere — The latest library from the one-man module powerhouse, Sindre Sorhus. The idea this time is to allow you to use requestAnimationFrame in any JavaScript environment. The implementation is delightfully simple.

Sindre Sorhus

Spectral.js: A More ‘Paint-Like’ Color Mixing Library — If you have two colors to transition between, just tweening the RGB values can result in some rather ugly intermediate colors. Spectral.js uses Kubelka–Munk theory which more closely matches how paints work for a visually satisfying result.

Ronald van Wijnen

‘A Node + TypeScript + ts-node + ESM Experience That Works’ — It’s just three files: package.json, tsconfig.json and a utilities file.

Khalid Zoabi

A Non-Cloud Alternative to Google Forms That Has It All

SURVEYJS sponsor

🖼 medium-zoom 1.1: A Library for Medium-Style Image Zooming — Responsive, can load a higher definition version of an image on zoom, and mouse, keyboard and gesture friendly. Now we just need a library that can cover up the bottom half of a page with junk like Medium also does now. Demo.

François Chalifour

gridstack.js 10.0 – Build interactive dashboard panels quickly.

MQTT.js 5.3 – MQTT client for Node and browser.

Piscina 4.2 – Node.js worker thread pool implementation.

(Official) MongoDB Node.js Driver 6.3

SQL Formatter 14.0 – Pretty print SQL queries.

Job Listing

Full Stack TypeScript Software Engineer – [Remote Europe]Marker.io is a visual bug-reporting tool for the web. Join our dev team and work remotely (Stack: Node.js, Vue.js & MongoDB).

Marker.io

NOTABLE QUOTABLE

“Programming isn’t about what you know; it’s about what you can figure out.”

___
Chris Pine (author of Learn to Program)

P.S. Medium is 🗑️. If you don’t want to host your own blog, try Hashnode, dev.to, Bear, or even throw Markdown at GitHub Gists – it’ll provide a better reader experience and we’ll be more likely to link to it.

Digging into explicit resource management

#​663 — November 16, 2023

Read on the Web

JavaScript Weekly

Prettier 3.1 Released — The popular opinionated code formatter has a new release including support for the new control flow syntax in Angular 17 plus a new, experimental formatting option for ternary expressions (as in x ? y : z) explained in more depth in “A curious case of the ternaries.”

Alex Rattray

🤔 With an aim to making code formatting even faster, Prettier’s co-creator has put up a $10k bounty for any Rust project that passes >95% of Prettier’s tests.

Exploring Explicit Resource Management in JS — A practical look at the idea of explicit resource management, an idea both currently at stage 3 in TC39 (and partly supported in TypeScript 5.2) that makes it easier to ‘clean up’ resources once they are no longer used or needed.

Ilia Pozdnyakov

Build Interactive, Live Video Applications with Amazon IVS — Amazon Interactive Video Service (Amazon IVS) allows developers to create dynamic video experiences, such as collaborative real-time livestreams. Check out the new ivs.rocks to find code samples, demos, and other resources. Click here to get started.

Amazon Web Services (AWS) sponsor

On HTML Web Components — “With web components, you might even say React’s component model is being ported to the browser. But it’s being done in a way that works to enhance how the web already works, not replace it”.

Jim Nielsen

A Review of Lightweight JavaScript Frameworks — This overview is targeted at Django (i.e. Python) developers but if you, too, want to avoid larger frameworks like React or Angular, you might appreciate this look at numerous alternatives from Stimulus and htmx to more oblique options like Laravel Livewire.

Michael Yin

🥳 AWS is celebrating a huge release with v6 of the AWS Amplify JavaScript library which includes full support for Next.js App Router and Server Actions.

🌎 Node.js TSC member Yagiz Nizipli is suggesting using Biome for code formatting in Node, since ESLint has deprecated its core formatting rules.

👾 The winners of React Jam, a recent React-based game development contest, have been revealed. An entry I enjoyed was useChess, a set of chess-based puzzles.

▶️ If you’ve wondered what the big deal is about Astro, James Q Quick went on the Software Engineering Daily podcast and explained Astro pretty well.

🎵 Someone’s recorded ▶️ a rap music video about TypeScript..

RELEASES:

Node.js v21.2.0 (Current)

visx 3.5 – D3-based visualization primitives for React.

fx 31.0 – Powerful terminal JSON viewer.

Astro 3.5, Ember 5.4, and Prisma 5.6.

📄 Articles & Tutorials

67 Browser-Based Debugging Tricks — A list of useful, ‘not-obvious’ hacks to get the most out of the browser’s DevTools. Assumes a reasonable existing understanding of said tools.

Alan Norbauer

Exploring V8’s Strings: Implementation and OptimizationsNote: This is very technical and most JavaScript developers do not need to go this deep. That aside, this is a fantastic look under the covers of how the V8 engine handles strings, including the optimizations used that allow it to go toe to toe with languages like C++.

Ilia Pozdnyakov

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

Wallaby Team sponsor

▶  An Overview of Angular 17’s New Built-In Control FlowAngular 17 was released last week and a significant enhancement was support for a new syntax in templates that looks and feels more JavaScript-y.

Dmytro Mezhenskyi

Moving Back to React (from Preact) — Preact felt like a logical, lightweight choice to this team at one time, but they’ve switched to React for better compatibility with Next.js, among other things. Their page weight is up slightly, but they feel the tradeoff is worth it.

Ante Barić (Daily․Dev)

My Journey to 3x Faster Builds: Trimming Barrel File Imports“I maintain a small frontend application (4K LOC) which uses Vite as the compiler. The production build, using npm run build, was taking 26 secs on Github Actions. It seemed awfully slow for such a small application. I decided to investigate why.”

Ramana Venkata

Can Bun Eat Node’s ‘Lunch’? — An experiment in migrating a codebase (a restaurant voting app called Lunch) from Node over to Bun and seeing how it fares.

Jeffrey Carl Faden

Feel the Power of More Than 420,000 Teammates and Work #LikeABosch

Bosch sponsor

How to Use NPM Packages Outside of Node — Learn how to run NPM packages in ‘other places’ like serverless platforms, the browser, and beyond.

George MacKerron (Neon)

What I Learned Building an Audio Plugins System for the Web

Ben Wiley

Rust for JavaScript Developers: An Overview of Testing

Joshua Mo

🛠 Code & Tools

gsplat.js: A Gaussian Splatting Library — Gaussian splatting is an increasingly popular graphics rendering techniques where rather than render millions of tiny, textured triangles in a scene, you get a more wild paintball-like splatter fest, where each paintball creates a smooth, colorful blob instead of a rigid shape. This demo is both simple and striking.

Dylan Ebert

Reveal.js 5.0: The HTML Presentation Framework — A way to build presentations using standard Web technologies. The project’s homepage is, itself, such a presentation. v5.0 adds support for ‘scroll mode’ which essentially turns presentations into more typically scrolling Web experiences – demo.

Hakim El Hattab

🖍️ Marker.io: Collect Bug Reports With Annotations & Session Replay — Collect feedback on live websites. Get dev-friendly bug reports with screenshots, URLs, console logs & session replay.

Marker.io sponsor

Datasheet Grid: An Airtable-like React Component — If you’ve got an array of objects and you want a way for users to manipulate them, this is for you. It’s not going to replace a spreadsheet or an extensive data grid framework, but it’s a mature solution featuring smooth animations, virtualized rows/columns, keyboard navigation, and more.

Nicolas Keller

Perfect Freehand: A Library for Creating Better ‘Freehand’ Lines — You can try it out here. Makes your e-signature not look like chicken scratch! Might be useful for drawing apps.

Steve Ruiz

Wild Wild Path v5: Object Property Paths with Wildcards and Regexps — A ‘wild’ way to access properties in objects (which can be deeply nested) by way of string based queries that support wildcards and regexes. The examples help communicate the idea.

ehmicky

@storybook-test: More Streamlined and Powerful Storybook Testing — @storybook/test consolidates the API of @storybook/jest and @storybook/testing-library into a new, single package, powered by Vitest.

Kasper Peulen

Marked 10.0 – Markdown parser and compiler. There’s also marked-terminal 6.1 which lets you render Marked-processed Markdown on the terminal.

HumanizeDuration.js 3.31.0 – Turn milliseconds into textual durations in numerous natural languages.

actions/github-script 7.0 – Script the GitHub API in GitHub Actions.

Plasmo v0.84.0“Like Next.js for browser extensions.”

PDFKit 0.14.0 – PDF generation for Node and browser.

React Joyride 2.7 – Create guided tours in your apps.

Job Listing

Full Stack TypeScript Software Engineer – [Remote Europe]Marker.io is a visual bug-reporting tool for the web. Join our dev team and work remotely (Stack: Node.js, Vue.js & MongoDB).

NOTABLE QUOTABLE

“When you choose a language, you’re choosing more than a set of technical trade-offs – you’re choosing a community.”

___
Joshua Bloch

Introducing N|Solid Copilot: Your AI-Powered Node.js Navigator

We are thrilled to announce the latest addition to N|Solid Pro – the N|Solid Copilot, a groundbreaking AI-powered assistant designed to revolutionize your Node.js development experience. This innovative tool is a leap forward in Node.js application observability and security, it’s like having a Node expert on-call.

View of N|Solid Pro Console with the Copilot drawer open allowing a user to interact with the AI Assistant.

Why N|Solid Copilot?

N|Solid Copilot is developed with one goal in mind: to make your life as a Node.js developer or DevOps engineer easier, more efficient, and more secure. It’s like having a Node.js expert by your side, 24/7, offering real-time insights into observability alerts, along with actionable advice tailored to your unique application needs.

Key Features of N|Solid Copilot

Real-time analysis and insights: Identify and resolve performance bottlenecks, memory leaks, and other critical issues. Analyze metrics like CPU usage, event loop utilization, and more.
Anomaly detection and remediation: Utilizing the platform and NodeSource’s ML algorithms, the Copilot can detect anomalous behavior in both application performance and security, as well as identify solutions.
Security vulnerability identification and resolution: N|Solid Pro is continuously scanning for security vulnerabilities within the application code and 3rd party dependencies. Users can ask our Copilot about recommendations and solutions.
Code optimization suggestions: Given its training in Node.js, the AI can or will offer suggestions to optimize code for better performance and efficiency. This can include advice on asynchronous programming patterns, memory management, or the use of specific Node.js features.
Interactive querying: Users can interact with the platform in a conversational manner to query specific application metrics or request insights on performance and security aspects. These queries can be general or specific to the data generated in production.
Knowledge sharing: Users can gain knowledge about how to use N|Solid and implement Node.js best practices, creating a better model for users to get up to speed quickly on the platform.

Using N|Solid Copilot to triage security issues through predefined prompts or user questions.

Experience the Future of Node.js Development Powered by AI

N|Solid Copilot isn’t just a tool; it’s your partner in developing and maintaining great software. Whether you’re debugging a tricky issue, seeking performance improvements, or ensuring your application’s security, N|Solid Copilot is there to guide you every step of the way.

How to Get Started?

Sign Up: Simply sign up for a free SaaS account on our website.
Integrate: Seamlessly integrate N|Solid Copilot with your existing Node.js applications.
Navigate: Let N|Solid Copilot guide your development journey with unparalleled insights and assistance.

We believe N|Solid Copilot will not just change how you work with Node.js; it will transform it. Sign up today and be part of this exciting journey!

Connect with us on Twitter @NodeSource, LinkedIn, and to stay updated with the latest from N|Solid.

Angular is back

#​662 — November 9, 2023

Read on the Web

JavaScript Weekly

Reintroducing Angular with Angular v17 — Angular first appeared in the shape of AngularJS in 2010 and helped launch a wave of large-scale JavaScript frameworks. Angular remains popular in many use cases but is often overlooked in favor of newer options. v17 takes a leap forward in both features and vision, with the team rebranding Angular and repositioning it as a modern solution:

Angular.dev is an all-new docs site and home for the project (the new guides look fantastic). It’s in beta till Angular v18 is released – you can learn more about it here.
Hydration is now production ready.
Vite and esbuild are the default for new projects.
Improved support for creating server side apps.
New, improved built-in control flow to make code less verbose.
Google pulled out all the stops for ▶️ the ‘Special Angular Event’ – an hour of talks, interviews and discussions to bring you up to speed.

Minko Gechev and the Angular.js Team

Bare Metal JavaScript: The JavaScript Virtual Machine with Miško Hevery — Learn how high-level JavaScript turns into low-level CPU instructions. Build up your mental model of JavaScript’s performance characteristics through understanding the JavaScript Virtual machine under the hood!

Frontend Masters sponsor

Mastering DOM Manipulation with Plain JavaScript — A mega collection of hundreds of examples of doing things like selecting text, manipulating elements, resizing things, scrolling, and such – all by using the DOM and browser APIs with no external libraries. You Might Not Need jQuery is another classic resource in a similar vein.

Phuoc Nguyen

▶  Why Signals Are Better Than React Hooks — When Preact’s Marvin Hagemeister pops up in the comments saying “this is by far the best video about signals and why they are so exciting. I love the way you demonstrate it by coding along and moving an app over to signals,” it should bump a video up to the top of the Watch Later playlist.

Web Dev Simplified

👀 Nicholas C. Zakas shares a look at what’s coming in ESLint v9.0. The first alpha is due in a month or two.

⚛️ React has landed a commit adding sourcemaps for prod build artifacts.

🆚 VS Code will soon support moving editors into floating windows.

RELEASES:

TypeScript 5.3 RC – Final due soon, but you get import attributes, resolution-mode in import types, interactive inlay hints for types, and improvements to narrowing in a few extra cases.

It’s a strong week for testing tool releases, so they’re all in one place: TestCafe v3.4.0, Cypress 13.5, Nightwatch.js 3.3, and React Testing Library 14.1.

Deno 1.38 – Many smaller improvements, including far faster JSX transformation.

Bun v1.0.10 – Faster node:http and bug fixes.

tsx 4.0 – Node.js enhanced to run TypeScript / ESM files.

📄 Articles & Tutorials

How to Do a JS to TypeScript Conversion — Chris, who led the conversion of a 150k LOC app to TypeScript, addresses a common question: do-it-as-you-go or follow the dependency graph?

Chris Krycho

Exploring the Headless Component Pattern for Composing React UIs — An engineer at Atlassian takes us on a thorough and practical journey into the concept of headless components and the pattern of having reusable logic and behavior separate from the presentation of UI elements.

Juntao Qiu

📞 Calling JavaScript Devs! Sentry Launch Week is Coming. Join Online

Sentry sponsor

▶  8 Talks from JetBrains’ JavaScript Day 2023JavaScript Day is an annual virtual event featuring a handful of talks on diverse JS related topics. This year, Romulo Cintra shows us how TC39 works on language proposals, Stefan Baumgartner spoke about the lies we tell ourselves using TypeScript, and more.

JetBrains

Writing Components That Work in Any Framework — Looks at why web components can be difficult to adopt, and shows how using a higher-level library can let us “easily write components that work everywhere”.

Andrico Karoulla

Build a Lightweight Code Generator with TypeScript and JSON Imports

John Ruble

Deploying a Vue Application with Netlify and GitHub

Ezekiel Lawson (Telerik)

Don’t Disable Buttons, Do This..

Chris Ferdinandi

🛠 Code & Tools

Moveable: A Library for Dragging, Resizing, Scaling and More — If you want to offer up physical manipulation of elements (warping, pinching, rotating, etc.) this library could help. Its homepage is a fun self-demo and there are packages for integrations with common frameworks.

Younkue Choi

🔥 Need to Eliminate Tech Debt Without Falling into Dependency Hell? — Upgrade seamlessly and let us tackle tech debt with our fixed-cost, monthly maintenance service (starting at $2k/month).

UpgradeJS | Tech Debt Services sponsor

🖼  image-dimensions: Get the Dimensions of Images — Sindre’s latest creation is a simple but comprehensive one. A way to get the size (as width and height in pixels) for JPEG, PNG, APNG, and GIFs in any modern JS environment.

Sindre Sorhus

main-thread-scheduling 9.0: Consistently Responsive Apps While Staying on the Main Thread — An easier alternative to Web Workers that uses the approach of stopping heavy tasks on the main thread from executing when the user interacts with the UI. This new version adds afterFrame (like requestAnimationFrame but called after frame drawing has rendered), queueTask, and extensions to promises.

Antonio Stoilkov

React Components for the Google Maps JavaScript APIreact-google-maps is the ‘first Google-sponsored library’ for integrating Google Maps JavaScript API components into a React app.

Mike Pegg (Google Cloud)

capture-website 4.0: Capture Screenshots of Websites — A Puppeteer wrapper to capture screenshots of site from Node or the command-line.

Sindre Sorhus

Never Stop Learning and Work #LikeABosch — At Bosch, you always keep growing. Upskill yourself into countless new roles, positions and opportunities. Learn more.

Bosch sponsor

⌘K-sv: A Fast, Composable, Unstyled Command Menu for Svelte — A port of ⌘K, a React-based command menu component.

huntabyte

Vuetify v3.4 – Vue component framework.

MiniSearch 6.2 – In-memory fulltext search engine. (Demo.)

TanStack Form 0.9 – Headless type-safe form state management.

Dependency Cruiser v15.2 – Tool to validate and visualize dependencies.

Valtio v1.12.0 – Proxy state made simple. Plus it has a fantastic homepage.

Helmet 7.1 – Secure Express apps with HTTP headers.

Rollup.js 4.3 – ES module bundler.

NOTABLE QUOTABLE

“The first 90% of the code accounts for the first 90% of the development time. The remaining 10% of the code accounts for the other 90% of the development time.”

___
Tom Cargill

🚀 Everyone’s gone to the moon..

Spacekit.js: A Library for Creating 3D Space Visualizations — Not just any old 3D space, but actual space – think planets, stars, and meteors. A library like this comes, of course, with many examples to try. GitHub repo.

Ian Webster

Big news for both Next.js and Remix

#​661 — November 2, 2023

Read on the Web

JavaScript Weekly

Next.js 14 Released — Unveiled at last week’s Next.js Conf, v14 caused a lot of community discussion (not least on Hacker News), largely surrounding Server Actions being declared stable and the ‘backend-meets-frontend’ opportunities this opens up. A new partial prerendering feature is also in preview, allowing for dynamic responses but with the speed of an initial static response.

Lee Robinson and Tim Neutkens

💡 The New Stack has an overview of the release, and Focus Reactive has a (highly visual) recap of Next.js Conf itself – recommended if you didn’t watch the stream.

SDKs & OpenAPI Specs in Minutes Using Zod, tsoa, or Fastify — Using popular TS tooling to build your API? Our guides show you how to go from code to best in class OpenAPI specs & SDKs.

Speakeasy sponsor

Remix ❤️ Vite: Remix 2.2 Introduces Vite SupportRemix is a popular full-stack JavaScript framework that began as a paid product, but has been open source for two years now. If you found Remix’s compilation approach opaque before, we have great news: “With Vite, Remix is no longer a compiler. Remix itself is just a Vite plugin.” This post tells the full story.

Cattori and Dalgleish (Remix)

🗳 The folks behind the State of JavaScript survey have unveiled a new State of React survey to take. As with their other surveys, you get to test your knowledge as well as provide useful insights.

🔁 Shadow is a new, experimental browser engine built in JavaScript itself. It renders its output in your usual browser using an HTML canvas. Source code.

🔐 GitHub is scanning all public npm packages for leaked secrets. Note that if secrets are found, the provider associated with those secrets is notified.

❄️ WinterJS is a new JS Service Workers server, powered by Rust & SpiderMonkey.

🐥 Uh-oh, it’s Flappy Bird implemented in TypeScript types.

RELEASES:

Astro 3.4 – The Web framework gains page partials, a new experimental dev overlay, and more.

Visual Studio Code October 2023 – A couple of minor enhancements to the JS debugger, and Copilot Chat (if you have GitHub Copilot) can now provide better answers because it’s sent implementation details behind the symbols you mention.

jQuery 4.0 is 100% feature complete but it’s not released just yet.. but we know you can’t wait. Ditto for Angular 17 – more on that soon.

Rollup 4.2, Cypress 13.4, Ember.js 5.4, Stencil 4.7

📒 Articles & Tutorials

Speeding Up the JavaScript Ecosystem: Tailwind CSS — Marvin’s ongoing journey to improve our ecosystem by finding low-hanging performance-bearing fruit continues with a look at how the architecture of Tailwind CSS could be tuned.

Marvin Hagemeist

A New Way to Bring Garbage Collected Languages Efficiently to WebAssembly — WasmGC is a new and promising way to implement GC languages in WebAssembly and it’s now enabled by default in Chrome.

Alon Zakai (V8)

Generally Awesome UI Components For Project Management and Scheduling — Level up your UX with advanced data grids, calendars, schedulers, and Gantt charts.

Bryntum sponsor

▶  Your Website Does Not Need JavaScript — An hour long talk in which Amy builds a completely static website — using a collection of HTML and CSS files with no tracking, no scripting, no servers, and no third-party resources.

Amy Kapernick

Building a Generic RSS Parser Service with Cloudflare Workers — Ray walks through various iterations and improvements in trying to build an RSS parser that can work in the Workers environment.

Raymond Camden

Can Next.js Handle 5000 Pages? — Christian set out to push both Next.js and AWS Amplify hard. A good read.

Christian Nwamba

🗣 Is Express Still the ‘De-Facto’ Choice for Building Node.js Webapps?

Hacker News

🛠 Code & Tools

Svelte Flow: Node-Based UI for Svelte — From the creators of React Flow comes a Svelte version in the shape of a customizable Svelte component for building node-based editors and interactive diagrams. Check out the examples.

webkid GmbH

Docusaurus 3.0: Meta’s Static Site GeneratorDocusaurus is a popular React-powered tool aimed at building documentation sites, though it handles more general sites too. v3 features an upgrade to MDX v3, React 18, Mermaid v10, and essentially updates everything.

Sébastien Lorber

Get Logged Values Right Where You Need Them: In Your Editor — Simply start your editor, and your development server/test runner in watch mode, and see values next to your code. No setup required.

Wallaby Team sponsor

Hotkey 2.2: Declarative Keyboard Shortcuts for HTML — Set a data-hotkey attribute on your elements to quickly add keyboard shortcuts. v2.2 improves Mac alt/option support.

GitHub

Is Text or Binary? 7.0 — This library first tries to determine from a filename if the contents of the associated file are likely to be binary or text. Failing that, it can then look at the actual data to figure it out.

Bevry

<browser-window>: A Web Component to Create Pretend Browser Windows on the Web — A lightweight themed zero-dependency web component wrapper to emulate a Safari-like browser window within a Web page. The page full of demos might give you some ideas for its use.

Zach Leatherman

Add Authorization, MFA, Biometrics to Your JavaScript App in Minutes

FusionAuth sponsor

lossless-json: Parse JSON Without Losing Numeric Information — JSON.parse can trip over when it comes to large numbers, so this library parses numeric values not as regular numbers but in a lightweight lossless way keeping the value as a string.

Jos de Jong

Vueform: An Open Source Form Framework for Vue.js — This has been around for a while but is now MIT licensed. Its ancillary form builder app stays commercial, but isn’t mandatory for using the library. GitHub repo.

Vueform

sweetalert2 v11.9 – Customizable, accessible replacement for alert()

YouTube.js 7.0 – Wrapper around YouTube’s internal API.

eslint-plugin-unicorn 49 – Over 100 useful ESLint rules.

NOTABLE QUOTABLE

“If it doesn’t work, it doesn’t matter how fast it doesn’t work.”

___
Mich Ravera

💛 And something else we love

Val Town 3.0: A Social Way to Write and Deploy TypeScript“If GitHub Gists Could Run, and AWS Lambda Were Fun” is a fantastic description for this online platform where you write tiny bite size functions (‘val’s) to be run in V8 isolates. You can connect them together, schedule them, serve them up over HTTP, and more. Version 3 is a big jump for the platform, adding JSX support, more standardized JavaScript approaches to solving problems, and the ability to edit and run your ‘vals’ locally.

Steve Krouse

N|Solid OSS Release

Origin of N|Solid

In November of 2014, when NodeSource was still a small consulting group, my teammates Dan Shaw, Rod Vagg, and I were having dinner after a customer engagement, discussing how to bring Node.js production deployments to the same level of polish and tooling capability of the other runtimes our customers were already employing. The power and flexibility of Node.js helped it take off like a rocket, but the tooling to make sure that it was behaving properly had (and has) been a lot slower keeping up, or has used jury-rigged tooling designed for completely different runtime paradigms–effectively trying to shove a hexagonal peg into a square hole. There was a general lack of quality information, guidance, or practices around putting Node.js into production at all.

Achieving this sort of parity and filling these holes in the community required solving simultaneous problems: fitting Node.js into modern production infrastructures, having reliable deployments and meaningful success metrics for expanding and internally evangelizing Node.js adoption, and even sometimes simply to just have any idea of what is going on in these Node.js production systems at all.

Between our existing expertise with distributing Node.js builds and internal Node.js expertise itself we realized that if anyone was going to provide something like this for the Node.js Enterprise community, it would have to be us.

We have always believed and seen firsthand that there is a giant number of teams and organizations that could benefit from an augmented set of tooling. Over the years, many of the people working on N|Solid were also core team members to the Node.js project, keeping an eye on industry needs often being deferred by the project. Foremost of these people is Trevor Norris, who has been our expert with his hands deepest in the V8 and Node C++ internals and continues to drive the vision and details of the N|Solid runtime. The broader community shares many of the same values when it comes to performance and the flexibility of Javascript and the power of the community and its resources such as npm–but we wanted to focus our attention and efforts to support the needs of those of us running important, secure, high-throughput, production environments.

So we took it upon ourselves to tailor Node.js a business suit and help it work well with others. Part of what we came up with is what became N|Solid –an instrumented Node.js runtime and a purpose-built inspection console–a tool to both guide teams into a well-structured production environment as well as provide a devtools-like introspection and analysis interface to work with it. We wanted it to provide out-of-the-box compatibility for industry standard monitoring and other infrastructure tooling and harden its security profile, for example by disabling potentially unsafe features. Essentially, we wanted the ability to make decisions about the runtime that might make it less effective for small projects or experimental work in favor of a hardened runtime with guard rails, specifically designed to slot into best-practice production infrastructures.

An example of this was the ability to override core Buffer allocation to zero-fill allocated memory. It took two more Node.js LTS releases after the initial N|Solid release with this feature for Node.js core to come up with an upstream permanent solution to the problem. We were able to provide protection for our clients immediately and seamlessly transition them to the upstream solution when it became available.

The concept of N|Solid originated from our collective experience running Node.js applications in production and helping our customers with theirs. In addition, a good chunk of our business is helping people productionize and stabilize their Node.js environments, so we needed these tools in order to adequately research and analyze these customer issues. Much like any good product, its origin is building tools to solve our own problems first.

The Challenge of Node.js Observability

The fundamental nature of application performance is that everything going on in your code breaks down to CPU instructions and work that must be done. Instrumentation is also work, and the way it’s implemented can be extremely contentious with your own business logic, especially on platforms such as Node.js that have single-threaded bottlenecks such as the V8 event loop. Without a separate agent thread like the N|Solid agent, at some point the event loop must stop doing application work to collect metrics, crunch numbers, and send them over the line to the monitoring endpoint. This is your only option if your instrumentation is written in JavaScript and runs on the same event loop as the application.

N|Solid intentionally sequesters as much of this as possible to its own execution thread that works in parallel to Node.js. The work is still being done, but no longer in a way that is in contention with your own application for its single-threaded resources. This also enables us to detect and interact with a stuck Event Loop in a way that no other tool can.

Every tool you add to your platform to improve observability and capture information adds additional overhead. N|Solid aims to provide a single, low-overhead agent for sharing this across all of your tooling needs in a way that is extremely tightly bound to the specifics of Node.js.

Check out our benchmark tool to see how N|Solid compares when it comes to the cost of observability.

The Technical Details

Node.js is a small engine of amazingness; combining the V8 javascript engine with a core suite of libraries to provide an extremely fast and flexible runtime environment for javascript on the server. Developers generally approach runtime engines like little black boxes–as long as it runs their code the way they expect, what is actually going on doesn’t matter all that much. The reality is that the complexity around the asynchronous model Node.js uses being radically different from most other established platforms often results in confusion about what’s going on.

Considering all of our goals around what data we needed access to for both introspection and hardening and the additional goal of near-zero contention with application performance, we decided the only solution would be to build our own version of the runtime with our additional changes patched in. This also allows users to use N|Solid by simply using the nsolid binary as if it was the node binary–because it is! To your application, N|Solid is an environment change only, and can be tried without changing a single line of your application code.

There’s one small added complexity of doing it this way, though: we need to to make builds of N|Solid for every supported version of Node.js on every platform of node that our customers might require. This meant our changeset needed to be consistently applied across multiple changing upstream branches built on a build farm with every possible supported architecture. Fortunately, NodeSource was and remains the top community resource for making and distributing builds of Node.js – the odds are extremely good that if you’re using Node.js, we built it for you on the same servers we’re building N|Solid.

The rough architecture of N|Solid is a native C++ thread and a matching Javascript module built into Node.js directly that can access internal hooks and has the ability to send the results upstream in a variety of ways, such as OpenTelemetry or StatsD. Foremost among these is the N|Solid Console which provides fully wired access to all of the runtime features by making use of the bi-directional N|Solid Agent API. This bi-directional communication layer with the agent thread is what enables something akin to devtools, allowing limited interaction with a live Node.js process–even one potentially running in production environments.

It is vital that N|Solid retains 100% compatibility with Node.js, including the entire npm ecosystem. The community was and still is still seeing a significant amount of framework churn, we wanted to sit outside of the framework discussions because we understand just how many different frameworks are being used in production right now. We wanted to make sure we can support these frameworks in what they do, but also provide a tool for comparing and selecting between frameworks.

We want N|Solid to play well with others, so we made it aware of community practices and standards, such as package.json and common Node.js environments. As the project adopts new features and standards, N|Solid also adapts.

Our tooling is built around the runtime engine itself, treating each process (and potentially worker thread) as an individual unit, collecting a wide set of metrics and interactive introspection such as CPU profiling or Heap Snapshot collection from live processes without having stop them or start a canary process and hope that it reproduces the observable behavior. We found it essential to provide the ability to identify and inspect a suspect process while it is still alive, enabling you to interrogate the rogue process itself instead of the frustrating process of trying to reproduce the same behavior in a lab environment.

Node applications are often large microservice installations, sharing state across potentially thousands of processes. We wanted the N|Solid Console to be a tool to expose the information to a central repository that could manage and inspect the results and let you do some limited interactive introspection remotely. This central location for your entire production installation lets you see everything at a glance, but still dig into the details of individual processes. This coordination aspect of the N|Solid Console also allows it to compare different processes–read more about anomaly detection and snapshot diffing in our documentation.

N|Solid Features

Robust APIs: Benefit from JavaScript and C++ APIs’ flexibility and power.
Monitoring Data: N|Solid allows for the transmission of a wide array of monitoring data, encompassing system metrics, Event Loop Utilization, worker threads, and numerous specialized Node.js metrics to third-party providers such as Datadog, New Relic, and Dynatrace.
Open Telemetry and Tracing: Send Open Telemetry compatible traces to supported third-party providers, ensuring comprehensive observability.
StatsD Compatibility: Transmit monitoring information using StatsD to any compatible backend.
Environment Variable Utilization: Use all available environment variables at runtime.
Manual Control over CPU Profiles and Heap Snapshots: Gain the ability to manually capture CPU profiles and heap snapshots using the JS or C++ API.

The N|Solid release schedule is tied directly to the Node.js LTS release schedule. Due to how flexible development on what’s called the Current Node.js line, we wait until the release as been solidified into its LTS form prior to creating a N|Solid version. This means that all active LTS lines of Node.js have a corresponding N|Solid Release, and we aim to release new versions of N|Solid within 24 hours of the upstream Node.js LTS release. If you are stuck on a legacy version of Node.js, let our support team help you update to a current LTS version to ensure you are still getting vital security patches.

In summary, the N|Solid Runtime is the Node.js runtime, augmented with additional capabilities to enable what we saw as operational best practices. The N|Solid Console is the coordinated monitoring and introspection tool designed to fully leverage the N|Solid runtime and the combined experience of encountering and solving our own and our customer’s actual problems in production environments.

Why Open Source the N|Solid Runtime?

This is something we’ve considered for many years. We have always been a strong supporter of the community and believe in the immense value and impact of open-source. We have remained committed to the Node.js ecosystem as active contributors and being a leading distributor of the OSS binary packages.

Earlier this year we came to the conclusion that the timing was right, our development roadmap had reached a point where we had something meaningful to provide to the community and we could continue to deliver the value and support our Enterprise and SaaS customers expect from our commercial offering. Further, we envision that the collaboration with the global developer community will create a brighter and more innovative future for N|Solid and set a new standard for enterprise needs.

We think everyone should be running N|Solid on their business platforms where they are using Node.js. Throughout its existence, we’ve focused on compatibility with other production tooling–even those we compete with–because most of these are not tightly coupled to Node.js. Usually they are polyglot and must cater to the lowest commonality between platforms. We want to encourage the proliferation of N|Solid and the advancement of Node-paradigm specific tooling by putting the runtime directly into the hands of the Open Source community. We see an opportunity for developers to build new connectors and integrations with other tools and support the collective creativity of the community. We get the chance to foster even greater collaboration and partnerships with other providers that want to add the value of N|Solid to their own platforms and tools.

We’re open source engineers at heart, we believe in the power of community code and that having the source available creates an environment of trust and empowerment. We feel like we’ve only been able to scratch the surface of what’s possible here and want to bring the community into the project and we hope that we can get you all excited about it too.

Read more about how to get involved in our contribution guidelines!

The Future of N|Solid

We have a lot of plans already for N|Solid and welcome you to participate in their development. These are some of our upcoming initiatives:

Custom Metrics: Capture and transport your own application-specific metrics via the N|Solid API
Heap Profiling: Locate memory leaks by profiling memory allocation over time
Async Stack Traces: Connect stack traces across the libuv boundary
Improved APM Integrations: Allow APM vendors to use the N|Solid agent thread for metrics calculation and transport to move overhead off of the main process
Implement OpenTelemetry standard for metrics
Implement OpenTelemetry standard for logging

These aren’t our only ideas, and we’re interested to see what the community comes up with as well. Expect to hear more about our plans as we continue work through the open source release and documentation process. There are so many potential valuable integrations throughout the development process from IDEs through CI/CD through production tooling–we can’t wait to see where we can take this together!

Backed by the NodeSource Team

N|Solid is backed by the entire NodeSource team, and for those who want a hand in adopting N|Solid or Node.js, we are here to help. From installation and configuration to upgrades, troubleshooting, and performance tuning, our engineers can support your team at every stage in the application development lifecycle.

Web Components forever?

#​660 — October 26, 2023

Read on the Web

JavaScript Weekly

Transformers.js 2.7: ML for the Web, Now with Text-to-SpeechTransformers.js provides access to machine learning models directly in the browser for all sorts of tasks and v2.7 introduces audio generation (live demo.) The Web Speech API remains the natural choice for this task for now, but the ML approach will only continue to offer greater opportunities over time.

Joshua Lochner

🔥  Web Components Will Outlive Your JavaScript Framework — It’s a spicy opinion piece but I think Jake has earned the right after his fantastic posts on CRDTs in which he focused on using vanilla JS web components rather than a system like React. Here, he explains why.

Jake Lazaroff

🗣 Jake’s post fuelled an extensive Hacker News discussion touching on everything from MDX and htmx‘s role, to state management and the ‘shallow’ nature of the Web Components API as-is.

Production Ready Postgres at Your Fingertips — Deploy a faster and more reliable Postgres cluster. Run in the cloud of your choice with management, backups, and production features handled for you. Get started with less than 5 minutes. Try it today.

Crunchy Bridge sponsor

Yarn 4.0 Released — Starting life as an npm alternative that resolved several of its major pain points, Yarn remains a popular choice and v4 introduces a new ‘hardened mode’ to protect you from various security issues, boasts an improved constraints engine, and has performance (almost) on par with pnpm.

Maël Nison

Node v21.1 (Current) Released with ESM Detection Feature“The new flag –experimental-detect-module can be used to automatically run ES modules when their syntax can be detected. … We hope to make detection enabled by default in a future version..”

Michaël Zasso

🐦 The React team has announced the much anticipated Server Actions and Client Actions features are now available in React Canary.

📣 The Angular team is cooking up something big with Angular 17. Minko Gechev has teased a long, forthcoming release post and they’re encouraging us all to set a notification for Nov 6’s ▶️ live streamed ‘Special Angular Event’ on YouTube.

🎨 Photopea is a neat online image editor, but there’s now Vectorpea, a browser-based vector editor, a la Illustrator.

🤗 If you want to take initial steps into contributing to open source JavaScript projects on GitHub, verto.sh has curated a collection of projects to check out.

RELEASES:

p5.js 1.8 – Processing-inspired creative coding environment. v1.8 has some WebGL related improvements.

Node v20.9.0 (LTS) – Node v20 finally becomes the newest ‘active LTS’ release and has the codename ‘Iron.’

Billboard.js 3.10 – Rich charting library.

Bun 1.0.7

📒 Articles & Tutorials

Svelte by Example: A Gentle Introduction — A succinct, gentle, and code-focused introduction to Svelte and SvelteKit.

Sebastian De Deyne

‘Why I Won’t Use Next.js’ — From the perspective of web standards to concerns about increasing complexity, Kent C. Dodds shares his opinions on why he won’t use Next.js. It’s spicy and opinionated, but always thoughtful. (In other Kent news, he’s just launched Epic Web, his new full-stack webapp development course.)

Kent C. Dodds

Product for Engineers: A Newsletter Helping Flex Your Product Muscle — Subscribe to get curated advice on building great products, lessons from PostHog, and best practices of top startups.

PostHog sponsor

Goodbye, Node.js Buffer — Given Sindre’s gigantic number of libraries, he could possibly migrate half the ecosystem solo.. 😏 but he sets out a case for discouraging the use of Buffer in favor of the cross-platform Uint8Array, and explains how to make the move.

Sindre Sorhus

Changing Colors in an SVG Element with CSS and JavaScript — Almost everything inside an inline SVG image is up for modification using CSS and JS.

Kirupa Chinnathambi

ES Module Imports in Node.js and the Browser — Just a quick example/handy recap of the basic setup.

Eli Bendersky

Playing with the Gamepad API — One developer’s attempt to get JavaScript games ready to use controllers in the browser.

Alvaro Montoro

Using Cloudflare’s AI Workers to Add Translations to PDFs

Raymond Camden

▶  My Problem with Using TypeScript in 2023

James Q Quick

▶  Vue 3 for Beginners — A mega three hour workshop on YouTube.

Allan Jeremy

🛠 Code & Tools

Radix Vue 1.0: Unstyled, Accessible Components for Vue.js — An unofficial Vue port of the popular Radix UI component library. GitHub repo.

zernonia et al.

React Magic Motion: Automagical Animation for Components — Built on top of Framer Motion so you get all of its features, but with opinionated, default transitions for child components.

Etesam Ansari

No-Code Machine Learning on the Simplest Development Platform ‑ Catalyst

QuickML – Catalyst by Zoho sponsor

background-removal: Remove Image Backgrounds in JS — Wipe away backgrounds in both Node and the browser (so there’s a live demo) without relying on third party services. It does use a large pre-trained model to do this, however, and is GPL licensed, so your mileage may vary.

img․ly

Wireit: Makes npm/Yarn Scripts Smarter, More Efficient — Working with npm run and not replacing it, Wireit extends your scripts with features like result caching, parallelization, and re-running on changes.

Google

📈 Perspective 2.6 – Data visualization and analytics component, suited for streaming or large dataset use cases, with a mildly hypnotic, rapidly updating homepage (above)GitHub repo.

📋 Clipboardy 4.0 – Access the system clipboard from Node and browsers.

npm-publish 3.0 – GitHub Action to publish packages to npm.

http-fake-backend 5.0 – Build a fake backend by providing JSON.

Opal 1.8 – Ruby to JavaScript transpiler.

Never Stop Learning and Work #LikeABosch — At Bosch, you always keep growing. Upskill yourself into countless new roles, positions and opportunities. Learn more.

Bosch sponsor

MDX 3.0 – Use JSX in Markdown documents.

Size Limit 10 – Performance budget tool for JavaScript.

Jotai 2.5 – Atomic global React state management.

Protobuf-ES 1.4 – Protocol Buffers for JS/TS.

NodeBB 3.5 – Node.js-powered forum system.

QUOTABLE:

“There are two methods in software design. One is to make the program so simple, there are obviously no errors. The other is to make it so complicated, there are no obvious errors.”

___
Tony Hoare, inventor of the quicksort algorithm.

See How Much Your APM is Costing You to Monitor Node.js Apps

We are excited to share the release of our new Cost Calculator to showcase just how much the wrong APM provider can add to your cloud hosting costs (try it now). Observability is vital, but it comes with computational overhead that shares the same infrastructure as your application. This is compounded in typical Node.js APM tooling due to the internal workings of Node.js itself. We are performance junkies at NodeSource, so observability without overhead was our first and foremost goal with the original architecture of the N|Solid Runtime. (Of course we didn’t stop there and also provide the deepest insights into your application.) With our new Cost Calculator, you can see just how much using the wrong APM tool can hurt. (WARNING: you may be shocked at the difference!).

As you can see…the difference can be shocking. At NodeSource before anything else we’re Node.js developers. We were tired of being burnt ourselves by the additional overhead costs of observability and we kept seeing it over and over for our customers as well. So we decided to build and open source a benchmarking tool (https://benchmark.nodesource.com) to raise awareness of the issue. With it you can compare throughput and other differences between common Node.js observability tooling options.

With the APM performance dashboard we can see just how much APMs impact application performance across a number of areas, and choosing incorrectly can reduce the potential throughput of your application by tens of thousands of requests per second. For more information about why this happens, check out this article by our VP of Engineering Adrián Estrada who provides a comprehensive analysis.

📗 Read the full blog post here: In-depth Analysis of the Performance Costs of APMs in Node.js.

How to use the Node Observability Cost Calculator

It’s really easy to use, simply select an Observability Provider (Appdynamics, Datadog, Dynatrace, Instana, or New Relic), then your cloud provider (AWS, Azure, or GCP). From the Infrastructure Service dropdown you can select the service type and then choose from a list of options. Now enter the number of Processes you are monitoring, and see the savings!

Why APM performance matters, beyond the cost savings

Our Cost Calculator should quickly show you just how much you could save by using N|Solid over the competition without giving up observability. It’s easy to overlook the fact that your APM tooling is sharing the same processing time as your application and slowing it down. A big reason why developers and organizations love Node is for its performance, so why add overhead that slows it down? Why pay twice for observability?

(BTW – OpenTelemetry adds significant overhead too, we included it in our benchmark)

The great news is you don’t have to! Add N|solid to your stack today, and begin getting the best observability tooling (plus application security monitoring with NCM – Node Certified Modules) with the least overhead. Start here for FREE.

🛠️ Check the Infrastructure Cost Calculator today! – Infrastructure cost calculator – Nodesource
Review the ✨APM Performance Dashboard✨- https://benchmark.nodesource.com
💚 Contribute here: https://github.com/nodesource/node-APMs-benchmark