Month: May 2024

Remix + React Router == React Router?

Posted on by

#​688 — May 16, 2024

Read on the Web

JavaScript Weekly

📄  How to Document Your JavaScript Package — You’ve written some useful code, you want to distribute it.. what next? Useful docs! The Deno team demonstrates the value of JSDoc and writing documentation alongside your usual source code.

The Deno Team

Digging Into the Promise.withResolvers() Proposal — It’s so good to see Dr. Axel blogging again after a year away. He digs into the proposed Promise.withResolvers feature (now at stage 4) and why you might prefer to use it to create promises in a more elegant way.

Dr. Axel Rauschmayer

WorkOS: Enterprise-Grade Auth You Can Implement in Minutes — Like an enterprise plan in a box: WorkOS provides flexible, easy-to-use APIs to integrate SSO, SCIM, Audit Logs, User Management, and more. Used by some of the hottest startups including Perplexity, Vercel, & Webflow. Future-proof your auth stack with WorkOS.

WorkOS sponsor

Now You Can Try the React Compiler — A big item at this week’s React Conf was the open sourcing of React’s experimental compiler to optimize React code at build time. They’ve also created a React Compiler Playground to experiment with.

The React Team

IN BRIEF:

At Google I/O, the Google team unveiled the Web Platform Dashboard (above), a way to see the web platform mapped as a set of features, along with their cross browser support.

⭐ Remix and React Router have a shared history (and, increasingly, features) and that’s culminating in the merging of Remix and React Router: “What we planned to release as Remix v3 is now going to be released as React Router v7.”

The Deno Standard Library is now available on JSR.

RELEASES:

zx 8.1 – Google’s tool for better Node shell scripting. Both CommonJS and ESM now supported, increased Node version support, and Deno 1.x support.

Node.js 22.2 (Current), Storybook 8.1, Astro 4.8, Bun 1.1.8

ReacType v21 – Visual prototyping tool for React apps.

📒 Articles & Tutorials

Make Your GitHub Profile Dynamic with Bun and TypeScript — GitHub offers the ability to upload a profile README file that’s rendered at the top of your user page. If you want to have it dynamically update with links to your latest blog posts, statistics, or other bits of info, you can do it with a little JavaScript and GitHub Actions.

Duy Ng

Your Fastest Path to Production — Build, deploy, and scale your apps with unparalleled ease – from your first user to your billionth.

Render sponsor

▶  Learn with Me: Hono — I’m biased, since I think Takuya’s videos are amazing and am a huge fan of his note taking app, Inkdrop, but it’s neat to see someone sink their teeth into trying the Hono JS app framework.

Takuya Matsuyama

📄 Build Your Own React.js in 400 Lines of Code – A learning exercise. Zachary Lee

📄 The Carcinization of Web Frameworks – Are frameworks all starting to look alike? Jacob Kofoed

📄 Five Basic Things About JavaScript to Help Non JavaScript-Focused Web Designers Chris Coyier

📄 Personal-Scale Web Scraping for Fun and Profit Sean Morrissey

🛠 Code & Tools

🕹️ Athena Crisis: A Quality, JS-Powered Game — A commercial, turn-based strategy game available on the Steam Store, but now with an open sourced engine and tooling. The game is published by Null, an indie game publisher founded by GitHub cofounder Chris Wanstrath.

Christoph Nakazawa

fuzzysort 3.0: Fast Fuzzy Search Library — Check out the live example – it certainly feels quick.

Stephen Kamenar

Make the Scary Things Boring 😅 — Been told to do more with less? Talk to Test Double about how to deliver with fewer people without losing quality.

Test Double sponsor

GraphQL Yoga: A Full-Featured GraphQL Server — Create a schema, spin up a server, and you’re good to go (then you get to wire everything up). Supports GraphQL subscriptions via SSE. Designed to run across environments from Node to AWS Lambda, Deno, Bun, etc. GitHub repo.

The Guild

Vue Fluid DnD: An Animated Drag-and-Drop Library for Vue — Designed for lists of items and you can view a variety of examples here, including one where the items are draggable using handles. GitHub repo.

Carlos Jorge Rodriguez

Transformational Auth & Identity | Userfront — “Compared to our previous experiences in the security/auth space, Userfront is an order of magnitude simpler to use.”

Userfront sponsor

🗾 React Google Maps 1.0: Components and Hooks for Google Maps — Provides a way to integrate Google’s Maps API into a React app, with components to lay down markers, draw over maps, etc. GitHub repo.

OpenJS Foundation

alphaTab 1.3 (above) – Music notation and guitar tablature rendering library. It’s able to play the music, too, although the vibrato on the guitar sounded rather odd on my machine.. 😅

React Awesome Query Builder 6.5 – Logical query builder control. (Demo.)

🎨 jquery-color 3.0 – jQuery plugin for color manipulation and transitions.

Jdenticon 3.3 – Library for generating geometric ‘identicons’.

OverlayScrollbars 2.8 – JS custom scrollbar plugin.

NodeBB 3.8 – Node.js based forum system.

🎁 And one for fun..

Code Screenshot: A VS Code Extension to Create Code Screenshots — It basically loads your code into this site (which you can use directly, if you’d rather not install an extension) where you can tweak settings/theme and export to either a PNG or SVG.

Vkrsi / Visual Studio Marketplace

💡 Carbon remains a great option for this task, too.

Gulp is back – did it ever leave?

Posted on by

#​687 — May 9, 2024

Read on the Web

JavaScript Weekly

Development Notes from xkcd’s ‘Machine’ — I bet many of you are fans of xkcd! For this year’s April Fools’ joke, they published ‘Machine’, a giant Rube Goldberg machine of sorts (explained here). With a lot of TypeScript up front and Haskell in the back, here’s how it works at a technical level. (GitHub repo.)

Max Goodhart

Figma’s Journey to TypeScript — How the team at Figma automatically migrated code written in their own Skew programming language over to TypeScript — without disrupting a single day of development.

Brandon Lin (Figma)

Advanced JavaScript Tools to Empower Your Applications — Build better web applications with powerful JavaScript developer tools including: SpreadJS Excel-like spreadsheet components, ActiveReportsJS reporting tools, Wijmo UI component suite, and Document Solutions viewers for PDF, Excel, Image, and more.

MESCIUS inc sponsor

Gulp Never Went Away; Take the Gulp Developer Survey? — It’s easy to forget many great tools that got a lot of press years ago are still going and doing well. So it goes for Gulp, a build system and toolkit first released in 2013. Gulp 5.0 came out last month and the team is on a mission to make it even better. If you want to help, you can take their survey here.

Clarissa Abidog

IN BRIEF:

Ben Hong presents a helpful look at the Vue ecosystem as of 2024.

📅 React Conf 2024 takes place next week. No tickets, but you can register for the free livestream to enjoy it from afar.

The Node.js core invites you to take part in the latest Node.js Next 10 survey to help them make decisions about where to take Node next.

Last week we featured a fun ▶️ talk about the use of let vs const, but it seems Jack Herrington wasn’t a big fan of the approach, so he ▶️ spent 10 minutes analyzing the talk and its claims.

The Bun folks are seeking a systems engineer to join their team, as part of their push into making Bun 🐦 even more production-friendly.

RELEASES:

⭐️ esbuild 0.21.0 – A more significant release than the version number lets on, as it introduces support for the decorators proposal (so extra testing is recommended when you upgrade).

Docusaurus 3.3 – The React powered site builder.

Ionic 8.1 – Cross-platform UI toolkit for building native-quality apps.

pnpm 9.1, AdonisJS 6.9, Playwright 1.44.0, Bun 1.1.7

📒 Articles & Tutorials

▶  Seamless Drag and Drop Between Applications — A fantastic demonstration of using browser APIs to create more elegant drag and drop experiences that even work across different browser windows or IFRAMEs, with Atlassian’s Pragmatic Drag and Drop library doing the heavy lifting.

Alex Reardon

Why Patching Globals is Harmful — Modifying global APIs to extend their features is common, but not particularly desirable if readability, maintenance, and predictability are qualities you enjoy.

Artem Zakharchenko

Your Background Images Might Be Causing CLS by Salma Alam-Naylor — In this post, learn how to to avoid unexpected cumulative layout shift (CLS) with tried and tested solutions.

Sentry sponsor

Five Node Version Managers Compared — Ideally, we could use the latest LTS version of Node for everything, but in reality we often need to switch versions. Numerous tools let you do this. NVM is the best known, but N, FNM, Volta, or even pnpm could suit you better?

Pavel Romanov

‘At Some Point, JavaScript Got Good’ — The author notes JavaScript got a “big ‘boost’” with ES6, and commends the continuous improvements made since. Perhaps unsurprisingly, an associated lively discussion on Hacker News highlighted some lingering overall disdain.

Jonathan Beebe

📺 Exploring What’s New in Node 22 – 90-minutes for true completionists. Matteo Collina

📄 How to Securely Send a Request When Closing Tabs – The oft-forgotten sendBeacon() to the rescue. Zachary Lee

📄 Exploring a 3D Text Distortion Effect with React Three Fiber Nine / Codrops

📄 Autogenerating Podcast Show Notes with yt-dlp, Whisper.cpp, and Node Anthony Campolo

📄 A React Developer’s Guide to Learning SolidJS Tristan Dyer

📄 Why React Query? UI․dev

🛠 Code & Tools

Pintora: An Extensible Text-to-Diagram Rendering Library — A similar idea to Mermaid but with a different attitude to extensibility as well as no requirement for a headless browser server-side. The intro docs have both visual and code examples.

Hikerpig

Headless UI v2.0 for React — From the Tailwind folks, Headless UI is a suite of unstyled, accessible UI React (and Vue, though at a lower version for now) components, designed to integrate well with Tailwind CSS.

Wathan and Reinink

Make Your Dev Experience Even Faster — 🥷 Console Ninja now logs network requests (fetch, XMLHttpRequest) for your app! Visually linking network activity directly to your code provides immediate insights into network behavior.

Wallaby Team sponsor

jQuery to JavaScript Converter — A browser-based tool to quickly convert jQuery scripts over to, well, non-jQuery-using code. Repo here.

lightGallery

DerbyJS 4: The Mature MVC Web Framework — Derby has lived through most of Node.js’s history and remains a viable option for building realtime, collaborative apps in particular. GitHub repo.

Nate Smith et al.

graphql-request 7.0: Minimal GraphQL Client — Now a pure ESM package with first class TypeScript support for both client and server-side.

Jason Kuhrt

Fabric.js: SVG-to-Canvas and Canvas-to-SVG Library — Provides an interactive object model on top of the HTML canvas to make it easier to work with multiple visual elements. A long standing project, v6 has been in the pipeline for a while and the first release candidate recently dropped.

Fabric.js

MSW (Mock Service Worker) 2.3 – API mocking library.

Mantine 7.9 – Popular React components library.

node-oracledb 6.5 – Oracle’s own official Node.js database driver, now with support for Oracle’s latest vector search functionality.

js-bson 6.7 – MongoDB BSON parser for Node and browsers.

d3-graphviz 5.4 – Render SVGs from Graphviz DOT graphs.

validator.js 13.12.0 – String validation functions.

Solving Memory Leaks in Node.js has Never Been Easier, Introducing the Latest Version of N|Solid

Posted on by

We are thrilled to announce the release of a new feature in N|Solid that includes sample heap profiling and heap objects observability for main processes and worker threads.

N|Solid is known for its Node.js performance and security observability and diagnostic tools and best-in-class low overhead has completed a new innovation to hunt memory leaks in development and production environments.

Memory is a precious resource in computing. Memory leaks can cause persistent application crashes, increased billing costs, and wasted valuable server resources. Tracking down memory leaks is a real challenge, especially in Node. Now, with N|Solid, we have made it easy thanks to “heap sampling”.

With N|Solid’s heap sampling, you can now trace memory leaks in your production applications on-demand. Using the actionable metrics from N|Solid, including heap usage, your application can trigger profiling automatically. The powerful flame graph visualization shows exactly where the problem lies by displaying the allocation stack trace and heap size. This allows you to quickly pinpoint and fix memory issues without constantly monitoring dashboards for anomalies.

This screenshot is the memory profiler view in chrome devtools.

Without this new capability in N|Solid, developers relied on heap snapshots or  to debug memory issues. However, these snapshots captured every single detail of the heap contents and structure, making them gigantic, risking out-of-memory crashes. Comparing multiple snapshots to identify differences was a complex and slow process that didn’t pinpoint the root cause efficiently.

With heap sampling, you can avoid the overhead and high memory requirements of snapshots. By providing granular allocation details mapped to function names in your codebase, heap sampling tracks incremental changes over time, allowing you to quickly identify the most memory-intensive areas of your application.

Now, let’s talk about those new profilers more deeply.

Heap Sampling

Heap Sampling differs from Heap Snapshots in meaningful ways that enable use in production environments with minimal performance overhead. The fundamental difference is how it captures the data required to find memory leaks without a ton of unnecessary data. This has two key benefits; first, you will save a ton of cycles reviewing heap samples and you won’t have to leverage massive computational requirements for processing heap snapshots.

N|Solid has incorporated V8’s sampling heap profiler, which samples object allocations and builds an online ‘sampling’ log that represents a snapshot of currently live objects in the system at any given time.

Each sampled allocation includes the stack trace at the time of allocation, making it extremely useful for detecting and diagnosing memory leaks. This sampling mechanism is lightweight ensuring it does not impact production performance.

Under the hood, N|Solid leverages the statistical properties of the Poisson sampling process to approximate the true allocation distribution from the collected samples. This allows it to provide an accurate representation of memory usage while minimizing overhead.

By integrating V8’s sampling heap profiler, N|Solid delivers production-ready memory leak detection and diagnosis capabilities with low-friction instrumentation and performance impact that will help teams diagnose and solve issues faster.

How to trigger a heap sample from the N|Solid console

From your N|Solid console process details view, click on “New Heap Profile”, select for how long you want to run the sample, choose the “Heap sample” option and then click on the “START PROFILE” button.

Note: You can also monitor the memory allocation in your worker threads by choosing any thread from the profiler modal.

This screenshot is the memory profiler modal view in N|Solid console.

How to trigger a heap sample from the N|Solid JS API

It is as simple as run this for get a Node.js stream-based sampling profile.

const fs = require(‘fs’);
const nsolid = require(‘nsolid’);

// The signature is threadId and time in ms to run the profile.
const stream = nsolid.heapSamplingStream(0, 1200);
.pipe(fs.createWriteStream(‘profile.heapprofile’));

Heap track objects

There’s a second mode of sampling available as well that combines the full graph context of the heap snapshot with the sampled allocations over time, combining the insights of both methods. It tracks the heap objects population statistics; heap objects relocations done by the garbage collector are recorded and added as an appendix to a heap snapshot.

How to start tracking heap objects from the N|Solid console

Heap Profiles are captured in nearly the same way as Heap Samples. From your N|Solid console process details view, click on “New Heap Profile”, select for how long you want to run the sample, choose the “Track Allocations” option and then click on the “START PROFILE” button.

Note: You could also monitor your worker threads by choosing any thread from the profiler modal.

This screenshot is the memory profiler modal view in N|Solid console.

How to start tracking heap objects from the N|Solid JS API

With this simple snippet, you can have a Node.js stream-based profile.

const fs = require(‘fs’);
const nsolid = require(‘nsolid’);

// The signature is threadId and time in ms to run the profile.
const stream = nsolid.heapProfileStream(0, 1200)
.pipe(fs.createWriteStream(‘profile.snapshot’));

You can try this new feature today along with all of the other valuable features in N|Solid with a Free account. We would love to hear from you about how you like the new feature, send us your thoughts [email protected]. To learn more about N|Solid visit nodesource.com.

Here at NodeSource we build low overhead monitoring for all your Node.js apps; happy hacking and safe heaps!

Svelte 5 is almost here

Posted on by

#​686 — May 2, 2024

Read on the Web

JavaScript Weekly

React 19 Now in Beta — While designed to get library developers prepared for the eventual React 19 release, this is nonetheless a huge step, with full support for Custom Elements (Custom Element support has long been a thorn in React’s side), all the latest React Server Components goodies, Actions, use, and more besides.

The React Team

💡 If you want to upgrade ASAP, there’s a thorough upgrade guide available, but consider upgrading via React 18.3 first.

▶  Let Me Be: “const … Is Stupid and You’re Using It Wrong” — An entertaining 12-minute talk on misunderstandings around the use of const vs let. This was bound to provoke some strong reactions (see the Twitter thread) but let him make his point!

Ryan Florence

Start Coding for Free! Build Real-Time Chat Messaging in Days — Looking to quickly integrate your desired combination of low-level API access and pre-built Stream libraries and components? Find out how to get started with Stream today.

Stream sponsor

Announcing TypeScript 5.5 Beta — It’s not even the final release (expect that in a month or two) but 5.5 has many people excited as it has many major enhancements, including inferred type predicates, the ability to import types in JSDoc via comments, regex syntax checking, isolated declarations, and more. If you want more practical examples, Matt Pocock 🐦 wrote a good Twitter thread.

Microsoft

IN BRIEF:

The New Stack has a feature on Ryan Dahl and his opinions on packaging, JSR, and even TypeScript.

MoonBit is a WebAssembly driven cloud platform and it now has a JavaScript backend too that claims to be very fast.

If you noticed the JSDelivr CDN went down earlier, here’s why.

Zachary Lee has a quick guide to React 19 Beta taking more of a code-led approach than the release notes.

RELEASES:

⭐️ Svelte 5 Release Candidate – “no anticipated breaking changes between now and the stable release.” In a quick talk, ▶️ Rich Harris explains what’s new.

React 18.3 – The beta of 19 may be more exciting, but 18.3 will help your app’s transition by not breaking anything that works on 18.2 while providing more deprecation warnings.

Bun 1.1.6 – Now supports UDP sockets, Array#sort gets a lot faster, and 1.1.5 introduced cross-compilation for standalone executables.

Astro 4.7 – There’s also a roundup of what’s new with the project overall.

Node.js 22.1 (Current) and Deno 1.43

📒 Articles & Tutorials

‘I Reviewed 1,000s of Opinions on HTMX’ — htmx is an increasingly popular way to use modern, dynamic browser features through creative use of HTML attributes, rather than hand writing JS for everything. Dylan looks at the pros and cons through the lens of community sentiment.

Dylan Huang

Maybe MOAR Is Not the Answer 🫠 — Turns out a relentless push for MOAR features and developers was wrong. Leaders could do with some reflection on less.

Test Double sponsor

Native Support for CJS/ESM Interoperability Begins in Node 22 — An overview of a new era for Node developers when working with both CommonJS and ECMAScript modules.

Zachary Lee

Finally Understanding How Array.sort(comparator) Works — “After 13 years of JavaScript, I finally have a way to remember how the comparator function in Array.sort() works..”

James Kerr

Detecting JavaScript Support in CSS — A way to provide alternative CSS rules depending on whether or not JavaScript is available in the user’s browser.

Ryan Mulligan

Build Advanced Interactive Experiences with the StackBlitz SDK — Join our live stream on programmatically embedding interactive dev environments on your site.

StackBlitz sponsor

📄 Digging Tunnels out of a JS Sandbox – “.. the journey of unearthing a few different vulnerabilities in Deno.” Secfault Security

📄 How to Build Well-Documented and Authenticated APIs with Node and Fastify Julían Duque (Heroku)

📄 Using Vite to Rebuild Local Dependencies in an NPM Workspace Prosopo

📄 What is Vite (and Why is it So Popular)? – Eric Simons

📄 Cheat Sheet for Moving from jQuery to Vanilla JavaScript Tobias Ahlin

📄 When to Use Bun Instead of Node.js Antonello Zanini

🛠 Code & Tools

extension.js: Zero-Config, Cross Browser Extension Dev Starter — The goal is to make it as simple as a npx extension create my-extension to get started with building your own browser extensions. GitHub repo.

Cezar Augusto

Layer Cake: A Graphics Framework for Svelte — This library gives you a baseline for creating responsive web graphics via common elements (e.g. a coordinate system and scales). See numerous example components here.

Layer Cake

Happy World Password Day! Curious About How We Got Here? — Learn about the history of passwords in this timeline that spans millenniums, and find out why passwords are history.

FusionAuth sponsor

Tagify 4.26: An Elegant Input Component for Tags — The polished demos show a lot of effort has been put in here. GitHub repo.

Yair Even-Or

Journey.js: No-Dependency Library to Create Interactive Guided Tours — The live examples are basic, but the focus on accessibility and built-in support for 51 languages are pluses.

William Troup

📺 YouTube.js: Unofficial YouTube API Client Library — ‘InnerTube’ is an API used by YouTube’s clients, and you can use it too, although they might not like it. It runs on Node.js, Deno, and modern browsers.

LuanRT

😀 Emoji Mart 5.6 – Emoji selection component for the Web (above).

✍️ Atrament 4.2 – Elegant drawing and handwriting on Canvas.

📄 React-PDF 8.0 – React component to display PDFs. Now supports React 19.

TanStack Virtual 3.5 – Headless UI for virtualizing scrollable elements.

TestCafe 3.6 – Automated end-to-end web testing framework.

Preact 10.21 – The 3KB React compatible alternative.

jQuery UI 1.13.3 – Yes!

🎁 And one for fun..

Virtual x86: x86 Virtualization with JS and WASM — Run Linux, numerous older versions of Windows, BSD, MS-DOS, and other systems right in the browser (and quickly, too). Not a new project, but I’m always impressed how it’s constantly getting updates. GitHub repo.

Fabian Hemmer

The BASIC programming language has just turned 60 years old, so why not fire up the MS-DOS image (above) and have some fun in QBasic? 😉