Download to read offline
![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/75/Brush-up-your-Coding-2013-winter-35-2048.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/75/Brush-up-your-Coding-2013-winter-40-2048.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/75/Brush-up-your-Coding-2013-winter-71-2048.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/75/Brush-up-your-Coding-2013-winter-72-2048.jpg)
Uploaded byShogo Sensui
Brush up your Coding! 2013 winter
2013/12/7に開催されたSaCSS Special4 Frontrend in SapporoのBrush up your Coding 2013 Winterのセッションの資料です。
More Related Content
Similar to Brush up your Coding! 2013 winter
Brush up your Coding! 2013 winter
- 1. Brush up yourCoding 2013 Winter SaCSS Special 4 Frontrend in Sapporo @1000ch
- 2.
- 3.
- 4.
- 5.
- 6. REASON TO BRUSHUP パフォーマンスの向上 メンテナンス性の維持
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18. the Performance GoldenRule http://www.stevesouders.com/blog/2012/02/10/the-performance- golden-rule/
- 19. 80-90% of theend-user response time is spent on the frontend. Start there. - Steve Souders
- 20.
- 21.
- 22. 今回紹介するツールは3つ HTML / CSS/ JavaScript
- 23.
- 24.
- 25. HTML Inspector isa 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... $ npminstall -g bower $ bower install html-inspector HTMLInspectorをダウンロードする HTMLでロードし実行する <script src="path/to/html-inspector.js"></script> <script>HTMLInspector.inspect()</script>
- 27. WITH CLI... $ npminstall -g html-inspector HTMLInspectorをインストールする # execute url $ htmlinspector http://1000ch.net/ ! # execute local file $ htmlinspector index.html HTMLInspectorを実行する
- 28.
- 29. H:Inspector Please search forChrome Store!
- 30.
- 31.
- 32. CSS Lint opensourced http://www.stubbornella.org/content/2011/06/15/css-lint-open- sourced/
- 33.
- 34.
- 35. WITH CLI... $ npminstall -g csslint CSSLINTをインストールする # execute csslint $ csslint [options] [file or directory] CSSLINTを実行する
- 36.
- 37.
- 38.
- 39.
- 40. WITH CLI... $ npminstall -g jslint JSHINTをインストールする # execute jshint $ jshint [options] [file or directory] JSHINTを実行する
- 41.
- 42.
- 43.
- 44.
- 45.
- 46.
- 47.
- 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="" > <scriptsrc=""></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>等にも同様の ことが言えます。
- 54.
- 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!')"> varbtn = 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.
- 59. Values of 0shouldn'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) isoverqualified, 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 paralleldownloads, use <link> instead. Don't use @import, use <link> instead. (import) さらに良いのは、CSSファイルをすべて結合して1 ファイルにすることです。Webパフォーマンスの 向上の第一歩はHTTPリクエストの数を減らす + ダ ウンロードサイズを減らすことです。
- 65.
- 66.
- 67. eval can beharmful. eval()はパフォーマンスが悪い上に、スコープがわ かりにくくセキュリティ的にも危ないです。eval() を必要とするケースはほとんど無いはずです。
- 68.
- 69. Use '!==' tocompare with 'null' nullとの比較に限らず、基本的に厳密等価演算子 を推奨します。キャストがない分高速である上、 暗黙の型変換は誤解を招きやすいです。
- 70. Equals Operator vsStrict Equals Operator http://jsperf.com/equals-operator-vs-strict-equals-operator/2
- 71. The object literalnotation {} 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はもっとわかりにくいので割愛…。」
- 73.
- 74.
- 75.
- 76.
- 77.
- 78.
- 79. The first draftof anything is shit - Ernest Hemingway
- 80.
- 81.
- 82.
- 83.
- 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/