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
560
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
530
Houdini – Demystifying CSS
surma
3
300
Progressive Web Apps – Mobile has natively come to the Web
surma
5
280
The Glorious Era of HTTP/2
surma
1
80
Instant Loading
surma
4
1.2k
HTTP/2 101
surma
5
470
What if there isn’t?
surma
0
72
What if there isn’t?
surma
2
150
The Web is a Contender
surma
0
110
Other Decks in Technology
See All in Technology
サービス開発を前に進めるために 新米リードエンジニアが 取り組んだこと / Steps Taken by a Novice Lead Engineer to Advance Service Development
nologyance
0
180
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
380
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
データベース研修 分析向けSQL入門【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
110
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.4k
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
950
サービスの持続的な成長と技術負債について
siva_official
PRO
10
4.4k
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
CTOから見た事業開発とプロダクト開発 / My Perspective on Business and Product Development as CTO
keisuke69
4
960
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
Featured
See All Featured
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
29
2.5k
What the flash - Photography Introduction
edds
65
11k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
GraphQLとの向き合い方2022年版
quramy
36
13k
Designing for humans not robots
tammielis
247
25k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
5 minutes of I Can Smell Your CMS
philhawksworth
200
19k
Imperfection Machines: The Place of Print at Facebook
scottboms
262
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
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