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.
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.
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"]
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 Covid19India.org. 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. …
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…
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.
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!
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.
Many of us have used ES 6 import statements, which are placed on top of the file. All the imports…
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…