Skip to content

Instantly share code, notes, and snippets.

View duhaime's full-sized avatar

Douglas Duhaime duhaime

292 followers · 72 following
View GitHub Profile
@duhaime
duhaime / web-servers.md
Created November 25, 2017 15:32 — forked from willurd/web-servers.md
Big list of http static server one-liners

Each of these commands will run an ad hoc http static server in your current (or specified) directory, available at http://localhost:8000. Use this power wisely.

Discussion on reddit.

Python 2.x

$ python -m SimpleHTTPServer 8000
@duhaime
duhaime / README.md
Created October 25, 2017 13:04 — forked from Neilos/README.md
Bi-directional hierarchical sankey diagram

This is a demonstration of a bi-directional hierarchical sankey diagram produced in javascript, html and css using d3. (Refresh page to generate new random data)

Sankey diagrams represent flows between nodes by varying the thickness of the connecting links.

This diagram was based off of Mike Bostock's sankey diagram, but additionally incorporates bi-directionality into the flow and caters for hierarchical relationships between nodes to allow drill down into the data.

All javascript code to generate the diagram markup is contained in the app.js file, but the underlying calculations are performed using a custom plugin: bihisankey.js.

@duhaime
duhaime / ffmpeg-install.sh
Created September 21, 2017 20:57 — forked from clayton/ffmpeg-install.sh
Install FFMPEG on OS X with HomeBrew to convert Mp4 to WebM
# Installation
brew install ffmpeg --with-vpx --with-vorbis --with-libvorbis --with-vpx --with-vorbis --with-theora --with-libogg --with-libvorbis --with-gpl --with-version3 --with-nonfree --with-postproc --with-libaacplus --with-libass --with-libcelt --with-libfaac --with-libfdk-aac --with-libfreetype --with-libmp3lame --with-libopencore-amrnb --with-libopencore-amrwb --with-libopenjpeg --with-openssl --with-libopus --with-libschroedinger --with-libspeex --with-libtheora --with-libvo-aacenc --with-libvorbis --with-libvpx --with-libx264 --with-libxvid
# Easy Peasy
ffmpeg -i video.mp4 video.webm
@duhaime
duhaime / .block
Created September 9, 2017 02:09 — forked from Fil/.block
K-Means as a force
license: gpl-3.0
height: 960
@duhaime
duhaime / README.md
Created September 8, 2017 11:21 — forked from grossbart/README.md
Kinetoscope

A short code excerpt from this visualization I created for the longform article “Iouri Podladtchikov – You only fly once” by the Neue Zürcher Zeitung.

It's a very simple way to create an interactive animation based on video material. Hover over the image to go through the animation.

I used Final Cut Pro to crop and export the frames of a short video sequence, which I then stitched together into a single film strip using ImageMagick: convert folder-of-stills/* +append filmstrip.jpg

@duhaime
duhaime / README.md
Created July 7, 2017 02:50 — forked from darosh/README.md
Benchmark

Notes

  • inspired by pjanik’s blocks
  • animation frame and FPS calculation powered by d3.timer
  • 3D based frameworks are producing a lot of DOM elements in SVG renderers thanks to shape triangulation
  • some test have limited number of objects because of high memory needs or incomplete/reference implementation (triangles)
  • click run link or run single test in the table
  • path is using d3-path
  • stackgl based on this block
@duhaime
duhaime / jekyll-and-liquid.md
Created June 29, 2017 22:24 — forked from magicznyleszek/jekyll-and-liquid.md
Jekyll & Liquid Cheatsheet

Jekyll & Liquid Cheatsheet

A list of the most common functionalities in Jekyll (Liquid). You can use Jekyll with GitHub Pages, just make sure you are using the proper version.

Running

Running a local server for testing purposes:

@duhaime
duhaime / index.html
Last active July 10, 2017 17:27 — forked from rfriberg/index.html
San Juan Island - Interactivity Demo (Tangram.js)
<!DOCTYPE html>
<html lang="en">
<head>
<title>San Juan Island Geology - Interactivity</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://mapzen.com/js/mapzen.css">
<script src="https://mapzen.com/js/mapzen.min.js"></script>
<style>
#map {
height: 100%;
@duhaime
duhaime / react-native-maps-enable-google-maps-instructions.md
Created March 2, 2017 12:26 — forked from heron2014/react-native-maps-enable-google-maps-instructions.md
Visual instructions how to enable Google Maps on IOS using react-native-maps

Visual instructions how to enable Google Maps on IOS using react-native-maps

This is for my personal use, things might not be correctly explained here. For the official docs please check https://github.com/airbnb/react-native-maps

Steps from scratch:

1.react-native init GoogleMapPlayground

2. cd GoogleMapPlayground

@duhaime
duhaime / DragTransform
Created July 3, 2016 10:48 — forked from fta2012/DragTransform
Slightly modified compiled coffeescript from this codepen: http://codepen.io/fta/pen/ifnqH. Paste into console on a page that has jQuery to load the two dependent libraries (jquery-ui and numericjs). Then call makeTransformable('#selector-name') to make that element WYSIWYG editable. Use inspector to get the CSS for the transforms.
var selector = 'img' // Replace this with the selector for the element you want to make transformable
jQuery.getScript('//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', function() {
jQuery.getScript('//cdnjs.cloudflare.com/ajax/libs/numeric/1.2.6/numeric.min.js', function() {
(function() {
var $, applyTransform, getTransform, makeTransformable;
$ = jQuery;