Brush up your Coding!
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Brush up your Coding!

on

  • 168 views

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

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

Statistics

Views

Total Views
168
Views on SlideShare
166
Embed Views
2

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 2

http://www.slideee.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Brush up your Coding! Presentation Transcript

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

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