In software development, writing functional code is just one part of the challenge. Creating code that is maintainable, flexible, scalable, and easy to understand is equally, if not more, important. This is where the SOLID principles come into play. Coined by Robert C. Martin (Uncle Bob), SOLID is an acronym representing five fundamental design principles…
Building a Context-Aware Q&A System with LangChain.js and Web Scraping
In the rapidly evolving world of Large Language Models (LLMs), providing relevant context is key to getting accurate and helpful responses. While LLMs are incredibly powerful, they don’t inherently know everything about specific, niche topics or the latest information on a website. This is where Retrieval Augmented Generation (RAG) comes into play, allowing us to…
TypeScript Best Practices for React
Strict Typecheck To enforce stricter type checking in TypeScript and ensure that developers specify types consistently, you can enable strict type checking by configuring your tsconfig.json file. By setting the strict flag to true, you enable all of TypeScript’s strict type-checking options at once: { “compilerOptions”: { “strict”: true } } Alternatively, if you prefer…
Vite Micro Frontend
A micro frontend is a development approach that breaks down a web application’s front end into smaller, self-contained modules. These modules can be developed, tested, and deployed independently, making micro frontends particularly useful for large and complex web applications that demand flexibility and faster iterations. Create To implement a micro frontend architecture, start by dividing…
React Best Practices for Performance and Maintainability
Building efficient and scalable React applications requires more than just knowing the syntax. Adhering to certain best practices can significantly improve your app’s performance, maintainability, and readability. This post will cover some crucial techniques to optimize your React development workflow. 1. Function Recreation: Utilizing useCallback In React, whenever a component re-renders, all functions declared within…
Boost Your React App with These Optimization Techniques
Building fast, maintainable, and scalable React applications requires a thoughtful approach to various aspects of development. From managing state to handling API calls and styling, every choice can impact performance and developer experience. Here’s a look at key strategies to level up your React projects. Custom Hooks: Reusable Logic at Your Fingertips Custom Hooks are…
Redux Toolkit
First thoughts, not as simple as MobX, but far, far better than using Redux. Yes, Redux Toolkit is much simpler to use than Redux, it overcomes the common issues of using Redux such as. Configuring the redux store is much complicated and often leads to errors. You need to use a lot of add-on libraries…
React MobX Store
MobX is the best and most easy way of implementing a store in react project, it is so simple that you will never use redux in your life again. Unless you are told to do so at gunpoint. There are two ways of implementing MobX one using decorators and the other without it. However MobX…
React Context
Context provides a way to pass data from the root component to any child components without having to pass it manually as a relay from component to component. Thus solving the prop drilling issue, also context comes in handy while passing a store across the application. For example, If you are using a third-party store…
JS Arrays Cheatsheet
push(value) Simply adds new value at the end of the array. unshift(value) Like push unshift also adds elements to the array, but at the start of the array instead the end of array. pop() Removes the last element from the array. shift() It would simply remove the first element in the array, unlike pop() which…