Today we are going to write a reusable custom hook, and build a simple application that will make use of the hook. If you don’t already know hooks were a part of React from v16.8 onwards. They were essentially included as a feature to avoid using classes or class-based components. We can leverage state and other React features the same way we did while using React class-based components. Hooks are just a cleaner way to write programs in React.
What we will have by the end of the tutorial are two components mainly a
User component and a
A headless content management system (CMS) like Strapi is very handy in terms of managing digital content. You have a GUI exposed to register the Content-Type and the content itself through a user-friendly and clean interface. If you are a blogger or want to spin up a website real quick you might as well want to source all of your blog/website’s content from a CMS. Basically, CMS like Strapi exposes an API that can be used to query the content using frontend technologies like React and Next.js.
Today we will look at how easy it is to fetch data hosted…
During the process of developing React applications, I’ve had times when I had to decide if I should use Redux or the fairly new hook (available from React’s version 16.3) called ContextAPI for managing state in my application. For the most part, I have used Redux, but I feel Context API is a little less daunting to me. Anyway, let me explain you through to manifest if either one’s actually better.
We will succinctly look through what these technologies do and how they do, which will probably help you decide which one should you choose for your next project.
Zustand is a pretty neat state-management tool. When I say state-management, you might as well want it to be compared with Redux or Context. But, this blog wouldn’t be the typical rundown of pros and cons and comparing technologies as every technology has its own pros and cons. Instead, we are going to have a look at how Zustand makes it easy to get started with handling state on your applications.
By any chance, if you are looking for a top-hole definition of Zustand, here it is:
It is a small, fast and scaleable barebones state-management solution. It has a…
We all want to create beautiful layouts, add exquisite animations, and want to deliver a top-notch user interface but let me be honest, how many of us are really aware of the web vitals that can help deliver a blazingly fast user-experience. In short, Google uses these web vitals to provide quality standards on user experiences.
Web Vitals are essentially a way to quantify the user-experience of one’s website, which if optimized can help deliver a great user-experience. It is an initiative by Google and they have provided a few different tools to monitor the performance of websites. When one…
Not a very long time ago, CSS style sheets were the only appropriate way to paint any modern app. That is basically the traditional method of styling at the document level — creating a
style.css file and referencing it on the HTML document for the styles to appear.
.css files to
Multi-factor authentication is an authentication method in which a user is granted access to a website or application only after successfully presenting two or more pieces of evidence to an authentication mechanism: knowledge, possession, and inherence.
In the same way, the two-factor authentication method requires you to enter additional data as evidence to access your account. The most common forms of two-factor authentication involve entering a code as used by Google and Facebook for additional security.
Absolute imports are indeed a game-changer, at least for me. At times when you have different directories or files to import from, you’d perhaps know the challenge of trying to remember every folder structure so you don’t mess up while importing content.
Remember when you had to spend some time figuring out if the file you have imported is even the right one? It can get unexciting if that happens quite often. Imagine getting caught up in trying to identify if you have the right dots to your import path. …
Next.js has introduced a very handy feature called Incremental Static Re-generation from versions 9.5 and above. It has been five months now since v9.5, nonetheless, I thought the feature was really cool and I had to try it out.
Incremental Static Re-generation is basically a way to update static content on your sites. As we know using methods like Static Site Generation (SSG), we can pre-render sites (fetch data at build-time) and deliver content blazingly fast. While Next.js cares about delivering content almost instantly, they equally care about handling stale data or dealing with dynamic data.
Rebuilding a website for…
Next.js has introduced Automatic Image Optimization in versions 10.0.0 and above, using a built-in Image Component. It is an extension of the HTML element, evolved for the modern web.
Images make up one of the largest elements to be loaded on a page. Thus, we need to have a way to optimize images for better Web Vital scores.
Unoptimized images can take a toll on significant Web Vitals such as Largest Contentful Paint or LCP.
Largest Contentful Paint (LCP) is a Core Web Vitals metric and measures when the largest content element in the viewport becomes visible. …
I write about front-end technologies, development and best practices at large.