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
300
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
QuickSight SPICE の効果的な運用戦略~S3 + Athena 構成での実践ノウハウ~/quicksight-spice-s3-athena-best-practices
emiki
0
260
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
230
ロールが細分化された組織でSREは何をするか?
tgidgd
1
200
AIの全社活用を推進するための安全なレールを敷いた話
shoheimitani
2
640
マーケットプレイス版Oracle WebCenter Content For OCI
oracle4engineer
PRO
3
980
Getting to Know Your Legacy (System) with AI-Driven Software Archeology (WeAreDevelopers World Congress 2025)
feststelltaste
1
180
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
10
130k
「Chatwork」のEKS環境を支えるhelmfileを使用したマニフェスト管理術
hanayo04
1
240
AIエージェントが書くのなら直接CloudFormationを書かせればいいじゃないですか何故AWS CDKを使う必要があるのさ
watany
18
7k
スタックチャン家庭用アシスタントへの道
kanekoh
0
110
クラウド開発の舞台裏とSRE文化の醸成 / SRE NEXT 2025 Lunch Session
kazeburo
1
450
TLSから見るSREの未来
atpons
2
240
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
RailsConf 2023
tenderlove
30
1.1k
Unsuck your backbone
ammeep
671
58k
The World Runs on Bad Software
bkeepers
PRO
69
11k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
Being A Developer After 40
akosma
90
590k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
How to train your dragon (web standard)
notwaldorf
96
6.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