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のセッションの資料です。

Shogo Sensui

October 23, 2013
Tweet

More Decks by Shogo Sensui

Other Decks in Programming

Transcript

  1. Brush up your Coding!
    HTML5Beginners Vol.3
    @1000ch

    View Slide

  2. Self introduction
    http://github.com/1000ch
    @1000ch
    http://1000ch.net/
    Web Developer at CyberAgent, Inc.

    View Slide

  3. agenda
    Conclusion
    Demonstration
    Tool Introduction

    View Slide

  4. TOOL INTRODUCTION
    …ͷલʹ

    View Slide

  5. ͳͥϒϥογϡ
    Ξοϓ͢Δͷ͔ʁ

    View Slide

  6. REASON TO BRUSH UP
    ύϑΥʔϚϯεͷ޲্
    ϝϯςφϯεੑͷҡ࣋

    View Slide

  7. REASON TO BRUSH UP
    ύϑΥʔϚϯεͷ޲্
    ϝϯςφϯεੑͷҡ࣋

    View Slide

  8. KEEP maintainability
    ͦͷίʔυɺ୭͕ݟͯ΋ཧղͰ͖·͔͢ʁ
    ໌೔ͦͷίʔυΛઆ໌Ͱ͖·͔͢ʁ
    όάͷةݥੑ

    View Slide

  9. REASON TO BRUSH UP?
    ύϑΥʔϚϯεͷ޲্
    ϝϯςφϯεੑͷҡ࣋
    ϑϩϯτͷ໾ׂ͸େ͖͘ͳ͍ͬͯΔʂ

    View Slide

  10. Gradation
    Shadow
    Animation...
    Performance
    depends on
    Frontend!
    Canvas
    WebGL
    FileAPI...
    FRONTEND ROLES

    View Slide

  11. ϑϩϯτΤϯυͷ΍Δ͜
    ͱଟ͍…_:(´ཀ`ʯ ∠):

    View Slide

  12. LET’S BRUSH UP!

    View Slide

  13. FOCUS ON...
    HTML
    CSS
    JavaScript

    View Slide

  14. FOCUS ON...
    HTML
    CSS
    JavaScript

    View Slide

  15. HTMLInspector
    by Philip Walton

    View Slide

  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.”

    View Slide

  17. HTMLInspector
    https://github.com/philipwalton/html-inspector

    View Slide

  18. WITH BROWSER...
    $ npm install -g bower
    $ bower install html-inspector
    HTMLInspectorΛμ΢ϯϩʔυ͢Δ
    HTMLͰϩʔυ࣮͠ߦ͢Δ

    HTMLInspector.inspect()

    View Slide

  19. WITH CLI...
    $ npm install -g html-inspector
    HTMLInspectorΛΠϯετʔϧ͢Δ
    # execute url
    $ htmlinspector http://1000ch.net/
    # execute local file
    $ htmlinspector index.html
    HTMLInspectorΛ࣮ߦ͢Δ

    View Slide

  20. ΋ͬͱखܰʹ࢖͍͍ͨ…
    ChromeͷExtensionΛ࡞Γ·ͨ͠ɻ

    View Slide

  21. H:Inspector
    Please search Chrome Store with “1000ch”

    View Slide

  22. FOCUS ON...
    HTML
    CSS
    JavaScript

    View Slide

  23. CSSLINT
    by Nicole Sullivan and Nicholas Zakas

    View Slide

  24. CSSLINT
    https://github.com/stubbornella/csslint

    View Slide

  25. CSSLINT Ultra Translation
    https://gist.github.com/hail2u/1303613

    View Slide

  26. WITH BROWSER...
    WebαΠτʹΞΫηε͢Δ
    CSSΛషΓ෇͚࣮ͯߦ͢Δ

    View Slide

  27. CSSLINT.NET
    http://csslint.net/

    View Slide

  28. WITH CLI...
    $ npm install -g csslint
    CSSLINTΛΠϯετʔϧ͢Δ
    # execute csslint
    $ csslint [options] [file or directory]
    CSSLINTΛ࣮ߦ͢Δ

    View Slide

  29. FOCUS ON...
    HTML
    CSS
    JavaScript

    View Slide

  30. JSHINT
    by Anton Kovalyov

    View Slide

  31. JSHINT Documentation
    http://jshint.com/docs/

    View Slide

  32. WITH BROWSER...
    JavaScriptΛషΓ෇͚࣮ͯߦ͢Δ
    WebαΠτʹΞΫηε͢Δ

    View Slide

  33. JSHINT.COM
    http://jshint.com/

    View Slide

  34. WITH CLI...
    $ npm install -g jslint
    JSHINTΛΠϯετʔϧ͢Δ
    # execute jshint
    $ jshint [options] [file or directory]
    JSHINTΛ࣮ߦ͢Δ

    View Slide

  35. ຖճϒϥ΢βݟͨΓ
    ίϚϯυୟ͘ͷ͔…
    ͍͍͑ɺࣗಈԽग़དྷ·͢ɻ

    View Slide

  36. FOCUS ON...
    HTML
    CSS
    JavaScript
    GruntʹΑΔࣗಈԽ

    View Slide

  37. FOCUS ON...
    HTML
    CSS
    JavaScript
    GruntʹΑΔࣗಈԽ
    ܧଓతΠϯς
    άϨʔγϣϯ

    View Slide

  38. WHAT IS GRUNT?
    Node.jsͰಈ͘λεΫϥϯφʔ
    ઃఆϑΝΠϧ͕JavaScript
    ڞ༗ʹඞཁͳͷ͸2ϑΝΠϧ
    σΟϕϩούʔʹ΋ѻ͍΍͍͢πʔϧ

    View Slide

  39. GRUNT
    http://gruntjs.com/

    View Slide

  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...

    View Slide

  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

    View Slide

  42. Gruntͷ֓ཁͱಋೖखॱͱϝϦοτ
    http://1000ch.net/2012/12/08/ReconsideringGruntJs/

    View Slide

  43. ৄ͘͠͸WebͰʂ
    Please check it!

    View Slide

  44. demonstration

    View Slide

  45. CHECK HTML

    View Slide

  46. ! Failed rule "validate-attributes".
    " The 'bgcolor' attribute is no longer valid on the
    element and should not be used.
    HTML͸จॻߏ଄ΛఆٛɺCSS͸૷০΍ϨΠΞ΢τ
    ͱ͍͏੾Γ෼͚Λߦ͍·͠ΐ͏ɻ

    View Slide

  47. ! Failed rule "unused-classes".
    " The class 'hoge' is used in the HTML but not found in any
    stylesheet.
    ఆٛ͞Ε͍ͯͳ͍CSS͸HTMLͰࢀর͠ͳ͍Α͏ʹ
    ͠·͠ΐ͏ɻCSSͷࢀরίετ͕ൃੜͯ͠͠·͍
    ·͢ɻ

    View Slide

  48. ! Failed rule "unnecessary-elements".
    " Do not use or elements without any
    attributes.
    CSSͷ૷০΍ɺଐੑ஋΋࣋ͨͳ͍΍
    ͸ඞཁͳ͍͸ͣͰ͢ɻਂ͚Ε͹ਂ͍΄Ͳɺඳը࣌
    ͷϦϑϩʔͷճ਺͕૿͑ɺCSS΍JSͷࢀরͷίε
    τ͕૿͑·͢ɻ

    View Slide

  49. ! Failed rule "validate-attributes".
    " The 'alt' attribute is required for elements.
    ඞਢͱ͞Ε͍ͯΔଐੑ஋͸هड़͢ΔΑ͏ʹ͠·͠
    ΐ͏ɻͪͳΈʹɺʹ͸widthͱheightΛͭ
    ͚Δͷ͕๬·͍͠Ͱ͢ɻͦͯ͠ɺsrcͷ஋Λۭʹ͠
    ͳ͍Α͏ʹ͠·͠ΐ͏ɻ

    View Slide

  50. ʮsrcɺhrefͷ஋Λۭʹ͠ͳ͍ɻ
    Ϟμϯϒϥ΢βͰ͸΄ͱΜͲղܾ͞Ε͍ͯΔ͕ɺ
    HTTPϦΫΤετ͕ൃੜͯ͠͠·͏ϒϥ΢β͕͋Δɻʯ



    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/

    View Slide

  51. ! Failed rule "validate-elements".
    " The element is obsolete and should not be used.
    λά͸ඇਪ঑Ͱ͢ɻલड़ͷ௨ΓɺHTML͸
    จॻߏ଄ͷఆٛͱ͍͏໾ׂʹͳͬͨͨΊͰ͢ɻ
    ɺɺɺ౳ʹ΋ಉ༷ͷ
    ͜ͱ͕ݴ͑·͢ɻ

    View Slide

  52. HTMLཁૉϦϑΝϨϯε
    https://developer.mozilla.org/ja/docs/Web/HTML/Element

    View Slide

  53. ! Failed rule "inline-event-handlers".
    " An 'onclick' attribute was found in the HTML. Use
    external scripts for event binding instead.
    Πϕϯτͷఆٛ͸JSϑΝΠϧͰߦ͏Α͏ʹ͠·͠
    ΐ͏ɻΠϯϥΠϯͷఆٛ͸؅ཧ͕ඇৗʹ೉͘͠ɺ
    ༧ظ͠ͳ͍ෆ۩߹ΛҾ͖ى͜͠·͢ɻ

    View Slide


  54. var btn = document.getElementById("js-bar");
    btn.addEventListener("click", function() {
    alert("Clicked!");
    });
    ʮJavaScript͸JSϑΝΠϧʹॻ͖·͠ΐ͏ɻʯ

    View Slide

  55. ! Failed rule "script-placement".
    " elements should appear right before the closing<br/></body> tag for optimal performance.<br/><script>λά͸ಉظతʹ࣮ߦ͞ΕΔͨΊɺͦͷؒ<br/>ϖʔδͷඳը͕ࢭ·Γ·͢ɻ</body>ͷ্ʹஔ͘<br/>͜ͱͰͦΕΛۃྗආ͚Δࣄ͕Ͱ͖·͢ɻ<br/>

    View Slide

  56. CHECK CSS

    View Slide

  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Ͱ͋Δ͜ͱʹมΘΓ͸͋Γ·ͤΜɻ
    ୯ҐΛ࡟ͬͯϑΝΠϧαΠζΛݮΒ͠·͠ΐ͏ɻ

    View Slide

  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Λ࢖༻͢Δͷ΋΍Ί·͠ΐ
    ͏ɻ

    View Slide

  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/

    View Slide

  60. The properties padding-top, padding-bottom, padding-left,
    padding-right can be replaced by padding. Use shorthand
    properties where possible. (shorthand)
    γϣʔτϋϯυͰهड़͠ɺ৑௕ͳදݱ͸ආ͚·͠
    ΐ͏ɻ

    View Slide

  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;
    }

    View Slide

  62. @import prevents parallel downloads, use instead.
    Don't use @import, use instead. (import)
    ͞Βʹྑ͍ͷ͸ɺCSSϑΝΠϧΛ͢΂ͯ݁߹ͯ͠1
    ϑΝΠϧʹ͢Δ͜ͱͰ͢ɻWebύϑΥʔϚϯεͷ
    ޲্ͷୈҰา͸HTTPϦΫΤετͷ਺ΛݮΒ͢ + μ
    ΢ϯϩʔυαΠζΛݮΒ͢͜ͱͰ͢ɻ

    View Slide

  63. Mobile Front-end Optimization Standard:2012
    https://speakerdeck.com/t32k/mobile-front-end-
    optimization-standard-2012

    View Slide

  64. CHECK Javascript

    View Slide

  65. eval can be harmful.
    eval()͸ύϑΥʔϚϯε͕ѱ্͍ʹɺείʔϓ͕Θ
    ͔Γʹ͘͘ηΩϡϦςΟతʹ΋ةͳ͍Ͱ͢ɻeval()
    Λඞཁͱ͢Δέʔε͸΄ͱΜͲແ͍͸ͣͰ͢ɻ
    ʢ๻͸ݟͨ͜ͱͳ͍ɻʣ

    View Slide

  66. Missing semicolon.
    ॲཧͷऴΘΓʹ͸๨ΕͣηϛίϩϯΛ෇͚·͠ΐ
    ͏ɻׅހ΋লུ͢Δ΂͖Ͱ͸͋Γ·ͤΜɻলུ͢
    Δ͜ͱͰৼΔ෣͍͕มΘͬͯ͠·͏ڪΕ͕͋Γ·
    ͢ɻ

    View Slide

  67. Use '!==' to compare with 'null'
    nullͱͷൺֱʹݶΒͣɺجຊతʹݫີ౳Ձԋࢉࢠ
    Λਪ঑͠·͢ɻΩϟετ͕ͳ͍෼ߴ଎Ͱ͋Δ্ɺ
    ҉໧ͷܕม׵͸ޡղΛট͖΍͍͢Ͱ͢ɻ

    View Slide

  68. Equals Operator vs Strict Operator
    http://jsperf.com/equals-operator-vs-strict-equals-
    operator/2

    View Slide

  69. The object literal notation {} is preferrable.
    The array literal notation [] is preferrable.
    new Array()ʹΑΔ഑ྻͷॳظԽ͸ɺҾ਺͕Θ͔Γ
    ʹ͍͘Ͱ͢ɻ૒ํͱ΋ϦςϥϧΛ࢖ͬͨ΄͏͕׬
    ݁ͰΘ͔Γ΍͍͢Ͱ͢ɻ

    View Slide

  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͸΋ͬͱΘ͔Γʹ͍͘ͷͰׂѪ…ɻʯ

    View Slide

  71. JavaScript Garden
    http://bonsaiden.github.io/JavaScript-Garden/ja/

    View Slide

  72. CONCLUSION

    View Slide

  73. HTML
    ϨΠΞ΢τ΍૷০͸CSSʹ΍ͬͯ΋Β͏
    Scriptλά͸ϖʔδԼ෦ʹஔ͘
    HTML5Ͱఏএ͞ΕΔཁૉͷΩϟονΞοϓ

    View Slide

  74. CSS
    Sass౳Λ࢖͏৔߹͸ίϯύΠϧޙΛҙࣝ͢Δ
    CSS͸յΕ΍͍͢ʂ
    HTMLߏ଄ʹґଘ͠ͳ͍CSSΛॻ͘

    View Slide

  75. JavaScript
    ॻ͖ํҰͭͰ࣮ߦ଎౓͕มΘΔ
    CSSͰग़དྷΔ͜ͱ͸CSSͰ΍Δ
    লུ͠ͳ͍ʂJavaScript͸Մಡੑ໋͕

    View Slide

  76. ϦϑΝΫλϦϯάͷϑϩʔԽ
    JenkinsɺϩʔΧϧ؀ڥͰͷGruntɺTravis CI౳ɻ

    View Slide

  77. “The !rst draft of
    anything is shit”
    - Ernest Hemingway

    View Slide

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

    View Slide

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

    View Slide

  80. KEEP OPTIMIZING!

    View Slide

  81. THANK YOU!
    @1000ch

    View Slide

  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/[email protected]/5969283186/
    • http://www.!ickr.com/photos/[email protected]/5189465437/

    View Slide