Introducing TypeScript into your JavaScript app introduces some rigidity to your code – you lose the complete flexibility of JavaScript, but gain a lot of robustness and reliability in your code. As you learn TypeScript however, you’ll find a lot of ways to quickly build dynamic types – the Record utility type is one of […]
Upmostly
https://upmostly.com/ · 110 posts · history since 2022 · active
13 Oct 2023
31 Aug 2023
Hey there, TypeScript enthusiast! Working with TypeScript, chances are you’ve come across the intriguing “unknown” type. It’s like that enigmatic puzzle piece that doesn’t reveal its true nature until you’ve cracked the code. Well, consider this article your ultimate decoder ring, as we dive headfirst into the captivating realm of converting TypeScript’s “unknown” type into […]
24 Aug 2023
Welcome aboard, TypeScript enthusiasts! Today, we’re diving into the world of array filtering with TypeScript. Filtering arrays is a crucial skill every developer should have in their toolkit, allowing us to effortlessly sift through data, and extract exactly what we need. So, grab your favourite beverage, sit back, and let’s embark on a journey to […]
31 Jul 2023
Next.js is a great React-based library, which includes some great features built-in that make getting started with your React app easy and simple. One of those features is the fairly new next/font package, which makes implementing fonts in your Next.js app quick and easy. Getting Started Google Fonts One of the great features of Next’s […]
13 Jul 2023
If you’re working with asynchronous code in TypeScript, you’ve probably run into Promises, an elegant solution to handling asynchronous tasks. With their clean syntax and powerful capabilities, promises have become an integral part of modern JavaScript development. TypeScript, being a statically typed superset of JavaScript, takes the benefits of promises even further by providing enhanced […]
13 Jun 2023
Hey there, fellow Next.js enthusiasts! Are you looking to add some visual flair to your web application? Well, you’re in luck! In this article, we’ll dive into the wonderful world of Font Awesome icons and explore how you can integrate them seamlessly into your Next.js projects. So, let’s get started and make your app shine! […]
31 May 2023
If you’re exploring the lesser-used features of React, you might come across forwardRef. It’s a method used to pass refs between parent and children components. In this article, we’ll talk through what refs are, forwardRef, and how to type forwardRef using generic type parameters. What are refs? In React, “refs” are a feature that allows […]
25 May 2023
If you’re building web apps in Next.js, you’ve probably had to iterate through an array at some point. This means you’ll have run into the issue of keys; unique ids for each element. In this article, we’ll talk about keys, when to use them, and how to create them. What are keys? The key prop […]
If you’re familiar with React, then you’ve probably heard of the useEffect hook. It’s one of the most powerful and commonly used hooks in React, and it allows you to perform side effects in your components, such as fetching data from an API or setting up event listeners. In Next.js, the useEffect hook is just […]
Have you ever visited a website with a long list of items, only to feel overwhelmed and lost in the sea of information? That’s where pagination comes in handy. By dividing content into smaller, manageable chunks, pagination helps users navigate through a website more easily and efficiently. In this article, we’ll explore how to implement […]
Event handling is an essential aspect of modern web development, enabling interactive user interfaces and dynamic content updates. However, ensuring type safety and preventing runtime errors can be a challenge when dealing with events in JavaScript. Luckily, TypeScript provides powerful features for typing event handlers and improving code reliability. In this article, we’ll explore different […]
Are you looking for a powerful and flexible framework to build your next web project? If so, you may want to consider Next.js. This React-based framework has gained popularity in recent years thanks to its many advantages, such as server-side rendering, automatic code splitting, and static site generation. Whether you’re building a simple blog or […]
12 May 2023
Views and components are one of the first things you’ll work with when starting a new project in Vue.js. In this article, we’ll explore the nature and functionality of Vue.js views and components, and see if there’s any difference between them. Views in Vue.js are components that point to the actual web page you want […]
1 May 2023
AWS Amplify is a cloud development platform that streamlines the deployment of web applications, making it easier for developers to focus on writing code. With AWS Amplify, you can quickly deploy your Next.js app to the cloud and take advantage of its powerful features. In this article, I’ll guide you through the process of deploying […]
If you’re a developer working with Next.js, you may have found yourself needing to load data from a file in your application. This could be anything from a JSON file containing configuration settings to a CSV file with data that needs to be processed and displayed on your site. Loading data from a file in […]
If you’ve been using TypeScript for a while, you’re probably familiar with the “any” type. This type is often used as a placeholder for a value whose type is unknown or difficult to specify. While using “any” can make your code more flexible, it also comes with a number of drawbacks. For example, it can […]
Have you ever found yourself working on a web application and needing to handle query parameters in a type-safe way? If so, you’re in luck! TypeScript provides powerful tools for working with query parameters that can help you catch bugs at compile time and write more maintainable code. If you’re using Next.js, you might also […]
21 Apr 2023
One of the key features of TypeScript is the powerful ability to use union types. These types allow you to combine multiple types together in powerful ways, making it easier to work with complex data structures and functions. In this article, I’ll explain Union types, and when to use them. A union type is a […]
If you’re working with Typescript and dealing with text processing, you might have heard of a powerful tool called “regex.” Regex, or regular expressions, is a pattern-matching language that allows you to search for specific patterns in text strings. It’s a versatile tool that can be used for a wide range of text processing tasks, […]
Sending emails is an essential part of many application. In this article, we’ll work through a full-stack solution for sending emails in Next.js, using Next.js API routes, along with SendGrid, a great API service for sending emails. Setting Up To use SendGrid, you’ll need to create an account. Head over to their website and sign […]
28 Mar 2023
If you’re new to TypeScript, you might have noticed that there are three different keywords that you can use to declare variables: var, let, and const. While they might seem interchangeable at first, there are some important differences between them that you should be aware of. In this article, we’ll explore what each of these […]
If you’re working with arrays in TypeScript, you’ve probably come across the map() function. The map() function is a powerful tool that allows you to transform each element of an array into a new element, based on a function that you define. Here’s what the function looks like: The map function accepts a function that […]
Checking for null and undefined is a common task in TypeScript (and JavaScript in general), and there are several ways to do it. In this article, we’ll explore some of the most common techniques for checking null and undefined values in TypeScript. Equals The most straightforward way of checking is of course the equality operator […]
22 Mar 2023
Email validation is a crucial part of any web application. It ensures that the user input is valid and can be used for various purposes like registration, login, and communication. In this article, we will walk through how to validate an email address in a React application with a few different approaches. Regex The most […]
Next.js is a popular React-based framework that enables server-side rendering, automatic code splitting, and simpler client-side routing. In this article, we’ll discuss how to send data from one component to another in Next.js. There are a few approaches you might take to passing data between components. In this article we’ll go through: Props One of […]
Looping through an array is a common task in programming, and Typescript offers a variety of ways to accomplish this task. If you’re using React, you might be interested in this article on for loops in React. In this article, we’ll explore some of the different approaches to looping through an array in Typescript, and […]
21 Mar 2023
Introduction Web development is an ever-evolving landscape, with JavaScript frameworks playing a significant role in modern web applications. As a developer looking to stay relevant and ahead of the curve, mastering these frameworks is essential. In this article, we will provide you with a comprehensive learning path to help you navigate the world of JavaScript […]
20 Mar 2023
In the ever-evolving world of front-end development, Vue.js has emerged as a popular and versatile JavaScript framework. Its ease of use, powerful features, and excellent performance make it a top choice for developers looking to build scalable and maintainable web applications. One of the core features that sets Vue.js apart is its directives, which offer […]
14 Mar 2023
Prettier is a popular code formatter that can help keep your codebase organized and consistent. In this article, we’ll walk through how to set up Prettier in a Next.js project. Set-up Firstly of course you’ll need to install Prettier. You can do this with the following command: This will install Prettier, and add it as […]
Are you tired of dealing with tedious form validation in your React applications? Look no further than React Hook Forms in Next.js! RHF is a React hook that provides a simple and intuitive API for managing form state, validation, and submission. It supports both controlled and uncontrolled components, as well as dynamic form fields, custom […]
Animating components on scroll is a great way to add a touch of interactivity to your web application. It can help you create engaging user experiences that make your application stand out. In this article, we will explore how to use Framer Motion to animate components on scroll in Next.js. Set-Up First of all, you’ll […]
3 Mar 2023
What is the Context API? The Context API lets developers pass data down the component tree without having to use props. It is a way to share data across multiple components without having to pass props through each level of the component hierarchy, i.e. to avoid “Prop Drilling” The Context API consists of two parts: […]
Next.js is a popular open-source framework used for building web applications with React. One crucial aspect of web applications is authentication and authorization, which can be a complicated process to implement. This is where Auth0 steps in. Auth0 is a cloud-based identity platform that simplifies the process of adding authentication and authorization to web applications. […]
Optional chaining is a powerful feature introduced in TypeScript 3.7. It lets you safely access properties and methods of an object without having to worry about the object being null or undefined. This can help prevent runtime errors and make code more concise and readable. The Problem One of the most common problems in programming […]
28 Feb 2023
When developing TypeScript applications, you may need to delay the execution of a function for a certain amount of time. Delaying function execution can be useful for a variety of reasons, such as waiting for an animation to complete or for an API request to finish. In this article, I’ll show you how to delay […]
Hey there! If you’re a web developer, you know that navigation bars are a crucial part of any website. In this article, I’ll show how you how to build a nav bar in Next.js, from setting up your project to creating components styling with TailwindCSS, and animations with Framer Motion. Setting Up First, we’ll need […]
20 Feb 2023
React Query is a popular library for fetching, caching and managing the state of your data in React applications. Next.js is a great framework for building server-rendered or statically exported React applications. Together, they can make building fast and efficient data-driven applications even easier. We also have an article covering using React Query in vanilla […]
The spread operator in TypeScript is a powerful feature that allows you to easily expand the contents of an array or object. This can come in handy when you need to make a copy of an existing object or array, or when you want to merge multiple arrays or objects together. What is the spread […]
13 Feb 2023
After working professionally with React for some time now, I thought it might be helpful to share some of my experience with React, especially the Re-rendering process, in the form of a Definitive Guide. In this article, I’d want to dive deeper into this topic and provide a more straightforward way of understanding how the […]
Search bars are a UI element you encounter on most websites; they help users find resources quickly through automatic suggestions. Adding a search bar to your application can drastically improve the UX by making your resources more accessible and more intuitive to search for. In this tutorial, we’ll create a simple, reusable, and customizable Search […]
In the world of web development, creating a dynamic and user-friendly interface is key to delivering a great user experience. One way to achieve this is by implementing an accordion menu, allowing for a clean and organized content display. In this article, we will explore the process of building a custom accordion menu using pure […]
30 Jan 2023
TailwindCSS is a popular utility-first CSS framework that allows developers to quickly and easily build responsive, consistent user interfaces. Next.js is a popular React-based framework, which works perfectly with Tailwind. If you’re using vanilla React, we also have an article covering using Tailwind with that here. In this article, I’ll show you how to set […]
Fetching data in a Next.js app is an essential part of building any web application. Axios is a popular library for making HTTP requests in JavaScript. It can be easily integrated into a Next.js app to handle the fetching of data from an API, and in this article I’ll talk you through that process. Set-up […]
27 Jan 2023
Hash routing is a technique used in Single Page Applications (SPAs) to enable navigation through different views or components without reloading the entire page. How does Hash Routing work? It works by updating the URL in the address bar with a hash symbol (#) followed by a route, also known as a hash fragment. When […]
The Shadow DOM is a technique for creating and using isolated, reusable parts of a web page’s structure and styling. Introduction The Shadow DOM allows developers to encapsulate the structure and styling of a particular element or component so that it can be easily reused and integrated with other parts of a web page without […]
Preloading and Prefetching are two techniques that can be used to improve the loading performance of a web application. These techniques are particularly useful for optimizing the loading time of resources, such as images, stylesheets, and JavaScript files, which are required for the application to function correctly. In this article, we will explore how to […]
Introduction React is a popular JavaScript library for building user interfaces used by many developers worldwide. One of the tools that can help developers build React applications more efficiently is a build tool. What is a Build tool? A build tool is a software that helps automate the process of building, testing, and deploying an […]
Fiber is a reconciliation algorithm used in the popular JavaScript library React to efficiently update a web application’s user interface (UI). It was introduced in version 16.0 of React in 2017 and has significantly improved the performance of React applications. What is reconciliation in React? In React, when the state of a component changes, the […]
26 Jan 2023
Chakra UI is a popular library for building user interfaces with a focus on accessibility and developer experience. It provides a set of reusable components that can be easily integrated into any project. In this article, we will go over the process of setting up Chakra UI with Next.js, a popular framework for building server-rendered […]
Framer Motion is a powerful animation library that makes it easy to create smooth, complex animations in your Next.js projects. In this article, we will explore the benefits of using Framer Motion in a Next.js project. By combining the two, you can create highly interactive and visually appealing Next.js applications with minimal effort. Let’s walk […]
23 Jan 2023
Functional components in Next.js are executed exactly like regular functions; they return some custom HTML used to render your component. This means any values in the function are initialised when you call the function, resetting them every time your component renders. You can use the useState hook to persist values across renders. Example Here’s the […]
Uploading a file to Amazon S3 (Simple Storage Service) in a Next.js application is a straightforward process that can be accomplished with the help of the AWS SDK (Software Development Kit) for JavaScript. Getting Started First, you’ll need to set up an S3 bucket in your AWS account, and make note of the access key […]
18 Jan 2023
Introduction Access modifiers are a feature of object-oriented programming languages that determine the accessibility or visibility of class members (properties and methods). In TypeScript, there are four access modifiers: public, private, protected, and readonly. These modifiers can be applied to properties, methods, and constructors to control how they can be accessed and modified within a […]
NPM, or the Node Package Manager, is a crucial tool for any developer working with Node.js, the popular JavaScript Runtime Environment. It allows developers to easily share and reuse code and manage their projects’ dependencies. In this article, we will explore what NPM is, how it works, and why it is so essential within the Node.js ecosystem. What […]
Introduction If you’ve ever worked with Dates in JavaScript, you sure know how clunky and hard to work with they are; that’s why, recently, there has been a proposal for a brand new way of working with them, you’ve guessed it— Temporal API. Now, what is it? If we take the Introductionary information that they […]
Introduction Abstract classes are a powerful feature in TypeScript, a popular typed superset of JavaScript. They provide a way for developers to define the structure of a class without implementing all of its methods. In this article, we’ll go more in-depth to understand why, when, and how we would use Abstract Classes in our TypeScript […]
Error handling is a crucial aspect of software development, and it is especially important in the world of React, where components can be nested and complex. Proper error handling helps to ensure that your application remains stable and functional even when something goes wrong. In this article, we will explore some best practices for adding […]
3 Jan 2023
Scrolling to the top of a page can be a useful feature to include in your Next.js website or application. It can be especially helpful when a user has scrolled down a long page and wants to quickly return to the top. In this article, we’ll explore how to implement this in Next.js. We also […]
The reducer method is a very useful array method. It lets you process an array item by item, reducing this to one variable. By default, the return type of the reducer is a single item of whatever your array returns. You can change the return type by providing a different initial value to reduce. In […]
14 Dec 2022
Google Fonts is a great collection of free fonts to use in your web app. Thanks to Next.js, using any font from Google fonts is very streamlined and simple. In this article, I’ll talk you through the Next.js method, as well as a method that works for older versions of Next.js. next/font One of the […]
You can read and write files in TypeScript using the “fs” module, which is a Node module containing methods for file system operations. The module is very versatile and provides a lot of different ways of reading from and writing to files, so in this article, I’ll talk you through them. Reading Files Synchronously If […]
Environment variables are variables passed to your app when it starts. They’re called so because they’re part of the environment your app will run in. They’re useful for things like telling your application if it’s running in production or development mode, or passing in values like API tokens or API URLs. If you’re looking to […]
13 Dec 2022
Splitting an array into chunks might be a common problem you’ll run into in your TypeScript apps. In this article I’ll talk you through my approach, how that works, as well as the Lodash approach. Using Reduce One simple approach to this problem is to use reduce. Reduce is a very useful method for processing […]
PM2 is a Javascript process manager. It’s used to handle automatically managing your application in the background. A common use case for PM2 is deploying a Node.js app on a server. PM2 can help to handle storing configurations for the app, starting your app and handling things such as automatically starting your app with your […]
8 Dec 2022
Axios is a popular library for performing API calls in JavaScript-based apps, including TypeScript. Luckily Axios provides its own TypeScript typings with the library, meaning you don’t need any extra libraries for it to work with TypeScript. Today I’ll talk you through using TypeScript with Axios, by providing a type to their generic functions, and […]
Function overloading is an OOP feature. It lets you define multiple functions with the same name, but different implementations. TypeScript has semi-support for function overloading; it allows you to to define multiple signatures for the same function, but only one implementation. This can still be useful, however, and in this article, I’ll explain how to […]
4 Dec 2022
Next.js provides multiple methods of pre-rendering your content for your app. You can check out a comparison of these different methods here, but today I’ll be covering Static Site Generation with getStaticProps(). Static Site Generation pre-renders your content at build time, so that it can serve that part of your app as a static HTML […]
Modals are a very useful piece of UI, used to display separate pieces of information, like dialog boxes. You can implement modals very easily in React, thanks to some useful patterns, like the state hooks, and the context API. In this article, I’ll talk you through building a basic, but very extensible modal system. Here’s […]
30 Nov 2022
Strapi is a headless CMS, or Content Management System. If you’ve ever used a site editor like WordPress or Squarespace, these give you a back-end CMS, where you edit the content, and the front-end “head”, which handles displaying/rendering your content. With a headless CMS like Strapi, you can manage your content in the back-end, and […]
Markdown is a simple syntax for formatting text files. If you’re used to GitHub, you’re probably familiar with creating and editing readme.md files in your repos. MDX is an extension of markdown that adds support for JSX. Using Next.js’ Static Site generation, we can create a very simple to use, fast and light blog, with […]
25 Nov 2022
GitHub Pages is a great free resource for hosting unlimited static sites. You can build your Next.js app into a static site using Next’s export feature. There are a few features of Next.js you won’t be able to use with this, but in this article, I’ll talk you through deploying your app, and what you […]
LocalStorage is an API that lets your site store things in the browser, to persist things when you leave the site. If you’ve ever wondered how browsers do things like save your settings and preferences, there’s a good chance they’re using LocalStorage. Checking the website for the game Wordle, for example, we can see what […]
17 Nov 2022
Due to its simplicity of usage and learning curve, Vue.js is the JavaScript framework of choice for a large number of front-end developers. The heart of the Vue framework are components, which make it much easier to transition quickly from an idea to a usable user interface. One of the best features of Vue is […]
TypeScript 4.9 beta is introducing a new operator, the “satisfies” operator. The short version is that this operator lets you ensure a variable matches a type, while keeping the most specific version of that type. You can check out the discussion on the feature here, but in this article, I’ll talk you through how to […]
TypeScript provides some useful primitive types that you’ll be using every day. In this article, I’ll explain them, what they’re for, and the TypeScript-specific primitives. number The number type works as you expect in TypeScript, covering all the ways JavaScript allows you to represent a number: You can also easily convert a number to a […]
15 Nov 2022
A new version of Next.js has been released, featuring some great improvements for performance and usability, as well as some interesting new features, which I’ll talk you through in this article. Important features in Next.js 13 are New app/ Directory Turbopack – A new module bundler to speed up your apps next/image – Some changes […]
There are a few scenarios you might want to be splitting strings in TypeScript, whether it’s splitting a paragraph by newline characters, splitting a list by commas, etc The .split() Function Let’s explore the .split() function using a file just containing some randomly generated emails. We can really easily load these emails into TypeScript using […]
TypeScript is a highly useful extension to JavaScript, that helps your code to be sound and robust. In this article, I’ll help you cover typing your React props in TypeScript, as well as some helpful common types to help you out. Interfaces vs Types for Props There’s a lot of discourse online for whether or […]
14 Nov 2022
Introduction As you might know, TypeScript gives us plenty of beautiful features that highly enhance the development experience, such as: Strong Static Typing support Support for major IDEs Error highlighting at compile time Great integration with other tooling to provide hints Microsoft has continuously supported it back since 2012. Edge Scenario of Strong Static Typing […]
Keeping all code in one file is rarely a good practice, and we know this is especially true when working with React. However, if you have not yet worked with React, don’t worry, as the topic we’ll discuss about today is not directly tied to React but rather to TypeScript’s unique way of dealing with […]
TypeScript provides a lot of utilities to help us write better, more scalable, better-structured, and overall safer applications. One of these utilities comes under the form of Utility Types, which we’ll discuss in this article. The concept of Utility Types in TypeScript is tightly tied with that of Generics, so if you aren’t already familiar […]
Introduction Sometimes rigid structure can allow us to build robust and solid foundations for modern applications, and TypeScript’s Enums will enable us to do precisely that. Since version 2.4 of TypeScript, we have been able to use Enums, a data type provided to us with configurability and “flexible rigidity” in mind. What are Enums? To be more specific, Enums are…
Introduction TypeScript gives us a handful of tools to ensure the best developer experience and application-level sustainability; two of these tools are Type Aliases and Interfaces. We’ve previously written articles on both of these ways of defining new named types; if you haven’t already checked those articles out, be sure to use the links below: […]
13 Nov 2022
Your website can feel more contemporary and provide a better user experience by using Vue Transitions and Animations. Fortunately for developers, setting up a Vue animation only takes a few minutes. After reading this tutorial, you’ll be able to use Vue’s transition element, know how to use it to make various animations within this framework, […]
8 Nov 2022
Merging arrays is a common task you’ll face in most programming languages, especially merging arrays while only adding unique values. In this article, I’ll talk you through a few approaches to this in TypeScript, as well as the unique TypeScript quirks you might face. If you’re trying to solve this problem in React, why not […]
TypeScript string literal types are a great tool that let you define a type as a literal string value. They’re also really useful when combined with type unions, commonly used as a sort of alternative to enums, when you just want to deal with strings. Here’s a simple example of a string literal union. Anything […]
3 Nov 2022
If you aren’t already familiar with the concept of interfaces or what they are in TypeScript, be sure to check out this article first, as Interface Declaration Merging is linked directly to them. Otherwise, we shall proceed with the rest of the article. What Does Interface Declaration Merging Refer To? You might find yourself needing […]
If you’ve worked with TypeScript extensively, you would know that we cannot inherit or extend from more than one class at a time. However, this inconvenience is something we can get around by using something called Mixins. So, what exactly are Mixins? Introduction to TypeScript’s Mixins As mentioned prior, Mixins allow us to inherit from […]
Similar to Type Aliases, TypeScript’s Interfaces provide us a medium to avoid code duplication across our TypeScript codebases. If we were to look at the alternative way of defining types, we would find ourselves defining and redefining types inline each time we want to benefit from TypeScript’s strong static typing system. What Is an Interface? […]
We may find ourselves defining the same Type in different places, which is not ideal, considering all the bad things we often hear about code duplication, but what can we do? The answer to that is Type Aliases. TypeScript allows us to reuse certain types by defining them the same way we would otherwise define […]
You may already know that, in React, we may map over a collection of items (Such as an array) using various iterator methods, such as Array.prototype.map or the trusty for loop outside JSX and generate Components or JSX Elements as we go. You can learn more about Iterators in React in this article. However, you […]
2 Nov 2022
The groupBy function is generally used to group arrays together by a certain condition. You can easily go for a built-in solution, such as lodash’s groupBy function, or implement it yourself in TypeScript. Lodash _.groupBy Lodash is a library that contains a large selection of utility functions, such as for flattening arrays, sorting arrays, debouncing […]
Conditional types in TypeScript help you to create types depending on another type, by checking if that type satisfies some condition. In their simplest form, they take the format of: Here’s a simple example, checking if a type can be converted to a string. Here I’m looking for which of these primitive types in my […]
28 Oct 2022
The concept of portals, or a means to transport template HTML to various regions of the DOM inside an app, is one of the new features of Vue 3 that has been in the making for a while. The portal-vuelibrary in Vue2 allowed users to create portals, a React functionality that is frequently used. But […]
27 Oct 2022
When we’re working with a multi-layered Vue app, we typically utilize props to transfer data from a parent component to a child component. This has been made simple and easy to perform with Vue.js. However, passing data from a parent-level component to a nested child component that’s several levels deep has surely frustrated most Vue […]
If you’ve worked on larger projects that do not already use Redux, you’ve probably encountered Prop Drilling and know how annoying and bad-looking that process is. However, if you haven’t, there is an article on the subject that you can check out here. One solution to that problem, as well as some other architectural ones, […]
Introduction Not so long ago, in version 3.0, TypeScript introduced a new `unknown` type to its toolkit, but what does this type do, and more specifically, when should we use it? This article will look at this “new” type to better understand its goal. We’ll also consistently compare it to its sibling, the any type; […]
One of the most important things when writing scalable applications is ensuring that the components that make up those applications are scalable and, thus, reusable by themselves. When working with TypeScript, one of the utilities that ensure units of work are reusable and scalable is Generics. Introduction to TypeScript’s Generics Generics are not exclusive to […]
When working with TypeScript or migrating an already existing codebase over to TypeScript, it is crucial to know how to handle typing properly. One tricky typing scenario to get right is when we decide whether or not to use any for a particular scenario. In this article, we’ll discuss about the any type; what it […]
26 Oct 2022
As JSX projects get increasingly complex, we often find ourselves reverse-engineering whole chunks of code to fix or change existing functionality. JavaScript doesn’t really help in that regard, especially when trying to figure out what specific code snippets do unless they have been run first. Intro to TypeScript Suppose you are not already familiar with […]
25 Oct 2022
Mapped Types in TypeScript let you transform one type to another, by transforming the keys from one type to another. TypeScript offers a lot of flexibility with this, allowing you to modify the name of types, perform string interpolation on keys and more. In this article, I’ll explain their utility, with a few useful examples […]
The builder pattern in TypeScript is used to give a more flexible solution to creating complex objects, by breaking the construction up into separate steps. An example of this is the Promise class, which you may be familiar with. The builder pattern is useful for building complex objects. It lets you break up construction into […]
17 Oct 2022
We have talked about different state management techniques in a reactJS application, to maintain the state of your application in a global store so that it can access any of the components inside the application wrapped by the provider. The techniques are Redux Context In this one, we are going to take a look at […]
ReactJS is an open-source JS library. Developers make front-end applications UI using it. React makes a developer’s life easy as it is very easy to make an interactive application with all sorts of functionality. But there is some more effort when it comes to making your end-user stick to your application and for that, the […]
13 Oct 2022
As your project continues to grow, it also begins to be harder to track and control, especially in the case of more developers joining the project. So what can you do? In order to avoid creating a messy project that’s fuelled by spaghetti code, some common conventions, methodologies, and tools shall be set up, favorably […]
Most modern web applications today use complex color palettes, style guidelines, styling patterns, as well as many other methodologies and concepts in order to provide visually-stunning user interfaces which are not only pleasant to look like but are also intuitive due to the positioning of certain UI elements and the color schemes used. However, the […]
When it comes to styling out components in React we do have plenty of choices ranging from vanilla CSS, to CSS/SCSS Modules, to even using a UI library/framework such as Bootstrap or Material UI. However, when it comes to integrating them with our React applications, something doesn’t feel right, especially when trying to conditionally style […]
If you’re new to React you might be a bit confused about the whole data flow concept that you keep hearing about when researching more about React and the way that state and props work. No worries, as in this article we’ll go over an essential part of the unidirectional data flow of React, which […]
It often happens that, as a React Developer, you’re working with big data objects containing a lot of nested properties, especially those coming from an external API. Because of that, it’s not always possible for us to tell the exact shape of the object at runtime, as sometimes, due to unforeseeable issues, our objects come […]
9 Oct 2022
React Router v6 has made it possible to pass props to the components normally. Earlier, in the older version of react-router, we need to use Route’s render method to pass props to the component. In this tutorial, we will be using React Router v6, so make sure you’re using the same version. Let’s get started. […]