When developing modern web interfaces, it’s crucial to create layouts that are responsive, adaptable to different screen sizes, and optimized for mobile-first design. While frameworks like Bootstrap and TailwindCSS provide convenient, prebuilt grid systems, there are scenarios where you might want to build your own custom grid system without relying on a full UI framework. […]

Dealing with arrays of objects is a common task in programming. Sometimes, you encounter situations where you need to remove duplicates from an array based on a specific key. In this article, we’ll dive into a JavaScript solution for this problem. The Problem Imagine you have an array of objects, and you want to eliminate […]

When working with objects in JavaScript, it’s important to understand the difference between a shallow copy and a deep copy. A shallow copy of an object only copies the top-level properties of the object, whereas a deep copy creates a completely independent copy of the object and all its nested objects, which is also known […]

There are different patterns for creating React apps. The Container Component pattern means separating data fetching and presentational parts of a component into two components. One component fetches data and the other one gets the data as props. In the below example the PokemonsContainer component gets data from the api using axios and passes it […]

One of The main purposes of The React team has always been improving the performance of react applications and providing more features and Apis to help the developers achieve that goal. React v18, the most recent major react update, finally became available as a stable version about a month ago. this new version makes some […]

One of important performance optimization solutions is Lazy Loading. and it means instead of loading all resources on load we load resources on demand and only when they are needed or are visible. this technique usually reduces initial load time and render time significantly, specially when there are heavy components in the page. When should […]

Load time and responsive design usually impact user experience significantly, loading images with different sizes based on viewport width is a good way to solve the problem of loading unnecessarily large images in smaller screens. there are multiple ways to load images based on screen size but HTML supports this natively with the picture tag […]

One of the relatively common things that we might need in applications are timers like sale count down timers or exam or announcement count downs. since such components are common and we may need to repeat the same tasks in different projects I created a custom react hook for handling count down timers as you […]

CSS has been giving styles to web pages for years and more and more features are continuously being added to CSS and you can’t find any web page without CSS nowadays. There are different ways to add css to react applications including global styles and inline styles which are not recommended. one of the best […]

since it’s relese in 2012, typescript has become more and more popular among developers and most companies and teams use typescript since it’s statically typed and teams can work together with less problems by catching errors and preventing bugs before building or deploying the project. It is possible to use typescript with react thanks to […]