Loading States in React Components Using TypeScript’s Discriminated Unions

Many web applications need to load data from servers that will be shown to users. It’s important for the UI to handle loading states while the requests are in-flight. Let’s say, for example, that we have a page that will load a user’s profile. We want to be able to show a loading message, then […]

Making Your First Game in Phaser 3 with TypeScript

I recently got a chance to use Phaser 3 and TypeScript to build Root Maker with my Ludum Dare team. It worked out great. Phaser is one of the best frameworks around for HTML5 game development, and it’s definitely worth checking out if you haven’t.

Helper Functions for Testing a PostgreSQL Database

When writing tests for a Node.js server, it’s common to test the database as well. (At least, one hopes.) Here are a few helper functions for testing a PostgreSQL database using Knex.

BLOBs with Knex and PostgreSQL

My team and I recently decided that we should store user-generated binary files in our PostgreSQL database so that a user could download them at a later time. This is different from uploading those files to something like Amazon S3 (which we’ll likely consider migrating to at some point down the road).

Discriminated Unions in GraphQL and TypeScript

Both GraphQL and TypeScript support the concept of discriminated unions (also known as tagged unions). In this post, I’ll walk through setting up an example GraphQL schema and the corresponding TypeScript types, along with writing a query to retrieve a union type.

How TypeScript Shaped our Entire Codebase for the Better

Over the last year and a half, I’ve had the pleasure of working on a web app built in TypeScript. I came to Atomic with no web development experience at all. On my first couple of projects, I spent most of my time working on small, relatively isolated pieces of functionality for various applications: a […]

Wrapping a TypeScript Function for Background Execution

In my last post, I showed how to write a higher-order function that could wrap an existing function without losing the original function’s types. Today, I’m going to show how you can use that same technique to wrap an existing function for a different result–to execute it in a background process using the workerpool npm […]

Solving Nested Navigation in React with TypeScript

On a recent project, we needed to support multi-level tab bar navigation within our application. With multiple variations of tab bars, each page needed to know which tabs to show. We found that TypeScript offered a good solution.

Generic Higher-Order Functions in TypeScript

As of TypeScript 3.1, the lib.es5.d.ts file provides a couple of predefined types that are very helpful when trying to write generic higher-order functions. In this post, I’m going to show an example of using the Parameters and ReturnType predefined types for just that purpose.

Redux Thunk Best Practices for Loading Initial Data

Every application needs to handle a couple of tasks: loading initial data for users and determining what page or screen they land on. Despite being order-dependent, this logic is often scattered into various parts of the application. This can lead to subtle bugs and makes it hard to answer simple questions like, “What will the […]

Atomic Spin

Atomic Object’s blog on everything we find fascinating.

typescript