Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Pragmatic Front-end Developer: From Artisan to Expert

Yuya Saito
February 21, 2015

Pragmatic Front-end Developer: From Artisan to Expert

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

Yuya Saito

February 21, 2015
Tweet

More Decks by Yuya Saito

Other Decks in Programming

Transcript

  1. From Artisan to Expert
    Pragmatic
    Frontend
    Developer
    Yuya Saito @ Rich Media
    Frontrend Conference
    The Final - 2015.02.21

    View Slide

  2. UX Engineer @ Rich Media
    Yuya Saito

    View Slide

  3. View Slide

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

    View Slide

  5. View Slide

  6. The Pragmatic
    Programmer
    by Andrew Hunt & David Thomas
    amzn.to/1DzD1zQ

    View Slide

  7. Be Collaborative
    ㉏겗כ➂ה➂ך꟦ח֮׷

    View Slide

  8. Maintenance

    View Slide

  9. )5.-$44+BWB4DSJQUכ
    寸׃גًٝذشٝأ׃װְׅ
    הכְִזְ

    View Slide

  10. Learnability

    View Slide

  11. 㼔Ꟍ涸ז濼陎ָ搀ֻג׮
    剅ֽג׃תֲ䩛鯪ׁ

    View Slide

  12. 鎉铂׉ך׮ך׮㢌׻׹ֲה׃גְ׷
    圫ղז倯岀锷װخ٦ٕ׮㶷㖈ׅ׷

    View Slide


  13. The greatest challenge that
    we’re facing with software isn’t
    technology itself,
    but effective collaboration.
    — Karolina Szczur

    View Slide

  14. ㉏겗כ➂ה➂ך꟦ח֮׷

    View Slide

  15. Code Style Guideline

    View Slide


  16. All code in any code-base should look
    like a single person typed it,
    no matter how many people contributed.
    — Rick Waldron

    View Slide

  17. Example

    View Slide

  18. JavaScript

    View Slide

  19. Idiomatic.js
    by Rick Waldron
    git.io/Aqez

    View Slide

  20. jQuery Core
    Style Guideline
    by jQuery
    bit.ly/1w0kxrC

    View Slide

  21. Airbnb
    JavaScript
    Style Guide
    by AIRBNB
    git.io/v8y5cA

    View Slide

  22. CSS/HTML

    View Slide

  23. Idiomatic.css
    by Nicolas Gallagher
    git.io/qS6zjA

    View Slide

  24. CSS Guidelines
    by Harry Roberts
    cssguidelin.es

    View Slide

  25. Sass Guideline
    by Hugo Giraudel
    sass-guidelin.es

    View Slide

  26. Code Guide
    by Mark Otto
    codeguide.co

    View Slide

  27. Which one?

    View Slide

  28. Tools

    View Slide

  29. EditorConfig
    by EditorConfig
    editorconfig.org

    View Slide

  30. JSCS
    by JSCS Development Team
    jscs.info

    View Slide

  31. CSSLint
    by Nicholas C. Zakas and Nicole Sullivan
    csslint.net

    View Slide

  32. CSScomb
    by CSScomb
    csscomb.com

    View Slide

  33. Automation!

    View Slide

  34. Styleguide

    View Slide

  35. GitHub

    View Slide

  36. StarBucks

    View Slide

  37. MailChimp

    View Slide

  38. Website
    Style Guide
    Resources
    by Anna Debenham and Brad Frost
    styleguides.io

    View Slide

  39. سًُؗٝذ٦ءّٝכ
    ㎳׾אֻ

    View Slide

  40. Tools

    View Slide

  41. KSS
    by Kyle Neath
    warpspire.com/kss

    View Slide

  42. KSS-node
    by Hugh Kennedy
    git.io/AqWk

    View Slide

  43. hologram
    by August Flanagan and JD Cantrell
    trulia.github.io/hologram

    View Slide

  44. Website
    Style Guide
    Resources
    by Anna Debenham and Brad Frost
    styleguides.io

    View Slide

  45. GOAL

    View Slide

  46. Prototype

    View Slide


  47. Build a prototype as soon as possible.
    — No.3 of Unix Philosophy

    View Slide

  48. 㹋ꥷח鋅ִ׷׮ךծ
    ⹛ֻ׮ךח㼎׃גך䠐鋅כ鎉ְװְׅ

    View Slide

  49. Tools

    View Slide

  50. HTML
    CSS
    JavaScript

    View Slide

  51. BrowserSync
    by Shane Osbourne
    browsersync.io

    View Slide

  52. JS Bin
    by Remy Sharp
    jsbin.com

    View Slide

  53. Google
    Chrome Canary

    View Slide

  54. Collaboration
    is Important!

    View Slide

  55. Be Adaptive
    㢌⻉ח㼎׃㻂㺁ח

    View Slide

  56. Progressive Enhancement

    View Slide

  57. View Slide

  58. View Slide


  59. The web is not a platform.
    It’s a continuum.
    — Jeremy Keith

    View Slide

  60. PlatForm On / OFF

    View Slide

  61. Continuum
    ֮װסװז鸬竲䚍

    View Slide

  62. BrowserS
    Devices
    Networks

    View Slide

  63. Enhancing
    Progressively

    View Slide

  64. Strategies

    View Slide

  65. "Cut the mustard"

    View Slide

  66. ؒٝعٝأًٝز׾「ֽ׵׸׷
    剑⡚ꣲך垥彊ח彊䬿׃גְ׷
    ـٓؐؠ׾锃ץ׷׋׭ךذؙصحؙ

    View Slide

  67. if ('querySelector' in document
    && 'localStorage' in window
    && 'addEventListener' in window) {
    // Ϟμϯϒϥ΢β
    }

    View Slide

  68. "Grade components,
    not browsers"

    View Slide

  69. www.filamentgroup.com/lab/grade-the-components.html

    View Slide

  70. adaddfdafasdfads
    asasdfasdfdaf
    adaddfdafasdfads
    asasdfasdfdaf
    dadfasdfasdf
    asdfasddddd
    㖑㔳׾鋅׷

    View Slide

  71. adaddfdafasdfads
    asasdfasdfdaf
    adaddfdafasdfads
    asasdfasdfdaf
    dadfasdfasdf
    asdfasddddd
    ؎ٝةؙٓذ؍ـ٥وحف
    ","(PPHMF.BQ

    View Slide

  72. adaddfdafasdfads
    asasdfasdfdaf
    adaddfdafasdfads
    asasdfasdfdaf
    dadfasdfasdf
    asdfasddddd
    㖑㔳׾鋅׷

    View Slide

  73. ؎ٝةؙٓذ؍ـ٥وحف
    ","(PPHMF.BQ

    View Slide

  74. ؝ٝه٦طٝز⽃⡤חֶֽ׷
    ⡤꿀׾㹀纏ׅ׷

    View Slide

  75. We Are in a Changing World

    View Slide

  76. ⮚猕זؒٝآص،חכ
    Ⱏ鸐׃ג֮׷暴䗙

    View Slide

  77. 荈ⴓךㆸ㷕׾䭯׏גְ׷ֿה

    View Slide

  78. 䬄韋嚊䙀׾Ⱗ⡤涸ז䕎ך֮׷׮ךח
    㢌ִ׷⸂׾䭯׏גְ׷ֿה

    View Slide

  79. ر؍ذ٦ٕחֿ׌׻׶׾
    䭯׏גְ׷ֿה

    View Slide

  80. ׮׃⵸䲿勴⟝ָ㢌׻׏׋הֹծ
    ׉ךֿ׌׻׶׾患ֻ䰍גׁ׷ֿהָ
    דֹ׷ֿה

    View Slide

  81. View Slide

  82. 8FCכ䌢ח㢌⻉׃אבֽ׷橆㞮

    View Slide

  83. 8FCךⵃ欽罏ך㢳ֻכ⽃秪ח8FC׾
    嶊顤׃׋ְ׌ֽ

    View Slide

  84. by Arthur C. Clarke
    amzn.to/1A9xKhr
    2001:
    A Space Odyssey

    View Slide


  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

    View Slide

  86. Be responsible
    ⡲׏׋׮ךח㼎׃ג顑⟣׾䭯א

    View Slide

  87. Maintainability

    View Slide

  88. ،فٔ؛٦ءّٝ׮ծ
    ֮׷אך䪮遭涸ז鍑寸׌ֽד
    ⡲׶⳿ׇ׷הְֲֿהכזְ

    View Slide

  89. וךؿٖ٦يٙ٦ؙ׾⢪ֲץַֹ
    וך鎉铂׾⢪ֲץַֹ
    וך؟٦ؽأ׾⢪ֲץַֹ
    ?

    View Slide

  90. Ꟛ涪罏ךⵃ⤑䚍

    View Slide

  91. خ٦ٕחכخ٦ٕ׀הח
    鍑寸׃זֽ׸לז׵זְ㉏겗ָ
    㶷㖈׃גְ׷

    View Slide

  92. Document & Education

    View Slide

  93. 8FCכ䌢ח㢌⻉׃אבֽ׷橆㞮

    View Slide

  94. by OpenSignal

    View Slide

  95. View Slide

  96. View Slide

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

    View Slide

  98. Progressive Enhancement

    View Slide

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

    View Slide

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

    View Slide

  101. View Slide

  102. 㢳ֻך橆㞮ך䭯א劤䔲ך䠐㄂

    View Slide

  103. Performance

    View Slide

  104. V.S.
    Client Side
    Server Side

    View Slide

  105. www.filamentgroup.com/lab/mv-initial-load-times.html

    View Slide

  106. 1,000msך㠖׾馄ִ׵׸זְ

    View Slide

  107. bit.ly/1Ey8ml4

    View Slide

  108. Isomorphic
    JavaScript

    View Slide

  109. Rendering Performance

    View Slide

  110. react-canvas
    by Flipboard
    git.io/ACuk

    View Slide

  111. Accessibility

    View Slide

  112. Be (an) Expert
    濼׷ֿהח㼎׃ג額妜ח

    View Slide

  113. דֹזְה鎉׻זְկ
    ؔفءّٝ׾䲿爙ׅ׷

    View Slide

  114. 㠨׸璞ך⚥ד➬✲׾׃זְ

    View Slide

  115. չ⼧ⴓպְָאזךַ׾濼׷

    View Slide

  116. 濼陎׾㟓װׅ׋׭ך儗꟦׾
    㹀䌢涸ח鏣ֽ׷

    View Slide

  117. ؝ىُص؛٦ءّٝ

    View Slide

  118. Last but No Least
    剑䖓ח

    View Slide

  119. ؿٗٝزؒٝسכֿ׸ַ׵׮
    8FCח䗳銲הׁ׸׷ךַ

    View Slide

  120. YES!

    View Slide

  121. ➙הずֿׄה׾׃אבֽ׷
    הְֲֿהכזְ

    View Slide

  122. TEAM

    View Slide

  123. Be Collaborative
    Be Adaptive
    Be responsible
    Be (an) Expert

    View Slide

  124. Be Collaborative
    Be Adaptive
    Be responsible
    Be (an) Expert

    View Slide

  125. Care

    View Slide


  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

    View Slide

  127. View Slide

  128. Frontend isn’t
    Going Anywhere

    View Slide

  129. Thank you!
    @cssradar

    View Slide