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

Automate Your Tools

Dave Rupert
February 17, 2014

Automate Your Tools

I'm Dave Rupert and I'm talking to designers and developers about automating your workflow

Dave Rupert

February 17, 2014
Tweet

More Decks by Dave Rupert

Other Decks in Programming

Transcript

  1. AUTOMATE

    YOUR TOOLS
    Dave Rupert
    twitter.com/davatron5000
    github.com/davatron5000

    View Slide

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

    View Slide

  3. PARAVEL

    View Slide

  4. http://shoptalkshow.com

    View Slide

  5. http://atxwebshow.com

    View Slide

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

    View Slide

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

    View Slide

  8. “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 Slide

  9. View Slide

  10. View Slide

  11. WHY?

    View Slide

  12. Designers Developers
    The Front End
    SKILLS
    of Web Publishing

    View Slide

  13. COMPLEXITY

    View Slide

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

    style.scss

    View Slide

  15. ATOMIZATION

    View Slide

  16. 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 Slide

  17. AUTOMATION
    Making robots do our grunt work.

    View Slide

  18. Use your
    degree, Dave…

    View Slide

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

    View Slide

  20. 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 Slide

  21. View Slide

  22. 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 bitch work.

    View Slide

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

    View Slide

  24. MODERN WEB
    DEVELOPMENT
    Fetchers, Runners, and Scaffolders

    View Slide

  25. APPS & GUIS

    View Slide

  26. CODE EDITORS

    View Slide

  27. SUBLIME TEXT

    View Slide

  28. MY SUBLIME TEXT

    View Slide

  29. MAKE IT YOURS
    1. Install Package Control
    2. Make it look good.
    3. Add helpful plugins.
    4. Customize settings.
    5. Figure out quick keys.
    https://gist.github.com/davatron5000/7215566/

    View Slide

  30. CODE MÖR GÜD
    Hinting n’ Linting

    View Slide

  31. GITHUB
    mac.github.com windows.github.com

    View Slide

  32. CODEKIT
    incident57.com/codekit/

    View Slide

  33. PREPROS
    alphapixels.com/prepros/

    View Slide

  34. HAMMER
    hammerformac.com

    View Slide

  35. CACTUS
    cactusformac.com

    View Slide

  36. MIXTURE
    mixture.io

    View Slide

  37. THE
    COMMAND LINE
    est.1969

    View Slide

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

    View Slide

  39. View Slide

  40. View Slide

  41. 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 Slide

  42. DAILY SHELL
    $ cd ~/Dropbox/dev/
    $ compass watch
    $ touch index.html
    $ jekyll server --auto
    $ git push master origin
    $ npm install -g grunt-thing

    View Slide

  43. View Slide

  44. BETTER WITH
    FRIENDS

    View Slide

  45. THE BIG THREE
    Bower
    Front-end command line applications
    BUILT ON

    View Slide

  46. View Slide

  47. FILE FETCHER
    Fetches files and dependencies from the
    cloud so you don’t have manually.
    // Fetchers:
    $ bower
    $ npm
    $ gem
    $ yum

    View Slide

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

    View Slide

  49. TASK RUNNER
    Runs mundane (simple or complicated)
    tasks over and over and over.
    // Task Runners:
    $ grunt
    $ rake
    $ cake
    $ make
    $ gulp

    View Slide

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

    View Slide

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

    View Slide

  52. ROBO-BUTLER
    Generates complete prototypes and
    scaffolds in milliseconds.
    // Generators:
    $ yo
    $ rails generate
    $ cake bake

    View Slide

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

    View Slide

  54. DEMO TIME:
    Build a sample website for InCtrl
    with the command line.

    View Slide

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

    View Slide