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 ʹΛ͚͍͖͍ͯͨ
❖ ීஈͷ։ൃͰग़ձͬͨόάੵۃతʹใࠂ͍ͨ͠