フロントエンド開発効率化のための素敵なツールたち

覚えておくといろいろ捗りますよ。

PSDファイルのスライス

Photoshopの便利機能を使う

• レイヤーから新規スライスを作成
• 上記を使ったスライスの一連の流れのアクションを作成する
• Cut&Slice me
• CCのアセット機能

外部ツール

• Slicy
• Slicyはあっと驚くほど便利だった。 – colopixie

エディタ

• Sublime Text
• Vim
• Emacs

悪いことは言いません。初心者ほどSublimeを使いましょう。
手に馴染んでしまえば、AtomだろうがBracketsだろうがどれも同じです。

タスクランナー

• Grunt
• gulp

HTMLテンプレートエンジン、CSSプリプロセッサ、AltJS

HTML

• Haml
• Jade
• Slim

CSS

• sass, compass
• less
• stylus

Javascript

• Coffeescript
• Typescript
• Haxe

JSライブラリ

便利系

• jQuery
• Underscore.js
• Lo-dash
• Modernizr

UI系

• jQuery UI
• Twitter bootstrap
• Foundation

テンプレート

• Underscore.template
• Handlebars
• mustache
• ejs

クライアントMVC

• Backbone.js
• AngularJS
• Knockout.js

世の中はAngularJS推しですね。

Canvas

• EaselJS – Createjs
• Paper.js

WebGL

• Three.js

スターターキット

• HTML5 Boilerplate
• Web starter kit

自分の使いやすいテンプレートがあれば効率は格段に上がります。
すでに公開されているテンプレートを自分の使いやすいようにカスタマイズするのも良い手段だと思います。
頭の良い人ほど同じことは繰り返さないのです。