Latest stories

5 vscode extensions for better programming


Programming is hard and long process but it doesn’t have to be if you have the right extensions on your editor. Since vscode is one of the most popular code editors right now. Here are some of the extensions that will help you improve your productivity. 1. Bracket pair Colorizer When I first saw this plugin I didn’t think I might need this. But if you are working on languages that require a tree...

Setup your terminal like a pro with iterm and zsh


Programing requires you to frequently use the terminal to perform many actions. The default terminal is just plain ordinary and doesn’t help you at all with limited information and blant design. Zsh also known as Z Shell is a shell built on top of the default shell for macOS(bash). Zsh has huge number of features and when combined with iterm it becomes a beast for programming and...

Svelte app tutorial: Chuck Norris Jokes


For those who don’t know what svelte is, it’s a component framework similar to React or Vue. It’s faster, reactive and has less boilerplate. Svelte runs at build time, converting your components into highly efficient imperative code that surgically updates the DOM. As a result, you’re able to write ambitious applications with excellent performance characteristics...

Best way to push footer to end of the page


One of the most common problems on web development is the footer placed at the center of the page when there is no content / less content to occupy the full height of the viewport. Similar to the example below Footer not sticking to bottom There are multiple ways to push it to the bottom of the page. Some people do it using CSS, some prefer using JS to calculate the height of the viewport to...

Generating React Boilerplate codes


Motivation I always get annoyed with the fact that almost every project you do on React usually needs Redux for state management and you need lot of boilerplate code for redux to work, with types, actions, actionCreators, reducers. And on top of that if we want to handle side effects we take the obvious choice redux-sagas. As we keep on adding new libraries and middleware, the amount of code you...

Building design system with styled-components and styled-system III


This is part 3 of this series Styled Component and Styled System. If you haven’t read Part 1 & Part 2 please go through them first. It is prerequisite before starting this part. In previous part we used the help of style system to create complex components with greater flexibility and power. Now we are going to enhance that further by adding few tools to our arsenal. The first thing we...

Building design system with styled-components and styled-system II


This is a part 2 of how to use styled-component and styled system together to create React Components if you haven’t read the first part Read here.  In the previous post I explained how you can create components easily by extending DOM elements. But I told you that creating components is like a lego where you can create small reusable components and attach them together to...

Building design system with styled-components and styled-system I


This is a multi-part series of articles where I am going to show you how we can leverage the power of styled-components and styled-system to create reusable, efficient components. We are in components age of Frontend. We can relate a component to lego. Similar to legos we can have small reusable components that can be attached to build bigger components which can be further combined with other...

Understanding this.setState()


It might be unusual for new react developers or some experienced developers to see this explained. When we start learning react and start exploring how powerful it is. We consider this.setState as a very simple thing to understand and we don’t look deep into it. Most of us fell into that trap, resulting in unpredictable component state. Here are some of the common pitfalls that causes this. this...

React: Higher Order Components


Learn by practical example If you are learning react or already know the basics of react, you must have come across a term called Higher Order Component (HOC). It is one of the most interesting and powerful ways to build a component. Although the concept is very common, most of the examples are ambiguous and don’t provide enough insights on how to practically use it on a project. So, today I am...

Recent Posts



Shiva Pandey

Get in touch

Shiva is a Software Engineer with more than 5 years of experience in different industries like banking, services, software development, and startups. His passion is to create solutions that help others to work faster. He is a problem solver and enforces best practices within the team. His career plan is to become a Principal Software Engineer. In his free time, he likes to play music, football, and video games.