boriskaiser

@mixin background-2x($background, $file: 'png'){
  $image: #{$background+"."+$file};
  $image2x: #{$background+"2x."+$file};

  background: image-url($image) no-repeat;
  @media (min--moz-device-pixel-ratio: 1.3),
         (-o-min-device-pixel-ratio: 2.6/2),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx){

balupton

Debugging & Profiling Node.js - Moved! Click here to be redirected to the new location.

gist:4355633

@mixin respond-to($media) {
  if $media == medium-screens {
    @media only screen and (min-width: $breakMedium + 1) { @content; }
  }
  @else if $media == wide-screens {
    @media only screen and (min-width: $breakLarge + 1) { @content; }
    html.lt-ie9 & { // Using Paul Irish's conditional comments for IE8 and below
      @content;
    }
  }

jedfoster

1. What brings you to web development? What's your goal? What's your passion? What wakes you up in the middle of the night?

2. Tell me about common themes you run into working in the UI. How did you address them?

   • UX/Design changes?
   • What’s difficult, what’s fun?
   • Localization

3. What do you do to keep up to date with technology (blogs, conferences, etc)?

   • What blogs do you follow?
   • If you could master one technology this year, what would it be?

jareware

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

instance-pro

//
// LESS - Leaner CSS v1.3.1
// http://lesscss.org
// 
// Copyright (c) 2009-2011, Alexis Sellier
// Licensed under the Apache 2.0 License.
//
(function (window, undefined) {
//
// Stub out `require` in the browser

scottjehl

...
// test for font-face version to load via Data URI'd CSS
	// Basically, load WOFF unless it's android's default browser, which needs TTF, or ie8-, which needs eot
	var fonts = ns.files.css.fontsWOFF,
		ua = win.navigator.userAgent;

	// android webkit browser, non-chrome
	if( ua.indexOf( "Android" ) > -1 && ua.indexOf( "like Gecko" ) > -1 && ua.indexOf( "Chrome" ) === -1 ){
		fonts = ns.files.css.fontsTTF;
	}

micahgodbolt

// ---
// Sass (v3.2.9)
// ---


@mixin respond-to($queries...) {
    $length: length($queries);
    @for $i from 1 through $length{
        @if $i % 2 == 1 {
            @media screen and (min-width: nth($queries, $i)) { 

matt-bailey

// Generated on 2013-06-04 using generator-webapp 0.1.7
'use strict';
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var mountFolder = function (connect, dir) {
    return connect.static(require('path').resolve(dir));
};

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'

robmiller

#
# Working with branches
#

# Get the current branch name (not so useful in itself, but used in
# other aliases)
branch-name = "!git rev-parse --abbrev-ref HEAD"
# Push the current branch to the remote "origin", and set it to track
# the upstream branch
publish = "!git push -u origin $(git branch-name)"