Building up Your development Toolbox – Sublime Text – iTerm 2



Building up Your development Toolbox – Sublime Text – iTerm 2

0 0


HighEdWeb-2016

"Building up your Development Toolbox" presentation for HighEdWeb Michigan 2016

On Github brentswisher / HighEdWeb-2016

Building up Your development Toolbox

Hello!

I'm Brent Swisher I make websites and things@brentswisher

Grand Valley State University

Just over 25,000 Students www.gvsu.edu/quickfacts

GV Web Team

Centralized Team Institutional Marketingwww.gvsu.edu/webteam

Story Time

It's 2014

My house is sinking

I need a beam

Which means I need a plumber

So I meet Bill

Bill teaches me about web development??

“...afraid it would cheapen the trade.”

Craftsmanship

It's this

Evaluating Tools

Too many options

How do you decide?

  • How does it make my life better?
  • How does it make my life worse?
  • Which matters more?
  • Saves time (Efficiency)
  • Raises standard of the work (Quality)
  • Makes boring crap easier (Automation)
  • What's the learning curve
  • Does it fit our technology stack
  • What is our teams group dynamic
  • How likely is it to break?

Why is this important?

A tale of three developers

  • The jQuery Kid
  • If it isn't broke...
  • I don't have time...

My Favorite Tools

Sublime Text

It's FAST

Multiple Cursors

Say What?
Select Next (cmd+D)
Select All (Ctrl+cmd+G)

Find Anything

Browse Files (cmd+p)
Jump to line (cmd+p, :)
Jump to function (cmd+p, @)

Other Fun Things

Open Previously Closed Tab (Shift+CMD+T)
Package Manager

Favorite Packages

  • Bracket Highligher
  • Better Completions
  • Sidebar Enhancements
  • SublimeLinter

iTerm 2

Tabs/Panels
Go Back In Time

Other Fun Things

  • Multiple Profiles
  • Paste History
  • Integrated 'ps' window
  • Better Color Choices

Grunt

Live Reload
Code Linting
Compression/Pre-processors

Slack

Team Chat
Multi-person DM
Reminders
Integrations
Custom Bots

Accessibility

Siteimprove

http://siteimprove.com/

Color Oracle

Filters screen to imitate color blindness

  • Deuteranopia
  • Protanopia
  • Tritanopia

http://colororacle.org

Colour Contrast Analyzer

https://www.paciellogroup.com/resources/contrastanalyser/

Contrast Ratio

http://leaverou.github.io/contrast-ratio/

Design

Eye Dropper

https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka?hl=en

Bootstrap Themes
Free!Paid
What Font

https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en

Dimensions

https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj?hl=en

MeasureIt

https://chrome.google.com/webstore/detail/measureit/pokhcahijjfkdccinalifdifljglhclm?hl=en

Image Size Info
  • Chrome Extension
  • Right click to view image
    • Size
    • Displayed & Actual Dimensions
    • Path

https://chrome.google.com/webstore/detail/image-size-info/oihdhfbfoagfkpcncinlbhfdgpegcigf?hl=en

OSX Resizer

https://chrome.google.com/webstore/detail/osx-resizer/aopgpanbkndckicpnnnaeiebllepdldc?hl=en

Color Thief

http://lokeshdhakar.com/projects/color-thief/

Productivity

Egg Timer

Pass the time in the url

  • e.ggtimer.com/4minutes
  • e.ggtimer.com/1hour

Useful for the Pomodora Technique

http://e.ggtimer.com/

Code School

Performance Tools

Google Page Speed

https://developers.google.com/speed/pagespeed/

TinyPng

https://tinypng.com/

Web Page Test

https://webpagetest.org/

Misc.

Latin is boring

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Cat Ipsum
Bacon Ipsum
Hipster Ipsum
Grand Perspective

http://grandperspectiv.sourceforge.net/

Skitch

https://evernote.com/skitch/

RecordIt

http://recordit.co/

Giphy

Gifs for everything!!

Placekitten

http://placekitten.com/

What’s My Browser

http://www.whatsmybrowser.org/

The Command Line

Git Hist
							
[alias]
hist = git log --pretty=format:\"%ad - %an | %s%d \" --graph --date=relative
							
						

Git command line alias to semi-graphically show git history. (Set in ~/.gitconfig)

Git Files
							
[alias]
files = !sh -c 'clear && git log --oneline --stat -n ${1:-5}' -
							
						

Git command line alias to show recently changed files. (Set in ~/.gitconfig)

Better ls
							
alias ls='ls -GFh'
							
						

Add color and make file size human readable

File Size
							
alias filesize='du -sm ./* | sort -nr'
							
						

Display a list of the files in a folder sorted by file size

Customize Prompt
							
source /usr/local/git/contrib/completion/git-prompt.sh
source /usr/local/git/contrib/completion/git-completion.bash
GIT_PS1_SHOWDIRTYSTATE=true
export PS1='[\[\e[0;31m\]\h\[\e[m\] \W\[\e[0;30m\]$(__git_ps1)\[\e[m\]]\$ '
							
						

Display the host, the current directory, the git branch, and the git change stateGit PromptGit Complete

Add Color to Git
							
[color]
    ui = true
[color]
    branch = auto
    diff = auto
    status = auto
[color "branch"]
    current = yellow reverse
    local = yellow
    remote = green
[color "diff"]
    meta = yellow bold
    frag = magenta bold
    old = red bold
    new = green bold
[color "status"]
    added = yellow
    changed = green
    untracked = cyan
							
						

Adds color to different git file states

Better SSH

SSH KeysSSH Alias

Build your own tools

Zebra
Task Detail
Hippo
Error Detail

"We become what we behold. We shape our tools and then our tools shape us."

Marshall McLuhan

Thank You!

Questions?

Building up Your development Toolbox