IMPORTANT: Since Bit Harmony is still in its beta phase it is likely that some of the steps in this tutorial will no longer be relevant. If that happens, please check with the official docs.

Bit Harmony is a new version of Bit that offers a modern approach to develop component-based applications using JavaScript. The tool provides you with a rich visual workspace that organizes and showcases your components in action.

By using Bit Harmony, you will be able to:

• Develop and test your components in isolation.
• Display the rendered components individually and composed together with other components.
• Auto-generate dependency…

Developing a JavaScript application involves reloading the browser each time you save code changes in order to refresh the user interface.

Developer tools like Webpack can even run in watch mode to monitor your project files for changes. As soon as Webpack detected a change, it will rebuild the application and the browser is reloaded automatically.

But soon developers started to think, is there a way to actually save and reflect changes to the browser without reloading? After all, reloading means losing whatever process you’re making on the UI:

• Any modal or dialog box you’re working on will be gone…

Webpack is the most popular JavaScript build tool for the last few years because of its flexible bundling configuration and the large amount of custom plugins it officially supports for different file types.

The main purpose of using Webpack is to take all of your JavaScript files, along with modules imported from NPM, images, CSS, and other web assets, and bundle them all together into one build file that can be run by the browser.

Webpack has been the most popular bundling tool for front-end development with React, and since both Create React App and Next.js used Webpack by default, I never bothered to learn about other bundlers before.

But I got curious about how to use Rollup lately, so I decided to explore Rollup and see if it offers anything interesting for React developers. Rollup is a module bundler for JavaScript that works similarly to Webpack, but is said to have easier configuration and smaller build size.

This tutorial will show you how to create a React-Rollup starter app from scratch and how Rollup…

JavaScript has a bad date handling API because the Date object implementation was copied directly from Java’s Date Class. Java maintainers eventually deprecated many of Date class methods and created the Calendar Class in 1997 to replace it.

But JavaScript’s Date API never got a proper fix, which is why we have the following problems with it today:

• Date object is mutable
• Messy API for date and time computations (for example, adding and subtracting days )
• Only support UTC and the local timezone
• Parsing date from a string is unreliable
• No support for non-Gregorian calendars

Currently, there’s no way to…

Zero is a web framework that simplifies modern web development by allowing you to mix different programming languages and libraries when developing your web application.

You can write your application code in a mix of Node.js, React, Vue, Python, or even regular HTML. Zero will manage your project’s dependencies and serve them all for you.

Here are some of the main benefits of using Zero Server:

• Automatic dependency and configuration management
• Built-in file-system and API routing
• Dynamic routing support
• Support for SSR and SSG
• Support for popular web development languages and libraries

Languages and libraries supported by Zero include:

• Node.js…

ES2021 or ES12 is scheduled for release sometime in June 2021. Here are some new features that you can expect from the ECMAScript proposal status from TC39:

• String.prototype.replaceAll
• Promise.any
• WeakRefs and finalizer
• Logical Assignment Operators
• Numeric separator

This post will help you to understand the use of each new feature, starting from the first one.

The String replaceAll() method

The String.prototype.replaceAll() method allows you to replace all occurrences of a substring with another string that you defined. Currently, the .replace() method only replace the first occurrence of the substring while ignoring the rest:

const queryString = 'q=query+string+parameters';
const withSpaces = queryString.replace('+', ' ');
console.log(withSpaces); // q=query…

Aleph is a JavaScript framework that offers you the best developer experience in building modern web applications with React while using Deno for server-side operations.

Aleph allows you to build React application that uses server-side rendering by default. Since it uses Deno, it doesn’t need to use Webpack for import statements.

This also means you don’t need to install packages to the node_modules folder and write the package.json file. All dependencies can be imported using ESM URL and managed by Aleph.js. For example, you can use the global ESM CDN called esm.sh to import any libraries that you need:

import…