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
2. ~1HR OF CAR ANALOGIES DISCLAIMER: I actually know quite little about cars.
3. PARAVEL
4. http://shoptalkshow.com
5. http://atxwebshow.com
6. B.A., JAPANOLOGY ೥ςΩαεେֶଔۀੑ
   ΞδΞจԽͱݴޠ ೔ຊઐ໳
7. TABLE OF CONTENTS Talk about web stuff Talk about car stuff Talk about command line stuff Fail at a live demo ¯\_(π)_/¯
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…”
11. WHY?
12. Designers Developers The Front End SKILLS of Web Publishing
13. COMPLEXITY
14. PREPROCESSORS /scss _base.scss _grid.scss _type.scss _buttons.scss
 style.scss
15. ATOMIZATION
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)
17. AUTOMATION Making robots do our grunt work.
18. Use your degree, Dave…
19. ࣗಈԽ
    VS ࣗಇԽ Automation Autonomation Made up by Toyota. A part of “Lean Manufacturing” A real word.
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.
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.
23. https://twitter.com/djcoreynolan/status/428019344342151168
24. MODERN WEB DEVELOPMENT Fetchers, Runners, and Scaffolders
25. APPS & GUIS
26. CODE EDITORS
27. SUBLIME TEXT
28. MY SUBLIME TEXT
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/
30. CODE MÖR GÜD Hinting n’ Linting
31. GITHUB mac.github.com windows.github.com
32. CODEKIT incident57.com/codekit/
33. PREPROS alphapixels.com/prepros/
34. HAMMER hammerformac.com
35. CACTUS cactusformac.com
36. MIXTURE mixture.io
37. THE COMMAND LINE est.1969
38. Last login: Sun Feb 17 11:22:19 on ttys003 dave on my-macbook.local in ~ $
41. CLI ANATOMY* $ tool <task> <options> <input> <output> * 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
42. DAILY SHELL $ cd ~/Dropbox/dev/ $ compass watch $ touch index.html $ jekyll server --auto $ git push master origin $ npm install -g grunt-thing
44. BETTER WITH FRIENDS
45. THE BIG THREE Bower Front-end command line applications BUILT ON
47. FILE FETCHER Fetches files and dependencies from the cloud so you don’t have manually. // Fetchers: $ bower $ npm $ gem $ yum
48. $ bower install fitvids // installs jquery AND fitvids Download plugins and dependencies:
49. TASK RUNNER Runs mundane (simple or complicated) tasks over and over and over. // Task Runners: $ grunt $ rake $ cake $ make $ gulp
50. Common tasks (usually verbs): $ grunt build $ grunt watch $ grunt test $ grunt serve
51. Common tasks (usually verbs): $ gulp build $ gulp watch $ gulp test $ gulp serve
52. ROBO-BUTLER Generates complete prototypes and scaffolds in milliseconds. // Generators: $ yo $ rails generate $ cake bake
53. Rapid application development: $ npm install -g generator-webapp $ yo webapp
54. DEMO TIME: Build a sample website for InCtrl with the command line.
55. THANKS Dave Rupert @davatron5000 github.com/davatron5000