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

Brush up your Coding 2013 Winter

Shogo Sensui
December 07, 2013

Brush up your Coding 2013 Winter

2013/12/7に開催されたSaCSS Special4 Frontrend in SapporoのBrush up your Coding 2013 Winterのセッションの資料です。

Shogo Sensui

December 07, 2013
Tweet

More Decks by Shogo Sensui

Other Decks in Programming

Transcript

  1. Brush up your Coding
    2013 Winter
    SaCSS Special 4

    Frontrend in Sapporo
    @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. ϝϯςφϯεੑͷҡ࣋

    View Slide

  8. ͦͷίʔυ୭͕ݟͯ΋
    ཧղͰ͖·͔͢ʁ

    View Slide

  9. ໌೔ɺͦͷίʔυΛ
    ଞਓʹઆ໌Ͱ͖·͔͢ʁ

    View Slide

  10. ύϑΥʔϚϯεͷ޲্

    View Slide

  11. ࠷ۙͷϑϩϯτΤϯυٕज़…

    View Slide

  12. CSS3
    SVG
    Canvas
    WebGL

    View Slide

  13. WebStorage
    IndexedDB

    View Slide

  14. AudioElement
    VideoElement

    View Slide

  15. WebWorker
    WebSocket
    AppCache

    View Slide

  16. ϑϩϯτΤϯυͰ
    Ͱ͖Δ͜ͱ͕૿͍͑ͯΔ

    View Slide

  17. Ͱ͖Δ͜ͱ͕૿͍͑ͯΔ෼
    ϘτϧωοΫʹͳΓ΍͍͢

    View Slide

  18. the Performance Golden Rule
    http://www.stevesouders.com/blog/2012/02/10/the-performance-
    golden-rule/

    View Slide

  19. 80-90% of the end-user
    response time
    is spent on the frontend.
    Start there.
    - Steve Souders

    View Slide

  20. αΠτύϑΥʔϚϯεͷେ෦෼
    ΛϑϩϯτΤϯυͰվળग़དྷΔ

    View Slide

  21. LET’S BRUSH UP!

    View Slide

  22. ࠓճ঺հ͢Δπʔϧ͸3ͭ
    HTML / CSS / JavaScript

    View Slide

  23. HTMLInspector

    View Slide

  24. Introducing HTML Inspector
    http://philipwalton.com/articles/introducing-html-inspector/

    View Slide

  25. 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. - Philip Walton

    View Slide

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

    HTMLInspector.inspect()

    View Slide

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

    View Slide

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

    View Slide

  29. H:Inspector
    Please search for Chrome Store!

    View Slide

  30. CSSLint

    View Slide

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

    View Slide

  32. CSS Lint open sourced
    http://www.stubbornella.org/content/2011/06/15/css-lint-open-
    sourced/

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  36. JSHint

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  42. GRUNT
    http://gruntjs.com/

    View Slide

  43. WHAT IS GRUNT?
    Node.jsͰಈ͘λεΫϥϯφʔ
    ઃఆϑΝΠϧ͕JavaScript
    ڞ༗ʹඞཁͳͷ͸2ϑΝΠϧ

    View Slide

  44. Grunt͸ϑϩϯτΤϯυΤϯδχ
    Ξʹ΋ѻ͍΍͍͢πʔϧ

    View Slide

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

    View Slide

  46. demonstration
    http://github.com/1000ch/brushup-sample

    View Slide

  47. CHECK HTML

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

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

    View Slide

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

    View Slide


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

    View Slide

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

  58. CHECK CSS

    View Slide

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

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

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

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

    View Slide

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

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

    View Slide

  65. Mobile Front-end

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

    View Slide

  66. CHECK Javascript

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

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

    View Slide

  74. CONCLUSION

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  79. The first draft of
    anything is shit
    - Ernest Hemingway

    View Slide

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

    View Slide

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

    View Slide

  82. KEEP OPTIMIZING!

    View Slide

  83. THANK YOU!
    @1000ch

    View Slide

  84. PHOTO CREDITS
    • http://www.flickr.com/photos/fotuwe/6851855959/
    • http://www.flickr.com/photos/[email protected]/5420396616/
    • http://www.flickr.com/photos/mckenzieo/2006687207/
    • http://www.flickr.com/photos/gaetanlee/298680664/
    • http://www.flickr.com/photos/[email protected]/5969283186/
    • http://www.flickr.com/photos/[email protected]/5189465437/

    View Slide