View
5.389
Download
3
Category
Preview:
DESCRIPTION
2013/12/7に開催されたSaCSS Special4 Frontrend in SapporoのBrush up your Coding 2013 Winterのセッションの資料です。
Citation preview
Brush up your Coding 2013 Winter
SaCSS Special 4Frontrend in Sapporo
@1000ch
Self introduction
http://github.com/1000ch
@1000ch
http://1000ch.net/
Web Developer at CyberAgent, Inc.
agenda
Conclusion
Demonstration
Tool Introduction
TOOL INTRODUCTION…の前に
なぜブラッシュ アップするのか？
REASON TO BRUSH UP
パフォーマンスの向上
メンテナンス性の維持
メンテナンス性の維持
そのコード誰が見ても
理解できますか？
明日、そのコードを
他人に説明できますか？
パフォーマンスの向上
最近のフロントエンド技術…
CSS3
SVG
Canvas
WebGL
WebStorage
IndexedDB
AudioElement
VideoElement
WebWorker
WebSocket
AppCache
フロントエンドで
できることが増えている
できることが増えている分
ボトルネックになりやすい
the Performance Golden Rule http://www.stevesouders.com/blog/2012/02/10/the-performance-
golden-rule/
80-90% of the end-user response time
is spent on the frontend. Start there.
- Steve Souders
サイトパフォーマンスの大部分をフロントエンドで改善出来る
LET’S BRUSH UP!
今回紹介するツールは3つHTML / CSS / JavaScript
HTMLInspector
Introducing HTML Inspector http://philipwalton.com/articles/introducing-html-inspector/
HTML Inspector is a code quality tool to help you and your team write better markup. It's written in JavaScript and runs in the browser, so testing your HTML has never been easier. - Philip Walton
WITH BROWSER...
$ npm install -g bower $ bower install html-inspector
HTMLInspectorをダウンロードする
HTMLでロードし実行する
<script src="path/to/html-inspector.js"></script> <script>HTMLInspector.inspect()</script>
WITH CLI...
$ npm install -g html-inspector
HTMLInspectorをインストールする
# execute url $ htmlinspector http://1000ch.net/ !# execute local file $ htmlinspector index.html
HTMLInspectorを実行する
もっと手軽に使いたい…ChromeのExtensionを作りました。
H:Inspector Please search for Chrome Store!
CSSLint
CSS Lint open sourced http://www.stubbornella.org/content/2011/06/15/css-lint-open-
sourced/
CSSLINT Ultra Translation https://gist.github.com/hail2u/1303613
WITH BROWSER...Webサイトにアクセスする
CSSを貼り付けて実行する
WITH CLI...
$ npm install -g csslint
CSSLINTをインストールする
# execute csslint $ csslint [options] [file or directory]
CSSLINTを実行する
JSHint
WITH BROWSER...
JavaScriptを貼り付けて実行する
Webサイトにアクセスする
WITH CLI...
$ npm install -g jslint
JSHINTをインストールする
# execute jshint $ jshint [options] [file or directory]
JSHINTを実行する
毎回ブラウザ見たり コマンド叩くのか…
いいえ、自動化出来ます。
WHAT IS GRUNT?Node.jsで動くタスクランナー
設定ファイルがJavaScript
共有に必要なのは2ファイル
Gruntはフロントエンドエンジニアにも扱いやすいツール
Gruntの概要と導入手順とメリット http://1000ch.net/2012/12/08/ReconsideringGruntJs/
demonstration
http://github.com/1000ch/brushup-sample
CHECK HTML
! Failed rule "validate-attributes". " The 'bgcolor' attribute is no longer valid on the <body> element and should not be used.
HTMLは文書構造を定義、CSSは装飾やレイアウトという切り分けを行いましょう。
! Failed rule "unused-classes". " The class 'hoge' is used in the HTML but not found in any stylesheet.
定義されていないCSSはHTMLで参照しないようにしましょう。CSSの参照コストが発生してしまいます。
! Failed rule "unnecessary-elements". " Do not use <div> or <span> elements without any attributes.
CSSの装飾や、属性値も持たない<div>や<span>
は必要ないはずです。深ければ深いほど、描画時のリフローの回数が増え、CSSやJSの参照のコストが増えます。
! Failed rule "validate-attributes". " The 'alt' attribute is required for <img> elements.
必須とされている属性値は記述するようにしましょう。ちなみに、<img>にはwidthとheightをつけるのが望ましいです。そして、srcの値を空にしないようにしましょう。
「src、hrefの値を空にしない。 モダンブラウザではほとんど解決されているが、
HTTPリクエストが発生してしまうブラウザがある。」
!<img src="" > <script src=""></script> <link href="">
!var img = new Image(); img.src = ""; !
Empty image src can destroy your site http://www.nczonline.net/blog/2009/11/30/empty-image-src-can-
destroy-your-site/
! Failed rule "validate-elements". " The <font> element is obsolete and should not be used.
<font>タグは非推奨です。前述の通り、HTMLは文書構造の定義という役割になったためです。<center>、<basefont>、<u>、<s>等にも同様のことが言えます。
HTML要素リファレンス https://developer.mozilla.org/ja/docs/Web/HTML/Element
! Failed rule "inline-event-handlers". " An 'onclick' attribute was found in the HTML. Use external scripts for event binding instead.
イベントの定義はJSファイルで行うようにしましょう。インラインの定義は管理が非常に難しく、予期しない不具合を引き起こします。
<button id="js-bar" onclick="alert('Clicked!')">
var btn = document.getElementById("js-bar"); btn.addEventListener("click", function() { alert("Clicked!"); });
「JavaScriptはJSファイルに書きましょう。」
! Failed rule "script-placement". " <script> elements should appear right before the closing </body> tag for optimal performance.
<script>タグは同期的に実行されるため、その間ページの描画が止まります。</body>の上に置くことでそれを極力避ける事ができます。
CHECK CSS
Values of 0 shouldn't have units specified. You don't need to specify units when a value is 0. (zero-units)
0pxも0%も0であることに変わりはありません。単位を削ってファイルサイズを減らしましょう。
Element (a.active) is overqualified, just use .active without element name. Don't use classes or IDs with elements (a.foo or a#foo). (overqualified-elements)
a.activeは不要に詳細度が増しているセレクタです。.activeとし、タグに依存しないようにしましょう。セレクタにIDを使用するのもやめましょう。
「コードそのものの量を抑え、パフォーマンスが向上し、 可搬性を向上させ、詳細度を減らすことができる。」
ul.nav li.active a {} !div.header a.logo img {} !.main ul.features a.btn {}
.nav .active a {} !.logo > img {} !.features-btn {}
Code smells in CSS http://csswizardry.com/2012/11/code-smells-in-css/
The properties padding-top, padding-bottom, padding-left, padding-right can be replaced by padding. Use shorthand properties where possible. (shorthand)
ショートハンドで記述し、冗長な表現は避けましょう。
「margin、padding、まとめる。」
.foo { margin-top: 10px; margin-right: 20px; margin-bottom: 10px; margin-left: 20px; } !.bar { margin-top: 5px; margin-left: 15px; margin-bottom: 10px; margin-right: 15px; }
!!.foo { margin: 10px 20px; } !!.bar { margin: 5px 15px 10px; } !!
@import prevents parallel downloads, use <link> instead. Don't use @import, use <link> instead. (import)
さらに良いのは、CSSファイルをすべて結合して1
ファイルにすることです。Webパフォーマンスの向上の第一歩はHTTPリクエストの数を減らす + ダウンロードサイズを減らすことです。
Mobile Front-endOptimization Standard:2012
https://speakerdeck.com/t32k/mobile-front-end-optimization-standard-2012
CHECK Javascript
eval can be harmful.
eval()はパフォーマンスが悪い上に、スコープがわかりにくくセキュリティ的にも危ないです。eval()
を必要とするケースはほとんど無いはずです。
Missing semicolon.
処理の終わりには忘れずセミコロンを付けましょう。括弧も省略するべきではありません。省略することで振る舞いが変わってしまう恐れがあります。
Use '!==' to compare with 'null'
nullとの比較に限らず、基本的に厳密等価演算子を推奨します。キャストがない分高速である上、暗黙の型変換は誤解を招きやすいです。
Equals Operator vs Strict Equals Operator http://jsperf.com/equals-operator-vs-strict-equals-operator/2
The object literal notation {} is preferrable.
The array literal notation [] is preferrable.
new Array()による配列の初期化は、引数がわかりにくいです。双方ともリテラルを使ったほうが完結でわかりやすいです。
var array1 = new Array("foo"); // ["foo"] !var array2 = new Array("foo", "bar"); // ["foo", "bar"] !var array3 = new Array(3); // [] and array3.length is 3
var array1 = ["foo"]; // ["foo"] !var array2 = ["foo", "bar"]; // ["foo", "bar"] !var array3 = [undefined, undefined, undefined]; // [] and array3.length is 3
「Objectはもっとわかりにくいので割愛…。」
JavaScript Garden http://bonsaiden.github.io/JavaScript-Garden/ja/
CONCLUSION
HTML
レイアウトや装飾はCSSにやってもらう
Scriptタグはページ下部に置く
HTML5で提唱される要素のキャッチアップ
CSS
Sass等を使う場合はコンパイル後を意識する
CSSは壊れやすい！
HTML構造に依存しないCSSを書く
JavaScript
書き方一つで実行速度が変わる
CSSで出来ることはCSSでやる
省略しない！JavaScriptは可読性が命
リファクタリングのフロー化Jenkins、ローカル環境でのGrunt、Travis CI等。
The first draft of anything is shit
- Ernest Hemingway
指摘される内容の理解必ず理由があります。調べて理解して直す！
スキルアップに直結踏まえてやれば間違いなく技術は向上します。
KEEP OPTIMIZING!
THANK YOU!@1000ch
PHOTO CREDITS• http://www.flickr.com/photos/fotuwe/6851855959/
• http://www.flickr.com/photos/88256536@N00/5420396616/
• http://www.flickr.com/photos/mckenzieo/2006687207/
• http://www.flickr.com/photos/gaetanlee/298680664/
• http://www.flickr.com/photos/64312248@N04/5969283186/
• http://www.flickr.com/photos/55027967@N07/5189465437/
Recommended