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

Getting some closure

#​656 — September 28, 2023

Read on the Web

JavaScript Weekly

The Saga of Google’s Closure Compiler — Dan looks back at Google’s Closure Compiler, a JavaScript transpiler Google built in 2004 and used most heavily in the pre-TypeScript era to reduce the size of JavaScript files, check types, and otherwise handle common pitfalls. A neat bit of JavaScript history.

Dan Vanderkam

Speeding up the JavaScript Ecosystem: Polyfills Gone Rogue — Marvin’s mission to speed up popular libraries continues. First blogging on the topic last year, now he’s looking at the role polyfills play in making packages large and inefficient. There are two sides to every story, though, as this Hacker News thread found.

Marvin Hagemeister

Building Cross-Platform Desktop Apps with Electron — In this detailed video course Steve Kinney shares how to build robust, user-friendly Electron-based desktop apps, covering key concepts like main and renderer processes, inter-process communication, security, and more.

Frontend Masters sponsor

⚡️ IN BRIEF:

🐦 TC39 met earlier today and advanced several proposals including RegExp escaping and resizable ArrayBuffers (and nixed two, including Symbol.thenable).

If possible, please take the State of HTML 2023 survey. Your answers could help determine what features browsers focus on next! And if you don’t believe me, let Lea Verou convince you.

Verticalize introduces a vertical pipe-like function to JavaScript to help you chain operations together in a more visually appealing way, but.. it’s certainly a matter of taste.

The Preact team has an update on Preact Signals, their take on reactive programming.

Engineers from Vercel and Cloudflare have published a draft spec for a Sockets API for non-browser runtimes. Here’s why this all matters.

📱 Strada is a new library from 37signals that bridges the gap between server-rendered HTML and native controls in hybrid mobile apps. Here’s how it looks in practice.

Publishing packages with npm provenance is now generally available.

Cloudflare Workers is a popular serverless platform for running JavaScript functions at the edge and it now has an all new pricing model that’s certainly a lot more appealing.

🎉 RELEASES:

Shoelace 2.9 – Suite of framework agnostic components. Changelog.

Dependency Cruiser 14.0 – Visualize & validate dependencies.

Ember 5.3, pnpm 8.8, and Bit 1.0.

📒 Articles & Tutorials

One Thing Nobody Explained To You About TypeScript — The author makes a strong case for creating a separate tsconfig.json for each environment your code runs in: “Today, I write about one thing about configuring TypeScript that took me years to realize. I’m sure you’re making the same mistake as I did.”

Artem Zakharchenko

Upgrading Frontend Dependencies with Confidence — Writing tests for logic in our apps is easy, but how can you determine if a component isn’t rendering properly? Visual regression testing. Here’s a workflow based on GitHub Actions, Playwright, and Argos.

Sébastien Lorber

React Authentication — Without Complexity — Userfront streamlines authentication & access control so engineers can focus on their core business. Read the docs now.

Userfront sponsor

Understanding the Modulo % Operator — Tackles the oft misunderstood operator in Josh’s visual, beginner-friendly style.

Josh W Comeau

 Why the Temporal API is Awesome — It’s still a stage 3 proposal, but the Temporal API works around some of Date’s limitations without third-party libraries.

Taro Dragan

Drawing on Google Maps with Drawing Manager — A particularly thorough, code-rich followup to Integrating Google Maps in React.

Pavlo Chabanenko (Sudolabs)

Thoughts on Svelte 5 as a 3+ Year Full-Time Svelte Dev — Thoughts that lead to the proposal of Pelte, an attempt to spark conversation rather than a real tool (so far).

Filip Tangen

The Forecast For Your Next Database: Strongly Typed and Cloudy

EdgeDB sponsor

Building Token Based Authentication with JWTs on Fastify

Arif Imran

The Angular Renaissance: Why Frontend Devs Should Revisit It

Loraine Lawson (The New Stack)

How React Server Components Made Our Site Faster

Christian Mathiesen (Frigade)

Replacing RxJS with a State Machine

Ben Nadel

🛠 Code & Tools

Tesseract.js 5.0: JavaScript OCR for 100+ Languages — A port of the C++-based Tesseract library used to extract text from images. v5.0 is a big deal as there are huge file size reductions resulting in a 50% decrease in runtime size, a similar reduction in memory use, and iOS 17 compatiblity. GitHub repo.

Tesseract Team

ChatGPT.js: A Library for Working with ChatGPT via the DOM — Includes a fairly extensive API that lets you interact with ChatGPT for use in Chrome extensions, Tampermonkey scripts, and so on.

KudoAI

Industry-Leading JavaScript Components for the Web — Build your apps with powerful JavaScript developer tools including reporting solutions, spreadsheets, and UI components.

GrapeCity sponsor

Instant.dev: A New Postgres-Focused ORM for JavaScript — Aims to introduce a more Ruby on Rails/Active Record-style experience to the increasingly rich JavaScript ORM ecosystem.

instant․dev

Chardet 2.0: Character Encoding Detection Library — It uses statistical methods to determine the most likely encoding of a supplied buffer, string, or file, from a selection of about 30.

Dmitry Shirokov

👾  n64js: A Nintendo 64 Emulator in JavaScript — There’s a Web-based version to try (if you have the right files) or just ▶️ watch a video.

Paul Holden

🗓 React Chrono 2.3 – Timeline component. Some examples.

ip-address 9.0 – Parse & manipulate IPv4/6 addresses.

Sonner 1.0 – Toast notifications React component.

Jazzer.js 2.0 – In-process fuzzing for Node.js.

JZZ 1.7 – MIDI library for Node and browsers.

Preact 10.18.0

esbuild 0.19.4

💻 Jobs

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

Full-Stack Engineer, Remote in EU or Berlin — Join our small team to build an insurance product that people love. We use React, TypeScript, Prisma, NestJS and more.

Feather

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

🕹 The hardest JavaScript game ever?

JS Crush: Match Values That Are Equal in JS — The author’s comment that this is “a game that mocks JS equality quirks, the most absurd feature of the language” should put you in the right frame of mind for giving this Candy Crush-inspired casual game a go!

Herrington Darkholme

P.S. I’m encountering folks who haven’t heard about the ▶️ TypeScript Origins documentary we featured last week, so I wanted to mention it again in case you have the time spare. I enjoyed it and learned a lot too.

Microsoft spills the tea on TypeScript

#​655 — September 21, 2023

Read on the Web

JavaScript Weekly

▶  TypeScript Origins: The Documentary — You know you’ve made it when you get your own documentary! This has just dropped but is well produced, packed with stories from TypeScript’s co-creators, users, and other folks at Microsoft, and kept me entertained. It goes particularly deep into the motivations and process behind its creation, including why Microsoft felt it was worth pursuing.

OfferZen Origins

🔥 The takes get spicer 25+ minutes in as various TypeScript users chip in with their opinions, and even Daniel Rosenwasser, now program manager of the TypeScript team, says he initially worried that Microsoft might “f**k it all up.” 😅 Ryan Dahl pops up about an hour in too.. so I hope you’ve got some time spare.

Patterns for Reactivity with Modern Vanilla JavaScript — When data changes, you often want to do things, and the process that makes that happen is reactivity. While many libraries or frameworks like React or Vue offer reactive solutions out of the box, you can do it all with vanilla JavaScript too, and this post digs into many of the patterns you might need to use, complete with examples.

Marc Grabanski

Handsontable: Data Grid With Spreadsheet Superpowers — There are a lot of JavaScript data grids out there, but none are quite like Handsontable. Its Excel-like design, keyboard shortcuts, and navigation make it the perfect tool for developers.

Handsontable sponsor

Deno 1.37: Modern JavaScript in Jupyter Notebooks — Not content to let Bun take all the headlines, Deno has come up with something pretty neat here. Deno 1.37 ships with a Jupyter Notebook integration so you can create interactive REPL sessions but using the JavaScript you know and love, rather than Python.

The Deno Team

JavaScript Minification Benchmarks — A frequently updated benchmark suite and results comparing the speed and quality of JavaScript minification across a variety of tools including esbuild, Babel, Bun, SWC, and Uglify.

Hiroki Osame

⚡️ IN BRIEF:

The Svelte team offers a sneak peek at the forthcoming Svelte 5 and introduces the idea of ‘runes’: “Like every other framework, we’ve come to the realisation that Knockout was right all along.”

Happy 27th birthday to JScript! JScript was a version of JavaScript that Microsoft put into IE 3.0 primarily to avoid trademark issues around the name of JavaScript. No-one cares much about that anymore, despite Oracle still technically holding the JavaScript trademark.

Folks are discussing whether Node.js needs a mascot of its own.

Want to support anyone doing great work on JavaScript projects? You can nominate them for a GitHub Star.

If you rely upon the npm package download counts at all, the daily counts for all packages was zero on September 13 and 14 (example). Why? “This issue remains under investigation,” says npm support.

🎉 RELEASES:

Remix v2 – Popular full stack web framework.

Bun 1.0.2 – Bugfixes, faster bun –watch, it now uses V8’s Date parser, and Fastify apps now work too.

Node.js v20.7 (Current) – Multiple –env-files now supported.

Next.js 13.5 – Faster, faster, faster.

📒 Articles & Tutorials

Getting Network Activity Under Control with Priority Hints — A look at how browsers can prioritize the loading of resources, how you can explicitly specify a priority when using fetch, and how different ways of loading scripts are prioritized.

Alex MacArthur

Securing Node Apps by Analyzing Real Command Injection Examples — When code can be manipulated to run unintended, arbitrary commands, it’s never going to end well.

Liran Tal

🚀  Coming Soon: Fixed-Cost Monthly Maintenance by UpgradeJS.com — Too much tech debt in your JavaScript app? Let us help. Slow and steady upgrades at your own pace. Releasing next week.

🌳 Bonsai by UpgradeJS.com sponsor

🧭  What’s New in Safari 17 — Safari 17 is now in beta on iOS 17 with the final release dropping across all of Apple’s platforms next week. On the JavaScript front, Safari and WebKit now fully support the Storage API, WebGL in Offscreen Canvas, v flag support on regexes, Set operation methods, URL.canParse, plus the much anticipated support for PWAs in macOS Sonoma.

Jen Simmons and the WebKit team

Testing Out the Alpine.js Intersect Plugin — A wrapper for the Intersection Observer API.

Raymond Camden

▶  How to Make Forms in Angular Reusable

Decoded Frontend

Clean Layout Architecture for Vue Applications

Fotis Adamakis

Incremental Static Regeneration for Angular

Enea Jahollari

🛠 Code & Tools

fx 30: The Go(lang)-Powered Terminal JSON Viewer — Yes, it’s written in Go, but fx has long been a useful tool for looking at JSON files, and it has just been rewritten from the ground up with a new look, regex search, fuzzy search, and support for “even the most massive JSON files.” You don’t need to worry about Go at all; it’s simply a fantastic tool for looking at JSON.

Anton Medvedev

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

Wallaby.js sponsor

Mantine 7.0: The Popular React Component Library — A big release for what is now one of the most popular React component libraries. As of v7, Mantine no longer relies on Emotion and components come with native CSS files, all components now support the system-set color scheme, CSS modules are now the default way to style components, and there are many smaller enhancements too.

Mantine Team

Chrono 2.7: A Natural Language Date Parser — Give it a string like “today”, “last Friday”, “2 weeks from now”, or even an entire date and time, and it’ll come up with a date object to suit.

Wanasit Tanakitrungruang

Theatre.js 0.7: Motion Design for the Web — Can be used both programmatically or via a visual editor to animate objects created with things like Three.js, React Three Fiber, HTML/SVG, or even just tween variable values.

Theatre.js Project

Track Errors and Performance Issues in Every Part of Your Stack

Sentry sponsor

Swup: A Flexible Page Transition Library for Server-Side Rendered Sites — A library that benefits hugely from checking out the demos. v4.4 adds experimental ViewTransition support.

Georgy Marchuk

Create Chrome Extension: A Scaffolding Tool for Chrome Extensions — Similar to create-react-app or Yeoman, this is specifically for starting extension development, with support for several frameworks, HMR, and light/dark modes.

Yalda

💡 Chrome Extension CLI is another option in this space.

Neutralinojs 4.14.0 – Imagine something like Electron but without the browser engine being bundled in. Supporting Linux, Windows, and macOS, it instead leans on what’s already present.

📅 React Lite Month Picker
↳ An elegant way to let users select a specific month.

React-Virtuoso 4.6 – Powerful virtual list component.

Faker 8.1 – Generate large amounts of fake data.

🔊 Peaks.js 3.1
↳ The BBC’s audio waveform UI component.

Ember.js 5.3

💻 Jobs

Nest.js Back-End Developer — Lead the development of a HealthTech platform, focused on Caregiver support. TypeScript, Nest.js, PostgreSQL, AWS, React/Next.js.

Carallel

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

“The best programs are the ones written when the programmer is supposed to be working on something else.”

___
Melinda Varian

JavaScript, ML and LLMs

#​654 — September 14, 2023

Read on the Web

JavaScript Weekly

Bun 1.0: Is It a Toolkit? Is It a Runtime? It’s Both — You’ve used Node, you’ve seen Deno, now Bun has grown up too. It’s a performance-oriented server-side JS runtime built atop JavaScriptCore and makes the unique claim of being “a drop-in replacement for Node.js.” It includes extras like transpilation, bundling, package management, and a Jest-compatible test runner too. The post goes into a lot of depth, but we enjoyed the Bun team’s ▶️ 10 minute introductory video. Does Bun deliver on all its promises yet? No. Is it promising? Yes.

Jarred Sumner et al.

Why Does every() Return true for Empty Arrays? — Nicholas wondered how a condition can possibly be satisfied when there aren’t any values to test, so he dug into the language specs to understand the logic.

Nicholas C. Zakas

The Complete UI Component Library For Enterprise Web Apps — A professional UI component library with power widgets like data grid, calendar, scheduler & Gantt charts. Includes API docs, guides and an unreasonable amount of demos to play with. Seamlessly integrates with React, Angular, Vue & Salesforce apps.

Bryntum sponsor

A First Look at TypeScript 5.3TypeScript 5.2 landed a few weeks ago, which means TypeScript 5.3 is already in the works (the final release is due in November), with possible features to think about including Import Attributes, throw expressions, and isolated declarations.

Matt Pocock

⚡️ IN BRIEF:

📅 ViteConf is taking place this October 5-6. It’s free and online.

The August 2023 build of VS Code has just been released and includes improvements to the JS debugger including WebAssembly module decompilation, as well as Move to File and Inline Variable refactorings.

Linus Groh is working on a JavaScript engine in Zig called Kiesel, mostly as a learning project, but it’s passing 25% of test262 after four months of effort.

While searching for something else, I encountered this JavaScript tutorial from 1996 that’s still online. Amazingly, most of it still works fine today.

Esteemed Microsoft code archaeologist Raymond Chen looks at how freestanding JS functions using this can be mistaken for a constructor by VS Code’s static analyzer.

🎉 RELEASES:

MikroORM 5.8 – Powerful Node.js ORM.

Reason 3.10 – Write code in OCaml, but for the JS ecosystem.

Happy DOM 11.0 – A JS implementation of a web browser sans UI.

Node.js v20.6.1 (Current)

📒 Articles & Tutorials

JavaScript’s New Array Grouping Methods — A look at Object.groupBy and Map.groupBy. The proposal including these methods is currently at stage 3 at TC39, but initial support is creeping into dev builds of browsers.

Phil Nash

JPEG and EXIF Data Manipulation in JavaScript — A look at how to pick through the JPEG format and read and replace EXIF tags directly without leaning on a third party library.

Cédric Patchane

Frontend Performance Monitoring 101 — Learn the basics of JavaScript application performance monitoring to see (and fix) slow faster. Join us for a live AMA.

Sentry sponsor

▶  Building a Mario Game Complete with Auth and Score Saving — Ania tackles the implementation of a game in her usual thorough, step-by-step manner.

Ania Kubów

Running a Playwright Script on AWS Lambda — If you’ve struggled to make it work too, Matt has some pointers.

Matt Steele

A New Method to Validate URLs — URL.canParse isn’t broadly supported yet, but can be easily polyfilled.

Stefan Judis

How to Run a GitHub Gist with npx — This is an interesting way to quickly deploy a script.

Kelly Fox

🕑 Lei Mao has a cute example of using React in an ad-hoc way on a web page to dynamically render an analog clock. No build step. No JSX.

▶️ Jack Herrington refutes six reasons not to use React.

🛠 Code & Tools

Shadcn for Vue: Components You Can Copy and Paste — A community-led Vue port of the React-oriented shadcn/ui, a suite of attractive components built with Tailwind CSS and Radix UI, thus making them easy to ‘copy and paste’ into your own apps.

Radix Vue Project

FlexGrid by Wijmo: The Industry-Leading JavaScript Datagrid

Wijmo from GrapeCity sponsor

npm-check-updates: Update package.json Dependencies to Latest Versions — That is, as opposed to the specified versions. It include a handy -i interactive mode so you can look at potential upgrades and then opt in to them one by one.

Raine Revere

Starry Night 3.0: GitHub-Like Syntax Highlighting — GitHub’s own syntax highlighter isn’t open source, but Starry Night uses WebAssembly (to get access to the Oniguruma regex engine) to get as close as it can.

Titus Wormer

Vuestic 1.8: Open Source UI Library for Vue 3 — A library of more than 60 customizable components. v1.8 introduces new Layout and Textarea components. Official homepage.

Epicmax

Goxygen 0.7: Quickly Generate a Go Backend for a JS Project — A tool that sets up a new Go-based project with Angular, React, or Vue in the front-end, and Docker and Docker Compose files to make it all work.

Sasha Shpota

Deliver Real-Time Live Streams with Amazon IVS — Amazon IVS enables developers to create dynamic real-time and low-latency video experiences. Click here to learn more.

Amazon Web Services (AWS) sponsor

xterm.js 5.3.0: Build Terminals in the Browser — It’s used in many projects like VS Code, cPanel, Azure Cloud Shell, and other browser-based IDEs. There’s a live demo on the homepage to try.

xterm.js team

Gridstack.js 9.2
↳ Build interactive dashboards in minutes. (Demos.)

Accessible Astro Starter 3.0
↳ A starter theme for an Astro-powered blog.

Ant Design 5.9
↳ Popular React UI library & design language.

📊 Reveal.js 4.6 – Write presentations in HTML.

Electron 26.2

💻 Jobs

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

🤖 A little JavaScript AI-side..

AI, LLMs and machine learning have caught the imagination of many developers recently, whether through training and deploying models, calling out to third party APIs (like those OpenAI offers), or using tools like GitHub Copilot to write code. It’s common, however, for a lot of AI/LLM experimentation to take place in Python, rather than JavaScript..

Nonetheless, there’s an increasing number of projects in the JavaScript AI/ML space worth keeping an eye on, as well as an upcoming AI developer event being organized by two folks from the JavaScript space:

Transformers.js: State-of-the-Art Machine Learning for the Web — A JavaScript library designed to be functionally equivalent to Hugging Face’s transformers Python library meaning you can run the same pretrained models using a very similar API. You can do things like ML-powered speech recognition directly in your browser using OpenAI’s Whisper model. GitHub repo.

Joshua Lochner et al.

Microsoft TypeChat: An Approach for Type-Safe LLM Responses — Anders Hejlsberg and Daniel Rosenwasser of TypeScript fame are just two of the prominent names attached to this project, demonstrating the huge interest within MS for LLMs. TypeChat’s goal is to work around the issue of LLMs outputting unstructured natural language and to direct output into a typed form.

Hejlsberg, Lucco, Rosenwasser et al.

WebLLM: Run LLM Models in the Browser with WebGPU — Less directly JavaScript, as it uses WebGPU, but yet another way to run large language models directly within the browser and that you can control from JavaScript. GitHub repo.

MLC LLM

TensorFlow.js: Machine Learning for JavaScript Developers — Slightly lower level, but a great way to train and deploy models in the browser or in Node.js. There are, of course, lots of demos, too.

TensorFlow

JavaScript Library Lets Devs Add AI Capabilities to the Web

Loraine Lawson (The New Stack)

▶  A Primer on AI for Developers with Swyx from Latent Space

Svelte Radio

📅 Plus, two JavaScript folks are putting on an AI event..

As part of my interest in AI and ML, I’m attending what promises to be the technical AI event of the year in San Francisco next month: The AI Engineer Summit.

The emerging ‘AI engineer’ category is at the intersection of AI/ML and code: where software engineers can access and implement powerful AI models with just an API. Andrej Karpathy believes that “there’s probably going to be significantly more AI engineers than there are ML engineers / LLM engineers.”

With speakers representing companies like OpenAI, Microsoft, Replit, Vercel, AutoGPT, Adept, LlamaIndex, and Notion, at the Hotel Nikko this October 8-10, the event is organized by two folks well known in the JavaScript world: Swyx (who you may remember from his popular The Third Age of JavaScript post) and Benjamin Dunphy, formerly of Reactathon and Jamstack Conf. You can apply to attend or get a free remote ticket to tune in from wherever you are.

If you’re going to the AI Engineer Summit, I’ll see you there!

👋

TypeScript 5.2, Node 20.6, and Astro 3.0

#​653 — September 7, 2023

Read on the Web

😅 We’re back! After two weeks enjoying the blistering desert heat of Las Vegas and downpours of Storm Hilary, I’m ready to get back to the weekly JavaScript roundups – fingers crossed we’re here each week till Christmas now 🙂
__
Peter Cooper and the Cooperpress team

JavaScript Weekly

Astro 3.0 Released: The All-in-One Web Framework — An increasingly popular, turbo-charged site generator comfortable with not just static sites, but dynamic and interactive ones too by way of its ‘islands’ approach. You can use React, Vue, Svelte, Solid, and others, with it, and v3 adds View Transitions API support (more on that here) which can result in striking creations like this Spotify ‘clone’. It requires a play to really ‘get it’ but it’s great.

Astro Team

Good news – now SvelteKit supports the View Transitions API too 😉

Node.js 20.6 Released with Built-In Support for .env Files — The official release post covers everything new in 20.6, but the highlight is support for .env environment files to set environment variables dynamically when a script is run without requiring a third-party library like dotenv.

Phil Nash

Simplify Security and Compliance for Your Apps — Introducing Pangea: comprehensive API-based security services for developers. Effortlessly integrate foundational security services like Authentication, Authorization, and Audit Logging to create a safer app experience and accelerate your time to market.

Pangea sponsor

Bye to Rome and Hi to Biome for JS Formatting and Linting — First announced in 2020, Rome is/was an ambitious effort to create a unified frontend dev tool to bring ideas from Babel, ESLint, webpack, etc. into one place. After forming a company around Rome and raising money two years ago, things seem to have gone awry, with its key maintainers forking the project as Biome.

Emanuele Stoppa and the Biome Team

⚡️ IN BRIEF:

Version 1.0 of Bun, the notably fast JavaScriptCore-based JS runtime, is due to launch in the coming hours. There’s a livestream and, we assume, a launch post due to land here very soon.

In other ‘alternative runtime news’, the Deno team has announced native npm support on its Deno Deploy platform. They’ve also announced Deno KV is in open beta.

Mozilla: “Over the course of the year Firefox has improved by around 40% on the Vue.js benchmark” – find out why.

David Heinemeier Hansson, the creator of Ruby on Rails, announced that they’re dropping TypeScript from Turbo (a library commonly used with Rails) in favor of plain old JavaScript. Social media drama ensued.

What’s going on with the Gatsby React framework? Folks are noticing there’s not a lot going on with it lately and that 🐦 Netlify layoffs had a big impact. Netlify does, however, say 🐦 updates are coming.

GitHub has made changes to its homepage feeds. Quite a few people are unhappy about it, though.

“The CSS-in-JS sector has plateaued,” says the latest State of CSS survey.

What’s new in Svelte as of September 2023? Quite a lot.

🎉 RELEASES:

TypeScript 5.2 – Complete with the much awaited using declarations..

Node-RED 3.1 – The powerful low-code/visual programming environment gets some key improvements in its editor.

jq 1.7 – It’s not JavaScript, but surely the best JSON processing tool to exist.

Ky 1.0 – Simple HTTP client based upon Fetch for browsers, Node & Deno.

jQuery 3.7.1 – Oh yes indeedy 🎉

Cypress 13

📒 Articles & Tutorials

Making Sense of React Server Components — This is fantastic and exactly what it says on the tin, – we’ll be focusing on it more in next week’s React Status newsletter though 😉

Josh W Comeau

You Don’t Need to Learn Svelte – Here’s Why — I mean.. you kinda do, but Kavii’s excitement is infectious and Svelte’s approach remains refreshing.

Kavii Suri

item: Using Labeled Loops in JavaScript — If using labels gives you flashbacks to BASIC and GOTO statements, I sympathize, but in JavaScript, labels open up an interesting control flow technique. More about this on MDN. continue item;

Ben Nadel

Build a Documentation Chatbot with ChatGPT and EdgeDB — Let’s do it using EdgeDB’s intuitive data model & query language, as well as its powerful TypeScript query builder.

EdgeDB sponsor

A Wide View of Automated Testing in React Apps — A straightforward and to the point introduction to why you might use automated testing, how to get going in the scope of a React app, and what to be testing.

The React Handbook

How to Create a Dual-Mode Cross-Runtime JavaScript Package — Specifically, supporting both ESM and CommonJS, and across runtimes like Node, Deno and the browser.

Hexagon

Benchmarking 24 CSV Parsing Approaches — The most extensive CSV parsing benchmark I’ve seen. The author is himself the creator of the μDSV CSV parsing library and wanted to check out the common ‘lightning fast performance’ claims of other libaries.

Leon Sorokin

The Complexity of Building an Efficient Node.js Docker Image — It’s possible to get huge reductions in image size and build time and Samuel shares his approach here, but he also questions whether all this work should be necessary.

Samuel Bodin

Learn High-Level Compilers, Tools, & Techniques – in JavaScript!

Dmitry Soshnikov Education sponsor

14 Linting Rules To Help You Write Asynchronous JS Code

Maxim Orlov

How to Create a Chrome Extension in 10 Minutes Flat

James Hibbard

🛠 Code & Tools

Peaks.js 3.0: View and Interact with Audio Waveforms — A JavaScript component for browser-based audio waveform visualization that comes from the BBC’s R&D department. There’s a live example on the homepage. GitHub repo.

BBC

🎸 SVGuitar: Create SVG-Based Guitar Chord Charts — Why not continue with the musical theme? 😁 You can experiment with this one via this live demo.

Raphael Voellmy

FormKit 1.0: The Open-Source Form Framework for Vue — Ships with production-ready scaffolding like inputs, forms, submission and error handling, and validation rules.

FormKit, Inc.

Add Authorization, MFA, Biometrics and More to Your JavaScript App in Just Minutes — It’s about time that somebody talked some sense about OAuth and JavaScript. So we did. You’re welcome.

FusionAuth sponsor

Plate: Roll Your Own Slate-Based Rich-Text Editor — A framework for building React-based rich text editors where you can select the specific features and functionality you need. GitHub repo.

Ziad Beyens

Math.js: An Extensive Math Library for Node and Browser — Work with complex numbers, fractions, units, matrices, symbolic computation, etc. A long standing library now, but continuing to get frequent updates. GitHub repo.

Jos de Jong

Calendar.js: A Calendar Control with Drag and Drop — A responsive calendar with no dependencies, full drag and drop support (even between calendars) and many ways to manage events with recurring events, exporting, holidays, and more.

William Troup

💻 Jobs

Find JavaScript Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.

Hired

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

npm-to-yarn – Convert npm commands to yarn and vice versa.

export-to-csv – Export arrays of objects to CSV.

Marked 8.0 – Fast Markdown parsing library. (Demo.)

Perfectionist 2.0 – ESLint plugin for sorting various data.

React Native Vision Camera 3.0
↳ Powerful camera control for React Native apps.

YouTube.js 6.3
↳ Client library for YouTube’s internal API.

Ink 4.4 – Use React to build CLI apps.

Prisma 5.2

ffmpeg.wasm 0.12.6