boyofgreen’s gists

boyofgreen / 1.9.html

Created March 25, 2012 21:59

Hack #20: Using a JavaScript Delegate with Stored Custom Data

	<div class="container">

	<h1>Choose Your weapon</h1>
	<p>Click on one of the selections below to find out more info about your character:</p>

	<ul id="myList">
	<li data-discription="Most powerful goblin in entire kingdom" >Ludo</li>
	<li data-discription="Ruler over all goblins big and small" >Jareth the Gobblin King</li>
	<li data-discription="Only person who can put a stop to the Goblin King" >Sarah</li>
	<li data-discription="Unsung hero of the goblin kingdom" >Hoggle</li>

boyofgreen / liveform.html

Created March 26, 2012 16:27

live form!

	...

	<progress class="completeMeter" min="0" max="100" low="0" high="10" value="0" ></progress>
	</div>
	<form id="RegisterUserForm" action="" name="myForm" method="post">
	<fieldset>
	<p>
	<label for="name">Name</label>
	<input id="name" name="name" type="text" class="text" placeholder="Name"
	value="" required />

boyofgreen / gist:2206434

Created March 26, 2012 16:46

live form css

boyofgreen / gist:2206439

Created March 26, 2012 16:47

live form js

	var pageMeter = document.querySelector('.completeMeter');
	var checkMyValidity = function(){
	var valueCollection = document.querySelectorAll('#RegisterUserForm input');
	var myTotal = 0;
	for (var i = 0; i< valueCollection.length; i++) {
	//store it in local storage so it's there if they come back
	localStorage[valueCollection[i].name] = valueCollection[i].value;
	var isValid = valueCollection[i].checkValidity();
	if(isValid === true){
	myTotal += 20;

boyofgreen / gist:2209379

Created March 26, 2012 20:20

face reco html

	<div class="wrapper">
	<h1>HTML5 GLASSES</h1>
	<p>Created by <a href="http://twitter.com/wesbos" target="_blank">Wes Bos</a>.
	See full details <a href="">here.</a></p>
	<!-- Our Main Video Element -->
	<video height="426" width="640" controls="false">
	<source src="videos/wes4.ogg" />
	<source src="videos/wes4.mp4" />
	</video>
	<!-- Out Canvas Element for output -->

boyofgreen / gist:2209391

Created March 26, 2012 20:23

face reco css

	App.init = function() {
	// Prep the document
	App.video = document.querySelector('video');

	App.glasses = new Image();
	App.glasses.src = "i/glasses.png";

	App.canvas = document.querySelector("#output");
	App.ctx = this.canvas.getContext("2d");

boyofgreen / gist:2209397

Created March 26, 2012 20:24

face reco js

	drawToCanvas : function(effect) {
	var video = App.video,
	ctx = App.ctx,
	canvas = App.canvas,
	i;

	ctx.drawImage(video, 0, 0, 520,426);
	//get the image data pixels from the canvas and pass it to js
	App.pixels = ctx.getImageData(0,0,canvas.width,canvas.height);

boyofgreen / hacks2.10.1.html

Created April 3, 2012 03:46

HTML5 Hacks 2.10

	<li itemscope>
	<ul>
	<li>Name: <span itemprop=”name”>Fred</span></li>
	<li>Phone: <span itemprop=”telephone”>210-555-5555</span></li>
	<li>Email: <span itemprop=”email”>[email protected]</span></li>
	</ul>
	</li>

boyofgreen / HTML5-2.1.html

Created April 4, 2012 01:36

HTML5 Hacks 2.1



	<!-- HTML5 doctype -->

	<!doctype html>


	<!--XHTML doctype -->

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

boyofgreen / html5 code enhanced.html

Created April 4, 2012 01:43

HTML5 Hacks 2.2

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>...</title>
	</head>
	<body>
	<header data-yuigrid=”doc2” data-wordpress=”2833893”>...</header>
	<nav>...</nav>
	<article data-yuigrid=”doc2” data-wordpress=”887478”>...</article>

Jeff Burtoft boyofgreen