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

Contribute to Web

Ryo Sakuma
August 10, 2017

Contribute to Web

Nihonbashi.js #2

Ryo Sakuma

August 10, 2017
Tweet

More Decks by Ryo Sakuma

Other Decks in Technology

Transcript

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

    View full-size slide

  2. Hello!
    const self = {
    name: 'Hash (@hashedhyphen)',
    lang: ['JS', 'Rust', 'Ruby', 'Scala']
    };

    View full-size slide

  3. “Contribute to Web”
    1. Localization

    View full-size slide

  4. 1. Localization
    ❖ JavaScript ͱग़ձͬͨͷ͸໿ 2 ೥લ
    ❖ ᷿ͷ೔ຊޠ৘ใ͸ HTML ͱͷؔ࿈͹͔Γ
    ❖ গ͠ϚΠφʔʹͳΔͱӳޠυΩϡϝϯτ͚ͩ
    ❖ ͦΕ΄Ͳӳޠ͕ಘҙͰ͸ͳ͔ͬͨͷͰͭΒ͍

    View full-size slide

  5. “຋༁͠Α͏ʂ”

    View full-size slide

  6. 1. Localization
    ❖ ೔ຊޠ৘ใ͕ͳ͚Ε͹ࣗ෼Ͱ࡞Ε͹͍͍
    ❖ MDN ͸ wiki ͳͷͰࣗ༝ʹ೔ຊޠهࣄΛ࡞ΕΔ
    ❖ ΋ͪΖΜٕज़໘ͰษڧʹͳΔ
    ❖ ຋༁ = ਫ਼ಡ͢Δ͏ͪʹ࣍ୈʹӳޠ͕ා͘ͳ͘ͳΔ

    View full-size slide

  7. 1. Localization
    ❖ MDN (Browser JS API, Security, CSS)
    ❖ Mozilla Security Blog ೔ຊޠ൛
    ❖ webappsec-specjp

    View full-size slide

  8. “Contribute to Web”
    2. Filing Issues - Node

    View full-size slide

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

    View full-size slide

  10. // quiz1.js
    class Base {}
    class Derived extends Base {
    hi() {
    console.log("hi");
    }
    }
    const d = new Derived();
    d.hi();

    View full-size slide

  11. $ node quiz1.js
    hi

    View full-size slide

  12. // quiz2.js
    class Derived extends Buffer {
    constructor(n) {
    super(n);
    }
    hi() {
    console.log("hi");
    }
    }
    const d = new Derived(8);
    d.hi();

    View full-size slide

  13. $ node quiz2.js
    /Users/hh/quiz2.js:14
    d.hi();
    ^
    TypeError: d.hi is not a function

    View full-size slide

  14. 2. Filing Issues - Node
    ❖ ͜Ε͸͕͢͞ʹόάͰ͸…
    ❖ GitHub Ͱ Issue ใࠂ
    ❖ Node ͷ Nightly build Ͱ΋࠶ݱ͢Δ͜ͱΛ֬ೝ
    ❖ Issue ͷӳจ਺ߦΛॻ͘ͷʹ 30 ෼͙Β͍೰Μͩ
    ❖ ಡΉͷͱॻ͘ͷͱ͸·ͨผ…

    View full-size slide

  15. 2. Filing Issues - Node
    ❖ 1:44 ʹ Issue ใࠂ
    ❖ 2:50 ʹ࠷ॳͷฦ৴ + Self assigned
    ❖ 3:12 ʹमਖ਼Ҋͷύον͕ϦϯΫ͞ΕΔʢ଎͍ʂʣ

    View full-size slide

  16. 2. Filing Issues - Node
    ❖ ࣌ظతʹ Node v5 ͔Β v6 ΁ͷస׵ظ
    ❖ new Buffer Λ΍Ίͯ Buffer.from ʹ͢ΔͳͲ
    ❖ ͜ͷमਖ਼͕ master ʹೖΔ͜ͱ͸ͳ͔͕ͬͨɺ
    Buffer Λ௚઀ extends ͢Δ͜ͱ͸كʁ

    View full-size slide

  17. “Contribute to Web”
    3. Filing Issues
    - Browser

    View full-size slide

  18. 3. Filing Issues - Browser
    ❖ ͋Δ೔ TweetDeck Λ Firefox Ͱ࢖͍ͬͯͨΒ
    ❖ ೔ຊޠೖྗͰࢠԻͱ฼Ի͕࿈݁͞Εͳ͍ʂ

    View full-size slide

  19. 3. Filing Issues - Browser
    ❖ ະ֬ఆจࣈ͕ textarea.value ͳͲʹೖͬͨ৔߹ͷ
    ಈ࡞͸ WHATWG Ͱ͸ະఆٛ
    textarea.addEventListener("input", _evt => {
    textarea.value = textarea.value;
    });
    ࣮ࡍʹ໰୊ͱͳ͍ͬͯͨͱਪଌ͞ΕΔٖࣅίʔυ
    front side ϏϧυϓϩηεͷෳࡶԽʹΑͬͯฆΕࠐΜ͔ͩʁ

    View full-size slide

  20. 3. Filing Issues - Browser
    ❖ TweetDeck νʔϜଆͷςετෆ଍͕ݪҼ
    ❖ ৄࡉɿ΋ͣ͸ͬ͘೔هɿ TweetDeckͰFirefox͔Β
    ೔ຊޠ͕ೖྗͰ͖ͳ͘ͳ͍ͬͯΔ݅
    ❖ Gecko ͱ Twitter ͷ։ൃऀ͕௚઀΍ΓऔΓ͢Δڳ
    ೤ͳల։

    View full-size slide

  21. 3. Filing Issues - Browser
    ❖ ཤྺॻΛ HTML + CSS Ͱ࡞͍ͬͯͨͱ͖ͷ͜ͱ
    ❖ ͱ Flexbox ͕ೖΕࢠʹͳͬͨϖʔδΛ
    Chrome Ͱදࣔ͢ΔͱҐஔ͕͓͔͘͠ͳΔ
    ❖ Issue 579601: li::marker with flexbox is placed on a
    slipped position
    ❖ ·ͩະमਖ਼

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  24. “Browser ͷ JS API ʹܞΘͬͨ࿩”

    View full-size slide

  25. “Contribute to Web”
    4. Browser Inside

    View full-size slide

  26. 4. Browser Inside
    ❖ Gecko inside #7ɿύονΛ࡞Ζ͏ϋϯζΦϯ
    ❖ Gecko (Firefox) ͷίϛολʔͱҰॹʹύονΛ

    ࡞ΔϋϯζΦϯ
    ❖ Web Animations API ʹ͓͍ͯΞχϝʔγϣϯͷ
    Ҡಈํ޲Λ੍ޚ͢Δ࣮૷ͷ͓ख఻͍
    ❖ ΋ͪΖΜ Bugzilla ͰӳޠͰίϛϡχέʔγϣϯ

    View full-size slide

  27. ࣮ࡍʹॻ͍ͨ C++ ίʔυʢ7 ߦʣ
    ΋ͪΖΜطʹ͓હཱ͍͍͍ͯͯͨͩͯͨ͠

    View full-size slide

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

    View full-size slide

  29. 4. Browser Inside
    ❖ Browser ͸͓ͦΒ͘ੈքͰҰ൪ڊେͳ C++ ͷ

    OSS ϓϩδΣΫτͳͷͰ͸ʁʢݸਓͷҙݟʣ
    ❖ ੈքதͷਓ͕࢖͍ͬͯΔ΋ͷʹࣗ෼ͷίʔυ͕

    ࢖ΘΕ͍ͯΔͬͯͪΐͬͱخ͍͠

    View full-size slide

  30. 4. Browser Inside
    ❖ Πϕϯτޙ΋௚઀Կݸ͔νέοτΛΞαΠϯͯ͠
    ͍͍ͨͩͨΓ
    ❖ JS ͷςετίʔυΛϦϑΝΫλϦϯάͨ͠Γ
    ❖ ΋͏গ͠೉͍͠ C++ ͷίʔυΛॻ͍ͨΓ
    ❖ e.g. Ξχϝʔγϣϯؔ࿈ͷ devtools ͷόάमਖ਼

    View full-size slide

  31. 4. Browser Inside
    ❖ Firefox DevTools ͷόάमਖ਼
    ❖ DevTools ͸ HTML (XML) + CSS + JS
    ❖ ࣮͸ Firefox DevTools ʹ React ͕࠾༻͞Ε͍ͯΔ

    View full-size slide

  32. “Contribute to Web”
    Wrap up

    View full-size slide

  33. Wrap up
    ❖ ΍ͬͺΓ OSS ͸ָ͍͠ʂ
    ❖ web ք۾Ͱͷ “OSS” ͱ͍͏ͱ࢓ࣄͰ࢖͍ͬͯΔ
    ϥΠϒϥϦɾݴޠʹറΒΕ͕ͪ
    ❖ web dev ͳΒ Browser ʹ΋໨Λ޲͚͍͖͍ͯͨ
    ❖ ීஈͷ։ൃͰग़ձͬͨόά͸ੵۃతʹใࠂ͍ͨ͠

    View full-size slide