Ask HN: Any HTML5 dabblers?

32 points by mlLK 15 years ago | 9 comments

OK this site (http://mrdoob.com) has finally convinced me that I can have a pretty good time in HTML5. I've just now decided that now is a good time for me to start getting acquainted with what it (and JavaScript) can do.

Where did you start? I'm gonna assume here (http://dev.w3.org/html5/spec-author-view/, http://diveintohtml5.org/); suggestions, examples, blogs, resources, insights, blah, blah are appreciated as always.

techiferous 15 years ago |

Reference

http://www.w3schools.com/html5/default.asp

http://www.html5rocks.com/

http://simon.html5.org/dump/html5-canvas-cheat-sheet.html

http://diveintohtml5.org/peeks-pokes-and-pointers.html

Tutorials

http://diveintohtml5.org/

http://slides.html5rocks.com

http://www.html5rocks.com/tutorials/

https://developer.mozilla.org/en/Canvas_tutorial

Demos

http://html5demos.com/

http://studio.html5rocks.com/

http://lab.simurai.com/css/buttons/

Sandboxes

http://css3please.com/

http://playground.html5rocks.com/

Tools

http://www.modernizr.com/

http://www.contrast.ie/blog/speeding-up-with-modernizr/

http://css-tricks.com/examples/ButtonMaker/

http://labs.thecssninja.com/font_dragr/

http://www.fontsquirrel.com/fontface/generator

http://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-brows...

Compatibility

http://caniuse.com/

http://html5readiness.com/

http://www.quirksmode.org/compatibility.html

Detecting HTML5 Support

http://diveintohtml5.org/detect.html

http://www.modernizr.com/

blaines 15 years ago | |

Great list! I laughed because many of those links are already marked as visited.

I also like http://jsfiddle.net/ as a sandbox.

tlrobinson 15 years ago |

Learn the JavaScript language and browser/DOM programming first, then the actual HTML5 stuff is a few simple additions. Dive Into HTML5 seems pretty good.

* "JavaScript: The Good Parts" by Crockford

* "JavaScript: The Definitive Guide" by David Flanagan

* MDC's "A Re-introduction to JavaScript": https://developer.mozilla.org/en/A_re-introduction_to_JavaSc...

* Resig's "Learning Advanced JavaScript": http://ejohn.org/apps/learn/

* MDC: https://developer.mozilla.org/en-US/

* Crockford's website: http://javascript.crockford.com/

* YUI Theater (especially Crockford's JavaScript talks): http://developer.yahoo.com/yui/theater/

mikegreenberg 15 years ago |

One of my first screen casts was an HTML5 primer (http://nobulb.com/2009/11/html-5-primer/). I also found a really good slideshow on what's new in HTML5 (http://slides.html5rocks.com/).

(Not certain that the quality of information in my screen cast is nearly on par with the other info presented here, but it was a crowning achievement and something I'm proud of. Let me know if this is bad form, I'll remove this comment.)

babs474 15 years ago |

Don't forget webGL. The best place is here http://learningwebgl.com/blog/

binx 15 years ago |

Just start playing around, The last few weeks I have been browsing a load of sites like http://html5tutorial.net/ just mess around with bits and pieces then consult Google and Stack Overflow if you get stuck. I recommend getting stuck into some CSS3 first though, its surprising how much you can do in the style sheet.

Also its worth checking http://ie.microsoft.com/testdrive/ MS have some interesting sandboxes you can play with there. Learn your way around.

joshuacc 15 years ago |

I'd suggest checking out http://html5doctor.com

The authors do a pretty thorough job of reviewing the semantics of new (or updated) HTML5 elements.

caryme 15 years ago |

I helped develop http://adbubbles.oneriot.com as an IE9 Beta Launch demo, with much inspiration from mrdoob. The site is now broken since OneRiot just changed their business model away from real time search and shut off their API. I worked a lot with canvas especially. diveintohtml5 was really helpful as was the mozilla developer reference.

siedrix 15 years ago |

To be fair, http://mrdoob.com has a lot of flash in the examples. You can learn http://processing.org/ and export to canvas if you want to do things like the stuff on that page.

On the other hand, js rocks...