Skip to content

Instantly share code, notes, and snippets.

View jimjeffers's full-sized avatar

Jim Jeffers jimjeffers

83 followers · 57 following
View GitHub Profile
@jimjeffers
jimjeffers / html5VideoAspectRatioAdjustment.coffee
Created September 15, 2011 13:24
Breaking the HTML5 Video Aspect Ratio
# Just an example.
# @video is a direct reference to a '<video>' element.
# $() is assuming jQuery is being used in this example.
@video.addEventListener("loadedmetadata", (event) =>
actualRatio = @video.videoWidth/@video.videoHeight
targetRatio = $(@video).width()/$(@video).height()
adjustmentRatio = targetRatio/actualRatio
$(@video).css("-webkit-transform","scaleX(#{adjustmentRatio})")
)
@jimjeffers
jimjeffers / fairtax.rb
Created August 16, 2011 17:52
A comparison of the FairTax vs. the Progressive Tax
# FairTax vs. Progressive Income Tax
# DISCLAIMER: This of too simple and doesn't take the rebate/prebates into
# account but illustrates how consumption based taxation can be regressive.
# Current income tax brackets would be the equivalent of 16.9% of income for the middle fifth
# and 23.74% for the upper fifth.
# http://www.moneychimp.com/features/tax_brackets.htm
# Results in $7,361 on $44,943 of earnings.
@jimjeffers
jimjeffers / newSauce.js
Created July 18, 2011 17:59
Refactored the API for sauce.
// Make a sauce for the headline...
var headlineSauce = new Sauce();
headlineSauce.recipe(function(element){
element.change("y").from(-200).using(Easie.bounceOut);
element.change("scale").from(0).using(Easie.circOut);
});
headlineSauce.duration(1).delay(1).putOn("sauce");
// Make a sauce for the tagline...
var taglineSauce = new Sauce();
@jimjeffers
jimjeffers / merge_objects.coffee
Created July 10, 2011 22:32
Merge one or more objects.
# Usage: mergeObjects(obj1,obj2,obj3,etc)
mergeObjects = (objects...) ->
combinedObject = {}
for object in objects
combinedObject[key] = value for key,value of object
combinedObject
@jimjeffers
jimjeffers / hotsauce.js
Created July 8, 2011 22:36
HotSauce
var hotSauce = new Sauce();
hotSauce.addFlavor("chili",{
equation: Easie.elasticOut,
from: -400,
to: 0,
period: 15
}).addFlavor("pepper",{
equation: Easie.circOut,
from: 0.5,
to: 1,
@jimjeffers
jimjeffers / gist:1043333
Created June 23, 2011 19:05
Apple's Elastic CSS Animations
<!DOCTYPE html>
<html>
<head>
<!-- Apple nicely commented all of these transitions on their source file:
http://images.apple.com/global/styles/productbrowser.css -->
<style type="text/css" media="screen">
/* Just some basic presentational CSS for the example */
a {
background: #000; display: block; color: #fff;
font: 1.5em "Lucida Grande", "Trebuchet MS", Verdana, sans-serif;
@jimjeffers
jimjeffers / noise.coffee
Created May 22, 2011 18:11
Generate noise with Canvas.
# Inspired and largely borrowed from Pixstatic
# http://www.pixastic.com/lib/git/pixastic/actions/noise.js
# https://github.com/jseidelin/pixastic
# And NetTuts tutorial:
# http://blip.tv/nettuts/how-to-generate-image-noise-with-canvas-4439977#EpisodeDescription
# http://net.tutsplus.com/tutorials/javascript-ajax/how-to-generate-noise-with-canvas/
window.Noise = class Noise
constructor: ->
@jimjeffers
jimjeffers / gist:984897
Created May 21, 2011 21:04
Date Sorting Comparators
# item.getDate() assumes you are returning a Date object from your model.
dateComparator: (item) ->
item.getDate().getTime()
reverseDateComparator: (item) ->
-item.getDate().getTime()
@jimjeffers
jimjeffers / cssbeautify.rb
Created March 5, 2011 20:22
Formats a CSS file so the rules and selectors are printed clearly. Rules are sorted alphabetically, selectors are sorted by length.
nodes = File.open("path/to/stylesheet.css").readlines.join("").gsub(/\n/,"").split("}").map do |chunk|
selectors = chunk.split("{")[0]
rules = chunk.split("{")[1]
chunk = { :selectors => selectors.split(','), :rules => rules.split(';').map{|r| [r.split(':')[0],r.split(':')[1]]} } unless rules.nil? or selectors.nil?
end
output = ""
nodes.each do |node|
unless node.nil?
output += node[:selectors].sort {|x,y| x.length <=> y.length }.join(",\n") + " {\n"
output += node[:rules].sort {|x,y| x[0] <=> y[0] }.map{|rule| " #{rule.join(": ")}"}.join(";\n") + "\n}\n\n"
@jimjeffers
jimjeffers / button.html
Created February 9, 2011 16:09
Nice shiny button all in CSS3.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Nice CSS3 Button</title>
<style type="text/css" media="screen">
body {
font: normal normal normal 1em/1.5em "Helvetica Neue", Arial, sans-serif;
}