Created
March 23, 2011 18:00
-
-
Save evangoer/883593 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| # 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 | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.