Rounding errors are a common issue in JavaScript and other programming languages when working with floating-point numbers. You might have encountered the problem when adding two decimal numbers like 0.1 + 0.2 and expecting the result to be 0.3 . However, the result is not 0.3 but 0.30000000000000004 . In a financial application you do not…
In this short tutorial, you will learn about multiple ways to show a loading spinner in React forms when using actions with a pending state. You can use the loading state to indicate that the form is submitting and prevent users from submitting the form multiple times. We will start with the following React form component that sends a message: In…
I explored Server Actions in Next.js 14 using Next's App Router and React Server Components (RSC). This comprehensive tutorial shows how to use Server Actions to create, read, update, and delete (CRUD) entities. Currently I am working on a new course called "The Road to Next" which will hopefully match the popularity of The Road to React . We…
A short tutorial about seeding a database with Prisma in a TypeScript application. I decided to write this tutorial, because many of my other tutorials depend on a database with an initial seeding and I want to reference it. Prisma: Seeding with TypeScript We will assume the following model for our database in the *prisma/schema.prisma** file: We…
A short tutorial about setting up a Next.js application with Prisma and SQLite. I decided to write this tutorial, because many of my other Next.js tutorials depend on a database and I want to reference it. Why this ORM and database? Prisma is a great tool to interact with databases and SQLite is a simple database to get started with. Next.js: Setup…
I delved deep into exploring Forms in Next.js 14 using Next's App Router, React Server Components (RSC), and Server Actions. This comprehensive tutorial covers React/Next native aspects like useFormStatus , useFormState and revalidatePath . The tutorial also provides detailed insights into form validation using Zod, error handling on a fine…
The year 2024 got me excited about React's ecosystem again. Despite the various challenges and dramas (the biggest one of them moving React to the server with React Server Components) we had last year, there are emerging React trends that everyone should have on their watchlist. Here is my list of exciting React trends for 2024. Astro (with React…
A question that comes to mind for every web development beginner: How to set up my web development environment as a web developer? The following guides have you covered, because they will teach you how to set up a minimal web development environment for MacOS or Windows. Even though you will start out with HTML, CSS, and JavaScript as a web…
In this article, you will find a step by step guide on how to install React on MacOS. It follows the philosophy of having one IDE to manage most of your web development tasks. That's how you can focus on your task at hand as a developer. However, if you like to compose your development environment with lightweight tools rather than with an full…
In this article, you will find a step by step guide on how to install React on Windows. There are plenty of articles out there on how to setup your web development environment on MacOS, but very few on how to setup it on Windows. Especially when people want to enter the world of React.js in Windows, there is a missing starting point. I wanted to…
