DEV Community: Mahdi Falamarzi

Exploring the Base64 Encoding and Decoding Functions in JavaScript: btoa() and atob()

Mahdi Falamarzi — Thu, 13 Jul 2023 04:15:07 +0000

Introduction:
In JavaScript, the btoa() and atob() global functions are essential tools for handling Base64 encoding and decoding. The btoa() function allows you to create a Base64-encoded ASCII string from a binary string, treating each character as a byte of binary data. On the other hand, the atob() function decodes a Base64-encoded string back into its original form. This article delves into the syntax, usage, and examples of these functions, emphasizing their significance in JavaScript development.

Encoding with btoa():
The btoa() method enables the conversion of a binary string into a Base64-encoded ASCII string. It is particularly useful for encoding data that may encounter communication problems during transmission. By employing the btoa() function, you can encode various types of information, including control characters represented by ASCII values ranging from 0 to 31.

Decoding with atob():
The atob() function acts as the counterpart to btoa(), allowing you to decode a Base64-encoded string back into its original binary representation. By utilizing atob(), you can reliably retrieve encoded data and restore it to its original form.

Example Usage:
Let's explore an example to illustrate the usage of btoa() and atob() functions in JavaScript:

const encodedData = btoa("Hello, world"); // 'SGVsbG8sIHdvcmxk'
const decodedData = atob(encodedData); // "Hello, world"

In the above code snippet, we start by utilizing the btoa() function to encode the string "Hello, world." The resulting Base64-encoded data is stored in the variable encodedData. Subsequently, we employ the atob() function to decode the encodedData, and the original string "Hello, world" is obtained and stored in the decodedData variable.

Conclusion:
The btoa() and atob() global functions in JavaScript are invaluable tools for handling Base64 encoding and decoding. With btoa(), you can encode binary strings into Base64-encoded ASCII strings, while atob() allows for the reverse process of decoding Base64-encoded strings back to their original form. Understanding and utilizing these functions empower front-end developers to work with encoded data, enabling reliable transmission and retrieval of information. Be mindful of the limitations when working with Unicode strings, and refer to appropriate resources to address such scenarios effectively.

How to render conditional items in React?

Mahdi Falamarzi — Thu, 06 Jul 2023 03:55:25 +0000

Comparing Three Approaches to Render conditional items in React

When it comes to rendering conditional in a React, there are multiple approaches you can take. In this article, we will explore three different methods and identify the best approach among them. Suppose we have an array of objects and want to condition render items in three ways.

const data = [
  {
    id: 1,
    name: "john",
  },
  {
    id: 2,
    name: "jack",
  },
  {
    id: 3,
    name: "mike",
  },
  {
    id: 4,
    name: "stephen",
  },
];

if else Statements
In the first approach, items are rendered using a series of conditional statements. Each item in the data array is checked for a specific name and mapped to its corresponding emoji. While this method works, it can become hard to maintain and extend as the number of name and conditions increase.

const result = data.map((item) => {
  if (item.name === "john") {
    return "😀";
  } else if (item.name === "jack") {
    return "🕵️‍";
  } else if (item.name === "mike") {
    return "🤶";
  } else if (item.name === "stephen") {
    return "🎅";
  }
});

Switch Statements
The second approach utilizes a switch statement to map names to emojis. This method provides a cleaner and more readable syntax compared to the first approach. Switch statements are especially useful when there are multiple cases to handle. However, as the number of emojis grows, the switch statement can become lengthy and harder to manage.

const result = data.map((item) => {
  switch (item.name) {
    case "john":
      return "😀";
    case "jack":
      return "🕵️‍";
    case "mike":
      return "🤶";
    case "stephen":
      return "🎅";
  }
});

Object Mapping
The third and best approach involves creating an object mapping the names to emojis. Each name is associated with its respective emoji in the nameMap object. This approach is concise, scalable, and easy to maintain. By utilizing the object mapping technique, we eliminate the need for lengthy conditional or switch statements, resulting in cleaner code.

const nameMap = {
  john: "😀",
  jack: "🕵️‍",
  mike: "🤶",
  stephen: "🎅",
};

const result = data.map((item) => nameMap[item.name]);

The benefits of the third approach include:

Simplicity: The code is cleaner and easier to read, understand, and maintain.
Scalability: Adding or modifying emojis is straightforward as we only need to update the nameMap object.
Performance: Object lookups in JavaScript are generally faster compared to multiple conditionals or switch statements.

The nameMap object provides a direct mapping between names and emojis, allowing for efficient retrieval of emojis based on the item's name. This approach promotes code reusability and enhances the overall maintainability of the component.

In conclusion, the third approach, utilizing object mapping, is the recommended method for rendering emojis in React components. It offers simplicity, scalability, and improved performance compared to conditional statements and switch statements. By adopting this approach, developers can write clean, maintainable code that efficiently handles emoji rendering in their applications.

How to detect an active internet connection in JavaScript apps?

Mahdi Falamarzi — Wed, 28 Jun 2023 17:51:09 +0000

Introduction
In today's interconnected world, understanding and adapting to the network connectivity status of web browsers are vital for delivering optimal user experiences. This article explores two key features that facilitate this process: the property Navigator.onLine and Network Information API. By leveraging these capabilities, web developers can make informed decisions, dynamically adjust content delivery, and provide real-time feedback to users based on their network connectivity.

Navigator.onLine Property: Checking Browser Connectivity
The Navigator.onLine property serves as a convenient method to determine the online status of a web browser. This property returns a boolean value, where true indicates that the browser is online, and false indicates that it is offline. Updates to the onLine property occur whenever the browser's ability to connect to the network changes. For instance, if a user follows links or a script requests a remote page, the onLine property will accurately reflect the corresponding status.
It's important to note that different browsers may implement this property differently, resulting in varying behavior and potential false positives or false negatives.

Network Information API: Enhanced Connectivity Insights

Check mdn web docs for browser compatibility

To gain deeper insights into the user's network connection, developers can utilize the Network Information API in conjunction with the onLine property. The Network Information API provides information about the system's connection, including general connection types such as 'wifi', 'cellular', and more. Accessing this API through the Navigator.connection property allows developers to obtain detailed information about the connection type and tailor their applications accordingly.
For instance, by combining the onLine property with the Network Information API, developers can dynamically adjust content delivery based on the user's connection capabilities. They can selectively preload resources for faster connections, deliver low-definition content for slower connections, or provide offline-friendly interfaces when the browser is offline.

Listening for Network State Changes
In addition to retrieving the current online status, developers can monitor changes in the network state by listening to the online and offline events. These events are triggered when the browser's connectivity status changes. By subscribing to these events, developers can execute specific actions or update the user interface based on the browser's online or offline status.

Implementing Real-Time Network State Updates

// Check you are online or not
if (navigator.onLine) {
  console.log("online");
} else {
  console.log("offline");
}

// To see changes in the network state, use addEventListener
window.addEventListener("offline", (e) => {
  console.log("offline");
});

window.addEventListener("online", (e) => {
  console.log("online");
});

If you have a React app you can use this hook.

navigator.connection maybe does not work on your browser check mdn web docs for browser compatibility

import { useEffect, useState } from "react";

const useNetworkInformation = () => {
  const [networkState, setNetworkState] = useState({
    isOnline: navigator.onLine,
    effectiveType: "",
    downlink: 0,
    rtt: 0,
  });

  useEffect(() => {
    const updateNetState = () => {
      const connection = navigator.connection;
      if (connection) {
        setNetworkState({
          isOnline: navigator.onLine,
          effectiveType: connection.effectiveType,
          downlink: connection.downlink,
          rtt: connection.rtt,
        });
      }
    };
    window.addEventListener("load", updateNetState);
    window.addEventListener("online", updateNetState);
    window.addEventListener("offline", updateNetState);

    return () => {
      window.removeEventListener("load", updateNetState);
      window.removeEventListener("online", updateNetState);
      window.removeEventListener("offline", updateNetState);
    };
  }, []);

  return networkState;
};

export default useNetworkInformation;

Conclusion
Understanding and adapting to the network connectivity status of web browsers are paramount for delivering optimal user experiences. The Navigator.onLine property provides a straightforward approach to determine the browser's online or offline status, although careful consideration is required due to browser-specific behaviors. To gain deeper insights and tailor content delivery based on connection types, developers can leverage the Network Information API through the Navigator.connection property. By combining these features and listening for network state changes, developers can create dynamic and responsive applications that provide an exceptional browsing experience across diverse network environments.

How to read CSV files in the typescript react app?

Mahdi Falamarzi — Tue, 19 Jul 2022 05:35:30 +0000

A comma-separated values (CSV) file is a delimited text file that uses a comma to separate values. Each line of the file is a data record. Each record consists of one or more fields, separated by commas. The use of the comma as a field separator is the source of the name for this file format. A CSV file typically stores tabular data (numbers and text) in plain text, in which case each line will have the same number of fields. Wiki
In this article, we want to read a CSV file in react application and for this, we use Papa Parse package. Papa Parse is the fastest in-browser CSV (or delimited text) parser for JavaScript.
Let's div in. First, we should install the package.



npm install papaparse

while this project is created with typescript we should install the typescript package.



npm install @types/papaparse –-save-dev

One important thing about the CSV files in react app that is the CSV file should be copied to the public directory.

Then we must import Papa Parse.



import Papa, { ParseResult } from "papaparse"

ParseResult is papaparse type for result.
Then we define type of data.



type Data = {
  name: string
  family: string
  email: string
  date: string
  job: string
}

type Values = {
  data: Data[]
}

after that, we create the state.



const [values, setValues] = React.useState<Values | undefined>()

and create a function for getting csv file with Papa Parse package.



const getCSV = () => {
    Papa.parse("/file.csv", {
      header: true,
      download: true,
      skipEmptyLines: true,
      delimiter: ",",
      complete: (results: ParseResult<Data>) => {
        setValues(results)
      },
    })
  }

and put it in useEffect hook.



 React.useEffect(() => {
    getCSV()
  }, [])

That’s it. But for re-usability and separation of concerns reasons, we can create a custom hook.

conclusion

Reading and importing CSV files into the application is a challenge. In this article, we use Papa Parse. This is a great package for importing, reading, etc... CSV files in js applications. For more information about this package see the blog Papa Parse.

How to iterate through objects in javascript?

Mahdi Falamarzi — Wed, 23 Feb 2022 12:31:18 +0000

Iterables
It's a kind of new mechanism to iterate or traverse through data structures.
As you know Arrays, String, Maps and Sets or other similar collections are already iterable (it means we can use for of loop to iterate them) but objects are not.

when running the below code we had an error that
TypeError: obj is not iterable

How to create an iterator?
The "[Symbol.iterator]" method must be implemented which should return an iterator object that should have a next() method that returns the object.

How to create an iterator with generator function?
In this example, we implement "[Symbol.iterator]" with generator function!

Conclusion
Although you can iterate through an object with "for in" or "Object.entries", "Object.keys" and "Object.values" (convert to array and iterate on them) but in this article, we introduce a new way to iterate objects with "[Symbol.iterate]" and function generator.

Prettier vs ESLint

Mahdi Falamarzi — Mon, 17 Jan 2022 16:17:34 +0000

Prettier

Prettier is an opinionated code formatter with support for many languages such as Javascript and many other languages.
In fact, this tool removes all original styling and ensures that all outputted code conforms to a consistent style. Prettier takes your code and reprints it from scratch by taking the line length into account.

Suppose you have a function that receives 4 arguments.

You agree, it is not very attractive if you are lucky like me and uses this tool, the code will be much more beautiful

This tool has a configuration file in which the entire code profile is customizable.

Why should every developer use Prettier?
- Building and enforcing a style guide
- Helping Newcomers
- Writing code
- Easy to adopt
- Clean up an existing codebase
- Ride the hype train
- Supports many languages
- Integrates with most editors

ESLint

But the hand ESLint is a static code analysis tool for identifying problematic patterns found in JavaScript code. It was created by Nicholas C. Zakas in 2013. Rules in ESLint are configurable, and customized rules can be defined and loaded. ESLint covers both code quality and coding style issues. ESLint supports current standards of ECMAScript and experimental syntax from drafts for future standards. Code using JSX or TypeScript can also be processed when a plugin or transpiler is used. in another word ESLint Find and fixes problems in your JavaScript/Typescript code.
The above description is taken from Wikipedia, which clearly explains the work of ESLint. ESLint requires Node.js and works on Windows, Mac and Linux.

Conclusion
Prettier is a style code formatter that support many languages but ESLint is a tool that finds javascript/typescript issue and gives some special hint to solve them.