Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
MOJDE PAJANG
Houdini Robust Tool
Introduction
CSS Update Speed
Add New Feature to CSS
Propose
Feature
Write
specification
Browsers
Vendors
Implement
Wait for
Browsers
A...
JS Update Speed
Add New Feature to JS
Propose
Feature
Write a
Polyfill /
Transpiler
plugin
Use Feature!
Total Time = Days
What is Polyfill
•A polyfill is a browser
•fallback, made in javascript
A polyfill is a browser fallback,
made in javascri...
Start Polyfilling CSS
As a developer you only have access to DOM and CSSOM
What is Houdini
Houdini
Houdini APIs
CSS properties and values API
Definition Pattern : --*
Ex : --main-color: #06c;
CSS properties and values API
CSS properties and values API
• Make custom Properties more useful by adding type
– Ex: Add transition and animate custom ...
Worklets
Worklets are similar to web workers
1. can be invoked at various points in the rendering pipeline
2. is independe...
CSS Layout API
This API give developers method named
registerLayout
Syntax: registerLayout(‘name’,class)
CSS Layout API
CSS Layout API
– Enables developers to write their own layout modules
method name class
CSS Layout API
Just write this on your CSS code
Chrome
Canary
o Paint API
o Typed OM
o Compositor Worklet
Connect With
Ian Kilpatrick
@bfgeek
Surma
@DasSurma
RESOURCES AND LINKS
• https://github.com/w3c/css-houdini-drafts, W3C
The latest public version of all Houdini drafts
• htt...
Thank’s for your time 
Upcoming SlideShare
Loading in …5
×

آشنایی با تکنولوژی جدید Houdini

515 views

Published on

آیا این اتفاق برای شما پیش آمده که بخواهید از یکی از قابلیت های CSS استفاده کنید ولی چون تمامی مرورگرها از آن پشتیبانی نمی کرده اند و یا بطور کامل از آن پشتیبانی نمی کرده اند از استفاده از آن قابلیت صرف نظر کرده اید. Houdini یکی از وظایف جدید W3C است که هدف نهایی آن از بین بردن این مسائل با معرفی APIها و ابزارهای جدید می باشد. اما این به چه معنا است؟ آیا این ایده خوب است ؟ و این چگونه به ما برنامه نویسان برای برنامه نویسی وب سایت ها کمک می کند؟

Published in: Education
  • Be the first to comment

  • Be the first to like this

آشنایی با تکنولوژی جدید Houdini

  1. 1. MOJDE PAJANG Houdini Robust Tool
  2. 2. Introduction
  3. 3. 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
  4. 4. JS Update Speed Add New Feature to JS Propose Feature Write a Polyfill / Transpiler plugin Use Feature! Total Time = Days
  5. 5. What is Polyfill •A polyfill is a browser •fallback, made in javascript A polyfill is a browser fallback, made in javascript
  6. 6. Start Polyfilling CSS As a developer you only have access to DOM and CSSOM
  7. 7. What is Houdini
  8. 8. Houdini Houdini APIs
  9. 9. CSS properties and values API Definition Pattern : --* Ex : --main-color: #06c; CSS properties and values API
  10. 10. CSS properties and values API • Make custom Properties more useful by adding type – Ex: Add transition and animate custom properties
  11. 11. 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
  12. 12. CSS Layout API This API give developers method named registerLayout Syntax: registerLayout(‘name’,class) CSS Layout API
  13. 13. CSS Layout API – Enables developers to write their own layout modules method name class
  14. 14. CSS Layout API Just write this on your CSS code
  15. 15. Chrome Canary o Paint API o Typed OM o Compositor Worklet
  16. 16. Connect With Ian Kilpatrick @bfgeek Surma @DasSurma
  17. 17. RESOURCES AND LINKS • https://github.com/w3c/css-houdini-drafts, W3C The latest public version of all Houdini drafts • https://github.com/GoogleChrome/houdini-samples, GitHub Code examples showcasing and experimenting with possible APIs
  18. 18. Thank’s for your time 

×