Hacking with YUI 3 - Open Hack Day 2011

2,053 views
2,016 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,053
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Hacking with YUI 3 - Open Hack Day 2011

  1. 2. Using YUI to get things done @knutties – Web Developer
  2. 6. What is YUI? <ul><li>YUI 3 – Open source Javascript/CSS library </li></ul><ul><li>Highly modular and extensible </li></ul><ul><li>Wonderfully documented </li></ul><ul><li>Javascript library with package management </li></ul><ul><li>Lets you do a lot with very little code </li></ul><ul><ul><li>Very suitable for hacks </li></ul></ul>
  3. 7. How can you hack with YUI? <ul><li>Build and manipulate the user-interface </li></ul><ul><ul><li>Layouts </li></ul></ul><ul><ul><li>Styling </li></ul></ul><ul><ul><li>Widgets </li></ul></ul><ul><ul><li>Utilities </li></ul></ul><ul><li>Work with data </li></ul><ul><ul><li>Read </li></ul></ul><ul><ul><li>Process </li></ul></ul><ul><ul><li>Write </li></ul></ul>
  4. 8. Layouts – YUI 3 Grids <ul><li>Different layouts with ready-made classes </li></ul>CSS Class Description .yui3-u Fits width, unless width is specified .yui3-u-1 Fits 100% width .yui3-u-1-2 Fits 1/2 of available width .yui3-u-1-3 Fits 1/3 of available width .yui3-u-2-3 Fits 2/3 of available width .yui3-u-1-4 Fits 1/4 of available width .yui3-u-3-4 Fits 3/4 of available width
  5. 9. Consistent Styling <ul><li>CSS Reset </li></ul><ul><ul><li>Remove default browser styling </li></ul></ul><ul><li>CSS Base </li></ul><ul><ul><li>Consistent styles for common HTML elements </li></ul></ul><ul><li>CSS Fonts </li></ul><ul><ul><li>Consistent fonts across browsers </li></ul></ul><ul><li>Can be applied globally/contextually </li></ul>
  6. 10. Widgets <ul><li>Auto-complete </li></ul><ul><li>Charts </li></ul><ul><li>DataTable </li></ul><ul><li>Dial </li></ul><ul><li>Overlay </li></ul><ul><li>Rich Text Editor </li></ul><ul><li>Slider </li></ul><ul><li>Tab-view </li></ul>
  7. 11. Utilities <ul><li>Core </li></ul><ul><ul><li>Node , Nodelist – collect, create and operate on DOM nodes </li></ul></ul><ul><ul><li>Event – simplified event handling, custom events </li></ul></ul><ul><li>Async-queue </li></ul><ul><li>Drag-and-Drop </li></ul><ul><li>Animations </li></ul><ul><li>Caching (offline included) </li></ul><ul><li>History management </li></ul>
  8. 12. Work with data - Read <ul><li>Local sources – javascript arrays/objects </li></ul><ul><li>IO </li></ul><ul><ul><li>Plain old XHR, with flash support for X-Domain </li></ul></ul><ul><li>JSONP </li></ul><ul><li>YQL </li></ul><ul><ul><li>Easy way to access plethora of APIs from Javascript </li></ul></ul><ul><ul><li>Very powerful abstraction </li></ul></ul>
  9. 13. Work with data - Write <ul><li>YQL </li></ul><ul><ul><li>Insert/update queries </li></ul></ul><ul><li>Storage-Lite by Ryan Grove </li></ul><ul><ul><li>Local key-value store </li></ul></ul><ul><ul><li>Supports auto-serialization/de-serialization of javascript objects </li></ul></ul><ul><ul><li>Works seamlessly across browsers </li></ul></ul><ul><li>Enables building completely client-side applications </li></ul><ul><ul><li>I don't need wifi :-) </li></ul></ul>
  10. 14. What is cool about YUI? <ul><li>On GitHub – Fork away </li></ul><ul><li>Contribute your modules to the gallery </li></ul><ul><li>Dav Glass </li></ul><ul><ul><li>YUI 3 on NodeJS </li></ul></ul><ul><ul><li>Add YUI 3 to your greasemonkey script </li></ul></ul><ul><li>You are free to use jQuery :-) </li></ul>
  11. 15. That is all !

×