Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

“Contribute to Web” 1. Localization

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

“຋༁͠Α͏ʂ”

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

“Contribute to Web” 2. Filing Issues - Node

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

$ node quiz1.js hi

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

“Contribute to Web” 3. Filing Issues - Browser

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

    • Slide 26

    Slide 26 text

    No content

    Slide 27

    Slide 27 text

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

    Slide 28

    Slide 28 text

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

    Slide 29

    Slide 29 text

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

    Slide 30

    Slide 30 text

    “Contribute to Web” 4. Browser Inside

    Slide 31

    Slide 31 text

    4. Browser Inside ❖ Gecko inside #7ɿύονΛ࡞Ζ͏ϋϯζΦϯ ❖ Gecko (Firefox) ͷίϛολʔͱҰॹʹύονΛ
 ࡞ΔϋϯζΦϯ ❖ Web Animations API ʹ͓͍ͯΞχϝʔγϣϯͷ Ҡಈํ޲Λ੍ޚ͢Δ࣮૷ͷ͓ख఻͍ ❖ ΋ͪΖΜ Bugzilla ͰӳޠͰίϛϡχέʔγϣϯ

    Slide 32

    Slide 32 text

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

    Slide 33

    Slide 33 text

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

    Slide 34

    Slide 34 text

    4. Browser Inside ❖ Browser ͸͓ͦΒ͘ੈքͰҰ൪ڊେͳ C++ ͷ
 OSS ϓϩδΣΫτͳͷͰ͸ʁʢݸਓͷҙݟʣ ❖ ੈքதͷਓ͕࢖͍ͬͯΔ΋ͷʹࣗ෼ͷίʔυ͕
 ࢖ΘΕ͍ͯΔͬͯͪΐͬͱخ͍͠

    Slide 35

    Slide 35 text

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

    Slide 36

    Slide 36 text

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

    Slide 37

    Slide 37 text

    No content

    Slide 38

    Slide 38 text

    “Contribute to Web” Wrap up

    Slide 39

    Slide 39 text

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