Skip to content

Instantly share code, notes, and snippets.

zippidy zappidy

Tim timc1

zippidy zappidy
View GitHub Profile
View orbit-controls
* @author qiao /
* @author mrdoob /
* @author alteredq /
* @author WestLangley /
* @author erich666 /
// This set of controls performs orbiting, dollying (zooming), and panning.
// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
View prosemirror-image-data.json
timc1 / getDelayFromNetworkSpeed.ts
Last active Jun 19, 2020
Control the speed at which your loading state shows up depending on the user's internet speed.
View getDelayFromNetworkSpeed.ts
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":
timc1 / useTheme2.tsx
Created Apr 18, 2020
🌑☀️core app system/light/dark mode theming + varying themes for nested components
View useTheme2.tsx
import * as React from "react";
type ThemeConfig = "system" | "light" | "dark";
type ThemeName = "light" | "dark";
// Custom themes are keyed by a unique id.
type KeyedThemes = {
[k: string]: {
config: ThemeConfig;
themeName: ThemeName;
timc1 / useTheme.tsx
Created Apr 16, 2020
🌑☀️mode theming hook
View useTheme.tsx
import * as React from "react";
type Theme = "system" | "light" | "dark";
const STORAGE_KEY = "theme";
const VALID_THEMES: Theme[] = ["system", "light", "dark"];
const DARK_MODE_MEDIA_QUERY = "(prefers-color-scheme: dark)";
function getAppTheme(): Theme {
if (typeof window !== "undefined") {

This emulate's vim's <C-e> and <C-y> for scrolling in VSCode using the macros extension.

scrolling vscode editor

  1. add the following to settings.json
"macros": {
  "scrollLineDownFaster": [
View useStatusMessage.tsx
import React from 'react'
import styled from '@emotion/styled'
type StatusType = 'error' | 'neutral' | 'success'
type State = {
isStatusShowing: boolean
status: string
type: StatusType
timc1 / use-auth.js
Created Jun 10, 2019
React Context + Hooks + Firebase Authentication
View use-auth.js
import React from 'react'
import firebaseConfig from '../path/to/firebase-config'
import firebase from 'firebase/app'
import 'firebase/auth'
import FullPageLoading from '../path/to/full-page-loading'
AuthProvider.actions = {
setUser: 'SET_USER',
toggleLoading: 'TOGGLE_LOADING',
View gist:f1547d1b37e69781e102c3dd88aca0d1
yad @typescript-eslint/parser eslint-config-react-app eslint-plugin-jsx-a11y eslint-config-prettier eslint-plugin-react-hooks
timc1 / use-dropzone.tsx
Last active May 9, 2019
A React hook that returns whether a file is being dragged into the document from the operating system and not from within the browser.
View use-dropzone.tsx
import React from 'react'
type DropzoneContextValue = {
isDragging: boolean
const DropzoneContext = React.createContext<DropzoneContextValue | undefined>(
You can’t perform that action at this time.