Tag: scripting

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.

Comparing test assertion styles in JavaScript

Posted on by

#​657 — October 5, 2023

Read on the Web

JavaScript Weekly

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

Jake Lazaroff

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

Isaac Z. Schlueter

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

Frontend Masters sponsor

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

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

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

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

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

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

🎉 RELEASES:

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

Sinon 16.1 – Provides test spies, stubs and mocks.

Astro 3.2, Redux Toolkit 1.9.7, and pnpm 8.8

📒 Articles & Tutorials

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

Tom Hacohen

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

Ben Vinegar

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

JetBrains sponsor

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

Dmitry Kudryavtsev

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

Andrew Israel (PropelAuth Blog)

▶  Let’s Create a Filter Table Component in Vue

Andrew Schmelyun

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

Gajus Kuizinas

Next.js 13 vs Remix: A Case Study

Prateek Surana

Using the Intl Segmenter API

Kilian Valkhof

🛠 Code & Tools

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

Tailwind Elements

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

Paul Irish

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

iamkun

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

Wallaby Team sponsor

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

Simon Reinisch

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

Timothy Lin

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

Kaluma Project

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

Sindre Sorhus

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

Prev Wong

Create Collaborative Apps Like Figma and Miro in Days with Ably

Ably sponsor

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

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

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

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

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

Ziggy 1.7 – Use Laravel named routes in JavaScript.

Marked 9.1 – Markdown parser & compiler.

💻 Jobs

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

Bosch

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

Crystallize

🎁 A VS Code Bonus

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

Valerii Iatsko

Taking JavaScript into Python

Posted on by

#​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 NgRx — NgRx 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.

Bundle-time macros with Bun

Posted on by

#​641 — June 1, 2023

Read on the Web

JavaScript Weekly

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

Jarred Sumner

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

Delba de Oliveira (Vercel)

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

Snyk sponsor

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

Christopher Cavalea

⚡️ IN BRIEF:

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

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

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

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

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

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

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

Stephanie Eckles

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

JSDayIE sponsor

RELEASES:

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

Neutralinojs 4.12 – Desktop app dev framework.

Parcel 2.9

Bootstrap 5.3.0

node-oracledb 6.0

???? Articles & Tutorials

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

Ruth John

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

Szymon Chmal

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

FrontStart

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

New Relic sponsor

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

Evan Hahn

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

Rem / Frontend Mastery

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

Beyond Fireship

Automatically Unsubscribe from RxJS Observables in Angular Components

Rob Bell

Deploying Vanilla Node.js Apps on Fly.io

Sam Ruby (Fly)

Asynchronous JavaScript for Beginners

Daniel Agantem

???? Code & Tools

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

Svelvet Team

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

Alex Grozav

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

Handsontable Data Grid sponsor

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

Stuhl

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

David Aerne

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

Adam Ritter

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

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

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

OverlayScrollbars 2.2 – JS custom scrollbar plugin.

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

Vuetify 3.3.2 – Vue component framework.

React Slider 10.2 – Demos.

???? Jobs

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

Hired

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

????  Live-streaming from JavaScript

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

Sean DuBois on JSFiddle

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

A new jQuery release for Xmas

Posted on by Simon Helberg

#​619 — December 16, 2022

Read on the Web

🎄 This is the final issue of the year – we’ll be back on January 6, 2023. We hope you have a fantastic holiday season, whether or not you are celebrating, and we’ll see you for a look back at 2022 in the first week of January 🙂
__
Peter Cooper and the Cooperpress team

JavaScript Weekly

Announcing SvelteKit 1.0 — Svelte is a virtual DOM-free, compiled ahead of time, frontend UI framework with many fans. SvelteKit introduces a framework and tooling around Svelte to build complete webapps. This release post explains some of its approach and how it differs to other systems.

The Svelte Team

Dr. Axel Tackles Two Proposals: Iterator Helpers and Set Methods — Here’s something to get your teeth into! Dr. Axel takes on two promising ECMAScript proposals and breaks down what they’re about and why they’ll (hopefully) become useful to JavaScript developers. The first tackles iterator helpers (new utility methods for working with iterable data) and the second tackles Set methods which will extend ES6’s Set object.

Dr. Axel Rauschmayer

🧈 Retire your Legacy CMS with ButterCMS — ButterCMS is your new content backend. We’re SaaS so we host, maintain, and scale the CMS. Enable your marketing team to update website + app content without needing you. Try the #1 rated SaaS Headless CMS for your JS app today. Free for 30 days.

🧈 ButterCMS sponsor

🏆  The Best of Node Weekly in 2022 — In this week’s issue of Node Weekly (our Node.js-focused sister newsletter) we looked back at the most popular items of the year, including the Tao of Node, an array of JavaScript testing best practices, and the most popular Node.js frameworks in 2022.

Node Weekly Newsletter

jQuery 3.6.2 Released — Humor me. You might not be using jQuery anymore, but it’s (still) the most widely deployed JavaScript library and it’s fantastic to see it being maintained.

jQuery Foundation

IN BRIEF:

Node 19.3.0 (Current) has been released to bring npm up to v9.2. Breaking changes in v9.x warrant this update and the release post explains the current policy around npm’s ongoing inclusion in Node.

ƛ The Glasgow Haskell Compiler (GHC) has gained a new JavaScript backend meaning the reference Haskell compiler can now emit JavaScript and be used more easily to build front-end apps.

GitHub is rolling out secrets scanning to all public repos for free.

The New Stack reflects on 2022 as a ‘golden year’ for JavaScript and some of the developments we’ve seen. We’ll be doing our own such roundup in the next issue.

RELEASES:

Node.js 16.19.0 (LTS) and 14.21.2 (LTS)

Chart.js 4
↳ Canvas-based chart library. (Samples.)

PouchDB 8.0
↳ CouchDB-inspired syncing database.

SWR 2.0 – React data-fetching library.

📒 Articles & Tutorials

Why Cypress v12 is a Big Deal — A practical example-led love letter of sorts to how the latest version of the popular Cypress ‘test anything that runs in a browser’ library makes testing frontend apps smoother than before.

Gleb Bahmutov

Five Challenges to Building an Isomorphic JS Library — When it comes to JavaScript, “isomorphic” means code or libraries that run both on client and server runtimes with minimal adaptations.

Nick Fahrenkrog (Doordash)

▶  A Podcast for Candid Chats on Product, Business & Leadership — Join Postlight leaders & guests as they discuss topics like running great meetings & creating solid product launches.

The Postlight Podcast sponsor

Next, Nest, Nuxt… Nust? — “This blog post is for everyone looking for their new favorite JavaScript backend framework.” If the names of frameworks are all starting to blur together in your head, this is for you. Marius explains just what systems like Next and Gatsby do and touches on a few differences.

Marius Obert (Twilio)

Calculating the Maximum Diagonal Distance in a Given Collection of GeoJSON Features using Turf.js — This is cool. Turf.js is a geospatial analysis library, by the way.

Piotr Jaworski

Optimize Interaction to Next Paint — How to optimize for the experimental Interaction to Next Paint (INP) metric — a way to assess a page’s overall responsiveness to user interactions.

Jeremy Wagner & Philip Walton (Google)

Need to Upgrade to React 18.2? Don’t Have Time? Our Experts Can Help — Stuck in dependency hell? We’ve been there. Hire our team of experts to upgrade deps, gradually paying off tech debt.

UpgradeJS.com – JavaScript Upgrade Services by OmbuLabs sponsor

How We Configured pnpm and Turborepo for Our Monorepo

Pierre-Louis Mercereau (NHost)

Rendering Emails with Svelte

Gautier Ben Aim

🛠 Code & Tools

Wretch 2.3: A Wrapper Around fetch with an Intuitive Syntax — A long standing, mature library that makes fetch a little more extensible with a fluent API. Check the examples.

Julien Elbaz

SWR 2.0: Improved React Hooks for Data Fetching — The second major release of SWR (Stale-While-Revalidate) includes new mutation APIs, new developer tools, as well as improved support for concurrent rendering.

Ding, Liu, Kobayashi, and Xu

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

vanilla-tilt.js 1.8: A Smooth 3D Tilting Effect Library — No dependencies and simple to use and customize. GitHub repo.

Șandor Sergiu

visx: Airbnb’s Low Level Visualization React Components — Bring your own state management, animation library, or CSS-in-JS.. visx can slot into any React setup. Demos.

Airbnb

Scene.js 1.7: A CSS Timeline-Based Animation Library — Plenty of examples on the site. Has components for React, Vue and Svelte.

Daybrush

PortalVue 3.0
↳ Feature-rich portal plugin for Vue 3.

Kea 3.1
↳ Composable state management for React.

jest-puppeteer 6.2
↳ Run tests using Jest + Puppeteer.

NodeBB 2.7 – Node.js based forum software.

Pino 8.8 – Fast JSON-oriented logger.

💻 Jobs

Software Engineer — Join our “kick ass” team. Our software team operates from 17 countries and we’re always looking for more exceptional engineers.

Stickermule

Developer Relations Manager — Join the CKEditor team to build community around an Open Source project used by millions of users around the world 🚀

CKEditor

Find JavaScript Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It’s free for job-seekers.

Hired

🎁 And one for fun

Snow.js: Add a Snow Effect to a Web Page — Well, it’s that time of the year (in some parts of the world!) If you’re more interested in how the effect is made, it’s inspired by this CodePen example built around some fancy CSS.

Or if you’re a bit more childish, you could always put Fart.js on your site.. 🙈

Merry Christmas to you all and we’ll see you again in 2023!