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