A bare-bones, 5 step tutorial.

Image for post
Image for post

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 hosting .NET on Linux is very detailed, it’s only for a single site running at port 80, where the root of the site is assumed to be the .NET app itself. …

Full stack: React with TypeScript frontend, .NET backend!

Image for post
Image for post
Photo by AltumCode on Unsplash

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 code in the example repository was originally created with .NET 5. I’m not sure if you can simply start the project up if you don’t have 5 installed.

A step-by-step guide leveraging the awesome powers of TypeScript generics to implement reusable searching, sorting, and filtering.

Image for post
Image for post

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

Example Repository

The example repository is here.


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!), but I particularly impressed myself (and my colleague) with the lightweight, though completely reusable solution I built.

I figure I’d share my solution with all of you. Enjoy!

First: Generic Search!

Let’s dive into the search function first, since it’s the simplest of the three function we’ll be building. …

An elegant React hook gets the job done!

Image for post
Image for post

**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 state in a component using this hook will of course refire, causing the logic in useWindowScrollPosition to also be executed, of course. There may be further updates on this post, so use at your own risk. …

One of the most devious software problems I’ve encountered in some time.

Image for post
Image for post

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. …

Now with TypeScript: Strongly typed E-commerce for all!

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

Image for post
Image for post
Photo by Me :) on Pexels

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. …

Featuring Typescript and Sequelize: share types between the frontend and backends for ultimate development productivity.

Image for post
Image for post
Photo by Markus Spiske from Pexels

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")const pool = new Pool({
user: process.env.YOUR_DB_USER,
host: process.env.YOUR_DB_HOST,
database: process.env.YOUR_DB_NAME,
password: process.env.YOUR_DB_PASSWORD,
port: process.env.YOUR_DB_PORT, …

A full code solution with example repository to get you started with international stores!

Image for post
Image for post
Photo by Danny Meneses from Pexels

This post is mirrored on my blog.


The example code repository is here. But I’d at least skim some of the important caveats in this post before implementing the solution in the repository!

A Final Step in a Big Project

As I’ve subtly alluded to every so often, I spent most of 2019 working on a Magento 2 shop. Colleagues and I are still working on that project to this day, but recently much less so. …

A Five-Step Tutorial as an Antidote to Incorrect Documentation

Image for post
Image for post
Photo by Markus Spiske from Pexels

Or my angry sub-subtitle: ‘Yet again, an issue with documentation...’

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

Google Sheets + PostgreSQL — Nice!

I’m working on an app that currently needs a lot of database maintenance as we are in the data collection and cleaning phase. I had heard about Zapier many times, and even had an account for the longest time, but never had used it. So, when I heard that they have a ‘Zap’ to connect Google Sheets to PostgreSQL, creating and editing rows and writing them to the database, I figured I would give it a try.

However, I was quickly led astray by incomplete and simple wrong Zapier documentation and Stack Overflow answers. …

The “one-year” (AKA nearly two-year-ish) post-mortem of “I set aside $1000 to learn options trading”

This is the final part of this series. The first part is here. The overview of posts in the series is here.

So, I’m behind.

Really, really behind.

This draft was supposed to be posted on the exact 1 year anniversary of my first post, “I Set Aside $1000 to Learn Options Trading”.

Yep, that would have been on March 26th, 2019. Ha.

Anyway, Let’s see how it went!

Things were going well. Until they weren’t.

My account profits were hovering around $1500, already achieving my self-set goal of gaining or losing $1000. Verticals in Twitter, Netflix, and others were all going smoothly. …


Chris Frewin

https://chrisfrew.in 👨‍💻Full Stack Software Engineer 🏠Austria/USA 🍺Homebrewer ⛷🏃‍Outdoorsman

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store