You Selected
To Select From
You Selected
To Select From
Anything You Want - Notes and Summary
October 10 2022- There’s a benefit to being naive about the norms of the world—deciding from scratch what seems like the right thing to do, instead of just doing what others do. - There’s a big difference between being self-employed and being a business owner. Being self-employed feels like freedom until you realize that if you take time off, your business crumbles. To be ...
Hyperfocus - Notes and Summary
September 09 2022Switch off the autopilot, as the most urgent and stimulating things in your environment are rarely the most significant. → Go pursue something worthwhile, not something expedient 1. Set your env to be distraction-less 2. Reach flow every time 3. Scatterfocus intentionally...
Docker: Why and How to get started with Docker
October 10 2021Docker 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 see why do we need docker or containeriza...
React: Scroll Transition for Fancy Portfolios
September 09 2021I 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
July 07 2021I 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 API Like a Pro...
React: Marquee using Framer Motion
May 05 2021This 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-motion that supercharges a normal JSX eleme...
React: Custom Cursor (No Extra dependencies!)
March 03 2021Just 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 n...
React: Super Simple Smooth Scrolling
February 02 2021I 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 full SPA (Single Page Application), res...
React 3D Image Slider
February 02 2021I 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 the code below ...
React Theme Switcher
January 01 2021In 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 ...
Em v/s REM
January 01 2021The 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 fact, this unit also works on padding, ...
React Native: Responsive and Adaptive User Interfaces
January 01 2021Adaptability 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 native if you want to set the width or h...
React Native 101
January 01 2021View 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 t...
Using React Context API Like a Pro
December 12 2020If 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 Hooks Demystified
December 12 2020In 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....
4 Things beginner Figma users have no idea about
November 11 2020Here 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 ...
Implement Search Bar in React for Ecommerce Website
November 11 2020I 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 or less. Hope you enjoy!...
Web Dev Baby Steps
June 06 2020I 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!...