Full Stack Developer, Tech Geek, Audiophile, Cinephile, and Lifelong Learner!


Short Handbook for TypeScript types, interfaces and generics

TypeScript is a programming language that extends JavaScript by adding types. Types are annotations that describe the kind of data that a variable can hold, such as numbers, strings, booleans, arrays, objects, functions, etc. In this post let’s explore the noteworthy ways to declare and use types, functions, interfaces, generics, and classes in TypeScript. Benifits of Using Types You might be wondering why bother with types if JavaScript works fine without them, after all! With TypeScript, you can avoid common errors like typos, null pointer exceptions, or incorrect function calls. You...

Let’s Explore The Improved Routing, Layouts & Rendering in NextJs 13

Next.js 13 was recently released at the Next.js conference. Many new features are included, including new routing, a new way to fetch data (React suspense), Vercel fonts, og image generation, layouts, and more. These new features have the potential to be game changers, and they promise to be extremely fast. But not without consequences. Let’s go into more detail about them. Turbopack: The successor to Webpack. Turbopack, the brand new build tool led by the creator of Webpack, Tobias Koppers, will be the Web’s next-generation bundler. Rust was used to construct it from the ground...

Why Should We Use Context API Instead of Redux For New React Apps

When creating a new React application, we think about redux as a state management solution as a default choice. Let’s have a look at the Context API as a possible replacement. If you’re building a new React app today, your instincts may urge you to choose Redux. But should you start with Redux? That has turned into a legitimate question these days. The state management capabilities of React have vastly increased in recent versions. I’d want to discuss a more straightforward technique that relies on the Context API in this post. Let’s Take a Look Back Why Did We Adopt...

Crud Using React Hooks and Context API

React Hooks and Context API are two relatively new features that have been added to React from v16.8 and v16.3 respectively. In this post, I'm going to create an app that can perform CREATE, READ, UPDATE and DELETE utilizing Hooks and Context API together.This new concept was introduced in v16.8 which is an alternative to classes. The Devs who used React before are familiar with functional components and class components. Many of these features available to classes - such as lifecycle methods and state weren't available to React until Hooks were introduced. The new Hooks add those class...

Top new javascript features introduced in es2020

Since the addition of ECMAScript in 2015, the overall state of the art of the development in JavaScript has emerged to a new height. The JavaScript language specification has been regularly revised with new features every year. The ECMA International is calling these features new ECMAScript 2020 or JavaScript ES11(see intro here). In this post, we are going to discuss a few new interesting features of those. LET’S DIVE INTO THE NEW JAVASCRIPT FEATURES

Create a custom progress bar using html5

A new element was introduced in HTML5 which adds the progress-bar feature to native HTML. It allows us to show the progress of certain tasks, like uploads or downloads, basically anything that is in progress. In this post, we are going to customize and style the progress-bar with animation. It’s very simple to use the new element for progress-bar. This element can be added using tag in the code. This element has three attributes, , and . Sample HTML as follows:

Customize File Input Element Using JavaScript & CSS

There are numerous ways to customize the file input element in HTML. In this post, we are going to make the file input element more attractive using JavaScript and CSS. We are going to use one element to show an icon and one to show selection text inside a along with to design the input element. So the label is the container for SVG icon and span text. This is how our HTML code looks like:

Full Stack Developer, Tech Geek, Audiophile, Cinephile, and Lifelong Learner!