Fullstack Academy - Awesome Web Dev Tips & Tricks

I created this deck as a resource for other Fullstack Academy students while I was a student there myself.

This deck served to aid students ramp up their dev environment while studying at Fullstack Academy.

Fullstack Academy - Awesome Web Dev Tips & Tricks

Making Sublime Sexy, Themes, Packages, Customizing Your Terminal, Cool OSX Apps, Nifty Chrome Extensions, Wicked Websites, Funsies, and other awesome resources...

1. Making Sublime Sexy πŸ”—οΈŽ

Let’s start by installing Package Control!

To note.. ST3 > WebStorm > Vim.

Package Control πŸ”—οΈŽ

The de facto Sublime Text package manager with over 2,500 packages available for installation, all available in GitHub or BitBucket repos.

Installing Package Control πŸ”—οΈŽ

Go here: https://packagecontrol.io/installation

Installing Packages πŸ”—οΈŽ

⌘ ⇧ P

Command + Shift + P

Installing a Certain Package πŸ”—οΈŽ

Enter To Install The Highlighted Package & You’re Done!

Themes πŸ”—οΈŽ

To make your dev environment purty.

Installing Themes πŸ”—οΈŽ

This article basically covers everything.

So basically… use the Package Manager.

Make sure to include the code in your User Settings file which can be found under Sublime Text > Preferences > Settings - User.

For example, if you installed the Theme ITG Flat, then this is how you would modify your User Settings file to have the dark version of the theme and color scheme.

These instructions will be in the Theme’s documentation on their GitHub repo.

  "color-scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme",
  "theme": "itg.flat.dark.sublime-theme"

Magical Packages πŸ”—οΈŽ

You’re a wizard now.

Also, some of these just work with ST3.

Bracket Highlighter πŸ”—οΈŽ

Matches a variety of cases such as [], {}, (), "", '', <tag></tag>, and even custom brackets.

GitGutter πŸ”—οΈŽ

Shows an icon in the gutter area indicating whether a line has been inserted, modified, or deleted.

SublimeLinter πŸ”—οΈŽ

Shows where possible syntax errors could be.

For JavaScript (JSHint), go here.

For more JS stuff, go here.

HTML-CSS-JS Prettify πŸ”—οΈŽ

Prettify your code.

Markdown Editing πŸ”—οΈŽ

Powerful editing features for all you Markdown lovers.

AutoFileName πŸ”—οΈŽ

Autocomplete file naming for lazy people.

Sublime CodeIntel πŸ”—οΈŽ

Full featured code intelligence and smart autocomplete engine.

Makes your sidebar more powerful.

Codeiviate πŸ”—οΈŽ

Insight, motivation, and benchmarking for programmers.

Want more? πŸ”—οΈŽ

Learn from the best of the best.

Seriously, there’s an entire series from the Google Developers YouTube team dedicated to cool plugins.

2. Messing with the Terminal πŸ”—οΈŽ

If you want to feel like a hacker just because though, go here and start typing away!

Creating Aliases in Terminal/iTerm πŸ”—οΈŽ

Type in nano .bash_profile.

Then type in alias [insert alias name here] = "cd ~/[insert path here]".

i.e. alias cdfsa = "cd ~/Dropbox/GitHub/FSA"

Make sure to restart your terminal after you add the alias(es).

No more sudo. πŸ”—οΈŽ

Type this in your Terminal app so you don’t have to type sudo before every npm install command.

sudo chown -R $(whoami) ~/.npm

This may not work in Zsh.

Add subl to open files in Terminal using Sublime Text 3 πŸ”—οΈŽ

Type this in your Terminal app so you can open files in ST3.

ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/sublime


This doesn’t work with ST2.

β€œBada**ify” your terminal & shell with oh-my-zsh πŸ”—οΈŽ

Wes Bos also has a Command Line Power User YouTube Playlist!

A Random Cool Bash Profile πŸ”—οΈŽ


Add syntax highlighting to command line Mongo queries. πŸ”—οΈŽ

MongoDB Shell Enhancements

3. Cool OSX Apps πŸ”—οΈŽ

Because we all need some power tools in our lives.

Categories Design, Development, Productivity

Free πŸ”—οΈŽ

Amphetamine πŸ”—οΈŽ

Keep your Mac awake.

Flux πŸ”—οΈŽ

Makes the color of your computer’s display adapt to the time of day.

Dash πŸ”—οΈŽ

API Documentation Browser & Code Snippet Manager

Sorty πŸ”—οΈŽ

Reset your Launchpad to the default layout.

Alfred 2 πŸ”—οΈŽ

A more powerful version of Spotlight.

Image2icon πŸ”—οΈŽ

Convert any image to various number of formats.

QuickCast πŸ”—οΈŽ

Make. Publish. Share.

Screencasts made easy.

GitHub’s Student Developer Pack πŸ”—οΈŽ

The best developer tools, free for students.

LiteIcon πŸ”—οΈŽ

Change your Mac icons.

Sip πŸ”—οΈŽ

Color picker in your menu bar.

Noizio πŸ”—οΈŽ

A beautiful ambient sound app that allows you to concentrate on the work at hand.

Spectacle πŸ”—οΈŽ

The free version of BetterSnapTool (see Paid).

BetterTouchTool πŸ”—οΈŽ

Configure many gestures for your Magic Mouse, Macbook Trackpad, Magic Trackpad, and even mouse gestures.

GitHub Desktop πŸ”—οΈŽ

An all new, unified GitHub desktop.

cDock πŸ”—οΈŽ

Customize your dock.

Robomongo πŸ”—οΈŽ

A shell-centric cross-platform open source MongoDB management tool.

Octohub πŸ”—οΈŽ

A better way to organize GitHub repos & Devs.

Bartender πŸ”—οΈŽ

Organize your Mac menu bar apps. $15

CodeRunner πŸ”—οΈŽ

Pretty self-explanatory, but it’s basically repl.it except not online. $14.99

Marked 2 πŸ”—οΈŽ

Advanced Markdown Preview.

Works great if you edit your .md files in Sublime Text. $9.99

1Password πŸ”—οΈŽ

The mother of all password managers. $49.99

BetterSnapTool πŸ”—οΈŽ

Window snapping done right.

At least until El Capitan incorporates it. $1.99

Candelight πŸ”—οΈŽ

Like Flux, but more powerful. $0.99

Healthier πŸ”—οΈŽ

Basically reminds you to take a break. $3.99

Flavours 2 Lite πŸ”—οΈŽ

Customize the look of your Mac.

Free for 5 days. Then, $5.

To Note: Once El Capitan comes out, you can’t customize your Mac anymore which is kind of a bummer.

iStat Menus 5 πŸ”—οΈŽ

An advanced Mac system monitor for your menu bar.

Free for 14 days. Then, $18.

CodeKit πŸ”—οΈŽ

A Mac App for Cool People.

Helps you build websites faster & better. $32

Coda πŸ”—οΈŽ

A premier text editor targeted for front-end web developers. $99

WebStorm πŸ”—οΈŽ

Lightweight yet powerful IDE perfectly equipped for complex client & server side development using Node.

FREE for students. A single license is $99.

Highly recommended by Joseph Alves, one of the instructors here at Fullstack Academy.

Tower πŸ”—οΈŽ

Version control with Git - made easy. In a beautiful efficient, and powerful app. $59

Paw πŸ”—οΈŽ

The ultimate REST client for Mac. $29.99

4. Nifty Chrome Extensions πŸ”—οΈŽ

Because CHROME.

Goodies for GitHub πŸ”—οΈŽ

  • GitHub Awesome Autocomplete
  • GitHub Expandinizer
  • GitHub Mate
  • GitHub Hoverscope

Hova! πŸ”—οΈŽ

Browse the Internet webz like Jay-Z.

JSONView πŸ”—οΈŽ

Validate and view JSON documents.

Postman - REST Client πŸ”—οΈŽ

Supercharge your API workflow.

Among other things.

Marmoset πŸ”—οΈŽ

Create gorgeous code snapshots within seconds.

5. Wicked Websites πŸ”—οΈŽ

Product Hunt has all the best ones, but hey.

Code4Startup πŸ”—οΈŽ

This is the go to place for anyone who has an idea and wants to build their own app. Real skills for real world projects.

Waffle.io πŸ”—οΈŽ

Use this to manage your projects on GitHub. Fullstack Academy uses this too!

Hackr.io πŸ”—οΈŽ

Share and discover the best programming tutorials and courses online.

Typing.io πŸ”—οΈŽ

A typing tutor/trainer for programmers. The lessons are based on open-source code, allowing you to practice with code used in the real world.

Funsies πŸ”—οΈŽ

Fun things to do in your free time.

AKA What do I do on the weekends if I have energy left?

Attend tech Meetups πŸ”—οΈŽ

Join groups such as Code Crew, Fullstack JavaScript, Google NYC Tech Talks, NY Tech Meetup, Women Who Code NYC, etc. in the NYC.

Earn honor and rank up on Codewars. πŸ”—οΈŽ

If you get to 4 kyu, you get a free t-shirt from Fullstack. :P

Participate in Hackathons πŸ”—οΈŽ

Check out Hackathon IO for upcoming local hackathons.

Become a warrior through CodeCombat πŸ”—οΈŽ

If you’re into gaming, then you can learn JavaScript as you defeat ogres, solve mazes, and level up.

Start writing technical posts or just blogging in general. πŸ”—οΈŽ

Reflecting is always nice.

There’s plenty of options out there: Ghost, Tumblr, Wordpress, Jekyll, Medium, etc.

Work on side projects πŸ”—οΈŽ

β€œThe work you do while you procrastinate is probably the work you should be doing for the rest of your life.” - J. Hische

Other Awesome Resources πŸ”—οΈŽ

  • SetUI Icons
  • Quick Look Plugins
  • Homebrew & Cask
  • Thoughtbot Dev Environment Setup
  • Awesome Lists
  • Have Dropbox?
    • Sync your ST3 settings with Dropbox!

Credits πŸ”—οΈŽ

Special thanks to all the people who made and released these awesome resources for free!

  • Content by FVCproductions
  • Presentation template by SlidesCarnival
  • Photographs by Unsplash
  • Contributions by Fullstackers