Import JSON into your Typescript project

Learn how to import JSON files into your typescript (.ts, .tsx) files

adro.codes

scroll

github

Welcome

Articles on how to build better software with interesting patterns and techniques.

Overview

There are plenty of ways to build forms in React, but messing up the fundamentals can cause a lot of pain and suffering

Building forms in React

How to structure a reusable button component for your next React application. Use these techniques for your generic components to create highly reusable components.

Architecture definition for a button component

Learn how to change your browser title with JavaScript. Use it to send your user a message when they change to a different browser tab

Change your document title when a user changes tabs

Learn how to create a custom chrome extension and use it to inject a custom React component into any site.

Creating a chrome extension with React

With these snippets you'll be set up to dynamic enable preview mode for any content in your Next.js projects.

Dynamic Nextjs preview mode

11 useful rules to follow when writing your unit tests.

11 Unit test rules

Applying game design techniques to your website allows for engaging experiences your users will love.

Gamification

I explore using a system of layered error types to provide a more precise reason for why something went wrong to the user or stakeholders.

Layered Error Handling

Learn how we can apply the Pub/Sub design pattern to communicate between two micro-frontends

Using the Pub/Sub pattern in a Micro Frontend

Learn how to fix the FetchEvent.respondWith error on Safari to make your PWA work offline

PWA - FetchEvent.respondWith error on Safari

What are micro contexts? It is a way to create a nice separation of domains and group together data.

React - Micro Contexts

Learn how to apply the idea of recursion to simplify your React component rendering.

Applying Recursion when rendering in React

It is important to not fully trust the response you get back from your API. Validate the response with yup to ensure the data you are using is as you expect.

Response validation with Yup

Articles on Software Design and Architecture

What is module driven development, and what are the benefits of using it.

Module Driven Development

A overview of some software design principles to keep in mind for your next project.

Software Design Principles

Build Composable solutions with confidence.

Installation

Defining Fragments

Defining Queries

Here are some common utilities that you might find useful when working with Pigeon.

Common Utilities

Papers

Github

Home

The Knowledge Vault

Software Design

Pigeon

Need to know if a date is invalid? Here's how.

Check if date is invalid

Need to compare two dates and check if it is the same day? Here is how you can do it.

Check if two dates are the same day

Need to get the minutes elapsed since midnight? Here's how to do it in JavaScript.

Get minutes elapsed since midnight

Learn how to merge multiple URLSearchParams objects.

How to - Merge to SearchURLParams objects

How to respond with a PDF from an API route

Respond with PDF from API route

This combo will give you a simple state management pattern that can be used in any React application.

Configure Context with a useReducer state management pattern.

Use class extensions to add additional logic to a class without modifying the class itself.

C# - Class Extension

Condition based type casting

Generics Refresher

new gotcha

TryParse

Generate a secure token for Azure Event Hubs REST APIs

Generate a SAS token

This issue can occur when logging into Azure using the VSCode extension

VSCode - Can't log into Tenant

Need to see the columns in a table? Here's how.

Get overfiew of table

Want to know how to add a tag to a branch for new releases? This article will show you how.

Add a tag to a branch

In some cases, the indexing might fail to index the site. In cases like these you may need to trigger a manual reindexing to get it to work.

Search indexing - Failed to index

ContentStack has a 8kb request size limit on GraphQL queries. This guide will help you optimise your queries to stay within the limit.

Optimising GraphQL queries

Need to know how to show the macbook symbol explorer? Here's how.

Macbook - Show symbol explorer

Learn how to show custom editor warnings on your Nodes to help with your development workflow.

adro.codes

Tiny tips/tricks

​Import JSON into your Typescript project

Import JSON into your Typescript project