Skip to content

Instantly share code, notes, and snippets.

@drcmda
drcmda / index.ts
Created June 22, 2019 23:14
shallow
import { useEffect, useLayoutEffect, useReducer, useRef } from 'react'
import shallowEqual from './shallowEqual'
const useIsomorphicLayoutEffect =
typeof window !== 'undefined' ? useLayoutEffect : useEffect
export type State = Record<string, any>
export type StateListener<T extends State, U = T> = (state: U) => void
export type StateSelector<T extends State, U> = (state: T) => U
export type PartialState<T extends State> =
shows how easy routing is: https://codesandbox.io/s/wouter-animated-transitions-w-reactspring-ikjpx
animated grid: https://codesandbox.io/s/26mjowzpr
non-animated grid: https://codesandbox.io/s/6z5q5wj27w
tarot cards: https://codesandbox.io/s/j0y0vpz59
simplified tarot cards: https://codesandbox.io/s/3v45w26395
chaining hooks: https://codesandbox.io/s/2v716k56pr
spring work corss platform, for instance 3d, transitions *meshes*: https://codesandbox.io/s/ly0oxkp899
Easings are not an ideal model for fluid animation. Slide something out `left: 1s ease-in`, halfway through you abort. The thing will stop dead in its tracks and move back 1s with an ease-in curve. Nothing in the real world behaves like that! A real object moves according to laws, the force it took initially, surface friction, if you yank it back it will expend energy first, then move towards you slowly accelerating.
@drcmda
drcmda / gist.js
Last active May 14, 2019 10:19
awv3
import { useStore, api } from '@awv3/session'
import { useMesh } from '@awv3/core'
// Store
const [useState, api] = create(set => {
connections: {
},
create: (url) => {
const id = guid()
// Only export the things that are actually needed, cut out everything else
export { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js'
export { ShaderLib } from 'three/src/renderers/shaders/ShaderLib.js'
export { UniformsLib } from 'three/src/renderers/shaders/UniformsLib.js'
export { UniformsUtils } from 'three/src/renderers/shaders/UniformsUtils.js'
export { ShaderChunk } from 'three/src/renderers/shaders/ShaderChunk.js'
export { Scene } from 'three/src/scenes/Scene.js'
export { Mesh } from 'three/src/objects/Mesh.js'
export { LineSegments } from 'three/src/objects/LineSegments.js'
@drcmda
drcmda / keybase.md
Created January 15, 2019 17:47
keybase.md

Keybase proof

I hereby claim:

  • I am drcmda on github.
  • I am 0xca0a (https://keybase.io/0xca0a) on keybase.
  • I have a public key ASBlLHissOHc3U5z4zOm-F-uBQQqqaQKF9HLDU87Q_LMNAo

To claim this, I am signing this object:

@drcmda
drcmda / three-hooks.js
Created September 11, 2018 12:35
three treeshaking
// Only export the things that are actually needed, cut out everything else
export { WebGLRenderer } from 'three/src/renderers/WebGLRenderer.js'
export { ShaderLib } from 'three/src/renderers/shaders/ShaderLib.js'
export { UniformsLib } from 'three/src/renderers/shaders/UniformsLib.js'
export { UniformsUtils } from 'three/src/renderers/shaders/UniformsUtils.js'
export { ShaderChunk } from 'three/src/renderers/shaders/ShaderChunk.js'
export { Scene } from 'three/src/scenes/Scene.js'
export { Mesh } from 'three/src/objects/Mesh.js'
export { LineSegments } from 'three/src/objects/LineSegments.js'
@drcmda
drcmda / index.js
Created September 10, 2018 14:52
React 16 using throw and error bounds
import React from 'react'
import ReactDOM from 'react-dom'
import { Spring, animated, config } from 'react-spring'
let GUID = 0
let CURRENT_TARGET = undefined
let CURRENT_COUNT = 0
let CURRENT_THROWS = 0
let ADOPTS = {}
@drcmda
drcmda / Fade.js
Last active August 10, 2018 09:39
Slug / Fade, react-spring helpers
import React from 'react'
import { Transition, Trail, animated, config } from 'react-spring'
// Wrapper around react-springs Transition.
// It will Transition the child node in and out depending on the "show" prop.
export default class Fade extends React.PureComponent {
render() {
const {
children,
show,
@drcmda
drcmda / index.js
Last active July 11, 2018 08:15
Context with Reduxes connect semantics
import React, { Component, PureComponent } from 'react'
import { render } from 'react-dom'
import Store, { connect } from './store'
@connect(({ users, setUserName }, { id }) => ({ ...users[id], setUserName }))
class User extends PureComponent {
change = ({ target: { value } }) =>
this.props.setUserName(this.props.id, value)
render() {
const { name, id } = this.props
@drcmda
drcmda / index.js
Last active July 10, 2018 17:36
Aping Redux with context
import React, { Component, PureComponent } from 'react'
import { render } from 'react-dom'
const { Provider, Consumer } = React.createContext()
class RenderPure extends PureComponent {
render() {
return this.props.children
}
}