AI Generated
1

Understanding the difference between the ?? (nullish coalescing) operator and the || (logical OR) operator in JavaScript

Introduction: In JavaScript, there are multiple ways to handle default or fallback values when working with variables or expressions. Two commonly used operators for this purpose are the ?? (nullish coalescing) operator and the || (logical OR) operator. Although they may seem similar at first glance, there are key differences …

Front-End

What is the best module system for a React component library?

JavaScript module system has been evolving as the language and technology evolves. There are a few different modules systems you can choose when you are bundling a JS library. The best module system for a frontend component library is ESM. It stands for ES Modules. It is It is the …

Node.js

Data Provider Pattern with Jest

Jest has the for method that enables us to do a data provider pattern. for works on both describe and it. It is better to use it in describe so that the assertion messages in it can be dynamically generated.

Node.js

How to Avoid Async Try-Catch Hell

This post is based on this excellent short youtube video.. Let’s see async try-catch hell. If we do try-catch on every single async function, it creates a tower of terror. Welcome to try-catch hell. async function towerOfTerror() { let a; let b; let c; try { a = await step1(); …

Front-End

Quickest Way to Add Eslint to JavaScript and TypeScript Projects

The quickest way to add eslint to your project is using eslint init command. ./node_modules/.bin/eslint –init will create eslintrc.js and install dependencies automatically. (1) Getting started for JavaScript Application It is super simple. Just install eslint, use eslint tool with a init flag and follow the command line instruction. npm …

Front-End

Executing Web Skimmers Inside CSS and SVG files

A web skimmer is a piece of malicious JS code embedded in web payment pages to skim customer’s payment information. There are a few tricks to embed malicious scripts. In this post, we’ll discuss how it can be done in CSS file and SVG file as well as what works …

Front-End

Dispatching Custom Events for Front End Analytics Application

When we have a web analytics application that collects front end event data such as Tealium, Adobe Analytics and so on, we can dispatch an custom event whenever user does action on the page. For example, we can dispatch a custom event to indicate the user clicked certain button on …

Node.js

JavaScript Workout

I made a JavaScript workout with a md file in my GitHub repo. Check out the work out here. The idea of this is to list a short JavaScript programming questions that you would encounter every day as a JavaScript developer. If you know how to do these, you don’t …

Front-End

What is ‘this’ referencing to in JavaScript?

The JavaScript this keyword refers to all the objects that exist in the function’s call-site.   A call-site of a function is the location where the function is called. When a function’s call-site is inside an object, this refers to the object where the function belongs to. When a function’s call-site …

Front-End

Why Istanbul Is Not Working After Cloning A Repo

I got a new laptop. I installed the latest Node.js and cloned a repo to keep continuing with my React project. I ran npm i to install all dependencies. The app started fine and built fine. However, when I ran npm test, the test was not running. My test script …