Slide 1
Slide 1 text
Web Recap
#io19jp
#io1pjp 2019/5/18 Jxck
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
3
Lazy Loading img/iframe
![]()
![]()
![]()
Slide 4
Slide 4 text
4
Slide 5
Slide 5 text
5
Portals
Slide 6
Slide 6 text
6
Slide 7
Slide 7 text
7
Singned HTTP Exchanges
Slide 8
Slide 8 text
8
Project Fugu 48
Slide 9
Slide 9 text
9
Close the Gap with Native
● God 7
○ Writable Files API
○ Badging API
○ Wake Lock API
○ Shape Detection API
○ Periodic Background Sync
○ Contact Picker API
● Graduated
○ Web Share API
● Students
○ https://bugs.chromium.org/p/chromium/issues/list?q=label:Proj-Fugu
Slide 10
Slide 10 text
New JS Features
10
Slide 11
Slide 11 text
class field
11
class Counter {
constructor() {
this.count = 0
}
increment() {
this.count ++
}
display() {
console.log(this.count)
}
}
class Counter {
count = 0
increment() {
this.count ++
}
display() {
console.log(this.count)
}
}
Slide 12
Slide 12 text
Promise.{allSettled, any}
12
Promise.all: 一個でも失敗したら止まる
Promise.allSettled: とにかく全部やる
Promise.race: 一個成功/失敗したら止まる
Promise.any: 一個成功したら止まる
Slide 13
Slide 13 text
Intl
13
intl = new Int.RelativeTimeFormat('ja')
intl.format(-1, 'day') // "昨日"
intl = new Intl.DateTimeFormat('ja-JP-u-ca-japanese', {era:'long'})
intl.format(Date.now()) // "令和1年5月19日"
intl = new Intl.ListFormat('ja-jp')
intl.format(['あれ', 'これ']) // "あれ、これ"
intl = new Intl.ListFormat('en')
intl.format(['あれ', 'これ']) // "あれ and これ"
Slide 14
Slide 14 text
BigInt
14
// JS の Number の最大値
big = Number.MAX_SAFE_INTEGER // 9007199254740991 (2^53-1)
big = 9999999999999999999999999999n
big = BigInt("0xffffffffffffffff")
big = BigInt(Number.MAX_SAFE_INTEGER) ^ 2n
Slide 15
Slide 15 text
Googlebot to latest Chromium
15
Slide 16
Slide 16 text
Paint Holding
16
Slide 17
Slide 17 text
17
Google Fonts + font-display
大きなフォントを落としてる間、システムフォントで表示できる。
Slide 18
Slide 18 text
18
explanation
● Signed HTTP Exchange
○ https://blog.jxck.io/entries/2018-12-01/signed-http-exchanges.html
● JS Private Field
○ https://blog.jxck.io/entries/2019-03-14/private-class-field.html
● Web Font display: swap
○ https://blog.jxck.io/entries/2017-12-06/font-display.html
● Portal
○ https://mozaic.fm
○ https://labs.jxck.io/portals
● Lazyloading
○ https://blog.jxck.io
○ http://labs.jxck.io/lazyload/
Slide 19
Slide 19 text
Jack
thanks