Every Framework Everywhere All at Once

#​665 — November 30, 2023

Read on the Web

JavaScript Weekly

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

Jake Lazaroff

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

Zinkovsky and Jiang (Deno)

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

Bosch sponsor

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

Biome

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

IN BRIEF:

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

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

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

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

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

RELEASES:

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

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

Fable 4.6 – F# to JavaScript transpiler.

📄 Articles & Tutorials

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

Fireship on YouTube

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

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

Stefan Judis

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

Sonar sponsor

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

Pignotti, Bates, and De Rossi

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

Daniel Lemire

Svelte Through the Eyes of a React Developer

Ido Shamun

🛠 Code & Tools

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

Adam Shaw

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

Lars Kappert

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

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

Wallaby Team sponsor

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

William Troup

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

The New York Times Company

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

Begin

Hire Vetted Developers in US Time Zones, Fast

Revelo sponsor

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

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

Mongoose 8.0 – MongoDB object modelling approach.

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

Jotai 2.6 – Simple, flexible state management for React.

sql.js 1.9 – SQLite 3.44 compiled to JavaScript.

React Share 5.0 – Social media sharing buttons.

np 9.0 – A better npm publish.

pnpm 8.11 – Fast, disk space efficient package manager.

NOTABLE QUOTABLE

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

___
Nicole Tietz

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.

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.

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!

👋

Serverless Observability in N|Solid for AWS Lambda

We are excited to release Serverless Observability for N|Solid with support for AWS Lambda. With the growth of organizations leveraging serverless increasing as they realize the performance and cost benefits, we’re excited to provide customers with this new visibility into the health and performance of their Node.js apps utilizing Serverless Functions utilizing serverless architectures.

Img 1. Serverless Cloud Providers

Observability has become a critical part of software development; understanding performance issues and why they occur is incredibly valuable. Leveraging Serverless introduces challenges for observability based on how the technology works due to added complexity and challenges in data collection and analysis. Some key observability issues include:

Cold starts: When a serverless function is first invoked, it takes time for the underlying infrastructure to spin up. This can lead to latency issues, especially for applications that require a high degree of responsiveness. In other words, Lambda must initialize a new container to execute the code, and that initialization takes time.

Debugging: Debugging serverless applications can be challenging due to the event-driven nature of the platform. This is because it can be difficult to track the flow of execution through an application comprising multiple functions invoked in response to events.

Visibility: Serverless providers typically provide limited visibility into the underlying infrastructure. This can make it difficult to troubleshoot performance issues and identify security vulnerabilities.

N|Solid now makes it easy to implement distributed tracing based on __OpenTelemetry__, providing better insights into these microservices-based systems.

What is Serverless?

Serverless computing is a cloud computing model that allows developers to run code without provisioning or managing servers. Instead, developers pay for the resources they use, such as the time their code runs and the amount of data it stores.

Some key benefits of Serverless Computing include:

Accelerated app development,
Reduced costs and improved scalability,
Increased agility

Serverless computing has become increasingly popular in recent years, offering several advantages over traditional server-based architectures. However, serverless computing can also be complex, and observability, monitoring, and debugging can be particularly challenging.

Key concepts to understand the importance of extending observability to serverless architectures:

Observability: The ability to understand the state of a system by collecting and analyzing telemetry data. This data can include logs, metrics, and traces. Traces are a particularly important type of telemetry data, as they can be used to track the flow of requests through a system.

OpenTelemetry: An open-source observability framework that can collect and analyze telemetry data from various sources. It includes support for __Distributed Tracing__, which can be used to track the flow of requests through a serverless environment.

At NodeSource, we have been at the forefront of supporting developers to solve these challenges in their Node.js applications, so we have extended this series of features and content since last year:

Distributed Tracing Support in N|Solid – https://nsrc.io/DistributedTracingNS
Enhance Observability with Opentelemetry Tracing – Part 1 – https://nsrc.io/NodeJS_OTel1
Instrument your Node.js Applications with Open Source Tools – Part 2 – https://nsrc.io/NodeJS_OTel2
AIOps Observability: Going Beyond Traditional APM – https://nsrc.io/AIOpsNSolid

In a serverless environment, applications are typically composed of several different services, each responsible for a specific task. This can make it difficult to track the flow of requests through the system and identify performance problems, but not with N|Solid:

With this release, you can now have traces of when a microservices system calls a serverless function.

Now, with N|Solid, you can:

Track the flow of requests across your microservices architecture, from the Frontend to the Backend.
Identify performance bottlenecks and errors.
Correlate traces across multiple services.
Visualize your traces in a timeline graph.

N|Solid is a lightweight and performance-oriented tracing solution that can be used with any Node.js application. It is easy to install and configure, and it does not require any changes to your code.

Introducing Serverless Support for AWS Lambda

NodeSource has introduced a new observability feature to gather information throughout a request in a serverless environment. The collected information can be used for debugging latency issues, service monitoring, and more. This is valuable for users interested in debugging request latency in a serverless environment.

Img 2. N|Solid Serverless Installation Process

With this announcement, we are enabling the opportunity to connect a process following the indications of our Wizard. You will be able to connect the traces of your Node application through requests or connected functions, by connecting the data, you will be able to find the cause of latency issues, errors, and other problems in serverless environments.

How to apply Serverless Observability through N|Solid:

Key practices include leveraging distributed tracing to understand end-to-end request flows, instrumenting functions with custom metrics, analyzing logs for debugging and troubleshooting, and employing centralized observability platforms for comprehensive visibility.

Img 3. N|Solid Serverless Configuration

To use loading Opentelemetry Instrumentation Modules, first, use the NSOLID_INSTRUMENTATION environment variable to specify and load the Opentelemetry instrumentation modules you want to utilize within your application. To enable instrumentation for specific modules, follow these steps:

For HTTP requests using the http module, set the NSOLID_INSTRUMENTATION environment variable to http.

If you’re also performing PostgreSQL queries using the pg module, include it in the NSOLID_INSTRUMENTATION environment variable like this: http,pg.

List all the relevant instrumentation modules required for your application. This will enable the tracing and monitoring of the specified modules, providing valuable insights into their performance and behavior.

Connect through integration the serverless functions; select and configure the environment variable you require. For more advanced settings, visit our NodeSource documentation.

Img 4. N|Solid Wizard Installation Summary

In our NodeSource documentation, you will find CLI – Implementation and Instructions or directly follow the instructions of our Wizard:

Install
Usage
Interactive Shell
Inline Inputs
Interactive Inputs
Help
Uninstall

Benefits of N|Solid Implementing Serverless

Serverless monitoring collects and analyzes serverless application data to identify and fix performance problems. This can be done using a variety of tools and techniques, including:

__Metrics__: Metrics are data points that measure the performance of an application, such as the number of requests per second, the average response time, and the amount of memory used.
__Logs__: Logs are records of events in an application, such as errors, warnings, and informational messages.
__Traces__: Traces are records of a request’s path through an application, including the time it spends in each function.

By collecting and analyzing this data, serverless monitoring tools can identify performance problems, such as:

__Cold starts__: Cold starts is when a serverless function is invoked for the first time. This can cause a delay in the response time.
__Overcrowding__: Overcrowding occurs when too many requests are sent to a serverless function simultaneously. This can cause the function to slow down or crash.
__Bottlenecks__: Bottlenecks occur when a particular part of an application is slow. Some factors, such as inefficient code, a lack of resources, or a bug, can cause this.

Once a performance problem has been identified, serverless monitoring tools can help developers fix the problem. This can be done by:

Tuning the application: Developers can tune the application by changing the code, configuration, or resources used.
Evolving the application: Developers can evolve it by adding new features or changing how it works.
Monitoring the application: Developers can continue monitoring the application to ensure that the problem has been fixed and the application performs as expected.

Benefits of N|Solid Implementing Serverless

Img 5. N|Solid Functions Dashboard

Now, directly in your N|Solid Console, you’ll have the Function Dashboard, which will allow you to review in-depth and detail all the functions you have connected.

By selecting the functions, you can access the __Function Detail View__.

Img 6. N|Solid Function Detail View

In the first content block, you will have the following:

The function’s name and the provider’s icon__.
__Note:
If you click on the function itself, it will open the function itself in a new tab directly in AWS.

On the other hand, in the central box, you will have:
RUNTIME VERSION
FUNCTION VERSION
ACCOUNT ID
N|Solid LAYER: (It is versioned, which is what allows us to see the AWS info)
REGIONS: The zone of the function. Where it is running that specific version.
ARCHITECTURE: Lambda can have several Linux architectures. This info comes directly from AWS.

And finally, on the right corner of our console, we will have
Vulnerability Status__, and below this, __Estimated Cost: How much are you spending on this function? For more information, please review our documentation.

About N|Solid Layer

In an __AWS Lambda__, you can have information about hundreds of instances, AWS does it for you, but you don’t have information on each invocation. They show you by default the last 5 minutes through the median, the 99th percentile, etc., but they can’t give us invocation by invocation individually; they simply group them.

There are two types of data we have from AWS Lambda:

Real-Time Metrics or Telemetry API Metrics
Cloudwatch Metrics

The metrics that CloudWatch reports are not real-time. They are extracted from the CloudWatch API by the Lambda Metrics Forwarder and displayed as AWS Lambda delivers them directly. This means there may be a delay of up to a few minutes between recording and displaying a metric.

The __Telemetry API Metrics__, which we extract, through Lambda layers, through modules that we install to your function to be executed.

We distributed this information as a layer,__N|Solid Layer__, injecting code inside. An AWS extension for N|Solid provides information about the life cycle of each Lambda function providing data to the console:

Generate the Timeline Graph
Span: Span Details, Path of the Span, and filter the results by attributes of the Span.
Changing Time Range
Generate SBOM reports

Our method tracks where the function is frozen to optimize Lambda resources within certain limits, allowing access to the information even after the function has been frozen.🤯In real-time, the registration is detected, providing the key information on each invocation in each instance.

In Closing,

We’ve been working on serverless observability for our customers for a while because we believe in the value of leveraging the technology approach. Serverless provides many benefits for developers and teams, but it can be difficult to provide quality observability without adding a lot of expensive overhead.

N|Solid can now help teams develop and maintain better software, resolve issues faster, and provide security for both traditional and serverless Node.js Applications. Try it for free, or connect with us to learn more.

It’s exciting to share this new release, our first in a series of serverless cloud platforms. Look for Azure and GCP to be released soon. Thanks for reading all about it.promising future ahead. Our heartfelt gratitude goes to our exceptional team for their unwavering dedication and hard work in bringing this vision to life.

Related Links

AWS Lambda Documentation – https://docs.aws.amazon.com/lambda/latest/dg/welcome.html
Layer Concept – https://docs.aws.amazon.com/lambda/latest/dg/gettingstarted-concepts.html#gettingstarted-concepts-layer
Cloudwatch Metrics – https://docs.aws.amazon.com/lambda/latest/dg/monitoring-metrics.html#monitoring-metrics-types
Lambda Extensions – https://docs.aws.amazon.com/lambda/latest/dg/lambda-extensions.html
CloudFlare Serverless Computing – https://www.cloudflare.com/learning/serverless/what-is-serverless/
IBM – What is serverless? – https://www.ibm.com/topics/serverless
GCP Serverless – https://cloud.google.com/serverless?hl=es-419

Welcome to The Future of Software Development: Powered by Telemetry, Security, and AI

We made some big announcements during our keynote at Collision in Toronto; our AI Assistant, Adrian, and the open sourcing of our Node.js Runtime, N|Solid Runtime. They are a big part of our vision for the future of software development, one that is powered by telemetry, security, and AI – which was the topic of our talk. In this post we will share more about our vision and specifically how NodeSource is enabling that future.

NodeSource began as most great companies do; with smart, passionate people that saw a problem they had to fix: there was simply no good tooling for Node.js. We were Node believers and open-source project contributors on a mission to make Node more accessible for developers & safe for enterprises to adopt. Since our beginning we have provided the ecosystem with our insights, training, and binary distributions of the open-source packages – over 110 million downloads in the last year alone – powering Node applications in production all over the globe.

As a result of countless hours of ideating, coding and customer validation, N|Solid was born – an enterprise grade tool providing the deepest insights with the lowest overhead, all while continuing to keep ode apps secure. Today N|Solid is used by some of the largest organizations and developers globally. The mission that was set all those years ago is now more relevant than ever, over 30 million websites rely on Node.js and it’s one of the most used and loved technologies by developers worldwide. It’s been an amazing journey.

Revolutionizing Software Development: Advancing Telemetry, Security, and Efficiency with AI Innovation

We have continued to innovate, with our Node experts pushing to create the most advanced telemetry and security platform possible while still providing customers with world class support for Node. We have always believed that giving the very foremost data and insights was the best way to produce better software. Making software is continually challenging; the software development life cycle (SDLC) is highly inefficient.

You begin with an idea that you turn into code, then it gets built, tested and released for users to experience. Then you monitor for issues that are identified to triage and solve. Those fixes are added to other features to build, test, and release…and the cycle continues. While significant effort has been applied to make this process more efficient, these have invariably been small improvements. Tweaks really, to the overall process. Until now, fueled by the advancements in AI.

We believe that the future of software is intelligent software engineering, powered by telemetry, security & AI. The SDLC is augmented by applying AI that is trained with the right data to accelerate the production and maintenance of secure, highly performant code. It’s about building a new model – a generative loop based upon the intent of the code and its actual operation in production – bringing data and AI into the process in powerful new ways.

On the front end, AI is redefining the way code is written, from ChatGPT to GitHub’s CoPilot and beyond, Generative AI is creating code, documenting it, and writing test plans. These advancements are set to revolutionize the software development process on their own, replacing the often used copy/paste of code found from Google, StackOverflow, or existing codebases. Developers that leverage these new tools will have dynamically increased velocity of their code while still owning the solution. While significant, this is only a part of the solution of the future.

Unveiling the True Measure of Software: Quality and Performance in Production

The reality is that the quality and performance of software is only realized once it is in production, in use by real users. The telemetry data in this application is a key component for transforming the SDLC. How software performs in production, not how well software did in a test environment, is the true test for quality code. And the depth of that telemetry data is how you identify issues. This has long been our focus, not just to report on general metrics, but to go well beyond. This is why we established the measure of event loop utilization, worker thread monitoring, and more, to enable deep insights into application health and performance.

Application health is directly tied to security, more than ever today quality code is secure code. But, security is not static, there are new vulnerabilities that develop all the time. The visibility to these is critical, especially for production code. It’s why we offer our security tooling, NCM (Node Certified Modules) as a part of our platform. Enabling customers to have visibility to security issues from development and production live code.

It’s the depth of data and security health that unlock the opportunities with AI. It’s the other half of the equation of the future of software, powered by telemetry, security and AI. This is the future NodeSource is enabling.

N|Solid – the future of Node bringing the power of data and AI

With the announcement of our AI Assistant, “Adrian”, we are leveraging our unique and unparalleled data to help developers identify and resolve issues with tremendous speed and efficiency. Adrian will help every Node developer and devops engineer to not just view the telemetry, security, and alerts that matter – but to understand them, know their context and how to solve for them. It’s a game changer. It takes the power of the most advanced observability tool and the specific context of each application combined with our AI to resolve code issues fast.

Furthermore, our AI tools will assess code quality, identify cost optimizations, generate code and more. It’s like ‘god mode’ for Node.

This is the next step in our journey toward the future state of the SDLC. If you want to experience what Adrian can do, sign up HERE for our early access beta list and we will notify you when you can join the software development revolution.

About NodeSource, Inc.

NodeSource, Inc. is a technology company completely focused on Node.js and is dedicated to helping organizations and developers leverage the power of this technology. We offer the leading APM for monitoring and securing Node.js and provide world-class support and consulting services to help organizations navigate their Node.js journey. #KnowYourNode. For more information, visit NodeSource.com and follow @NodeSource on Twitter.

NodeSource, Inc. Announces AI Assistant “Adrian” for Comprehensive Analysis and Optimization of Node.js Applications and Open-Sourcing of its Augmented Node.js Runtime.

[Seattle, WA, June 28, 2023] — On stage at Collision Conf in Toronto, NodeSource, Inc., the leader in enterprise-grade solutions and support for Node.js, made two big announcements: the private beta of its groundbreaking AI Assistant, “Adrian,” designed to revolutionize the way developers and DevSecOps analyze, optimize, and secure Node.js applications, and that it’s open-sourcing its Node.js runtime to enable developers access to the most advanced runtime available.

NodeSource has been helping developers and organizations with the utilization of Node.js to build digital products and services for nearly a decade, most notably with its industry-leading product, N|Solid. Augmenting N|Solid’s unparalleled depth of insights and telemetry with AI gives customers a new level of context and understanding of performance and security analysis and how best to resolve issues.

The AI agent, Adrian, identifies memory leaks, poor code, security issues, and other performance problems that impact application performance and health.

“It’s like “god-mode” for Node, said Russ Whitman, CEO of NodeSource, “we give developers and DevsSecOps teams much more than telemetry and alerts; we help them identify the real issues, with context, to help them solve quickly. The cost and time savings are massive, and lets developers focus on creating new features and adding value to the organization”.

With the ever-increasing demand for scalable, efficient, and high-performing applications, Node.js developers face the constant challenge of optimizing their codebase to deliver exceptional user experiences. Adrian is an advanced AI-powered agent that provides actionable insights and suggestions, enabling teams to streamline their Node.js applications, reduce downtime, cut costs, and enhance overall user satisfaction.

“In the near future the performance of every software development team will be transformed by AI powered tools like N|solid”, offered Robert Duffy, Chief Product and Technology Officer, Drizly, an Uber company.

Key features of Adrian include:

Automated Metric Collection
Node Performance Enhancer
Intelligent CPU Profiling
Cost Calculator
Code Advisor

Sign up HERE to join the private beta and unlock the full potential of Adrian’s AI-driven insights and optimizations.

“Our AI Assistant is a major advancement to the AI features released in N|Solid last year,” noted Adrian Estrada, the VP of Engineering (and the naming inspiration for the assistant), which showcased how we could leverage the combination of our unique data insights from N|Solid, and the expertise from our team, to provide advanced solutions for our customers. With recent advancements in Generative AI, we can go significantly beyond our expectations to bring new value to our customers.”

NodeSource also has an exciting announcement for the developer community. In addition to the launch of Adrian, the company is open-sourcing its N|Solid Runtime, empowering all developers to utilize the best Node.js runtime available. This move aims to foster collaboration and innovation within the Node.js ecosystem, enabling developers worldwide to contribute to the ongoing advancement of Node.js technology.

“We strongly believe in the power of collaboration and open-source development,” added Trevor Norris, NodeSource’s Principal Architect. “By open-sourcing our runtime, we invite the community to join us in building a stronger, more efficient Node.js environment that benefits everyone. We are excited to see the positive impact this will have on the Node.js ecosystem as a whole.”

Big Announcements

The open-sourced version of N|Solid Runtime will be available with the release of Node 20 later this year.
NodeSource will also be offering a private beta program for Adrian. To sign up for early access and receive updates.

Look for more details at www.nodesource.com.

About NodeSource

NodeSource is a leading provider of Node.js application management solutions, like N|Solid, Node.js Support, and services, helping organizations successfully scale and secure their Node.js applications. Node Certified Modules (NCM) is a comprehensive tool that offers visibility, security, and governance for managing Node.js application dependencies. With its powerful features, NCM ensures that Node.js applications remain secure, reliable, and compliant with licensing requirements.

For media inquiries, please contact:
Brandi Duffy
[email protected]

Bundle-time macros with Bun

#​641 — June 1, 2023

Read on the Web

JavaScript Weekly

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

Jarred Sumner

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

Delba de Oliveira (Vercel)

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

Snyk sponsor

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

Christopher Cavalea

⚡️ IN BRIEF:

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

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

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

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

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

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

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

Stephanie Eckles

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

JSDayIE sponsor

RELEASES:

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

Neutralinojs 4.12 – Desktop app dev framework.

Parcel 2.9

Bootstrap 5.3.0

node-oracledb 6.0

???? Articles & Tutorials

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

Ruth John

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

Szymon Chmal

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

FrontStart

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

New Relic sponsor

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

Evan Hahn

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

Rem / Frontend Mastery

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

Beyond Fireship

Automatically Unsubscribe from RxJS Observables in Angular Components

Rob Bell

Deploying Vanilla Node.js Apps on Fly.io

Sam Ruby (Fly)

Asynchronous JavaScript for Beginners

Daniel Agantem

???? Code & Tools

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

Svelvet Team

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

Alex Grozav

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

Handsontable Data Grid sponsor

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

Stuhl

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

David Aerne

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

Adam Ritter

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

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

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

OverlayScrollbars 2.2 – JS custom scrollbar plugin.

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

Vuetify 3.3.2 – Vue component framework.

React Slider 10.2Demos.

???? Jobs

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

Hired

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

????  Live-streaming from JavaScript

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

Sean DuBois on JSFiddle

Measure Node.js server response time with N|Solid

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

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

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

IMG – Ping Cats – via GIPHY

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

Network Optimization in Node.js

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

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

HTTP vs. WebSocket:

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

Types of Connections and Versions:

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

TCP/IP Basics:

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

HTTP vs. HTTPS:

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

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

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

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

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

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

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

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

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

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

Ingredients:

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

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

Instructions:

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

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

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

$ npm i fastify

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

import Fastify from “fastify”;

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

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

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

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

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

Integrate with N|Solid Console

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

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

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

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

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

IMG – Connect N|Solid

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

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

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

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

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

IMG – Connect N|Solid Process

GIF 1 – Connect N|Solid Process

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

GIF 2 – Monitor Process Metrics

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

To generate the traffic, we can use autocannon

npx autocannon -d 120 -R 60 localhost:3000

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

IMG – http-latency-response-time-metrics

IMG – http-request-median-duration

IMG – p99-metric

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

The 99th Percentile metric

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

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

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

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

The HTTP median metric

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

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

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

Connect with NodeSource

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

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

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

AIOps Observability: Going Beyond Traditional APM

AIOps is an emerging technology that applies machine learning and analytics techniques to IT operations. AIOps enables IT teams to leverage advanced algorithms to identify performance issues, predict outages, and optimize system performance. Nodesource sees significant advantages for developers and teams to increase software quality by leveraging AIOPS. We have extended our platform’s (N|Solid) observability capabilities to include AIOps, enabling developers to leverage advanced machine learning and analytics techniques to optimize their Node.js applications.

Our N|Solid platform provides the most advanced visibility into Node.js applications, enabling developers to quickly identify performance issues, detect security vulnerabilities, and troubleshoot errors. N|Solid achieves this level of observability through real-time performance monitoring, comprehensive metrics, and detailed instrumentation of Node.js applications.

Last year, we integrated OpenTelemetry into our runtime and were nearing the release of an extension of this layer into our console. This advancement will further extend our platform to support AIOps. Santiago Gimeno, a Senior Architect, sums up our vision of the integration with OTel (Open Telemetry) and N|Solid:

“In today’s world, where applications are becoming more complex and distributed, having a good observability solution is more important than ever. The emergence of OpenTelemetry as the de-facto standard for observability is key. It allows application developers to select solutions that adapt better to their needs. Even more, it allows for healthy competition between observability solution vendors. We support this approach and continue to take steps to ensure N|Solid stays compliant with the OpenTelemetry specification, so everyone can use what we believe is the best observability solution for Node.js.”

Key differences between an APM and Observability

APM (Application Performance Management) and observability are both methods of monitoring and managing the performance and health of software applications, but there are key differences between the two:

Scope: APM is focused on monitoring the performance of applications, while observability is a more comprehensive approach that includes monitoring the infrastructure and application stack, as well as the performance of individual services.

Metrics: APM typically relies on predefined metrics and thresholds to identify performance issues, while observability takes a more flexible approach to collect a wide range of data, including logs, metrics, and traces.

Root cause analysis: APM is designed to quickly identify the root cause of performance issues, often through alerting and automated remediation, while observability takes a more holistic approach that emphasizes the need to understand the relationships between different parts of the system to identify and fix issues.

Proactivity: APM is often reactive, focusing on identifying and fixing issues as they arise, while observability is more proactive, focusing on continuous monitoring and analysis to identify potential issues before they become critical.

Tooling: APM is often built around specific tools and technologies designed to monitor and analyze application performance, while observability is more flexible and adaptable, focusing on integrating a wide range of tools and technologies to provide a comprehensive system view.

You need to have both; they are important to monitoring and managing the performance and health of software applications.

This is why N|Solid is not only an APM but also has observability within its functionalities. And now, with the implementation of ML and SBOM, it goes beyond APM and supports the growing discipline of AIOps.

AIOps: Fundamental concept in Modern IT Operations

AIOps (Artificial Intelligence for IT operations) is an approach to IT operations that leverages machine learning and artificial intelligence to automate and optimize IT tasks. AIOps aims to enhance the efficiency and effectiveness of IT operations by leveraging the vast amount of data generated by various IT systems and applications.

Observability refers to IT teams’ ability to observe and understand the behavior of complex systems in real-time, using a combination of monitoring, logging, and analytics tools.

AIOps and observability enable IT teams to proactively monitor and manage IT systems, applications, and infrastructure, allowing them to identify and resolve issues quickly. AIops uses machine learning and AI algorithms to identify patterns in large amounts of data, while observability provides the visibility and context needed to understand the behavior of complex systems.

Modern Observability in Place

Support for open-source tracing tools and standards like OpenTelemetry facilitates team collaboration in resolving issues. Open Telemetry is the second most active CNCF project, behind only Kubernetes, showcasing its importance to the industry.

_Image Twitter Michael Haberman @hab_mic
_

Following this standard, N|Solid (since N|Solid 4.8.0) supports OTEL:
– Implements the OpenTelemetry TraceAPI, allowing users to use the de-facto standard API to instrument their code.
– It supports using many instrumentation modules available in the Open Telemetry ecosystem. It supports exporting traces using the Open Telemetry Protocol(OTLP) over HTTP.
– With this feature is now possible to send N|Solid runtime monitoring information (metrics and traces) to backends supporting the Open Telemetry standard like multiple APMS (Dynatrace, Datadog, Newrelic, etc.).

Additionally, we included OTEL in the ‘APM performance dashboard,’ an open-source tool we released to the community, enabling developers and organizations to understand the impact of APM tools’ performance.

_Img APM’s Performance Dashboard View
_

Recent enhancements to the tool include the following:

Updated the data with N|Solid 4.8.0 -> 16.16.0 and 14.20.0
Added a few new tests: especially with different solutions for graphql.
Added more APMs: opentelemetry, AppDynamics

Added testing of N|Solid against Datadog, Dynatrace, and NewRelic.

Do you want to implement OTel in your Node.js application? ????

Enriching telemetry data with metadata is an important aspect of observability, and OpenTelemetry provides a flexible and extensible framework for doing so. However, there can be challenges in implementing this in practice, especially when dealing with multiple tools and technologies.

One approach to addressing this challenge is to use a centralized configuration management tool to ensure consistency in metadata enrichment across your observability stack. Please review the following articles to give you an accurate guide to implementing Opentelemetry in your project.

Enhance Observability with Opentelemetry tracing – Part 1

Instrument your Nodejs Applications with Open Source Tools – Part 2

However, if you want this implementation out of the box and have other useful features, we invite you to try N|Solid.

Conclusion

N|Solid Supports OpenTelemetry Features, Integrates SBOM and ML at its Core.

By supporting OpenTelemetry features, N|Solid provides seamless integration with this framework, enabling customers to understand their applications, infrastructure behavior, and performance. This integration enhances the ability of developers and operators to troubleshoot issues, identify bottlenecks, and optimize application performance.

N|Solid’s integration of Software Bill of Materials (SBOM) provides a comprehensive list of all software components used in an application, including open-source libraries and dependencies, which helps organizations to mitigate security risks and ensure compliance with regulations. By integrating SBOM at its core, N|Solid provides organizations with an efficient and reliable way to manage the security and compliance of their software applications.

Finally, N|Solid’s integration of machine learning (ML) at its core is another critical feature that helps to identify patterns and anomalies in data, allowing developers and operators to gain insights that are not easily detectable using traditional monitoring tools. This integration of ML at the core of N|Solid enables organizations to improve the overall reliability, performance, and security of their applications and services.

N|Solid’s support of OpenTelemetry features, integration of SBOM, and integration of ML at its core provides developers and operators with a comprehensive set of tools to manage and optimize their applications and infrastructure, making N|Solid a valuable platform in the modern software development and operations landscape.

Ready to connect?

If you want to know more about our APM’S Benchmark project and get the most out of your Node.js application, read this incredible article by our VP of engineering, Adrián Estrada, ‘In-depth analysis of the APMs performance cost in Node.js.

We also invite you to ????️ Use the ✨APM’s Performance Dashboard✨here:
???? Read the full blog post here: https://nsrc.io/4xFaster
???? Contribute here: https://github.com/nodesource/node-APMs-benchmark
If you have any questions, please contact us at [email protected] or through this form.

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

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