Intro To Frontend Tooling - Codemash '14

Transcript

1. Adam Simpson INTRO TO FRONTEND TOOLING

2. Who Am I?

3. twitter.com/a_simpson ! alpha.app.net/a_simpson ! github.com/asimpson

4. Where are we going?

5. GET FOAMY http://randsinrepose.com/archives/the-foamy-rules-for-rabid-tools/

6. Tooling at Sparkbox

7. Don’t be Overwhelmed

8. The web is software.

9. Software is hard.

10. STAND ON THE SHOULDERS OF GIANT…ROBOTS

11. As Isaac Newton once said, “we stand on the shoulders

    of giants” (source control, homebrew, cli, js, coffeescript, bower, yeoman)

12. INTRO TO FRONTEND TOOLING GET FOAMY

13. “the correct tool is going to make you exponentially more

    productive”

14. “My tools are my tools. Choosing a thing makes it

    yours. The choice is the result of that unique mix of logic, superstition, stubbornness, and experience that fits you.”

15. “And you never stop looking — this is why the

    last foamy rule is the most important: my tools are always fighting for their life.”

16. Anything is up for replacement

17. INTRO TO FRONTEND TOOLING TOOLING HAS EXPLODED

18. Boilerplate Abstractions Frameworks Testing Docs Workflow Dependency management Performance optimization

    Build Continuous Integration Deployment Version control http://bit.ly/1cJ3hX8

19. Get a mental model

20. None

21. Git ‣ Makes collaboration effortless ‣ Github/Bitbucket makes bug tracking

    easy ‣ Removes any fear of losing code ‣ Stash FTW

22. http://wheningit.tumblr.com

23. Git ‣ https://medium.com/design-ux/ 92f2350fd047 ‣ http://steelcityruby.confbots.com/ video/72762735 ‣ http://www.teehanlax.com/blog/ github-fundamentals/

    ‣ http://tom.preston-werner.com/ 2009/05/19/the-git-parable.html

24. Remember, use the tool that makes your team and your

    work better

25. Frontend dev is part art, part science.

26. None
27. None

28. $base-font-multiplier: 1;! $breakpoint-no-queries: false;! $breakpoint-no-query-wrappers: true;! $nomq: ".lt-ie9 &, .no-mq";

29. @mixin rem( $property, $a:0, $b:$a, $c:$a, $d:$b ) {! @if

    ( $property == "font-size" ) {! // $a is the font size! // %b is the keyword! @if ( $a != $b ) {! font-size: $b;! }! @else {! font-size: $a * $base-font-multiplier * 16px;! }! font-size: $a * 1rem;! } @else {! $apx: $a * $base-font-multiplier * 16px;! $bpx: $b * $base-font-multiplier * 16px;! $cpx: $c * $base-font-multiplier * 16px;! $dpx: $d * $base-font-multiplier * 16px;! $arem: $a * 1rem;! $brem: $b * 1rem;! $crem: $c * 1rem;! $drem: $d * 1rem;! ! @if ( $property == "padding" or $property == "margin" ){! #{$property}: $apx $bpx $cpx $dpx;! #{$property}: $arem $brem $crem $drem;! } @else {! #{$property}: $apx;! #{$property}: $arem;! }! }! }

30. @mixin sb-media($query) {! @if $no-mq-support{! @if $query < $serve-to-nomq-max-width{! @content;!

    }! } @else {! @media ( 'min-width:' + $query ) {! @content;! }! }! }

31. gem install sass ! http://sass-lang.com

32. None

33. number = 3+2! ! summaryMarkup = """! <div class="content">! <p>!

    Foo: #{number}! </p>! </div>! """

34. var number, summaryMarkup;! ! number = 3 + 2;! !

    summaryMarkup = "<div class=\"content\">\n <p>\n Foo: " + number + "\n </p>\n</div>";

35. mood = greatlyImproved if singing

36. if (singing) {! mood = greatlyImproved;! }!

37. sudo npm install -g coffee-script ! http://coffeescript.org

38. Jade http://jade-lang.com http://haml.info

39. Emmet + VIM

40. INTRO TO FRONTEND TOOLING SIDENOTE #1 HOLY FILES

41. None

42. PROS ‣ Made CSS more programmy ‣ Enforcement of good

    JS habits via CoffeeScript ‣ Rapid HTML authoring

43. CONS ‣ Added complexity ‣ Added more files ‣ Added

    dependencies

44. HOW WE HANDLE THE CHAOS ‣ We DON’T check in

    generated files ‣ SASS/LESS/CoffeeScript files are the source of truth
45. None
46. None

47. INTRO TO FRONTEND TOOLING SIDENOTE #2
 TEXT EDITORS

48. None

49. PICK ONE

50. INTRO TO FRONTEND TOOLING SIDENOTE #3 CLI

51. None

52. http://cli.learncodethehardway.org

53. None

54. https://github.com/robbyrussell/oh-my-zsh

55. None

56. ZSH FAVs ‣ Auto-Complete all the things ‣ Prompt customization

    ‣ Git integration
57. None

58. Handlebars ‣ Allows us to model basic CMS templating w/out

    getting into specific CMS quirks. ‣ Separates content from markup ‣ Allows us to quickly test various kinds of content. ‣ Puts our markup in “chunks”

59. Handlebars + Grunt ‣ http://handlebarsjs.com ‣ https://github.com/assemble/ assemble/ ‣ http://www.yaml.org/spec/1.2/

    spec.html

60. assemble:! options:! partials: "partials/*"! data: "data/*.yml"! home_page:! src: “partials/home-page.hbs"! dest:

    "dist/index.html" Gruntfile.coffee

61. title: YAML Resources! ! resources:! - http://yamllint.com/! - http://nodeca.github.io/js-yaml/ home-page.yml

62. <h1>{{title}}</h1>! <ul class=“content-listing“>! {{#each resources}}! <li><a href="{{this}}">{{this}}</a></li>! {{/each}}! </ul>! home-page.hbs

63. .content-listing {! @include rem(font-size, .7);! padding: 1em 5%;! list-style: none;!

    } home-page.scss

64. Now that we've covered all the dependencies and moving parts,

    it's time to look at a solution that aims to harness all these pieces.
65. None

66. Grunt - a taskrunner

67. Grunt provides the muscle

68. npm install -g grunt-cli

69. Grunt ‣ Preprocessing our CSS ‣ Running CoffeeScript ‣ Converting

    HAML to HTML ‣ Making those Handlebars modules actual HTML pages ‣ Concat, minify, test our JS

70. Grunt has a wonderful plugin ecosystem.

71. Make or Modify your tools!

72. it's just JS (actually Node).

73. Bower - a package manager

74. npm install -g bower

75. “Bower runs over Git, and is package-agnostic.” - http://bower.io

76. Bower ‣ Allows you to pull down just about any

    JS library via the command line ‣ Scriptable ‣ Auto-completes on ZSH ‣ Use Grunt to move the libraries once Bower pulls them down.
77. None

78. ...an opinionated collection of Grunt tasks, with scaffolding.

79. npm install -g yo

80. https://github.com/yeoman/ yeoman/wiki/The-Road-to-1.0

81. If none of the existing generators fit your workflow, write

    your own!

82. http://bit.ly/JGemll

83. npm install -g generator-mg

84. yo mg

85. None
86. None

87. MgGenerator.prototype.runtime = function runtime() {! this.copy('gitignore', '.gitignore');! this.copy('Gemfile', 'Gemfile');! this.copy('Gemfile.lock',

    'Gemfile.lock');! this.copy('config.rb', 'config.rb');! this.directory('public', 'public');! this.directory('scss', 'scss');! this.directory('coffee', 'coffee');! this.directory('data', 'data');! this.directory('partials', 'partials');! this.directory('opt-imgs', 'opt-imgs');! };

88. THANKS! Adam Simpson adam@heysparkbox.com