Pro Yearly is on sale from $80 to $50! »

Intro to Frontend Tooling - Gem City JS

Ac6a8e9ccd9e02b6051112296760c939?s=47 Adam Simpson
January 16, 2014
370

Intro to Frontend Tooling - Gem City JS

Ac6a8e9ccd9e02b6051112296760c939?s=128

Adam Simpson

January 16, 2014
Tweet

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. gem install compass ! http://compass-style.org

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

    Foo: #{number}! </p>! </div>! """
  35. var number, summaryMarkup;! ! number = 3 + 2;! !

    summaryMarkup = "<div class=\"content\">\n <p>\n Foo: " + number + "\n </p>\n</div>";
  36. mood = greatlyImproved if singing

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

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

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

  40. Emmet + VIM

  41. INTRO TO FRONTEND TOOLING SIDENOTE #1 HOLY FILES

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

    JS habits via CoffeeScript ‣ Rapid HTML authoring
  44. CONS ‣ Added complexity ‣ Added more files ‣ Added

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

    generated files ‣ SASS/LESS/CoffeeScript files are the source of truth
  46. None
  47. None
  48. INTRO TO FRONTEND TOOLING SIDENOTE #2
 TEXT EDITORS

  49. None
  50. PICK ONE

  51. INTRO TO FRONTEND TOOLING SIDENOTE #3 CLI

  52. None
  53. http://cli.learncodethehardway.org

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

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

    ‣ Git integration
  58. None
  59. 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”
  60. Handlebars + Grunt ‣ http://handlebarsjs.com ‣ https://github.com/assemble/ assemble/ ‣ http://www.yaml.org/spec/1.2/

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

    "dist/index.html" Gruntfile.coffee
  62. title: YAML Resources! ! resources:! - http://yamllint.com/! - http://nodeca.github.io/js-yaml/ home-page.yml

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

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

    } home-page.scss
  65. 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.
  66. None
  67. Grunt - a taskrunner

  68. Grunt provides the muscle

  69. npm install -g grunt-cli

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

    HAML to HTML ‣ Making those Handlebars modules actual HTML pages ‣ Concat, minify, test our JS
  71. Grunt has a wonderful plugin ecosystem.

  72. Make or Modify your tools!

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

  74. Bower - a package manager

  75. npm install -g bower

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

  77. 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.
  78. None
  79. ...an opinionated collection of Grunt tasks, with scaffolding.

  80. npm install -g yo

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

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

    your own!
  83. http://bit.ly/JGemll

  84. npm install -g generator-mg

  85. yo mg

  86. None
  87. None
  88. 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');! };
  89. THANKS! Adam Simpson adam@heysparkbox.com