Skip to content

Instantly share code, notes, and snippets.

Avatar

Adrian Unger staydecent

View GitHub Profile
View settings.json
{
"$schema": "https://aka.ms/terminal-profiles-schema",
"alwaysShowTabs": false,
"confirmCloseAllTabs": false,
"showTabsInTitlebar": false,
"theme": "light",
"defaultProfile": "{2c4de342-38b7-51cf-b940-2309a097f518}",
@staydecent
staydecent / react-tooling-times.txt
Created Feb 4, 2021
Rough idea of execution times for bootstrapping and building react projects with various tooling
View react-tooling-times.txt
// NEXT (10.0.0)
// ---
time npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"
----------------------------------------------
112.68 real 15.44 user 6.49 sys
time npm run build
----------------------------------------------
13.84 real 15.19 user 1.07 sys
View use-cursor.js
import equal from '@app-elements/equal'
import { useEffect, useReducer, useRef } from 'preact/compat'
export function useMappedState (store, mapper) {
const [, forceRender] = useReducer(s => s + 1, 0)
const initialState = mapper(store.getState())
const mappedStateRef = useRef(initialState)
useEffect(() => {
function checkForUpdates () {
View context-hook-router.js
import {
createContext,
useContext,
useEffect,
useReducer,
useRef
} from "preact/compat";
import { getRouteComponent, getAllRoutes, getHref } from "./util";
const EMPTY = Symbol();
@staydecent
staydecent / atom_concepts.md
Last active May 22, 2020
atom/redux concepts and best practices
View atom_concepts.md

atom Concepts

At Input Logic, we use atom to manange state in our React apps. atom is modeled after Redux, which is a pattern for state management that has stood up in countless apps over the years. This is a succinct overview of the atom/redux concepts and best practices we employ.

What is Redux?

The three principles are the foundation of Redux. Briefly:

View linkify.js
const delimiter = /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/ig
let strStartsWith = (str, prefix) => {
return str.slice(0, prefix.length) === prefix;
}
function Linkify ({ text, anchorProps = {} }) {
if (!text) return
return text.split(delimiter).map(word => {
View use-document-click.js
import { useEffect } from 'react'
export function useDocumentClick (ref, cb) {
useEffect(() => {
const callback = (ev) => {
cb && cb(ref.current && !ref.current.contains(ev.target))
}
document.addEventListener('mousedown', callback)
document.addEventListener('touchstart', callback)
View tab-bar.js
import React, { useEffect, useState, useRef } from 'react'
import { MaterialTopTabBar } from 'react-navigation'
import { request } from '@app-elements/use-request/request'
const validRouteNames = {
Clinician: ['Assessments', 'Careplans', 'Caregiving', 'Blog', 'Favorites'],
Guest: ['Assessments', 'Careplans', 'Caregiving', 'Blog', 'Favorites'],
'Home Health Aide': ['Caregiving', 'Blog', 'Favorites']
}
View optimistic-like-button.js
const variantType = require("variant-type")
const hasProp = Object.prototype.hasOwnProperty
const LikedRes = (res) => hasProp.call(res, 'liked')
// We will use a "variant type" aka "tagged union" aka "sum type".
// This is sort of like a finite-state-machine, in that the "Request"
// value can only ever represent one of the following "states".
const Request = variantType({
Loading: [],
@staydecent
staydecent / lispy.js
Last active Feb 15, 2020
Lisp interpretor in JS, based on http://www.norvig.com/lispy.html
View lispy.js
const check = require('check-arg-types')
const type = check.prototype.toType
const tokenize = str =>
str.replace(/\(/g, ' ( ').replace(/\)/g, ' ) ').split(' ').filter(x => !!x)
const atom = token =>
isNaN(Number(token)) ? String(token) : Number(token)
const readFromTokens = tokens => {