idibidiart

Testing in-browser gif generation from an SVG with gif.js. Works in recent Chrome/Safari/Firefox.

Process:

Create a standard SVG line chart.
Step through in-between frames of the line chart: for each one, update the SVG, render to an image, add the image element to a stack of gif frames.
Render frames together in the background using gif.js web workers.
When rendering's complete, add the blob URL as an image and start the SVG on an infinite loop with d3.timer (gratuitous).

What

A lot of times you are developing a web application on your own laptop or home computer and would like to demo it to the public. Most of those times you are behind a router/firewall and you don't have a public IP address. Instead of configuring routers (often not possible), this solution gives you a public URL that's reverse tunnelled via ssh to your laptop.

Because of the relaxation of the sshd setup, it's best used on a dedicated virtual machine just for this (an Amazon micro instance for example).

	<!doctype html>
	<html lang=en>
	<head>
	<meta charset=utf-8>
	<title>Copy To Clipboard Example</title>
	</head>
	<body>

	<input id="txtToCopy" type="text">
	<button id="btnCopy">Copy!</button>

	const fetch = (url) => {
	return new Promise((resolve, reject) => {
	setTimeout(() => {
	console.log(url)
	switch(url.match(/\d[aA-zZ]$/)[0]) {
	case "1a":
	resolve({name: "Seb"})
	// or try this instead:
	// reject({error: "something went wrong while fetching " + url})
	break;

	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">

	<title>d3 depth chart</title>

	<script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script>
	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

	<style>

idibidiart

What

Requirements