Skip to content

Instantly share code, notes, and snippets.

git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr)%C(bold blue)<%an>%Creset' --abbrev-commit"
@pistachiomatt
pistachiomatt / sprite-generation-with-retina.scss
Last active November 5, 2019 12:28
This function generates a sprite sheet of icons, swaps it out for retina versions, and generates the "width" and "height" properties of the icons for you— automatically. Because we're lazy and have better things to do!
// Stick all your icons in a subfolder in your images folder. Put retina versions in a subfolder of that called "@2x".
$sprites: sprite-map("NAME_OF_SUBFOLDER/*.png");
$sprites2x: sprite-map("NAME_OF_SUBFOLDER/@2x/*.png");
// stolen from 37signals
@mixin retina-media() {
@media (min--moz-device-pixel-ratio: 1.3),
(-webkit-min-device-pixel-ratio: 1.3),
(min-device-pixel-ratio: 1.3),
(min-resolution: 1.3dppx) {
@jensgro
jensgro / _flat-ui-colorscheme.scss
Last active December 21, 2015 18:42
Color variables for flat-ui designs. Names and colors from http://flatuicolors.com/
// names and colors from http://flatuicolors.com/
$turquoise: #1ABC9C;
$green-sea: #16A085;
$emerland: #2ECC71;
$nephritis: #27AE60;
$peter-river: #3498DB;
$belize-hole: #2980B9;
$amethyst: #9B59B6;
$wisteria: #8E44AD;
@jakeonrails
jakeonrails / Ruby Notepad Bookmarklet
Created January 29, 2013 18:08
This bookmarklet gives you a code editor in your browser with a single click.
data:text/html, <style type="text/css">#e{position:absolute;top:0;right:0;bottom:0;left:0;}</style><div id="e"></div><script src="http://d1n0x3qji82z53.cloudfront.net/src-min-noconflict/ace.js" type="text/javascript" charset="utf-8"></script><script>var e=ace.edit("e");e.setTheme("ace/theme/monokai");e.getSession().setMode("ace/mode/ruby");</script>
@dwayne
dwayne / 00-install-on-64-bit-ubuntu-14.04.md
Last active January 12, 2024 17:48
Installing node and npm on Ubuntu 12.04 LTS and 64-bit Ubuntu 14.04 LTS.
  1. Navigate to http://nodejs.org/download/ and on the Linux Binaries (.tar.gz) row click to download the 64-bit version of the current latest release.

  2. Say you've downloaded node-v0.10.7-linux-x64.tar.gz into the Downloads directory. Then, open the terminal and type the following:

$ cd ~/Downloads
$ mkdir -p ~/local/node
$ tar xzf node-v0.10.7-linux-x64.tar.gz -C ~/local/node --strip-components=1
$ echo '# Node Enviroment Setup' >> ~/.bashrc
$ echo 'export PATH=$HOME/local/node/bin:$PATH' &gt;&gt; ~/.bashrc
@Attamusc
Attamusc / screenshot.coffee
Created June 23, 2012 14:43
Take a screenshot of any website, using PhantomJS.
# Simple little script to take a Screenshot of any website
#
# Usage: phantomjs screenshot.coffee http://google.com ./google.png
# I've always liked automated testing tools for front-end development like Selenium
# and Selenium Remote Control. One of the cool features was the ability to take a screenshot
# if the test failed. This was always useful as sometimes I could immediately see what went
# wrong and then fix it based on what I saw in the screenshot.
#
# I just started playing with PhantomJS and thought "I wonder if I could replicate that!"
@usefulthink
usefulthink / generated.css
Created June 13, 2012 12:16
generates style-rules for a percentual 940px grid
.row { margin-left: -2.12766%; }
/* [1] – px: 60 pct: 6.38298% */
.span1 { width: 6.38298%; margin-left: 2.12766%; }
/* [2] – px: 140 pct: 14.89362% */
.span2 { width: 14.89362%; margin-left: 2.12766%; }
.span2 .span1 { width: 42.85714%; margin-left: 14.28571%; } /* 60px */
/* [3] – px: 220 pct: 23.40426% */
@webdevotion
webdevotion / .bash_profile
Last active December 21, 2020 10:17
Fancy bash shell
# READ MORE HERE: http://www.webdevotion.be/blog/2012/06/06/terminal-git-branch-status-colored-icons
# ==============================================================================
# FANCY GIT STATUS ICONS
# ==============================================================================
# SOME VARIABLES in capitals
# no whitespace between variable names and = sign!
COLOR_RESET="\e[00m"
COLOR_GREEN="\e[1;32m"
COLOR_RED="\e[00;31m"
@eirikbacker
eirikbacker / addEventListener-polyfill.js
Created June 3, 2012 19:30
addEventListener polyfill for IE6+
//addEventListener polyfill 1.0 / Eirik Backer / MIT Licence
(function(win, doc){
if(win.addEventListener)return; //No need to polyfill
function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}}
function addEvent(on, fn, self){
return (self = this).attachEvent('on' + on, function(e){
var e = e || win.event;
e.preventDefault = e.preventDefault || function(){e.returnValue = false}
e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true}
@emilbjorklund
emilbjorklund / breakpoints_via_css.html
Created April 24, 2012 16:03
Width detection via sneaky CSS rules
<!DOCTYPE html>
<!--[if IE 8]> <html lang="sv-SE" class="no-js ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="sv-SE" class="no-js"> <!--<![endif]-->
<head>
<meta charset="UTF-8">
<title>Breakpoint detection test</title>
<style type="text/css" media="screen">
@media screen and (min-width: 320px) {
#page:after {
content: 'smallest'; /* represent the current width-bracket */