Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Contribute to Web
Search
Ryo Sakuma
August 10, 2017
Technology
0
520
Contribute to Web
Nihonbashi.js #2
Ryo Sakuma
August 10, 2017
Tweet
Share
More Decks by Ryo Sakuma
See All by Ryo Sakuma
Cool Math for Hot Music 輪読会 Sec.22
hashedhyphen
0
70
Cool Math for Hot Music 輪読会 Sec.19 Part 2
hashedhyphen
0
78
Cool Math for Hot Music 輪読会 Sec.19
hashedhyphen
0
45
Cool Math for Hot Music 輪読会 Sec.16 Part 2
hashedhyphen
0
98
Cool Math for Hot Music 輪読会 Sec.16 Part 1
hashedhyphen
0
180
Cool Math for Hot Music 輪読会 Sec.5
hashedhyphen
0
66
『プロフェッショナル SSL/TLS 読書会』 第 10 章
hashedhyphen
1
430
クラウド型電子カルテシステムと Microservices への歩み
hashedhyphen
3
1.2k
『プロフェッショナル SSL/TLS 読書会』 第 6 章
hashedhyphen
0
580
Other Decks in Technology
See All in Technology
生成AIによるデータサイエンスの変革
taka_aki
0
3k
僕たちが「開発しやすさ」を求め 模索し続けたアーキテクチャ #アーキテクチャ勉強会_findy
bengo4com
0
2.5k
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
240
AIが住民向けコンシェルジュに?Amazon Connectと生成AIで実現する自治体AIエージェント!
yuyeah
0
210
Rethinking Incident Response: Context-Aware AI in Practice - Incident Buddy Edition -
rrreeeyyy
0
120
o11yツールを乗り換えた話
tak0x00
2
1.7k
Exadata Database Service on Dedicated Infrastructure セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
1
330
形式手法特論:位相空間としての並行プログラミング #kernelvm / Kernel VM Study Tokyo 18th
ytaka23
3
1.5k
Amazon Inspector コードセキュリティで手軽に実現するシフトレフト
maimyyym
0
140
あとはAIに任せて人間は自由に生きる
kentaro
2
180
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
2.5k
20250807_Kiroと私の反省会
riz3f7
0
260
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
73
5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
810
4 Signs Your Business is Dying
shpigford
184
22k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Raft: Consensus for Rubyists
vanstee
140
7.1k
How to Ace a Technical Interview
jacobian
279
23k
Docker and Python
trallard
45
3.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Rails Girls Zürich Keynote
gr2m
95
14k
RailsConf 2023
tenderlove
30
1.2k
We Have a Design System, Now What?
morganepeng
53
7.7k
Transcript
from Node to Browser Contribute to Web @Nihonbashi.js #2
Hello! const self = { name: 'Hash (@hashedhyphen)', lang: ['JS',
'Rust', 'Ruby', 'Scala'] };
“Contribute to Web” 1. Localization
1. Localization ❖ JavaScript ͱग़ձͬͨͷ 2 લ ❖ ᷿ͷຊޠใ HTML
ͱͷؔ࿈͔Γ ❖ গ͠ϚΠφʔʹͳΔͱӳޠυΩϡϝϯτ͚ͩ ❖ ͦΕ΄Ͳӳޠ͕ಘҙͰͳ͔ͬͨͷͰͭΒ͍
None
“༁͠Α͏ʂ”
1. Localization ❖ ຊޠใ͕ͳ͚ΕࣗͰ࡞Ε͍͍ ❖ MDN wiki ͳͷͰࣗ༝ʹຊޠهࣄΛ࡞ΕΔ ❖
ͪΖΜٕज़໘ͰษڧʹͳΔ ❖ ༁ = ਫ਼ಡ͢Δ͏ͪʹ࣍ୈʹӳޠ͕ා͘ͳ͘ͳΔ
None
1. Localization ❖ MDN (Browser JS API, Security, CSS) ❖
Mozilla Security Blog ຊޠ൛ ❖ webappsec-specjp
“Contribute to Web” 2. Filing Issues - Node
2. Filing Issues - Node ಥવͰ͕͢͜͜ͰΫΠζͰ͢ ࣍ͷίʔυͷ࣮ߦ݁ՌԿͰ͠ΐ͏͔ʁ ʢ࣮ߦڥɿNode v8.3.0ʣ
// quiz1.js class Base {} class Derived extends Base {
hi() { console.log("hi"); } } const d = new Derived(); d.hi();
$ node quiz1.js hi
// quiz2.js class Derived extends Buffer { constructor(n) { super(n);
} hi() { console.log("hi"); } } const d = new Derived(8); d.hi();
$ node quiz2.js /Users/hh/quiz2.js:14 d.hi(); ^ TypeError: d.hi is not
a function
2. Filing Issues - Node ❖ ͜Ε͕͢͞ʹόάͰ… ❖ GitHub Ͱ
Issue ใࠂ ❖ Node ͷ Nightly build Ͱ࠶ݱ͢Δ͜ͱΛ֬ೝ ❖ Issue ͷӳจߦΛॻ͘ͷʹ 30 ͙Β͍Μͩ ❖ ಡΉͷͱॻ͘ͷͱ·ͨผ…
None
2. Filing Issues - Node ❖ 1:44 ʹ Issue ใࠂ
❖ 2:50 ʹ࠷ॳͷฦ৴ + Self assigned ❖ 3:12 ʹमਖ਼Ҋͷύον͕ϦϯΫ͞ΕΔʢ͍ʂʣ
2. Filing Issues - Node ❖ ࣌ظతʹ Node v5 ͔Β
v6 ͷసظ ❖ new Buffer ΛΊͯ Buffer.from ʹ͢ΔͳͲ ❖ ͜ͷमਖ਼͕ master ʹೖΔ͜ͱͳ͔͕ͬͨɺ Buffer Λ extends ͢Δ͜ͱكʁ
“Contribute to Web” 3. Filing Issues - Browser
3. Filing Issues - Browser ❖ ͋Δ TweetDeck Λ Firefox
Ͱ͍ͬͯͨΒ ❖ ຊޠೖྗͰࢠԻͱԻ͕࿈݁͞Εͳ͍ʂ
None
3. Filing Issues - Browser ❖ ະ֬ఆจࣈ͕ textarea.value ͳͲʹೖͬͨ߹ͷ ಈ࡞
WHATWG Ͱະఆٛ textarea.addEventListener("input", _evt => { textarea.value = textarea.value; }); ࣮ࡍʹͱͳ͍ͬͯͨͱਪଌ͞ΕΔٖࣅίʔυ front side ϏϧυϓϩηεͷෳࡶԽʹΑͬͯฆΕࠐΜ͔ͩʁ
3. Filing Issues - Browser ❖ TweetDeck νʔϜଆͷςετෆ͕ݪҼ ❖ ৄࡉɿͣͬ͘هɿ
TweetDeckͰFirefox͔Β ຊޠ͕ೖྗͰ͖ͳ͘ͳ͍ͬͯΔ݅ ❖ Gecko ͱ Twitter ͷ։ൃऀ͕ΓऔΓ͢Δڳ ͳల։
3. Filing Issues - Browser ❖ ཤྺॻΛ HTML + CSS
Ͱ࡞͍ͬͯͨͱ͖ͷ͜ͱ ❖ <li> ͱ Flexbox ͕ೖΕࢠʹͳͬͨϖʔδΛ Chrome Ͱදࣔ͢ΔͱҐஔ͕͓͔͘͠ͳΔ ❖ Issue 579601: li::marker with flexbox is placed on a slipped position ❖ ·ͩະमਖ਼
None
͜͜·ͰΛৼΓฦͬͯ ❖ JavaScript ʹؔ࿈͢Δ OSS contribution ͷΠϕϯ τ͡Όͳ͔ͬͨͷʁ ❖ Πϕϯτͷझࢫͱ߹͍ͬͯͳ͍͡ΌͶ͔͑
͜͜·ͰΛৼΓฦͬͯ ❖ JavaScript ʹؔ࿈͢Δ OSS contribution ͷΠϕϯ τ͡Όͳ͔ͬͨͷʁ ❖ Πϕϯτͷझࢫͱ߹͍ͬͯͳ͍͡ΌͶ͔͑
❖ ͔͜͜Β͕ຊͰ͢
“Browser ͷ JS API ʹܞΘͬͨ”
“Contribute to Web” 4. Browser Inside
4. Browser Inside ❖ Gecko inside #7ɿύονΛ࡞Ζ͏ϋϯζΦϯ ❖ Gecko (Firefox)
ͷίϛολʔͱҰॹʹύονΛ ࡞ΔϋϯζΦϯ ❖ Web Animations API ʹ͓͍ͯΞχϝʔγϣϯͷ ҠಈํΛ੍ޚ͢Δ࣮ͷ͓ख͍ ❖ ͪΖΜ Bugzilla ͰӳޠͰίϛϡχέʔγϣϯ
࣮ࡍʹॻ͍ͨ C++ ίʔυʢ7 ߦʣ ͪΖΜطʹ͓હཱ͍͍͍ͯͯͨͩͯͨ͠
࣮ࡍʹॻ͍ͨ JS ͷ ςετίʔυʢ56 ߦʣ
4. Browser Inside ❖ Browser ͓ͦΒ͘ੈքͰҰ൪ڊେͳ C++ ͷ OSS ϓϩδΣΫτͳͷͰʁʢݸਓͷҙݟʣ
❖ ੈքதͷਓ͕͍ͬͯΔͷʹࣗͷίʔυ͕ ΘΕ͍ͯΔͬͯͪΐͬͱخ͍͠
4. Browser Inside ❖ ΠϕϯτޙԿݸ͔νέοτΛΞαΠϯͯ͠ ͍͍ͨͩͨΓ ❖ JS ͷςετίʔυΛϦϑΝΫλϦϯάͨ͠Γ ❖
͏গ͍͠͠ C++ ͷίʔυΛॻ͍ͨΓ ❖ e.g. Ξχϝʔγϣϯؔ࿈ͷ devtools ͷόάमਖ਼
4. Browser Inside ❖ Firefox DevTools ͷόάमਖ਼ ❖ DevTools
HTML (XML) + CSS + JS ❖ ࣮ Firefox DevTools ʹ React ͕࠾༻͞Ε͍ͯΔ
None
“Contribute to Web” Wrap up
Wrap up ❖ ͬͺΓ OSS ָ͍͠ʂ ❖ web ք۾Ͱͷ “OSS”
ͱ͍͏ͱࣄͰ͍ͬͯΔ ϥΠϒϥϦɾݴޠʹറΒΕ͕ͪ ❖ web dev ͳΒ Browser ʹΛ͚͍͖͍ͯͨ ❖ ීஈͷ։ൃͰग़ձͬͨόάੵۃతʹใࠂ͍ͨ͠