ADRs are essential documents in software development that capture the context and consequences of significant architectural decisions.

ADRs are essential documents in software development that capture the context, rationale, and consequences of significant architectural decisions, Empowering Teams for informed decision-making and facilitating continuous improvement.

What Is an ADR (Architectural Decision Record) Document?

Optimizing Next.js Build: Cut Redundant API Calls with Build Time Data Caching. Learn a Step-by-Step Solution to Boost Next.js Apps' Efficiency!

This blog introduces a solution to the problem of redundant API calls in Next.js applications. By implementing a caching mechanism, developers can pre-fill a cache folder with necessary data before the build process, reducing the number of redundant API calls from thousands to just one. The blog provides step-by-step instructions on creating and utilizing the cache folder, offering a straightforward approach to optimizing Next.js applications with shared data requests.

Build Time Data Caching in Next.js

Creating a Clear and structured Git commit messages convention and automatically enforcing it with Commitlint for a clean and informative git history.

Explore the power of Git commit conventions; Learn a structured convention, enforce it with Commitlint, and empower your codebase git history with clarity and automation.

Creating a Git Commit Message Convention

Navigating Next.js data-fetching strategies: A deep dive into SSR, CSR, SSG, ISR, and on-demand revalidation. Make informed choices for optimal performance!

In this blog post, we explore various data-fetching strategies available in Next.js applications. The blog discusses Server Side Rendering (SSR), Client Side Rendering (CSR), Static Site Generation (SSG), Incremental Static Regeneration (ISR), and On-Demand Revalidation, highlighting the benefits and downsides of each approach. The blog provides examples and explanations for each approach and advises developers to choose the most suitable strategy based on their specific project requirements, considering factors like SEO, user-specific data, and overall performance.

My Data-Fetching Preference in Next.js

Uncover the keys to overcoming team dysfunction. Learn how to build trust, commitment, and accountability with solutions and examples.

Uncover the keys to overcoming team dysfunction. Learn how to build trust, encourage healthy conflict, foster commitment, establish accountability, and prioritize collective results by actionable solutions and real-world examples for each challenge, helping your team thrive in a collaborative and goal-driven atmosphere.

The Five Dysfunctions of a Team

Comprehensive senior front-end developer roadmap! Prioritize topics, build a strong foundation, and progress toward mastery.

This blog offers a Front-end Learning Roadmap to guide you toward becoming a senior front-end developer. The roadmap prioritizes topics in high, normal and low priorities to specify what you need to build a strong foundation and progressing accordingly. Feedback and suggestions for improvement are welcomed, empowering individuals to embark on a clear path towards mastery.

Front-End Learning Roadmap

Fostering LGBT+ diversity: Navigating inclusivity with empathy and understanding for a better future.

In this post I want to talk about LGBT+ family and their difficulties in our society.

Respecting the LGBT+ Community by Embracing Diversity and Creating Inclusive Spaces

Optimize your collaborative software development with a comprehensive guide to creating standard & efficient merge requests.

How to Create a Standard Merge Request Description Template

Explore the power of HTTP proxies in enhancing authorization security and functionality in a step-by-step guide.

This blog demonstrates how to create an HTTP proxy in Next.js using serverless functions. HTTP proxies can be used to add an extra client-server transport layer, providing several benefits, including securing authorization tokens as http-only cookies, filtering requests, and enhancing protection and security. The blog provides a simple step-by-step guide on setting up an HTTP proxy by creating a catch-all route in the 'api' directory of next.js and utilizing the 'http-proxy' package. The proxy adds a middleware layer to all API calls, separates auth routes for handling cookies, and includes existing auth tokens in the headers of other APIs.

How to Create an HTTP Proxy in Next.js

Boost code quality with Husky git hooks! Pre-commit formatting, commit message standards, and pre-push checks ensure fault-free, confident shipping.

Learn to enhance code quality with Husky git hooks, customized for workflow optimization and fostering excellence in development teams. The "pre-commit" hook for formatting code, the "commit-msg" hook to enforce clear commit messages, and the "pre-push" hook to verify deployable code.

How Husky Git Hooks Enhance Code Quality and Fault Prevention?

Sass has amazing features like loops and if/else that often go unnoticed, although we can make amazing stuff with them in a performant way.

I Bet You Don't Know These Sass Features!

Discover the potential of one-on-one sessions for managers and leaders. Learn tips and techniques to create connections with team members.

Discover the potential of one-on-one sessions for managers and leaders. Learn tips and techniques to create connections with team members, foster professional growth, and make informed decisions.

How To Do Great One-On-Ones as a Manager

Mastering Clean and Maintainable Redux Code: A Comprehensive Guide with Redux-Saga Integration in Next.js

This blog provides a concise guide to writing clean and maintainable Redux code in a React project with Redux-Saga for async middleware. I emphasize the importance of organizing Redux files within a specific folder structure and highlight the role of middleware in handling various tasks. I introduce the ReduxRoutines method to avoid code repetition and showcase the usage of nextReduxWrapper to access Redux data in Next.js files. The blog recommends using Redux-Saga for handling side effects and suggests exploring Redux Toolkit as an alternative for writing cleaner and more understandable Redux code.

How to Write DRY Redux Code

Exploring downsides, complexity, and better alternatives for state management in React projects. Rethink your choices and embrace efficiency.

This blog discusses the downsides of using Redux for state management in React-based projects and provides reasons to reconsider its usage. I point out the complexity of writing DRY and SOLID Redux code and the lack of opinionation in Redux, leading to various implementation approaches and potential difficulties in understanding code. Maintaining Redux-based applications can be challenging, requiring excessive code for small changes. Additionally, the blog highlights the heavy reliance on multiple dependencies when using Redux, which might not be necessary in every project.

Why Do You Need To Rethink About Using Redux

Understanding the importance of a service layer in frontend development is a strategic approach to simplify complexities and enhance user experience.

This blog highlights the benefits of using a service layer in frontend applications. The service layer acts as a middleman between the frontend and APIs, improving code structure, scalability, and adaptability to backend changes. It  aligns with SOLID principles and promotes SoC, OCP, and DIP. The blog also gives tips on implementing a service layer with a focus on flexibility and maintainability.

Why You Need a Service Layer in Your Frontend Application

Explore how to configure and leverage VSCode snippets and shortcuts to turbocharge your programming efficiency.

Speed Up Your Programming With VSCode Snippets & Shortcuts

Adapting style guides keeps code clean and consistent, balancing rules with flexibility for tech evolution.

Discover how Google approaches coding standards in software development through the insights from Chapter 8 of Software Engineering at Google book. This blog post explores the role of style arbiters, the balance between rules and guidance, and the impact of automated tools in maintaining code quality. Plus, get a personal take on blending various style guides to create an effective ESLint configuration.

Code Consistency and Quality with Style Guides and Rules

Discover Humility, Hunger, and Smart — key virtues for an ideal team player. Real-life examples and insights from Patrick Lencioni's book.

Uncover the keys to overcoming team dysfunction in my summary of "The Five Dysfunctions of a Team" by Patrick Lencioni. Learn how to build trust, encourage healthy conflict, foster commitment, establish accountability, and prioritize collective results. This blog offers actionable solutions and real-world examples for each challenge, helping your team thrive in a collaborative and goal-driven atmosphere.

Who Is the "Ideal Team Player"?

Render react components conditionally in the most readable way possible

IF/Else JSX

A method that returns true if the accepted value is null or undefined.

isNullish

A wrapper for react portal that gives us a better API to deal with react portal in SSR applications.

Isomorphic Portal

A hook to use socket in a more linear and reactive way

useSocket

Switch Case JSX

An enhanced version of the useEffect hook with deep comparison on the dependencies.

useDeepEffect

A hook that indicates wether an element is visible in the viewport or not.

useIntersector

Triggers a callback function whenever a specific keyboard key is pressed.

useKeyPress

This hook accepts a parameter with a boolean value and proves useful when we need to perform actions that involve transitioning between binary states, such as showing and hiding an overlay or opening and closing a menu.

Front-End Chapter Lead at Ide-Kavan

Blogs

Projects

Gists

Contacts