Pragmatic Front-end Developer: From Artisan to Expert

Webそのものが変わり続けることだけが変わらない中、フロントエンド開発の領域も不明瞭で、時を追うごとに変化してきています。
ユーザとシステムの間にあるものが何であれ、それが存在しつづける限り、フロントエンドという役割も必要な存在でありつづけるでしょう。
このセッションではそのフロントエンドで戦い続けるためにも知っておきたい、実践的フロントエンド・デベロッパに求められるスキルセットについて紹介していきます。

Transcript

1. From Artisan to Expert Pragmatic Frontend Developer Yuya Saito @ Rich Media Frontrend Conference The Final - 2015.02.21
2. UX Engineer @ Rich Media Yuya Saito
4. Curated by @cssradar @t32k @hiloki frontendweekly.tokyo Frontend Weekly
6. The Pragmatic Programmer by Andrew Hunt & David Thomas amzn.to/1DzD1zQ
7. Be Collaborative ㉏겗כ➂ה➂ך꟦ח֮׷
8. Maintenance
9. )5.-
   
   $44
   
   +BWB4DSJQUכ
   寸׃גًٝذشٝأ׃װְׅ
   הכְִזְ
10. Learnability
11. 㼔Ꟍ涸ז濼陎ָ搀ֻג׮
    剅ֽג׃תֲ䩛鯪ׁ
12. 鎉铂׉ך׮ך׮㢌׻׹ֲה׃גְ׷
    圫ղז倯岀锷װخ٦ٕ׮㶷㖈ׅ׷
13. “ The greatest challenge that we’re facing with software isn’t technology itself, but effective collaboration. — Karolina Szczur
14. ㉏겗כ➂ה➂ך꟦ח֮׷
15. Code Style Guideline
16. “ All code in any code-base should look like a single person typed it, no matter how many people contributed. — Rick Waldron
17. Example
18. JavaScript
19. Idiomatic.js by Rick Waldron git.io/Aqez
20. jQuery Core Style Guideline by jQuery bit.ly/1w0kxrC
21. Airbnb JavaScript Style Guide by AIRBNB git.io/v8y5cA
22. CSS/HTML
23. Idiomatic.css by Nicolas Gallagher git.io/qS6zjA
24. CSS Guidelines by Harry Roberts cssguidelin.es
25. Sass Guideline by Hugo Giraudel sass-guidelin.es
26. Code Guide by Mark Otto codeguide.co
27. Which one?
28. Tools
29. EditorConfig by EditorConfig editorconfig.org
30. JSCS by JSCS Development Team jscs.info
31. CSSLint by Nicholas C. Zakas and Nicole Sullivan csslint.net
32. CSScomb by CSScomb csscomb.com
33. Automation!
34. Styleguide
35. GitHub
36. StarBucks
37. MailChimp
38. Website Style Guide Resources by Anna Debenham and Brad Frost styleguides.io
39. سًُؗٝذ٦ءّٝכ
    ㎳׾אֻ
40. Tools
41. KSS by Kyle Neath warpspire.com/kss
42. KSS-node by Hugh Kennedy git.io/AqWk
43. hologram by August Flanagan and JD Cantrell trulia.github.io/hologram
44. Website Style Guide Resources by Anna Debenham and Brad Frost styleguides.io
45. GOAL
46. Prototype
47. “ Build a prototype as soon as possible. — No.3 of Unix Philosophy
48. 㹋ꥷח鋅ִ׷׮ךծ
    ⹛ֻ׮ךח㼎׃גך䠐鋅כ鎉ְװְׅ
49. Tools
50. HTML CSS JavaScript
51. BrowserSync by Shane Osbourne browsersync.io
52. JS Bin by Remy Sharp jsbin.com
53. Google Chrome Canary
54. Collaboration is Important!
55. Be Adaptive 㢌⻉ח㼎׃㻂㺁ח
56. Progressive Enhancement
59. “ The web is not a platform. It’s a continuum. — Jeremy Keith
60. PlatForm On / OFF
61. Continuum ֮װסװז鸬竲䚍
62. BrowserS Devices Networks
63. Enhancing Progressively
64. Strategies
65. "Cut the mustard"
66. ؒٝعٝأًٝز׾「ֽ׵׸׷
    剑⡚ꣲך垥彊ח彊䬿׃גְ׷
    ـٓؐؠ׾锃ץ׷׋׭ךذؙصحؙ
67. if ('querySelector' in document && 'localStorage' in window && 'addEventListener' in window) { // Ϟμϯϒϥ΢β }
68. "Grade components, not browsers"
69. www.filamentgroup.com/lab/grade-the-components.html
70. adaddfdafasdfads asasdfasdfdaf adaddfdafasdfads asasdfasdfdaf dadfasdfasdf asdfasddddd 㖑㔳׾鋅׷
71. adaddfdafasdfads asasdfasdfdaf adaddfdafasdfads asasdfasdfdaf dadfasdfasdf asdfasddddd ؎ٝةؙٓذ؍ـ٥وحف
    ","
    (PPHMF
    .BQ
72. adaddfdafasdfads asasdfasdfdaf adaddfdafasdfads asasdfasdfdaf dadfasdfasdf asdfasddddd 㖑㔳׾鋅׷
73. ؎ٝةؙٓذ؍ـ٥وحف
    ","
    (PPHMF
    .BQ
74. ؝ٝه٦طٝز⽃⡤חֶֽ׷
    ⡤꿀׾㹀纏ׅ׷
75. We Are in a Changing World
76. ⮚猕זؒٝآص،חכ
    Ⱏ鸐׃ג֮׷暴䗙
77. 荈ⴓךㆸ㷕׾䭯׏גְ׷ֿה
78. 䬄韋嚊䙀׾Ⱗ⡤涸ז䕎ך֮׷׮ךח
    㢌ִ׷⸂׾䭯׏גְ׷ֿה
79. ر؍ذ٦ٕחֿ׌׻׶׾
    䭯׏גְ׷ֿה
80. ׮׃⵸䲿勴⟝ָ㢌׻׏׋הֹծ
    ׉ךֿ׌׻׶׾患ֻ䰍גׁ׷ֿהָ
    דֹ׷ֿה
82. 8FCכ䌢ח㢌⻉׃אבֽ׷橆㞮
83. 8FCךⵃ欽罏ך㢳ֻכ⽃秪ח8FC׾
    嶊顤׃׋ְ׌ֽ
84. by Arthur C. Clarke amzn.to/1A9xKhr 2001: A Space Odyssey
85. “ Instead of trying to point yourself in the right direction, admit you have no idea what the right direction is, and try instead to be super sensitive to the winds of change. — Paul Graham
86. Be responsible ⡲׏׋׮ךח㼎׃ג顑⟣׾䭯א
87. Maintainability
88. ،فٔ؛٦ءّٝ׮ծ
    ֮׷אך䪮遭涸ז鍑寸׌ֽד
    ⡲׶⳿ׇ׷הְֲֿהכזְ
89. וךؿٖ٦يٙ٦ؙ׾⢪ֲץַֹ
    וך鎉铂׾⢪ֲץַֹ
    וך؟٦ؽأ׾⢪ֲץַֹ ?
90. Ꟛ涪罏ךⵃ⤑䚍
91. خ٦ٕחכخ٦ٕ׀הח
    鍑寸׃זֽ׸לז׵זְ㉏겗ָ
    㶷㖈׃גְ׷
92. Document & Education
93. 8FCכ䌢ח㢌⻉׃אבֽ׷橆㞮
94. by OpenSignal
97. 〳腉זꣲ׶㢳ֻך橆㞮ח㼎䘔ׅ׷
98. Progressive Enhancement
99. 㛙暕זفٗتؙز׾⡲׷ֿה
    ׉ך㛙暕ׁח毟㉏׾チׅ׷ֿה
100. չ׮׃պ׾׃אְֻֿ׵ְꅾי׷ֿה
102. 㢳ֻך橆㞮ך䭯א劤䔲ך䠐㄂
103. Performance
104. V.S. Client Side Server Side
105. www.filamentgroup.com/lab/mv-initial-load-times.html
106. 1,000msך㠖׾馄ִ׵׸זְ
107. bit.ly/1Ey8ml4
108. Isomorphic JavaScript
109. Rendering Performance
110. react-canvas by Flipboard git.io/ACuk
111. Accessibility
112. Be (an) Expert 濼׷ֿהח㼎׃ג額妜ח
113. דֹזְה鎉׻זְկ
     ؔفءّٝ׾䲿爙ׅ׷
114. 㠨׸璞ך⚥ד➬✲׾׃זְ
115. չ⼧ⴓպְָאזךַ׾濼׷
116. 濼陎׾㟓װׅ׋׭ך儗꟦׾
     㹀䌢涸ח鏣ֽ׷
117. ؝ىُص؛٦ءّٝ
118. Last but No Least 剑䖓ח
119. ؿٗٝزؒٝسכֿ׸ַ׵׮
     8FCח䗳銲הׁ׸׷ךַ
120. YES!
121. ➙הずֿׄה׾׃אבֽ׷
     הְֲֿהכזְ
122. TEAM
123. Be Collaborative Be Adaptive Be responsible Be (an) Expert
124. Be Collaborative Be Adaptive Be responsible Be (an) Expert
125. Care
126. “ You can’t connect the dots looking forward; you can only connect them looking backwards. So you have to trust that the dots will somehow connect in your future. — Steve Jobs
128. Frontend isn’t Going Anywhere
129. Thank you! @cssradar