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
5分で紹介する生成AIエージェントとAmazon Bedrock Agents / 5-minutes introduction to generative AI agents and Amazon Bedrock Agents
hideakiaoyagi
0
220
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
730
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
All you need to know about InnoDB Primary Keys
lefred
0
120
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
410
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.7k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
175
51k
Optimizing for Happiness
mojombo
376
70k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
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