16 Mar 2023

Core Web Vitals: Interaction to Next Paint (INP)

Have you ever clicked on a button or typed something on a website and waited for a long time before anything happened? If so, you have experienced a poor user experience due to low responsiveness. Responsiveness is how quickly a website responds to user input, such as clicks, taps, scrolls, and keystrokes. A responsive website should provide immediate feedback to the user and avoid delays or freezes.

10 Sep 2021

TypeScript Tips: Getting Component Props Types in React

These days, React and Typescript are the perfect combo for building front-end applications. If you're from the front-end world, you may already know that. This post is about a Typescript tip that will be useful in React applications.

If you use React, you would've already created a higher order component (HoC). Sometimes, you need to create an HoC that returns another UI component, with some of the props pre-populated. Example, an IconButton component that returns a UI Button with an Icon.

24 Oct 2020

Fix: The flow server is not responding

Recently, I was setting up flow for one of my project. Everything was running normally, but after sometime, there was this error on the screen:

1 Apr 2020

Improve Website Speed with Link Preload

In recent years, Web peformance optimizations became a mandatory skill for every front end developers. Web performance can be classified into two: page load performance and runtime performance. Here in this post, we'll see how to improve the page load performance using link preloading

21 Apr 2016

Debugging React Native Apps using Visual Studio Code

I always think that I am a Magpie developer. I don't know if others do this often; But, most of the times, I switch between my IDEs, trying out new frameworks ( even though it doesn't solve most of my problems ).

21 Jan 2016

React Redux Part 1 : Implementing a counter component in react by using state

The frontend world is moving so fast these days. The hottest trend is React along with the Flux pattern. Flux is a architectural pattern introduced by Facebook to solve some of the problems in large data centric applications. Facebook introduced flux as a concept, but there're number of flux libraries born from then. Today we're gonna talk about the most popular library in that category named Redux.

27 Dec 2015

Injecting Custom JavaScript into React Native's Webview

I was playing around with React native these days. Ever since they added the support for the webview in React native for Android ( which happened in their last release ), I was eager to try it out. So, today's post is about React native webview.
31 Jul 2015

iTerm tips and zsh plugins for better development environment

This post is about the two tools I use regularly in my development environment: iTerm and oh-my-zsh. iTerm is a mac terminal replacement and zsh + oh-my-zsh is an excellent combo to replace the bash shell with some cool stuffs.
3 May 2015

React TDD Example: Unit Testing and Building a React Component with Jest, Gulp and React Test Utils

ReactJs has attained lot of momentum since its initial release in 2013, and became the best JavaScript library for developing rich UI interface. React also popularized different concepts like Virtual DOM, Uni-directional data flow and Componentization in the front-end community. As of today, React has more than 20,000 stars in Github repo, and actively maintained by the Facebook team.

10 Apr 2015

Repeating Multiple Elements using ng-repeat-start and ng-repeat-end in AngularJS

When the AngularJS website is released, the TODO example in their website was one of the main attractions. The example was simple and just below 30 lines of code ( Here is the link if you want to check ). The whole trick behind the scene was done by a directive named ng-repeat, as shown below:

19 Mar 2015

Implementing a curry function in JavaScript using TDD

TDD stands for Test Driven Development. To those who don't know what TDD means: In a typical TDD Environment, a developer start with a basic test case describing the minimal requirement for implementing the module. Then he writes the actual implementation code for making the test case pass.

17 Mar 2015

Remote debugging localhost with weinre ( and HTTPS too )

Debugging mobile websites/applications is a real pain. No debuggers for Javascript, no console logs, cannot inspect html/css, and so on.

11 Aug 2014

A brief walk-through of the ng-options in AngularJS

Using ng-options was bit tough for me. I banged my head couple of times when I actually used ng-options in my code. And most of the times, I had to google and find out how to make it work. Looking the AngularJS documentation didn't help much, as it's less informative and doesn't have much code samples.
7 Jul 2014

Practical Guide to PreLink, PostLink and Controller Methods of Angular Directives

I have discussed about the scope of a directive in my previous article. Here we're going to see how to use the link and controller functions of an AngularJs directive.

26 Jun 2014

Explaining Call and Apply in JavaScript, through Mr.Dave

First, I admit the title looks bit weird. I know this topic has been explained a thousand times in many JavaScript blogs, and I don't want to repeat the same here too. So I am gonna explain this through a person '**Dave**'.
25 Feb 2014

AngularJS: Real time model persistence using local storage

Last week, I came across a situation while working on a simple AngularJS application. I'd to sync the data between multiple open tabs. As you guess, the easy way to sync data between multiple tabs is through local storage. Ofcourse there are better ways of doing this using websockets; but here I am going to explain the client-side way –– using local storage and real time updating other tabs.

17 Feb 2014

'Resolve' in AngularJS routes, explained as story

I feel AngularJS documentation is baffling sometimes. Reason may be, I'm going through the same learning curve described by @bennadel. Through this article, I'm primarily aiming to help those who got stuck at some point of the curve. Don't take it too seriously; I'm just sharing some of my experiences with AngularJS.

11 Feb 2014

Mastering the scope of the directives in AngularJS

Directives are one of the most powerful features of AngularJS. You can imagine them as building blocks ( aka re-usable components ) of any AngularJS application. Mastering all the directives, is totally out of this article’s scope.
3 Feb 2014

Multiple Left-hand assignment in JavaScript, is really bad. Think before you do it.

You may ask, what does that mean ? Well, if you’re not familiar, in JavaScript you can write the variable assignment expressions like this.
15 Oct 2013

Octopress Blog Tweaks: Adding Author Info Section Below Each Posts

A good blogging platform is one which allows easy customization. I've been using Octopress for more than 2 weeks and happy to tell that it's one of those allows customization with out any pain. I want to share a tweak I added to my blog recently : It's an author information section below every post. Let's see how I built it and added to my blog.

26 Sep 2013

Some Gotchas In Arithmetic Expression Evaluation : JavaScript

This post explains how the JavaScript engine actually parses the arithmetic expressions.
25 Sep 2013

Starting my new blog: Finally Octopress

I wanted to start writing blog ever since I started coding. I never had a success setting it up because of time constraints and many other reasons. During this time, I've evaluated a number of blogging platforms and eventually I thought of using wordpress as my blogging platform when I start my blog.