We’re taking a few weeks off, but..

#​652 — August 17, 2023

Read on the Web

🏝️ I’m taking two weeks off and will be back on Thursday, September 7. So if you don’t see the newsletter turn up for a while, it’s our fault 😉 As I’ve had to produce much of this issue a few days in advance, I’m mixing in some ‘golden oldies’ and popular items from earlier this year to keep things interesting, so this is a less newsy issue than usual. See you again in September! 👋
__
Peter Cooper, your editor

JavaScript Weekly

How Dropbox Reduced the Size of Its JavaScript Bundles by 33% — The folks at Dropbox realize that when you’re operating at scale, small annoyances and delays add up, and their web perf team narrowed down some of Dropbox’s perf issues to their module bundling process.

Nadeem and Hong (Dropbox)

htmx is Part of the GitHub Acceleratorhtmx is a perfect example of a library that isn’t brand new, but one that becomes popular once the time is right. Its success is only continuing following acceptance into the first class of GitHub’s open-source Accelerator initiative, an opportunity that will enable the development of htmx 2.0. GitHub repo.

Big Sky Software

You Might Not Need a Framework — Maximiliano Firtman shares the vanilla approach in this video course on building rich web apps and sites without depending on libraries of frameworks. It covers the DOM, event handling, routing, web components, and more.

Frontend Masters sponsor

You Don’t (May Not) Need Lodash or Underscore — Inspired by the popular You Might Not Need jQuery, this extensive document provides pure JavaScript alternatives to almost 100 different functions as you’d find in popular utility libraries like Lodash.

You Don’t Need

⚡️ IN BRIEF:

It’s still a few weeks away, but we’re told Bun 1.0 is almost here” and there’s 📅 a live presentation by Bun’s creator, Jarred Sumner, on September 7 you can sign up for now.

If you like to keep up with other languages than JavaScript, renowned C++ expert Herb Sutter recently ▶️ gave a fantastic talk about modernizing and improving C++ more quickly by creating a Typescript-esque superset with better abstractions and features.

🕹 React Jam was a React-oriented gamejam that took place last week and here are the winning games.

👾 Talking of gaming, the annual js13kGames JS coding competition has just started. You can join in the fun, though, as it doesn’t end till September 13.

Robin Wieruch shared his 10 Web development trends in 2023 back in January – how are they shaping up so far? As Larry David might say.. pretty, pretty good.

In “The “Skeleton Squad” is now targeting NPM“, the team at Socket take a look at how a group is attacking the npm package ecosystem.

🐦▶️ Playing with the earliest JavaScript in Netscape 2.0.

🎉 RELEASES:

Fresh 1.4
↳ The Deno-powered web framework.

jest-dom 6.0
↳ Custom matchers to test the state of the DOM.

NodeBB 3.3 – Node.js-powered forum software.

Electron 26.0

Angular 16.2

Playwright 1.37.0

📒 Articles & Tutorials

Discover three.js: A Complete Guide to Creating 3D Web Experiences — The breadth of the content on offer here had me looking for the price, but it’s all online and free. There’s a lot to dig through here if you want to get started (or just get better) at using three.js. If you’re already familiar with three.js, you may enjoy the three.js tips and tricks page.

Lewy Blue

JSX Without React — Exploring a new tool called NakedJSX that will allow you to render JSX without the need for the full React framework.

Chris Coyier

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

Userfront sponsor

You’ve Got Options for Removing Event Listeners — Reviewing some of the most common approaches available to remove event listeners in JavaScript.

Alex MacArthur

Prepare Your Firefox Desktop Extension for the Upcoming Android Release“Firefox will become the only major Android browser to support an open extension ecosystem.”

Scott DeVaney (Mozilla)

Application State Management with Angular Signals

Yevgeny / Oz

▶  Six (or so) New Approved and Proposed JavaScript APIs

Syntax Pocast podcast

The Importance of Verifying Webhook Signatures

Marcelo Oliveira (Snyk)

Writing JavaScript Without a Build System

Julia Evans

🛠 Code & Tools

Croner 7.0: Cron for JavaScript and TypeScript — Trigger functions upon the schedule of your choice using the classic cron syntax. Works in Node, Deno, Bun and the browser, across time zones, offers error handling and overrun protection, and more. There’s an live demo on JSFiddle. v7.0 adds support for specifying the n-th weekday.

Hexagon

Linkify 4.1: Link Up URLs, Email Addresses, and More in Plain Text — Given some plain text containing things like links and emails, Linkify will generate the correct code to display it on the Web. Not just URLs or emails, but hashtags, @mentions, IP addresses, and more – see the homepage for examples. GitHub repo.

Hypercontext

🦘JavaScript Scratchpad for VS Code: New Logpoints Feature! — Seeing runtime values has never been so easy. Simply place a breakpoint on a line, no debugger required: zero setup/configuration.

Wallaby.js sponsor

deno_python: Python Interpreter Bindings for Deno — A seamless Deno-Python integration via the Python/C API. The latest release supports installing and importing pip packages. This feature has been described as “slightly cursed” but it’s certainly interesting.

Denosaurs

Tagger: A Zero Dependency, Vanilla JavaScript Tagging Library — You can play with a live demo here.

Jakub T. Jankiewicz

Over 100 Algorithms and Data Structures Demonstrated in JS — Examples of many common algorithms (e.g. bit manipulation, Pascal’s triangle, Hamming distance) and data structures (e.g. linked lists, tries, graphs) with explanations. Available in other languages too like Chinese, Korean, French, and Spanish.

Oleksii Trekhleb et al.

Deliver Interactive Real-Time Live Streams with Amazon IVS

Amazon Web Services (AWS) sponsor

Proto Tree: A Way to Observe the JS Prototype Chain — Gal explains the motivation for this tool in 🐦 this Twitter thread.

Gal Weizman

Barba.js: For Smooth Visual Transitions Between Pages — You certainly can’t say the project’s homepage doesn’t show off all of its features. For such a dramatic set of effects, things feel smooth and surprisingly nice 😁 GitHub repo.

De Rosa, Michel, et al.

Stritch: A JavaScript Barcode Scanning Library — It’s a commercial library, but featureful and well presented with support for a variety of 1D and 2D barcode types.

Pixelverse LLC

#Script: A JS-Inspired Scripting Language for .NET — An embeddable scripting language mostly targeting template use cases. It can also be used in a Lisp style.

ServiceStack

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

ngraph.path: Path Finding Through Graphs — There’s a live demo if you want to see how it tackles the road network of several global cities.

Andrei Kashcha

SVGR 8.1
↳ Transform SVGs into React components.

BlockNote 0.9
↳ “Notion-style” block-based editor built atop Prosemirror. (Demo)

React Number Format 5.3
↳ Input formatter library for numbers.

Tinypool 0.8
↳ Minimal/tiny Node.js worker thread pool.

melonJS 15.9 – Lightweight HTML5 game engine.

Sortable 2.3 – Vanilla JS table sort. (Demo)

Preact 10.17.0

😭 Last week I promised a JavaScript AI/ML feature, but time hasn’t worked out in my favor (note to self: don’t send an issue while on vacation 😆). Keep your fingers crossed and it’ll be in one of the next issues. So much has been happening in the JavaScript AI/ML space that we want to shine a spotlight on it sooner than later.

👋 We’ll be back in three weeks on September 7, 2023. See you soon! If you have anything to submit for the next issue, hit reply and let us know (but appreciate we may be slow to reply since we’ll be on vacation 😉).

N|Solid v4.10.1 is now available

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

General stability improvements and bug fixes
Node.js v16.20.2 (LTS): Includes a Node.js security release captured in Node.js v16.20.2 (LTS).
Node.js v18.17.1 (LTS): Includes a Node.js security release captured in Node.js v18.17.1 (LTS).

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

Changes

IMPORTANT: This release of N|Solid v4.10.1 contains a Node.js security release!

This release includes patches for these vulnerabilities:

• CVE-2023-32002: Policies can be bypassed via Module._load (High)

• CVE-2023-32006: Policies can be bypassed by module.constructor.createRequire (Medium)
• CVE-2023-32559: Policies can be bypassed via process.binding (Medium)
• OpenSSL Security Releases
OpenSSL security advisory 14th July.
penSSL security advisory 19th July.
OpenSSL security advisory 31st July

N|Solid

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.10.1 Gallium ships with Node.js v16.20.2.

N|Solid v4.10.1 Hydrogen ships with Node.js v18.17.1.

Node.js

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]

Svelte 5 is going to be radical

#​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

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

Taking JavaScript into Python

#​650 — August 3, 2023

Read on the Web

JavaScript Weekly

A Tale of Evading JavaScript Anti-Debugging Techniques — When you’re poking arounddebugging code written and distributed by a third party, there might be some sneaky traps thrown in your path to prevent your usual techniques from working. What next? Disable breakpoints in DevTools? Use a proxy? What about.. recompiling your entire browser? 😆

Veritas

This reminds me of the guy who scraped pages by dumping heap snapshots from the browser – another fun post if you enjoy low level spelunking.

VanJS 1.0: A 1KB Reactive UI Framework Without React/JSX — VanJS is particularly light and elegant, and its author has put some serious effort into documenting it and offering tools to convert your HTML to its custom format. This week’s v1.0 release is a relatively big step forward for what is still a young project. GitHub repo.

Tao Xin

Add Excel-Like Spreadsheet Features to Your JavaScript Apps: SpreadJS — SpreadJS is the industry-leading JavaScript spreadsheet for adding advanced spreadsheet features to your enterprise apps. Build finance, analysis, budget, and other apps. Excel I/O, 500+ calc functions, tables, charts, and more. View demos now.

SpreadJS from GrapeCity sponsor

PythonMonkey: JavaScript/WASM Interop for Python — The alpha release of a new way to bring Python and JavaScript together, by way of embedding Mozilla SpiderMonkey into the Python VM. This post introduces the concept with some examples, an idea of where the project is headed, as well as some Colab demos. GitHub repo.

Will Pringle

dnt: A Tool to Publish a Hybrid npm Module for ESM and CommonJS — From the Deno team comes a tool that lets you write modules in JavaScript or TypeScript and then transforms them to support CommonJS, ESM, browsers, Deno, Node, and more.

Andy Jiang (Deno)

⚡️ IN BRIEF:

🎧 The popular Syntax.fm podcast has had a run of interesting episodes lately covering topics like the idea of ▶️ server-side JavaScript standards, ▶️ Rust for JavaScript developers, and ▶️ the role of polyfills.

A social engineering campaign that targets tech employees has been spreading through npm malware, claims Feross Aboukhadijeh of Socket.

Radix UI is now available in Vue thanks to Radix Vue.

Google has unveiled some big improvements to how the Google Maps JavaScript code can be loaded.

Firefox 116’s DevTools now support Custom Object formatters. This feature, long supported by Chrome, lets sites determine how certain types of object representation are formatted in the console and debugger.

The Svelte project has posted its latest monthly update. There’s a lot going on in the Svelte world right now.

Logging and Tracing Re-invented. Stop Sampling, Get Axiom
“In the beginning there was stdout….” Get started for free, or get 1tb for $25/mo.

Axiom sponsor

🎉 RELEASES:

Backbone 1.5 – Yes. Really. And it’s still a thing of beauty.

Shoelace 2.6 – Popular suite of agnostic UI Web Components.

Prisma 5.1 – Next-gen Node.js + TypeScript ORM.

eslint-config-prettier 8.10 – Turn off ESLint rules that clash with Prettier.

📒 Articles & Tutorials

Understanding React Server Components — If you’ve struggled to get your head around the ideas involved, and Dan Abramov’s ‘let’s recreate RSCs from scratch’ went too deep, this is a good, high-level explanation of the fundamentals covering what problems RSCs solve, why you might use them, and how Next.js makes it all easier.

Alice Moore (Vercel)

Type vs Interface: Which Should You Use in 2023? — Learn the key differences between interfaces and type aliases in TypeScript, including their use cases and important features to consider.

Matt Pocock

How to Build a Multilanguage Website with Next.js & Storyblok

Storyblok sponsor

Speeding Up V8 Heap Snapshots — When diagnosing a memory leak in a JavaScript app, engineers at Bloomberg encountered some weird performance issues with capturing a single full-size heapshot taking more than 30 minutes(!) at times. Here’s the full story of how they investigated and resolved the problem.

José Dapena Paz (Igalia)

‘If Web Components Are So Great, Why Am I Not Using Them?’ — Do Web Components have a marketing problem? Dave thinks so, and shares what he thinks the issues are for this slowly-adopted technology.

Dave Rupert

▶  How to Build a Drag-and-Drop Kanban Board — A complete screencast walkthrough of using React to build a Trello-like app based around the familiar Kanban board pattern. It also serves as an introduction to the dnd-kit drag-and-drop toolkit.

Kliton Bare

An Introduction to Quicksort — A good, beginner friendly introduction to the Quicksort algorithm, concluding with a JavaScript implementation. (Beware the floating burger though..)

Kirupa Chinnathambi

Everything Mux Learnt Migrating 50K Lines of Code to React Server Components

Darius Cepulis (Mux)

▶  Refactoring an Angular App to Modern NgRxNgRx is a reactive state management approach for Angular.

Marko Stanimirovic

🛠 Code & Tools

tsup 7.2: Bundle Your TypeScript Library with No Config — Throw your .js, .json, .mjs, .ts, and .tsx files at the esbuild-powered tsup and say hello to transpiled, bundled code for distribution. More in this tutorial.

egoist

Vite React Boilerplate: A Production Ready Starter Template — A new ‘batteries included’ Vite + React app template that leans upon, well, a lot of batteries from Zustand to Zod to Storybook.

Ricardo Valdovinos

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

FusionAuth sponsor

Hackathon Starter 8.0: A Boilerplate for Node Web Apps — For when you might want to start building a Node app quickly (like at a hackathon, say) including key features like auth/OAuth, Bootstrap 5, account management, email forms..

Sahat Yalkabov

OGL 1.0: A Minimal WebGL Framework — WebGL is far from the easiest technology to use on its own, so libraries like Three.js are often used to make it more accessible. OGL has a similar motive to Three.js while remaining far closer to the WebGL metal.

Nathan Gordon et al.

💻 Jobs

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

🛸 Emerge Tools

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.

Size Limit 8.2: JavaScript Performance Budgeting Tool — Calculate the real ‘cost’ to run your JS app or lib and maintain an eye on performance and raise the alarm (in your CI system, say) when things go awry. Supports ES modules and tree shaking.

Andrey Sitnik

Stockfish.js 16 – The famous Stockfish chess engine in JS via WASM.

Marked 6.0 – Fast Markdown parser and compiler. Now rewritten in TypeScript.

eta (η) 3.1 – Embedded JS template engine. Now with Bun support.

Tremor 3.6 – React library for building dashboards.

Octokit.js 3.1 – ‘Batteries-included’ GitHub SDK.

React Image Gallery 1.3 – Image gallery carousel component.

YouTube.js 5.8 – Library to use YouTube’s private API.

🐴 Let’s hit the Oregon Trail

The Oregon Trail was a 2000+ mile wagon route used by traders and migrants headed west in the early days of the United States. It was also a hugely popular computer game that, more often than not, ended in disaster for the virtual settlers whose lives you directed.

Particularly popular on the Apple II and early Macs, you can give the game a spin via the following project:

Macintosh.js: A Virtual Macintosh Running via Electron — An impressive virtual machine emulating a 1991 Macintosh Quadra 900 with System 8, all running in Electron. We linked to this several years ago but it’s had some updates since then and runs faster than before. As well as a few games, such as Oregon Trail, there are a variety of apps pre-installed, including a trial of Adobe Photoshop 3 which starts up faster than my real Photoshop now.. (Download necessary since it’s an Electron app and all..)

Felix Rieseberg, Apple, et al.