How to Become a Keyboard Ninja

Hello, I'm Una Kravets / @una

Why Work on Your Keyboard Mastery?

  • Fast.
  • Efficient.
  • Looks Cool.

Mac Keyboard Shortcuts

Common Mac shortcuts

  • navigate open apps: cmd + tab
  • screen shot entire screen: cmd + shift + 3
  • screen shot with options: cmd + shift + 4
  • open preferences for the front app: cmd + ,
  • close tab: cmd + w

Finder shortcuts

  • duplicate a file: cmd + d
  • create a new folder: cmd + shift + n
  • move selected item to trash: cmd + delete
  • empty the trash: cmd + shift + delete
  • opens display prefs: option + brightness key

Finder Naviation

  • Open Desktop Folder: cmd + shift + d
  • Open Documents Folder: cmd + shift + o
  • Open Airdrop Utility: cmd + shift + r
  • Check out the "Go" Section
  • More Mac Shortcuts

Workflow Tools for the Win

Spectacle

Spectacle App

Download It.

Alfred App

Alfred App

Download This Too.
# Alfred Magics - `option` + `spacebar` is your personal assistant - Open programs - Search Finder for files - Quick web search - Find contacts

Customization



Alfred Dev Workflows
# Sublime Text

Step 1: Package Control

Click Here to Download

Emmet

  • HTML
  • CSS/Sass
  • Time for a Live Demo!
The Emmet Cheatsheet

Emmet is EVERYTHING!

# Step 3: Navigating Files & Panels - open/close sidebar: `cmd` + `k` + `b` - sidebar navigation: `ctrl` + `0` - tab navigation: `ctrl` + `tab` - fuzzy search: `cmd` + `p` - package options: `cmd` + `shift` + `p`
# Step 4: Sublime Shortcuts - move to begining/end of a line: `cmd` + (`←` or `→`) - move to top/bottom of document: `cmd` + (`↑` or `↓`) - multiple cursors: `cmd` - also, `cmd`+ `drag` - highlight line: `cmd` + `l` - select opening/closing tags: `cmd` + `shift` + `k` - remove containing tag: `cmd` + `'` - select from element out: `ctrl` + `d` - find all of a query: `cmd` + `d` - duplicate line: `cmd` + `shift` + `d` - indent or unindent: `cmd` + (`]` or `[`) - wrap element: `ctrl` + `w` + `...wrap` - wrap element adv: `a[href="http://link.com"]`
# Step 5: Other Packages - [AutoFile Name](https://sublime.wbond.net/packages/AutoFileName) - Syntax Highlighters - [Sass](https://sublime.wbond.net/packages/Sass) - [ES6](https://sublime.wbond.net/packages/JavaScriptNext%20-%20ES6%20Syntax) - Sidebar Styling - [Git Gutter](http://www.jisaacks.com/gitgutter) - [Sublime Linter](https://github.com/SublimeLinter/SublimeLinter-for-ST2) - [Bracket Highlighter](https://github.com/facelessuser/BracketHighlighter) - [Git Gutter](http://www.jisaacks.com/gitgutter) - [Color Highlighter](https://sublime.wbond.net/packages/Color%20Highlighter) - [More Front End Packages](https://github.com/mrmartineau/SublimeTextSetupWiki/wiki/Front-end-specific-Packages)

AutoFileName


Link

Git Gutter

Wow how meta.

Color Highlighter

color highlighter

So Many More

twirling
Tips from @wesbos

Step 6: Customizing Your User Settings


//increase carat size
"caret_extra_bottom": 2,
"caret_extra_top": 2,
"caret_extra_width": 2,
"caret_style": "solid",
"wide_caret": true,

// bracket highlighters
"match_brackets": true,
"match_brackets_angle": true,
"match_brackets_braces": true,
"match_brackets_content": true,
"match_brackets_square": true,

// modified tabs glow brighter
"highlight_modified_tabs": true,

// more space between lines
"line_padding_bottom": 1,
"line_padding_top": 1,

// bold folders
"bold_folder_labels": true,

// indentation highlight on active
"indent_guide_options": ["draw_normal", "draw_active"],
							
						

Step 7: More Fun Facts

  • show clipboard history: cmd + K, cmd + V
# Terminal
# Useful Terminal Commands - skip to begining of line: `ctrl` + `a` - skip to end of line: `ctrl` + `e` - show processes running: `top` - end process: `ctrl` + `c` - pause process: `ctrl` + `z` - resume task: `fg`

Vim!

Terminal Aliases

.zshrc or .bashrc

view: open ~/.zshrc

edit: vim ~/.zshrc


or create .aliases.sh

The "WTF" Alias


# restart terminal
alias wtf="source ~/.zshrc"
						

Absolute Links


# open these directories from anywhere
alias Dev="~/Desktop/Dev"
alias Blogs="~/Documents/Blogs"
						

Starting a Project


# install all the things
alias start-project="bundle install && bower install && npm install"
						

Get Your IP


alias myip='curl ip.appspot.com'
						

Git Visualization


# pretty visual git history
alias git-pretty="git log --graph --oneline --all --decorate"
						

Emoji Reference


# open up emoji cheat sheet in browser
alias emojis="open http://www.emoji-cheat-sheet.com/"

Enter Directory when you Make It


function mkd() {
	mkdir -p "[email protected]" && cd "[email protected]"
}
						

Personalize It!

Full Blog Post

# edit personal goals
alias pg-ed="subl ~/Desktop/Dev/personal-goals"

# check off personal goals (open main README.md in vim)
alias pg-ch="vim ~/Desktop/Dev/personal-goals/README.md"

# add to content list (opens content list folder in vim)
# i.e. pg-add blog-post or pd-add resource
function pg-add() {
	if [ $# -eq 0 ]; then
			print "Oops. Please enter a content type! (i.e. pg-add video)"
		else
			vim ~/Desktop/Dev/personal-goals/content-list/"[email protected]"s.md
	fi
}

# push my changes to my github master branch and open the page
alias pg-gh="cd ~/Desktop/Dev/personal-goals &&
	git add -A &&
	git commit -m 'push from terminal' &&
	git push origin master &&
	open http://github.com/una/personal-goals"
						

That's a lot of things

Keyboard Ninja Picture
I'm Ready
# Resources - [My Blog Post on Becoming a Keyboard Ninja](http://una.github.io/keyboard-ninja/) - [Team Treehouse Terminal Basics](https://teamtreehouse.com/) - [More Terminal Tips](http://computers.tutsplus.com/tutorials/40-terminal-tips-and-tricks-you-never-thought-you-needed--mac-51192) - [Wes Bos' Blog](http://wesbos.com) - [Command Line Power User](http://commandlinepoweruser.com/) - [Tommy's Blog Post on Overused ST2 Shortcuts](http://viget.com/extend/my-overused-sublime-text-keyboard-shortcuts)

Thank You!

Una Kravets / @una

una.im/keyboard-ninja-slides