HTML5 Hacking - Yahoo! Open Hack Day

Editor's Notes

1. This presentation is geared towards hackers preparing for a hack day event. \nI’ve glossed over some important HTML5 features that may not be as useful in a 24 hour hack period.\nI’m also not worried about Internet Explorer in this presentation as hackers will typically build for webkit or firefox during this sprint.\n
2. With only 24 hours, you need to refine your scope.\nchoose what devices/browsers to support. (Safari/Chrome are good choices)\nDon’t use elements that are not supported or add to the hack (new HTML5 tags, some input types)\nUse elements that will save time and make your hack more impressive (local storage, CSS3, web workers)\n
3. Add display:block to new CSS files to render consistently\nIE doesn’t recognize these without javascript, but you’re not going to design a hack for IE6.\nNew tags provide semantic value, reduces need for divitis and classitis.\nhttp://caniuse.com/#cats=HTML5\n
4. add display:block to all but mark. Using these can make your CSS cleaner.\n
5. Generate a progress bar via the browser.\nsupported by Chrome and Opera.\nthe text will display in non-supported browsers.\n
6. While the new tags are great, they’re not going to help your hack much. \nThese new attributes are going to make your code and hack much more interesting\n\n
7. \n
8. supported in current versions of firefox, opera, safari, and chrome.\nnot supported in mobile except opera mobile\nyou can use getAttribute in IE, and mobile\n
9. support is spotty, who knows what IE will do.\nGreat example of combining with localstorage\nhttp://html5demos.com/contenteditable\n
10. HTML5 has introduced new form inputs that will significantly reduce the complexity of programming. \nStart using these today for better user interaction\nThey are backwards compatible\n
11. http://yaccessibilityblog.com/examples/forms/html5-form.html\nsome input types generate complex interactions, best supported in opera and webkit\nmobile phones change their keyboard layouts based on input type.\n
12. CSS3 provides significant improvement in performance\nCSS3 replaces images for reduced http requests\nCSS3 gradients, rounded corners, pseudo elements, fonts, shadows, animation, selectors\n
13. While the code isn’t difficult, the variations between browsers make it cumbersome to do yourself. Use online tools during hack day\nrounded corner generator: http://cssround.com/\ngradient generator: http://www.colorzilla.com/gradient-editor/ \n
14. Define your custom font face, pointing to the font files on your server.\nNow use them in your style sheets.\nLook for fonts that are free and allow embedding.\nhttp://www.google.com/webfonts easiest way to use custom fonts\n
15. Extra wrappers allow hooks for styles\n
16. We’ve use content=”.” in the past for self-clearing floats. \npseudo-elements can be given dimensions, backgrounds, borders, etc.\ngood tutorial http://css-tricks.com/14001-tabs-with-round-out-borders/\nstyles above are just an example of how this content can be modified. \n
17. trigger the gpu as well as cpu.\npros: much faster for animations\ncons: increased memory usage\ncss animation triggers it, not js animation.\n
18. http://www.htmlfivewow.com/slide45\nsupported in web kit and ios safari\n
19. http://www.htmlfivewow.com/slide43\n
20. \n
21. New video tag allows native display of videos without flash\ndifferent browsers support different file types, so there is some duplicated effort.\nthe next slide shows the events that can be monitored \n
22. you can use javascript to change the page based on these events. \nAdd captioning, change secondary module, surface context specific ads based on caption track...\nThink of it as an API to explore\nhttp://butterapp.org/\n
23. Audio playback as native function. Just like video, there are different formats for different browsers.\nHTML5 functionality for generating and analyzing audio is poorly supported\nhttps://dvcs.w3.org/hg/audio/raw-file/tip/webaudio/specification.html\njquery annotation http://paulirish.com/demo/annotate \n
24. Canvas is an empty container waiting to be manipulated by JavaScript\nDon’t use canvas for text. It’s not accessible at this point.\nCanvas is great for infographics, animation, visual elements, games \n
25. http://hakim.se/experiments/html5/wave/03/\nhttp://www.sinuousgame.com/\nhttp://www.html5rocks.com/en/tutorials/canvas/performance \n\n
26. Scalable Vector Graphics have been around for a while\nFlash is a form of SVG\nData is in the page’s DOM and there is better accessibility than canvas\ngood for data intensive animation\nhttp://svg-wow.org/photoAlbum/album.svg\n
27. HTML5 takes the best of the AJAX hotness and standardizes it.\nIncreased communication between browser and device\nApplication behavior standardized\n
28. File Reader is not supported in Safari\nChrome allows js to get info from device’s movement sensors\nChrome is the only browser to fully support file apis\nlook at file options if your hack uses android/chrome: http://www.htmlfivewow.com/slide10\n
29. http://hacks.mozilla.org/2009/07/working-smarter-not-harder/\nhttp://www.html5rocks.com/en/tutorials/workers/basics/#toc-usecases \n
30. http://www.xtranormal.com/watch/7991991/web-sockets-we-are-the-first\nbest support with Safari and Chrome. Firefox also supports it, but may require user permission\n\n\n
31. Hacker super feature!\nThis works great with the YUI MVC platform http://new.yuilibrary.com/yui/docs/app/app-todo.html\nCache needs to know what pages to save, single page sites are easier to support\nThis also helps site performance while still online\nhttp://hacks.mozilla.org/2010/01/offline-web-applications/\n
32. http://htmlui.com/blog/2011-08-23-5-obscure-facts-about-html5-localstorage.html\n
33. Geo specific customized content is a no-brainer.\nGo beyond the map\nLocal specific headlines, offers, dating, what else?\nGeolocation is the first device integration. Future: device movement, camera, battery?\n
34. https://developer.mozilla.org/en/DOM/window.onhashchange\nhttp://yuilibrary.com/yui/docs/app/app-todo.html\n
35. http://www.htmlfivewow.com/slide10\n
36. ARIA articles by the access lab: http://yaccessibilityblog.com/library/tag/aria\nhttp://www.w3.org/WAI/intro/aria\n\n\n
37. \n