آشنایی با تکنولوژی جدید houdini
TRANSCRIPT
![Page 1: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/1.jpg)
MOJDE PAJANG
Houdini Robust Tool
![Page 2: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/2.jpg)
Introduction
![Page 3: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/3.jpg)
CSS Update Speed
Add New Feature to CSS
Propose
Feature
Write
specification
Browsers
Vendors
Implement
Wait for
Browsers
Adoption
Use Feature!
Display : flex
Total Time = Years
![Page 4: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/4.jpg)
JS Update Speed
Add New Feature to JS
Propose
Feature
Write a
Polyfill /
Transpiler
plugin
Use Feature!
Total Time = Days
![Page 5: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/5.jpg)
What is Polyfill
•A polyfill is a browser • fallback, made in javascript
A polyfill is a browser fallback,made in javascript
![Page 6: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/6.jpg)
Start Polyfilling CSS
As a developer you only have access to DOM and CSSOM
![Page 7: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/7.jpg)
What is Houdini
![Page 8: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/8.jpg)
Houdini
Houdini APIs
![Page 9: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/9.jpg)
CSS properties and values API
Definition Pattern : --*
Ex : --main-color: #06c;
CSS properties and values API
![Page 10: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/10.jpg)
CSS properties and values API
• Make custom Properties more useful by adding type
– Ex: Add transition and animate custom properties
![Page 11: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/11.jpg)
Worklets
Worklets are similar to web workers
1. can be invoked at various points in the rendering pipeline
2. is independent of the main thread
Worklets
![Page 12: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/12.jpg)
CSS Layout API
This API give developers method named
registerLayout
Syntax: registerLayout(‘name’,class)
CSS Layout API
![Page 13: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/13.jpg)
CSS Layout API
– Enables developers to write their own layout modules
method name class
![Page 14: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/14.jpg)
CSS Layout API
Just write this on your CSS code
![Page 15: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/15.jpg)
ChromeCanary
o Paint APIo Typed OMo Compositor Worklet
![Page 16: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/16.jpg)
Connect With
Ian Kilpatrick@bfgeek
Surma@DasSurma
![Page 17: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/17.jpg)
RESOURCES AND LINKS
• https://github.com/w3c/css-houdini-drafts, W3CThe latest public version of all Houdini drafts
• https://github.com/GoogleChrome/houdini-samples, GitHubCode examples showcasing and experimenting with possible APIs
![Page 18: آشنایی با تکنولوژی جدید Houdini](https://reader033.vdocuments.net/reader033/viewer/2022052207/5885d3001a28ab42028b6d91/html5/thumbnails/18.jpg)
Thank’s for your time