Olivia Coumans' site
In this article, we’ll explore various settings we can add to our Git config to make it nicer to work with when using the Git command-line interface. We’ll look at Git aliases, customizing the Git pager, and custom functions you could build on top of Git. One of the best aspects of using the Git CLI is the number of customizations you can add to match your workflow. The beauty of it is that all…
If you maintain an npm package, you might want to test changes locally in an app that depends on it before publishing. This article shows how to do that using yalc , an alternative to npm link and yarn link . In this tutorial, we’ll use a common real-world example: a shared frontend configuration package consumed by an application. We’ll add new configuration settings to the frontend config…
fzf is a command-line fuzzy-finder you can run in your terminal to filter any list of files, command history, and more. fzf is versatile and can be used in combination with other tools such as grep and Git. In this blog post, we’ll explore how to create small bash helpers for Git using fzf . By the end of this post, you’ll understand what fzf is and how to combine its power with other tools. I…
jq is a useful command-line tool to process a JSON payload quickly. I tend to use jq in conjunction with curl to explore third-party APIs. jq is a powerful tool for filtering or transforming JSON data. In this article, we’ll explore a couple of its functionalities while playing with two free third-party APIs. The goal is to become more comfortable with jq by the end of the blog post and to have…
Git hooks are a great way to automatically run specific tasks (such as formatting or linting tasks) at key moments in your Git workflow. In this post, we'll explore Git hooks and walk through how to set up a pre-commit hook using Husky and lint-staged to lint and format your staged files automatically. Let’s dive in. What are Git hooks? As mentioned in the Git documentation , Git hooks are a way…
When writing HTML, I often ask myself all kinds of questions. For instance, when should I use an <article> element? Is it valid HTML to use a <p> tag inside an <li> ? The HTML specification has been my go-to resource for answering these questions, particularly the fourth section, "The elements of HTML" . It is an incredible resource, but navigating it can feel a little overwhelming at first. This…
I first encountered the concept of "table driven tests" when coding in the beautiful Go language . The technique is straightforward: You create a table (an array in your JavaScript code) to define the cases you want to test. Then you let the test runner loop through all the test cases. It is an extremely efficient technique for adding new test cases, reducing the boilerplate, and testing a lot…
In this blog post, we'll explore various techniques for code splitting in React applications. We'll cover methods like lazy loading components, dynamic imports, and route-based code splitting. Throughout the article, we'll use a demo app to illustrate each technique so you can follow along and implement these concepts in your React projects. If you’d like to code along, feel free to clone the…
In this guide, we'll walk through the steps to set up HTML validation for React components using Vitest. You'll learn how to ensure your components adhere to proper HTML structure, improving code quality and catching errors early in the development process. What is HTML validation, and why does it matter? You may have already used a service like W3C validation service for your web pages. This type…
Apart from its cool name, tmux is also a great tool to make your developer life easier. In this post, we'll look at the purpose of tmux and some basic terminology. We'll write a tmux configuration that is enough to start using it and look at the most common commands. Why use tmux? Have you ever gotten lost switching between a tab in iterms where you run your tests while another tab runs your…
Typescript's version 3.0 introduced a new type, unknown . Contrary to any , we do not opt out entirely from the type system by assigning a type unknown to a value. This blog post will explore the purpose of unknown and some key differences between unknown and any . Purpose of unknown The purpose of unknown is similar to any . It is used to represent any possible value. We might want to write a…
Generics can be hard to grasp when first learning TypeScript. This post will review what generics are and why we use them. We'll then move on to explore generic constraints. They are a handy trick to keep in mind to build more type-safe code. Generics as a superpower to build reusable code The whole idea behind generics is to write functions or data structures that can work with many different…
Recently, I discovered a useful functionality of git log while cleaning up some code. You can pass an option to git log to get back a list of all the commits that changed a particular string. Let's explore that feature! Using git log -S If you want to find all the occurrences of a specific string in your git history, git log -S is perfect for the job. For example, if you look for a particular…
In this post, I’ll share tips on using the Vim plugin in VSCode. It’s an excellent way to explore a different editing style and get a feel for Vim without leaving your current setup. The plugin provides access to Vim’s modes and motions with minimal configuration. I originally started using Vim to rely less on my mouse, and it’s made a huge difference. These days, I regularly switch between VSCode…