Front End Resources

This is a quick reference of links and tools I refer to on a semi-regular basis. Feel free to fork, clone or otherwise use as you wish.

##TOC

Architecture & Best Practices
Bash
Code Editors
CSS
Design
DOM
HTML
Image Optimization
Javascript
Media
Performance
Ruby on Rails
Sass
Source Control
Static Site Generators
Terminal
Tutorial Sites

##Architecture & Best Practices

[ ▲ ]

##Bash

###Show Git branch, and RVM Gemset

function __parse_git_branch {
 git branch --no-color 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/(\1)/'
}

function __my_rvm_ruby_version {
 local gemset=$(echo $GEM_HOME | awk -F'@' '{print $2}')
 [ "$gemset" != "" ] && gemset="@$gemset"
 local version=$(echo $MY_RUBY_HOME | awk -F'-' '{print $2}')
 [ "$version" == "1.8.7" ] && version=""
 local full="$version$gemset"
 [ "$full" != "" ] && echo "$full "
}

# via http://tammersaleh.com/posts/a-better-rvm-bash-prompt
bash_prompt() {
 local NONE="\[\033[0m\]"    # unsets color to term's fg color

 # regular colors
 local K="\[\033[0;30m\]"    # black
 local R="\[\033[0;31m\]"    # red
 local G="\[\033[0;32m\]"    # green
 local Y="\[\033[0;33m\]"    # yellow
 local B="\[\033[0;34m\]"    # blue
 local M="\[\033[0;35m\]"    # magenta
 local C="\[\033[0;36m\]"    # cyan
 local W="\[\033[0;37m\]"    # white

 local UC=$W                 # user's color
 [ $UID -eq "0" ] && UC=$R   # root's color

 PS1="$G\$(__my_rvm_ruby_version)$R\w $Y\$(__parse_git_branch)$R\$(__git_dirty)${NONE}$ "
}

bash_prompt
unset bash_prompt


function __git_dirty {
  git diff --quiet HEAD &>/dev/null
  [ $? == 1 ] && echo "!"
}

Edit dot files

alias editbash='sublime ~/.bash_profile'
alias edithosts='sublime /etc/hosts'
alias editssh='sublime subl ~/.ssh/id_rsa'
alias editgit='sublime ~/.gitconfig'

Local Server

alias pythonserver='python -m SimpleHTTPServer 8000'
alias l8000='open http://localhost:8000'

##Browser Compatibility

Can I Use

###Testing Tools

[ ▲ ]

##Code Editors

[ ▲ ]

##CSS

###Animation

###Best Practices

###Calculators

Grid Calculator

###Clipping Masks

###Grids

###Libraries & Frameworks

###Preprocessors

Sass

###Reference

Mozilla Developer Network

[ ▲ ]

##Design

###Calculators

Aspect Ratio Calculator

###Mock Tools

###Principles

###Typography

Collection of web safe CSS font stacks.
CSS Tricks - HTML Glyphs
Paul Irish Bulletproof Font Face
CSSLint Bulletproof Font Face
Font2Web
Font Style Matcher
Font Tools - Font Subsetting with Python
ttf2woff
ttf2woff2

###Vertical Rhythm

Basehold.it

[ ▲ ]

##DOM (Document Object Model)

###Reference

[ ▲ ]

##HTML

###Best Practices

Code Guide by @mdo (repeat from above)

###Content Generators

###Preprocessors

Haml
Jade

###Web Components

WebComponents.org

###Tools

[ ▲ ]

##Image Optimization

Cloudinary

##Javascript

###Build Tools

Gulp
Bower
Yeoman
- AngularFire Generator
- Angular Generator Issues
  - Github Generator Angular
  - Stack Overflow

###ES6 Compilers

Babel

###JSON

###Keyboard Events

Keycodes.info

###Modernizr Hooks for oldIE

[ie8] - no-backgroundsize
[ie9] - no-csstransforms3d

###Package Managers

###Reference

##Media

##Performance

##Podcasts

##Ruby on Rails

Layouts

###Running aliased Local Rails project on VirtualBox running Windows

Run the local rails project rails server -p 3000 -b 0.0.0.0
Open VirtualBox.
- If Windows is not already installed, see Modern.ie under Testing Tools above)
Setup an alias in the Windows .hosts file.
- This file can be found here: Windows -> System32 -> drivers ->
- Add this line to the file: 10.0.2.2 localhost
- Save the .hosts file
Open Internet Explorer or MS Edge, and type http://localhost:3000
- If that doesn't work, type http://10.0.2.2:3000

[ ▲ ]

Sass

Useful Sass Media Queries

@mixin media-range($from, $to) {
  @media (min-width: $from) and (max-width: $to) {
    @content;
  }
}
@mixin media-min($width) {
  @media (min-width: $width) {
    @content;
  }
}
@mixin media-max($width) {
  @media (max-width: $width) {
    @content;
  }
}

Sass Mixins to Target specific Browsers

@mixin iphone-5 {
  @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    @content;
  }
}

@mixin iphone-6 {
  @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    @content;
  }
}

@mixin iphone-6-plus {
  @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
    @content;
  }
}

@mixin iphone-all {
  @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (-webkit-min-device-pixel-ratio: 2) {
    @content;
  }

  @media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (-webkit-min-device-pixel-ratio: 2) {
    @content;
  }

  @media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 3) {
    @content;
  }
}

@mixin ms-ie-10-11-only {
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    @content;
  }
}

@mixin ms-edge-only {
  @supports (-ms-accelerator: true) {
    @content;
  }
}

@mixin firefox-only {
  @-moz-document url-prefix() {
    @content;
  }
}

[ ▲ ]

##Source Control

.gitconfig

[user]
  name = YOUR_NAME
  email = YOUR_EMAIL
[core]
  editor = sublime -n -w
[github]
  user = YOUR_USER_NAME
[color]
  ui = true
[alias]
  acom = commit -am
  co = checkout
  st = status
  pom = push origin master
  pog = push origin gh-pages
  pulm = pull origin master
  pulg = pull origin gh-pages
  dist = subtree push --prefix dist origin gh-pages
[credential "UNFUDDLE_GIT_REP"]
  username = YOUR_USER_NAME
[credential "https://github.com"]
  username = YOUR_USER_NAME
[credential]
  helper = osxkeychain
[mergetool]
  keepBackup = false
[merge]
  summary = true
  tool = opendiff
  log = true

[ ▲ ]

##Static Site Generators