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
630
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
550
Houdini – Demystifying CSS
surma
3
320
Progressive Web Apps – Mobile has natively come to the Web
surma
5
290
The Glorious Era of HTTP/2
surma
1
93
Instant Loading
surma
4
1.3k
HTTP/2 101
surma
5
490
What if there isn’t?
surma
0
83
What if there isn’t?
surma
2
180
The Web is a Contender
surma
0
130
Other Decks in Technology
See All in Technology
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
360
標準技術と独自システムで作る「つらくない」SaaS アカウント管理 / Effortless SaaS Account Management with Standard Technologies & Custom Systems
yuyatakeyama
3
1.3k
AI導入の理想と現実~コストと浸透〜
oprstchn
0
120
How Community Opened Global Doors
hiroramos4
PRO
1
130
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1k
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
240
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
490
Amazon S3標準/ S3 Tables/S3 Express One Zoneを使ったログ分析
shigeruoda
5
580
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
6
2.6k
Oracle Audit Vault and Database Firewall 20 概要
oracle4engineer
PRO
3
1.7k
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
0
210
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
350
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Side Projects
sachag
455
42k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Speed Design
sergeychernyshev
32
1k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
Building Applications with DynamoDB
mza
95
6.5k
Writing Fast Ruby
sferik
628
62k
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