Skip to content

Instantly share code, notes, and snippets.

View chriswitko's full-sized avatar

Chris Witko chriswitko

View GitHub Profile
import { useLoaderData, Link, useSearchParams } from 'remix';
import { parseISO, format } from 'date-fns';
import groupBy from 'lodash/groupBy';
let PAGE_SIZE = 5;
function safeParseInt(str) {
let parsed = parseInt(str);
return isNaN(parsed) ? 0 : parsed;
}
@chriswitko
chriswitko / image.ts
Created January 5, 2022 10:26 — forked from jacob-ebey/image.ts
Remix Image Component
import { createHash } from "crypto";
import fs from "fs";
import fsp from "fs/promises";
import path from "path";
import https from "https";
import { PassThrough } from "stream";
import type { Readable } from "stream";
import type { LoaderFunction } from "remix";
import sharp from "sharp";
import type { Request as NodeRequest } from "@remix-run/node";
@chriswitko
chriswitko / package.json
Created March 7, 2021 14:20 — forked from kentcdodds/package.json
Remove TS from EpicReact.dev workshops
{
"name": "remove-ts",
"version": "1.0.0",
"description": "I use this to automatically fix feedback links in my workshops",
"bin": "./remove-ts.js",
"dependencies": {
"@babel/core": "7.13.8",
"@babel/preset-typescript": "7.13.0",
"glob": "7.1.6"
}
@chriswitko
chriswitko / NextGA.js
Created February 26, 2021 04:59 — forked from segunadebayo/NextGA.js
Add Google Analytics to NextJS
import NextHead from 'next/head'
import React from 'react'
import ReactGA from 'react-ga'
import Router from 'next/router'
// GA Tracking Id
const gaTrackingId = '[GOOGLE ANALYTICS TRACKING ID GOES HERE]'
Router.onRouteChangeComplete = () => {
@chriswitko
chriswitko / element-classes-and-ids.scss
Created December 6, 2020 17:18 — forked from 5t3ph/element-classes-and-ids-vanilla.css
Tag HTML elements with their class names and IDs to visualize page structure
*[class],
*[id] {
position: relative;
outline: 2px dashed red;
&::before,
&::after {
position: absolute;
top: 0;
left: 0;
@chriswitko
chriswitko / ngrok-installation.md
Created November 1, 2020 05:52 — forked from jwebcat/ngrok-installation.md
Installing ngrok on Mac

#Installing ngrok on OSX

  1. Download ngrok
  2. Unzip it to your Applications directory
  3. Create a symlink (instructions below)

Creating a symlink to ngrok

Run the following two commands in Terminal to create the symlink.

# cd into your local bin directory
@chriswitko
chriswitko / frame.tsx
Created October 18, 2020 17:16 — forked from gunn/frame.tsx
Render react content in an iframe
import * as React from 'react'
import { createPortal } from 'react-dom'
type FrameProps = React.IframeHTMLAttributes<HTMLIFrameElement> & {
head?: React.ComponentType<any>
children?: React.ReactNode
}
const Frame = React.memo(({head, children, ...iframeProps}: FrameProps)=> {
const node = React.useRef<HTMLIFrameElement>()
const [doc, setDoc] = React.useState<Document>()
@chriswitko
chriswitko / app.js
Created September 12, 2020 11:42 — forked from joshnuss/app.js
Express.js role-based permissions middleware
// the main app file
import express from "express";
import loadDb from "./loadDb"; // dummy middleware to load db (sets request.db)
import authenticate from "./authentication"; // middleware for doing authentication
import permit from "./authorization"; // middleware for checking if user's role is permitted to make request
const app = express(),
api = express.Router();
// first middleware will setup db connection
//
// ContentView.swift
// Widgets
//
// Created by Kyle Halevi on 7/3/20.
//
import SwiftUI
struct Widget: View {
@chriswitko
chriswitko / useDebounceCallback.ts
Created March 16, 2020 08:22 — forked from astoilkov/useDebounceCallback.ts
React hook for debouncing callbacks
import { useCallback, useLayoutEffect, DependencyList } from 'react'
/**
* This version bounces each version of the callback. This ensures that the callback
* will be called with each state of the application. That's why `deps` is a required argument.
*
* Previous version used `useRef` for `timeoutId` and didn't have `deps` argument.
* This resulted in missing calling the callback for the previous state and necessarily
* calling it for the new state.
*