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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. CSS3
    SVG
    Canvas
    WebGL

    View full-size slide

  13. WebStorage
    IndexedDB

    View full-size slide

  14. AudioElement
    VideoElement

    View full-size slide

  15. WebWorker
    WebSocket
    AppCache

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. LET’S BRUSH UP!

    View full-size slide

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

    View full-size slide

  23. HTMLInspector

    View full-size slide

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

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

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

    HTMLInspector.inspect()

    View full-size slide

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

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

    View full-size slide

  29. H:Inspector
    Please search for Chrome Store!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. GRUNT
    http://gruntjs.com/

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    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 Equals 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 first 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.flickr.com/photos/fotuwe/6851855959/
    • http://www.flickr.com/photos/88256536@N00/5420396616/
    • http://www.flickr.com/photos/mckenzieo/2006687207/
    • http://www.flickr.com/photos/gaetanlee/298680664/
    • http://www.flickr.com/photos/64312248@N04/5969283186/
    • http://www.flickr.com/photos/55027967@N07/5189465437/

    View full-size slide