Proto 101 - Tools, environment

"During the industrial age, the machines we built multiplied the power of our muscles, but in the information age, the tools we build multiply the power of our minds d a n k m e m e s"
Trace Mayer, kinda
  1. Install an editor

    The most powerful tool for any code is just a text editor. Editors come in a wide range of functionality vs lightweightness. For now the only functionality I want to ensure you get is syntax highlighting, which will make code more readable. One's I'd recommend for just starting out are Atom, Sublime, or Visual Studio Code. Below are links for the installers as well as instructions for adding syntax highlighting.

    Visual Studio Code

    • Installer
    • `Command+Shift+P` --> 'Install extensions'
      pug beautify
    • To link VSCode with Bowtie, press `Command+Shift+P` and type `command`. Select 'Install code command in Path'


    • Installer
    • `Command+Shift+P` --> 'Install Packages and Themes'
    • To link Atom with Bowtie, in the menu bar select Atom -> Install Shell Commands


    • Installer
    • `Command+P` --> 'Install Package'
    • To link Sublime with Bowtie, open a terminal and run the following:
      ln -s "/Applications/Sublime" /usr/local/bin/sublime
  2. Install Bowtie

    Bowtie is our own internal prototyping server. It's what we use to build, host, compile, and upload prototypes. It has a lot of the Atlassian components and styles built into it for fast, easy prototyping.

    Choose platform

    Bowtie isn't a signed package because I'm lazy, so be sure to drop it in your applications folder otherwise OSX won't let you have fun.

    Be sure to log into a google account when you do. You can proceed without an account, but you can't upload without logging in.

  3. Bowtie features

    • A great overview of the features is here. It will detail some of the main functionalities.
    • The folder `Documents/Prototypes/` will have been created for you. If you drop any folders in there you'll be able to view them in Bowtie's preview window or at http://localhost:8900 in your browser.

  4. Preprocessors are our friends

    A preprocessor allows us to write easier, more maintainable code that gets translated into html and css.

    Here are the ones we will be using.


    • Markdown

    • Pug / Jade

    • Haml


    • Scss

    • Sass

    • Stylus


    • coffeescript