Shadcn is a set of reusable UI component patterns for use with React applications. However, instead of importing the elements like a traditional component library (@somewhere/ui), you add a local copy of the component source files into your project. This allows you to customize, extend, and shape the components to fit your particular needs. Shadcn […] The post Shadcn 101:…
#typescript
66 posts
17 Jun
4 Jun
Below, you’ll find a tour of CQRS, Event Sourcing, and Projections as they actually appear in a real production NestJS + KurrentDB + PostgreSQL + Drizzle codebase. It’s roughly a 15-minute read. The goal is not just to discuss what these patterns are, but why they are shaped the way they are, and where they […] The post CQRS and…
27 Apr
Previously, I showed how you can use JSDoc and jsconfig.json as a replacement for TypeScript style type checking — without a build step, no less. At the end of that post I teased an ESLint follow-up. And here we are, I’m happy you’re here. First Things First Before jumping in, I wanted to address a […] The post More on…
12 Apr
The OM-84 Omnichord, released in 1984 Outside of my 9-to-5 job as a software engineer, I play keys in a six-person cover band. A few months back, our drummer came into rehearsal exclaiming, “Georgia, you won’t believe what I found on Facebook Marketplace!” He reached into his backpack and pulled out an Omnichord. What the […] The post How to…
9 Apr
Here’s how I replaced Payload CMS’s built-in login system with Better Auth so an Next.js site and its Payload admin panel could share the same authenticated session. Using Payload CMS If you’re comfortable working in a Next.js app, and you haven’t given Payload CMS a try, you really should. It’s a config-first Typescript CMS that […] The post Use Better…
29 Jul 2025
I'm working on a NestJS project that uses monorepo mode. It consists of a number of separate microservice applications that each have their own Docker container that are managed in development using Docker Compose. I like step-debugging in my IDE and so needed to set it up for this application. This is what I did. The application setup Each service…
4 Jul 2024
TypeScript significantly improved JavaScript development with enhanced code reliability and maintainability, ensuring fewer runtime errors and greater productivity for developers. But when you start working with it, the syntax can sometimes feel overwhelming. One of the most intimidating features in TypeScript is “generics”. Look at the example below 🤯 aren’t you afraid ? Types declarations from @tanstack/react-query (library) that can…
21 Jan 2024
Writing testable code is a vital skill in software engineering. Let’s explore practical advice, strategies, and tactics for writing more testable code, unlocking the benefits of modularity, reusability, and high quality software in your projects. Embracing testability in your coding practice isn’t just about catching bugs; it’s about fostering a culture of quality and efficiency in your projects. A good…
31 Dec 2023
The world of JavaScript has evolved significantly, and interview trends have changed a lot over the years. This guide features 10 essential questions that every JavaScript developer should know the answers to in 2024. It covers a range of topics from closures to TDD, equipping you with the knowledge and confidence to tackle modern JavaScript challenges. As a hiring manager,…
13 Oct 2023
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 […]
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 […]
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 […]
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
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 […]
1 May 2023
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 […]
25 Apr 2023
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, […]
5 Apr 2023
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
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 […]
3 Mar 2023
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 […]
20 Feb 2023
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 […]
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 […]
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 […]
3 Jan 2023
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
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 […]
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 […]
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 […]
17 Nov 2022
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
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: […]
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 […]
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 […]
27 Oct 2022
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 […]
1 Sept 2022
Groupon maintains literally hundreds of NPM modules, both open source and internal. Many of these are consumed by our custom NodeJS-based middleware web layer we call “The Interaction Tier” (itself a topic for another post someday). As folks write new modules, a common question is “what’s the best way to export things from our published modules to maximize compatibility?” —…
9 Aug 2022
Learn how to create a private, invite-only website using Next.js, AirTable, custom React hooks, and Vercel deploy. The post covers backend APIs in Next.js, data storage with AirTable, validating access with invite codes, collecting user input, and deploying the final app.
1 Nov 2021
This post explains how to conditionally create resources in AWS CDK using CfnCondition. It provides a practical example of creating an S3 bucket based on an SSM parameter value. The post covers defining a condition, attaching it to a low-level CDK construct, and importing the conditionally created resource.
6 Aug 2021
This post explains how to use CDK to provision Ubuntu EC2 instances on AWS. It covers finding the right AMI, adding security groups, using init scripts, installing AWS utilities, and more.
14 Oct 2020
Modern web and mobile user experiences is a worldwide thing. Localization of your application (supporting multiple languages) will help you to reach worldwide people. Angular is offering Internationalization(i18n) plugins to enrich your application with multiple languages. In this post I will discuss the implementation with lazy loading design pattern with supporting dynamic content. Take a quick look at the live…
16 Mar 2020
Periskop is an exception monitoring service that we built here at SoundCloud. It was designed with microservice environments in mind, but it…
1 Jul 2019
Multi-tenants is an architecture concept that can handle multiple projects in a single project container. If you look at popular sites like Nike.com or Mi.com, you will find out the project redirection based on the continent or country region. This post more about understanding the Angular 8 project package configuration, using this how are we leveraging the project for multi-tenant…
3 May 2019
Maestro is a library we have developed to handle all playback across SoundCloud web applications. It successfully handles tens of millions of plays per day across soundcloud.com, our mobile site, our widget, Chromecast, and our Xbox application. We are considering open sourcing it, and this blog post is a technical overview of what we’ve achieved thus far with Maestro.