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'
      language-stylus
      pug beautify
    • To link VSCode with Bowtie, press `Command+Shift+P` and type `command`. Select 'Install code command in Path'

    Atom

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

    Sublime

    • Installer
    • `Command+P` --> 'Install Package'
      pug
      stylus
    • To link Sublime with Bowtie, open a terminal and run the following:
      ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /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.

    HTML

    • Markdown

    • Pug / Jade

    • Haml

    CSS

    • Scss

    • Sass

    • Stylus

    JS

    • coffeescript