Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Brush up your Coding

Brush up your Coding

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

0d605a3350dd7e91b8136aecffd5ceeb?s=128

Shogo Sensui

October 23, 2013
Tweet

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 !rst draft of anything is shit” - Ernest Hemingway

  78. ࢦఠ͞ΕΔ಺༰ͷཧղ ඞͣཧ༝͕͋Γ·͢ɻௐ΂ͯཧղͯ͠௚͢ʂ

  79. εΩϧΞοϓʹ௚݁ ౿·͑ͯ΍Ε͹ؒҧ͍ͳٕ͘ज़͸޲্͠·͢ɻ

  80. KEEP OPTIMIZING!

  81. THANK YOU! @1000ch

  82. PHOTO CREDITS • http://www.!ickr.com/photos/fotuwe/6851855959/ • http://www.!ickr.com/photos/mckenzieo/2006687207/ • http://www.!ickr.com/photos/pasharome/10186380003/ • http://www.!ickr.com/photos/gaetanlee/298680664/

    • http://www.!ickr.com/photos/64312248@N04/5969283186/ • http://www.!ickr.com/photos/55027967@N07/5189465437/