Have you ever wondered why it’s taking time for your page to load whenever you visit a website? Did you check your network and confirm everything is okay? This is most likely due to the large Javascript bundle being fetched and parsed in the browser. If the JS bundle isn’t optimized, it will result in lower performance and higher user load time.

This article will review strategies and methods to reduce our overall Javascript bundle when deploying to production.

Prerequisites

This article assumes that you have:

1. Node installed on your local machine

2. yarn or npm installed on your local machine (npm comes pre-installed with node)

3. A text editor installed, e.g., VsCode.

4. Basic knowledge of HTML, CSS, Javascript, and the terminal. (see the link for a refresher on them)

5. Familiarity with at least one UI Framework, i.e., React, VueJS, or Angular.

Before we proceed, we must understand why we must ensure our Javascript bundle is optimized and reduced to the smallest bundle size before deploying to production.

Why Do We Need To Ship Smaller JS Bundles to Production?

Shipping small Javascript bundles to production is paramount as it's one of the major factors contributing to a website's overall performance. It determines how long a user waits for a page, whenever it’s visited, and what kind of experience the user gets on the webpage, especially for first-time users. It’s in the best interest of the business owners to ensure they don’t keep users waiting while their page is loading.

In the background, whenever a page is visited, the browser makes an HTTP request to the server to download the assets and files needed for that page. The Javascript files are then parsed and executed before rendering occurs. After completing these processes, user interaction becomes active on the page. All these depend on how large the Javascript bundle is, so optimizing and reducing the overall bundle size is a necessity every serious business owner must perform.

There are various factors resulting in large javascript bundles in our project. Some of them include:

• Ignoring bundle sizes: Not paying attention to the bundle size of libraries and packages being installed.

• Lack of clean and readable code: The kind of code we write also determines how fast our Javascript files get parsed, compiled, and executed. If there are any sections in our code where we’ve ignored best practices and well-tested patterns, it’ll eventually affect the execution time of our javascript file in the browser.

• Absence of bundlers and compilers: Bundlers and compilers play a huge role in ensuring our overall javascript bundle is the bare minimum as we enjoy benefits like Minification, Code-Spliting, Tree-Shaking, and so much more. So, ignoring these tools would result in shipping a plain javascript file without the abovementioned features. The file would still run fine in the browser. However, important metrics like parse/compile time, execution time, memory usage, etc., all get affected.

Having gone over why we need to ship smaller Javascript bundles and identifying the factors that lead to large bundles in our project, we will now discuss the strategies and methods we can employ to reduce our JS bundles. I’ve listed all the strategies we’ll discuss below:

• Using a bundler, e.g., webpack, parcel, vite, etc.

• Bundle Size Inspection

  • VsCode Import Cost Plugin

  • Webpack-Bundle-Analyzer

  • Others include Source-Map-Explorer, Bundle-Buddy, Bundlephobia e.t.c

• Code-Splitting

• Lazy-loading

Using a Bundler

The first step in achieving a smaller, optimized bundle size is using a code bundling tool. Bundling means merging all our Javascript files and modules into one single file, which will then be executed in the browser. With bundling, we enjoy benefits like Minification, Tree-Shaking, Code-Splitting, etc., out of the box without going through them ourselves.

Fortunately, almost all frameworks or UI libraries we use today have a bundler setup by default whenever they are being installed for development. Popular bundlers include webpack, parcel, vite, browserify, rollup, etc.

Bundle Size Inspection

In today’s development world, hundreds of packages and dependencies are usually installed in our project. The best way to reduce our Javascript bundle size is to be conscious and observe how large a dependency or package is after installation. This would enable us to take a step back and weigh our options if it’s best to use the package or develop a hand-written utility to solve whichever problem we might need it for. Various tools have been created to make bundle-size inspection easy and straightforward. However, we will review a few of them, which I feel are the most important: Import Cost Plugin, Webpack-Bundle-Analyzer, and Source-Map-Explorer.

Import Cost Plugin

A popular tool that makes this easy to achieve is the vscode-import-cost plugin. This extension calculates every third-party import we make in our application and displays inline the size of the imported package. It is also available as a standalone package for other IDEs integration.

Webpack-Bundle-Analyzer

This popular webpack plugin helps users visualize their bundle sizes in a treemap and help identify which package or dependencies need to be removed. It visualizes each file in our bundle as interactive blocks that can be clicked and zoomed on for us to inspect all dependencies. Setting up webpack is pretty straightforward. However, one downside is that it can only be used in projects with webpack installed as its code bundler.

Webpack-bundle-analyzer can be installed using the following commands:

npm install --save-dev webpack-bundle-analyzer

Paste the following snippet in your webpack.config.js file:

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

Then run your build command:

npm run build
// OR
npx webpack -—config webpack.config.js

This will create and open an interactive treemap visualization of the contents of all your bundles in the browser.

Source-Map-Explorer

Source-Map-Explorer is an excellent alternative to webpack-bundle-analyzer. It analyzes our Javascript bundles using source maps and helps identify where our code bloat comes from. It’s also handy for people who have bootstrapped their React applications with the CRA (create-react-app) setup and have no intention of ejecting their application.

To install the source-map-explorer, run the command below:

npm install -g source-map-explorer

Then add the code snippet below to the “scripts” section in your package.json file:

"scripts": {
   "analyze": "source-map-explorer 'build/static/js/*.js'",
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test"
}

Finally, run the npm run build and npm run analyze commands in your terminal.

This will create a visualization in your browser and show how the space is used in your minified bundle.

Code Splitting

This is the process of splitting our code into various bundles or chunks, which can be loaded later in the future when needed. It can dramatically improve our app's performance as only the bundles required for a page are loaded in the browser. Code Splitting can be done by most bundlers out there, and it’s all a matter of identifying the files that are required for the initial page load.

For most bundlers, the best way to introduce code-splitting is through the import() syntax.

“The import() syntax, commonly called dynamic import, is a function-like expression that allows loading an ECMAScript module asynchronously and dynamically into a potentially non-module environment.” - MDN

The difference between this import() function and the static import keyword is that the former can be used anywhere within a module or non-module file, while the latter can only be used in top-level modules.

Most frameworks have also improved how code-splitting can be implemented in their applications. For instance:

• In React, code-splitting can be implemented using React.lazy() and Suspense.

• In NextJS, we have NextJS Dynamic Import.

• In VueJS, we can import defineAsyncComponent().

A perfect use case for dynamic import would be with a Language Switcher. Imagine a webpage supporting about 3 - 5 locales, which users can toggle using a dropdown. Loading and bundling all the translations for all five locales would be inefficient and affect the webpage load time performance. One way to optimize this is by loading the translations dynamically.

import i18n from “i18next”;

// Initialize i18n instance
i18n
 .use()
 .init({ … })


export const handleLoadLanguage = async (locale = "en") => {
    const messages = await import(`../translations/${locale}.json`);
    i18n.setLocaleMessage(locale, messages.root);
    await i18n.changeLanguage(locale)
};

Other use cases where dynamic import would be helpful include:

• Displaying a modal: a modal is shown conditionally in most cases

• Displaying a Date-Picker component

• Loading user comment sections on a blog or website

• UI for a page not rendered immediately

One thing to keep in mind is to ensure that dynamically fetching a file or component in the background doesn’t affect user experience and make the UI feel unresponsive or delayed while the user is on a page.

Lazy Loading

Lazy loading is an optimization technique mostly used in web browsers. However, it is a form of code-splitting as well because the files are only loaded until a certain condition has been met. In most cases, lazy loading is implemented for images and media-related assets. They get loaded when the user reaches a visible part of the viewport or when interaction occurs with an image. One popular way components can dynamically be loaded on interaction is using the Intersection Observer API.

An excellent example is a Product-Listings page. Loading all the products simultaneously would require considerable bandwidth, increasing load time as the products are loaded. Hence, with Lazy-loading, only the products a user can see in the viewport would be downloaded, then on scrolling down the webpage, the rest of the products would be downloaded on demand. Implementing a strategy like this would result in substantial performance gains for the website.

Here are Airbnb product listings being lazy loaded:

Conclusion

The size of our Javascript bundle remains an essential factor to consider when optimizing our webpage for performance. However, achieving a performant website not only has to do with our javascript bundle. Other strategies like Image and Font Optimization, serving via CDN, Caching static pages, etc., are all non-javascript-related methods that need to be in place to achieve the best performance for our site.

Hence, the journey to obtaining that state of performance we all yearn for on our websites is not achieved in a single run. Instead, it requires frequent optimizations and strategies being put in place to ensure users of our website get the information they need on time.

I hope you found this article helpful and have learned a few methods to achieve the required performance we all want for our websites. Feel free to contact me via LinkedIn or Twitter if you have any questions.

Resources

• How to analyze your Javascript Bundles, Google Chrome Developers Channel, Youtube

• Small Bundles, Fast Pages: What to do with too much Javascript, Calibre

• Improving Javascript Bundle Performance with Code-Splitting, Smashing Magazine

• Optimizing Javascript Bundle Size, DebugBear

• 18 Tips for Website Performance Optimization, KeyCDN

• 5 Methods to Reduce Javascript Bundle Size, Bits and Pieces

It was a whole new era with its quirks and downsides. Initially, javascript code didn’t exceed two to four lines, but as the complexity of websites and apps increased, the amount of javascript code shipped to the browser skyrocketed. As a result, we now have millions of javascript code running in the browser, thanks to the frameworks and libraries we use for development.

Managing and maintaining that much code requires a much more efficient and productive method, hence the creation of Javascript Modules.

In this article, I’ll explain how we can utilize the power of javascript modules in our project and why it’s a good pattern when developing javascript applications.

Prerequisites

1. Node installed on your local machine

2. yarn or npm installed on your local machine (npm comes pre-installed with node)

3. A text editor installed, e.g., VsCode.

4. Basic knowledge of HTML, CSS, Javascript, and the terminal (Check out this article for a refresher on them)

What is a Module?

A module is a self-contained javascript file containing variables, functions, or classes that can be available to other files across your project. Making a function or class available to other modules is called export. In contrast, using a function or class from another module is called import. Javascript Modules allow us to utilize this system of modules within our project, thereby enabling us to enjoy benefits like:

• Code maintainability

• Ease of code reusability

• Code scalability

Javascript Modules allow us to break down and split our code into multiple and self-contained chunks that can be easily well-maintained and scalable should there be any need for any addition in the future. This feature has been available in NodeJS and in popular frameworks and libraries within the Javascript ecosystem for a while now. However, it’s only recently that this feature became available natively within the browser.

Looking at the Browser Compatibility Specs on MDN, it’s now supported in most popular browsers used by everyone.

Using Modules in a Project

To get started with modules in a project, your script tag in the HTML file needs to have the type attribute included, like the snippet below:

Open your terminal and paste in the command below to create a new folder, navigate into it and create an HTML file named index.html:

mkdir js-modules
cd js-modules
touch index.html

Open the folder in VsCode using the command below:

code .

Our project should look like this now:

Paste the starter code below in our index.html file and create a javascript file called app.js:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Hello World</h1>
  <script type="module" src="app.js"></script>
</body>
</html>

If you observe, the script tag in our HTML file has the type attribute with a value of module. This is because the app.js file we just created would be a module.

Also, when using javascript files that are modules, we need to serve our HTML file using a server cause opening the file directly would throw a CORS error in the browser console due to our browser not identifying where the file is being served from. Not doing this would result in the error below:

We'll use Live Server in this tutorial. See this video on how to install it in VsCode.

Now, create another javascript file named utils.js and paste in the following snippets below:

const users = [
  {
    firstName: "John",
    lastName: "Doe",
  },
  {
    firstName: "Evan",
    lastName: "Blacwk",
  },
  {
    firstName: "Julian",
    lastName: "Drey",
  },
];

/**
 * function to get all even numbers in an array of numbers
 *
 * @param {number[]} nums
 * @return {number[]} Array of even numbers
 */
function getEvenNumbers(nums) {
  if (nums.length === 0) return;
  return nums.filter((num) => num % 2 === 0);
}

/**
 * function to get all odd numbers in an array of numbers
 *
 * @param {number[]} nums
 * @return {number[]} Array of odd numbers
 */
function getOddNumbers(nums) {
  if (nums.length === 0) return;
  return nums.filter((num) => num % 2 !== 0);
}

/**
 * function to get all numbers greater than 5 in an array of numbers
 *
 * @param {number[]} nums
 * @return {number[]}
 */
function getNumbersLargerThanFive(nums) {
  if (nums.length === 0) return;
  return nums.filter((num) => num > 5);
}

/**
 * function to combine firstName and  lastName into a fullname
 *
 * @param {string} firstName
 * @param {string} lastName
 * @return {string} FullName
 */
function combineNames(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

Using the export and import keyword

There are two main ways the export/import keyword can be used in a script, they are:

• Using as a Named Export/Import

• Using as a Default Export/Import

Named Exports

Let’s update the code snippet we pasted in our utils.js file by appending the export keyword before each function. Our code should look like this now:

export const users = [
  {
    firstName: "John",
    lastName: "Doe",
  },
  {
    firstName: "Evan",
    lastName: "Blacwk",
  },
  {
    firstName: "Julian",
    lastName: "Drey",
  },
];

export function getEvenNumbers(nums) {
  if (nums.length === 0) return;
  return nums.filter((num) => num % 2 === 0);
}
export function getOddNumbers(nums) {
  if (nums.length === 0) return;
  return nums.filter((num) => num % 2 !== 0);
}
export function getNumbersLargerThanFive(nums) {
  if (nums.length === 0) return;
  return nums.filter((num) => num > 5);
}

export function combineNames(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

The export keyword makes whichever variable, function, or class it’s appended to available to all other scripts in our project. If we have so many functions we want to export, adding the export keyword on each of them might be a task on its own, so there’s a much cleaner approach which is having a single export object at the end of the file as we have below:

const users = [
  {
    firstName: "John",
    lastName: "Doe",
  },
  {
    firstName: "Evan",
    lastName: "Blacwk",
  },
  {
    firstName: "Julian",
    lastName: "Drey",
  },
];

/**
 * function to get all even numbers in an array of numbers
 *
 * @param {number[]} nums
 * @return {number[]} Array of even numbers
 */
function getEvenNumbers(nums) {
  if (nums.length === 0) return;
  return nums.filter((num) => num % 2 === 0);
}

/**
 * function to get all odd numbers in an array of numbers
 *
 * @param {number[]} nums
 * @return {number[]} Array of odd numbers
 */
function getOddNumbers(nums) {
  if (nums.length === 0) return;
  return nums.filter((num) => num % 2 !== 0);
}

/**
 * function to get all numbers greater than 5 in an array of numbers
 *
 * @param {number[]} nums
 * @return {number[]}
 */
function getNumbersLargerThanFive(nums) {
  if (nums.length === 0) return;
  return nums.filter((num) => num > 5);
}

/**
 * function to combine firstName and  lastName into a fullname
 *
 * @param {string} firstName
 * @param {string} lastName
 * @return {string} FullName
 */
function combineNames(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

export {
  users,
  getEvenNumbers,
  getOddNumbers,
  getNumbersLargerThanFive,
  combineNames,
};

Having done this, we can now import any of these functions in app.js and make use of it below:

import {
  getEvenNumbers,
  getOddNumbers,
  getNumbersLargerThanFive,
  users,
  combineNames,
} from "./utils.js";

console.log(getEvenNumbers([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])); // Prints [2, 4, 6, 8, 10]
console.log(getOddNumbers([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])); // Prints [1, 3, 5, 7, 9]
console.log(getNumbersLargerThanFive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])); // Prints [6, 7, 8, 9, 10]
console.log(users.map((user) => combineNames(user.firstName, user.lastName))); // Prints ['John Doe', 'Evan Blacwk', 'Julian Drey']

We should get the output below in our console when we open our index.html file in the browser:

NB: Since the curly braces for the export/import looks like an object, we have the option of being able to rename a variable or function in an export/import statement using the as keyword like this:

// For export
export {
  users as userList,
  getEvenNumbers as extractNumbersDivisibleByTwo,
  getOddNumbers as extractOddNumbers,
  getNumbersLargerThanFive,
  combineNames,
};
// For import
import {
  extractNumbersDivisibleByTwo as evenNumbersFunc,
  getOddNumbers as oddNumbersFunc,
  getNumbersLargerThanFive,
  usersList,
  combineNames,
} from "./utils.js";

One other advantage of named import is the fact that we can import everything exported from the utils.js file into a module object which we can then be accessed using the dot notation like this:

import * as utils from './utils.js';

console.log(utils.getEvenNumbers([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])); // Prints [2, 4, 6, 8, 10]
console.log(utils.getOddNumbers([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])); // Prints [1, 3, 5, 7, 9]
console.log(utils.getNumbersLargerThanFive([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])); // Prints [6, 7, 8, 9, 10]

This is very useful for situations where our utils.js file might be used in multiple files. That way, the variables or functions can be named according to the file where it’s being used.

Default Exports

In a situation where we would like to have a default variable or function exported, we can include default alongside the export keyword prefixing the variable or function to be exported. Also, there can only be one default statement in a module. For example, let’s export our users array as a default export below:

const users = [
  {
    firstName: "John",
    lastName: "Doe",
  },
  {
    firstName: "Evan",
    lastName: "Blacwk",
  },
  {
    firstName: "Julian",
    lastName: "Drey",
  },
];

/**
 * function to get all even numbers in an array of numbers
 *
 * @param {number[]} nums
 * @return {number[]} Array of even numbers
 */
function getEvenNumbers(nums) {
  if (nums.length === 0) return;
  return nums.filter((num) => num % 2 === 0);
}

/**
 * function to get all odd numbers in an array of numbers
 *
 * @param {number[]} nums
 * @return {number[]} Array of odd numbers
 */
function getOddNumbers(nums) {
  if (nums.length === 0) return;
  return nums.filter((num) => num % 2 !== 0);
}

/**
 * function to get all numbers greater than 5 in an array of numbers
 *
 * @param {number[]} nums
 * @return {number[]}
 */
function getNumbersLargerThanFive(nums) {
  if (nums.length === 0) return;
  return nums.filter((num) => num > 5);
}

/**
 * function to combine firstName and  lastName into a fullname
 *
 * @param {string} firstName
 * @param {string} lastName
 * @return {string} FullName
 */
function combineNames(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

export {
  getEvenNumbers,
  getOddNumbers,
  getNumbersLargerThanFive,
  combineNames,
};

export default users;

In our app.js file, we can import the users variable individually without having the curly braces as we had from the earlier examples. This is because our users array is the default variable exported from utils.js.

import {
  getEvenNumbers,
  getOddNumbers,
  getNumbersLargerThanFive,
  combineNames,
} from "./utils.js";
import users from './utils.js';

// The rest of the code
...

Or we could have it like this:

import users, {
  getEvenNumbers,
  getOddNumbers,
  getNumbersLargerThanFive,
  combineNames,
} from "./utils.js";

Conclusion

This article introduced you to Javascript Modules and how to utilize them in your project. I hope you’ve found it helpful.

If you have any questions or suggestions for me, feel free to drop a comment below. And if you are looking for additional resources, I’d recommend these ones:

• Javascript Modules, MDN Docs

• Modules Introduction, Javascript Info

• ES6 In Depth: Modules, Mozilla Hacks

Widgets have made it easy and seamless for users to perform various actions on a website.

In this article, we will be going over a tutorial on how to build a simple messaging widget that can be embedded in any website.

Prerequisites

1. Node installed on their local machine

2. yarn or npm installed on your local machine (npm comes pre-installed with node)

3. A text editor installed e.g VsCode.

4. Basic knowledge of HTML, CSS, Javascript, and the terminal. (see link for a refresher on them)

What is a Widget?

A widget is a stand-alone app or component that can be added to a website. They usually work independently of the website in which they’re installed, hence, they have everything they need to run efficiently wherever they’re used. Widgets can be set up very easily - it’s as simple as copy-pasting a script or code block into your website for it to start working.

There are so many reasons or use cases for needing a widget in a website, they are useful with a lot of things like:

• Helping business owners and customers communicate more easily via instant messaging.

• Aiding the customer support team to efficiently interact with a user’s issues or bugs in a website. They can even serve as a means through which users can see FAQs on a website.

• Enabling users to gain easy access to products and items in carts for eCommerce businesses.

Generally, widgets improve the overall customer retention/experiences of businesses and help drive sales and solve recurring issues amongst users. There are many kinds of widgets, ranging from customer support to messaging widgets, help widgets, search widgets, cart widgets, etc. Anything can be a widget as long as it has a specific functionality it’s meant to perform on a website.

Getting Started

For this tutorial, we will build a simple messaging widget that can be installed on any website. If you’re interested in getting the code for the final app, you can find it here.

We’ll be building our widget using Vite as our package bundler. It’s very easy and straightforward to set up.

Setting up the project

Open your terminal and paste in the command below to create a new folder and navigate into that folder:

mkdir messaging-widget
cd messaging-widget

Once you’re in the folder, paste in the command below to setup Vite:

yarn create vite

You’ll get some prompts that you’ll need to answer for the setup, use my responses below:

• Project Name is: ./

• Select a framework: Vanilla

• Select a variant: Javascript

On doing this, you should get results similar to the one below:

Now that Vite has been set up successfully, we’ll need to install it as it’s a dev dependency in our project. To do this, run the code snippet below:

yarn install

Once the installation has been completed, you can now open the folder in VsCode by using the command below or locate the folder in your file manager and open it directly from there.

code .

Our project should now look like this now:

Adding the widget functionality

Now, go inside the main.js file and delete any code we have in there, the same applies to the counter.js file, delete all code in there and rename the file to asset.js, we’ll be using it later in the tutorial.

Paste in the following code block inside our main.js file:

class MessageWidget {
  constructor(position = "bottom-right") {
    this.position = this.getPosition(position);
    this.open = false;
    this.initialize();
    this.injectStyles();
  }

  position = "";
  open = false;
  widgetContent = null;  
}

We’ll be using a Javascript Class to encapsulate most of our logic for the widget. The constructor() method is automatically invoked whenever a new instance of our MessageWidget is instantiated. Our class accepts a position parameter that would be used to determine the widget's position in the DOM. We’ve assigned a default parameter for our position argument, hence, it’s not a requirement when the class is being instantiated.

We’re also setting some properties and invoking some methods inside the constructor, we’ll be creating them later on as we move. However, here are their responsibilities:

• position - Used to save the position of the widget in the DOM.

• open - Used to toggle the state of our widget i.e Open or Closed.

• widgetContainer - HTML element for our widget.

• initialize() - Invoked to display and create the UI for our widget in the DOM.

• injectStyles() - Invoked to add the styling for our widget.

Continuing, let’s create the methods we’ve used above. To do this, copy the code snippet below and paste it below the constructor:

import { CLOSE_ICON, MESSAGE_ICON, styles } from "./assets.js";

class MessageWidget {
  constructor(position = "bottom-right") { ... }

  position = "";
  open = false;
  widgetContainer = null;

  getPosition(position) {
    const [vertical, horizontal] = position.split("-");
    return {
      [vertical]: "30px",
      [horizontal]: "30px",
    };
  }

  async initialize() {
    /**
     * Create and append a div element to the document body
     */
    const container = document.createElement("div");
    container.style.position = "fixed";
    Object.keys(this.position).forEach(
      (key) => (container.style[key] = this.position[key])
    );
    document.body.appendChild(container);

    /**
     * Create a button element and give it a class of button__container
     */
    const buttonContainer = document.createElement("button");
    buttonContainer.classList.add("button__container");

    /**
     * Create a span element for the widget icon, give it a class of `widget__icon`, and update its innerHTML property to an icon that would serve as the widget icon.
     */
    const widgetIconElement = document.createElement("span");
    widgetIconElement.innerHTML = MESSAGE_ICON;
    widgetIconElement.classList.add("widget__icon");
    this.widgetIcon = widgetIconElement;

    /**
     * Create a span element for the close icon, give it a class of `widget__icon` and `widget__hidden` which would be removed whenever the widget is closed, and update its innerHTML property to an icon that would serve as the widget icon during that state.
     */
    const closeIconElement = document.createElement("span");
    closeIconElement.innerHTML = CLOSE_ICON;
    closeIconElement.classList.add("widget__icon", "widget__hidden");
    this.closeIcon = closeIconElement;

    /**
     * Append both icons created to the button element and add a `click` event listener on the button to toggle the widget open and close.
     */
    buttonContainer.appendChild(this.widgetIcon);
    buttonContainer.appendChild(this.closeIcon);
    buttonContainer.addEventListener("click", this.toggleOpen.bind(this));

    /**
     * Create a container for the widget and add the following classes:- `widget__hidden`, `widget__container`
     */
    this.widgetContainer = document.createElement("div");
    this.widgetContainer.classList.add("widget__hidden", "widget__container");

    /**
     * Invoke the `createWidget()` method
     */
    this.createWidgetContent();

    /**
     * Append the widget's content and the button to the container
     */
    container.appendChild(this.widgetContainer);
    container.appendChild(buttonContainer);
  }

  createWidgetContent() {
    this.widgetContainer.innerHTML = `
        <header class="widget__header">
            <h3>Start a conversation</h3>
            <p>We usually respond within a few hours</p>
        </header>
        <form>
            <div class="form__field">
                <label for="name">Name</label>
                <input
                  type="text"
                  id="name"
                  name="name"
                  placeholder="Enter your name"
                />
            </div>
            <div class="form__field">
                <label for="email">Email</label>
                <input
                  type="email"
                  id="email"
                  name="email"
                  placeholder="Enter your email"
                />
            </div>
            <div class="form__field">
                <label for="subject">Subject</label>
                <input
                  type="text"
                  id="subject"
                  name="subject"
                  placeholder="Enter Message Subject"
                />
            </div>
            <div class="form__field">
                <label for="message">Message</label>
                <textarea
                  id="message"
                  name="message"
                  placeholder="Enter your message"
                  rows="6"
                ></textarea>
            </div>
            <button>Send Message</button>
        </form>
    `;
  }

  injectStyles() {
    const styleTag = document.createElement("style");
    styleTag.innerHTML = styles.replace(/^\s+|\n/gm, "");
    document.head.appendChild(styleTag);
  }

  toggleOpen() {
    this.open = !this.open;
    if (this.open) {
      this.widgetIcon.classList.add("widget__hidden");
      this.closeIcon.classList.remove("widget__hidden");
      this.widgetContainer.classList.remove("widget__hidden");
    } else {
      this.createWidgetContent();
      this.widgetIcon.classList.remove("widget__hidden");
      this.closeIcon.classList.add("widget__hidden");
      this.widgetContainer.classList.add("widget__hidden");
    }
  }
}

The code snippet adds the three methods in our class, namely:

• getPosition() - used to generate the numerical positions of the widget in the DOM

• createWidgetContent() - used to generate the HTML content for our widget

• initialize() - responsible for displaying and creating the UI for our widget in the DOM. I’ve added short comments in the body of the method to explain what’s being done in each step.

• injectStyles() - responsible for injecting the HTML stylings for the widget inside the page’s document.

Adding our styling

The next thing we are going to do is add our styling and assets to the asset.js file we created earlier. Paste in the following code inside asset.js:

export const styles = `
    .widget__container * {
        box-sizing: border-box;
    }        
    h3, p, input {
        margin: 0;
        padding: 0;
    }
    .widget__container {
        box-shadow: 0 0 18px 8px rgba(0, 0, 0, 0.1), 0 0 32px 32px rgba(0, 0, 0, 0.08);
        width: 400px;
        overflow: auto;
        right: -25px;
        bottom: 75px;
        position: absolute;
        transition: max-height .2s ease;
        font-family: Helvetica, Arial ,sans-serif;
        background-color: #e6e6e6a6;
        border-radius: 10px;
        box-sizing: border-box;
    }
    .widget__icon {
        cursor: pointer;
        width: 60%;
        position: absolute;
        top: 18px;
        left: 16px;
        transition: transform .3s ease;
    }
    .widget__hidden {
        transform: scale(0);
    }
    .button__container {
        border: none;
        background-color: #0f172a;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        cursor: pointer;
    }
    .widget__container.hidden {
        max-height: 0px;
    }
    .widget__header {
        padding: 1rem 2rem 1.5rem;
        background-color: #000;
        color: #fff;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        text-align: center;
    }
    .widget__header h3 {
        font-size: 24px;
        font-weight: 400;
        margin-bottom: 8px;
    }
    form {
        padding: 2rem 1rem 1.5rem;
    }
    form .form__field {
        margin-bottom: 1.5rem;
        display: flex;
        flex-direction: column;
    }
    .form__field label {
        margin-bottom: 8px;
        font-size: 14px;
    }
    .form__field input,
    .form__field textarea {
        border: 1px solid #000000ad;
        border-radius: 3px;
        padding: 8px 10px;
        background-color: #fff;
    }
    .form__field input {
        height: 48px;
    }
    .form__field textarea::placeholder {
        font-family: Helvetica, Arial ,sans-serif;
    }
    form button {
        height: 48px;
        border-radius: 6px;
        font-size: 18px;
        background-color: #000;
        color: #fff;
        border: 0;
        width: 100%;
        cursor: pointer;
    }
    form button:hover {
        background-color: rgba(0, 0, 0, 95%);
    }
`;

export const MESSAGE_ICON = `
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-mail">
        <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
        <polyline points="22,6 12,13 2,6"></polyline>
    </svg>
`;

export const CLOSE_ICON = `
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x">
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
    </svg>
`;

This contains the styling for our messaging widget and the icons used in the widget. We’ll need to import them inside our main.js file, and paste the code below at the beginning of our file:

import { styles, CLOSE_ICON, MESSAGE_ICON } from "./assets.js";

The last thing for us is to create a function to initialize our MessagingWidget. The function created returns a new instance of the MessagingWidget every time it’s invoked.

To do this, copy the code snippet below and paste it below the constructor.

class MessagingWidget { ... }

function initializeWidget() {
  return new MessageWidget();
}

initializeWidget();

Testing our widget

Now, save all changes and paste the code below in your terminal to start a development server:

yarn dev

Then, open the generated port in your browser and you should have the following result:

Congratulations🎉, you now have a working widget. Hmm🤔…Wait a minute, remember I mentioned at the beginning, a widget can work on any website that it’s installed, how do we now make our widget installable and available to everyone?

Connecting our widget to a CDN

We’ll need to deploy our code to GitHub or npm and then connect it to a CDN (Content Delivery Network) so that we can have a link that can be shareable anywhere in the world. That’s not all! For the widget to be installed on a website, we’ll also need to have documentation or instruction which people can follow for them to perform the installation.

In our case, we'll be deploying our code to GitHub and connecting it to JsDelivr so that we can get our code on a CDN. There are many popular CDNs out there like Cloudflare, JsDelivr, RawCDN, etc. so feel free to choose anyone you find interesting.

To deploy your code online, create a repository on GitHub and push your code there. Once your code is already on GitHub, copy the link to the Javascript file, we’ll be needing it in a bit when we’re on JsDelivr.

Now, head on to JsDelivr and paste the link in the input element labeled GitHub. A new CDN link would be generated for you which can be used to access the code for the widget anywhere in the world.

Creating an instruction for installation

Having a straightforward method for installing your widgets is one of the things that need to be covered when building one. There are many methods or processes for installing widgets on websites. It all depends on who the widget is being created for. For example, if the users of the widget are developers, then they might need to install an SDK or a library for them to get started with it. However, the majority of widgets are created for non-technical users, hence, one of the most popular methods is creating a copy-paste code block that they can copy and paste into their sites instantly.

One other advantage of using a CDN is Minification. This helps us minify our code and remove all unnecessary space and characters in it thereby reducing the overall size and improving its load time. JsDelivr helps with this if the .min suffix is added to the URL.

In our case, we can create a script tag that can be copied by anyone interested in making use of our Messaging Widget. It would look like this:

// Copy the code below and paste it into the body of your website.
<script type="module" src="https://cdn.jsdelivr.net/gh/Young-Einstein10/messaging-widget@main/main.min.js"></script>

Conclusion

In this article, we’ve learned how to build a simple messaging widget with HTML, CSS, and Javascript. We also talked about CDNs and how they can be used to make our code available to everyone across the world.

I hope you’ve found this tutorial helpful. Feel free to reach out to me via LinkedIn or Twitter if there are any questions.

You can find the complete code for the tutorial on GitHub.

Resources

• How We Reduced Support Volume by 33% Using a Web Widget, Groove Blog

• Website Widgets: What Are They and Why Do I Need Them? The Strikingly Blog

• What is a CDN? Cloudflare

• Javascript Classes, Javascript.Info

In this article, I’ll share the importance of internationalization and how to set up internationalization in a ReactJS application.

Prerequisites

This tutorial assumes the reader has the following:

1. Node installed on their local machine
2. yarn or npm installed on their local machine (npm comes pre-installed with node)
3. Basic knowledge of HTML, CSS, Javascript and React.

What is Internationalization?

Before we proceed, let’s first understand the meaning of Internationalization!

According to Wikipedia, Internationalization is the process of designing a software application so that it can be adapted to various languages and regions without engineering changes.

Basically, Internationalization is the process of making your website or applications usable by all people irrespective of the country or region they find themselves. There are so many benefits of internationalization, but here are some of my favourites:

• It helps in customer and user retention, which leads to an increase in overall customer satisfaction.
• It saves time and cost as you don’t have to develop a separate website for people in separate regions.
• It makes maintenance of the website easier.

Getting Started

For this tutorial, I’ve created a simple login page which we’ll be using to set up internationalization in our app. You can find and clone the project to your machine using this Github Link.

There are so many tools out there that can be used to set up internationalization, but we’ll be using react-18next due to its ease of setup and the vast amount of plugins that can be integrated into it.

Installing Dependencies

Let’s start by installing react-18next and a plugin in our project using the command below:

yarn add react-i18next i18next i18next-browser-languagedetector

I’ll be explaining what the plugin is for in the coming section.

Setting up react-i18next

After the installation is completed, we need to set up some configurations for react-18next before we can begin using it. For that, create a file named i18n.js in your src directory and paste the code snippet below:

// i18n.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

i18n
  .use(initReactI18next) // passes i18n down to react-i18next
  .init({
    resources: {},
    lng: "en",
    keySeparator: ".",
  });

export default i18n;

Here, we imported the i18n instance and initReactI18next from i18next and react-i18next respectively. We then went on to initialize the instance by adding other parameters needed for configuration.

Next, we need to create a new directory called locales, this directory would contain all our translations for different regions or languages that our application uses. For this tutorial, we’ll be sticking with two languages, mainly English and French. The locales directory would contain the translation files for our respective locale like so:-

Adding our locales

Paste the code snippet below into the English locale

{
    "login": {
        "heading": "Login to your account",
        "submit": "Login",
        "input": {
            "email": "Email",
            "emailPlaceholder": "Email Placeholder",
            "password": "Password",
            "passwordPlaceholder": "Password Placeholder",
            "toggle_password": "Toggle Password"
        },
        "errors": {
            "email": "Email is required",
            "password": "Password is required",
            "passwordLength": "Password length should be at least 6 characters"
        },
        "forgot_password": "Forgot Password"
    }
}

Paste the code snippet below into the French locale

{
    "login": {
        "heading": "Connectez-vous à votre compte",
        "submit": "connexion",
        "input": {
            "email": "E-mail",
            "emailPlaceholder": "Espace réservé d'e-mail",
            "password": "Mot de passe",
            "passwordPlaceholder": "Espace réservé pour le mot de passe",
            "toggle_password": "basculer le mot de passe"
        },
        "errors": {
            "email": "L'e-mail est requis",
            "password": "Mot de passe requis",
            "passwordLength": "La longueur du mot de passe doit être d'au moins 6 caractères"
        },
        "forgot_password": "Mot de passe oublié"
    }
}

The translations are represented in a key-value pair which allows us to manage the text for different parts of our app in an efficient manner. The keys would later be referenced when we want to set up dynamic translations in our components.

Now that we have the translations for our locales, we need to import them inside our i18n.js file and include it in the resources property like this:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import EN_TRANSLATION from "./locales/en/translation.json";
import FR_TRANSLATION from "./locales/fr/translation.json";

i18n
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: EN_TRANSLATION,
      },
      fr: {
        translation: FR_TRANSLATION,
      },
    },
    lng: "en",
    keySeparator: ".",
  });

export default i18n;

Now that we have our i18n.js file set up, we need to import the i18n instance we just configured in app.js so that it can get bundled during compilation. Import i18n.js below in your app.js file like this:

import {
  Center,
  ChakraProvider,
  Flex,
  Heading,
  Select,
} from "@chakra-ui/react";
import Login from "./components/login";
import "./i18n";

function App() {
  return (
    <ChakraProvider>
      <Flex
        as="nav"
        mx="5rem"
        height="80px"
        justifyContent="space-between"
        alignItems="center"
      >
        <Heading as="h4" size="md">
          Logo
        </Heading>
        <Select
          width="150px"
          defaultValue={i18n.language}
          onChange={handleSelectChange}
        >
          <option value="en">English</option>
          <option value="fr">French</option>
        </Select>
      </Flex>
      <Center height="calc(100vh - 80px)">
        <Login />
      </Center>
    </ChakraProvider>
  );
}

export default App;

Save the changes and view them in the browser.

Using the translations in our components

Now that our app works and we’ve set up react-i18next, we need to make use of the translations in our components in order for them to dynamically change to their respective locales depending on the region the user is in.

react-i18next offers us three different methods for accessing translations, namely:

1. Using the useTranslation hook
2. Using the withTranslation HOC
3. Using the Translation render prop

Using the useTranslation hook

The t function is the main function in i18next to translate content. We’ll be importing the useTranslation hook from react-i18next which allows us to destructure the t function from the hook. Add the lines of code below in our login.js file.

import React from "react";
import {
  Box,
  Flex,
  Button,
  Heading,
  FormControl,
  Input,
  FormLabel,
  FormErrorMessage,
  Link as ChakraLink,
} from "@chakra-ui/react";
import { useForm } from "react-hook-form";
import PasswordInput from "./passwordInput";
import { useTranslation } from "react-i18next";


const Login = () => {
  const { t } = useTranslation();
  const {
    handleSubmit,
    register,
    formState: { errors, isSubmitting },
  } = useForm();

  const onSubmit = (values) => {
    return new Promise((resolve) => {
      setTimeout(() => {
        alert(JSON.stringify(values, null, 2));
        resolve();
      }, 3000);
    });
  };

  return (
    <Box maxW="400px" w="full">
      <Heading
        fontWeight={700}
        fontSize="24px"
        fontFamily="Source Sans Pro"
        mb={10}
        textAlign="center"
      >
        {t("login.heading")}
      </Heading>
      <form onSubmit={handleSubmit(onSubmit)}>
        <Box p={4}>
          <FormControl mb={6} isInvalid={errors.email}>
            <FormLabel htmlFor="email" color="#100B05" fontSize="14px">
              {t("login.input.email")}
            </FormLabel>
            <Input
              id="email"
              type="email"
              placeholder={t("login.input.emailPlaceholder")}
              {...register("email", {
                required: t("login.errors.email"),
              })}
              isRequired
            />
            <FormErrorMessage>
              {errors.email && errors.email.message}
            </FormErrorMessage>
          </FormControl>
          <FormControl mb={2} isInvalid={errors.password}>
            <FormLabel htmlFor="password" color="#100B05" fontSize="14px">
              {t("login.input.password")}
            </FormLabel>
            <PasswordInput register={register} />
            <FormErrorMessage>
              {errors.password && errors.password.message}
            </FormErrorMessage>
          </FormControl>
          <Flex justify="flex-end">
            <ChakraLink color="brand" fontSize="sm">
              {t("login.forgot_password")}
            </ChakraLink>
          </Flex>
          <Button
            mt={10}
            type="submit"
            colorScheme="teal"
            w="full"
            isLoading={isSubmitting}
          >
            {t("login.submit")}
          </Button>
        </Box>
      </form>
    </Box>
  );
};

export default Login;

Using the withTranslation HOC

react-i18next also offers a HOC that can be used for situations where the hook isn’t the preferred style. Add the code below in our passwordInput.js file.

import React from "react";
import {
  Input,
  InputGroup,
  IconButton,
  InputRightElement,
  useDisclosure,
} from "@chakra-ui/react";
import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons";
import { withTranslation } from "react-i18next";

const PasswordInput = ({ register, t }) => {
  const { isOpen, onToggle } = useDisclosure();
  return (
    <InputGroup>
      <Input
        id="password"
        type={isOpen ? "text" : "password"}
        placeholder={t("login.input.passwordPlaceholder")}
        {...register("password", {
          required: t("login.errors.password"),
          minLength: {
            value: 6,
            message: t("login.errors.passwordLength"),
          },
        })}
        isRequired
      />
      <InputRightElement h="full">
        <IconButton
          bg="none"
          width="32px"
          onClick={onToggle}
          height="40px"
          aria-label={t("login.input.toggle_password")}
          icon={
            isOpen ? (
              <ViewIcon size={18} color="#B8B8B8" />
            ) : (
              <ViewOffIcon size={18} color="#B8B8B8" />
            )
          }
          _hover={{
            bg: "none",
          }}
          _active={{
            bg: "none",
          }}
        />
      </InputRightElement>
    </InputGroup>
  );
};

export default withTranslation()(PasswordInput);

Save the changes and check the result in the browser.

Language Switcher

Now, we’ll notice when we change the language in the select dropdown nothing happens, that’s because we need to create a handleChangeLanguage function that handles changing the user language whenever the language is changed. Add the function below to our i18n.js file

export const handleChangeLanguage = async (language = "en") => {
  await i18n.changeLanguage(
    language,
    console.log("Language Changed to: " + language)
  );
};

Next, import the function in app.js, then add it to the onChange handler for the select component used in changing the language. We’ll also need to import the i18n.js instance in order for us to access the current language and use it as a default value for the dropdown.

import {
  Center,
  ChakraProvider,
  Flex,
  Heading,
  Select,
} from "@chakra-ui/react";
import Login from "./components/login";
import i18n, { handleChangeLanguage } from "./i18n";
import "./i18n";

function App() {
  const handleSelectChange = (event) =>
    handleChangeLanguage(event.target.value);

  return (
    <ChakraProvider>
      <Flex
        as="nav"
        mx="5rem"
        height="80px"
        justifyContent="space-between"
        alignItems="center"
      >
        <Heading as="h4" size="md">
          Logo
        </Heading>
        <Select
          width="150px"
          defaultValue={i18n.language}
          onChange={handleSelectChange}
        >
          <option value="en">English</option>
          <option value="fr">French</option>
        </Select>
      </Flex>
      <Center height="calc(100vh - 80px)">
        <Login />
      </Center>
    </ChakraProvider>
  );
}

export default App;

Now, when you save the changes and change the language in the browser, we’ll notice the language changes as expected.

Plugins

One other cool feature react-i18next offers is the use of different plugins that can be added to the i18n instance during initialization. One popular plugin is the i18next-browser-languagedetector which can be used to automatically detect the language of the user based on the browser’s locale. In this case, we don’t have to hardcode the language to the English locale all the time, we can make it dynamic so that the user’s locale is selected when needed. For us to add this plugin to the i18n instance, we’ll need to import it below and also make some changes to our configurations:

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import EN_TRANSLATION from "./locales/en/translation.json";
import FR_TRANSLATION from "./locales/fr/translation.json";
import LanguageDetector from "i18next-browser-languagedetector";

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    resources: {
      en: {
        translation: EN_TRANSLATION,
      },
      fr: {
        translation: FR_TRANSLATION,
      },
    },
    fallbackLng: "en",
    keySeparator: ".",
  });

export const handleChangeLanguage = async (language = "en") => {
  await i18n.changeLanguage(
    language,
    console.log("Language Changed to: " + language)
  );
};

export default i18n;

We used the Language-Detector plugin and also changed the lng property to fallbackLng. This is because we’re no longer hardcoding our locale to en, instead, we want to use it as a fallback language should in case translations are unavailable for the locale selected. The Language-Detector plugin also helps us with persisting the selected locale in Local Storage so we don’t have to go through the process of changing locales again the next time we use the app.

Now save the changes and view the result in the browser, we’ll notice our app still works as expected. Also, when we change the language and refresh the app we notice the language stays the same.

Conclusion

In this article, I explained the benefits of setting up Internationalization in your applications and how you can go about setting up react-i18next in your react projects. I hope you found this guide helpful and that you would be able to set up internationalization easily in your applications moving forward. You can find the complete code for the tutorial on GitHub.

Feel free to reach out to me via LinkedIn or Twitter if there are any questions.

Resources

• Internationalization and Localization, Wikipedia
• A react-i18next guide, Locize Blog
• react-i18next Documentation, react-i18next
• i18next API Overview, i18next
• How to Internationalize a React App, Shahed Nasser

In this tutorial, I will be explaining how I extended the Select Component and how you could add other properties to it if needed.

Prerequisites

Ensure you have the following catered for before going on with this tutorial in order to have a seamless experience going forward:

• A Text Editor or IDE e.g VS Code
• Basic knowledge of React (we’ll be using Typescript)

Step 1: Setting Up our React Project

I have created a starter project on CodeSandbox in order for us to focus on the actual implementation of the Select Component. You can find it here.

We’ll be making use of styled-components for our styling as it makes writing styles that are scoped to a component very easy. You can read more about styled-components in their docs.

Step 2: Creating our CustomSelect File within the project.

Create a new file called CustomSelect.tsx in our project folder like so:

This file would contain our implementation logic for how the Select Component would work with prefix icons. Now, let’s update the file we just created with the following code:

import React, { ReactNode } from "react";
import { Select, SelectProps } from "antd";
import styled from "styled-components";

type CustomSelectProps = SelectProps & {
  prefixIcon?: ReactNode;
};

const SelectWrapper = styled.div`
  position: relative;
`;

const CustomSelect = ({ prefixIcon, children, ...rest }: CustomSelectProps) => {
  return (
    <SelectWrapper>
      {prefixIcon && <div className="prefix-icon-wrapper">{prefixIcon}</div>}
      <Select {...rest}>{children}</Select>
    </SelectWrapper>
  );
};

export default CustomSelect;

We added a styled wrapper around our default Select Component which is imported from Antd Design, then we created a condition that displays our prefix icon depending on whether it's passed down as props to the CustomSelect component.

We also created a custom type CustomSelectProps which is made up of type SelectProps from Antd Design and our prefix icon which is being added. Our prefix icon is of type ReactNode which would enable us to pass down any value that’s a ReactNode as our icon.

Now, update the Select Component in our App.tsx file like so using our newly created CustomSelect component:

Step 3: Adding a Prefix Icon to our Component.

Pass any icon of your choice as props to the Select Component so we can have a look at how it’s being displayed currently. I’ll be adding the UserOutlined icon from @ant-design/icons like so:

Currently, our icon is displayed above the Select Component which isn’t what we want. We’ll fix it by adding the appropriate styles in our CustomSelect.tsx we created. Update our SelectWrapper styles as shown below:

const SelectWrapper = styled.div`
  position: relative;

  .prefix-icon-wrapper {
    position: absolute;
    z-index: 1;
    width: 3rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

 && .ant-select .ant-select-selector {
    padding-left: calc(3rem - 8px);
  }
`;

We’re positioning our prefix icon using the prefix-icon-wrapper we gave its wrapper, this would enable any icon added to the Select component to be properly aligned in our Component. Also, we subtracted the left-padding value of the Select Component from the width of our icon, this would enable the spacing between the Icon and the Select Component to be properly distributed.

Our CustomSelect component is now ready for use 😎.

Conclusion

In this tutorial, we learned how we can Customize Antd Design Select Component by extending its props and allowing any kind of icon to be added to it as a Prefix Icon.

Resources

• Ant Design Select
• Ant Design Icons

Prerequisites

In order to have a seamless experience while following this article, ensure you have the following catered for:

• Basic knowledge of Javascript
• A Text Editor e.g VS Code
• Node installed on your machine
• Basic Knowledge of using the terminal
• Yarn Installed (optional)

What is Typescript?

TypeScript is a programming language created and maintained by Microsoft. It is a strict syntactical superset of Javascript and adds optional static typing and true Object-Oriented Programming (OOP) capabilities to the language. If you're familiar with other programming languages like C# or Java, it is impossible to declare a variable without stating the datatype it would hold. So, Typescript enables us to replicate this feature in Javascript in order to reduce runtime errors or bugs which developers face while coding. It also increases developer productivity. Since TypeScript is a superset of JavaScript, existing JavaScript programs are also valid TypeScript programs. Also, few people also consider Typescript as Javascript with superpowers😎.

Benefits of Using Typescript

• Statically Typed System: Javascript is a dynamically typed language, hence it has no support for using and creating types during development. Developers can easily make an error like missing a letter in a function/variable, referencing an undeclared function/variable etc. But with Typescript, we can create a typed system that will enforce the type and properties for any given variables, functions, or object that's declared which in turn enables the developer to create more robust and scalable code.
• Code Readability: Code written in Typescript is very easy to read due to the types which have been created for it. Anyone can easily understand the developer's intent who originally wrote the code as most code blocks are self-explanatory.
• Browser Compatibility: Typescript is transpiled to Javascript that is compatible on all browsers. Developers also have the option of choosing what version of javascript they would like their code to be transpiled to among the ES Versions of Javascript.
• Code Completion and Intellisense: Using Typescript enables developers to enjoy code auto-completion and suggestion while coding which speeds up development thereby increasing productivity gains.
• Discipline: Developers who code in Typescript are disciplined because it forces them to fix any bugs they run into during the course of development. Also, the types which are created act as preventive measures that will help the developer enforce the expected properties or parameters for an object or function created.

Setting up a Typescript Development Environment

Typescript can be installed on a local machine using either of the following commands:

npm install -g typescript

or

yarn global add typescript

This would install Typescript globally on our machine. Once the installation is completed, we now have access to the tsc command. The tsc command stands for Typescript Compiler which we would be using for most of our operations with Typescript. You can confirm if the installation was successful by using the command:

tsc -v

You should get a version number outputted after entering that command in your terminal.

Now, create a folder called ts-intro then create a file called app.ts within it. Typescript files are usually identified with a .ts extension. Paste the following code in our app.ts file:

console.log("Hello World");

Then run the Typescript compiler in order to compile our code to Javascript:

tsc app.ts

You should find a new file app.js created automatically in your project root. That's the javascript file which our Typescript code was compiled into.

Now, imagine we have more than one Typescript file within our project, running the tsc command for each one of them would be counter-productive, we need a more efficient method for compiling all our Typescript file. We can achieve that using the tsconfig.json file that would be created in our project root. Run the command below to do that:

tsc --init

A new file named tsconfig.json should be in your project root after running that command. This file is very similar to what our package.json file does in most projects. It contains the rules and configurations Typescript will be needing in order to work seamlessly on our machine.

Looking at our newly created tsconfig.json file, we would find a considerable amount of configurations which we need not worry ourselves about now. The only thing we might need to change is our target option. This tells us what version of javascript our Typescript code would be compiled into. The default selected option is ES5, we can change it to ES6 if we would like our javascript code to use the latest features of javascript or any other version we wish to use. Also, comments have been created alongside each property to tell us what they are for.

{
  "compilerOptions": {
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "strict": true,                           /* Enable all strict type-checking options. */
    "esModuleInterop": true,                  /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. */
    "skipLibCheck": true,                     /* Skip type checking of declaration files. */
    "forceConsistentCasingInFileNames": true  /* Disallow inconsistently-cased references to the same file. */
  }
}

So, create another file called main.ts and paste in the following code:

const user = {
  firstName: "Brian",
  lastName: "Smith",
  role: "Doctor"
}

console.log(`Hello ${user.role} ${user.firstName} ${user.lastName}`)

Running our tsc command would compile all files ending with the Typescript extension in our project root. A new file called main.js would be created. If we inspect it, you'll notice we have javascript code that's in ES5 version.

"use strict";
var user = {
    firstName: "Brian",
    lastName: "Smith",
    role: "Doctor"
};
console.log("Hello " + user.role + " " + user.firstName + " " + user.lastName);

Now, we can use the tsc command to compile any Typescript file we have in our project.

Conclusion

In this article, we learnt what Typescript is, the benefits of Typescript in today's world, and how to set it up in your development environment. This article is just an introduction to Typescript, there's still so much about Typescript we obviously can't discuss in a single post. I hope this article has convinced you why you might need Typescript in that next project you plan to work on. In my upcoming post, I would be showing you how you can convert a project originally built with Javascript to Typescript.

Resources

• What is Typescript?
• Typescript (docs)
• Benefits of Using Typescript
• Javascript vs. Typescript