Skip to content

Instantly share code, notes, and snippets.

@evangoer
Created March 23, 2011 18:00
Show Gist options
  • Save evangoer/883593 to your computer and use it in GitHub Desktop.
Save evangoer/883593 to your computer and use it in GitHub Desktop.
# YUI 3 Cookbook Table of Contents
## YUI BASICS
### Put YUI on the Page
* Load YUI
* Load debug builds
* Load locally hosted builds
* Load a YUI 2 widget
* Load Gallery components
* Load custom files
* Load submodules for the smallest footprint
* Load YUI into a frame
* On-demand module loading
* Predictive module loading on user interaction
* Handle errors for modules that are not loaded
* Fallback for modules that are not loaded
* Synchronous loading
* Add custom loader metadata
* Explore the use() callback's second argument
### Access & Modify the DOM
* Get element references
* Get and modify element properties
* Work with element collections
* Create new elements
* Position elements
* Learn expert DOM tips and tricks
### UI Effects & Interactions
* Hide an element
* Fade an element in/out
* Move an element across the page
* Resize an element by clicking a "minimize" icon
* Dragging an element
* Drag-and-drop list reordering
- Simple plugin
- dd class
- Complex plugin
- dd plugin
* Apply styles with class management | Matt
### Events
* Respond to user actions
* Respond to page lifecycle events
* Respond to other kinds of events
* Set scope/context for event handler (Y.bind)
* Create your own "synthetic events"
- Handle click & double click simultaneously (on same element)
* Bring HTML5 event to older browsers (synthetic event)
* Create a new gesture: dbl-flip-pike
* Event bubbling and delegation techniques
- manual
- selector filtering with event-delegate
- function filtering with event-delegate
* Ways to detach events (50 ways to leave your hover)
* Group subscriptions for detach
### AJAX
* Add/update/remove content in an element
* Add new elements with AJAX
* Get data asynchronously
* Get JSON content using script nodes (JSONP)
* YQL
* IO XDR
* Handling markup vs JSONP
* Build a custom IO transport (NodeJS)
* Build a custom IO transport (on the client)
* Submit data to a server w/form serialization
* Uploading a file
* Error handling during data transport
## CSS
* Normalize Browser Inconsistencies (Reset, Base, Fonts)
- Reset all page styles
- Rebuild uniform base styles
- Apply font treatments
* Layout Content (Grids)
- Display content in CSS-based Grids
## DATA MANAGEMENT
* Datasource, Datatype, DataSchema
- Querying Data using Datasource
+ Get
+ IO
+ Local
+ Custom Function
- Caching and Polling from a remote source
- Creating Schemas for different data structures
+ XML
+ JSON
+ Delimited Text
- Parsing Data returned by a Datasource
- Normalizing Data
* Work with User Data
- Forms (validation, etc.)
- Read and write user cookies
- Store data on the client
* THC's Top 3 YQL coolest features (aggregating data ?)
* 5 data type recipes
## WIDGETS
* Create a Twitter status widget that doesn't break when Twitter is down
* Overlays
- Creating a Basic Overlay
- Adding DD Functionality to an Overlay
- Overlay with Remote Content
- Styling an Overlay
* Sliders
* TabView
* Charts
- Simple Chart
- Customized Simple Chart
- Complex Chart
- Build a Chart Application
* Graphics (drawing)
* AutoComplete
- Attach an AutoComplete List widget to an input field
- Fetch results from a local DataSource
- Fetch results from a local function
- Fetch results from a remote DataSource
- Use a result filter
- Create a custom result filter
- Create a custom result formatter
* TabView
* Separate strings for L10N
* Bidi your widget
* Creating a Tooltip (overlay)
* Create a Lightbox (overlay)
* Target: 5 recipes for each widget
* Mobile
## UTILITIES
* Language Helpers
- Detect a variable's type
- Guarantee object value type - what does this mean? I think this means "type validation"
- Iteration
+ Iterate over an Array (Y.Array.each/some)
+ Iterate over an Object (Y.Object.each/some)
+ Array Collections (?)
+ NodeList
- Use Array extras
- Use Object extras
- Dynamic string substitution (y.substitute/Y.Lang.sub)
- Templating with HTML_PARSER/Y.Substitute
* Application Development
- Manage history and back button
- HTML5 history with custom URLs
- Support multiple languages and locales
- Component Manager
* Form Utilities
- Checkbox Groups
- Form
- FormManager
- FormValidator
- Nav keys
- Textarea Tab Control
- Use the valueChange event for more reliable input field change notifications
* Miscellaneous
- YUI 3 Uploader
## UNIVERSAL ACCESSIBILITY
* Progressive Enhancement
- Preventing the flash of unstyled content
- Building custom controls
+ Working with the grain
+ Recipe/Solution: Custom checkboxes
* ARIA
- ARIA Overview
+ Explanation of the problem
- Applying roles, states and properties using YUI3
- ARIA use cases
+ Forms: Building more accessible forms
+ Page layout: Using YUI3 grids with ARIA
+ Widgets
+ Keyboard access
* Keyboard access
- Keyboard Navigation:
+ Overview:
* Improving navigation by reducing tab stops
* The importance of styling focus
+ Introduction to Focus Manager
+ Recipe/Solution: Using the FocusManager to build an accessible toolbar
+ Recipe/Solution: Using the FocusManager to build an accessible menu button
- Keyboard Shortcuts:
+ Overview: the importance of keyboard shortcuts
+ Keyboard shortcuts made easy: Introduction to "key" events in YUI3
+ Recipe/Solution: Building an accessible dialog
* Using the "key" event
* Enforcing modality via the "focus" event
- Device Independence
+ Overview: Common problems
+ Device Independent Events: focus and click
* How focus and blur are more robust in YUI3
+ Recipe/Solution: Building a list control with sub controls that appear in response to both :hover and :focus
- Performance
+ Deferring features until a control is activated
- Touch navigation
- Other mobile best practices
## INFRASTRUCTURE
* Organize your code
* Write reusable code
* Class Management (Attribute, Base, Widget, Plugin, Extension)
- Work with class hierarchies
- Create a base-based component (state in base, attribute use)
- Write your own widget
- Write your own plugin
- Write your own extension
- Skin widget X
- Widget parent/child
- Override renderUI() for your own view
- Plugin that messes with the host / leaves host alone
- Y.doBefore / Y.doAfter
- How to listen for / subscribe to a method
* Build YUI (i.e., builder)
* Build custom YUI Modules
## PROFESSIONAL TOOLS
* Enable debug logging to the Console
* Write a unit test
* Organize unit tests into suites
* Testing event handlers / event simulation
* Mocking objects
* Async test using wait
* Display test result in Reporter
* Submitting test results to the server
* Test swarm / Selenium / CI
* Pre-commit testing / Yeti
* Testing on mobile devices
* Compress your code
- Web interface
- Command line
- Write compressible code
* Document code
## CONTRIBUTE
* Submit a bug
* Request a feature
* Work with the latest build
* Determine release content
* Determine ticket status
* Set up Git environment
* Push code changes to GitHub
* Contribute a bug fix/patch
* Publish a component to Gallery
* Become more active in the YUI community
Copy link

ghost commented Mar 23, 2011

Oh bring it! Based on the TOC, I can't wait. :)

@evangoer
Copy link
Author

Awesome! I'm certainly open to suggestions on additions & modifications. Also keep an eye out in the yuilibrary forums for future raw sample chapters & sections.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment