Topics on JavaScript frameworks such as React, Next.js,MERN stack, and any other technology based on JavaScript
In this post, I will be discussing TypeScript classes, which is a big topic in Object-Oriented Programming. To start, I will go over the essential features of TypeScript classes. In future posts, I will delve into the topic in greater detail and cover how TypeScript implements OOP concepts such as Inheritance and Polymorphism, as well …
Learn the fundamentals of Typescript classes in no time Read More »
What is Type Annotation? TypeScript is a statically-typed language. Hence, Type Annotation is an essential part of TypeScript that you need to be well familiar with. Type Annotations mean different ways that you can define types of variables, parameters, and return values of functions, and properties (of objects). There are many ways to do type annotation …
You may have heard of TypeScript whether you are a JavaScript or React developer or even a newbie. It is said to be a superset of JavaScript. What does it mean by a superset? This really means that TypeScript includes all the features of JavaScript and extra features on top of it. So, what does …
TypeScript is a superset of JavaScript. Unlike JavaScript, Which is dynamically typed, it is statically typed. This means you will know the types of variables used in your code at the compile time. This helps you as a developer to check for typed-related errors before the code is executed. If there are no compiled errors, …
How to create React functional components in TypeScript Read More »
React.lazy and Suspense make React developer life easy. React.lazy helps in code-splitting and Suspense backup React.lazy in loading state. Before, we go into details let’s start things simply. let’s be familiar with some background knowledge. What is Bundling? Bundling is the process of putting code in many files into one file. While bundling is essential …
React.lazy and Suspense make code-splitting easy Read More »
React useMemo hook One of the ways that you can improve the performance of React apps is by using the useMemo hook. This hook prevents expensive calculations from running on every render. The React useMemo takes two arguments: a function and a dependency array. useMemo( function, dependancy_array) Now, let us see how useMemo work by an …
How to use React useMemo hook to improve performance Read More »
You may have encountered a situation where you need to add a carousel to the landing pages. A carousel is a slide show of images or videos or a combination of both images and videos in a cyclic manner. You can create a carousel from scratch with HTML, CSS, and JavaScript. However, if you use …
How to create React Bootstrap carousel for landing pages Read More »
What are webhooks? A webhook is a way for an application to communicate with other external applications. Apps use webhooks to send automated messages or information to other apps. For example, Payal would tell your accounting app whenever a client pays you, Twillio routes phone calls to your number, and WooCommerce can notify you about new …
Full-stack apps built with Next.js has three aspects of authentication: client-side authentication, server-side authentication, and API route authentication. I have discussed client-side authentication in a previous post. In this post, I will be discussing Server-side & API routes authentication in NextAuth.js. How does server-side authentication work? The browser sends a request with a user session …
How to implement authentication for SSR pages & API routes in Next.js Read More »
Authentication in Next.js Apps falls into two broad perspectives Page authentication Client-side Server-side API route authentication Before you implement any authentication, you need to have a clear understanding of what data-fetching strategy you are going to use in your app. you can read about data-fetching strategies in the following posts. SSG, pre-rendering and getStaticProps server-side …
How to set up authentication on the client-side in Next.js Read More »
