dominictobias

// Packages like PassportJS and useless diagrams online make OAuth seem complicated to implement, but in reality it's simple...
const got = require('got');
const jwt = require('jsonwebtoken');
const querystring = require('querystring');

const mins = min => 1000 * 60 * min;

// 1. Direct users browser to this url.
app.get('auth/github', (req, res) => {
  const csrfState = Math.random().toString(36).substring(7);

dominictobias

// green to red
const getColor = v => `hsl(${((1 - v) * 120)},100%,50%)`;

// red to green
const getColor = v => `hsl(${((1 - Math.abs(v - 100)) * 120)},100%,50%)`;

Pass in (perccentage / 100).

dominictobias

function isAvailable() {
  try {
    this.storage.setItem('__testFeature', true);
    this.storage.removeItem('__testFeature');
    return true;
  } catch (ex) {
    return false;
  }
}

dominictobias

const proxy = require('http-proxy-middleware');

// Execute `copy(document.cookie)` in the console on the proxy site
// and paste into this string.
const cookies = '';

module.exports = function(app) {
  app.use(proxy('/api', {
    changeOrigin: true,
    cookiePathRewrite: true,

dominictobias

import { useRef, useCallback, useEffect, useState } from 'react';
import { ResizeObserver as ResizeObserverPolyfill } from '@juggle/resize-observer';

const ResizeObserver = window.ResizeObserver || ResizeObserverPolyfill;

export default function useResizeObserver() {
  const [size, setSize] = useState({ width: 0, height: 0 });
  const resizeObserver = useRef(null);

  const onResize = useCallback(entries => {

dominictobias

declare global {
  interface DOMRectReadOnly {
    readonly x: number;
    readonly y: number;
    readonly width: number;
    readonly height: number;
    readonly top: number;
    readonly right: number;
    readonly bottom: number;
    readonly left: number;

dominictobias

let startX = 0;
let startY = 0;

function handleTouchStart(e) {
  startX = e.changedTouches[0].screenX;
  startY = e.changedTouches[0].screenY;
}

function handleTouchEnd(e) {
  const diffX = e.changedTouches[0].screenX - startX;

dominictobias

class GlobalState {
  state = {};
  listeners = [];

  constructor(reducer, initialState = {}) {
    this.reducer = reducer;
    this.state = initialState;
    this.devTools = typeof window !== 'undefined' && window?.__REDUX_DEVTOOLS_EXTENSION__?.connect();
  }

dominictobias

function useGlobalState(globalState, stateGetter) {
  const [state, setState] = useState(stateGetter(globalState.state));

  // We don't want to re-create the listener as we want to unlisten on unmount
  // of the component which uses this hook, so we "tunnel" the state in.
  const stateRef = useRef(state);
  stateRef.current = state;

  const listener = useRef(nextState => {
    const stateUpdate = stateGetter(nextState);

dominictobias

const darkTheme = {
  name: 'dark',
  background: 'black',
  text: 'white',
}

const lightTheme = {
  name: 'light',
  background: 'white',
  text: 'black',