Sign in

I write about front-end technologies, development and best practices at large.
Zustand — A simple, fast, and convenient state-management solution using Hooks API.
Zustand — A simple, fast, and convenient state-management solution using Hooks API.

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…


I have been trying to learn Next.js for a few weeks now. I have read a few blogs and have found Next.js very intriguing in terms of its added functionality such as server-side rendering and generating static websites. To be honest, I have already started liking it enough and wanted to build a quick application using Next.js’ data fetching techniques. Shoutout to for his amazing on incorporating Next.js with Prisma.

I won’t be using Prisma for the sake of simplicity and the data for our application would be fed from a static JSON file.

Primarily, Next.js has…


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 Post component…


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.

Table of Contents


Cover
Cover

I have been writing Typescript a lot lately. I’m using it when I work on personal projects or when I’m working with a team. At first, I was just snowed under the fact that I would have to write so much more code and that didn’t really motivate me to pick it up. But that didn’t really stop me from not trying at all. I’ve read so many compelling blogs that proved why Typescript is a must-try and how it helps build scalable web applications, that I couldn’t help but try and get a taste for myself.

I wanted a…


Introduction.

Nest (NestJS) is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, and is built with and fully supports TypeScript. —

Essentially, NestJS is a layer on top of Node that has supercharged methods and implementations that can help us write server-side applications quick and easy. Nest is very convenient to content all your needs. It is highly customizable and by default uses Express under the hood but can be optionally configured to use Fastify as well!

Why might we need Nest.js when we have Node.js?

  • Nest provides a layer of abstraction on top of Node, which means that it can now leverage…


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.

What are Web Vitals?

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…


Styled Components in React
Styled Components in React

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.

But with constant updates and improvements, we now have with us something known as styled-components. Styled components are basically an innovative way of using Javascript’s ES6 syntax, along with CSS which enables us to enhance our styling in React components. From very old and basic .css files to .scss

Sboro

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store