Automate Your Tools

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

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