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 full-size slide

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

    View full-size slide

  3. agenda
    Conclusion
    Demonstration
    Tool Introduction

    View full-size slide

  4. TOOL INTRODUCTION
    …ͷલʹ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. LET’S BRUSH UP!

    View full-size slide

  13. FOCUS ON...
    HTML
    CSS
    JavaScript

    View full-size slide

  14. FOCUS ON...
    HTML
    CSS
    JavaScript

    View full-size slide

  15. HTMLInspector
    by Philip Walton

    View full-size 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 full-size slide

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

    View full-size slide

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

    HTMLInspector.inspect()

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  22. FOCUS ON...
    HTML
    CSS
    JavaScript

    View full-size slide

  23. CSSLINT
    by Nicole Sullivan and Nicholas Zakas

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  29. FOCUS ON...
    HTML
    CSS
    JavaScript

    View full-size slide

  30. JSHINT
    by Anton Kovalyov

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  39. GRUNT
    http://gruntjs.com/

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  44. demonstration

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  49. ʮ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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  55. 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 full-size slide

  56. 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 full-size slide

  57. ʮίʔυͦͷ΋ͷͷྔΛ཈͑ɺύϑΥʔϚϯε͕޲্͠ɺ
    ՄൖੑΛ޲্ͤ͞ɺৄࡉ౓ΛݮΒ͢͜ͱ͕Ͱ͖Δɻʯ
    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 full-size slide

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

    View full-size slide

  59. ʮ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 full-size slide

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

    View full-size slide

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

    View full-size slide

  62. CHECK Javascript

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  68. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  77. KEEP OPTIMIZING!

    View full-size slide

  78. THANK YOU!
    @1000ch

    View full-size slide

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

    View full-size slide