Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Automate Your Tools (Fall 2014)

Dave Rupert
September 30, 2014

Automate Your Tools (Fall 2014)

In this episode I talk about the benefits of automating, autonomating, and friendlier-izing your development environment.

Dave Rupert

September 30, 2014
Tweet

More Decks by Dave Rupert

Other Decks in Design

Transcript

  1. AUTOMATE

    YOUR TOOLS
    Dave Rupert / davatron5000

    View full-size slide

  2. ~1HR OF
    CAR ANALOGIES
    DISCLAIMER: I know very little about cars.

    View full-size slide

  3. http://shoptalkshow.com

    View full-size slide

  4. http://a11yproject.com

    View full-size slide

  5. B.A., JAPANOLOGY
    ೥ςΩαεେֶଔۀੑ
    ΞδΞจԽͱݴޠ ೔ຊઐ໳

    View full-size slide

  6. TABLE OF
    CONTENTS
    Talk about web stuff
    Talk about car stuff
    Talk about command line stuff
    Fail at a live demo
    ¯\_(π)_/¯

    View full-size slide

  7. “Web Design is getting too
    complicated. I can’t stay up-
    to-date with all the cool new
    tools and tricks. In my day…”

    View full-size slide

  8. Designers Developers
    The Front End
    SKILLS
    of Web Publishing

    View full-size slide

  9. PREPROCESSORS
    /scss
    _base.scss
    _grid.scss
    _type.scss
    _buttons.scss

    style.scss

    View full-size slide

  10. UNIX
    PHILOSOPHY
    Small is beautiful.
    Make each program do one thing well.
    Build a prototype as soon as possible.
    Use software leverage to your advantage.
    Mike Gancarz (1994)

    View full-size slide

  11. AUTOMATION
    Making robots do our grunt work.

    View full-size slide

  12. ࣗಈԽVS ࣗಇԽ
    Automation Autonomation
    Made up by Toyota.
    A part of “Lean Manufacturing”
    A real word.

    View full-size slide

  13. AUTONOMATION
    “Automation with a human touch.”
    1. The machine shall detect malfunctions and stop itself.
    2. No defective parts will be produced.
    3. Easy to locate the cause of any malfunction.

    View full-size slide

  14. WHY YOU MIGHT
    WANT TO AUTOMATE
    1. You like making more money with less effort.
    2. Your company would like to reduce overhead.
    3. You want more time with your spouse/kids/pets.
    4. You would like to do less grunt work.

    View full-size slide

  15. https://twitter.com/djcoreynolan/status/428019344342151168

    View full-size slide

  16. YOUR CODE EDITOR

    View full-size slide

  17. MAKE IT YOURS
    1. Find a theme.
    2. Add plugins.
    3. Tweak settings.
    4. Learn quick keys.
    https://gist.github.com/davatron5000/7215566/

    View full-size slide

  18. HIGHLIGHTING

    View full-size slide

  19. CUBIC-BEZIERS!

    View full-size slide

  20. GITHUB
    mac.github.com windows.github.com

    View full-size slide

  21. CODEKIT
    incident57.com/codekit/

    View full-size slide

  22. PREPROS
    alphapixels.com/prepros/

    View full-size slide

  23. MIXTURE
    mixture.io

    View full-size slide

  24. MODERN WEB
    DEVELOPMENT
    Fetchers, Runners, and Scaffolders

    View full-size slide

  25. PROTOTYPES

    TRUMP IDEAS

    View full-size slide

  26. …BEHOLD!
    The greatest web development tool the
    world has ever known…

    View full-size slide

  27. THE COMMAND
    LINE INTERFACE
    est.1969

    View full-size slide

  28. Last login: Sun Feb 17 11:22:19 on ttys003
    dave on my-macbook.local in ~
    $

    View full-size slide

  29. DON’T FEAR
    FAILURE

    View full-size slide

  30. BETTER WITH
    FRIENDS

    View full-size slide

  31. CLI ANATOMY*
    $ tool
    * Not official UNIX talk here
    The task you want it
    to perform
    The app/program
    you want to use Optional stuff
    you may need
    File/folder/URL
    to use as data
    Destination
    File/folder/URL

    View full-size slide

  32. DAILY SHELL
    $ cd ~/Dropbox/dev/
    $ compass watch
    $ touch index.html
    $ jekyll serve --watch
    $ git push origin master
    $ npm install node-thingys

    View full-size slide

  33. Bower
    BUILT ON

    View full-size slide

  34. // 1 minute install:
    1. Goto nodejs.org
    2. Click “Install”
    3. Done.

    View full-size slide

  35. FILE FETCHER
    Fetches files and dependencies from the
    cloud so you don’t have manually.

    View full-size slide

  36. $ bower install fitvids
    // installs jquery AND fitvids
    Download plugins and dependencies:

    View full-size slide

  37. TASK RUNNER
    Runs mundane (simple or complicated)
    tasks over and over and over.

    View full-size slide

  38. Common tasks (usually verbs):
    $ grunt build
    $ grunt watch
    $ grunt test
    $ grunt serve

    View full-size slide

  39. Common tasks (usually verbs):
    $ gulp build
    $ gulp watch
    $ gulp test
    $ gulp serve

    View full-size slide

  40. SCAFFOLDING
    Generates complete prototypes and
    scaffolds in milliseconds.

    View full-size slide

  41. Rapid application development:
    $ npm install -g generator-webapp
    $ yo webapp

    View full-size slide

  42. DEMO TIME:
    Build a sample website
    with the command line.

    View full-size slide

  43. THANKS
    Dave Rupert
    @davatron5000
    github.com/davatron5000

    View full-size slide