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 full-size slide

  2. UX Engineer @ Rich Media
    Yuya Saito

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  7. Learnability

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  12. Code Style Guideline

    View full-size slide


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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. CSS Guidelines
    by Harry Roberts
    cssguidelin.es

    View full-size slide

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

    View full-size slide

  20. Code Guide
    by Mark Otto
    codeguide.co

    View full-size slide

  21. EditorConfig
    by EditorConfig
    editorconfig.org

    View full-size slide

  22. JSCS
    by JSCS Development Team
    jscs.info

    View full-size slide

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

    View full-size slide

  24. CSScomb
    by CSScomb
    csscomb.com

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. KSS
    by Kyle Neath
    warpspire.com/kss

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


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

    View full-size slide

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

    View full-size slide

  33. HTML
    CSS
    JavaScript

    View full-size slide

  34. BrowserSync
    by Shane Osbourne
    browsersync.io

    View full-size slide

  35. JS Bin
    by Remy Sharp
    jsbin.com

    View full-size slide

  36. Google
    Chrome Canary

    View full-size slide

  37. Collaboration
    is Important!

    View full-size slide

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

    View full-size slide

  39. Progressive Enhancement

    View full-size slide


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

    View full-size slide

  41. PlatForm On / OFF

    View full-size slide

  42. Continuum
    ֮װסװז鸬竲䚍

    View full-size slide

  43. BrowserS
    Devices
    Networks

    View full-size slide

  44. Enhancing
    Progressively

    View full-size slide

  45. "Cut the mustard"

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. "Grade components,
    not browsers"

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  55. We Are in a Changing World

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  64. 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 full-size slide

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

    View full-size slide

  66. Maintainability

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  69. Ꟛ涪罏ךⵃ⤑䚍

    View full-size slide

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

    View full-size slide

  71. Document & Education

    View full-size slide

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

    View full-size slide

  73. by OpenSignal

    View full-size slide

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

    View full-size slide

  75. Progressive Enhancement

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  79. V.S.
    Client Side
    Server Side

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  82. bit.ly/1Ey8ml4

    View full-size slide

  83. Isomorphic
    JavaScript

    View full-size slide

  84. Rendering Performance

    View full-size slide

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

    View full-size slide

  86. Accessibility

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  92. ؝ىُص؛٦ءّٝ

    View full-size slide

  93. Last but No Least
    剑䖓ח

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide


  98. 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 full-size slide

  99. Frontend isn’t
    Going Anywhere

    View full-size slide

  100. Thank you!
    @cssradar

    View full-size slide