Relatable Code

Sharing web developer articles and memes

[relatablecode]

Testing a React Application: What is Vitest?

Ever wondered what Vitest is? I go over this modern test runner in my new article. #reactjs #programming #testing

Introduction Vitest is a unit-test framework that is “blazingly fast” and, wow, it is. Today I’ll be going over how to set up vitest and a brief explanation of how it works. Just for clarification, this is the third article in a series where I go over modern-day testing strategies for React applications. First part here Second part here What is a unit test? A unit test is a testing method…

View On WordPress

[relatablecode]

Testing a React Application: The Setup

Testing a react application is vital to its scalability. This is my second article in a series. I go over the initial setup the of page we're testing and the libraries. #reactjs #programming

Introduction The second part of my ongoing series on how to have a more modern approach to testing a React application. Last time I went over the tools I prefer using. 🔨 The first part is here. Cypress for End-to-End testingVitest for Unit TestingMSW for mocking our services In this post, I’ll go over how to install everything before heading into the testing. When first getting into testing…

View On WordPress

[relatablecode]

Testing a React Application: The Modern Approach

First article in a series where I go over how to create tests for React with a modern approach. #Reactjs #programming

Introduction Testing is a fundamental part of development. Testing a react application is no different. Once an application grows to a certain size it becomes one of the only ways you can have confidence that a change you make will not affect previous functionalities. The keyword here is confidence. A test is only good if it can make sure that an interaction a user expects, remains the sameMe…

View On WordPress

[relatablecode]

How to migrate Create-React-App to React version 18

Quick write-up on my experience migrating my create-react-app to Version 18 of React #programming #reactjs

Introduction React just recently came out with a new version of their library: React version 18. I have a few apps that I’ve been maintaining for a while now that we’re bootstrapped with Create-React-App. I’ll go over how to migrate to version 18 and the issues I ran into along the way. Here you can find the list of changes for React 18. I also have a small write-up for my thoughts on it…

View On WordPress

[relatablecode]

Rome vs Prettier. Trying out the new formatter on the block

I experimented with the new formatter on the block from the team at Rome. And it's crazy fast! Full article here:

Introduction Rome is designed to be a formatter, linter, bundler, and much more for JavaScript, Typescript, HTML, Markdown, and CSS. That’s a whole lot of change but it’s intended to be a one-stop-shop for web dev tooling. In this article, I’ll go over my experience in Rome vs Prettier. As a disclaimer as Rome is only focused on those languages the comparison will also only be focused on…

View On WordPress

[relatablecode]

Say goodbye to Yarn and say hello to PNPM

I start using pnpm over npm/yarn. I go over how much space I saved on my drive.

Introduction PNPM is a package manager that I have seen floating around for quite some time now. It’s tagged as a “fast, disk space-efficient package manager”. But in what ways? Well, let’s take the quote straight from them as well. Files inside node_modules are linked from a single content addressable storagehttps://pnpm.io/ Cool so all projects share the same node_modules. But…. let’s make…

View On WordPress

[relatablecode]

Quickly publish and install a library with GitHub Packages

Blog post! While working with my new blog site decided to look into GitHub Packages. Brief write-up on how to publish your own package to the service. #github

Introduction Github comes in with some pretty useful baked-in features, such as the ability to create your own package. In this tutorial, I’ll go over how to set up the Github Packages repository, then create a simple React hook, publish it and then install it in another project. Disclaimer: This tutorial assumes some basic knowledge of React! What is a package? A package is a file or…

View On WordPress

[relatablecode]

How to quickly sort imports with Prettier

New post 🚀 Short tutorial on how to sort imports with prettier. I get anxious seeing lots of disorganized imports 😅 #coding #programming

Introduction Having disorganized imports bothers me deeply when working on a project. I typically like to keep the entire codebase as organized as possible as it makes sifting through the files much easier. With the help of prettier and a plugin, we can easily sort imports! As a side note if you’re using ESLint I have another article to sort imports using that. Sort Imports: Setting everything…

View On WordPress

[relatablecode]

How to supercharge your HTML link tag with these four tricks

Few tips I've picked up along the way on how to create more optimized link tags. #tech #coding #programming #html

Introduction The HTML link tag is one of the first tags everyone learns about when first diving into HTML. The most common use case is to just load up a stylesheet and forget it about. <link href="/styles.css" rel="stylesheet" /> However, the link tag has been updated throughout the years and has several features that can supercharge the performance of your application if used correctly. Link…

View On WordPress