Brush up your Coding

Brush up your Coding! HTML5Beginners Vol.3 @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 ύϑΥʔϚϯεͷ޲্ ϝϯςφϯεੑͷҡ࣋

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

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

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

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

LET’S BRUSH UP!

FOCUS ON... HTML CSS JavaScript

HTMLInspector by Philip Walton

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

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

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 Chrome Store with “1000ch”

CSSLINT by Nicole Sullivan and Nicholas Zakas

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

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

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

CSSLINT.NET http://csslint.net/

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

JSHINT by Anton Kovalyov

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

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

JSHINT.COM http://jshint.com/

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

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

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

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

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

GRUNT http://gruntjs.com/

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

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

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

ৄ͘͠͸WebͰʂ Please check it!

demonstration

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 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 !rst draft of anything is shit” - Ernest Hemingway

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

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

KEEP OPTIMIZING!

THANK YOU! @1000ch

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/

Brush up your Coding

Brush up your Coding

More Decks by Shogo Sensui

Other Decks in Programming

Featured

Transcript