Use yarn to install and manage a package globally, available across all the projects on your machine

An alternative to NPM --global option

With the advent of NPM (Node Package Manager), each project maintains dependencies in its own node_modules. However, we install a few packages, tools, and utilities at the global level. These packages are available across projects and directories. In an example, it is appropriate to install the following tools and utilities at the global level — Angular CLI, create-react-app, http-server, json-server, etc.

The npm install command with --global option copies packages to a global directory. However, Yarn is “arguably” better than NPM for its speed and security. This article details using Yarn to install tools or packages at the global level.

Learn React basics in a fun a way with the Roll Dice sample application

A beginner tutorial on React

Figure-1: Roll dice, sample app built in React

React is a popular JavaScript library for UI (user interface). It is an open-source project driven by Facebook. It is component-based, declarative and hence better suits building user interfaces for web and mobile.

Here, I have a small React application that rolls dice. The page shows two options to roll one or two dice. A dice has six sides. The React component generates a random number between 1 and 6 for each dice. If you are playing a board game, feel free to open this page on a phone or an iPad (or even a desktop) and roll the dice.

Use Google Chrome’s Snippets to save time and organize scripts. Read through to find out how the feature is useful while debugging web applications.

Debug like a pro with Google Chrome

While debugging web applications, we often run scripts in Google Chrome console. It is a very useful tool that not only provides access to variables, but also allows updating a page, set a value in the session storage / local storage etc.

I often come across a situation where I’m debugging 7th or 8th screen in the application, and I can’t directly launch it without setting context. Hence, use the Chrome Dev Tools to run few statements and set the needed context. However, it’s easy to lose this script. …

Short and crisp! 👏🏼

Here is another way to get characters out of a string (and get the result as an array)

Object.values('this is a test')

In case we need to remove one or more spaces

Object.values('this is a test'.trim()).filter( s => s !== " ")


(11) ["t", "h", "i", "s", "i", "s", "a", "t", "e", "s", "t"]

Nice way to have fun with JavaScript 😄

I came across a reliable, crowdsourced COVID-19 data for India. Wanted to take a shot at visualizing it. Built a webpage with Angular and ng2-charts library. Chose bubble chart for the visualization; Tried making it interactive and yet mobile friendly. Following is a quick insight at my weekend project.

Angular based Bubble Chart for Corona Virus data

The webpage visualizes state level COVID-19 data. Follow this link to play with the application. The webpage uses services provided by Covid-19 India Org, a crowdsourced, volunteer organization. A big shoutout and thank you It’s amazing what they have been able to accomplish with volunteers. Data is very detailed, accurate and updated regularly.

The chart showcases data for all the states and union territories in India. Just so that I don’t increase load on their servers, I’m caching JSON in browsers’ session storage. …

Good and bad with Hot Module Replacement in Angular 11.x

Hot Module Replacement speeds up development and debugging. It is a Webpack feature that updates changed modules without reloading the whole page. Angular 11 made it easy to use HMR by providing it out-of-box in the CLI.

While developing and debugging front-end applications, quite often we edit component styles, HTML template, labels, text etc. In Angular, we are used to file watcher, which automatically refreshes the page for each save. It is a step-up from traditional tools but we lose context. We might have to repeat few steps to reach the screen in works.

HMR is a bit of magic. The Webpack Dev Server feature adds/removes modules while the application is running. It allows selectively updating parts of the screen changed by the developer, without losing state / reloading the whole page.

While it’s possible to configure…

Private Members in JavaScript

This article begins by introducing a stage 3 feature in JavaScript to create private fields, getter, setters and functions. It compares with a similar feature in TypeScript. Later, it lists browser compatibility. And at the end, describes TC39 process, an explanation on stages 0 to 4.

Traditional languages like Java, C# use access modifiers to control access to a field or a method. Public fields can be accessed on a class instance outside the class; Private fields only within a class.

ES6 / ES2015 introduced classes in JavaScript. It is an encapsulation of data (fields) and behavior (functions). With a…

Identify and fix clumsy user experience with jumpy buttons, text, and other controls on a web page.

Have you ever been to a website that’s jumpy? Just about to click a button, it moved. Were reading a post, lost your place as the content moved around. Found a good pair of sneakers, bout to select, but it moved down and you clicked sandals you never cared about!

Figure-2: Reference, Web Dev documentation on CLS.

Unstable elements on web pages affect user experience negatively. During development, it is difficult to identify, track, and fix instability on web pages. The problem may not occur as most resources are cached on development and test engineers’ machines.

CLS (Cumulative Layout Shifts) is a data point to measure visual…

A review of the new ES 2020/ES 11 feature

Image — vencki-vista

Back in the day, RequireJS was a popular library that provided module system in JavaScript. It was an implementation of AMD (Asynchronous Module Definition). The library helped with organization of code and managed dependencies. It allowed defining and importing modules (either upfront or conditionally, on need basis). As JavaScript evolved, with ES 6 (also called ES 2015) native support for the modules was added to the language. Initially, support was only for static import, which need to be evaluated pre-runtime.

Many of us have used ES 6 import statements, which are placed on top of the file. All the imports…

Image by Vencki Vista

The prior article on Memoization in JavaScript discusses caching results of a long running JavaScript function. Majority of the functions that run in a browser finish fairly quickly, return in milliseconds. That begs the question, what are the real-world use cases for memoization in JavaScript? This article describes one such use case.

In Redux, store maintains the application state. Structuring the store is a critical aspect of designing the front-end application (involving Redux). It can be difficult, considering the NgRx store can be large. It maintains state of multiple features in an application. Of course, the application has many components…

Keerti Kotaru

Author . Consultant .

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store