My presentation on nice front-endery things

nicethings.md

Nice Things

My presentation on nice front-endery things

• gist.io
• bl.ocks.org
  • CSS - Indented Button
  • JS - Readless
• Sublime Editor
• Multiple Cursors
• New Line Above/Below
• Sublime Packages
• Browser Refresh
• Comments Aware Enter
• GitGutter
• JavaScript Snippets
• Markdown Preview
• Tag
• GitHub CLI
• Gist CLI

gist.io

This presentation is being viewed on gist.io! Pretty right?

gist.io/GIST_ID

bl.ocks.org

Get live demos of your gists! To use the demo feature add an index.html file. You can point to relative files like styles and scripts.

bl.ocks.org/GITHUB_USERNAME shows all your gists.

bl.ocks.org/GIST_ID shows index.html in a frame with all the gist files below.

bl.ocks.org/d/GIST_ID shows index.html in it's own window. Visiting this refreshes the cache of your gist if you are having problems.

Indented Button - Demo

Use a :before element that increases as top does.

Readless - Demo

Quick and dirty.

Working on turning it into a jQuery plugin, mostly for my own education on classifying things.

Sublime Text 2 - Multiple Cursors

This is the shit!

• cmd + click or cmd + double-click

  Add cursor, or selection with cursor at the end.

• alt + drag

  Column select with a cursor at the end of each line selection.

• ctrl + shift + up/down-arrow

  Column select with cursor keys.

• cmd + ctrl + g

  Select all based on current selection.

• cmd + d

  Without selection: expand selection to word. With selection: add next find based on current selection.

  Example

  • Place cursor in var
  • cmd + d selects var
  • cmd + d adds next var to selection
  • … ad infinitum
  • Can't select backwards

Sublime Text 2 - Packages

First get the Package Install Manager to add, upgrade, and remove packages.

• Browser Refresh
• Comments Aware Enter
• GitGutter
• JavaScript Snippets
• Markdown Preview
• Tag

GitHub CLI - Link

Set your GitHub username and password in your git-config. To do so globally, put the following in ~/.gitconfig:

[github]
    user = USER
    password = !security find-generic-password -gs github.password -w | tr -d '\n'

The above line for password uses OSX's keychain to fetch the value of github.password, but only when the line is called. This means your password will never appear as plaintext in your git-config or terminal history.

Features

• alias git='hub'

• git clone -p allows you to clone a private repository.

• git pull-request creates a pull-request on GitHub.

  Best part? -i ISSUE_NUM converts an issue into a pull-request. Be careful: this is irreversible!

  Incidentally

  Deleting the remote branch on GitHub will close any pull-request for that branch:

  git push origin :<branch>

  or with git 1.7+

  git push origin --delete <branch>

Gist CLI - Link

This is great for sharing snippets of code you have in your terminal. Uses your GitHub settings in your git config. Either pipe STDIN or pass a filename as the last argument.

Examples

• Use standard in

  for i in {1..10}; do echo "This is number $i"; done | gist

• Use file and open in browser

  gist -o quick.js