Welcome!

Liked my blog?
You would definitely love my newsletters.
Do sign up, it’s FREE.

RnS

You Selected

To Select From

RnS

You Selected

To Select From

Docker: Why and How to get started with Docker

Docker: Why and How to get started with Docker

October 10 2021

Docker is an ecosystem of services that are used to create, run and administrate containers. In simple terms, a container is an isolated environment just for running a particular application. A container essentially contains the application along with all the dependencies and configuration files that it needs for running. More on that later. First, let's s...

React: Scroll Transition for Fancy Portfolios

React: Scroll Transition for Fancy Portfolios

September 09 2021

I saw this fancy scrolling effect on this website and it just blew my mind. I thought of recreating it and got somewhat successful :) BTW, surely check this portfolio website by Ilya Kulbachny....

React: Tag-Text-Search

React: Tag Text Search

July 07 2021

I recently fabricated this 'Tag-Text-Search' functionality for my blog. So, here is a little article just about it. BTW, the source code for the blog is public and you can surely go check it here. In this blog we'll be using Context API to make the setup work. So, go ahead if you have a basic understanding of it and if not, you can definitely go have a look at my article on Using React Context A...

React: Marquee using Framer Motion

React: Marquee using Framer Motion

May 05 2021

This is called a "marquee" and apparently, I needed one for my portfolio website. So, I thought I might as well share it with you all! In this blog, we'll create an infinitely running long text (that seems to be very trendy lately) using Framer Motion and obviously react! Let's break it down. Importing Framer Motion: motion is an API provided by framer-mo...

React: Custom Cursor (No Extra dependencies!)

React: Custom Cursor (No Extra dependencies!)

March 03 2021

Just like the last article, this also focuses on a feature that I would like my portfolio to have. A custom cursor. I've noticed this treat a lot lately and I think it adds a bit of extra sass to the website. In this article, we'll be making a very basic custom cursor. This could act as a base setup for any kind of cursor you would want to create for your next project. So let's jump right into the P.S.: Just React no other dependencie...

React: Super Simple Smooth Scrolling FI

React: Super Simple Smooth Scrolling

February 02 2021

I have been wanting to redo my portfolio, and one of the major things I wanted it to have was smooth scrolling. So, I created a super simple smooth-scrolling effect with no extra dependencies but react. In this blog, we'll be creating that together. So, let's get right into it. So essentially what we are trying to do is to simply translate a div in Y-direction with a delay. This div will hold the...

React 3D Image Slider

React 3D Image Slider

February 02 2021

I had to make an image slider for a project and I found out that there is no ready to use cool, basic, image slider. So I went ahead and made one using react-slick. In this article, we will be making that image slider together. Let's get right into it. Run the following commands to set up the project. Now, in the App.css file erase everything and copy-paste ...

React Theme Switcher

React Theme Switcher

January 01 2021

In this article, we'll be creating a theme switcher using styled-components, context API, and of course, react. Thus, you have a react app powered by styled-components. Now, In the src folder create a components folder and then a Layout.js file within. a context folder and then a globalContext.js file within a pages folder and then a Home.js file within a styles folder and then a globalStyles.js file ad a homeStyles.js file. The end s...

Em v/s REM

Em v/s REM

January 01 2021

The essential difference between em and rem is that rem is "root em". Now that out of the way let's first see what actually em is? EM EM is relative to the current font size of the parent element. This basically means that if the font size of the parent element is 16px then This is super cool because now you can use these relative units to size up almost everything perfectly! And as a matter of...

React Native: Responsive and Adaptive User Interfaces

React Native: Responsive and Adaptive User Interfaces

January 01 2021

Adaptability is probably the most essential need of an app. I will try to layout some of the tools and tips that I use while trying to make an app responsive towards different OS, orientations, available width and height, etc. General Tips: Always set the min and max width, it helps to cover devices with XS or XL Screens Use Dimension API provided by react ...

React Native 101

React Native 101

January 01 2021

View Container or Layout component. View component is like the HTML div tag. The main aim of this component is to act as a container around another components. You can nest a View inside another, and it is pretty much a general practice to wrap every component with a View component if you need to apply layout styling In a nutshell: Use View for styling the Layout of any component Doesn't support style inheritance Uses flexbox with d...

Using React Context API Like a Pro

Using React Context API Like a Pro

December 12 2020

If you've been hearing the term "Context API" and feel totally confused about it (like me, some days ago) or you have no clue what this even means, look no further! I've got you covered (for the most part, I believe)...

react hook demystified

React Hooks Demystified

December 12 2020

In React, sharing functionalities across components without data coupling (sharing of unnecessary data or state across components) is done using hooks. When a component uses a hook, it takes an independent copy of that functional logic. Hence, two components using the same hook, have absolutely no idea about each other....

Car Sharing Website

4 Things beginner Figma users have no idea about

November 11 2020

Here are some things that I didn't know when I started with Figma. These tips really boosted my workflow and got me really nice designs in the end. Use a grid, and not just a 12-column. Okay, so first thing! USE A GRID!! I have seen so many beginner Figma users just putting out things measuring distances all the time. There is a way to put everything in or out of symmetry in an easy and beautiful way using a grid. In this example, I a...

Implement Search Bar in React for Ecommerce Website

Implement Search Bar in React for Ecommerce Website

November 11 2020

I observed that in eCommerce websites filtering products based on certain filters or user inputs is a super common thing. In this little tutorial, I'll be trying to layout the mechanics of filtering data from a state based on the search input. Of course you can go all out and add all the fancy toggle filters, advanced search options and whatnot. But the concept of filtering stays the same, more ...

Web dev baby steps

Web Dev Baby Steps

June 06 2020

I have had a lot of questions from people asking me about how to start their journey of becoming a web developer. So I managed to pull up a map for ya'll to follow. Do let me know if you find this useful or also the other way around. Would love to have some critics helping me along the way!...