joshbeckman’s gists

joshbeckman / menu.html

Created January 4, 2014 22:18

General-purpose hidden menu with animation, button animation, responsive styling. Woot.

	<!DOCTYPE html>
	<html>
	<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-type" />
	<title>Hidden Menu Demo</title>
	<meta content="width=device-width, initial-scale=1" name="viewport" />
	<style type="text/css">
	body{
	margin:0;
	background:coral;

joshbeckman / gist:8023913

Last active December 31, 2015 17:59

Bouncing bars animation

	<!DOCTYPE html>
	<html>
	<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-type" />
	<title>Animated Bars</title>
	<meta content="width=device-width, initial-scale=1" name="viewport" />
	<style type="text/css">
	body{
	margin:0;
	}

joshbeckman / gist:7868209

Created December 9, 2013 06:30

Create a download link for JSON file.

	function makeJSONDownload(evt) {
	window.URL = window.URL \|\| window.webkitURL;
	var content = JSON.stringify(p);
	var blob = new Blob([content], {type: 'application/json'});

	var link = document.createElement('a');
	link.href = window.URL.createObjectURL(blob);
	link.textContent = 'download here';
	link.download = 'test.json';
	document.getElementById('div').appendChild(link);

joshbeckman / gist:7867975

Created December 9, 2013 06:02

Dummy/starter/playground HTML page.

	<!DOCTYPE html>
	<html>
	<head>
	<meta content="text/html; charset=utf-8" http-equiv="Content-type" />
	<title>Playground</title>
	<meta content="width=device-width, initial-scale=1" name="viewport" />
	<style type="text/css">
	body{
	margin:0;
	}

joshbeckman / gist:7867934

Created December 9, 2013 06:00

Handle drag-n-drop JSON file upload and parsing with javascript.

	if (window.File && window.FileReader && window.FileList && window.Blob) {
	// Great success!
	function handleJSONDrop(evt) {
	evt.stopPropagation();
	evt.preventDefault();
	var files = evt.dataTransfer.files;
	// Loop through the FileList and read
	for (var i = 0, f; f = files[i]; i++) {

	// Only process json files.

joshbeckman / gist:7867926

Created December 9, 2013 05:59

Handle and get information about files selected.

	if (window.File && window.FileReader && window.FileList && window.Blob) {
	// Great success!

	function handleFileSelect(evt) {
	var files = evt.target.files;
	// files is a FileList (object) of File objects. List some properties.
	var output = [];
	for (var i = 0, f; f = files[i]; i++) {
	output.push('<li><strong>', escape(f.name), '</strong> (', f.type \|\| 'n/a', ') - ',
	f.size, ' bytes, last modified: ',

joshbeckman / gist:7678799

Created November 27, 2013 16:36

Base64 encode images for browser loading

	<?php
	$im = file_get_contents('<image url here>');
	$imdata = base64_encode($im);
	?>

	<img src="data:image/png;base64,<?php echo $imdata; ?>" />
	or
	<img src="data:image/jpg;base64,<?php echo $imdata; ?>" />

joshbeckman / gist:7199231

Created October 28, 2013 15:45

Curried Functions

	function add (verb, a, b) {
	return "The " + verb + " of " + a + ' and ' + b + ' is ' + (a + b)
	}

	add('sum', 5, '6')
	//=> 'The sum of 5 and 6 is 11'

	// Here is the curried version:

	function addCurried (verb) {

joshbeckman / gist:6886647

Created October 8, 2013 15:36

Leverage the browser to escape or unescape HTML via javascript

	function escapeHtml(str) {
	var div = document.createElement('div');
	div.appendChild(document.createTextNode(str));
	return div.innerHTML;
	};
	function unescapeHtml(escapedStr) {
	var div = document.createElement('div');
	div.innerHTML = escapedStr;
	var child = div.childNodes[0];
	return child ? child.nodeValue : '';

joshbeckman / judo.js

Last active December 24, 2015 16:29

Judo.js is tiny front-end javascript library of utilitarian mini-functions for custom development. Like physical judo leveraging the opponent against him/herself, this library leverages the browser into manipulating itself.

	window.judo = {
	scrollTo: function(element, to, duration) {
	var start = element.scrollTop,
	change = to - start,
	currentTime = 0,
	increment = 20,
	easeInOutQuad = function (t, b, c, d) {
	t /= d/2;
	if (t < 1) return c/2tt + b;
	t--;

Josh Beckman joshbeckman