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

Ways to serve up less JavaScript

#​659 — October 19, 2023

Read on the Web

JavaScript Weekly

ApexCharts: Interactive Charting and Dataviz Library — A mature and frequently updated charting library for building interactive data visualizations, whether with sparklines, heatmaps, line charts, funnel charts, pies, and others. There are many visual demos and code samples – or check out their homepage.

Juned Chhipa

Node.js 21 Released — In the next week or so, Node v21 replaces v20 as the ‘current’ release that gets the new features first, with Node v20 becoming the ‘active’ LTS version. v21 introduces V8 11.8, npm 10.2, stable Web Streams support, and an experimental browser-compatible WebSocket implementation.

The Node.js Project

Need SAML Auth? Use WorkOS — WorkOS lets you quickly build enterprise features like SAML & SCIM. Integration is seamless with beautiful API docs and SDKs. Join hundreds of companies using WorkOS—including Vercel, PlanetScale & Webflow—and make your app Enterprise Ready today.

WorkOS sponsor

Eight Options to Reduce JavaScript Code — Solid.js creator Ryan Carniato thinks it’s time to reduce the footprint of JavaScript code. Here’s a two part series covering several approaches, covering areas from code splitting to progressive hydration and hybrid routing.

Loraine Lawson (The New Stack)

🔢 TC39 has started a new task group to standardize source maps.

📊 Colin Eberhardt goes over The State of WebAssembly 2023 results.

🕹 The latest React Jam gamedev event began today. You get ten days to create a game that uses React in some way. Here are previous winning entries.

👾 In other gamedev news, you can see the latest js13kGames winners too. It’s amazing what some people can put together in such little space.

😆 It turns out obfuscating JavaScript and then compressing it doesn’t have a great outcome in terms of size reduction. Fun though?

🎨 The Node.js project has an official mascot design contest.

🎉 RELEASES:

TanStack Query v5 – Query-led declarative state management and data fetching.

Storybook 7.5 – Frontend component dev tool. Now with Vite 5 and Lit 3 support, faster starts, and Angular-focused improvements.

Lit 3.0 – Build agnostic components on top of modern Web standards.

Rockpack 4.0 – React app starter/generator.

Astro 3.3, Biome 1.3, and Bun 1.0.6.

📒 Articles & Tutorials

The Nuances of Base64 Encoding Strings in JavaScript — Base64 provides a way to represent binary data in ASCII strings which may be safer to share and store in certain situations. Matt looks at how to do Base64 encoding and decoding in JavaScript and some areas where you need to take special care.

Matt Joseph

event.target.closest — If you’ve not used closest, it’s worth being aware of this way to return the closest DOM node that matches a specified CSS selector (based upon traversal of the DOM tree up towards the root).

Jeremy Keith

UI Component Library for Project Management and Resource Planning — Level up your UI with advanced data grids, calendars, schedulers, and Gantt charts.

Bryntum sponsor

▶  Prototyping a JavaScript JIT Compiler — It almost feels like building a JIT compiler has become the new “hello world” (ok, slight exaggeration) but this 80 minute screencast is fascinating (and, amazingly, demystifies some of the magic) if you have the time and inclination.

Andreas Kling

🤩 Andreas is such a top notch developer, he’s developed a JavaScript-capable browser called Ladybird for his own OS: SerenityOS.

New Angular 17 Feature: Deferred Loading — Next level lazy-loading demonstrated by using a Signal-based and other examples.

Gergely Szerovay

Do We Need State Management in Angular?

Balázs Kovács

How to Escape CSS Selectors in JavaScript

Stefan Judis

🛠 Code & Tools

Postgres.js 3.4: A Full-Featured Postgres Client for All — Now working with several JavaScript platforms (Node, Deno, Bun, and, as of this release, Cloudflare), this high performance Postgres library offers realtime change subscription, dynamic query building via special template literals, high availability support via multi-host connection URLs, async cursors, and more.

Rasmus Porsager

New Wallaby.js Logpoints: Quick & Easy Logging, Simply Set a Breakpoint — No setup needed, real-time feedback in your editor. Class & function support allows you to quickly log runtime values for all lines in a class or function.

Wallaby Team sponsor

PureImage: A Pure JS HTML Canvas 2D for Node.js — If you want a browser-like 2D canvas experience in Node but without any native dependencies, this is for you. You can then save the output to PNG or JPEG. (node-canvas is the long-standing popular choice in this same area but relies upon Cairo as a dependency.)

Josh Marinacci

Cronicle: A Cron System with a Web Front End — Describing itself as ‘a fancy cron replacement’, Cronicle is a task scheduler and runner built in Node.js with a web-based UI.

Joseph Huckaby

Timeline JS: Create Useful Timelines for the Web — Built by a journalism lab at a university, this is not aimed at expert developers but folks focused on telling a story or presenting some data online. Here’s an example showing a timeline of ‘revolutionary user interfaces.’

Northwestern University Knight Lab

Add Figma Like Collaborative Features Without Re-Architecting Your App

Ably sponsor

table-saw: A Small Web Component for Responsive HTML Tables — Inspired by a jQuery plugin with a similar name. Check out some some demos.

Zach Leatherman

eslint-plugin-regexp 2.0 – ESLint plugin to find regex related issues. (Interactive demo.)

little-rat – Chrome extension to monitor (and block) other extensions’ network calls.

Sortable 3.0 – Make tables sortable with class=”sortable”

AdminJS 7.3 – Automatic admin interface for Node apps.

Shoelace 2.10 – Suite of elegant web components.

Recharts 2.9 – React and D3 charting library.

Fable 4.3 – F# to JavaScript compiler.

🎁 And one for luck..

QX82: Retro-Inspired Computing in a JavaScript Library — With a name riffing on the ZX81 computer, QX82’s goal is to let you create retro-feeling (mid 80s, to be precise) games and experiences with JavaScript. It’s not a runtime or emulator – you could bake this into your own web site, if you wanted.

Bruno Oliveira

Fluid simulation in JavaScript

#​658 — October 12, 2023

Read on the Web

✍️ Due to being on the road at an event, this is a more compact and bijou issue but I’m back at full pace next week 😅
__
Peter Cooper, your editor

JavaScript Weekly

Speeding Up the JS Ecosystem: The Barrel File Debacle — Marvin continues his tour through the world of JavaScript performance fixes with a look at how some innocent looking code can make tools run slower than they should. Test runners and many import cycle detection tools are most affected.

Marvin Hagemeister

🌊  Building a Water/Fluid Simulation in JavaScript — Hard to explain, but a lot of thought and care has gone into this tutorial of sorts. The live demos are nice, too. Uses p5.js behind the scenes.

Kenichi Yoneda

Strongly Typed and in the ⛅: Meet EdgeDB 4.0 — EdgeDB is an open-source database focused on developer experience. It features a high-level, modern data model, integrated schema migrations, and a TypeScript query builder that makes it easy to write advanced, fast queries, putting ORMs to shame.

EdgeDB sponsor

Angular and Qwik’s Creator on How JS Frameworks Handle Reactivity — A summary of Miško Hevery’s keynote from the International JavaScript Conference looking at reactivity across the major frameworks.

Loraine Lawson (The New Stack)

A Web Server ‘Hello World’ Benchmark: Go vs Node vs Nim vs Bun — The standard disclaimer applies: benchmarks are difficult and don’t always measure what you should care about.

Daniel Lemire

👀 Simon Willison has put together a fantastic live demo (in notebook format) showing off how to do client-side object detection in images using solely JavaScript and a neural network. (Note: Be aware this uses a lot of CPU and may slow your browser down.)

▶️ ViteConf 2023 took place last week and some of the talks are already available on YouTube. 🐦 One key bit of news is about Rolldown, a Rust port of Rollup, meaning Vite will get even faster in the medium term.

⚙️ Stephen Röttger of the V8 team has blogged about efforts to enable control-flow integrity (CFI) in V8, essentially a way to reduce the ability of nefarious third parties to exploit V8’s control flow in order to trigger arbitrary shellcode.

⚠️ A look at the potential dangers of regular expressions in JavaScript.

👾 An interesting post mortem of a game built in just 13KB for the JS13K contest.

🎉 RELEASES:

Electron 27 – The cross-platform desktop app toolkit gains Chromium 118, Node.js 18.17.1, and V8 11.8, but loses macOS 10.13/14 support.

Fresh 1.5 – A Deno-native framework for building full-stack webapps. v1.5 adds support for partials – the ability to update a portion of an existing page.

Parcel 2.10 – The zero-config build tool gets some serious performance improvements (7x faster on large projects). Devon Govett wrote 🐦 a Twitter thread explaining how.

Bun 1.0.5 – Mostly bug fixes and gentle improvements for the performance-oriented JS runtime. No HTTP/2 yet, but it’s just around the corner..

Solid 1.8 – Declarative and performant reactivity for building UIs.

🛠 Code & Tools

Evidence: Reports Synced to Your Data with SQL and Markdown — An open source, code-based alternative to drag-and-drop business intelligence tools. ▶️ This nine minute screencast does a good job at showing off what it can do.

Evidence

Payload 2.0: A Headless CMS Platform Built on Node — A Node-based headless CMS providing an app framework-like experience, including a customizable React-based admin system, GraphQL or REST APIs, flexible auth and file upload systems, etc. v2.0 introduces Postgres support (in addition to MongoDB), Vite support, and a new rich text editor. GitHub repo.

James Mikrut

Add Figma Like Collaborative Features Without Re-Architecting Your App — Create collaborative features, from live cursors to avatar stacks with Spaces, our in-app collaboration SDK.

Ably sponsor

Visual Studio Code Extension Tester v5.10 — A framework for simulating user interactions with VS Code and its extensions via Selenium Webdriver.

Red Hat

audioMotion-analyzer: Real-Time Audio Spectrum Analyzer — A high-resolution real-time audio spectrum analyzer JavaScript module with no dependencies. Gives a single or dual channel view. (Note the AGPL license.) GitHub repo.

Henrique Avila Vianna

Hotkey 2.1 – Add keyboard shortcuts to pages through HTML attributes (e.g. data-hotkey=”Meta+d”). Built by GitHub and used on github․com itself.

React-Menu 4.1 – Component for building accessible menus and dropdowns.

Ionic 7.5 – Build cross-platform mobile apps with JavaScript.

pnpm 8.9 – The alternative, efficient package manager.

Highlight.js 11.9 – Popular JS syntax highlighting library.

Node.js v18.18.1 (LTS) – To fix a regression in v18.18.0.

💻 Jobs

Apply Now and Work #LikeABosch — Our promise to our associates is rock-solid: we grow together, enjoy our work & inspire each other. Join in & feel the difference.

Bosch

“The art of debugging is figuring out what you really told your program to do rather than what you thought you told it to do.”

___
Andrew Singer

Comparing test assertion styles in JavaScript

#​657 — October 5, 2023

Read on the Web

JavaScript Weekly

An Interactive Intro to CRDTs — Conflict-free replicated data types (the so-called CRDTs) provide a popular approach to replicate data across numerous clients and allow live collaboration between them without conflicts. This post really digs into what makes CRDTs tick well, complete with interactive examples.

Jake Lazaroff

Test Assertion Styles in JavaScript — Isaac, fundamental to the development of npm and the growth of Node, shares his thoughts on the two main approaches common in JavaScript testing APIs and which he prefers best.

Isaac Z. Schlueter

Free Course: Land a Software Engineering Role — Jerome Hardaway has helps over 300 folks get a software development job — now he shares his advice in this video course — featuring resume tips, networking advice, how to optimize your GitHub profile for technical scrutiny, and more.

Frontend Masters sponsor

🔵 TypeScript 5.3 beta has been released with improved support for import attributes, improved type narrowing in numerous situations, and inlay hints in VS Code can now jump you to the type’s definition.

🔐 npm provenance is now generally available on the main npm registry. Here’s a live example.

🎨 Adobe officially launched its version of Photoshop for the Web last week and Addy Osmani wrote a great post showing off all the web technologies it took to make it happen. The modern browser is a powerhouse!

🏠 In June we featured val.town, an interesting site where you can write and deploy TypeScript in a social and serverless fashion. Big changes are coming in the shape of Val Town v3. A platform to watch.

🤔 Was JavaScript really made in 10 days? It’s complicated.

⚠️ The forthcoming ESLint 9.0 is a significant enough release that you might want to prepare your custom rules for it in advance.

🎉 RELEASES:

Node v20.8.0 (Current) – Key performance improvements for streams.

Sinon 16.1 – Provides test spies, stubs and mocks.

Astro 3.2, Redux Toolkit 1.9.7, and pnpm 8.8

📒 Articles & Tutorials

‘Strong Static Typing, A Hill I’m Willing to Die On…’ — Starting off with TypeScript and moving on to Rust, the author shares why he feels so strongly that when it comes to having static types in a language, there really is no argument. (This then led to extensive discussion on Hacker News.)

Tom Hacohen

📗  The Story of Third-Party JavaScript (The Book) — Manning published a book by Ben Vinegar and Anton Kovalyov ten years ago that was entirely focused on writing JavaScript to run on other people’s sites – quite apt as the authors worked at Disqus at the time! This post isn’t about the topic itself but goes deep into how the book came together and how well it did.

Ben Vinegar

📅  JetBrains JavaScript Day 2023: A Virtual Event You Won’t Want to Miss — Get up to speed with modern JavaScript and TypeScript development in just one day.

JetBrains sponsor

Working with a TypeScript Monorepo with npm Workspaces — npm’s workspaces feature makes it easier to manage multiple packages within a single top-level package/monorepo.

Dmitry Kudryavtsev

Test Your React Libraries Locally with YalcYalc simplifies the process of working with and ‘publishing’ packages entirely locally so you can try things out without publishing to a remote, and potentially public, registry.

Andrew Israel (PropelAuth Blog)

▶  Let’s Create a Filter Table Component in Vue

Andrew Schmelyun

Integrating Slonik with Express.js — A type-safe Postgres client library.

Gajus Kuizinas

Next.js 13 vs Remix: A Case Study

Prateek Surana

Using the Intl Segmenter API

Kilian Valkhof

🛠 Code & Tools

Tailwind Elements 1.0: 500+ Bootstrap Components Recreated with Tailwind — Claims to offer more functionality compared to Bootstrap and follows a ‘minimal’ Material-esque design language for user familiarity. Easily integrates with Angular, Vue, etc.

Tailwind Elements

Lite YouTube Embed 0.3: A Faster Youtube Embed — Faster than the official one, at least. v0.3 implements reliable autoplay. There’s a live demo here.

Paul Irish

Day.js: A 2KB Immutable Date Library — Pitched as a Moment.js alternative with a mostly compatible API, Day is a smaller library for parsing, validating, manipulating, and displaying dates and times.

iamkun

Stop Feeling Lost and Inefficient When Debugging via console.log — See console.log output and runtime errors alongside your code. No config, no setup, no hassle. Supports Vite, Bun, Webpack, Next.js, Remix, and more.

Wallaby Team sponsor

Viselect: Let Users Visually Select DOM Elements — If you’ve got a variety of elements and you want users to be able to select them in groups, individually, or even in multiple groups, this lets you offer that functionality easily. Can be used in a vanilla fashion or with integrations for React or Vue.js.

Simon Reinisch

Tailwind Next.js Starter Blog 2.0: A Starter Template for a Next.js Blog — An up-to-date template using the modern Next.js app directory structure along with server components. A full explanation of the updates.

Timothy Lin

Kaluma: A Tiny JS Runtime for the Raspberry Pi Pico — Can you get a JavaScript runtime into the 64KB necessary to run on the Raspberry Pi Pico (which uses the RP2040 microcontroller)? Kaluma can.

Kaluma Project

sort-on 6.0: Sort Arrays on an Object Property — Short & sweet. Samples.

Sindre Sorhus

Craft.js 0.2: A React Framework for Building Drag and Drop Page Editors — It’s a bold move to make the landing page for your project be a text editor itself, but we like it. GitHub repo.

Prev Wong

Create Collaborative Apps Like Figma and Miro in Days with Ably

Ably sponsor

📅 React Native Big Calendar 4.3 – A Google Calendar/Outlook-style large calendar control.

📊 Lightweight Charts 4.1 – High performance financial charting for canvases. Release notes.

CKEditor5 40.0 – Commercial rich text editor framework. Now with an AI assistant feature.

article-extractor 8.0 – Extract article content for a URL in Node.

Shaka Player 4.5 – Library to play adaptive media formats (DASH, HLS and MSS).

Ziggy 1.7 – Use Laravel named routes in JavaScript.

Marked 9.1 – Markdown parser & compiler.

💻 Jobs

Apply Now and Work #LikeABosch — Our promise to our associates is rock-solid: we grow together, enjoy our work & inspire each other. Join in & feel the difference.

Bosch

Frontend Developer 🚀 (Remote, Work from Anywhere 🏖️) — Enjoy TypeScript, React, GraphQL and performance? Join in building our super-fast headless commerce service with a beautiful UI.

Crystallize

🎁 A VS Code Bonus

Awesome VS Code: A Curated List of Themes and Extensions — Yep, it’s one of those ‘awesome’ lists, but it’s packed not only with links to themes and useful extensions, but it has screenshots for most of them too. Skim through, something will jump out at you.

Valerii Iatsko