Another powerful generic function from the SaaS product archives.

The mergeArrays function we’ll be building.

This post is mirrored on my blog, chrisfrew.in

TypeScript Generics Madness!

I just can’t stop writing these generic functions! This is another powerful generic function that follows my previous post on building a generic function to update an array at a specific key according to a specific test value. As I try and maintain the cleanest codebase as possible for ReduxPlate, I continue to find new use cases for these easy-to-use yet powerful generic functions.

Motivation

Often when doing state modifications, you want to merge or add some properties to an object that you get from an API or some other source. You could


Another fancy generic function of ultimate power!

updateArray.ts in all its glory.

This post is mirrored on my blog, where you’ll find way better code snippets — they’re copy-and-pasteable too!

Always Pushing for Cleaner Code

While building my newest SaaS product, ReduxPlate, I realized a common pattern kept cropping up in my array manipulation functions. I was always updating a specific value at a specific key, based on a specific test on some other key.

*Plug: Speaking of ReduxPlate, which automatically generates Redux code for you, I’m writing a book that documents every step I took along the way to build ReduxPlate, from boilerplate starters to the finished live product. I’d love it if you check it…


Introducing react-use-please-stay: animate the document title and favicon in your React projects with ease using this powerful hook!

usePleaseStay.ts in an editor.


Leveraging react-reveal, react-cookie, and Bootstrap styles.

A little gif of what we’ll be building in this post!

Check out the GitHub Pages site running an example of the cookie component!

Disclaimer: I’m not a legal expert, so do your own due diligence for what is required for proper GDPR compliance.

Prerequisites

This post assumes you are using a combination of the following:

  • Gatsby
  • React
  • TypeScript
  • Bootstrap

If you’re using all these, this is the perfect post for you. Check out the example site which has an empty Gatsby starter site to see the banner in action!

The Base Component

Let’s start by rendering a sticky footer using Bootstrap classes:

import * as React from "react"export function GDPRBanner() {…


And how to create advanced code snippets with Gatsby or React!

The advanced code snippet toggler I use on my blog.

This post is mirrored on my blog, chrisfrew.in, where you’ll find waaay better syntax highlighting and formatting of the code snippets!

Right to the Example

The fully working CodeSandbox is here. Later on in this post, you’ll see step-by-step how it’s possible to build such a component for your own blog posts or site!

Why Did I Need to Import Files as a Raw String?

Some readers have may have already explored my blog’s snippets page, where I’ve collected key snippets from across all my blog posts in the cleanest form possible. This was heavily inspired by the snippets page on Josh Comeau’s blog.

I’ve added my own flair to my own snippets page: I…


Insights from the frontlines of a SaaS product release: an advanced cash secured put (CSP) and covered call (CC) options screener.

The Wheel Screener’s awesome animated homepage. 😄

This post is mirrored on my Full Stack Blog.

This “Products of 2021” series will be a total of six posts. The first is the introduction to the series itself. The five product links will be updated throughout 2021 as I release the products to the world. These links will be pinned to the top of each post in the series.

  • Introduction and Overview Post
  • Product 1: The Wheel Screener (This Post!)
  • Product 2: ReduxPlate (Details Coming Soon!)
  • Product 3: Mail Your Rep (Details Coming Soon!)
  • Product 4: ??? (Undetermined)
  • Product 5: Five Grand Challenges for the Next Five Decades…


The first has already been released and is profitable!

Obligatory rocket picture. Photo from Pixabay.

This post is mirrored on my Full Stack Blog.

This “Products of 2021” series will be a total of six posts. The first is the introduction to the series itself. The five product links will be updated throughout 2021 as I release the products to the world. These links will be pinned to the top of each post in the series.

  • Introduction and Overview Post (This Post!)
  • Product 1: The Wheel Screener
  • Product 2: ReduxPlate (Details Coming Soon!)
  • Product 3: Mail Your Rep (Details Coming Soon!)
  • Product 4: ??? (Undetermined)
  • Product 5: Five Grand Challenges for the Next Five Decades…


An incredibly powerful tool that will save you time and save you from configuration headaches!

Photo by Me! from Pexels

This post is mirrored on my blog, chrisfrew.in, which has much better code snippet support, as well as other fun goodies!

Learn everything detailed in this post and more in my full course “Mastering Bitbucket Pipelines for CI and CD”, available on Skillshare and Udemy:

Are You Always Logging on to Your Server with SSH and Fighting with Your Builds and Deploys?

You’ve come to the right post. This post is going to be all about Bitbucket Pipelines.

Full disclosure: I have not been paid or otherwise sponsored by Atlassian to write this, I’ve just been a long time Bitbucket user and also find their CI / CD tool, Pipelines, incredibly powerful and useful!

I also have…


A bare-bones, 5 step tutorial.

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…

Chris Frewin

https://reduxplate.com https://wheelscreener.com 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