Pragmatic Front-end Developer: From Artisan to Expert

32f242f75b63e7174b493446de54a6b8?s=47 Yuya Saito
February 21, 2015

Pragmatic Front-end Developer: From Artisan to Expert

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

32f242f75b63e7174b493446de54a6b8?s=128

Yuya Saito

February 21, 2015
Tweet

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

  3. None
  4. Curated by @cssradar @t32k @hiloki frontendweekly.tokyo Frontend Weekly

  5. None
  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

  57. None
  58. None
  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. ׮׃⵸䲿勴⟝ָ㢌׻׏׋הֹծ ׉ךֿ׌׻׶׾患ֻ䰍גׁ׷ֿהָ דֹ׷ֿה

  81. None
  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

  95. None
  96. None
  97. 〳腉זꣲ׶㢳ֻך橆㞮ח㼎䘔ׅ׷

  98. Progressive Enhancement

  99. 㛙暕זفٗتؙز׾⡲׷ֿה ׉ך㛙暕ׁח毟㉏׾チׅ׷ֿה

  100. չ׮׃պ׾׃אְֻֿ׵ְꅾי׷ֿה

  101. None
  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
  127. None
  128. Frontend isn’t Going Anywhere

  129. Thank you! @cssradar