JavaScript on your schedule

#​633 — April 6, 2023

Read on the Web

❓ JavaScript Weekly on a Thursday? It’s true. As well as it being Good Friday tomorrow, we’ve decided to move to Thursday permanently going forward. We hope you have a good Easter, if you celebrate it, otherwise enjoy one fewer email on Fridays ????
__
Your editor, Peter Cooper

JavaScript Weekly

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

Hexagon

▶️ JSON vs XML with Douglas Crockford — The author of 2008’s hugely popular JavaScript: The Good Parts went on a podcast to share the story of JSON, his discovery of JavaScript’s ‘good parts’, and his general approach to building software, including his dislike of JavaScript ‘frameworks.’ There’s a transcript if you’re not keen on listening. (50 minutes.)

CoRecursive Podcast podcast

Headless CMS with World-Class TypeScript Support — Kontent.ai is the leading platform for modular content. Streamline your code using TypeScript SDK, CLI, Rich text resolver, and strongly typed model generator. Scale with no problems when your project grows. Have you seen our UI?

Kontent.ai sponsor

The Angular Signals RFC — There’s a lot of excitement about a shift in Angular involving the addition of signals as a reactive primitive – the official RFC is now available for this feature, and you’re encouraged to leave comments. If you’d rather see a practical use for signals, Joshua Morony recorded ▶️ a screencast showing them off.

Angular Team

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

Oleksii Trekhleb et al.

IN BRIEF:

Laurie Voss looks at the most popular frameworks used in sites deployed to Netlify. React-based options lead the way.

Oliver Dunk of the Chrome Extensions Team has posted an update on the Manifest V2 to Manifest V3 transition – it’s taking longer than expected so Manifest V2 isn’t disappearing any time soon.

V8 v11.2 is shipping with support for WebAssembly tail calls.

With Chrome 113, Chrome is now shipping support for WebGPU.

A look at how Microsoft’s Blazor (a stack aimed at building front-end apps with C#) is skirting around JavaScript with its focus on WebAssembly.

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 24.0 – Complete with Chromium 112, V8 11.2, and Node 18.14.

Storybook 7.0 – Though still tagged ‘next’ and pending a proper launch.

Storybook for React Native 6.5

WebStorm 2023.1 – Commercial JS IDE from JetBrains.

Rete.js 2.0 Beta – Framework for building node-based editors.

???? Articles & Tutorials

Making a Big, Slow Vue/Alpine Page ‘Blazingly’ Fast — A practical example of a pattern the author is billing a “reactive switchboard.” “I’m going to use Vue/Alpine lingo in this article, but I think this pattern applies to lots of different tools.”

Caleb Porzio

▶  Watch Dan Abramov Explore React Server Components — At an epic (though well timestamped) four hours, this isn’t a quick watch, but Dan and Ben Holmes walk through everything React Server Components oriented, complete with diagrams, code, and a real-world app.

Ben Holmes

Getting PWAs in App Stores with PWABuilder — Thomas Steiner demonstrates how PWABuilder makes it possible to submit Progressive Web Apps (PWAs) to app stores like those provided by Google, Apple, and Microsoft.

Thomas Steiner (Google)

Add a Full-Featured Notification Center to Your App in Minutes

Courier.com sponsor

What Are Source Maps? — Learn how source maps can help you debug your original code instead of what was actually deployed after the build process.

Sofia Emelianova (Chrome Developers)

How I Used ChatGPT in My JavaScript Projects

James Q Quick

???? Code & Tools

Relaunching JSPM CLI for Import Map Package Management — Several years ago when JS had numerous competing module formats, JSPM was a useful package manager atop SystemJS, but now it’s being relaunched as an import map package management tool.

Guy Bedford

Chrome Extension CLI 1.4: CLI for Building Chrome Extensions — Want to get building an extension for Chrome as quickly as possible? This Node-powered tool aims to get you on the right path ASAP. v1.4 adds a script to generate a ZIP file (also known as a ‘postcode file’ at Microsoft UK? ????) of the extension.

Dutiyesh Salunkhe

React Chrono 2: A Flexible Timeline Component — A complete overhaul of a popular component. You can render themeable timelines in vertical, horizontal, or vertical alternating orientations. It includes keyboard navigation support, auto advancement, and, as of v2, support for nested timelines.

Prabhu Murthy

Dynaboard: A Visual Web App IDE Made for Developers — Build high performance public and private web applications in a collaborative — full-stack — development environment.

Dynaboard sponsor

Jampack: A Post-Processing Tool to Optimize Static Websites — Similar to a bundler or build tool, with features like image optimization, asset compression, and some code auto-fixes — all amounting to strong Core Web Vitals scores.

divRIOTS

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

imaskjs

tween.js 19.0
↳ JS tweening engine for easy animations.

Swiper 9.2
↳ Modern mobile-friendly touch slider.

gridstack.js 7.3
↳ Dashboard layout and creation framework.

ReacType 15.0
↳ Visual prototyping tool that can export React apps.

xstyled 3.8
↳ Utility-first CSS-in-JS framework for React.

Spacetime 7.4.2
↳ Lightweight timezone library.

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

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

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

???? Wise Words of the Week

A reminder from Vue.js’s Evan You that we live in a vast and varied world, including in the JavaScript ecosystem:

Bringing JavaScript to WebAssembly

#​625 — February 10, 2023

Read on the Web

It looked quiet at first but wow, what an epic week this turned out to be. There’s a lot to chew on here, and we even have a variety of bonus items at the very end of this issue. Enjoy!
__
Your editor, Peter Cooper

JavaScript Weekly

Speeding Up the JS Ecosystem: It’s ESLint’s Turn — Last year we featured an article from the same author about how he was finding, and fixing, low-hanging performance fruit in popular JavaScript projects. He’s back, and he’s found a lot of potential for savings in ESLint this time.

Marvin Hagemeister

The Future (and the Past) of the Web is Server Side Rendering — It’s fair to say the Deno folks have some skin in this game, but nonetheless this is a neat brief history of server-side rendering and why they feel it’s the right approach for modern web development.

Andy Jiang (Deno)

Monitoring Your NestJS Application with AppSignal — With AppSignal, you can monitor your NestJS app with ease and rely on OpenTelemetry to handle third-party instrumentations. AppSignal even provides helper functions to help you build comprehensive custom instrumentation. A box of 🍪 included!

AppSignal sponsor

Ten Web Development Trends in 2023 — Following the State of JS survey results Robin takes a considered look at new web dev trends that we should be paying attention to this year, and why they matter.

Robin Wieruch

Bringing JavaScript to WebAssembly for Shopify Functions — As much as this is focused on a specific use case at Shopify, this is a fascinating look at how they’re integrating JavaScript and WebAssembly under tight constraints. They also talk about Javy, a JS to WebAssembly toolchain being built at Shopify that lets you run JS code on a WASM-embedded JS runtime.

Surma (Shopify)

Google Touts Web-Based Machine Learning with TensorFlow.js

Richard MacManus (The New Stack)

IN BRIEF:

🎉 Time to celebrate — a recent survey allegedly found that JavaScript applications ‘have fewer flaws’ than Java and .NET ones. So there you go.

Honeypot’s highly anticipated ▶️ React.js documentary drops later today – it’ll probably be out by the time you read this.

Vanilla List is a directory of ‘vanilla’ JavaScript controls and plugins.

▶️ Evan You tells us what to expect in 2023 from Vue.js.

The Scala.js project is celebrating its ten year anniversary – it’s now a mature way to build Web projects using Scala, if you prefer.

📅 Vue.js Live is a JavaScript event taking place both in London and online on May 12 & 15. From the same folks as the also forthcoming JSNation conference.

A history of criticisms levelled at React.

RELEASES:

Eleventy / 11ty 2.0
↳ Popular Node.js static site generator.

pnpm 7.27 – The efficient package manager.

RxDB 14.0 – Offline-first, reactive database.

📒 Articles & Tutorials

Design Patterns in TypeScript — OO-inspired patterns aren’t for everyone or every use case, but this is a fantastic catalog of examples, complete with diagrams and explanations, if you need to learn to tell apart factory methods from decorators, facades, or proxies.

Refactoring Guru

Resumable React: How To Use React Inside Qwik — Building React apps without ever loading React in the user’s browser? “Sounds too good to be true? Let’s see how this works.”

Yoav Ganbar

Did You Know That You’re Already a Distributed Systems Developer?

Temporal Technologies sponsor

Build a Hacker News Client using Alpine.jsAlpine.js is a thin and elegant reactivity library that lets you add dynamic functionality to your site directly in markup. This is a short and sweet practical example of what you can quickly do with it.

Salai Vedha Viradhan

▶  TypeScript Speedrun: A Crash Course for Beginners — If you want to pick up TypeScript and would find a video guide useful, this is for you. Matt has become well known recently for his educational TypeScript tweets and videos, and this is another good one that flies through the basics. (23 minutes.)

Matt Pocock

Using Notion as a Headless CMS with Nuxt

Trent Brew

The Options API vs Composition API in Vue.js

Charles Allotey

🛠 Code & Tools

Bookmarklet Editor: Easily Work on JavaScript Bookmarklets — Useful because who can remember the exact syntax for a bookmarklet? 🤔 This also can instantly convert code to and from bookmarklet form and includes some examples in the help section (click the big ? to get all the details).

Marek Gibney

Breakpoints and console.log Is the Past, Time Travel Is the Future — 15x faster JavaScript debugging than with breakpoints and console.log, now with support for Vitest.

Wallaby.js sponsor

Yup 1.0: Super Simple Object Schema Validation — Define a schema, transform a value to match, assert the shape of an existing value, or both. Very extensive docs here.

Jason Quense

Material React Table: A Full-Featured React Table Component — Built upon Material UI 5 and TanStack Table 8. The docs include lots of interactive examples.

Kevin Van Cott

BlockNote: Notion-Style Block-Based Text Editor — Built on top of Prosemirror and Tiptap, this is for you if you like the way the Notion note-taking service’s text editor feels. There’s a live demo.

Yousef

TresJS: Build 3D Experiences with Vue.js — Create 3D scenes with Vue components and Three.js. Think React-three-fiber but Vue flavored.

Alvaro Sabu

depngn: Find Out if Dependencies Support a Given Node.js Version — A CLI tool that establishes whether or not the dependencies in your package.json will work against a specified version of Node.

OmbuLabs

Open-Source JS Form Libraries to Automate Your Form Workflow — Self-host SurveyJS to configure and modify multiple forms, convert them to fillable PDF files, and analyze collected data in interactive dashboards.

SurveyJS sponsor

Lawnmower: Build VR Scenes with Custom HTML Tags — A web component library that leans on Three.js and aims “to make building a basic VR website as easy to make as your first HTML site”.

Gareth Marland

Electron 23.0 Released — The popular cross platform JavaScript, HTML + CSS desktop app framework gets bumped up to Node 18.12.1, Chromium 110, and V8 11.0. Windows 7/8/8.1 support has also been dropped, so we might start to see those versions of Windows lose the support of a lot of Electron based apps soon.

Electron Core Team

Run: Run User-Provided Code in a Web Worker

SLASHD Analytics

💻 Jobs

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

Sticker Mule

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

Hired

QUICK RELEASES:

vue-easytable 2.23
↳ A data table/grid control for Vue.js. (Demo.)

React-Custom-Scroll 5.0
↳ Customize the browser scroll bar. (Demo.)

react-jsonschema-form 5.1
↳ Component to build Web forms from JSON Schema.

AlaSQL.js 3.1
↳ JavaScript-based SQL database.

jest-puppeteer 7.0
↳ Run tests using Jest & Puppeteer.

MDX 2.3
↳ Markdown for the component era.

🎁 The Bonus Round

✈️ Watching someone wrestle with Python and JavaScript to fly (virtual) planes with Microsoft Flight Simulator tickled me a lot.

A beautiful WebGL2-based fluid simulation. It’s even happy on mobile. Pretty!

Go-like channels in 10 lines of JavaTypeScript..?

🐦 Misko Hevery: “useSignal() is the future of web frameworks and is a better abstraction than useState(), which is showing its age.” (source)

Mike Pennisi asks: when is an object property not a property?

Do you use Postgres at all? Check out Postgres Weekly – one of our sister newsletters. So much is going on in the Postgres space lately and it’s a great way to keep up.

NODE.JS Retro 2022

Node.js was the top technology used by professional developers in 2022

Stack Overflow’s annual Developer Survey confirmed our experience; Node.js continues to grow its use across the globe due to its scalability and performance as well as its ability to integrate seamlessly with a wide range of technologies and databases make it an ideal technology for businesses of all sizes.

The Node.js open-source project, a cross-platform JavaScript run-time environment built on Chrome’s V8 JavaScript engine, allows developers to use JavaScript to create web applications and serve data quickly, securely, and reliably. That’s why professional developers have adopted it broadly; it helps them in many web-development tasks like API development, streaming, and web and mobile applications as it is fully compatible with existing JavaScript libraries (the Top Language according to Github’s Octoverse Report, it can be used to create highly scalable and dynamic web or mobile applications.

Img 1: Stackoverflow 2022 survey

NodeJS on an Enterprise Level

Node.js excels at simplifying the development process for enterprises. It requires less code to execute tasks, allowing developers to focus on creating high-quality code rather than endless lines of coding. By utilizing asynchronous I/O and non-blocking event-driven input/output makes it lightweight and efficient for building real-time applications.

Img: Node.js Org Use Survey

Node.js is designed to handle high amounts of requests quickly and efficiently. Its architecture is based on a single-threaded, event-driven model that makes it very efficient at handling concurrent requests. This event-driven design allows Node to handle requests without the need for multiple threads. This makes Node.js applications highly scalable, as multiple requests can be served without additional resources or server hardware.

Additionally, Node.js supports streaming and event-based programming, which allows developers to build asynchronous applications. Asynchronous programming will enable applications to respond quickly to multiple requests without waiting for each request to finish before responding.

Therefore the performance of Node.js applications depends mainly on how well they are coded and optimized. Careful planning and optimizing the application code are essential to achieve high performance. Additionally, Node.js applications benefit from caching, clustering, and other optimization techniques. These techniques can help improve the performance and scalability of Node.js applications.

The number one request we get at NodeSource is to help developers and organizations improve the performance of their Node.js applications. It’s a key reason we built our product N|Solid, to provide the visibility and insights to help identify and resolve issues fast without adding overhead like other APMs (NodeSource Benchmark Tool). And why we offer Professional Services from our Node Experts to go a step further with Performance Audits and Training and Node.js Support.

Optimization techniques in Node.js

In our experience, the most common optimization techniques in Node.js are caching, minification, bundling, optimizing database queries, code splitting, using async functions, and using the Node.js cluster module. Here is a quick overview of each.:

Caching

Caching in Node.js helps improve performance by storing data in memory to be accessed quickly when needed. This helps reduce the time it takes to retrieve data from the server and helps reduce the number of requests needed to be made to the server. Caching also allows data to be stored more efficiently, which is helpful for applications with large amounts of data.

Minification

In Node.js reduces the size of code files and other resources by removing unnecessary characters, such as spaces, new lines, and comments, without altering the code’s functionality. Minifying code can help to enhance the performance of your Node.js applications by reducing download time and improving browser rendering speed.

Bundling

Is the process of combining multiple files or resources into one bundle, which typically has a smaller file size than when all files are separate. Bundling can reduce network latency as fewer requests are needed to retrieve data. It also helps improve application performance as the browser can cache a single large file instead of multiple small ones.

Optimizing database queries

In Node.js involves utilizing techniques such as indexing, query optimization, and caching to ensure that database queries are more efficient and run more quickly. Proper indexing can contribute to faster query times. In contrast, query optimization can reduce the time needed to process a query by ensuring that only the data required is requested from the database.

Code splitting

Is a technique to reduce the amount of code sent to the client when a web page is requested. Code splitting efficiently divides code into smaller bundles and only sends the necessary code to the user when needed. This helps improve web application performance, as the user only needs to download the relevant code for the requested page.

Async functions

In Node.js allow code to be run asynchronously, meaning that the code is not executed sequentially. Instead, asynchronous operations can be executed in parallel and execute operations concurrently. This allows the code to execute faster and in a more efficient way. Additionally, asynchronous functions provide better error-handling capabilities and allow greater control over the flow.

Use of the Node.js Cluster Module

The Node.js cluster module allows you to create a group of child processes (workers) that all share the same server port, making it easy to scale your application across multiple CPU cores. It also provides a powerful way to handle requests in a distributed manner and makes it easier to manage and monitor the performance of your application. The cluster also provides an API for sending messages between workers, allowing them to coordinate their activities.

In addition to these optimization techniques in Node.js, it is important to consider the best development practices in Node.js.

The best development practices in Node.js.for 2023

Img: https://xkcd.com/292/

The list includes, but is not less:

Utilizing the latest version of Node.js and ensuring it is regularly updated. For your production binaries, we recommend using our distribution packages (best maintained, documented, and most used production binaries -NodeSource Node.js Binary Distributions

Implementing modern patterns and techniques such as asynchronous programming and proper error handling.

Leveraging dependency management to reduce code complexity and ensure packages are up-to-date.

Adopting modular development practices to create easily reused and scaled components across projects.

Investing in automated testing to ensure quality and stability in the codebase.

Use security libraries to prevent common vulnerabilities and protect against data breaches.

Optimizing memory and resource usage to keep operating costs low.

And to comply with one or several of these good practices, it is essential to use an APM.

Using an Application Performance Monitoring (APM)

Using an Application Performance Monitoring (APM) tool to monitor your Node.js application lets you gain insights into application performance and identify issues quickly. Some popular APM tools for Node.js include New Relic, AppDynamics, Datadog and N|Solid. Each tool offers performance monitoring, error tracking, and real-time analytics features.

Note: Last year, we released for the community an open-source tool to compare the main APMs in Node.js; we invite you to contribute or use it in your work.

Selecting the right APM for Node.js will depend on the specific needs of your project. However (yes, we are biased 🙂), we believe N|Solid is the best APM for Node.js is the best APM for Node.js; because it provides developers with deeper insights and key integrations and adds security features no other APM can.

Conclusion:

Node.js is quickly becoming a popular choice for enterprise-level applications. With its lightweight architecture, scalability, and flexibility,
Node.js is an ideal language for businesses that need applications that can handle high traffic and complex data.
Node.js allows organizations to develop highly-customizable web applications that are secure, reliable, and perform well at scale.
Node.js also has a vibrant open-source community, allowing developers to easily find and use existing libraries and frameworks.

Are you creating a Node.js application?

Follow these simple steps:

Start by selecting a framework. Node.js has many available frameworks, such as Fastify, Hapi, or Koa. Choose the one that best fits the needs of your application.

Set up a package.json file to better manage your project’s dependencies.
Create a folder structure to organize the components of your application.
Structure your code into separate files as your application grows.
Write automated tests for your application.
Implement error handling for any unexpected issues.
Validate user input before handing it off to your application.
Utilize caching to improve performance.
Consider deploying
Use an APM and follow our diagnostic blog-post series (Remember that for Node.js, N|Solid is the recommended option 😉 ).

Good programming could help create a project exactly how you want. In NodeJS, there are so many open-source projects to take inspiration from.

— Wait for our list of projects and technologies in Node.js to keep an eye on in 2023 —

With services from a NodeJS expert company such as NodeSource, you could make the most of the technology’s robust features to achieve your web development goals. We will be happy to support you in your node.js journey!

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

About N|Solid

N|Solid is an augmented version of Node.js that includes additional features such as security, performance monitoring, and enhanced debugging tools. It’s an excellent option for projects that require robust debugging and performance capabilities.