Category: News

Flatlogic’s New Direction: AI-Powered Business Software Over Web Templates

Posted on by Simon Helberg

Flatlogic was founded in 2013 with a clear vision: to simplify the process of web and mobile application development. Initially, they focused on creating and selling web templates, particularly those using popular frameworks like React, Angular, and Bootstrap. Their templates were designed to help developers quickly build admin dashboards and other essential components of web applications, reducing the time and effort required to create functional and aesthetically pleasing user interfaces.

Key aspects of their early offerings included:

  • React, Angular, and Bootstrap templates: Easy-to-use, customizable templates for various projects.
  • Admin dashboards: Pre-built components to streamline the creation of backend interfaces.
  • Versatile design: Templates that could be adapted to fit different project needs.

The early success of these templates allowed Flatlogic to establish a strong presence in the market. Developers appreciated the quality and versatility of their templates, which could be easily customized to fit various project needs. This solid foundation enabled them to build a loyal customer base, including notable companies like Samsung, Apple, and UNICEF. As the demand for more sophisticated solutions grew, Flatlogic recognized the need to evolve and expand their offerings to stay ahead in the rapidly changing tech landscape.

Chapter NEW: What Flatlogic Team is Devising Nowadays

In 2022, Flatlogic embarked on a strategic shift to transform from a template provider to a comprehensive business software solutions company. They recognized that businesses needed more than just templates—they needed fully functional, customizable applications that could address complex business needs. This realization led to the development of the Flatlogic Generator, a groundbreaking platform that leverages AI to simplify the creation of advanced business applications.

The Flatlogic Generator enables users to build custom ERPs, CRMs, SAAS platforms, and more with ease and speed. By selecting their preferred technology stack (React, Vue, Angular, Node.js, Laravel) and defining their database schema using AI, users can create sophisticated applications tailored to their specific requirements. The platform generates the front-end, back-end, and database structures, ensuring everything is fully connected and ready to use.

Key offerings of the Flatlogic Generator include:

  • Rapid Development: Develop web apps in minutes instead of months. Their platform generates front-end, back-end, and database structures, fully connected and ready to use.
  • Customization: Full ownership of the source code allows for deep customizations and scalability without typical platform limitations.
  • AI-Driven Development: Their AI capabilities guide users through development, making it as simple as texting. Post-launch, AI continues to optimize and evolve the app.
  • Seamless Deployment: Applications created with Flatlogic are hosted securely on the cloud, with CI/CD processes, ensuring quick and reliable deployments.
  • Comprehensive Features: Built-in authentication, role-based access control, data analytics, and more ensure robust and secure applications.

Today, Flatlogic is focused on delivering advanced business solutions like CRM (Customer Relationship Management), ERP (Enterprise Resource Planning), and SAAS (Software as a Service) applications. These solutions are designed to:

  • Enhance Customer Engagement: Tailored CRM solutions offering contact and lead management, sales automation, and insightful analytics.
  • Integrate Deeply with Business Processes: Fully customized ERP systems tailored to enterprise needs.
  • Enable Rapid Iteration and Deployment: Efficiently develop and deploy scalable SAAS applications, maintaining full control over the code.

By continuing to innovate and evolve, Flatlogic remains committed to empowering businesses worldwide with cutting-edge software solutions.

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? 😉

JSR isn’t another tool, it’s a fundamental shift

Posted on by

#​685 — April 25, 2024

Read on the Web

JavaScript Weekly

JSR is Not Another Package Manager — When Ryan created Node, JavaScript had no packages or standard module system. npm and CommonJS took off, and tools like Yarn or pnpm extended npm in certain areas, but in today’s ES modules era, it’s time for a transformation. JSR is not merely a new npm, but a shift in how packages are distributed, tailored for the modern era.

Ryan Dahl

Node.js v22 (Current) Released — The newest, cutting edge, major version of Node lands with some key enhancements. v22 becomes the new ‘current’ release (becoming active LTS in October). It adds support for require-ing ESM, gets a built-in WebSocket client, upgrades to V8 12.4, and includes a task runner (e.g. node –run task_name). This blog post takes a closer look.

Rafael Gonzaga

💡 If you’re a Node developer, be sure to subscribe to Node Weekly as well, where we go into more depth of server-side JavaScript each week.

Lydia Hallie Tests Your JavaScript Knowledge — Challenge your core knowledge with 50 interactive quiz questions covering topics like the event loop, scopes and closures, classes and prototypes, garbage collection, and more. After each question, you’ll get an in-depth visual explanation from Lydia to deepen your understanding of fundamental JS concepts.

Frontend Masters sponsor

pnpm 9.0: The Efficiency-Focused Package Manager — pnpm has long been a fantastic option for folks looking to save disk space and CPU cycles (or for its great monorepo support) while maintaining most of what makes npm great. v9.0 drops Node 16 and 17 compatibility, honors the packageManager field in package.json, makes some default config changes, and adopts Lockfile v9.

pnpm

IN BRIEF:

🙈 Yesterday was JS Naked Day, a day to go entirely without JavaScript. Sadly we missed it.. 😏

🇫🇷 dotJS 2024 is a JavaScript conference taking place in Paris, France on June 27. The speaker roster so far is pretty compelling.

rcompat is an interesting JS interoperability and runtime compatibility layer for servers, so you can avoid the differences between Node, Deno and Bun.

RELEASES:

React Native 0.74

Electron 30.0 – Now with Chromium 124, V8 12.4, and Node.js 20.11.1.

Hexo 7.2 – Static site generator for blogging.

Ember 5.8, Ionic 8, SWC 1.5, Knip 5.10.0

📒 Articles & Tutorials

A Tale of Migrating a Project to Bun — Eric, an engineer at Render, walks through the steps of how he migrated his Sveld project to Bun (replacing Yarn and Vitest in the process), including some minor gotchas he encountered, and what the speed gains were.

Eric Liu

The Frontend Developer/Engineer Handbook 2024 — A guide to the current webdev landscape, covering how to get up to speed on topics like editors, CSS, UX, UI, the command line, tools and frameworks, perf, accessibility, etc.

Cody Lindley

3 Reasons to Use JavaScript Libraries for Graph Visualization — Easily add network visualization capabilities to your applications, while cutting down on dev time.

Linkurious sponsor

HTML Attributes vs DOM Properties — They’re different, but often coupled. Jake outlines the the difference, and why it matters.

Jake Archibald

▶  A Node.js Streams Masterclass — An hour-long odyssey with the creator of Fastify (and Node.js TSC member) into the world of streams. A stream is like an array over time.. we learn, before going into live coding and demos.

Matteo Collina

How I Fixed My Brutal TTFB (Time to First Byte) — All it took was two small changes to how data is fetched to reduce the p75 TTFB from 3.46s to just 704ms. Learn more.

Sentry sponsor

📄 The Problem with new URL(), and How URL.parse() Fixes That Kilian Valkhof

📄 The Intl.Segmenter Object is Now Part of Baseline – Interoperable, locale-sensitive text segmentation. Rachel Andrew

📄 Event Dispatch in Angular – Under-the-hood of the new event delegation system. Ramanathan and Wilkinson

📄 The Making of a TypeScript Feature: Inferring Type Predicates Dan Vanderkam

📄 Adding ESLint and Auto-Fixing an Existing TypeScript Project Daniel Doubrovkine

📺 Using TC39 Proposed Signals in React and Svelte Today – Jack Herrington

📄 Quirks of Escaping JavaScript for a script Tag James Fisher

🛠 Code & Tools

📊 Unovis: A Modular Data Visualization Framework — Works with React, Angular, Svelte, Vue or plain old JS/TS. Handles all sorts of things from Sankey diagrams to maps, graphs, chord diagrams, and traditional line/area charts. The v1.4 release adds support for annotating visualizations in a flexible way. There’s a gallery of examples (with code) if you want to dig in.

F5, Inc.

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

ReScript 11.1 Released with Improved JSX Support — ReScript is an OCaml-inspired, typed language that compiles to JavaScript and has a JSX transform built into the language. JSX support was previously solely for React use cases, but now works with Vue, Preact, and other approaches too.

The ReScript Project

typed-xlsx: Feature-Rich Type-Safe Excel Reporting — Define a strongly typed spreadsheet schema, then populate and work with the sheets directly from JS/TS, such as for generating reports for users – example code. Wraps around SheetJS. GitHub repo.

Cyprien Thao

Devalue 5.0: 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

imask.js 7.6.0: A Vanilla JavaScript Input Mask — Prevent users from entering invalid values. Has plugins for Vue, Angular, React, Svelte, and Solid, as needed.

imaskjs

browser-or-node 3.0: Figure Out Where Your Code is Running — Provides a simple way to tell if your code is currently running in a browser, in Node, in a Web Worker, or in Deno. Works with both ESM and CJS imports.

Dinesh Pandiyan

MistCSS 0.4 – Create components using only CSS, i.e. JS-from-CSS. v0.4 adds Hono and CSS variable support.

Accessible Autocomplete 3.0 – The UK government’s very own autocompleting input component. (Examples.)

Mercurius 14.1 – Implement GraphQL servers and gateways on Fastify.

Vision Camera 4.0 – Advanced camera control for React Native.

webdav-client 5.6 – WebDAV client library for Node & browsers.

🐍 JSPyBridge 1.2 – Run Python from Node or vice versa.

MUI X 7.3 – Popular React component suite.

Visualizing algorithms

Posted on by

#​684 — April 18, 2024

Read on the Web

JavaScript Weekly

Quill 2.0: A Powerful Rich Text Editor for the Web — A major release and significant modernization for the open source WYSIWYG editor. In Announcing Quill 2.0, we learn about Quill’s transition to TypeScript and improved use of modern browser features, but there’s more going on too, such as its ESM packaging. Want to play with some code? There’s a playground.

Slab Inc.

Airbnb’s Extensive JavaScript Style Guide — It’s been years since we mentioned this popular, opinionated style guide, but it keeps getting little tweaks and repairs and remains a handy resource nonetheless.

Airbnb

WorkOS: Enterprise-Grade Auth for Modern SaaS Apps — WorkOS supports both the foundational auth and complex enterprise features like SSO. It provides flexible and easy-to-use APIs, helping companies like Vercel, Loom, and Webflow become Enterprise Ready. Best of all, WorkOS User Management supports up to 1 million MAUs for free.

WorkOS sponsor

Upgrading jQuery: Working Towards a Healthy Web — jQuery remains all over the Web, and the jQuery team and OpenJS Foundation have joined forces to make sure sites get up to date. Their ‘Healthy Web Checkup’ tool can tell you if the version of jQuery on a site is outdated (.. most likely ‘yes’ 😅).

Timmy Willison (jQuery)

Biome v1.7: Faster Formatting and Linting, Now Even Easier to Migrate To — Biome is an increasingly compelling, all-in-one JavaScript, TypeScript and JSX Prettier-compatible formatter and linter. v1.7 makes it easier to migrate to from ESLint and Prettier, can emit machine-readable JSON reports, and has some rule updates.

Biome Core Team

IN BRIEF:

🤡 ▶️ Interview with Senior JS Developer 2024 is a satirical(?) take on the state of modern development and increasingly complex ecosystems. Watch to either laugh or cry. (6 minutes.)

📺 Bartek Szwej has put together a list of 300 JavaScript-related videos from the past year, ordered by their YouTube view count.

f(x) (a.k.a. fx) is a great CLI tool for viewing JSON data. It now includes a JS engine so you can process JSON with JavaScript one-liners at the terminal, too.

Joyee Cheung shares a trip report from Node.js’s latest collaboration summit, touching on the topics the Node team is thinking about lately.

The folks at Deno go into depth about how they built JSR, the newest JavaScript registry, and how it can operate at scale.

“Much faster JSX element creation” is on the way for React developers.

📒 Articles & Tutorials

Building a CLI from Scratch with TypeScript and oclif — oclif is a mature CLI tool development framework maintained by Salesforce. This tutorial goes from zero to something that works.

Josh Cunningham

Qwik vs. Next.js: Which is Right for Your Next Web Project? — A point by point faceoff between Qwik vs Next.js and why the author thinks Qwik takes the gold medal.

Samuel Mendenhall (Cisco)

RAG to Riches Developer Quest — Interact with AI-enhanced bots and learn to build your own RAG chatbot with Atlas Vector Search and Node.js.

MongoDB sponsor

CSS in React Server Components — An exploration of compatibility issues between React Server Components and CSS-in-JS libraries like styled-components.

Josh W Comeau

Profiling Node.js Performance with Chrome’s Performance Panel — Learn how to profile Node performance with Chrome’s Performance panel. (The JS Profiler is going away in Chrome 124, so you’ll need to become familiar with the newer approach.)

Chrome for Developers

📄 Keeping Up with the Node-ish Ecosystem – How Mux updated its legacy Node SDK to work with new JS runtimes. Dylan Jhaveri (Mux)

📄 Building an Interactive 3D Event Badge with React Three Fiber Paul Henschel (Vercel)

📄 A Deep Dive into Rspack and Webpack Tree Shaking hardfist

📄 Things I Like Better in Vue Than in React Jaydev Mahadevan

📄 Converting Plain Text To Encoded HTML With Vanilla JS Alexis Kypridemos

🛠 Code & Tools

TresJS: Build 3D Experiences with Vue.js — Create 3D scenes with Vue components and Three.js. Think React-three-fiber but more.. Vue flavored. There’s an online playground if you want to give it a quick spin (literally).

Alvaro Sabu

Next.js 14.2 Released — Approaching its eighth birthday, Next.js has passed 1 million monthly active developers and landed a release with support for using Turbopack to improve local development, memory usage, CSS and caching optimizations, improved error messages, and more.

Delba de Oliveira and Tim Neutkens

Porkbun — The Best Domain Registrar for JavaScript Developers — JavaScript developers choose Porkbun to register their domains. Get .dev, .app, or .foo for just $5 from Porkbun now.

Porkbun sponsor

Otto 0.4: A JavaScript Parser and Interpreter in Go — A JavaScript parser and interpreter written natively in Go (yes, we have a newsletter for that) which could be of interest if you want to add scripting to Go apps.

Robert Krimen

Wedges: A Collection of UI Components for React — Built and used by the folks at Lemon Squeezy, this is a well thought, aesthetically pleasing set of Radix UI and Tailwind CSS based components. You can also download a Figma file of them to use when mocking up layouts. GitHub repo.

Lemon Squeezy

HyperFormula: A Headless Spreadsheet System — A headless spreadsheet system – it provides the parsing, evaluation and representation of a spreadsheet, with you providing the UI, if you need one. Boasts ‘nearly full compatibility’ with Excel. Note the dual GPLv3 and commercial licensing.

Handsoncode

svelte-dnd-action: An Action-Based Drag and Drop Container for Svelte — Makes the bold claim that it “supports almost every imaginable drag and drop use-case, any input device and is fully accessible.”

Isaac Hagoel

⚙️ Zoompinch: A Natural Feeling ‘Pinch to Zoom’ for Vue 3 – Expected to come in React and Web Component variants in time. Maurice Conrad

⚙️ Craft.js – A React framework for building drag and drop page editors. Prev Wong

⚙️ Kotekan – A simple React framework built on Bun and supporting React Server Components. Benedikt Müller

⚙️ Cytoscape.js 3.29 – Graph theory/network visualization and analysis library.

⚙️ Tailwind Next.js Starter Blog 2.2 – A blogging starter template.

⚙️ RxDB 15.18 – Offline-first, reactive database for JS apps.

⚙️ JZZ 1.8.2 – MIDI library for Node and browsers.

⚙️ Ember.js 5.8

⏳ A Blast from the Past

Visualizing Algorithms — This fantastic post is now ten years old, but I revisited it recently and it’s such a joy. Mike Bostock (of D3.js fame) visually guides us through some algorithms using both demos and code.

Mike Bostock

An easy way to experiment with signals

Posted on by

#​683 — April 11, 2024

Read on the Web

JavaScript Weekly

Frontend Development Beyond React: Svelte — A surprisingly thorough article going deep into one developer’s research into using Svelte to build modern front-end apps. If you’ve never experimented with Svelte, this is a good primer to the key concepts, tradeoffs, and techniques involved.

Héla Ben Khalfallah

🛠 A JS Bin to Play with the TC39 Signals Proposal — Last week, we featured the proposal to add signals to JavaScript and by way of a polyfill, you can get experimenting with it right now.

NullVoxPopuli

Add Excel-Like Spreadsheet Functionality to Your JavaScript Apps — 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 MESCIUS inc sponsor

zx v8.0: Write Better Shell Scripts with Node — A popular way to make shell scripting a more pleasant experience in Node with useful wrappers around child_process, argument escaping, and sensible defaults. v8.0 makes zx 20x smaller, faster, makes it easier to kill processes, pass input to commands & more.

Google

IN BRIEF:

Val Town is a fantastic online platform for writing and deploying TypeScript functions right from the browser and has just raised $5.5m in funding.

The set methods proposal advanced to stage 4 at TC39 this week. Promise.try and Math.sumPrecise have advanced to stage 2.7.

🚗 What happens if 𝕏 you hack a car with JavaScript?

Cloudflare has added a JS-native RPC to Cloudflare Workers.

A recap of Angular developments at the recent ngConf 2024 event.

RELEASES:

ESLint 9.0 – A significant release with lots of cleanups, a new no-useless-assignment rule, and numerous tweaks and changes.

VitePress 1.1 – Vite & Vue-powered static site generator.

npm 10.5.2 – It’s now 𝕏 faster to run scripts, though we’re talking milliseconds nowadays.

Node.js April 10 Security Releases – Including v18.20.2 (LTS), v20.12.1 (LTS), and v21.7.3 (Current).

We mentioned Gulp 5’s release last week, but missed the announcing Gulp v5 post explaining why it’s a big deal.

📒 Articles & Tutorials

On Developing Figma Plugins — Some interesting observations on the experience of creating Figma plugins in JavaScript, including how they’re sandboxed and some implementation details of the author’s own plugin.

Tom MacWright

React Server Components in a Nutshell — A quick overview of RSCs not all about Next.js, comparing the approach taken by several frameworks before sharing thoughts on the tech and why the smaller Waku framework is worth a look.

Paul Scanlon (The New Stack)

Using AI-Powered Autofix to Fix Your Broken Code — Join Sentry live on April 25th, to preview Autofix and learn how we are using ML to prioritize issues and alerts.

Sentry sponsor

Some DevTools Tips and Tricks — Most developers barely scratch the surface of what DevTools can accomplish, says the author, who shares ten tips here.

Pankaj Parashar

📄 Object Structure in JavaScript Engines – You rarely need to know how objects are internally represented in JavaScript engines, but if you want to.. Frontend Almanac

📄 The Easiest Way to Build Reactive Local-First Apps, with TinyBase and PowerSync Benedikt Müller

📄 Building an Article Recommendation System with Upstash, Fly and OpenAI Rishi Raj Jain

📄 Browser Security Bugs That Aren’t: JavaScript in PDFs ericlaw

📄 Exploring Authentication in Next.js Robin Wieruch

🛠 Code & Tools

Madge 7.0: Create Graphs From Your Module Dependencies — A tool for generating a visual graph of module dependencies, finding circular dependencies, and discovering other useful info.

Patrik Henningsson

PythonMonkey: A JavaScript Engine in the Python VM — If you need to use Python but also want to run JavaScript, this gives you a way to do it with the Mozilla SpiderMonkey JS engine embedded into the Python runtime with Python providing the host environment.

Distributive

❤️ Loving console.log Is Easy, but Hate 😡 Losing Context to View Messy Output — Developer productivity tools Wallaby.js, Quokka.js and Console Ninja show console.log values and errors right next to your code.

Wallaby Team sponsor

Faces.js: A Library for Generating Vector-Based Cartoon Faces — The end results are somewhat reminiscent of how the Nintendo Wii generates random Miis. Faces are drawn as SVGs with each also represented by a JavaScript object so you can draw them again later.

ZenGM

Color.js 0.5: ‘Let’s Get Serious About Color’ — A fantastic library for working with colors in the browser, following the latest specs. It’s even been used by browsers to test their CSS Color 4/5 implementations.

Lea Verou and Chris Lilley

Preview.js: Preview UI Components Instantly in Your IDE — Namely, VS Code or JetBrain IDEs, out of the box. Compatible with components built for React, Vue, Svelte and Solid.

Zenc Labs Pty

Kosko: Organize Kubernetes Manifests in JavaScript — Version 4.1 has just been released with a new plugin system.

Tommy Chen

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

Mikro ORM 6.2 – TypeScript ORM for Node.js based on Data Mapper. SQL Server and libSQL/Turso join the list of supported databases.

Rspack 0.6 – Fast Rust-based web bundler.

Pixi.js 8.1 – The fast WebGL and WebGPU 2D graphics engine switches back to WebGL by default due to immature browser support.

Jotai 2.8 – Simple, flexible state management for React.

DOMPurify 2.5 – Fast, tolerant XSS sanitizer for HTML and SVG.

Reveal.js 5.1 – Framework for building presentations in HTML.

Xterm.js 5.5 – Create terminal experiences on the Web.

TIFF 6.0 – Pure JS TIFF image decoder.

Shiki 1.3 – Powerful syntax highlighter.

🛞 It’s wheely good..

Remember the iPod’s click wheel? It’s back. In JavaScript form!

A signal boost for JavaScript

Posted on by

#​682 — April 4, 2024

Read on the Web

JavaScript Weekly

A Proposal to Add Signals to JavaScript — A (very) early stage proposal for bringing a new feature to ECMAScript/JavaScript: signals! The proposal brings aboard ideas from a swathe of popular frameworks and aims to align everyone and get us on the same page when it comes to working with state and making updates based upon changes to state. Rob writes more about the proposal here.

Rob Eisenberg and Daniel Ehrenberg

Build a RAG Chatbot App with MongoDB and Node.js — Embark on the RAG to Riches Developer Quest — a month of innovation, learning, and exclusive rewards awaits you. You’ll interact with AI-enhanced bots and learn how to build your own with Atlas Vector Search and Node.js. Register now!

MongoDB sponsor

JS-Torch: A PyTorch-Like Library for JavaScript — Python’s PyTorch is one of the gold standards amongst machine learning libraries but this project brings some of its features directly into the JavaScript world. Here’s a live browser-based demo. Early days but this could become a big deal.

Eduardo Leao

Bun 1.1 Released: Now Supports Windows Too — With the lighthearted codename of Bundows, the alternative server side runtime now runs directly on Windows 10 and up (plus WSL, macOS and Linux, of course). This is a key step in its adoption, with even features like Bun Shell happy on Windows out of the box. Node compatibility continues to improve with support for node:http2 and IPC support between Bun and Node processes.

The Entire Bun Team

IN BRIEF:

Samuel Groß of the V8 team explains the V8 Sandbox, a security mechanism designed to prevent memory corruption in the V8 engine impacting other memory in the process.

Svelte’s Rich Harris is ‘shaken up’ after a misunderstanding around ‘self-closing’ HTML tags and their effect on Svelte.

🤡 There was a curious JS-themed April Fools prank where a .js TLD for domain names was ‘announced’. Sadly, it’s not true, but there is js.org if you want something vaguely similar.

An official update on the merging of Angular and Wiz.

RELEASES:

Deno 1.42 – The alternative JS runtime adds first class support for JSR and improves Node.js compatibility further.

Babylon.js 7 (homepage) – Key release of the popular rendering engine.

Node.js April 3 Security Releases – Includes 18.20.1, 20.12.1 & 21.7.2.

Docusaurus 3.2 – Popular content/docs site generator.

Gulp 5.0

📒 Articles & Tutorials

What Even Is a JSON Number? — Despite the presence of standards around JSON, the answer is more complicated than you’d think, particularly when it comes to interfacing with other ecosystems and languages that aren’t JavaScript.

Brian Terlson

The History of JS Interop in Dart — About twelve years ago, Google introduced Dart, a language which initially seemed set to take over a lot of JavaScript’s use cases, but which eventually found its own niche (notably with Flutter). JS interoperability has remained important, though, and with Dart 3.3 has gotten significantly better.

Sigmund Cherem (Google)

Everything I’ve Learned About Scaling Designs Systems (With Examples) — I’ve learned a lot about what it takes to build, maintain, and scale design systems initiatives at large companies.

StackBlitz sponsor

The BFCache Explained — The back/forward cache (‘bfcache’) is a browser optimization that makes going back and forward in the browser a faster experience – it’s been present for years and usually leaves you alone as a JavaScript developer, but there are things worth being aware of.

Sabatino Masala

Running OCR Against PDFs and Images Directly in the Browser — A look behind the scenes at creating a simple tool using JavaScript to perform OCR against images and PDFs dragged on to the page.

Simon Willison

The Easy Way to Access the Last Array Element

Ignace Maes

A Comparison of JavaScript CRDTs

Alexis Métaireau

🛠 Code & Tools

Cally: Small, Feature-Rich Calendar Components — A collection of open-source calendar components for selecting single dates or date ranges. Framework-agnostic, themeable, localizable, and accessible (it even has an accessibility statement showing its commitment to this area).

Nick Williams

📊 Counterscale: Scalable Web Analytics You Can Run on Cloudflare — A simple web analytics tracker and dashboard that’s designed to be easy to deploy and maintain by hosting it on Cloudflare (for free too, up to a certain level).

Ben Vinegar

Product for Engineers: A Newsletter Helping Flex Your Product Muscle — Subscribe for free to get curated advice on building great products and best practices of top startups.

PostHog sponsor

🎵 Tonal.js: A Music Theory Library — Packed with functions to manipulate tonal elements of music like notes, intervals, chords, scales, modes, and keys, and used as the basis of other music related projects. GitHub repo.

danigb

Fancy-ANSI: Convert ANSI Text to HTML — If, for some reason, you want to convert text with ANSI escape codes into HTML.. Lots of examples on the homepage. GitHub repo.

Andres Morey

Dioma: Dependency Injection Container for Vanilla JS and TS — No decorators, no annotations, no magic, no dependencies – you just add the static scope property to your class and use inject to get an instance.

Eugene Daragan

svelte-zoomable-circles: Svelte Component for Browsing Hierarchical Data — A Svelte component for displaying and browsing hierarchical data using zoomable circles. Live demo.

Tyler Berbert

VineJS 2.0 – Form data validation library for Node.js.

PGlite 0.1.1 – Lightweight Postgres packaged as WASM into a TypeScript library for the browser, Node.js, Bun and Deno. Now supports Postgres array types.

TS-Pattern 5.1 – Pattern matching library with smart type inference.

ical.js 2.0 – Parser for ICS (RFC5545) and vCard (RFC6350) data.

Minimatch 9.0.4 – Glob matching function – used by npm itself.

vue-tel-input 9.0 – Telephone number input for Vue. (Demo.)

OverlayScrollbars 2.7 – JS custom scrollbar plugin.

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

Promises visualized

Posted on by

#​681 — March 28, 2024

Read on the Web

JavaScript Weekly

JavaScript Visualized: Promise Execution — A helpful diagrammed and animated article, coupled with an (optional) 8-minute video, that goes into how promises work and are scheduled behind the scenes. It’s useful to have a good mental model of these mechanics, given promises form the basis of asynchronous functions in JavaScript.

Lydia Hallie

▶  Node.js: A Documentary of Its Origin Story — It’s an hour long, but this documentary covers the history of Node particularly well, including how everything brewed up to the io.js fork of 2014. Easter weekend watching, perhaps?

Honeypot

Learn Advanced JavaScript Performance Optimization — Garbage collection, memory profiling, data structures like sets and arrays, and event loop management. Learn performance-driven programming, preparing you to write blazingly fast and efficient code!

Frontend Masters sponsor

IN BRIEF:

The Node.js Technical Steering Committee has confirmed there’s no intention to remove npm from the main Node distribution.

Is Bun Windows Yet? No, but Bun 1.1, which will support Windows, is supposedly just four days away..

An example of a simple, yet useful, Web Component in a single GitHub Gist.

The RedwoodJS framework now supports React Server Components too, as an alternative to its traditional GraphQL-based approach.

RunJS Play is a neat Web-based JavaScript playground that shows instant live feedback alongside each line.

Vercel now fully supports Node.js 20 for both builds and functions.

RELEASES:

VitePress 1.0 – Powerful static site generator.

Neutralinojs 5.1 – Alternative cross-platform desktop app framework.

Babylon.js 7.0 – Powerful game & 3D rendering engine. No official release post yet, but expected later today.

Radix Themes 3.0 – Powerful frontend component library.

Node.js v20.12.0 (LTS) and Node v18.20.0 (LTS).

Deno 1.42.0, Vite 5.2, TypeChat 0.1, Chromatic 3.

📒 Articles & Tutorials

A Look at ECMAScript’s Iterator Helper Methods — The proposal is several years old, but now at stage 3 in TC39, Iterator Helpers are being implemented and ship with V8 12.2/Chrome 122. The helpers are functions like .map, .filter, .take and .forEach and are made available to any object with Iterator.prototype in its prototype chain.

Rezvan Mahdavi Hezaveh (V8)

Introducing Waku’s “Pages Router” — Waku is an interesting minimal server-side React framework and it’s now also bringing a minimal API to the modern React server components era: “Making a Waku site is now as simple as making a few files and folders in the ./src/pages directory”..

Sophia Andren

Transformational Auth & Identity | Userfront — Userfront is an auth & identity platform that transforms your business to serve free, freemium and enterprise customers.

Userfront sponsor

What You Need to Know About Modern CSS — A guide with a list of the newest additions to CSS (think nesting, view transitions, :has(), etc). JS plays an occasional role too, whether by enhancing or polyfilling modern CSS features.

Chris Coyier

Building a Micro HTMX SSR Framework — Matteo builds on an earlier tutorial about creating a ‘movie quotes’ app by exploring an alternative backend stack to use, based upon Fastify, Vite and HTMX.

Matteo Collina

Meet Angular’s New output() API — Outputs allow component authors to emit values to parent components.

Paul Gschwendtner (Google)

We Rewrote our React App in Svelte in Three Weeks

Dusty Phillips

How to Use the Web Bluetooth API

Confidence Okoghenun

🛠 Code & Tools

Trix 2.1: A Clean, Rich WYSIWYG Editor for the Web — A WYSIWYG editor developed by the folks at 37signals (known as the birthplace of Ruby on Rails). It’s used in their Basecamp and HEY apps, so is about as stress tested as you can get. GitHub repo.

37signals

Meet the Future of Data Delivery with Hasura DDN — Join us April 16 for the unveiling of Hasura DDN. Create a unified, composable API, instantly and with no maintenance.

Hasura sponsor

Atlassian’s Pragmatic Drag and Drop Framework — A performance-focused drag-and-drop library that can be used to power experiences on any frontend stack. There’s a live demo on the page along with a recording of a talk by Alex Reardon walking through the motivations for creating it and how it works.

Atlassian

Create Vue3 App: A New Vue App Scaffolding Tool — Taking inspiration from tools like Create React App, this uses Vite to help you spin up a new Vue-based app using tools based upon answers you give to a number of questions.

Selemon Brahanu

<relative-time> 4.4: Format Timestamps as Localized Relative Times — Supply this web component with a standard formatted date and time and it’ll render the right text to suit. It’s actually used all over GitHub itself (use Inspect Element on commit times). Demo.

GitHub

DOM3D.js: 3D DOM Viewer in a GitHub Gist — Some code you can copy and paste into your browser console to get a 3D view of the DOM, sort of.. (move your pointer to navigate the.. thing it creates). The effect is odd but fun to play with.

Orion Reed

Free Auth for 1 Million MAUs — WorkOS provides easy-to-use APIs for authentication, user identity, and complex enterprise features like SSO and SCIM.

WorkOS sponsor

PGlite 0.1 – Lightweight Postgres packaged as WASM into a TypeScript library for the browser, Node.js, Bun and Deno.

npm-publish 3.1 – GitHub Action to publish packages to npm.

AdminJS 7.8 – Automatic admin interface for Node.js apps.

Slonik 39.3 – Node.js Postgres client with type safety.

react-three-fiber 8.16 – React renderer for Three.js.