Get all files in a folder using Node Js
To get all files in a folder and its sub-folders recursively using Node.js, you can use the fs.readdirSync() method in the fs module.
Blog posts (Archived)
Mostly about React, React Router, Javascript and more. It is a bit outdated but I keep it here for reference. For my new content, please checkout my visual eBooks.
Beginners to ProNode Js
Visual Guide to API Design Best Practices
This visual eBook covers essential best practices for designing robust APIs using REST principles.
This book is ideal for beginners and backend developers seeking to enhance their API design skills. However, it is not suited for those seeking an in-depth exploration of API design. This book is a quick read under 40 slides like scrolling through your instagram feed.
Full stack developer is the most misunderstood word in tech
Full-stack developers/engineers are the most misunderstood term in the tech world. But for the last decade, they are more in demand in the startup world. Lets see it from a full-stack developer perspective.
How to select fields in a document in MongoDB
MongoDB is really easy to work with. Today, we will see how to select only few fields out of a large document using mongo query
How to revert back to older commit in git
We always want to go back in git history. Arent we?. We will learn the trick to do so
Do you know spread operator in Javascript object is mutable?
Spread operator becomes the defacto solution for creating immutable object in javascript. But make sure to have the caution, spread operator does mutate objects in specific cases. We will see it briefly.
How to find a document in mongo using partial value of a field
Its very easy to find a document in mongoDB by value, but do you know how easy is to find a document using case insensitive string
How to find a document in a mongo collection based on whether a field exists or not
In NoSQL, you can save different document in a single collection. Now if you want to find documents with specific field, how do you find that? There is an easy way, we will see it in example.
How to rename local and remote branch in git
Often, we want to rename the branch in Git. Totally we will see, one of the easiest way to do it for both local and remote branch
Learn how to handle nested routes and nested content using react router
Most of the SaaS single page applications have nested routes. We will see how to build nested routes in a react application using react router library
Error handling while using native fetch API in JavaScript
We will see, how to handle fetch API errors using promises and async await syntax in JavaScript
Async functions always return a promise - Lets deep into the Async world
Async await become integral part of any modern application in JavaScript. We have used async for all asynchronous operation and return the promise ourself. But do you know, how async works? Lets see it in detail.
Rename variables while destructuring
Destructuring is a great feature and has many use cases. Today, we will see how to rename a variable while destructuring and some use cases for it.
Default values while Destructuring in JavaScript
Destructuring object or array are great features in es6. There are several use cases for it. In this article, we will learn how to set default values while destructuring.
Styling a react app using Emotion CSS in JS library - An introduction to Emotion
How to style your react app using emotion library. It has several ways to style the app. We will learn how to create global styles, styled components and CSS in JS through set of emotion libraries.
Union of objects in javaScript based on unique value - Merging worlds using javaScript
In modern javascript, its very easy to merge two objects, but do you know how to merge more complex objects or arrays based on unique values on two different objects. Lets leran that technique together.
Vanilla JS equivalent for counting number of child elements using className
How to count the number of child elements using classnames in javascript. It is very easy with jQuery, but do you know how to do it in javascript, lets learn it today.
How to group an array of objects through a key using Array reduce in javascript
Understand how to group an array of objects using one of its key. We will achieve this function using array reduce in javascript.
How to sync props to state properly in React Hooks
It is easy to pass props to state in react hooks, but do you know how to sync props changes to state changes after initialization. It is also easy, lets see that in this article.
Redirect routes in react router
Redirecting a page based on some condition is an usual need in a react web application. React router provides an easy way to achieve it. Lets learn how to do that in this article.
Heart beat animation using CSS
Learn how to CSS animations on a element using keyframes and animation property. Here, we learn how to create a heart beat animation using CSS3
How to draw a heart using CSS3
We can learn how to use border radius and transform property to draw a Heart shape using CSS
How to pass props to the route component in React router
We have seen several examples and use cases in react router. One among them is passing props to the route component directly. Lets learn how to do it.
Hooked with React - Using react router in our react application to route a dynamic page
Creating book details page using react router in our book search application - Part 4
How to increase your productivity while working remotely
Some of my experience working remotely and tip to make sure we are productive while doing work from home or from remote location.
React as templates for your server side applications
React has been used in desktop, mobile, web and VR development. In this article, we will see how it can be used in server side applications as templates.
Creating 404 page in react using React Router
Learn how to show a 404 page in a client side routed react application if there is no route matching the URL
Maintaining centralized documentation using Docusaurus
Documentation is always a headache for engineering teams. Once engineering teams start growing, its very difficult to on-board engineers. Docusaurus was a react based documentation tool created by facebook to centralize your documentation.
How design skills help developer to contribute better to the products
UI and UX design skills are overlooked by developers, especially in large organizations. Its one of the important skills to build better products and help product teams with efficient feedbacks early on the UI and UX designs.
Quicklink - a small JS library to fast load subsequent pages and improve user experience
Page loading speed is one of the most important metric. Quicklink is a simple javascript library to make any site faster. Lets see how to get started with Quicklink.
Different ways to communicate better in teams
When your team grow, the biggest pain will be collaboration. It should be solved as a company culture, else it can become a big mess for productivity. Learn some tips to overcome those issues and communicate better in teams
Hooked with React - Refactor the react application and separate components into separate files
Learn how to split the react app into components and talk about folder structures briefly, Part 3
How to handle query params in React Router
Learn how to handle query params in a client side react application using react router library
Hooked with React - Error handling and loading state in react hooks
Learn how to handle errors and loading state in react hooks through our book search app - Part 2
How to solve Git issues on renaming files and folder
Many of you might got nightmares due to file rename issues in git. Recently I encountered one issue, everything works locally but repeatedly my circle CI throwing error as file not found while transpilling JSX file. Then I figured out the mystery.
Dynamic pages in react router
Learn how to create dynamic URLs in react application using react router package
Hooked with React - Learn by building a book search app using react and its siblings
Lets build a simple books search page using google books API in react. While developing it, we will explore react hooks, css modules and testing in react application - Part 1
Different types of routers in react router
There are several types of router supported by react router package. We will see the use cases for each types briefly in this article.
Basic routing in React using React Router
Learn how to do routing in React applications using React router library. React is widely used library for client side web applications. In any web applications, there will be multiple pages. Routing the URL properly and load different pages based on route parameters is a general requirement.
Background image with gradient overlay in CSS
Understanding how to create background image with gradient overlay using CSS3. Support for gradient colors have improved in recent years, more and more website start using gradient as background for header, cards, etc
Center align content vertically and horizontally in CSS
Learn how to center align content vertically and horizontally using CSS3. We discuss techniques using CSS transform and flexbox.
Gradient text style using CSS
Gradient backgrounds started the trend, nowadays websites have more gradient colors for many elements after gradient become widely supported on modern browsers. In this article, we will learn how to do gradient text style using CSS3.
Scale elements on hover using CSS
Learn how to scale HTML elements or images on hover using CSS3 transform property.
Vanilla JS equivalent for jQuery Ready
Document ready function is widely used feature from jQuery. With growing trends in modern web development and much better browser support for vanilla JS APIs, We can replace or reduce jQuery dependency easily.
Tried out Netlify CMS with my Gatsby blog
Yesterday I was looking for open source alternates to contentful CMS. I found one called netlify CMS. It might not be a direct alternate, but for small projects, netlify CMS will do.
First hand experience with Gatsby, Contentful and Netlify
My experience on working with a demo project using Gatsby, Contentful and Netlify. It is opinionated and not through with a production level project.