Detecting the default browser language in JavaScript
Learn how to detect the default browser language using JavaScript with `navigator.language` and `navigator.languages` properties.
Blog posts - Software Engineering in Minutes
Blog on JS ecosystem, React ecosystem, web and mobile UX, software engineering practices, and engineering leadership 🧠
🔥 Limited Time Offer
Coding with AI: Learn to build a SaaS MVP in 10 days
Master practical AI development to build and launch your startup MVP in weeks instead of months. Learn to leverage AI tools and APIs effectively.
- 🎯 Build real MVP: AI-powered SaaS from idea to launch
- 🤖 Integrate ChatGPT, Claude, and other AI APIs efficiently
- 💰 Implement AI features users will pay for
- ⚡️ AI-assisted coding patterns to ship 10x faster
- 🚀 Launch your product in 10 days, not 10 months
Pushing only specific branches to GIT remotes
Learn how to push only specific branches to designated GIT remotes, ensuring isolated visibility and control for each branch.
Common mistakes while fetching in useEffect
Let's learn about common mistakes while fetching data in useEffect
useMemo helps reduce heavy computation in functional components
Let's learn how to use useMemo to reduce heavy computation in functional components.
React.memo helps you to avoid re-rendering of computationally heavy components
React.memo is a higher order component that helps to avoid re-rendering of the component when the props are not changed. It is similar to PureComponent but it works with functional components.
How to choose caching based on invalidation strategy?
Choosing the right caching strategy is very important to avoid costly mistakes. In this article, we will discuss how to choose the right caching strategy based on the invalidation strategy.
When to use caching techniques in an API?
Caching helps to improve the performance of an API. But when to use caching techniques in an API? Let's find out.
How to improve your commit messages to collaborate better with your team
Commit messages tells a story in the future about the changes you made. It is important to write good commit messages.
How your pull request title serves as a documentation for your code changes
Let's learn how to write a good pull request title and how it can serve as a documentation for your code.
Proper validation messages in JavaScript
Good validation messages helps to improve the user experience and also the developer experience.
Practical example of GraphQL schema design
Let's create a GraphQL schema for a notes app and learn how to create simple yet powerful graphQL schemas for your APIs
useRef helps you to avoid re-rendering of the component
useRef can store any mutable data that you want to persist between renders. It helps you to avoid re-rendering of the component when you don't want to.
Simple tips to avoid overfetching from your GraphQL API
Often graphQL gives flexibility in building the API, but it comes with hidden cost of overfetching the data from the server. In this article, we will see how to avoid overfetching from the server.
How to consume server sent events in React
Let's learn on how to consume a keep alive connection from server to client (SSE) in React
Practical example of SSE (server sent events) in Node Js
Server sent events are useful to send data from server to client. In this article, we will see a practical example of SSE in Node Js.
Writing file in Node Js using createWriteStream and writeFile API
fs module in node Js provide API to write files. Let's explore createWriteStream and writeFile methods with simple example and thier differences.
Dynamic import of multiple modules using require.context in node Js
require.context in node Js allow you to import multiple modules from a directory dynamically. Let's learn its power through example.
How single responsibility of a function helps to write better code
Single Responsibility Principle is a software design principle that helps to separate the logic in a concised and maintainable way. Let's learn the example of how to apply this principle in a JS function.
How to provide meaningful error messages in your API response
Effective error messages in API responses are crucial for developers and users. Learn how to create them with JavaScript examples.
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.
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.