Modern JavaScript projects need a bundler to compile small pieces of code into something larger and more complex, such as a library or application. The popular bundlers are webpack, Rollup, Parcel, RequireJS, and Browserify. They transform JavaScript code into modules that can be loaded as one bundle.

A bundle can be arranged in different formats. In this article, we are going to present real examples of the CJS, AMD, UMD, ESM, System, and IIFE formats.

Bundlers and Formats

This is a standard HTML file that includes a stylesheet on line 5 and a JavaScript file on line 6:

Putting all JavaScript code…

In a previous article, “Easier D3.js — Render C3 Charts With React Functional Components,” we noted that C3 allows us to build charts quickly without knowing all of the complexity of D3. Using C3 to create a chart is just a few lines of code.

In another article, “5 Steps to Render D3.js With React Functional Components,” we mentioned that D3 provides rich features to construct graphical representations. Take charts as an example — D3 can customize every detail of axes, shapes, tool tips, texts, colors, and animation.

In this article, we’re going to dive into D3 line and bar…

Data visualization is the graphical representation of information and data. It utilizes visual elements to present trends, outliers, and patterns in data. It is particularly efficient when the data is numerous, such as in a time series, which is a series of data points indexed in time order.

D3.js is a JavaScript library for visualizing data using web standards. D3 stands for “data-driven documents.” It binds arbitrary data to a Document Object Model (DOM) and then applies data-driven transformations to the document. We can use D3 to generate an HTML table from an array of numbers. …

Speech synthesis is the artificial production of human speech. A computer system used for this purpose is called a speech computer, speech synthesizer, or text-to-speech (TTS) system. Speech synthesis organizes sentences by concatenating prerecorded words saved in a database. The following diagram is an overview of a typical TTS system:

Speech recognition is an interdisciplinary subfield of computer science and computational linguistics. It recognizes and translates spoken language into text. It is also known as automatic speech recognition (ASR), computer speech recognition, or speech to text (STT).

Machine learning (ML) is an application of artificial intelligence (AI) that provides systems with the ability to automatically learn and improve from experience without being explicitly programmed. Machine learning has provided the majority of speech recognition breakthroughs in this century. Today, speech recognition technology is everywhere, such as Apple Siri, Amazon Echo, and Google Nest.

Speech recognition, along with voice response — also…

Webpack is a well-established static module bundler for modern JavaScript applications. It has more than 57k stars on GitHub and over 13 million weekly downloads from npm registry. It released version 5 on October 10, 2020, which brings a number of changes:

• Improved build performance with Persistent Caching.
• Improved Long-Term Caching with better algorithms and defaults.
• Improved bundle size with better Tree Shaking and Code Generation.

Most importantly, Webpack 5 has a new feature, Module Federation, which allows multiple webpack builds to work together. One application can dynamically run code from another bundle or build, on the client and the…

What is The Great Gatsby?

It is a novel written by American author, F. Scott Fitzgerald, in 1925. The book follows a cast of characters living in the fictional towns of West Egg and East Egg on prosperous Long Island in the summer of 1922. Many literary critics consider it one of the greatest novels ever written.

Today we are talking about another Gatsby, a free and open source framework based on React that helps developers build blazing fast websites and applications.

When starting a new React app, you may consider React team’s recommendation:

• If you’re learning React or creating…

Node.js 15 was released October 20, 2020. It comes with a number of major features:

• Throw on unhandled rejections
• V8 8.6 language features
• NPM 7
• Experimental support for QUIC
• N-API Version 7
• Refinement of the Async Local Storage APIs

Let’s explore what they are and how to use them.

Use NVM to Explore Node

In a previous article, we provided instructions on using NVM (Node Version Manager) to manage Node.js and NPM versions. In our environment, we had Node.js 12.16.0 and NPM 6.14.8 installed. By running nvm install node, we installed Node.js 15.4.0 and NPM7.0.15.

We have two windows open, one is set to Node.js…