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
Houdini Breakout Session
Search
Surma
November 12, 2016
Technology
4
600
Houdini Breakout Session
Chrome Dev Summit 2016
Surma
November 12, 2016
Tweet
Share
More Decks by Surma
See All by Surma
Know thy buzzwords: HTTP/2
surma
1
540
Houdini – Demystifying CSS
surma
3
310
Progressive Web Apps – Mobile has natively come to the Web
surma
5
290
The Glorious Era of HTTP/2
surma
1
86
Instant Loading
surma
4
1.2k
HTTP/2 101
surma
5
480
What if there isn’t?
surma
0
76
What if there isn’t?
surma
2
160
The Web is a Contender
surma
0
120
Other Decks in Technology
See All in Technology
AndroidXR 開発ツールごとの できることできないこと
donabe3
0
110
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
『衛星データ利用の方々にとって近いようで触れる機会のなさそうな小話 ~ 衛星搭載ソフトウェアと衛星運用ソフトウェア (実物) を動かしながらわいわいする編 ~』 @日本衛星データコミニティ勉強会
meltingrabbit
0
120
明日からできる!技術的負債の返済を加速するための実践ガイド~『ホットペッパービューティー』の事例をもとに~
recruitengineers
PRO
3
100
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
2.5Dモデルのすべて
yu4u
2
610
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
事業継続を支える自動テストの考え方
tsuemura
0
300
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
Featured
See All Featured
Docker and Python
trallard
44
3.3k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
A Philosophy of Restraint
colly
203
16k
The Cult of Friendly URLs
andyhume
78
6.2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Why Our Code Smells
bkeepers
PRO
335
57k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Transcript
Houdini
Houdini
Typed Object Model
Typed Object Model $('#element').styleMap .set('opacity', new CSSNumberValue(0.5)); $('#element').styleMap .set('height', new
CSSSimpleLength(50, 'px'));
Typed Object Model $('#element').styleMap .set('height', new CSSSimpleLength(50, 'px')); $('#element').styleMap .get('height').value;
// 50 $('#element').styleMap .get('height').type; // ‘px’
Typed Object Model $('#element').styleMap .set('height', new CSSCalcLength('50vh - 20px')); $('#element').styleMap.get('height').vh;
// 50 $('#element').styleMap.get('height').px; // -20
Typed Object Model $('#element').styleMap .set("height", new CSSCalcLength({ vh: 50, px:
-20, }));
Typed Object Model const h = new CSSSimpleLength(50, 'vh') .subtract(new
CSSSimpleLength(20, ‘px')); $('#element').styleMap.set('height', h);
Typed Object Model const h = new CSSSimpleLength(50, 'vh') .subtract(new
CSSSimpleLength(20, ‘px')); $('#element').styleMap.set('height', h); // h == calc(50vh - 20px);
None
Houdini
Houdini X AnimationWorklet
Animation Worklet
None
None
bit.ly/best-effort-scroll position: static;
bit.ly/best-effort-scroll position: static; position: fixed; + JS transform
Animation Worklet <style> :root { animator-root: parallax; } .bg {
animator: parallax; } </style> <div class='bg' style='--parallax-rate: 0.2'></div> <div class='bg' style='--parallax-rate: 0.5'></div> Experimental
Animation Worklet registerAnimator('parallax', class ParallaxAnimator { static inputProperties = ['transform',
'--parallax-rate']; static outputProperties = ['transform']; static rootInputScroll = true; animate(root, children) { const scrollTop = root.scrollOffsets.top; children.forEach(background => parallaxMath(elem, background.styleMap.get('--parallax-rate'))); } }); Experimental
None
Houdini
Paint Worklet
Paint Worklet <div id="myElement"></div> <style> #myElement { --image: url('#someUrlWhichIsLoading'); background-image:
paint(image-with-placeholder); } </style> Experimental
Paint Worklet <script> document.registerProperty({ name: '--image', syntax: '<image>' }); window.paintWorklet.import('paintworklet.js');
</script> Experimental
Paint Worklet registerPaint('image-with-placeholder', class { static get inputProperties() { return
['--image']; } paint(ctx, geom, properties) { // ... } }); Experimental
Paint Worklet paint(ctx, geom, properties) { const img = properties.get('--image');
switch (img.state) { case 'ready': ctx.drawImage(img, 0, 0, geom.width, geom.height); break; case 'pending': drawMountains(ctx); break; case 'invalid': default: drawSadFace(ctx); } } Experimental
None
bit.ly/houdini-updates
None