Brush up your Coding 2013 Winter

Brush up your Coding 2013 Winter SaCSS Special 4  Frontrend
in Sapporo @1000ch

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

agenda Conclusion Demonstration Tool Introduction

TOOL INTRODUCTION …ͷલʹ

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

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

ϝϯςφϯεੑͷҡ࣋

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

໌೔ɺͦͷίʔυΛ ଞਓʹઆ໌Ͱ͖·͔͢ʁ

ύϑΥʔϚϯεͷ޲্

࠷ۙͷϑϩϯτΤϯυٕज़…

CSS3 SVG Canvas WebGL

WebStorage IndexedDB

AudioElement VideoElement

WebWorker WebSocket AppCache

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

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

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

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

αΠτύϑΥʔϚϯεͷେ෦෼ ΛϑϩϯτΤϯυͰվળग़དྷΔ

LET’S BRUSH UP!

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

HTMLInspector

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

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

WITH BROWSER... $ npm install -g bower $ bower install
html-inspector HTMLInspectorΛμ΢ϯϩʔυ͢Δ HTMLͰϩʔυ࣮͠ߦ͢Δ <script src="path/to/html-inspector.js"></script> <script>HTMLInspector.inspect()</script>

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

΋ͬͱखܰʹ࢖͍͍ͨ… ChromeͷExtensionΛ࡞Γ·ͨ͠ɻ

H:Inspector Please search for Chrome Store!

CSSLint

CSSLINT.NET http://csslint.net/

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

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

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

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

JSHint

JSHINT.COM http://jshint.com/

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

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

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

ຖճϒϥ΢βݟͨΓ ίϚϯυୟ͘ͷ͔… ͍͍͑ɺࣗಈԽग़དྷ·͢ɻ

GRUNT http://gruntjs.com/

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

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

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

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

CHECK HTML

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

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

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

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

ʮ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/

! Failed rule "validate-elements". " The <font> element is obsolete
and should not be used. <font>λά͸ඇਪ঑Ͱ͢ɻલड़ͷ௨ΓɺHTML͸ จॻߏ଄ͷఆٛͱ͍͏໾ׂʹͳͬͨͨΊͰ͢ɻ <center>ɺ<basefont>ɺ<u>ɺ<s>౳ʹ΋ಉ༷ͷ ͜ͱ͕ݴ͑·͢ɻ

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

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

<button id="js-bar" onclick="alert('Clicked!')"> var btn = document.getElementById("js-bar"); btn.addEventListener("click", function() {
alert("Clicked!"); }); ʮJavaScript͸JSϑΝΠϧʹॻ͖·͠ΐ͏ɻʯ

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

CHECK CSS

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

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

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

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

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

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

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

CHECK Javascript

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

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

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

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

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

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

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

CONCLUSION

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

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

JavaScript ॻ͖ํҰͭͰ࣮ߦ଎౓͕มΘΔ CSSͰग़དྷΔ͜ͱ͸CSSͰ΍Δ লུ͠ͳ͍ʂJavaScript͸Մಡੑ໋͕

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

The first draft of anything is shit - Ernest Hemingway

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

εΩϧΞοϓʹ௚݁ ౿·͑ͯ΍Ε͹ؒҧ͍ͳٕ͘ज़͸޲্͠·͢ɻ

KEEP OPTIMIZING!

THANK YOU! @1000ch

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/

Brush up your Coding 2013 Winter

Brush up your Coding 2013 Winter

More Decks by Shogo Sensui

Other Decks in Programming

Featured

Transcript