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

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.

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!), 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. …

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

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")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!

This post is mirrored on my blog.

TL;DR

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

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