Skip to content

Instantly share code, notes, and snippets.

Avatar
🤖

Seth Davis sethdavis512

🤖
View GitHub Profile
@sethdavis512
sethdavis512 / gist:8c1cea61ecdd12f55db06d581daa6025
Created March 16, 2023 21:59 — forked from BjornDCode/gist:5cb836a6b23638d6d02f5cb6ed59a04a
Tailwind - Fixed sidebar, scrollable content
View gist:8c1cea61ecdd12f55db06d581daa6025
// Source: https://twitter.com/calebporzio/status/1151876736931549185
<div class="flex">
<aside class="h-screen sticky top-0">
// Fixed Sidebar
</aside>
<main>
// Content
</main>
@sethdavis512
sethdavis512 / Switchboard.tsx
Last active December 9, 2022 03:28
A component that only shows one of its children and allows dynamic switching between children
View Switchboard.tsx
import React, {
useContext,
createContext,
ReactNode,
useMemo,
Children,
isValidElement,
useState
} from 'react';
@sethdavis512
sethdavis512 / custom-file-generator-cli-tutorial.md
Last active October 9, 2022 00:24
Custom File Generator CLI Tutorial
View custom-file-generator-cli-tutorial.md

Custom File Generator CLI Tutorial

As a developer who works on multiple React projects daily, I like having a tool that can help me quickly and efficiently write consistent code. One of the best ways I've found is writing a custom command line tool to rapidly scaffold out my most common code patterns.

My tool of choice is Plop.js. Plop is a powerful "micro-generator framework" built to help maintain patterns as well as speed up your project build time. From the documenation:

If you boil plop down to its core, it is basically glue code between inquirer prompts and handlebar templates.

In this tutorial, we'll build out a simple React component generator for your Typescript projects. By the end, you'll have a fully functioning CLI that is customized to your file generating needs. Let's get started.

View encode-object-params.js
const encodeGetParams = p =>
Object.entries(p).map(kv => kv.map(encodeURIComponent).join("=")).join("&");
const params = {
user: "María Rodríguez",
awesome: true,
awesomeness: 64,
"ZOMG+&=*(": "*^%*GMOZ"
};
View currencyFormatter.js
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
minimumFractionDigits: 2,
});
View regex-pattern.js
// HTML5 Pattern
// http://html5pattern.com/
const alphaNumeric = /[a-zA-Z0-9]+/;
const userNameWith20Chars = /^[a-zA-Z][a-zA-Z0-9-_\.]{1,20}$/;
const twitterHandle = /^[A-Za-z0-9_]{1,15}$/;
const password = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$/; // Uppercase, lowercase, and number
const password2 = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$/; // Password (UpperCase, LowerCase, Number/SpecialChar and min 8 Chars)
View piping.js
// Building-blocks to use for composition
const double = x => x + x;
const triple = x => 3 * x;
const quadruple = x => 4 * x;
// Function composition enabling pipe functionality
const pipe = (...fns) => input => [...fns].reduce((acc, fn) => fn(acc), input);
// Composed functions for multiplication of specific values
const multiply6 = pipe(double, triple);
View promise-backoff-strategy.js
const pause = (duration) => new Promise(res => setTimeout(res, duration));
const retry = (retries, fn) =>
fn().catch(err => retries > 1 ? retry(retries - 1, fn) : Promise.reject(err));
const backoff = (retries, fn, delay = 500) =>
fn().catch(err => retries > 1
? pause(delay).then(() => backoff(retries - 1, fn, delay * 2))
: Promise.reject(err));
View compose.js
function increment(input) { return input + 1;}
function decrement(input) { return input - 1; }
function double(input) { return input * 2; }
function halve(input) { return input / 2; }
var initial_value = 1;
var pipeline = [
increment,
increment,
@sethdavis512
sethdavis512 / replace-char.js
Last active August 4, 2022 06:33 — forked from alisterlf/gist:3490957
Remove Accents
View replace-char.js
function RemoveAccents(strAccents) {
var strAccents = strAccents.split('');
var strAccentsOut = new Array();
var strAccentsLen = strAccents.length;
var accents = 'ÀÁÂÃÄÅàáâãäåÒÓÔÕÕÖØòóôõöøÈÉÊËèéêëðÇçÐÌÍÎÏìíîïÙÚÛÜùúûüÑñŠšŸÿýŽž';
var accentsOut = "AAAAAAaaaaaaOOOOOOOooooooEEEEeeeeeCcDIIIIiiiiUUUUuuuuNnSsYyyZz";
for (var y = 0; y < strAccentsLen; y++) {
if (accents.indexOf(strAccents[y]) != -1) {
strAccentsOut[y] = accentsOut.substr(accents.indexOf(strAccents[y]), 1);
} else