Another powerful generic function from the SaaS product archives.
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!
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!
Leveraging react-reveal, react-cookie, and Bootstrap styles.
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!
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.
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!
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!
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!
Sorting or filtering child components? You’ve come to the right place!
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. …
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
