Brush up your Coding! 2013 winter
0 likes6,178 views
2013/12/7に開催されたSaCSS Special4 Frontrend in SapporoのBrush up your Coding 2013 Winterのセッションの資料です。
![WITH CLI...
$ npm install -g csslint
CSSLINTをインストールする
# execute csslint
$ csslint [options] [file or directory]
CSSLINTを実行する](https://image.slidesharecdn.com/brush-up-your-coding-winter-140513215223-phpapp01/85/Brush-up-your-Coding-2013-winter-35-320.jpg)
![WITH CLI...
$ npm install -g jslint
JSHINTをインストールする
# execute jshint
$ jshint [options] [file or directory]
JSHINTを実行する](https://image.slidesharecdn.com/brush-up-your-coding-winter-140513215223-phpapp01/85/Brush-up-your-Coding-2013-winter-40-320.jpg)
![The object literal notation {} is preferrable.
The array literal notation [] is preferrable.
new Array()による配列の初期化は、引数がわかり
にくいです。双方ともリテラルを使ったほうが完
結でわかりやすいです。](https://image.slidesharecdn.com/brush-up-your-coding-winter-140513215223-phpapp01/85/Brush-up-your-Coding-2013-winter-71-320.jpg)
![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はもっとわかりにくいので割愛…。」](https://image.slidesharecdn.com/brush-up-your-coding-winter-140513215223-phpapp01/85/Brush-up-your-Coding-2013-winter-72-320.jpg)
Brush up your Coding! 2013 winter
- 1. Brush up your Coding 2013 Winter SaCSS Special 4 Frontrend in Sapporo @1000ch
- 2. Self introduction http://github.com/1000ch @1000ch http://1000ch.net/ Web Developer at CyberAgent, Inc.
- 6. REASON TO BRUSH UP パフォーマンスの向上 メンテナンス性の維持
- 7. メンテナンス性の維持
- 10. パフォーマンスの向上
- 11. 最近のフロントエンド技術…
- 18. the Performance Golden Rule http://www.stevesouders.com/blog/2012/02/10/the-performance- golden-rule/
- 19. 80-90% of the end-user response time is spent on the frontend. Start there. - Steve Souders
- 21. LET’S BRUSH UP!
- 22. 今回紹介するツールは3つ HTML / CSS / JavaScript
- 23. HTMLInspector
- 25. 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
- 26. WITH BROWSER... $ npm install -g bower $ bower install html-inspector HTMLInspectorをダウンロードする HTMLでロードし実行する <script src="path/to/html-inspector.js"></script> <script>HTMLInspector.inspect()</script>
- 27. WITH CLI... $ npm install -g html-inspector HTMLInspectorをインストールする # execute url $ htmlinspector http://1000ch.net/ ! # execute local file $ htmlinspector index.html HTMLInspectorを実行する
- 29. H:Inspector Please search for Chrome Store!
- 30. CSSLint
- 32. CSS Lint open sourced http://www.stubbornella.org/content/2011/06/15/css-lint-open- sourced/
- 35. WITH CLI... $ npm install -g csslint CSSLINTをインストールする # execute csslint $ csslint [options] [file or directory] CSSLINTを実行する
- 36. JSHint
- 40. WITH CLI... $ npm install -g jslint JSHINTをインストールする # execute jshint $ jshint [options] [file or directory] JSHINTを実行する
- 47. CHECK HTML
- 48. ! Failed rule "validate-attributes". " The 'bgcolor' attribute is no longer valid on the <body> element and should not be used. HTMLは文書構造を定義、CSSは装飾やレイアウト という切り分けを行いましょう。
- 49. ! Failed rule "unused-classes". " The class 'hoge' is used in the HTML but not found in any stylesheet. 定義されていないCSSはHTMLで参照しないように しましょう。CSSの参照コストが発生してしまい ます。
- 50. ! Failed rule "unnecessary-elements". " Do not use <div> or <span> elements without any attributes. CSSの装飾や、属性値も持たない<div>や<span> は必要ないはずです。深ければ深いほど、描画時 のリフローの回数が増え、CSSやJSの参照のコス トが増えます。
- 51. ! Failed rule "validate-attributes". " The 'alt' attribute is required for <img> elements. 必須とされている属性値は記述するようにしま しょう。ちなみに、<img>にはwidthとheightを つけるのが望ましいです。そして、srcの値を空に しないようにしましょう。
- 52. 「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/
- 53. ! Failed rule "validate-elements". " The <font> element is obsolete and should not be used. <font>タグは非推奨です。前述の通り、HTMLは 文書構造の定義という役割になったためです。 <center>、<basefont>、<u>、<s>等にも同様の ことが言えます。
- 55. ! Failed rule "inline-event-handlers". " An 'onclick' attribute was found in the HTML. Use external scripts for event binding instead. イベントの定義はJSファイルで行うようにしま しょう。インラインの定義は管理が非常に難しく、 予期しない不具合を引き起こします。
- 56. <button id="js-bar" onclick="alert('Clicked!')"> var btn = document.getElementById("js-bar"); btn.addEventListener("click", function() { alert("Clicked!"); }); 「JavaScriptはJSファイルに書きましょう。」
- 57. ! Failed rule "script-placement". " <script> elements should appear right before the closing </body> tag for optimal performance. <script>タグは同期的に実行されるため、その間 ページの描画が止まります。</body>の上に置く ことでそれを極力避ける事ができます。
- 58. CHECK CSS
- 59. 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であることに変わりはありません。 単位を削ってファイルサイズを減らしましょう。
- 60. 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を使用するのもやめましょ う。
- 61. 「コードそのものの量を抑え、パフォーマンスが向上し、 可搬性を向上させ、詳細度を減らすことができる。」 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/
- 62. The properties padding-top, padding-bottom, padding-left, padding-right can be replaced by padding. Use shorthand properties where possible. (shorthand) ショートハンドで記述し、冗長な表現は避けましょ う。
- 63. 「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; } ! !
- 64. @import prevents parallel downloads, use <link> instead. Don't use @import, use <link> instead. (import) さらに良いのは、CSSファイルをすべて結合して1 ファイルにすることです。Webパフォーマンスの 向上の第一歩はHTTPリクエストの数を減らす + ダ ウンロードサイズを減らすことです。
- 66. CHECK Javascript
- 67. eval can be harmful. eval()はパフォーマンスが悪い上に、スコープがわ かりにくくセキュリティ的にも危ないです。eval() を必要とするケースはほとんど無いはずです。
- 69. Use '!==' to compare with 'null' nullとの比較に限らず、基本的に厳密等価演算子 を推奨します。キャストがない分高速である上、 暗黙の型変換は誤解を招きやすいです。
- 70. Equals Operator vs Strict Equals Operator http://jsperf.com/equals-operator-vs-strict-equals-operator/2
- 71. The object literal notation {} is preferrable. The array literal notation [] is preferrable. new Array()による配列の初期化は、引数がわかり にくいです。双方ともリテラルを使ったほうが完 結でわかりやすいです。
- 72. 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はもっとわかりにくいので割愛…。」
- 74. CONCLUSION
- 79. The first draft of anything is shit - Ernest Hemingway
- 82. KEEP OPTIMIZING!
- 84. 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/