現場のプロが教えるHTML+CSSコーディングの最新常識

CHAPTER4──掲載サイトリンク集

01 タスクランナーで定型作業を自動化する

サイト名URL
Grunthttp://gruntjs.com
gulphttp://gulpjs.com
grunt-contrib-sasshttps://www.npmjs.com/package/grunt-contrib-sass
gulp-ruby-sasshttps://www.npmjs.com/package/gulp-ruby-sass
grunt-autoprefixerhttps://www.npmjs.com/package/grunt-autoprefixer
gulp-autoprefixerhttps://www.npmjs.com/package/gulp-autoprefixer
Autoprefixerのbrowsersオプション詳細https://github.com/ai/browserslist
Live Reloadのブラウザ側機能拡張http://feedback.livereload.com/knowledgebase/articles/86242-how-do-i-install-and-use-the-browserextensions-
Live ReloadのJavaScriptコードhttp://feedback.livereload.com/knowledgebase/articles/86180-how-do-i-add-the-script-tag-manually-
gulp-livereloadhttps://www.npmjs.com/package/gulp-livereload
grunt-contrib-connecthttps://www.npmjs.com/package/grunt-contrib-connect
gulp-webserverhttps://www.npmjs.com/package/gulp-webserver
grunt-contrib-cleanhttps://www.npmjs.com/package/grunt-contrib-clean
delhttps://www.npmjs.com/package/del
grunt-contrib-copyhttps://www.npmjs.com/package/grunt-contrib-copy
grunt-contrib-concathttps://www.npmjs.com/package/grunt-contrib-concat
gulp-concathttps://www.npmjs.com/package/gulp-concat
grunt-contrib-uglifyhttps://www.npmjs.com/package/grunt-contrib-uglify
gulp-uglifyhttps://www.npmjs.com/package/gulp-uglify
grunt-contrib-cssminhttps://www.npmjs.com/package/grunt-contrib-cssmin
gulp-cssminhttps://www.npmjs.com/package/gulp-cssmin
grunt-spritesmithhttps://www.npmjs.com/package/grunt-spritesmith
gulp.spritesmithhttps://www.npmjs.com/package/gulp.spritesmith

02 表示パフォーマンスを最適化する

サイト名URL
lazyloadhttps://github.com/tuupola/jquery_lazyload
DATA URI Playgroundhttp://www.blades.co.jp/applications/datauriplayground/
Base64 Encode of 1x1px Transparent GIF | CSS-Trickshttps://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/
Response Times: The 3 Important Limits (by Jakob Nielsen)http://www.nngroup.com/articles/response-times-3-important-limits/
Google Analyticshttp://www.google.com/intl/ja_jp/analytics/
Page Speedhttps://developers.google.com/speed/pagespeed/insights/?hl=ja
Web Pagetesthttp://www.webpagetest.org/
Underscore.js(Throttle)http://underscorejs.org/#throttle
FastClickhttps://github.com/ftlabs/fastclick
Chrome Developer Toolshttps://developer.chrome.com/home/devtools-pillar
Firefox Developer Editionhttps://www.mozilla.org/ja/firefox/developer/
Remote TestKithttp://appkitbox.com/testkit/

Indexへ戻る