Slide 1
Slide 1 text
Brush up your Coding
2013 Winter
SaCSS Special 4
Frontrend in Sapporo
@1000ch
Slide 2
Slide 2 text
Self introduction
http://github.com/1000ch
@1000ch
http://1000ch.net/
Web Developer at CyberAgent, Inc.
Slide 3
Slide 3 text
agenda
Conclusion
Demonstration
Tool Introduction
Slide 4
Slide 4 text
TOOL INTRODUCTION
…ͷલʹ
Slide 5
Slide 5 text
ͳͥϒϥογϡ
Ξοϓ͢Δͷ͔ʁ
Slide 6
Slide 6 text
REASON TO BRUSH UP
ύϑΥʔϚϯεͷ্
ϝϯςφϯεੑͷҡ࣋
Slide 7
Slide 7 text
ϝϯςφϯεੑͷҡ࣋
Slide 8
Slide 8 text
ͦͷίʔυ୭͕ݟͯ
ཧղͰ͖·͔͢ʁ
Slide 9
Slide 9 text
໌ɺͦͷίʔυΛ
ଞਓʹઆ໌Ͱ͖·͔͢ʁ
Slide 10
Slide 10 text
ύϑΥʔϚϯεͷ্
Slide 11
Slide 11 text
࠷ۙͷϑϩϯτΤϯυٕज़…
Slide 12
Slide 12 text
CSS3
SVG
Canvas
WebGL
Slide 13
Slide 13 text
WebStorage
IndexedDB
Slide 14
Slide 14 text
AudioElement
VideoElement
Slide 15
Slide 15 text
WebWorker
WebSocket
AppCache
Slide 16
Slide 16 text
ϑϩϯτΤϯυͰ
Ͱ͖Δ͜ͱ͕૿͍͑ͯΔ
Slide 17
Slide 17 text
Ͱ͖Δ͜ͱ͕૿͍͑ͯΔ
ϘτϧωοΫʹͳΓ͍͢
Slide 18
Slide 18 text
the Performance Golden Rule
http://www.stevesouders.com/blog/2012/02/10/the-performance-
golden-rule/
Slide 19
Slide 19 text
80-90% of the end-user
response time
is spent on the frontend.
Start there.
- Steve Souders
Slide 20
Slide 20 text
αΠτύϑΥʔϚϯεͷେ෦
ΛϑϩϯτΤϯυͰվળग़དྷΔ
Slide 21
Slide 21 text
LET’S BRUSH UP!
Slide 22
Slide 22 text
ࠓճհ͢Δπʔϧ3ͭ
HTML / CSS / JavaScript
Slide 23
Slide 23 text
HTMLInspector
Slide 24
Slide 24 text
Introducing HTML Inspector
http://philipwalton.com/articles/introducing-html-inspector/
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
WITH BROWSER...
$ npm install -g bower
$ bower install html-inspector
HTMLInspectorΛμϯϩʔυ͢Δ
HTMLͰϩʔυ࣮͠ߦ͢Δ
HTMLInspector.inspect()
Slide 27
Slide 27 text
WITH CLI...
$ npm install -g html-inspector
HTMLInspectorΛΠϯετʔϧ͢Δ
# execute url
$ htmlinspector http://1000ch.net/
!
# execute local file
$ htmlinspector index.html
HTMLInspectorΛ࣮ߦ͢Δ
Slide 28
Slide 28 text
ͬͱखܰʹ͍͍ͨ…
ChromeͷExtensionΛ࡞Γ·ͨ͠ɻ
Slide 29
Slide 29 text
H:Inspector
Please search for Chrome Store!
Slide 30
Slide 30 text
CSSLint
Slide 31
Slide 31 text
CSSLINT.NET
http://csslint.net/
Slide 32
Slide 32 text
CSS Lint open sourced
http://www.stubbornella.org/content/2011/06/15/css-lint-open-
sourced/
Slide 33
Slide 33 text
CSSLINT Ultra Translation
https://gist.github.com/hail2u/1303613
Slide 34
Slide 34 text
WITH BROWSER...
WebαΠτʹΞΫηε͢Δ
CSSΛషΓ͚࣮ͯߦ͢Δ
Slide 35
Slide 35 text
WITH CLI...
$ npm install -g csslint
CSSLINTΛΠϯετʔϧ͢Δ
# execute csslint
$ csslint [options] [file or directory]
CSSLINTΛ࣮ߦ͢Δ
Slide 36
Slide 36 text
JSHint
Slide 37
Slide 37 text
JSHINT.COM
http://jshint.com/
Slide 38
Slide 38 text
JSHINT Documentation
http://jshint.com/docs/
Slide 39
Slide 39 text
WITH BROWSER...
JavaScriptΛషΓ͚࣮ͯߦ͢Δ
WebαΠτʹΞΫηε͢Δ
Slide 40
Slide 40 text
WITH CLI...
$ npm install -g jslint
JSHINTΛΠϯετʔϧ͢Δ
# execute jshint
$ jshint [options] [file or directory]
JSHINTΛ࣮ߦ͢Δ
Slide 41
Slide 41 text
ຖճϒϥβݟͨΓ
ίϚϯυୟ͘ͷ͔…
͍͍͑ɺࣗಈԽग़དྷ·͢ɻ
Slide 42
Slide 42 text
GRUNT
http://gruntjs.com/
Slide 43
Slide 43 text
WHAT IS GRUNT?
Node.jsͰಈ͘λεΫϥϯφʔ
ઃఆϑΝΠϧ͕JavaScript
ڞ༗ʹඞཁͳͷ2ϑΝΠϧ
Slide 44
Slide 44 text
GruntϑϩϯτΤϯυΤϯδχ
Ξʹѻ͍͍͢πʔϧ
Slide 45
Slide 45 text
Gruntͷ֓ཁͱಋೖखॱͱϝϦοτ
http://1000ch.net/2012/12/08/ReconsideringGruntJs/
Slide 46
Slide 46 text
demonstration
http://github.com/1000ch/brushup-sample
Slide 47
Slide 47 text
CHECK HTML
Slide 48
Slide 48 text
! Failed rule "validate-attributes".
" The 'bgcolor' attribute is no longer valid on the
element and should not be used.
HTMLจॻߏΛఆٛɺCSS০ϨΠΞτ
ͱ͍͏Γ͚Λߦ͍·͠ΐ͏ɻ
Slide 49
Slide 49 text
! Failed rule "unused-classes".
" The class 'hoge' is used in the HTML but not found in any
stylesheet.
ఆٛ͞Ε͍ͯͳ͍CSSHTMLͰࢀর͠ͳ͍Α͏ʹ
͠·͠ΐ͏ɻCSSͷࢀরίετ͕ൃੜͯ͠͠·͍
·͢ɻ
Slide 50
Slide 50 text
! Failed rule "unnecessary-elements".
" Do not use
or elements without any
attributes.
CSSͷ০ɺଐੑ࣋ͨͳ͍
ඞཁͳ͍ͣͰ͢ɻਂ͚Εਂ͍΄Ͳɺඳը࣌
ͷϦϑϩʔͷճ͕૿͑ɺCSSJSͷࢀরͷίε
τ͕૿͑·͢ɻ
Slide 51
Slide 51 text
! Failed rule "validate-attributes".
" The 'alt' attribute is required for ![]()
elements.
ඞਢͱ͞Ε͍ͯΔଐੑهड़͢ΔΑ͏ʹ͠·
͠ΐ͏ɻͪͳΈʹɺ![]()
ʹwidthͱheightΛ
͚ͭΔͷ͕·͍͠Ͱ͢ɻͦͯ͠ɺsrcͷΛۭʹ
͠ͳ͍Α͏ʹ͠·͠ΐ͏ɻ
Slide 52
Slide 52 text
ʮ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/
Slide 53
Slide 53 text
! Failed rule "validate-elements".
" The element is obsolete and should not be used.
λάඇਪͰ͢ɻલड़ͷ௨ΓɺHTML
จॻߏͷఆٛͱ͍͏ׂʹͳͬͨͨΊͰ͢ɻ
ɺɺɺʹಉ༷ͷ
͜ͱ͕ݴ͑·͢ɻ
Slide 54
Slide 54 text
HTMLཁૉϦϑΝϨϯε
https://developer.mozilla.org/ja/docs/Web/HTML/Element
Slide 55
Slide 55 text
! Failed rule "inline-event-handlers".
" An 'onclick' attribute was found in the HTML. Use
external scripts for event binding instead.
ΠϕϯτͷఆٛJSϑΝΠϧͰߦ͏Α͏ʹ͠·
͠ΐ͏ɻΠϯϥΠϯͷఆٛཧ͕ඇৗʹ͘͠ɺ
༧ظ͠ͳ͍ෆ۩߹ΛҾ͖ى͜͠·͢ɻ
Slide 56
Slide 56 text
var btn = document.getElementById("js-bar");
btn.addEventListener("click", function() {
alert("Clicked!");
});
ʮJavaScriptJSϑΝΠϧʹॻ͖·͠ΐ͏ɻʯ
Slide 57
Slide 57 text
! Failed rule "script-placement".
" elements should appear right before the closing
</body> tag for optimal performance.
<script>λάಉظతʹ࣮ߦ͞ΕΔͨΊɺͦͷؒ
ϖʔδͷඳը͕ࢭ·Γ·͢ɻ</body>ͷ্ʹஔ͘
͜ͱͰͦΕΛۃྗආ͚Δࣄ͕Ͱ͖·͢ɻ
Slide 58
Slide 58 text
CHECK CSS
Slide 59
Slide 59 text
Values of 0 shouldn't have units specified. You don't need
to specify units when a value is 0. (zero-units)
0px0%0Ͱ͋Δ͜ͱʹมΘΓ͋Γ·ͤΜɻ
୯ҐΛͬͯϑΝΠϧαΠζΛݮΒ͠·͠ΐ͏ɻ
Slide 60
Slide 60 text
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Λ༻͢ΔͷΊ·͠ΐ
͏ɻ
Slide 61
Slide 61 text
ʮίʔυͦͷͷͷྔΛ͑ɺύϑΥʔϚϯε্͕͠ɺ
ՄൖੑΛ্ͤ͞ɺৄࡉΛݮΒ͢͜ͱ͕Ͱ͖Δɻʯ
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/
Slide 62
Slide 62 text
The properties padding-top, padding-bottom, padding-left,
padding-right can be replaced by padding. Use shorthand
properties where possible. (shorthand)
γϣʔτϋϯυͰهड़͠ɺͳදݱආ͚·͠ΐ
͏ɻ
Slide 63
Slide 63 text
ʮ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;
}
!
!
Slide 64
Slide 64 text
@import prevents parallel downloads, use instead.
Don't use @import, use instead. (import)
͞Βʹྑ͍ͷɺCSSϑΝΠϧΛͯ݁͢߹ͯ͠1
ϑΝΠϧʹ͢Δ͜ͱͰ͢ɻWebύϑΥʔϚϯεͷ
্ͷୈҰาHTTPϦΫΤετͷΛݮΒ͢ + μ
ϯϩʔυαΠζΛݮΒ͢͜ͱͰ͢ɻ
Slide 65
Slide 65 text
Mobile Front-end
Optimization Standard:2012
https://speakerdeck.com/t32k/mobile-front-end-optimization-
standard-2012
Slide 66
Slide 66 text
CHECK Javascript
Slide 67
Slide 67 text
eval can be harmful.
eval()ύϑΥʔϚϯε͕ѱ্͍ʹɺείʔϓ͕Θ
͔Γʹ͘͘ηΩϡϦςΟతʹةͳ͍Ͱ͢ɻeval()
Λඞཁͱ͢Δέʔε΄ͱΜͲແ͍ͣͰ͢ɻ
Slide 68
Slide 68 text
Missing semicolon.
ॲཧͷऴΘΓʹΕͣηϛίϩϯΛ͚·͠ΐ
͏ɻׅހলུ͢Δ͖Ͱ͋Γ·ͤΜɻলུ͢
Δ͜ͱͰৼΔ͍͕มΘͬͯ͠·͏ڪΕ͕͋Γ·
͢ɻ
Slide 69
Slide 69 text
Use '!==' to compare with 'null'
nullͱͷൺֱʹݶΒͣɺجຊతʹݫີՁԋࢉࢠ
Λਪ͠·͢ɻΩϟετ͕ͳ͍ߴͰ͋Δ্ɺ
҉ͷܕมޡղΛট͖͍͢Ͱ͢ɻ
Slide 70
Slide 70 text
Equals Operator vs Strict Equals Operator
http://jsperf.com/equals-operator-vs-strict-equals-operator/2
Slide 71
Slide 71 text
The object literal notation {} is preferrable.
The array literal notation [] is preferrable.
new Array()ʹΑΔྻͷॳظԽɺҾ͕Θ͔Γ
ʹ͍͘Ͱ͢ɻํͱϦςϥϧΛͬͨ΄͏͕
݁ͰΘ͔Γ͍͢Ͱ͢ɻ
Slide 72
Slide 72 text
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ͬͱΘ͔Γʹ͍͘ͷͰׂѪ…ɻʯ
Slide 73
Slide 73 text
JavaScript Garden
http://bonsaiden.github.io/JavaScript-Garden/ja/
Slide 74
Slide 74 text
CONCLUSION
Slide 75
Slide 75 text
HTML
ϨΠΞτ০CSSʹͬͯΒ͏
ScriptλάϖʔδԼ෦ʹஔ͘
HTML5Ͱఏএ͞ΕΔཁૉͷΩϟονΞοϓ
Slide 76
Slide 76 text
CSS
SassΛ͏߹ίϯύΠϧޙΛҙࣝ͢Δ
CSSյΕ͍͢ʂ
HTMLߏʹґଘ͠ͳ͍CSSΛॻ͘
Slide 77
Slide 77 text
JavaScript
ॻ͖ํҰͭͰ࣮ߦ͕มΘΔ
CSSͰग़དྷΔ͜ͱCSSͰΔ
লུ͠ͳ͍ʂJavaScriptՄಡੑ໋͕
Slide 78
Slide 78 text
ϦϑΝΫλϦϯάͷϑϩʔԽ
JenkinsɺϩʔΧϧڥͰͷGruntɺTravis CIɻ
Slide 79
Slide 79 text
The first draft of
anything is shit
- Ernest Hemingway
Slide 80
Slide 80 text
ࢦఠ͞ΕΔ༰ͷཧղ
ඞͣཧ༝͕͋Γ·͢ɻௐͯཧղͯ͢͠ʂ
Slide 81
Slide 81 text
εΩϧΞοϓʹ݁
౿·͑ͯΕؒҧ͍ͳٕ͘ज़্͠·͢ɻ
Slide 82
Slide 82 text
KEEP OPTIMIZING!
Slide 83
Slide 83 text
THANK YOU!
@1000ch
Slide 84
Slide 84 text
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/