Contribute to Web

07b02dd38e4e3a53caf0e528e3bc9e6c?s=47 Ryo Kato
August 10, 2017

Contribute to Web

Nihonbashi.js #2

07b02dd38e4e3a53caf0e528e3bc9e6c?s=128

Ryo Kato

August 10, 2017
Tweet

Transcript

  1. from Node to Browser Contribute to Web @Nihonbashi.js #2

  2. Hello! const self = { name: 'Hash (@hashedhyphen)', lang: ['JS',

    'Rust', 'Ruby', 'Scala'] };
  3. “Contribute to Web” 1. Localization

  4. 1. Localization ❖ JavaScript ͱग़ձͬͨͷ͸໿ 2 ೥લ ❖ ᷿ͷ೔ຊޠ৘ใ͸ HTML

    ͱͷؔ࿈͹͔Γ ❖ গ͠ϚΠφʔʹͳΔͱӳޠυΩϡϝϯτ͚ͩ ❖ ͦΕ΄Ͳӳޠ͕ಘҙͰ͸ͳ͔ͬͨͷͰͭΒ͍
  5. None
  6. “຋༁͠Α͏ʂ”

  7. 1. Localization ❖ ೔ຊޠ৘ใ͕ͳ͚Ε͹ࣗ෼Ͱ࡞Ε͹͍͍ ❖ MDN ͸ wiki ͳͷͰࣗ༝ʹ೔ຊޠهࣄΛ࡞ΕΔ ❖

    ΋ͪΖΜٕज़໘ͰษڧʹͳΔ ❖ ຋༁ = ਫ਼ಡ͢Δ͏ͪʹ࣍ୈʹӳޠ͕ා͘ͳ͘ͳΔ
  8. None
  9. 1. Localization ❖ MDN (Browser JS API, Security, CSS) ❖

    Mozilla Security Blog ೔ຊޠ൛ ❖ webappsec-specjp
  10. “Contribute to Web” 2. Filing Issues - Node

  11. 2. Filing Issues - Node ಥવͰ͕͢͜͜ͰΫΠζͰ͢ ࣍ͷίʔυͷ࣮ߦ݁Ռ͸ԿͰ͠ΐ͏͔ʁ ʢ࣮ߦ؀ڥɿNode v8.3.0ʣ

  12. // quiz1.js class Base {} class Derived extends Base {

    hi() { console.log("hi"); } } const d = new Derived(); d.hi();
  13. $ node quiz1.js hi

  14. // quiz2.js class Derived extends Buffer { constructor(n) { super(n);

    } hi() { console.log("hi"); } } const d = new Derived(8); d.hi();
  15. $ node quiz2.js /Users/hh/quiz2.js:14 d.hi(); ^ TypeError: d.hi is not

    a function
  16. 2. Filing Issues - Node ❖ ͜Ε͸͕͢͞ʹόάͰ͸… ❖ GitHub Ͱ

    Issue ใࠂ ❖ Node ͷ Nightly build Ͱ΋࠶ݱ͢Δ͜ͱΛ֬ೝ ❖ Issue ͷӳจ਺ߦΛॻ͘ͷʹ 30 ෼͙Β͍೰Μͩ ❖ ಡΉͷͱॻ͘ͷͱ͸·ͨผ…
  17. None
  18. 2. Filing Issues - Node ❖ 1:44 ʹ Issue ใࠂ

    ❖ 2:50 ʹ࠷ॳͷฦ৴ + Self assigned ❖ 3:12 ʹमਖ਼Ҋͷύον͕ϦϯΫ͞ΕΔʢ଎͍ʂʣ
  19. 2. Filing Issues - Node ❖ ࣌ظతʹ Node v5 ͔Β

    v6 ΁ͷస׵ظ ❖ new Buffer Λ΍Ίͯ Buffer.from ʹ͢ΔͳͲ ❖ ͜ͷमਖ਼͕ master ʹೖΔ͜ͱ͸ͳ͔͕ͬͨɺ Buffer Λ௚઀ extends ͢Δ͜ͱ͸كʁ
  20. “Contribute to Web” 3. Filing Issues - Browser

  21. 3. Filing Issues - Browser ❖ ͋Δ೔ TweetDeck Λ Firefox

    Ͱ࢖͍ͬͯͨΒ ❖ ೔ຊޠೖྗͰࢠԻͱ฼Ի͕࿈݁͞Εͳ͍ʂ
  22. None
  23. 3. Filing Issues - Browser ❖ ະ֬ఆจࣈ͕ textarea.value ͳͲʹೖͬͨ৔߹ͷ ಈ࡞͸

    WHATWG Ͱ͸ະఆٛ textarea.addEventListener("input", _evt => { textarea.value = textarea.value; }); ࣮ࡍʹ໰୊ͱͳ͍ͬͯͨͱਪଌ͞ΕΔٖࣅίʔυ front side ϏϧυϓϩηεͷෳࡶԽʹΑͬͯฆΕࠐΜ͔ͩʁ
  24. 3. Filing Issues - Browser ❖ TweetDeck νʔϜଆͷςετෆ଍͕ݪҼ ❖ ৄࡉɿ΋ͣ͸ͬ͘೔هɿ

    TweetDeckͰFirefox͔Β ೔ຊޠ͕ೖྗͰ͖ͳ͘ͳ͍ͬͯΔ݅ ❖ Gecko ͱ Twitter ͷ։ൃऀ͕௚઀΍ΓऔΓ͢Δڳ ೤ͳల։
  25. 3. Filing Issues - Browser ❖ ཤྺॻΛ HTML + CSS

    Ͱ࡞͍ͬͯͨͱ͖ͷ͜ͱ ❖ <li> ͱ Flexbox ͕ೖΕࢠʹͳͬͨϖʔδΛ Chrome Ͱදࣔ͢ΔͱҐஔ͕͓͔͘͠ͳΔ ❖ Issue 579601: li::marker with flexbox is placed on a slipped position ❖ ·ͩະमਖ਼
  26. None
  27. ͜͜·ͰΛৼΓฦͬͯ ❖ JavaScript ʹؔ࿈͢Δ OSS contribution ͷΠϕϯ τ͡Όͳ͔ͬͨͷʁ ❖ Πϕϯτͷझࢫͱ߹͍ͬͯͳ͍͡ΌͶ͔͑

  28. ͜͜·ͰΛৼΓฦͬͯ ❖ JavaScript ʹؔ࿈͢Δ OSS contribution ͷΠϕϯ τ͡Όͳ͔ͬͨͷʁ ❖ Πϕϯτͷझࢫͱ߹͍ͬͯͳ͍͡ΌͶ͔͑

    ❖ ͔͜͜Β͕ຊ୊Ͱ͢
  29. “Browser ͷ JS API ʹܞΘͬͨ࿩”

  30. “Contribute to Web” 4. Browser Inside

  31. 4. Browser Inside ❖ Gecko inside #7ɿύονΛ࡞Ζ͏ϋϯζΦϯ ❖ Gecko (Firefox)

    ͷίϛολʔͱҰॹʹύονΛ
 ࡞ΔϋϯζΦϯ ❖ Web Animations API ʹ͓͍ͯΞχϝʔγϣϯͷ Ҡಈํ޲Λ੍ޚ͢Δ࣮૷ͷ͓ख఻͍ ❖ ΋ͪΖΜ Bugzilla ͰӳޠͰίϛϡχέʔγϣϯ
  32. ࣮ࡍʹॻ͍ͨ C++ ίʔυʢ7 ߦʣ ΋ͪΖΜطʹ͓હཱ͍͍͍ͯͯͨͩͯͨ͠

  33. ࣮ࡍʹॻ͍ͨ JS ͷ ςετίʔυʢ56 ߦʣ

  34. 4. Browser Inside ❖ Browser ͸͓ͦΒ͘ੈքͰҰ൪ڊେͳ C++ ͷ
 OSS ϓϩδΣΫτͳͷͰ͸ʁʢݸਓͷҙݟʣ

    ❖ ੈքதͷਓ͕࢖͍ͬͯΔ΋ͷʹࣗ෼ͷίʔυ͕
 ࢖ΘΕ͍ͯΔͬͯͪΐͬͱخ͍͠
  35. 4. Browser Inside ❖ Πϕϯτޙ΋௚઀Կݸ͔νέοτΛΞαΠϯͯ͠ ͍͍ͨͩͨΓ ❖ JS ͷςετίʔυΛϦϑΝΫλϦϯάͨ͠Γ ❖

    ΋͏গ͠೉͍͠ C++ ͷίʔυΛॻ͍ͨΓ ❖ e.g. Ξχϝʔγϣϯؔ࿈ͷ devtools ͷόάमਖ਼
  36. 4. Browser Inside ❖ Firefox DevTools ͷόάमਖ਼ ❖ DevTools ͸

    HTML (XML) + CSS + JS ❖ ࣮͸ Firefox DevTools ʹ React ͕࠾༻͞Ε͍ͯΔ
  37. None
  38. “Contribute to Web” Wrap up

  39. Wrap up ❖ ΍ͬͺΓ OSS ͸ָ͍͠ʂ ❖ web ք۾Ͱͷ “OSS”

    ͱ͍͏ͱ࢓ࣄͰ࢖͍ͬͯΔ ϥΠϒϥϦɾݴޠʹറΒΕ͕ͪ ❖ web dev ͳΒ Browser ʹ΋໨Λ޲͚͍͖͍ͯͨ ❖ ීஈͷ։ൃͰग़ձͬͨόά͸ੵۃతʹใࠂ͍ͨ͠