Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Paul Henschel drcmda

🎯
Focusing
Block or report user

Report or block drcmda

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View index.ts
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> =
View gist:a35fd93e2b745155a132af54b70fe438
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.
View gist.js
import { useStore, api } from '@awv3/session'
import { useMesh } from '@awv3/core'
// Store
const [useState, api] = create(set => {
connections: {
},
create: (url) => {
const id = guid()
View three-exports.js
// 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'
View 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 Sep 11, 2018
three treeshaking
View three-hooks.js
// 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 Sep 10, 2018
React 16 using throw and error bounds
View index.js
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 Aug 10, 2018
Slug / Fade, react-spring helpers
View Fade.js
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 Jul 11, 2018
Context with Reduxes connect semantics
View index.js
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 Jul 10, 2018
Aping Redux with context
View index.js
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
}
}
You can’t perform that action at this time.