Tag: resources

htmx in 100 seconds

Posted on by

#​647 — July 13, 2023

Read on the Web

JavaScript Weekly

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

Kamran Ahmed

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

Mathieu Schimmerling

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

Postman sponsor

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

Sosuke Suzuki

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

Douglas Crockford

🎉 RELEASES:

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

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

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

typescript-eslint 6.0

⚡️ IN BRIEF:

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

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

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

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

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

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

📒 Articles & Tutorials

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

Jollytoad

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

Yoni Goldberg and Raz Luvaton

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

Postman sponsor

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

Paul Hebert

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

Igor Konovalov

Deploying a Fastify and Vue 3 Static Site to Heroku

Liran Tal

Getting Started with Vector Databases in Node.js

Valeri Karpov

🛠 Code & Tools

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

Petyo Ivanov

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

Sourcegraph sponsor

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

Alex Wei

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

Vizzu Inc.

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

coderaiser

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

Christoph Guttandin

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

Kristian Dupont

React Authentication — Without Complexity

Userfront sponsor

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

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

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

zlFetch 6.0
↳ Convenience wrapper around the Fetch API.

Terminalizer 0.10
↳ Record your terminal and generate animated GIFs.

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

Preact 10.16 – 3KB React compatible alternative.

💻 Jobs

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

Hired

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

🍩 Homer would approve

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

Evan Zhou

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

‘It’s a miracle anything about this ecosystem works at all.’

Posted on by

#​637 — May 4, 2023

Read on the Web

Psst.. if you’re wondering about the context of today’s subject line, see the first ⚡️ In Brief.

JavaScript™ Weekly

Angular v16 Released — With the “biggest release since the initial rollout of Angular”, v16 of the extensive framework introduces a preview of a new signals-based reactivity model (a.k.a. Angular Signals), RxJS interop, improved SSR and hydration, experimental esbuild support, Jest unit testing, and more.

Minko Gechev

???? See the end of this issue where Minko makes the case for Angular in 2023.

Qwik Reaches v1.0 — In “other big JS frameworks that aren’t React” news, Qwik has hit a major milestone too. Qwik’s selling point remains performance through serving up as little code as needed on initial page load. “Think of it as streaming for your JavaScript,” they say. Nonetheless, you get the JSX, directory-based routing, and middleware options you may be familiar with.

Qwik Team

Bring Your Team from Zero to 100 Deploys a Day — Curious about how companies such as Atlassian, Google, and Netflix deploy hundreds of times a day? What strategies do they use to achieve efficiency? This guide provides you with tips and tricks on how these companies scaled their deployments so that you can do the same.

Sleuth sponsor

????????  The German Government Invests in JavaScript — Sort of. Germany’s Sovereign Tech Fund has made a big investment in the OpenJS Foundation, a Linux Foundation project that supports the JS ecosystem and hosts projects including Electron, jQuery, Node.js, Node-RED, and webpack.

Robin Ginn (OpenJS Foundation)

⚡️ IN BRIEF:

Mark Erikson (Redux) wrote a Twitter thread about ???? things he has to keep in mind when publishing a library in 2023 – it’s a lot. He summarized: “It’s a miracle anything about this ecosystem works at all.”

We plan to write about this in a future issue, but Deno KV is a new in beta key value store now baked into both the Deno runtime (as of Deno 1.33) and available in the cloud.

The latest VS Code release is out, with improvements to the terminal, new default dark and light color themes, support for profile templates, a built-in color picker, and support for strict nulls for JavaScript in HTML script blocks.

A roundup of what’s new in the Svelte world.

Node.js can now run on every major browser engine as WebContainers now run on Safari, iOS and iPadOS, as well as Chrome and Firefox. Live demo.

Chrome is to replace the ???? icon in the location bar with a vaguer ‘tune’ icon.

Popular app hosting platform Vercel has added three new first-class storage options for files, Postgres databases, and Redis-like key/value stores.

RELEASES:

Capacitor 5.0 – Build cross-platform native PWAs.

Node.js v20.1.0 (Current)

pnpm 8.4 – Efficient package manager.

React Native macOS 0.71

Electron 24.2

???? Articles & Tutorials

A Practical Guide to Not Blocking the Event Loop — Engines typically run JavaScript in a single thread with an event loop. However, the nature of mixing synchronous and asynchronous tasks, along with the increasing popularity of workers for running code on separate threads, makes the landscape harder to navigate than it used to be.

Slava Knyazev

The Interactive Guide to Rendering in React — An interactive, illustrated guide exploring why, when and how React renders, complete with a series of well thought out animations.

Tyler McGinnis

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log, supports Vitest, jest, karma, jasmine, and more.

Wallaby.js sponsor

The const ‘Deception’ — If the exact role of const has confused you in the past, this will be a handy primer that digs into the distinction between “assignment” and “mutation” in JavaScript.

Josh W Comeau

Write Better CSS by Borrowing Ideas from JS? — A curious look at taking best practices from the JavaScript space for writing better CSS.

Yaphi Berhanu

Crafting the Next.js Website — The official Next.js site is impressive, but what went into it? One of the designers shares some of the implementation details which aren’t particularly React-y but may prove inspiring to you.

Rauno Freiberg

Exposing a Rust Library to Node with NAPI-RS

John Murray

???? Code & Tools

date-fns 2.30: A Modern Date Utility Library — It’s been a couple of years since we linked to this “lodash for dates” that’s packed with over 200 date and time manipulation functions, but it continues to get updates and a v3 is on the way. GitHub repo.

Sasha Koss

Chart.js 4.3: Canvas-Based Charts for the Web — One of those libraries that feels like it’s been there forever but still looks fresh and continues to get good updates. Bar, line, area, bubble, pie, fonut, scatter, and radar charts are all a piece of cake to render. Samples and GitHub repo.

Chart.js Contributors

Beautiful Security and License Compliance Reports for Your App’s Dependencies — Free & Open Source: Try the Better NPM Audit for Your App Now.

Sandworm․dev sponsor

Axios 1.4: Promise-Based HTTP Client for Browser and Node — A long standing project and still getting frequent updates despite rapidly being seen as the ‘jQuery of HTTP request libraries.’ If you need it, you’ll know.

Matt Zabriskie

Marked.js 5.0: A Fast Markdown Parser and Compiler — A low-level Markdown compiler built for speed and available as a client-side library, server-side library, and even a CLI. v5.0 deprecates some options in favor of using external plugins. Here’s a live demo.

Christopher Jeffrey

Mock Service Worker 1.2: REST/GraphQL API Mocking Library — Intercepts requests which you can then mock. Capture outgoing requests using an Express-like routing syntax, complete with parameters, wildcards, and regexes. GitHub repo.

Artem Zakharchenko

The Fastest JavaScript Data Grid Component

Bryntum Grid sponsor

Pretty TypeScript Errors: Make Errors Prettier and Human-Readable in VS Code

Yoav Balasiano

next-sitemap: Sitemap Generator for Next.js Apps

Vishnu Sankar

???? Jobs

Team Lead Web Development — Experienced with Node, React, and TS? Join us and lead a motivated team of devs and help grow and shape the future of our web app focused on helping millions explore the outdoors.

Komoot

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.

QUICK RELEASES:

Tremor 2.4 – React library to build dashboards.

oclif 3.9 – Node.js CLI app framework.

github-script 2.1 – GitHub Actions workflows in JS.

Highlight.js 11.8 – Syntax highlighter.

Plotly.js 2.22 – Data visualization library.

ngx-stripe 16.0 – Angular wrapper for Stripe Elements.

???? A quick word from Angular’s Minko Gechev

When Minko reached out to remind us of the Angular v16 launch, we decided we’d remind him that most JavaScript Weekly readers aren’t using Angular (sorry Minko!) but to ask if he’d like to make the case as to why JavaScript developers shouldn’t sleep on Angular in 2023. Here’s what he had to say:

The problem in the JavaScript ecosystem we’re solving with Angular is to provide a reliable, integrated solution that gives you all the core libraries and tools you need to focus on building apps, rather than fixing incompatible dependencies/API changes, etc. I understand that’s what most technologies claim, the difference with Angular is that:

We’re testing all core modules such as framework, router, forms, etc. on over 4,000 Google projects on every commit to guarantee stability and integration.
We’re sharing updates in a predictable release schedule (twice a year) where we evolve everyone via the same mechanism we use to keep every project at Google to the HEAD commit on the main branch on GitHub. It’s integrated as part of the ng update command of the CLI.

With the recent updates we’ve been:

Catching up with some of the use cases we were missing.
Advancing the performance and developer experience, while setting the foundation for more advancements throughout 2023 and 2024.

On the second point, we’re expecting lots of more improvements in reactivity and SSR in the next 12 months.

So there you have it.

Announcing The NodeSource-GitHub Partnership

Posted on by

NODESOURCE PARTNERS WITH GITHUB
For Immediate Release

NodeSource enhances Node.js application security with the NCM integration for GitHub Deployment Protection Rules.

[Seattle, WA, April 13th, 2023] – NodeSource, a leader in Node.js application management, monitoring, and security, is excited to announce our partnership as a launch partner for Deployment Protection Rules with GitHub Actions, the world’s largest software development platform, to integrate Node Certified Modules (NCM) directly into the GitHub Marketplace. This integration brings enhanced security capabilities to the development process in Node.js applications, mitigating vulnerabilities and ensuring compliance with licensing requirements.

Node.js applications and services heavily rely on open-source Node packages for their source code. However, many of these packages may have publicly disclosed vulnerabilities often ignored or overlooked by developers, leaving applications at risk of malicious code execution and data leaks. To address this challenge, NodeSource has developed NCM, a powerful tool that scans for vulnerabilities, tracks package dependencies, and ensures compliance with licensing requirements.

“By enabling partners like NodeSource to create Deployment Protection Rules for users of GitHub Actions, organizations can now leverage NodeSource’s vulnerability management tools to identify security risks and maintain compliance before their applications are deployed to production. These improvements and new controls underscore GitHub’s commitment to empowering developers while enhancing governance, code quality, and security within GitHub Actions.” – Jamie Jones, GitHub VP of Technical Partnerships & Field Services. With NCM GitHub App for [Deployment ProtectionRules]https://github.blog/2023-04-20-announcing-github-actions-deployment-protection-rules-now-in-public-beta, developers can easily add NCM to their repositories, configure organization-wide rules for vulnerability scanning and approval processes.

With the integration of NCM for GitHub Deployment Protection Rules, users can now easily add and configure the NCM app into their GitHub repositories. This allows developers to seamlessly incorporate NCM into their workflow, with every deployment being analyzed and approved or rejected based on organization-configured rules for NCM. NCM provides a comprehensive report for every Pull Request, helping developers identify and mitigate security risks during code reviews. Check the NCM GitHub App.

“NodeSource is committed to providing the Node.js community with the tools and capabilities needed to secure their applications and mitigate risks associated with open-source packages,” said __Russ Whitman, CEO of NodeSource__. “Our partnership with GitHub further strengthens our mission, allowing users to easily access and utilize NCM within their GitHub Actions workflow, ensuring that their Node.js applications remain secure and reliable.”

NodeSource’s NCM also works offline, providing flexibility and convenience for developers in various development environments. NCM offers a comprehensive solution for managing Node.js application dependencies and assessing security vulnerabilities, license concerns, code risks, and code quality.

“Security is a top priority for NodeSource and our community of developers. We are thrilled to be a launch partner for GitHub Deployment Protection Rules and integrate NCM into GitHub Actions, providing our users with a powerful tool for securing their Node.js applications,” said __Adrian Estrada, VP of Technology of NodeSource__. “With NCM’s capabilities seamlessly integrated into GitHub Deployment Protection Rules, developers can now easily track and manage their package dependencies, ensuring that their applications remain secure and compliant.”

Node.js application security is of utmost importance, especially in today’s threat landscape, where supply chain attacks are becoming more prevalent. By leveraging NCM’s capabilities within their GitHub Actions workflows, developers can significantly reduce the risk of vulnerabilities in their Node.js applications, ensuring that their codebase remains secure and reliable.

About NodeSource:

NodeSource is a leading provider of Node.js application management solutions, Node.js Support and services, helping organizations successfully scale and secure their Node.js applications. Node Certified Modules (NCM) is a comprehensive tool that offers visibility, security, and governance for managing Node.js application dependencies. With its powerful features, NCM ensures that Node.js applications remain secure, reliable, and compliant with licensing requirements. For more information, visit www.nodesource.com.

About GitHub:

GitHub is the world’s largest software development platform, providing a collaborative environment for millions of developers to build, test, and deploy their software. GitHub offers many tools and integrations for efficient software development and secure collaboration. For more information, visit www.github.com.

Media Contact:
Russ Whitman
CEO NodeSource
[email protected]

On the origin of packages

Posted on by

#​635 — April 20, 2023

Read on the Web

JavaScript Weekly

Introducing npm Package Provenance — As stewards of the official npm registry, GitHub has been keen to improve its security. As of this week, if you build npm packages through GitHub Actions, you can publish the provenance of a package which gives users a way to verify which repo a package was built from and how. The folks at Socket took a closer look at how it works.

DeHamer and Harrison (GitHub)

What’s New in ECMAScript 2023, Briefly — Last week we mentioned the progression of the ECMAScript 2023 spec but it’s hardly bedtime reading. This post looks more briefly at a few of the new additions including Array#findLast, hashbangs, and Array#toSorted.

Pawel Grzybek

New Course by Kyle Simpson: Practical Problem Solving with Algorithms — Walk through four fun challenges with Kyle in this new video course. You’ll learn how to apply algorithms with techniques like recursion, traversals, and acyclic paths, cover memoization to avoid garbage collection, and come away writing more performant code.

Frontend Masters sponsor

Node.js v20 (Current) Released — Released just two days ago, the newest major version of Node.js includes a variety of interesting updates, including:

An experimental permissions model. This is a feature Deno has at its core but now you can restrict access to certain capabilities in Node too.

V8 11.3 (which includes Regexp /v flag support)
The node:test test runner goes stable.
Official support for Windows on ARM64.
Improvements to the single executable packaging mechanism.

The Node.js Team

As per policy, Node v20 will become the main LTS release this October.

Vite 4.3: Now It’s Even ‘Faaaaster’ — A minor release of the popular frontend toolchain, but one that focuses on performance. The creatively titled How we made Vite 4.3 faaaaster digs into the details.

Evan You and Contributors

IN BRIEF:

TypeScript 5.1 Beta has been released which allows undefined-returning functions to have no return statement, to have unrelated types for get and set accessor properties, namespaced attribute names when using JSX, and more.

The React core team appears to have been affected by Meta’s latest round of layoffs (as has that of Relay), though Dan Abramov recently noted Meta’s continued investment into the ecosystem.

Introducing the TERN Stack & How to Migrate from MERN to TERN

Tigris sponsor

RELEASES:

Shoelace 2.4
↳ Popular library of well designed Web components.

Node.js v18.16.0 (LTS)

Gatsby 5.9

???? Articles & Tutorials

Richer Install UI for PWAs Available in Chrome — Gives progressive web app developers a new opportunity to encourage end users to install their app.

Adriana Jara (Chrome Developers)

Passkeys: What and Why? — The author has been experimenting with passkeys and the associated WebAuthn API that opens them up to the Web. A primer for an increasingly common security approach.

Neal Fennimore

Build Complex Automations 10x Faster, Without Fighting APIs — The flexible workflow automation platform for technical people who want to build complex workflows faster — without struggling with manual scripts.

n8n sponsor

Integrating React Flow and the Web Audio API — React Flow is a component for building node-based editors and interactive diagrams, which makes it well suited for building audio signal chains. There’s a lot of depth here, some nice examples, and these techniques could prove useful for a lot of other use cases.

Hayleigh Thompson

Ways to Create an Enum in JavaScript — An enum is a set of named constants. Plain objects, frozen objects, proxied objects or a class-based approach provide some ways to create enums in JavaScript.

Dmitri Pavlutin

Deno vs. Node: No One is Ready for the Move — Deno has a lot going for it as an alternative to Node, but Node has time, maturity and a huge, established userbase on its side (and continues to develop, as seen with this week’s Node v20).

Piumi Liyana Gunawardhana (Honeypot)

How to Work with Dates and Times in Vanilla JavaScript

Chris Ferdinandi

???? Code & Tools

Tachyon 2.0: A Bite-Sized Script to Make Page Navigation Faster — It does this by prerendering pages before a user navigates to them, making page transitions as quick as can be.

Tachyon

instant.page is another well known option in this space.

Iconoir: 1300+ Open Source SVG Icons — A vast array of clean and simple icons, complete with ways to quickly integrate them into React, React Native, Figma, and other apps – or just using CSS, if you prefer.

Luca Burgio

Tuple – One-Click Code Reviews for Remote Devs — Why waste hours setting up Zoom just to review a couple lines of code? Tuple brings your team together in seconds.

Tuple sponsor

Ark UI: A Headless Library of Customizable, Accessible, and Unstyled UI Components — Compatible with React, Vue, and Solid and powered by Zag.js. All components are built with accessibility standards and are easy to theme in line with your own design system.

Chakra Systems

next-route-visualizer: Visualize Next.js App Routes — A package for visualizing Next.js app directory routes, as seen in this demo.

Alexander Vencel

ohash: Super Fast Hashing Library in Plain JS

UnJS

<relative-time> Element 4.3
↳ Web component extension of <time>

Fable 4.1
↳ F# to JavaScript/TypeScript compiler.

useHotkeys 4.4
↳ React hook for keyboard shortcuts.

AdminJS 7.0 – Admin panel for Node webapps.

lowdb 6.0 – Simple, local JSON database.

imaskjs 6.6 – Vanilla JS input masking.

CKEditor 5 37.1 – Rich text editor framework.

???? Jobs

Full Stack JavaScript Engineer @ Emerging Cybersecurity Startup — Small team/big results. Fun + flexible + always interesting. Come build our award-winning, all-in-one cybersecurity platform.

Defendify

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.

???? Let’s get it arted..

DPaint JS: A Deluxe Paint-Inspired Image Editor — Sometimes we like to link to impressive projects built with JavaScript, and if you were ever into the Commodore Amiga, you’ll love this one. It’s a Web-based image editor inspired by Deluxe Paint, itself a hugely inspirational graphics editing tool from 1980s. Now we’re just waiting for a NeoPaint clone.. 🙂

Steffest

Nodesource Node.js Binary Distributions 2021 & 2022

Posted on by Simon Helberg

NodeSource Node.js binary downloads keep increasing monthly, providing millions of users worldwide with the power of Node.js. This blog post gives us important insights into using Node.js across Linux environments and the Node.js community in general.

Nodesource has been packaging and distributing Node.js for Linux environments for 9 years. Every major and minor release, as well as security updates. We’ve seen a massive increase in downloads every year. While we don’t distribute every version of Node.js, most of the downloads in Linux environments are provided by us.

Have you ever wondered how many people still use Node.js version?
Which countries consume Node.js the most?
What versions and distributions are the most popular?
What are the downloads of Node.js month by month?
Are they increasing, or are people moving away toward other technologies?

Let’s find out!

Get the awesome infographic here!
Node.js Binary Downloads

Note: If you want to compare, you can read Node by Numbers 2020 here.

In this article, you can find interesting data about the consumption of Node.js worldwide. the trends, spikes, and odds of the usage of the popular runtime that powers millions of applications.

These are the points to be discussed in this article:

Intro
A bit of History
Process: How is a new release created?
How does the distribution process work?
Stats!
Recent distributions supported
Traffic Peaks
Getting Involved
Conclusions

Introduction

First, let’s start with the basics:

_What is a binary distribution?
_

A binary distribution is a software package containing executables, binaries, or programs ready to be executed. In this case, it will be Node and NPM compiled executables.

_In what consists of the ‘Nodesource Node.js Binary Distributions’
_

Maintains availability and allows the usage of Node.js in production for the Linux community.
If you are installing Node.js in production on a Linux platform, there is a big chance that you are using NodeSource Node.js Binary Distributions.

why is this important?

Well, NodeSource Node.js binary distributions was downloaded over 90 million times worldwide last year. There are 90 million times people have been able to use, learn, and interact with Node.js thanks to this project.

Last month, it was downloaded +11 million times, and millions of applications and web pages are using it. Because of its availability, it has proven over the years to be the best source of installation and extensive use of Node.js packages in Linux, allowing the expansion of its use in the market.

_What kind of distributions are supported?
_

So right, as you can see, we support major Debian, Ubuntu, Redhat, CentOS, and Fedora releases and many different distributions based on those. As you can see, the list can’t go long, but we are always trying to add more there.

Also, if you are using code as infrastructure, the major recipes, formulas, or plugins that include Node.js installation usually work using Binaries distributions.

So if you’re using:

__Ansible__: https://galaxy.ansible.com/

__Chef__: https://supermarket.chef.io/

__Puppet__: https://forge.puppet.com/modules/puppet

__Salt__: https://github.com/saltstack-formulas/node-formula

You are already using binary distributions, and it is recommended to use the Node.js installer. That’s what the NPM documentation and the NodeJS official documentation say. So it’s proven to be the best source of installing these sectors.

A bit of History of Node.js Binary Distributions

_How NodeSource get involved in this project?
_

So, here are some essential milestones for the project:

It started with Chris Leajoining NodeSource in 2014.

Initially supporting Debian and Ubuntu with Node.js V12.

Added support for RHEL, Centos, Fedora, Oracle Linux, and Amazon Linux.

A script was created to ease the setup process. Later we created a script to make the installation process more manageable because you have to add the PPA manually. Now everything is automated!

Io.js was born and immediately supported.

In 2018 we started delivering Node.js in snap packages. A compatible format with multiple Linux distributions that you can use.

Since then, we have expanded support for many compatible Linux Distributions.

We support OpenJS Foundation and the Node.js project doing the same with every LTS and stable release the Node.js project has released.

Now let’s talk about how a new release is created.

Process – How is a new release in Node.js created

There are two processes involved when releasing a new version of Node.

The first comes from the node project itself.
The second is from the nodes or Node.js binaries distributions for the Linux operating system.

So it’s helpful to understand how the release lines work. All the releases are scheduled and planned. There are three stages on a Node version: Current, LTS, and the end of life.

Current NodeJS release line in the graph is colored green, as we can see here. And this space lasts for six months, from April to October.

LTS is an acronym for long-term support and is applied to release lines that will be supported and maintained by the Node.js project for an extensive period. LTS divides into two active and maintenance; Active is the blue, as we can see here. Maintenance is gray. Active is the one that lasts for 18 months. Maintenance is a release line that is the end of life. That means it will no longer be maintained and will not be patched with any known security vulnerability. When the version reaches the end of its life, it is very affectable to upgrade. The whole process lasts for three years.

Also, there are three types of releases:

Major release that is for incompatible API changes from version to version. A major release can also include changes that would normally be included in minor or patch releases.

Minor releases there include backward-compatible functionality changes.

Patch releases include nonbreaking bug fixes and security patches.

So every new LTS is a major release. This is the process for delivering a new version of Node.js.

How the release happens inside NodeSource

We already understand how a version is created. So, every time a new version is released, everything starts from Nodesource Slack. We already have an integration that notifies in a unique channel that a new version is available, so we have to get to work and update to a recent version. We also have some automation that makes our life easier: We have a bot, or infrastructure bot, called __Control Tower__. It’s something we use internally for all everything in our infrastructure.

Control Tower allows us to run a single command to generate a new version that will communicate with different pipelines we have in AWS called pipelines. And that will use AWS code build to build the package and all the packaging, generating all the different binaries we need to distribute Debian, rpm, and other formats.

After building those, it will push to Amazon’s S3 bucket, and from there, we will have an origin server that will serve all these packages for everybody in the world. That’s how it works.

It’s a semi-automated process with a lot of automation involved! Now, let’s see some fascinating statistics involved in this project.

Node by Numbers 2021 & 2022

NodeSource NodeJS binary execution was downloaded over 98,420,550 million times worldwide last year (2021), and the total download from this year from January to October is 80,442,890 million (2022).

This graph is a monthly download in terabytes 1TB. This year it was 2,135 TB of binaries distributions from January to October.

There is a noticeable increase in the tendency of downloads, and this year the downloads are even more remarkable. In just one year, the increase was about 4,7% in downloads.

2021 – 2,088.73 TB

2022 – 2,135.98 TB

Again, this is a lot of data, and we expect these numbers to keep increasing as the Node project expands.

Now we are going to analyze the numbers by version. This is very important. Let’s take a look.

As you can see, people are still getting old versions like V6, which was deprecated. Then we have V8 and V10 with a few people; others are using V12 and V14, and some are using V15 and V16. Now let’s go to analyze the current status.

So this is 2022, and as you can see, many people still use V12. But the good news is that most people are using V14 and v16. We can expect V18 to start growing, as it became LTS at the end of October, and it’s the latest LTS we support.

If you want to try these things on production, it’s really good to use stable versions; we always recommend using in production the latest LTS. Please read this article to understand why it is important and useful to try Node.js V18 LTS.

Now let’s see where those downloads are happening worldwide and where people consume Node.js most.

The top five countries consuming Node.js binary distributions between 2021 and 2022 were the US, Germany, France, the UK, Ireland, and the Netherlands.

In 2022 the top five countries were:
– United States 60.9%
– Germany 9.3%
– France 3.6%
– United Kingdom & Ireland 3.3%
– Netherlands 2.0%

Many South American countries consume binaries, including Brazil, Mexico, Argentina, and Colombia. The only African country on the list is South Africa. Let’s hope more countries keep using the amazing Node.js project! 💪

Traffic Peaks

As we can see in this image, at the end of October of this year, 2022, there was a release, reaching Oct 25 with Node 18 12,185 downloads, and every time there’s a new release in Node.js, there is a peak in downloads of binaries distributions.

October 18th – Node V19

October 25th – Node V18 LTS

For Node V19 we started having downloads on October 19 with 1,594 downloads that day.

__Note__: If you want to be aware of the important dates of the project, here you can consult the: Node.js Project Calendar

Recent distributions supported by NodeSource

Two types of deprecations could happen in our channels:

__When a Node version reaches the End Of Life__, which means you will not receive any security updates or book patches in the future. We always recommend that you stay in the currently supported version. One important thing to note is that we do not remove the old packages. Even if you use a pre-owned node version, you can still use NodeSource binaries distribution.

__When Linux Distribution goes End Of Life__, be aware that this is not a good practice because your Linux distribution, your operating system, is no longer receiving any security updates or support. So we always recommend keeping a proper maintenance version of your operating system (We do not remove the old packages).

Note: Check the ‘End-of-Life Releases’ HERE.

Please update your Node.js, or you will see this thing when you’re installing the Node.js version that you are trying to install. We always present this Deprecation warning, and we make you wait 20 seconds so you can read the message and realize that maybe you should be updating your Node.js version.

Today, many people are using no longer supported versions. About 46% of downloads of Node.js versions were no longer supported. We want to launch a campaign encouraging developers to upgrade their node version. #UpgradeYourNodeVersion

Behind the Data

There is still a surprising amount of downloads of outdated versions in 2021 (39%) and in 2022 (46%) – People should upgrade!

The downloads are focused mostly in the Americas and Europe (86,9%) in 2021 and were the same in 2022, and some regions are severely underrepresented, for example, Africa. The Middle East in 2022 is increasing the downloads.

The most downloaded versions in 2022 were version 14 for rpm and for deb (32% of Downloads). Followed by V12 with 26% of the downloads. Node V16 was downloaded 20%.

deb distributions are more consumed than rpm, as is expected.

In 2022, an exciting milestone was an increase of 13,6% in downloads of NodeSource Node.js Binaries Distributions. We expect continued growth in 2023.

Getting Involved

So, how can you get involved in this project? There are many ways to contribute.

First, you can go to this link: https://github.com/nodesource/distributions

In that link is the repository where the project is hosted, and you can submit an issue, comment, or pull request. And it’s related chiefly to supporting new distributions to upgrade a distribution or to create an update script to download a particular distribution.

Another way is to keep updated documentation. If a new version over distribution changes, it should also be updated on the docs. When you submit an issue or a pull request, suggestions could be made to keep it compatible with the rest of the distribution, and submissions are always working.

If you collaborate with this project for a few months, you can ask and be included in this repo as a collaborator 💪.

Conclusions

Using NodeSource Node.js distributions is the best and most recommended way to install Node.js in Linux for production environments.

NodeSource has delivered Node.js fresh to your Linux system via your package manager within hours, minutes, days, or weeks. For NodeSource, sustaining the community is essential because we want to support more people using Linux to have Node.js in production.

Also, we are looking for more community involvement in the project. So most of our scripts are open source, and as you can see, there’s a lot of activity in the report that we just mentioned in this article. Help will be appreciated! So if you have ideas or solutions or want to help us continue supporting open source, you can contribute to this GitHub Repo.

Please join us and be part of this magnificent project. Also, here are our channels to follow us and continue the conversation:

Twitter
LinkedIn
Github

As always, the best place to contact us is via our website or [email protected]

_Ready for more? _

If you are looking for NodeSource’s Enterprise-grade Node.js platform, N|Solid, please visit https://downloads.nodesource.com/, and for detailed information on installing and using N|Solid, please refer to the N|Solid User Guide.

We We also know that as a start-up, you want ‘Enterprise-grade’ at a startup price, this is why we extend our product to small and medium-sized companies, startups, and non-profit organizations with N|Solid SaaS.

Please help us to reach more people and support use cases in Node.js. We care about the Node.js community! 💚You’re welcome to explore, read, and participate in this project.

Useful Links / References

Octoverse 2022
2022 Developer Survey Stack Overflow