Tag: Optimization

The unbearable weight of massive JavaScript

Posted on by

#​664 — November 23, 2023

Read on the Web

JavaScript Weekly

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

Devographics

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

Ryan Townsend

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

EdgeDB sponsor

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

Daniel Rosenwasser (Microsoft)

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

Evan You and Contributors

IN BRIEF:

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

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

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

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

RELEASES:

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

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

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

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

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

Starlight 0.13.0 – Beautiful docs sites atop Astro.

📄 Articles & Tutorials

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

Learn with Jason

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

Henrique Inonhe

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

Sentry sponsor

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

Zach Leatherman

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

Andrei Rusu

🛠 Code & Tools

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

Anoop M D, Anusree P S and Contributors

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

Sindre Sorhus et al.

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

Bryntum sponsor

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

UnJS

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

Sindre Sorhus

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

Ronald van Wijnen

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

Khalid Zoabi

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

SURVEYJS sponsor

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

François Chalifour

gridstack.js 10.0 – Build interactive dashboard panels quickly.

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

Piscina 4.2 – Node.js worker thread pool implementation.

(Official) MongoDB Node.js Driver 6.3

SQL Formatter 14.0 – Pretty print SQL queries.

Job Listing

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

Marker.io

NOTABLE QUOTABLE

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

___
Chris Pine (author of Learn to Program)

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

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

Posted on by

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.

Svelte 5 is going to be radical

Posted on by

#​651 — August 10, 2023

Read on the Web

JavaScript Weekly

My Experience Modernizing Packages to ESM — What a post! Mark, well known for his work on React, Redux, and much more, details the painful experiences and hard-earned lessons he picked up while migrating the Redux packages to ES modules.

Mark ‘acemarke’ Erikson

Things You Forgot (or Never Knew) Because of React — “I’ve written before about how React is the new default frontend framework, and how I don’t think most people using React on a regular basis realize quite how much it’s fallen behind.” High level thoughts about the React ‘bubble’ and some reasons to look beyond it, including a round up of some of the alternative options.

Josh Collinsworth

Build Web Apps in 60 Seconds with Dynaboard AI — Dynaboard’s low-code IDE offers 40+ built-in UI components. Quickly connect to REST & GraphQL APIs, SQL databases, and spreadsheets. Write custom code or use AI to generate any SQL, JS, or CSS.

Dynaboard sponsor

⚡️ IN BRIEF:

“Svelte 5 is going to be radical,” 🐦 tweets Rich Harris.

Server side JS runtime Deno 1.36 has been released with extended security options, a polyfill for node:test, completion of the node:os polyfill, and many other minor Node.js compatibility improvements.

Google has unveiled a sneak peek of a new IDE it’s developing called Project IDX. It has VS Code at its base but with strong JS framework support, simulators, and lot of ‘AI smarts’ on top, 🐦 says Addy Osmani.

A revived but early stage proposal for introducing observables to JavaScript. Your feedback is sought, so file an issue if you have any.

A fun walk through front-end history with a blog post containing every HTML element (well, almost – sorry applet).

Nim 2.0 has been released. Nim is a C++ and Python inspired, statically typed systems language, that supports being compiled to JavaScript.

🎉 RELEASES:

TypeScript 5.2 RC – TS 5.2 is nearly set for its final release. Explicit resource management with using is the headline feature, but there’s more, as usual.

esbuild 0.19.0 – The high-perf bundler can now import paths containing wildcards and supports advanced CSS @import rules. Note that this release contains backwards-incompatible changes.

Astro 2.10 – There’s also a first beta of Astro 3.

Node.js Security Releases – v20.5.1 (Current), v18.17.1 (LTS) and v16.20.2 (LTS) are all part of this set of releases including OpenSSL security updates and fixes, mostly, around permission policies.

📒 Articles & Tutorials

Bringing Sharp to WebAssembly and WebContainers — A look at how it’s possible to bring Sharp, a popular Node.js image manipulation module, into the browser. Welcome to the future.

Ingvar Stepanyan

A Compilation of Outstanding JS Testing Articles — An opinionated list of 10 outstanding testing articles, all with a JS slant to them. He also mentions his own list of JavaScript and Node.js Testing Best Practices which is worth revisiting too.

Yoni Goldberg

🚀 JavaScript Moves Fast—and So Should You. Let Us Help You Upgrade — React, Vue, Next, Node – our expert devs have it covered! Technical debt mounting? We’re your tech debt busters! 👊

Reduce Tech Debt. UpgradeJS now. sponsor

▶  A Look at HTMX: A ‘Game-Changing’ Alternative to React? — One of Jack’s typically well produced, short tours (just 14-minutes). He likes htmx and thinks it’s worth learning in order to have more options in your toolbox.

Jack Herrington

📝 Prefer a traditional writeup? James Hibbard has one here.

Node.js’s ‘Config Hell’ Problem — Andy ponders why a Next.js project has over 30 configuration files and what we can do to avoid it (unsurprisingly, it involves using Deno, but I enjoy the boldness).

Andy Jiang (Deno)

Creating a Screen + Camera Recorder with the Document Picture-in-Picture API — This is more powerful than I was expecting. You can basically record a screencast using browser APIs. In Chrome, at least.

Sébastien Jalliffier Verne

React Authentication — Without Complexity

Userfront sponsor

▶  Build and Deploy a Full Stack MERN Next.js 13 Threads Clone — An extensive, five hour screencast walking through the creation of a Threads/Twitter/X-style app using Next.js 13 and Clerk for user management.

Adrian Hajdin

▶  Turbopack vs Webpack — Being involved with the development of both bundlers, Tobias Koppers has some interesting things to say about the differences and explains why Turbopack is necessary.

Tobias Koppers and Jack Herrington

Autogenerating Rust-JS Bindings with UniFFI

Ben Dean-Kawamura (Mozilla)

Migrating My Blog from Gatsby to Astro

Artem Sapegin

🛠 Code & Tools

Fuite 3.0: A Tool for Finding Memory Leaks in Web Apps — A CLI tool that you can point at any URL to analyze for memory leaks. Introductory blog post here, and there’s also a video tutorial.

Nolan Lawson

Luxon 3.4: Date and Time Manipulation Library — If you’re familiar with Moment.js, it’s like that but with immutable objects, 1-indexed months, Intl-powered localization (so no locale or timezone files needed) and more.

Moment.js

JavaScript Frontend Error Monitoring 101 — Take a crash (pun intended) course on frontend error monitoring with Sentry. Read on.

Sentry sponsor

Filesize.js: Generate Human Readable Strings From File Sizes — For example, 123456 bytes could turn into “120.56 KB” – though different standards of conversion can also be used. GitHub repo.

Jason Mulligan

Typograms: A Way to Render ASCII Diagrams More Elegantly — An intriguing project where you ‘draw’ diagrams in plain ASCII text within special script tags and these get rendered into much nicer looking versions. An interesting approach if Mermaid is too full on for your needs.

Sam Goto / Google

💡 Talking of Mermaid, the latest release supports Sankey diagrams.

d3-graphviz 5.1: Graphviz DOT Rendering and Animated Transitions — Renders SVGs from DOT-defined graphs using a WebAssembly port of Graphviz, a popular graph visualization tool.

Magnus Jacobsson

🔊 Meyda: Audio Feature Extraction Library — Supports both offline feature extraction as well as real-time feature extraction using the Web Audio API. You can play with a demo right on the homepage.

Rawlinson, Segal, Fiala, Wray, et al.

💻 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

Senior Software Engineer (Frontend Lead) — Lead Emerge’s web platform, used by teams like DoorDash, Square, & Airbnb (Our stack: Next.js, React, TS, Vercel).

🛸 Emerge Tools

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

ggml.js: Run ggml-Ported ML Models Directly in Your Browser — We’re going to do a feature on ML/AI related stuff in JS next week, so watch this space..

Rahul D Shetty

React Virtuoso 4.5 – Powerful virtual list component.

Perspective 2.4 – Fast, streaming real-time data visualization.

express-rate-limit 6.9 – Basic rate limiting for Express apps.

PLV8 3.2 – Use JS as a procedural language in PostgreSQL.

Puppeteer 21.0 – Headless Chrome automation in Node.js.

📊 Well, that’s handy..

npmgraph: A Fun Way to Visualize Package Dependency Graphs — A Web tool that accepts one or more package names (or a package.json) and renders a visualization of their (possibly intersecting) dependency graphs. Packages can be colored by various criteria (such as number of maintainers, if you want to see how fragile the world is) and you can download SVGs of the output.

Kieffer, Brigante, et al.

Serverless Observability in N|Solid for AWS Lambda

Posted on by

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

htmx in 100 seconds

Posted on by

#​647 — July 13, 2023

Read on the Web

JavaScript Weekly

Driver.js: Create On-Page Tours, Highlights, and Contextual Help — A no-dependency, vanilla JavaScript library for putting together page tours and contextual help systems. The project is a few years old but has just been entirely rewritten and gained numerous enhancements, plus a huge lick of paint. There are lots of examples to check out.

Kamran Ahmed

Component Party: A Rosetta Stone of UI Library Code Examples — A comparison of different frameworks (like React, Vue, Svelte, Angular, Ember, etc.) by way of simple code snippets covering various tasks.

Mathieu Schimmerling

Test and Validate APIs Effectively and Efficiently — Gain access to several API testing tools and features that help you automate repetitive tasks, stay organized, and build robust workflows to ensure your APIs remain reliable and performant.

Postman sponsor

Prettier 3.0: Now Powered by ES Modules — The popular multi-language code formatter gets a big upgrade with a refactoring to ES modules making up the biggest change (though it can still be used as a library via CommonJS). One side effect is Prettier now supports ESM-based plugins and async parsers which means some necessary changes for Prettier plugin developers.

Sosuke Suzuki

Crockford on Plain Old JavaScript and the DOM — Over the years, Douglas has asked us to only use the good parts of JavaScript, to ▶️ stop using JavaScript, and now he suggests abandoning “the libraries” to instead work with the DOM directly. Lea Verou 🐦 picked up on this story and said this suggestion still isn’t very practical for most web apps as of 2023.

Douglas Crockford

🎉 RELEASES:

Ember 5.1 – The ambitious JS framework that’ll never give up takes a big step into the TypeScript world with stable TypeScript support and types-a-plenty.

p5.js 1.7 – Processing-inspired JavaScript library for creative coding. v1.7 introduces WebGL 2 and frame buffer support.

Prisma 5.0 – A popular ORM for Node.js and TypeScript. 5.0 boasts significant performance improvements.

typescript-eslint 6.0

⚡️ IN BRIEF:

obj?.prop = value; The optional chaining assignment proposal advanced to stage 1 at TC39 this week. (Explanatory slidedeck.)

Popular YouTube channel Fireship explains ▶️ htmx in 100 seconds – well timed, since htmx is seeing a huge amount of fresh interest. And if you’re wondering who the mastermind behind Fireship is, Honeypot has put up ▶️ a short documentary about him.

The folks at Sandworm have shared a look at the state of the npm registry including lots of trivia, history, and stats on how many packages there are, as well as the most commonly used keywords in packages.

Google shares a case study on performance of scroll-driven animations using its new browser based API versus ‘classical JavaScript techniques.’ Unsurprisingly it’s much faster running away from the main thread, and the spec remains in draft for now.

npm will now check the linked source commit and repo when you view a package’s provenance information on npmjs.com and warn you when said provenance cannot be established.

GitHub is rolling out a beta of passwordless, passkey based authentication on GitHub․com.

📒 Articles & Tutorials

Useful Functions for a (Deno) HTTP Server — You could think of HTTP in a functional way with requests going in and responses/results going out. The author explores Deno’s new Deno.serve function and how both it and the /x/http_fns functions can provide a more functional approach to common HTTP tasks.

Jollytoad

Testing the Dark Scenarios of a Node.js App — Several examples of often overlooked things you should be testing. What happens when a service times out, code is mutating things it shouldn’t, or you have zombie processes milling around? These are some of the ‘dark scenarios’ it’s not too difficult to prepare for.

Yoni Goldberg and Raz Luvaton

The 2023 State of the API Report Is Here — The State of the API is the world’s largest survey and report on APIs, with findings from over 40K developers and API professionals.

Postman sponsor

Creating Randomized Zelda: Tears of the Kingdom Patterns — Nintendo’s new Zelda game uses repeated, geometric patterns as part of its aesthetic. This post looks at how to recreate such motifs with SVG and JavaScript.

Paul Hebert

5 TS Compiler Flags You Should Include in Your Project’s Config

Igor Konovalov

Deploying a Fastify and Vue 3 Static Site to Heroku

Liran Tal

Getting Started with Vector Databases in Node.js

Valeri Karpov

🛠 Code & Tools

MDX Editor: A Rich Markdown Editor React Component — A Lexical-powered Markdown editor for React apps that supports code blocks, tables, and more. The live demo shows off most of what you need to see.

Petyo Ivanov

Meet Your New Favorite Teammate: Cody, the AI Coding Assistant — Code faster with Cody, the only code AI that knows your entire codebase, like the pair programmer you always wanted.

Sourcegraph sponsor

electron-vite: Next Generation Electron Build Tooling — Fish and chips, Bert and Ernie.. some things are just better together, and so it goes with the Electron desktop app framework and the Vite frontend toolkit. There’s also an Electron Vite Boilerplate app to kick off a new app with.

Alex Wei

📊  Vizzu 0.8: A Library for Animated Data Visualizations — Making data visualizations is reasonably easy, but animating them is harder. Vizzu steps in to help you create animated data stories and explorations. There are lots of showcases and examples to peruse.

Vizzu Inc.

🐊  Putout: A Configurable, Babel-Based Linter and Code Transformer — Provides typical linting functionality with ESLint and code transformation with Babel, but distinguishes itself by being prepared to make “more drastic code transformations” than other tools. It’s not the most popular option but it makes a good case for itself in its thorough README.

coderaiser

Standardized Audio Context: Cross-Browser Web Audio API Wrapper — A side effect-free abstraction over a subset of the Web Audio API that works reliably across all mainstream browsers.

Christoph Guttandin

Kanel: Generate TypeScript Types from Postgres — It works by inspecting a live database and outputs code you can add to a TypeScript project and use with something like Knex – GitHub repo.

Kristian Dupont

React Authentication — Without Complexity

Userfront sponsor

Boa 0.17 – An experimental Javascript lexer, parser and compiler written in Rust that can be embedded into other projects – it now has a module system.

Octokit.js 3.0
↳ Official GitHub SDK for browsers, Node, and Deno.

Release It! 16.1
↳ Automate npm package publishing and versioning.

zlFetch 6.0
↳ Convenience wrapper around the Fetch API.

Terminalizer 0.10
↳ Record your terminal and generate animated GIFs.

eslint-plugin-prettier 5.0
↳ Prettier, but as an ESLint rule.

Preact 10.16 – 3KB React compatible alternative.

💻 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.

🍩 Homer would approve

donut.js: donut.c, But in JavaScript — donut.c, dating from 2006, is a donut-shaped C program that, when run, animates a spinning ASCII text donut on the screen. Here’s a fresh and hot JavaScript variant!

Evan Zhou

Announcing N|Solid v4.9.5

Posted on by

NodeSource is excited to announce N|Solid v4.9.5 which contains the following changes:

General stability improvements and bug fixes.
Node.js v16.20.1 (LTS): Includes a Rebase of N|Solid on Node.js v16.20.1 (LTS).
Node.js v18.16.1 (LTS): Includes a Rebase of N|Solid on Node.js v18.16.1 (LTS).

For detailed information on installing and using N|Solid, please refer to the N|Solid User Guide.

Changes

N|Solid v4.9.5 includes patches for this vulnerability:

CVE-2022-25883: Versions of the package semver before 7.5.2 are vulnerable to Regular Expression Denial of Service (ReDoS) via the function new Range, when untrusted user data is provided as a range.

There are two available LTS Node.js versions for you to use with N|Solid, Node.js 16 Gallium and Node.js 18 Hydrogen.

N|Solid v4.9.5 Gallium ships with Node.js v16.20.1.

N|Solid v4.9.5 Hydrogen ships with Node.js v18.16.1.

The Node.js 16 Gallium LTS release line will continue to be supported until September 11, 2023.

The Node.js 18 Hydrogen LTS release line will continue to be supported until April 30, 2025.

Supported Operating Systems for N|Solid Runtime and N|Solid Console

Please note that The N|Solid Runtime is supported on the following operating systems:

Windows:
Windows 10
Microsoft Windows Server 1909 Core
Microsoft Windows Server 2012
Microsoft Windows Server 2008
macOS:
macOS 10.11 and newer
RPM based 64-bit Linux distributions (x86_64):
Amazon Linux AMI release 2015.09 and newer
RHEL7 / CentOS 7 and newer
Fedora 32 and newer
DEB based 64-bit Linux distributions (x86_64, arm64 and armhf):
Ubuntu 16.04 and newer
Debian 9 (stretch) and newer
Alpine
Alpine 3.3 and newer

Download the latest version of N|Solid

You can download the latest version of N|Solid via http://accounts.nodesource.com or visit https://downloads.nodesource.com/ directly.

New to N|Solid?

If you’ve never tried N|Solid, this is a great time to do so. N|Solid is a fully compatible Node.js runtime that has been enhanced to address the needs of the Enterprise. N|Solid provides meaningful insights into the runtime process and the underlying systems. Click 👉 [HERE]

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

Posted on by

[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]

Measure Node.js server response time with N|Solid

Posted on by

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

JavaScript sans build systems?

Posted on by

#​626 — February 17, 2023

Read on the Web

JavaScript Weekly

Writing JavaScript Without a Build System — Using a variety of build tools for things like bundling and transpiling is reasonably standard in modern JavaScript development, but what if you want to keep things simple? For simple things, it’s not necessary, says Julia. This led to a lot of discussion on Hacker News.

Julia Evans

Ryan Dahl, Node.js Creator, Wants to Rebuild the Runtime of the Web — A neat bit of journalism about the alternative JavaScript runtime Deno and what Ryan Dahl is trying to achieve with it and how Ryan handled the stress of being known as the creator of Node.js.

Harry Spitzer / Sequoia

Broadcasting a Live Stream With Nothing but JavaScript — Live streams typically use third-party software to broadcast, but with Amazon Interactive Video Service, you can build a powerful, interactive broadcasting interface with the Web Broadcast SDK and JavaScript. Click here to learn more.

Amazon Web Services (AWS) sponsor

core-js’s Maintainer Complains Open Source Is ‘Broken’ — core-js is a popular universal polyfill for JavaScript features and its author has run into his fair share of bad luck which has culminated in this lengthy post on the state of the project, his issues in securing an income and, well, the downsides to living in Russia. The Register has tried to balance out the story.

The Register

IN BRIEF:

🐒 The just released Firefox 110 for Android now supports Tampermonkey, an extension for running JavaScript ‘userscripts’ on sites you visit.

The Angular project is taking steps to revamp its reactivity model to enable fine-grained change detection via signals.

The latest beta of iOS and iPadOS 16.4 supports the Web Push API for home screen webapps.

🐦 A fun Twitter thread where Qwik’s Miško Hevery attempted to demonstrate why a = 0-x is about 3-10x faster than a = -x before being told about a flaw in his benchmark. There is still a performance difference, though.

▶️ The React.js documentary we mentioned last week has now been released and it’s a heck of a watch – you’ll need 78 minutes of your time though.

RELEASES:

Node.js 19.6.1, 18.14.1, 16.19.1 and 14.21.3.

JavaScript Obfuscator 4.0 – Code scrambler.

Shoelace 2.1
↳ Framework agnostic Web components.

Mermaid 9.4
↳ Text to diagram generator. Now with timeline diagram support.

Cypress 12.6

📒 Articles & Tutorials

Use a MutationObserver to Handle DOM Nodes that Don’t Exist Yet — Comparing the effectiveness of the MutationObserver API with the conventional method of constantly checking for the creation of nodes.

Alex MacArthur

Well-Known Symbols in JavaScript — Hemanth, a TC39 delegate, shows off 14 symbols and where they can come in useful.

Hemanth HM

🚀 Monitor and Optimize Website Speed to Rank Higher in Google — Monitor Google’s Core Web Vitals and optimize performance using in-depth reports built for developers. Improve SEO & UX.

DebugBear sponsor

Why to Use Maps More and Objects Less — A journey down a performance rabbit hole.

Steve Sewell

Adopting React in the Early Days — A personal history lesson providing context around React’s evolution. While React might be an obvious, even safe, choice now, that wasn’t always true.

Sébastien Lorber

An Animated Flythrough with Theatre.js and React Three Fiber — How to fly through a 3D scene using the Theatre.js JavaScript animation library and the React Three Fiber 3D renderer. This is the sort of thing that used to be Very Difficult™ but is now relatively trivial.

Andrew Prifer (Codrops)

How to Change the Tab Bar Color Dynamically with JavaScript

Amit Merchant

Is Deno Ready for Primetime? One Dev’s Opinion

Max Countryman

Using Playwright to Monitor Third-Party Resources That Could Impact User Experience

Stefan Judis

🛠 Code & Tools

Dependency Cruiser: Validate and Visualize JavaScript Dependencies — If you want a look at the output, there’s a whole page of graphs for popular, real world projects including Chalk, Yarn, and React.

Sander Verweij

Devalue: Like JSON.stringify, But.. — “Gets the job done when JSON.stringify can’t.” Namely, it can handle cyclical and repeated references, regular expressions, Map and Set, custom types, and more.

Rich Harris

🧡 JavaScript Scratchpad for VS Code (2m+ Downloads) — Get Quokka.js ‘Community’ for free: #1 tool for exploring/testing JavaScript with edit-continue experience to see realtime execution and runtime values.

Wallaby.js sponsor

NodeGUI: Build Native Cross-Platform Desktop Apps with Node.js — Unlike Electron which leans upon webviews and HTML, NodeGui uses a Qt based approach. This week’s 0.58.0 release is the first stable release based on Qt 6 and offering high DPI support.

NodeGui

DOMPurify 3.0: Fast, Tolerant XSS Sanitizer for HTML and SVG — A project that’s nine years old today but still actively developed. Supports all modern browsers (IE support was only just dropped) and is heavily tested. There’s a live demo here.

Cure53

Pythagora: Generate Express Integration Tests by Recording Activity — This is a neat idea still in its early stages. Add a line of code after setting up an Express.js app and this will capture app usage and generate integration tests based on the interactions. (▶️ Screencast demo.)

zvone187 and LeonOstrez

Try Stream’s Free Trial of SDKs for In-App Chat

Stream sponsor

grep.app: Search Code Across a Half Million GitHub Repos — A code search engine that lets you use regexes or syntax in your search. Considering what it is, it’s pretty fast and has an extensive index (over half a million public repos from GitHub, allegedly).

grep.app

tsParticles: Particles, Confetti and Fireworks for Your Pages — Create customizable particle related effects for use on the Web. Uses the regular 2D canvas for broad support.

Matteo Bruni

💻 Jobs

Software Engineer — Join our happy team. Stimulus is a social platform started by Sticker Mule to show what’s possible if your mission is to increase human happiness.

Stimulus

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

QUICK RELEASES:

Minimatch 6.2
↳ Glob matcher library, as used in npm.
    minimatch(“bar.foo”, “*.foo”)

React Accordion 1.2
↳ Unstyled WAI-ARIA-compliant accordion library.

ScrollTrigger 1.0.6
↳ Have your page react to scroll changes.

VeeValidate 4.7.4
↳ Popular Vue.js form library

Express Admin 2.0
↳ Admin interface for data in MySQL/Postgres/SQLite.

Execa 7.0
↳ Improved process execution from Node.js.

React Tooltip 5.8