Essential Web Dev Tools

  • homebrew (mac) install
  • iterm2 (mac)
  • MAMP (mac)
  • Git (install on pc, old version pre-installed on Mac)
  • Signup Github Account
  • Download WordPress
  • Local/Staging
  • Install WordPress
    • root server folder
    • create DB in phpMyAdmin
  • VirtualBox (install at home)
  • Vagrant (install at home)
  • VVV (install at home)
  • VV Dashboard (install at home)
  • VV (install at home)
  • WordMove (install at home)

Composer

$ brew install composer

Useful Chrome browser extensions

Y – Y link
* quick way to added html filler text to WordPress pages or anywhere.

Symbolic Linking on Macs (sym links)

Symbolic links are awesome and they really make life easy. Here’s an example of why I would use a symbolic link:
I have a notes folder in ~/Documents/dev/notes/web-dev-notes. Inside this folder I have a git repo initialized so I can push and pull commits from my laptop, work computer, school computer and home desktop. This works great but there are some files like connection information that I keep in digital notebooks. I add these files to my .gitignore so I don’t push them up to github as it is a public site people can see them. I could drag and drop them into my Dropbox folder but then I would have a duplicate of the same file and this is a big problem because it will be a pain to manually keep the files in sync. I could also just move the folder into Dropbox but that is bad too because all my files would have to be in Dropbox and I like to put certain files in certain places in my computers. The best thing to do here is to create a sym link between a folder on your Mac and the Dropbox folder. To do this you cd ~/Dropbox and once there you open another terminal window and browse to your notes folder. Once there type: pwd in the terminal to get the absolute path of where you are. Let’s say it gave you this path: ln -s /Users/USERNAMEHERE/Documents/dev/notes/web-dev-notes

Then just (from the Dropbox root folder on your mac) type this in the terminal

$ ln -s ln /Users/USERNAMEHERE/Documents/dev/notes/web-dev-notes
ln -s /path/to/folder/that/you/want/to/sync/ ~/Dropbox/folder/name

That’s it! Your folders are now linked so that when you make any changes on your file on your Mac (my notes file) it will be updated at the same time in the Dropbox folder. Since that folder will push it up to dropbox. You can easily access the file anywhere there is an internet connection.

Here is a great video showing you how to do this

Homebrew (Free)

For Mac, you need this to install stuff you should have on your mac as a developer
* Homebrew needs Mac’s XCode to be installed. It is a free install but large so when you install it, go grab a cup of coffee.

Update Homebrew

$ brew update

Install Homebrew (Free)

homebrew link

$ ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Update Git (Free)

Install using homebrew so you are using the latest and greatest git, the git on most macs out of box is way outdated

Get the most updated version of Git

$ brew install git

Tree (Free)

Use brew to install tree command

On PCs you have the command prompt. It is what PC users use instead of the Terminal. It has a native tree command. Macs do not have this command. Homebrew makes it easy to install. It just quickly shows you what is recursively inside folders.

$ brew install tree

Use tree command

  • browse to directory you want to examine
$ tree
  • Install stuff with brew
$ brew install (whatever you want to install)

imagemagick

  • free software to create, edit, compose or convert bitmap images
$ brew update && brew upgrade && brew install imagemagick
  • Note: I am chaining 3 brew commands together

Fixing Homebrew problems

Every day you work with homebrew make sure you to update and upgrade. Many of the homebrew problems you encounter will be fixed updating and upgrading.

Hub hub link

  • Command line wrapper for git that makes you better at GitHub
  • Say you want to create a github repo from your Terminal. It’s easy with Hub!

Imgur Screenshot app (Free)

  • I like to use cmd + shift + 4 to take a quick screenshot and this shortcut let’s me choose the size I want. With imgur I can take the screenshot, upload that screenshot to the imgur website and save the URL of that remote image in my clipboard. This is very handy when taking notes with markdown as I can just use markdown with ![image description](image-url-on-imgur-here) and that screenshoot will be in my notes that I can easily email to a client using ST3’s markdown packaged (markdownediting and markdown preview)

Mac2Imgur
Take a screenshot and it’s uploaded to imgur.
* I like to have this running as soon as my computer starts. You can change that it is’s setting. This is what it looks like mac2imgure icon
* If you also use Dropbox make sure this option `Share screenshots using Dropbox’ is unchecked in Dropbox’s settings as it will conflict with Mac2Imgur]
* I also like setting this option so that all the screenshots that I’m taking are not littering my desktop. They will be automatically deleted once they are uploaded to imgur.
setting to auto delete uploaded imgur screenshots

Jumpcut (Free)

Multiple saves of stuff you copy to clipboard
This is what the icon looks like jumpcut icon

BetterSnapTool

Browser Window Management
* Spectacle
* Moom
* Divvy
* all others

Chrome Dev Tools

  • set up so Chrome points to Sass source file
  • set up so change in dev tool makes change to original source scss file

Auto refresh browser

LiveReload

BrowserSync

CodeKit

Browserstack link

Bower link

  • A package manager for the web

Gulp link

  • automate and enchange your workflow
  • I like Gulp better than Grunt

Grunt link

  • JavaScript Task Runner

Toggl link

  • Track your project time

##iTerm2 linki
* This is superior to using just the Terminal. Lots of benefits.

Modernizr

Modernizr – use modern stuff and fall back to old stuff if browser sucks

HTML5 boilerplate

Problems to be aware of if using Google Docs

Note: copy/paste in google might give you wonky quotations

Solution: turn off smart quotes in google docs

screenshot

LICEcap – simple animated screen captures (free)

Great for adding to your markdown notes

JSBIN

Online code editor to practice your JavaScript

spectacle

Free app for OSX window management

RegExr

Free online way to practice regular expressions

Regex Golf

Learn regular expressions the fun way

RegEx Testing

Interview Cake

Get prepared for programming interviews

Typing.io

Practice typing faster (specific to programmers)

Leave a Reply

Your email address will not be published. Required fields are marked *