Skip to content

Instantly share code, notes, and snippets.

View crazy4groovy's full-sized avatar

Steven Olsen crazy4groovy

37 followers · 17 following
View GitHub Profile
@crazy4groovy
crazy4groovy / useEvent.tsx
Last active May 19, 2022 20:25 — forked from diegohaz/useEvent.tsx
Make a component callback prop stable (i.e. cannot be used during render phase) (ReactJS)
type AnyFunction = (...args: any[]) => any
function useEvent<T extends AnyFunction>(callback?: T) {
const ref = useRef<AnyFunction | undefined>(() => {
throw new Error("Cannot call an event handler while rendering.")
})
useLayoutEffect(() => {
ref.current = callback
})
return useCallback<AnyFunction>(
@crazy4groovy
crazy4groovy / on-jsx-presentation.markdown
Last active April 26, 2022 03:47 — forked from chantastic/on-jsx.markdown
JSX presentation composition

Hi Nicholas,

I saw you tweet about JSX yesterday. It seemed like the discussion devolved pretty quickly but I wanted to share our experience over the last year. I understand your concerns. I've made similar remarks about JSX. When we started using it Planning Center, I led the charge to write React without it. I don't imagine I'd have much to say that you haven't considered but, if it's helpful, here's a pattern that changed my opinion:

The idea that "React is the V in MVC" is disingenuous. It's a good pitch but, for many of us, it feels like in invitation to repeat our history of coupled views. In practice, React is the V and the C. Dan Abramov describes the division as Smart and Dumb Components. At our office, we call them stateless and container components (view-controllers if we're Flux). The idea is pretty simple: components can't

@crazy4groovy
crazy4groovy / lit-haunted-element.js
Created October 17, 2021 15:52 — forked from matthewp/lit-haunted-element.js
Haunted State Integration
import { LitElement } from 'lit-element';
import { State } from 'haunted';
export default class LitHauntedElement extends LitElement {
constructor() {
super();
this.hauntedState = new State(() => this.requestUpdate(), this);
}
@crazy4groovy
crazy4groovy / getDelayFromNetworkSpeed.ts
Created October 15, 2021 04:39 — forked from timc1/getDelayFromNetworkSpeed.ts
Control the speed at which your loading state shows up depending on the user's internet speed.
const defaultDelay = 500;
export default function getDelay(): number {
if (typeof window !== "undefined") {
if (window.navigator && window.navigator.connection) {
const connection = window.navigator.connection.effectiveType;
switch (connection) {
case "4g":
return defaultDelay;
case "3g":
@crazy4groovy
crazy4groovy / package.json
Last active October 13, 2020 04:57 — forked from kentcdodds/package.json
setup script for my workshops
{
"name": "workshop-setup",
"version": "1.0.0",
"description": "This is the common setup script for most of my workshops",
"bin": "./setup.js"
}
@crazy4groovy
crazy4groovy / little-vdom-decompiled.js
Created March 29, 2020 12:43 — forked from marvinhagemeister/little-vdom-decompiled.js
Jason little-vdom decompiled
/* eslint-disable no-unused-vars */
/* eslint-disable no-else-return */
// JSX constructor, similar to createElement()
export const h = (type, props, ...children) => {
return {
type,
// Props will be an object for components and DOM nodes, but a string for
// text nodes
props,
@crazy4groovy
crazy4groovy / cache-stampede.js
Last active April 1, 2021 14:45
Cache stampede (JavaScript)
// Basically, store a promise for a key, and return that promise for its key, until the async job is done.
const refPromises = {};
const workflowWithOneCacheMiss = async (key) => {
const dataFromCache = await getCache(key);
if (dataFromCache !== undefined) {
return dataFromCache;
}
@crazy4groovy
crazy4groovy / index.html
Created April 29, 2019 03:53 — forked from obezuk/index.html
Cloudflare Worker - Link Shortener
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
@crazy4groovy
crazy4groovy / docker_wordpress.md
Created April 29, 2019 03:49 — forked from bradtraversy/docker_wordpress.md
Docker Compose FIle For Wordpress, MySQL & phpmyadmin

Wordpress & Docker

This file will setup Wordpress, MySQL & PHPMyAdmin with a single command. Add the code below to a file called "docker-compose.yaml" and run the command

$ docker-compose up -d

# To Tear Down
$ docker-compose down --volumes
@crazy4groovy
crazy4groovy / nginxproxy.md
Created October 25, 2018 15:30 — forked from soheilhy/nginxproxy.md
How to proxy web apps using nginx?

Virtual Hosts on nginx (CSC309)

When hosting our web applications, we often have one public IP address (i.e., an IP address visible to the outside world) using which we want to host multiple web apps. For example, one may wants to host three different web apps respectively for example1.com, example2.com, and example1.com/images on the same machine using a single IP address.

How can we do that? Well, the good news is Internet browsers