This post is mirrored on my personal blog, chrisfrew.in

Learn everything detailed in this post and much more with full video lessons in my course, “Advanced TypeScript: Generic Search, Sorting, and Filtering” available on Skillshare and Udemy:

Example Repository

This code is on my GitHub account at react-typescript-generic-search-sort-and-filter-children-function.

Live Demo

The live demo is on GitHub Pages.

Overview

We’re going to do some advanced TypeScript-ing today! We already know from awesome blogs like Fettblog about how to type functional components with children. …

This post is mirrored on my personal blog, chrisfrew.in.

An example of what a final running result could look like is here, and was built based on my JSON Patch filtering blog post.

Please be respectful with the example site, just give it a test to see how it works. Spam and other nonsense will be quickly dealt with.

Background: A Use Case More Complex than the Tutorial

So I just spent a few days banging my head against my desk 😡, trying to get my .NET 5.0 application with a React SPA to live under a separate URL via a reverse proxy. While the official Microsoft tutorial for…

This post is mirrored on my blog, chrisfrew.in, and my DEV Community account.

Show Me the Code!

As always, the code is in the example repository.

I’ve also hosted the repository as an example site.

Please be respectful with the example site, just give it a test to see how it works. Spam and other nonsense will be quickly dealt with.

I’ve named the .NET project JsonPatchFilterExample, and all the namespaces in the code snippets below reflect that. If you start up the code in the repository, you’ll have your browser open up right away with the working, real-time edit form!

*Note that the…

This post is mirrored on my personal blog, chrisfrew.in, where you’ll have syntax highlighting and code snippet copying!

Learn everything detailed in this post and much more with full video lessons in my course, “Advanced TypeScript: Generic Search, Sorting, and Filtering” available on Skillshare and Udemy:

Example Repository

The example repository is here.

Motivation

In a recent project, I was tasked to implement front-end filter and search functionality. However, the task also required that the sort and filter functions could easily be applied to any type. Luckily, I’ve been using generics quite a bit (and slowly getting better with them!), …

**UPDATE October 16th, 2020: Due to following ESLint too devotedly, I realized that it is sometimes OK to use the empty dependency array ([]) in theuseEffect hook. This ultimately resulted in building a hook where the ability to set a custom scrollY position was not needed. Read on for details. The hook is now stable as-is and has been shipped to production in the project we needed it for!

*UPDATE October 14th, 2020: I added requirement 3 (and correspondingly modified the hook) after realizing that using this hook may cause page ‘jumping’ as a side effect — any change in…

This post is mirrored on my personal blog, chrisfrew.in, where you get the convenience of clickable footnotes and copyable code snippets.

Motivation: Never Log In Again!

I was trying to implement the PKCE flow on my react native application so that I could renew access tokens on the user’s behalf. With this type of flow, a user only has to authenticate once [1]. After this initial authentication, we securely store each user’s refresh token, and can use it later to get another access token / refresh token pair exactly at the moment their current access token expires. …

Published by Chris on Tuesday, July 21st, 2020.

This is a 2020 followup to my original article A detailed tutorial: how to use Shopify’s Storefront API with React and Redux, featured on freeCodeCamp.

This post is also mirrored on my personal blog, chrisfrew.in.

Background and Motivation

One of the Medium articles that have provided a lot of freelance work leads was my Shopify + Redux + React article, which I wrote in 2018 and was featured on freeCodeCamp. …

This post is mirrored on my blog.

99% of the time when you do anything in the software world, you need an API.

Very often (maybe always 🤔) the API needs to be able to execute a few CRUD operations (Create, Read, Update, and Delete) at the database level.

For a few years, the ‘cutting edge’ of getting an easy-to-use database connection in Node.js looked something like this:

• You’d have a db/index.js file with your connection settings
• Your connector would look something like this (in this example I am using package pg for PostgreSQL):

const { Pool } = require("pg")…