Reducing code complexity with IoC

Photo by Patrick Tomasso on Unsplash

Inversion of control (IoC)

If you have heard of dependency injection you have been using inversion of control but maybe not knowingly.
IoC is often seems used interchangeably with DI but IoC as a concept is much more than that.

IoC is a design principle that helps you in reducing the complexity of code that you may want to ship as a reusable component or a library.
DI is one of the patterns that help in implementing IoC.


Questions from the recent interview experience

You are given the root of a binary tree & a reference node’s value. You have to list all the nodes that are below K levels from the reference node.

Sample 1

Input: Root Node Address (7), Reference Node Value: 6, K=1
Output: 4

Sample 2

Input: Root Node Address (7), Reference Node Value: 6, K=2
Output: 4, 5

Sample 3

Input: Root Node Address (7), Reference Node Value: 3, K=3
Output: 1, 6, 0, 2, 4, 5

Design a browser

This can be a tricky question if we don’t negotiate the scope well. …


Web Analytics is going to change with the introduction of client hints over Accept-CH headers, are you prepared?

Photo by chris panas on Unsplash

I think before looking at what are client hints, we should focus on why all of a sudden this feature is getting attraction.

Google recently announced that they plan to reduce the amount of information passed as a user-agent string in the request headers from the browser. Also, the proposal states a fact that access to the navigator’s user-agent property will be restricted.

This change is brought in to restrict the amount of data about the user that is exposed to the web tracking solutions. …


Opinions vs Facts, what is shown to us & how it is impacting us

Photo by Nijwam Swargiary on Unsplash

Before I share my experience with what the news was doing to me & my emotional behavior let me give you my background.

I am an extrovert by nature & love talking to people face to face, though I hate meetings over the network. I like solving problems through white-boarding & believe in interpersonal chats over emails.

This should give you an idea that how much I would hate the lockdown & quarantine days.

When COVID-19 & the lockdown stuck all of us, I was very…


Let us implement an app composing MFEs built in React & Angular

Photo by Jorge Salvador on Unsplash

Before getting into code lets take a look at what problem we are trying to solve with Micro Frontends.

We have seen the paradigm shift of how we organize code & ourselves in the past.


A quick guide to writing PWA using the building blocks

Photo by Marc Sendra Martorell on Unsplash

In this article let us focus on building a PWA feature by feature looking at the code we need to write in plain JavaScript.

Note: Please refer to https://developers.google.com/web/progressive-web-apps to get a good understanding of what PWA is.

I have added the code samples below from a PWA starter guide hosted here: https://github.com/gauravbehere/pwa-starter-demo

Service Worker

At the core of a PWA lies a service worker. A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction.

Read more about service…


Introduction to observables in JavaScript

Photo by Diego Jimenez on Unsplash

Observables are functions that generate values over time and through a subscription model. The subscribers receive the data/new values over time as a stream and in an asynchronous fashion.

Imagine the connection between the observable and the subscriber as a dedicated pipe where data flows like a stream and the handler/subscriber acts upon the data when received in the stream.


A rundown of my favorite React tools

Weapons (tools) make a soldier (developer) effective. Advanced and effective weapons (tools) in your armory ensure you have the firepower to handle the complexity of an ever-growing code base.

Let’s look at a few of the tools I used in my last project. These tools helped me to write code quickly yet maintain quality.

React Dev Tools

Programming is 20% coding and 80% debugging. Debugging is what makes a programmer efficient in comparison to others.

React Developer Tools let you inspect a React tree, including the component hierarchy, props, state, and more. …


Measuring web performance through end user’s lens

When we talk about web app’s performance there are many metrics that come into the picture like the load time, time to the first byte, time to contentful paint, etc.

Out of these, there are some metrics which talk about the network latency, the time a web page was waiting for the connection to be established & files/scripts to be served over the network & some metrics are specific to what happens after that, for example the time to first paint, first contentful paint, time to interact & first input delay.

Here are the standard timings that are reported by…


Webpack + React = Life is good

Let us talk about a minimal configuration for Webpack that can get us started with development with React.

A few basics first, why should we need Webpack as a build tool? :

  1. We need to transpile the JSX & React specific syntaxes.
  2. We need to transpile the ES6 code that we commonly use like spread operators.
  3. We need to have code-splitting & chunking so that we can have on-demand loading for our code bundles & we can optimize their sizes.
  4. We need a build system to generate the distributable, uglified, minified, compressed, transpiled & transformed code, that works continuously, watching…

Gaurav Behere

Full Stack Engineer, drummer, running mainly on JS & Music. “Frameworks & Libraries come & go, JS stays ❤” https://www.linkedin.com/in/gauravbehere/

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