Brush up your Coding!

527 views

Published on

2013/10/23に開催されたHTML5BeginnersのBrush up your Codingのセッションの資料です。

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
527
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Brush up your Coding!

  1. 1. Brush up your Coding! HTML5Beginners Vol.3 @1000ch
  2. 2. Self introduction http://github.com/1000ch @1000ch http://1000ch.net/ Web Developer at CyberAgent, Inc.
  3. 3. agenda Conclusion Demonstration Tool Introduction
  4. 4. TOOL INTRODUCTION …の前に
  5. 5. なぜブラッシュ アップするのか?
  6. 6. REASON TO BRUSH UP パフォーマンスの向上 メンテナンス性の維持
  7. 7. REASON TO BRUSH UP パフォーマンスの向上 メンテナンス性の維持
  8. 8. KEEP maintainability そのコード、誰が見ても理解できますか? 明日そのコードを説明できますか? バグの 危険性

  9. 9. REASON TO BRUSH UP? パフォーマンスの向上 メンテナンス性の維持 フロントの役割は大きくなっている!
  10. 10. Gradation Shadow Animation... Performance depends on Frontend! Canvas WebGL FileAPI... FRONTEND ROLES
  11. 11. フロントエンドのやるこ と多い…_:(´ཀ`」 ∠):
  12. 12. LET’S BRUSH UP!
  13. 13. FOCUS ON... HTML CSS JavaScript
  14. 14. FOCUS ON... HTML CSS JavaScript
  15. 15. HTMLInspector by Philip Walton
  16. 16. Introducing HTML Inspector http://philipwalton.com/articles/introducing-html-inspector/ HTMLInspector is... œš‘“›⁸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.’”⁹
  17. 17. HTMLInspector https://github.com/philipwalton/html-inspector
  18. 18. WITH BROWSER... $ npm install -g bower $ bower install html-inspector HTMLInspectorをダウンロードする HTMLでロードし実行する <script src="path/to/html-inspector.js"></script> <script>HTMLInspector.inspect()</script>
  19. 19. WITH CLI... $ npm install -g html-inspector HTMLInspectorをインストールする # execute url $ htmlinspector http://1000ch.net/ ! # execute local file $ htmlinspector index.html HTMLInspectorを実行する
  20. 20. もっと手軽に使いたい… ChromeのExtensionを作りました。
  21. 21. H:Inspector Please search Chrome Store with œš‘“›⁸1000ch’”⁹
  22. 22. FOCUS ON... HTML CSS JavaScript
  23. 23. CSSLINT by Nicole Sullivan and Nicholas Zakas
  24. 24. CSSLINT https://github.com/stubbornella/csslint
  25. 25. CSSLINT Ultra Translation https://gist.github.com/hail2u/1303613
  26. 26. WITH BROWSER... Webサイトにアクセスする CSSを貼り付けて実行する
  27. 27. CSSLINT.NET http://csslint.net/
  28. 28. WITH CLI... $ npm install -g csslint CSSLINTをインストールする # execute csslint $ csslint [options] [file or directory] CSSLINTを実行する
  29. 29. FOCUS ON... HTML CSS JavaScript
  30. 30. JSHINT by Anton Kovalyov
  31. 31. JSHINT Documentation http://jshint.com/docs/
  32. 32. WITH BROWSER... JavaScriptを貼り付けて実行する Webサイトにアクセスする
  33. 33. JSHINT.COM http://jshint.com/
  34. 34. WITH CLI... $ npm install -g jslint JSHINTをインストールする # execute jshint $ jshint [options] [file or directory] JSHINTを実行する
  35. 35. 毎回ブラウザ見たり コマンド叩くのか… いいえ、自動化出来ます。
  36. 36. FOCUS ON... HTML CSS JavaScript Gruntによる自動化
  37. 37. FOCUS ON... HTML CSS JavaScript Gruntによる自動化 継続的インテ グレーション
  38. 38. WHAT IS GRUNT? Node.jsで動くタスクランナー 設定ファイルがJavaScript 共有に必要なのは2ファイル ディベロッパーにも扱いやすいツール
  39. 39. GRUNT http://gruntjs.com/
  40. 40. $ npm install -g grunt-cli $ cd path/to/your/workspace $ npm init $ npm install --save-dev grunt $ npm install --save-dev grunt-html-inspector $ npm install --save-dev grunt-contrib-csslint $ npm install --save-dev grunt-contrib-jshint IN WORKSPACE...
  41. 41. module.exports = function(grunt) { grunt.initConfig({ "html-inspector": { all: { src: ["*.html"] } }, csslint: { all: { src: ["css/*.css"] } }, jshint: { all: ["js/*.js"] } }); grunt.loadNpmTasks("grunt-html-inspector"); grunt.loadNpmTasks("grunt-contrib-csslint"); grunt.loadNpmTasks("grunt-contrib-jshint"); grunt.registerTask("check", ["html-inspector", "csslint", "jshint"]); }; CREATE GRUNTFILE.JS
  42. 42. Gruntの概要と導入手順とメリット http://1000ch.net/2012/12/08/ReconsideringGruntJs/
  43. 43. 詳しくはWebで! Please check it!
  44. 44. demonstration
  45. 45. CHECK HTML
  46. 46. ! Failed rule "validate-attributes". " The 'bgcolor' attribute is no longer valid on the <body> element and should not be used. HTMLは文書構造を定義、CSSは装飾やレイアウト という切り分けを行いましょう。
  47. 47. ! Failed rule "unused-classes". " The class 'hoge' is used in the HTML but not found in any stylesheet. 定義されていないCSSはHTMLで参照しないように しましょう。CSSの参照コストが発生してしまい ます。
  48. 48. ! Failed rule "unnecessary-elements". " Do not use <div> or <span> elements without any attributes. CSSの装飾や、属性値も持たない<div>や<span> は必要ないはずです。深ければ深いほど、描画時 のリフローの回数が増え、CSSやJSの参照のコス トが増えます。
  49. 49. ! Failed rule "validate-attributes". " The 'alt' attribute is required for <img> elements. 必須とされている属性値は記述するようにしま しょう。ちなみに、<img>にはwidthとheightを つけるのが望ましいです。そして、srcの値を空に しないようにしましょう。
  50. 50. 「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/
  51. 51. ! Failed rule "validate-elements". " The <font> element is obsolete and should not be used. <font>タグは非推奨です。前述の通り、HTMLは 文書構造の定義という役割になったためです。 <center>、<basefont>、<u>、<s>等にも同様の ことが言えます。
  52. 52. HTML要素リファレンス https://developer.mozilla.org/ja/docs/Web/HTML/Element
  53. 53. ! Failed rule "inline-event-handlers". " An 'onclick' attribute was found in the HTML. Use external scripts for event binding instead. イベントの定義はJSファイルで行うようにしま しょう。インラインの定義は管理が非常に難しく、 予期しない不具合を引き起こします。
  54. 54. <button id="js-bar" onclick="alert('Clicked!')"> var btn = document.getElementById("js-bar"); btn.addEventListener("click", function() { alert("Clicked!"); }); 「JavaScriptはJSファイルに書きましょう。」
  55. 55. ! Failed rule "script-placement". " <script> elements should appear right before the closing </body> tag for optimal performance. <script>タグは同期的に実行されるため、その間 ページの描画が止まります。</body>の上に置く ことでそれを極力避ける事ができます。
  56. 56. CHECK CSS
  57. 57. 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であることに変わりはありません。 単位を削ってファイルサイズを減らしましょう。
  58. 58. 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を使用するのもやめましょ う。
  59. 59. 「コードそのものの量を抑え、パフォーマンスが向上し、 可搬性を向上させ、詳細度を減らすことができる。」 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/
  60. 60. The properties padding-top, padding-bottom, padding-left, padding-right can be replaced by padding. Use shorthand properties where possible. (shorthand) ショートハンドで記述し、冗長な表現は避けましょ う。
  61. 61. 「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; } ! !
  62. 62. @import prevents parallel downloads, use <link> instead. Don't use @import, use <link> instead. (import) さらに良いのは、CSSファイルをすべて結合して1 ファイルにすることです。Webパフォーマンスの 向上の第一歩はHTTPリクエストの数を減らす + ダ ウンロードサイズを減らすことです。
  63. 63. Mobile Front-end Optimization Standard:2012 https://speakerdeck.com/t32k/mobile-front-end- optimization-standard-2012
  64. 64. CHECK Javascript
  65. 65. eval can be harmful. eval()はパフォーマンスが悪い上に、スコープがわ かりにくくセキュリティ的にも危ないです。eval() を必要とするケースはほとんど無いはずです。(僕 は見たことない。)
  66. 66. Missing semicolon. 処理の終わりには忘れずセミコロンを付けましょ う。括弧も省略するべきではありません。省略す ることで振る舞いが変わってしまう恐れがありま す。
  67. 67. Use '!==' to compare with 'null' nullとの比較に限らず、基本的に厳密等価演算子 を推奨します。キャストがない分高速である上、 暗黙の型変換は誤解を招きやすいです。
  68. 68. Equals Operator vs Strict Operator http://jsperf.com/equals-operator-vs-strict-equals- operator/2
  69. 69. The object literal notation {} is preferrable. The array literal notation [] is preferrable. new Array()による配列の初期化は、引数がわかり にくいです。双方ともリテラルを使ったほうが完 結でわかりやすいです。
  70. 70. 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はもっとわかりにくいので割愛…。」
  71. 71. JavaScript Garden http://bonsaiden.github.io/JavaScript-Garden/ja/
  72. 72. CONCLUSION
  73. 73. HTML レイアウトや装飾はCSSにやってもらう Scriptタグはページ下部に置く HTML5で提唱される要素のキャッチアップ
  74. 74. CSS Sass等を使う場合はコンパイル後を意識する CSSは壊れやすい! HTML構造に依存しないCSSを書く
  75. 75. JavaScript 書き方一つで実行速度が変わる CSSで出来ることはCSSでやる 省略しない!JavaScriptは可読性が命
  76. 76. リファクタリングのフロー化 Jenkins、ローカル環境でのGrunt、Travis CI等。
  77. 77. œš‘“›⁸The first draft of anything is shit’”⁹ - Ernest Hemingway
  78. 78. 指摘される内容の理解 必ず理由があります。調べて理解して直す!
  79. 79. スキルアップに直結 踏まえてやれば間違いなく技術は向上します。
  80. 80. KEEP OPTIMIZING!
  81. 81. THANK YOU! @1000ch
  82. 82. PHOTO CREDITS • http://www.flickr.com/photos/fotuwe/6851855959/ • http://www.flickr.com/photos/mckenzieo/2006687207/ • http://www.flickr.com/photos/pasharome/10186380003/ • http://www.flickr.com/photos/gaetanlee/298680664/ • http://www.flickr.com/photos/64312248@N04/5969283186/ • http://www.flickr.com/photos/55027967@N07/5189465437/

×