$30 off During Our Annual Pro Sale. View Details »

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

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

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

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

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

  12. CSS3 SVG Canvas WebGL

  13. WebStorage IndexedDB

  14. AudioElement VideoElement

  15. WebWorker WebSocket AppCache

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

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

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

  19. 80-90% of the end-user response time is spent on the

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

  21. LET’S BRUSH UP!

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

  23. HTMLInspector

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

  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
  26. WITH BROWSER... $ npm install -g bower $ bower install

    html-inspector HTMLInspectorΛμ΢ϯϩʔυ͢Δ HTMLͰϩʔυ࣮͠ߦ͢Δ <script src="path/to/html-inspector.js"></script> <script>HTMLInspector.inspect()</script>
  27. WITH CLI... $ npm install -g html-inspector HTMLInspectorΛΠϯετʔϧ͢Δ # execute

    url $ htmlinspector http://1000ch.net/ ! # execute local file $ htmlinspector index.html HTMLInspectorΛ࣮ߦ͢Δ
  28. ΋ͬͱखܰʹ࢖͍͍ͨ… ChromeͷExtensionΛ࡞Γ·ͨ͠ɻ

  29. H:Inspector Please search for Chrome Store!

  30. CSSLint

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

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

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

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

  35. WITH CLI... $ npm install -g csslint CSSLINTΛΠϯετʔϧ͢Δ # execute

    csslint $ csslint [options] [file or directory] CSSLINTΛ࣮ߦ͢Δ
  36. JSHint

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

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

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

  40. WITH CLI... $ npm install -g jslint JSHINTΛΠϯετʔϧ͢Δ # execute

    jshint $ jshint [options] [file or directory] JSHINTΛ࣮ߦ͢Δ
  41. ຖճϒϥ΢βݟͨΓ ίϚϯυୟ͘ͷ͔… ͍͍͑ɺࣗಈԽग़དྷ·͢ɻ

  42. GRUNT http://gruntjs.com/

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

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

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

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

  47. CHECK HTML

  48. ! Failed rule "validate-attributes". " The 'bgcolor' attribute is no

    longer valid on the <body> element and should not be used. HTML͸จॻߏ଄ΛఆٛɺCSS͸૷০΍ϨΠΞ΢τ ͱ͍͏੾Γ෼͚Λߦ͍·͠ΐ͏ɻ
  49. ! Failed rule "unused-classes". " The class 'hoge' is used

    in the HTML but not found in any stylesheet. ఆٛ͞Ε͍ͯͳ͍CSS͸HTMLͰࢀর͠ͳ͍Α͏ʹ ͠·͠ΐ͏ɻCSSͷࢀরίετ͕ൃੜͯ͠͠·͍ ·͢ɻ
  50. ! Failed rule "unnecessary-elements". " Do not use <div> or

    <span> elements without any attributes. CSSͷ૷০΍ɺଐੑ஋΋࣋ͨͳ͍<div>΍<span> ͸ඞཁͳ͍͸ͣͰ͢ɻਂ͚Ε͹ਂ͍΄Ͳɺඳը࣌ ͷϦϑϩʔͷճ਺͕૿͑ɺCSS΍JSͷࢀরͷίε τ͕૿͑·͢ɻ
  51. ! Failed rule "validate-attributes". " The 'alt' attribute is required

    for <img> elements. ඞਢͱ͞Ε͍ͯΔଐੑ஋͸هड़͢ΔΑ͏ʹ͠· ͠ΐ͏ɻͪͳΈʹɺ<img>ʹ͸widthͱheightΛ ͚ͭΔͷ͕๬·͍͠Ͱ͢ɻͦͯ͠ɺsrcͷ஋Λۭʹ ͠ͳ͍Α͏ʹ͠·͠ΐ͏ɻ
  52. ʮ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/
  53. ! Failed rule "validate-elements". " The <font> element is obsolete

    and should not be used. <font>λά͸ඇਪ঑Ͱ͢ɻલड़ͷ௨ΓɺHTML͸ จॻߏ଄ͷఆٛͱ͍͏໾ׂʹͳͬͨͨΊͰ͢ɻ <center>ɺ<basefont>ɺ<u>ɺ<s>౳ʹ΋ಉ༷ͷ ͜ͱ͕ݴ͑·͢ɻ
  54. HTMLཁૉϦϑΝϨϯε https://developer.mozilla.org/ja/docs/Web/HTML/Element

  55. ! Failed rule "inline-event-handlers". " An 'onclick' attribute was found

    in the HTML. Use external scripts for event binding instead. Πϕϯτͷఆٛ͸JSϑΝΠϧͰߦ͏Α͏ʹ͠· ͠ΐ͏ɻΠϯϥΠϯͷఆٛ͸؅ཧ͕ඇৗʹ೉͘͠ɺ ༧ظ͠ͳ͍ෆ۩߹ΛҾ͖ى͜͠·͢ɻ
  56. <button id="js-bar" onclick="alert('Clicked!')"> var btn = document.getElementById("js-bar"); btn.addEventListener("click", function() {

    alert("Clicked!"); }); ʮJavaScript͸JSϑΝΠϧʹॻ͖·͠ΐ͏ɻʯ
  57. ! Failed rule "script-placement". " <script> elements should appear right

    before the closing </body> tag for optimal performance. <script>λά͸ಉظతʹ࣮ߦ͞ΕΔͨΊɺͦͷؒ ϖʔδͷඳը͕ࢭ·Γ·͢ɻ</body>ͷ্ʹஔ͘ ͜ͱͰͦΕΛۃྗආ͚Δࣄ͕Ͱ͖·͢ɻ
  58. CHECK CSS

  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Ͱ͋Δ͜ͱʹมΘΓ͸͋Γ·ͤΜɻ ୯ҐΛ࡟ͬͯϑΝΠϧαΠζΛݮΒ͠·͠ΐ͏ɻ
  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Λ࢖༻͢Δͷ΋΍Ί·͠ΐ ͏ɻ
  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/
  62. The properties padding-top, padding-bottom, padding-left, padding-right can be replaced by

    padding. Use shorthand properties where possible. (shorthand) γϣʔτϋϯυͰهड़͠ɺ৑௕ͳදݱ͸ආ͚·͠ΐ ͏ɻ
  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; } ! !
  64. @import prevents parallel downloads, use <link> instead. Don't use @import,

    use <link> instead. (import) ͞Βʹྑ͍ͷ͸ɺCSSϑΝΠϧΛ͢΂ͯ݁߹ͯ͠1 ϑΝΠϧʹ͢Δ͜ͱͰ͢ɻWebύϑΥʔϚϯεͷ ޲্ͷୈҰา͸HTTPϦΫΤετͷ਺ΛݮΒ͢ + μ ΢ϯϩʔυαΠζΛݮΒ͢͜ͱͰ͢ɻ
  65. Mobile Front-end
 Optimization Standard:2012 https://speakerdeck.com/t32k/mobile-front-end-optimization- standard-2012

  66. CHECK Javascript

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

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

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

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

  71. The object literal notation {} is preferrable. The array literal

    notation [] is preferrable. new Array()ʹΑΔ഑ྻͷॳظԽ͸ɺҾ਺͕Θ͔Γ ʹ͍͘Ͱ͢ɻ૒ํͱ΋ϦςϥϧΛ࢖ͬͨ΄͏͕׬ ݁ͰΘ͔Γ΍͍͢Ͱ͢ɻ
  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͸΋ͬͱΘ͔Γʹ͍͘ͷͰׂѪ…ɻʯ
  73. JavaScript Garden http://bonsaiden.github.io/JavaScript-Garden/ja/

  74. CONCLUSION

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

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

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

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

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

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

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

  82. KEEP OPTIMIZING!

  83. THANK YOU! @1000ch

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