Skip to content

Instantly share code, notes, and snippets.

View steckel's full-sized avatar

Curtis Steckel steckel

  • San Francisco, CA
View GitHub Profile
@steckel
steckel / simpleAssServer.coffee
Created September 30, 2011 19:53
Just a, stupid, simple executable coffeescript that'll serve up a folder on your filesystem
#!/usr/bin/env coffee
sys = require "sys"
http = require "http"
url = require "url"
path = require "path"
fs = require "fs"
argv = process.argv
@steckel
steckel / CoffeeScript.md
Created November 17, 2011 22:31
An introduction to CoffeeScript

CoffeeScript

A little language that compiles into JavaScript.

JavaScript is kind of a big deal.

The web was not built for the interactivity we have come to expect of it. Web pages were originally designed to contain static text and images. Hyperlinks were a way to travel between these static pages but, that was the extent of a page's interactivity.

Java and JavaScript emerged as competitors (Java is to JavaScript as Car is to Carpet) in web browsers promising to add a new level of dynamic content and interactivity.

@steckel
steckel / $.fn.getInlineStyleObject()
Created December 9, 2011 19:18
A helpful little JQuery plugin I adapted from http://jsfiddle.net/ZcEUL/
$.fn.getInlineStyleObject = function() {
var $element, prop, props, rprops, str, styleObject, _i, _len;
$element = this;
str = $element.attr("style");
rprops = /[\w-]+(?=:)/g;
props = str.match(rprops);
styleObject = {};
for (_i = 0, _len = props.length; _i < _len; _i++) {
prop = props[_i];
if ($element[0].style[prop] != null) {
@steckel
steckel / toCSSMatrix3d.coffee
Created December 16, 2011 00:40
Simple prototype function for String objects to take a CSS transformation string and return a CSSMatrix3d string.
String::toCSSMatrix3d = ->
webKitCSSMatrix = new WebKitCSSMatrix @
matrix3d = "matrix3d(#{webKitCSSMatrix.m11},#{webKitCSSMatrix.m12},#{webKitCSSMatrix.m13},#{webKitCSSMatrix.m14},#{webKitCSSMatrix.m21},#{webKitCSSMatrix.m22},#{webKitCSSMatrix.m23},#{webKitCSSMatrix.m24},#{webKitCSSMatrix.m31},#{webKitCSSMatrix.m32},#{webKitCSSMatrix.m33},#{webKitCSSMatrix.m34},#{webKitCSSMatrix.m41},#{webKitCSSMatrix.m42},#{webKitCSSMatrix.m43},#{webKitCSSMatrix.m44})"
matrix3d
console.log "scale3d(2, 2, 0) translate3d(-454px, 0px, 0px) rotate(1deg)".toCSSMatrix3d()
@steckel
steckel / gist:1617124
Created January 15, 2012 20:38
Objective-C meh

Why do we need to tell Objective-C what types of pointer variables something is when it's obvious after we alloc it?

NSFetchedResultsController *aFetchedResultsController = [NSFetchedResultsController alloc]

Shouldn't it be as simple as

aFetchedResultsController = NSFetchedResultsController alloc
@steckel
steckel / redirect.js.coffee
Created January 26, 2012 22:50
Environment aware, client side redirect
window.DeviceRedirect = class DeviceRedirect
constructor: (@platforms, @envRegEx, @ignoreList...) ->
init: ->
@currentLocation = window.location.href.toLowerCase()
@isHere = if @currentLocation.match @envRegEx then true else false
ismobile = (/iphone|ipod|android|blackberry|opera mini|opera mobi|windows phone|palm|iemobile/i.test(navigator.userAgent.toLowerCase()))
istablet = (/ipad|tablet/i.test(navigator.userAgent.toLowerCase()))
isdesktop = if ismobile or istablet then false else true
@steckel
steckel / bdd_cucumber-js.md
Created February 21, 2012 21:39
Workflow: Behavior Driven Development/Design for Front End Development (JavaScript)

Beyond any other definition, Behavior Driven Development/Design ("BDD") is a philosophy.

What is "BDD"?

"BDD" is a set of tools and techniques that exist to support one idea: good software is written to meet the needs of the stakeholders (typically clients).

These stakeholders know their business better than the people designing the software. It is the responsibility of developers to capture the business requirements and translate them into software.

BDD tools facilitate this as a process by letting developers author features first, which capture requirements in a domain-specific language. Code is developed by working on these high-level features, and then on code specifications.

##Backend:

  • Node.js: JavaScript server environment
  • Express: Sinatra inspired http framework
  • Locomotive: Rails-style MVC framework (uses Express)
  • CoffeeScript
  • Jade: JavaScript server side templating (JavaScript version of HAML)

##FrontEnd:

@steckel
steckel / hi-res-web.md
Created March 2, 2012 19:58
Hi-Res Web

Hi-res web

What the hell is going on here?

This is already happening. We have devices in the market that already have high pixel density displays besides Apple's Retina screens and we know no one plans on scaling back on this technology. We also know that, all though, the majority of these devices are on mobile phones and tablets, mobile is playing a larger part in the web and also isn't going to start slowing down any time soon.

Will we all just blindly follow Apple's iOS workflow and create multiple assets for multiple resolution targets? some-image.png and some-image@2x.png?

There's definitely more options than this and the web isn't such a simple place where we can just accept apple's native app work flow and expect it to work without any consequences.

Right now, I don't think any of us use Sass/Scss, Less, or Stylus to the point where switching back and forth isn't possible. They're all basically the same until you get into the super power user features which, none of us have embraced quite yet.

#Sass/Scss

We obviously know what Sass and Scss are. I think the css-compatible format is pretty nice option even though, ascetically, I prefer sass.

body
 background-color:red;