2. 3/7/13 HTML5-TX - Google IO 2012
Buzzwords and Hot Topics
· HTML5
· Javascript without Libraries
· Javascript libraries
- localstorage: lawnchair
- data visualization: d3
- mv**: Backbone, Angular
- js-driven feature detection: modernizr
· Accessibility
· Responsive Design
· Progressive Enhancement vs Graceful degradation
· Grunt
· Browser Versions are dead!
#html5tx 2/13
localhost:9005/presentation-output.html#1 2/13
3. 3/7/13 HTML5-TX - Google IO 2012
Concepts Re-Education
Lets get controversial
localhost:9005/presentation-output.html#1 3/13
4. 3/7/13 HTML5-TX - Google IO 2012
Browser Versions are dead!
Provide the best experience for each environment
· Optimize based on capabilities rather than on linear scale
- Embrace browsers differences
- Enforce feature detection
#html5tx 4/13
localhost:9005/presentation-output.html#1 4/13
5. 3/7/13 HTML5-TX - Google IO 2012
Tools
localhost:9005/presentation-output.html#1 5/13
6. 3/7/13 HTML5-TX - Google IO 2012
Tools
· Testing IE - Modern IE
· Creating Mockups - Foundations , Bootstrap
· CSS Preprocessor - Compass
· Live reload CSS, JS - Live Reload
· Developer Chrome Version - Canary
· CSS Lint - CSS Lint
· JS Lint - JS Lint
· Text Editor - Sublime Text 2
· Task-based build tool - Grunt
· Browser Capabilities - Can I use
· Should that be a div, span or...? - Which Element
#html5tx 6/13
localhost:9005/presentation-output.html#1 6/13
8. 3/7/13 HTML5-TX - Google IO 2012
Granny's cookbook!
· Mozilla Developer Network - link
· Yahoo Developer Network - link
· Performance
- YSlow, Best Practices
- High Performance Networking in Google Chrome
· Ajax Accessible and Crawlable Applications - link
#html5tx 8/13
localhost:9005/presentation-output.html#1 8/13
9. 3/7/13 HTML5-TX - Google IO 2012
Assorted Thoughts
· Push state to pretend to change url
· RequireJS used for dependencies
· As you grow you need to change backend to scale, but not the front end
· Only update partials
· Laptops and desktops for creating, phone and tablets for consuming
· Responsive web is more than squishy
· Foundation or Bootstrap for prototyping
· CSS preprocessors, scss, sass, or less
· SMACSS Scalable and Modular Architecture of CSS book
· Embrace unpredictability.
· Put comments inside function for debugging instead of on top code
//comment
· Feature Testing vs Browser Sniffing (user agent detection for example)
#html5tx 9/13
localhost:9005/presentation-output.html#1 9/13
10. 3/7/13 HTML5-TX - Google IO 2012
Community Project
http://a11yproject.com/
A11Y Project (/)
The Accessibility Project
A community-driven effort to make web accessibility easier.
Learn more (./about.html) Contribute on Github (http://github.com/a11yproject/a11yproject.com)
Latest Posts
How–to: Use Quick Tip: Never remove Quick Test: Check How-to: Future proof
rl=apiain
oe"plcto" CSS outlines Comprehension Level your accessibility
(/posts/how-to-use- (/posts/never-remove- (/posts/check- efforts. (/posts/future-
application-role) css-outlines) comprehension-level) proof-your-accessibility)
NEVER use r l = p l c t o
oeapiain Removing CSS outlines without Using these tools you can check Ways to make your accessibility
on a widely containing element proper fallbacks can make it the reading level of your written effort as future proof as possible.
such as < o y if your page
bd> impossible to navigate your site content.
#html5tx 10/13
localhost:9005/presentation-output.html#1 10/13