peterc

#!/usr/bin/ruby
#
# wad - watch and run
# watches files and runs a command when they change
#
# usage: wad <files> <command>      
#
# example: 
#   ./wad index.html stylesheets/*.sass "sass stylesheets/main.sass stylesheets/main.css; open -g http://127.0.0.1:8000/"

hagenburger

// Released under MIT license: http://www.opensource.org/licenses/mit-license.php

$('[placeholder]').focus(function() {
  var input = $(this);
  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);

chriseppstein

Sass/Less Comparison

In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.

For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.

Variables

peterc

# Basic Ruby code to read and write ".webloc" files (as used on OS X)
# Reads both "old" Safari style and newer plist style
# Writes "old" style only
# Works on Ruby 1.9.2 and 1.8.7

require 'plist'

class Webloc
  attr_accessor :url

necolas

NOTE I now use the conventions detailed in the SUIT framework

Template Components

Used to provide structural templates.

Pattern

t-template-name

janogarcia

/ A simplistic way of loading and rendering HAML partials (header.haml, footer.haml, nav.haml... you name it) without Rails
/ Useful when using tools like LiveReload http://livereload.com/
/ but don't want to configure a web server just to use PHP include/require constructs (discussion http://help.livereload.com/discussions/questions/22-haml-partials)
/ It could be improved/simplified using a helper http://stackoverflow.com/questions/5436769/partial-haml-templating-in-ruby-without-rails/5436973#5436973
/ Check out the Jade version https://gist.github.com/2593727

%html
  %body
    %header    
    = Haml::Engine.new(File.read('/path/to/your/partial.haml')).render

leostratus

An ongoing project to catalogue all of these sneaky, hidden, bleeding edge selectors as I prepare my JSConf EU 2012 talk.

Everything is broken up by tag, but within each the selectors aren't particularly ordered.

I have not tested/verified all of these. Have I missed some or got it wrong? Let me know. - A

A friendly reminder that you may need to set this property on your target/selected element to get the styling results you want:

-webkit-appearance:none;

jsoverson

.visible-android {
  display:none;
}
.visible-ios {
  display:none;
}
.on-device .visible-android, .on-device .visible-android {
  display:inherit;
}
.device-ios .visible-android {

adaugherity

#!/usr/bin/ruby
# Create display override file to force Mac OS X to use RGB mode for Display
# see http://embdev.net/topic/284710

require 'base64'

data=`ioreg -l -d0 -w 0 -r -c AppleDisplay`

edids=data.scan(/IODisplayEDID.*?<([a-z0-9]+)>/i).flatten
vendorids=data.scan(/DisplayVendorID.*?([0-9]+)/i).flatten

cougrimes

.mktoForm, .mktoForm .mktoFieldWrap, .mktoForm .mktoHtmlText, .mktoForm input, .mktoLogicalField .mktoCheckboxList, .mktoRangeField, .mktoRangeValue {width:100% !important;}
@media only screen and (min-width:480px) {
.mktoFormCol:first-child:nth-last-child(2), .mktoFormCol:first-child:nth-last-child(2) ~ .mktoFormCol {width: 100% !important;}
.mktoFormCol:first-child:nth-last-child(3), .mktoFormCol:first-child:nth-last-child(3) ~ .mktoFormCol {width: 50% !important;}
.mktoFormCol:first-child:nth-last-child(4), .mktoFormCol:first-child:nth-last-child(4) ~ .mktoFormCol {width: 33.3333% !important;}
.mktoFormCol:first-child:nth-last-child(3) ~ .mktoFormCol {padding-left: 0.3em !important;}
}
@media only screen and (max-width:480px) {.mktoFormCol {width:100% !important;}}
.mktoAsterix{display:none !important;}
.mktoForm .mktoGutter {display:none !important;}