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.
Usually, we have seen libraries/components implementing all the features for us & expose APIs to be called in a certain way to get the functionality we need. …
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.
Input: Root Node Address (7), Reference Node Value: 6, K=1
Input: Root Node Address (7), Reference Node Value: 6, K=2
Output: 4, 5
Input: Root Node Address (7), Reference Node Value: 3, K=3
Output: 1, 6, 0, 2, 4, 5
This can be a tricky question if we don’t negotiate the scope well. …
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
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 optimistic that it is just a temporary phase & it will pass quickly. I counted days & thought I will be back in the office soon. That was stupid of me. Moreover, as interstate travel is not allowed I am staying alone as my family isn’t able to travel. …
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.
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
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.
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.
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.
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. …
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 the browser window’s performance…
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? :