Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
フロントエンドエンジニア(仮) 〜え、ちょっとフロントやること多すぎじゃない!?〜





  1. JavaScript
  2. Git(and a GitHub account)
  3. Modularity, dependency management,
and production builds
  4. In-Browser Developer Tools
  5. The command line
  6. Client-side templating
  7. CSS preprocessors
  8. Testing
  9. Process automation (rake/make/grunt/etc.)
  10. Code quality
  11. The fine manual


Front-end Tooling Landscape

  • Boilerplate : HTML5 Boilerplate, Twitter Bootstrap, Backbone Boilerplate, Angular seed, Ember starter, Zurb Foundation
  • Abstractions : CoffeeScript, Sass, Less, Compass, Jade, Haml, Zen coding, Markdown, Handlebars, Iced Coffee, TypeScript, Traceur
  • Frameworks : Backbone, Angular, Ember, YUI, Agility, CanJS, Dojo, Meteor, Derby, Spine, Batman, Cujo, Knockout, Knockback, jQuery Mobile, jQuery UI, Closure, ExtJS, Montage
  • Workflow : Chrome DevTools, LiveReload, Codekit, Brunch, WebStorm IDE, watch, Testing, Tincr, JSHint, BrowserStack, Selenium, WebGL Inpector
  • Performance : JavaScript, CSS and Heap profiling, GPU, memory, tracing, PageSpeed
  • Build : Grunt, Rake, Marven, Concat, r.js, Miification, Image optimization, Compression, Module loading, mod_pagespeed

GUI Apps


$ npm install grunt-cli -g


$ npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg> --save` afterwards to install a package and
save it as a dependency in the package.json file.
$ npm install grunt --save-dev
$ npm install grunt-csso --save-dev


$ npm install grunt-init -g
$ git clone ~/.grunt-init/gruntfile
$ grunt-init gruntfile


module.exports = function(grunt) {
  // プロジェクト設定
    // タスク設定
    csso: {
      files: {
        'output.css': ['input.css']
  // タスクに必要なプラグインを読み込む
  // カスタムタスクを設定
  grunt.registerTask('default', ['csso']);
$ npm install yo -g
$ npm install generator-maple -g
$ mkdir your_proj && cd $_
$ yo maple
$ grunt


It doesn’t matter how many features you have or how sexy your features are if they aren’t delivered to the user quickly, with ease, and then heavily monitored. ― Alex Sexton

$ npm install webpagetest -g

Thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.