Skip to content

Instantly share code, notes, and snippets.

@herrstucki
herrstucki / react-portal.js
Last active Sep 18, 2017
React 16 Portal
View react-portal.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
// Portal into a DOM element with ID 'sidebar'
const Sidebar = ({ children }) =>
ReactDOM.createPortal(children, document.getElementById("sidebar"));
// Portal into a dynamically created iframe
class IFrame extends React.Component {
@herrstucki
herrstucki / README.md
Last active Jun 1, 2016
Draggable Blob II
View README.md

Drag the blob to deform it. Press the shift key to show the underlying force simulation's nodes and links.

Uses d3-shape's line() and curveBasisClosed() functions to draw a blob from a graph.

This version tries to prevent the blob from collapsing using polygonHull() but this results in the removal of points and leads to jumpiness (you see the dragged point getting removed when you hold the shift key and drag it inside the blob). See the version without it for smoother dragging.

@herrstucki
herrstucki / README.md
Last active Jun 1, 2016
Draggable Blob
View README.md

Drag the blob to deform it. Press the shift key to show the underlying force simulation's nodes and links.

Uses d3-shape's line() and curveBasisClosed() functions to draw a blob from a graph.

Inspired by Mike Bostock's Force Dragging III example.

@herrstucki
herrstucki / README.md
Last active Mar 3, 2016
React Motion Issue #294
View README.md

Test case for React Motion issue #294.

When the animation has a low frame rate, React Motion's restarting logic restarts the animation constantly.

@herrstucki
herrstucki / .block
Last active Aug 10, 2018
Interpolate anything with React Motion
View .block
license: mit
@herrstucki
herrstucki / README.md
Last active Nov 11, 2015
Playin with p5.js
View README.md
View keybase.md

Keybase proof

I hereby claim:

  • I am herrstucki on github.
  • I am jeremystucki (https://keybase.io/jeremystucki) on keybase.
  • I have a public key whose fingerprint is 1283 2879 4430 93B4 5A00 D4A1 B06D 9AF7 CFA7 4AB3

To claim this, I am signing this object:

@herrstucki
herrstucki / README.md
Last active Nov 11, 2015
Animating Circles (Canvas)
View README.md

Animation with Canvas. Runs with 23 – 24 FPS on a Retina MBP 13".

Also with D3 and React.

@herrstucki
herrstucki / README.md
Last active Aug 29, 2015
Animating Circles (React & SVG)
View README.md

Animation with React and SVG. Runs with 8 – 9 FPS on a Retina MBP 13".

Also with D3 and Canvas.

@herrstucki
herrstucki / README.md
Last active Aug 29, 2015
Animating Circles (D3 & SVG)
View README.md

Animation with D3 and SVG. Runs with 18 – 20 FPS on a Retina MBP 13".

Also with Canvas and React.