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
510
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
69
Cool Math for Hot Music 輪読会 Sec.19 Part 2
hashedhyphen
0
70
Cool Math for Hot Music 輪読会 Sec.19
hashedhyphen
0
45
Cool Math for Hot Music 輪読会 Sec.16 Part 2
hashedhyphen
0
96
Cool Math for Hot Music 輪読会 Sec.16 Part 1
hashedhyphen
0
170
Cool Math for Hot Music 輪読会 Sec.5
hashedhyphen
0
65
『プロフェッショナル SSL/TLS 読書会』 第 10 章
hashedhyphen
1
420
クラウド型電子カルテシステムと Microservices への歩み
hashedhyphen
3
1.2k
『プロフェッショナル SSL/TLS 読書会』 第 6 章
hashedhyphen
0
570
Other Decks in Technology
See All in Technology
積み上げられた技術資産と向き合いながら、プロダクトの信頼性をどう守るか
plaidtech
PRO
0
1.1k
コードの考古学 〜労務システムから発掘した成長の糧〜
kenta_smarthr
1
1.3k
継続戦闘能⼒
sansantech
PRO
0
230
Cursor Meetup Tokyo
iamshunta
5
1.3k
GoogleのAI Agent
shukob
0
180
Redmineの意外と知らない便利機能 (Redmine 6.0対応版)
vividtone
0
1.3k
kintone開発組織のDevOpsへの移り変わりと実践
ueokande
1
250
Data Hubグループ 紹介資料
sansan33
PRO
0
1.8k
NW運用の工夫と発明
recuraki
1
830
セキュリティSaaS企業が実践するCursor運用ルールと知見 / How a Security SaaS Company Runs Cursor: Rules & Insights
tetsuzawa
1
1.3k
JavaのMCPサーバーで体験するAIエージェントの世界
tatsuya1bm
0
150
CSS polyfill とその未来
ken7253
0
150
Featured
See All Featured
The Cost Of JavaScript in 2023
addyosmani
49
8.2k
Fontdeck: Realign not Redesign
paulrobertlloyd
84
5.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
BBQ
matthewcrist
88
9.7k
Unsuck your backbone
ammeep
671
58k
Statistics for Hackers
jakevdp
799
220k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
Become a Pro
speakerdeck
PRO
28
5.4k
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 ʹΛ͚͍͖͍ͯͨ ❖ ීஈͷ։ൃͰग़ձͬͨόάੵۃతʹใࠂ͍ͨ͠