August 2010
1 post
Hakim El Hattab's HTML5 experiments →
Lots of impressive and delightfully designed mini-projects here. Highly recommended.
June 2010
11 posts
HTML5 Rocks →
Google’s has a new tutorial site aimed at helping developers dive into HTML5. Pretty nice!
Making an iPad HTML5 App & making it really fast →
Some great notes by Thomas Fuchs. He points out several counterintuitive and arcane peculiarities of WebKit’s rendering of neat new CSS3 features.
Apple's HTML5 and Web Standards website →
Apple just launched a website which demoes some great examples of rich webpages made using standards-based technologies. A fantastic resource.
4 tags
CSS transition timing functions →
A neat visual demonstration of the the different timing functions for CSS transitions. Non-animators may not be familiar with these, so it’s helpful to see what they look like.
HTML5 Watch on Twitter →
We now have a Twitter account, @html5watch. This will simply auto-tweet any new posts to the blog - if you use Twitter as a micro subscription reader (I do!) you might like it.
5 tags
Toy Story iAd Navigation →
A re-creation of Apple’s demo iAd for Toy Story 3. Makes for a pretty good introduction to 3D transformations.
1 tag
Video JS →
Another solution for cross-browser HTML5 video, with Flash fallback. Can’t vouch for it, so please do your own research. The demo looks good in Safari.
(Submitted by Catalin Cimpanu.)
2 tags
1 tag
Projekktor →
Andreas Prediger:
Projekktor is an open source (GPL) HTML5 video player with flash fallback, playlist functionality and a customizable UI. All in all it solves cross browser and compatibility issues, adds some eye candy to the native players and provides some useful non standard features.
Haven’t tried installing it, but any effort to make HTML video embedding easier is fine by me.
May 2010
43 posts
3 tags
Modernizr →
Modernizr is a JavaScript library that helps you branch your CSS depending on the browser’s capabilities. I haven’t tried Modernizr itself yet, but their website is a nice demo of some CSS3 features, like rounded borders, gradients, shadows, reflections, and transitions.
3 tags
HTML5 form demo →
A very simple but effective demo of some new form capabilities in HTML5: built-in validation and error display, range selectors, stepping. On top of that, some cute focusing animation. Note that there is no JavaScript on this page - zero.
This requires a WebKit nightly or a Chrome dev build.
(Submitted by Rick Bradshaw.)
3 tags
Getting Started with HTML5 Local Databases
A look into HTML5’s useful local database storage with basic code examples, browser compatibility information and resources for digging deeper - http://blog.darkcrimson.com/2010/05/local-databases/
(Submitted by Ben Lister.)
2 tags
nextstop.com
http://www.nextstop.com/m2/ is an iPhone/Android optimized travel guide that makes use of GeoLocation, LocalStorage, the AppCache and aggressive prefetching. It’s a good demo of geolocation.
(Submitted by Carl.)
3 tags
Things we left on the moon →
A little demo of progressive enhancements to website interaction - animations, simple fades - by SimpleBits.
2 tags
HTML5 Asteroids →
Doug McInnes recreated the classic arcade game Asteroids using canvas:
The Canvas element is super cool. Basically all of the sprites in the game are simple paths defined by an array of points. These points are translated, rotated and scaled based on their state at any given point in the game using the standard Canvas transformations.
(Submitted by Richard Bradshaw)
2 tags
Using CSS3 Transitions, Transforms and Animation →
Rich Bradshaw has a page with some examples of CSS transitions and animations. Succinct and well explained. Make sure you also check the official docs and do your own research on top of any tutorial you read. It’s still the early days for HTML5 and CSS3; things change, both in spec and in implementation.
4 tags
Snow Stack →
A classy photo-gallery demo. As with all CSS 3D examples, this requires a recent build of Safari. Chrome doesn’t currently support 3D transformations.
(Submitted by Charles Ying)
2 tags
A Form of Madness →
Mark Pilgrim goes into some really cool new form features in HTML5. Spoiler: placeholder text (“Enter your name here…”) is now an out-of-the-box feature.
2 tags
Safari 4 cloned in Safari →
g-metrics:
Thought I would pass along an experiment where I was able to recreate almost all of Safari 4’s interface entirely in HTML5 and CSS3, taking advantage of Webkit’s css prefixes.
4 tags
Pure CSS3 AT-AT Walker →
It’s going to be a while before we can easily create animated cartoons in HTML, but the roadblocks are mainly on the creative-tool side. The rendering engines are almost there.
4 tags
3D CSS WordPress theme →
Not a terribly practical demo, but pretty involved nevertheless.
4 tags
Why You'll Love a Mac →
A simple but effective example of how -webkit-transition can make a design richer and more organic, while degrading gracefully.
4 tags
Flickr 3D →
An neat-looking combination of the standard WebKit “ring” demo and HTML5 local database functionality.
3 tags
4 tags
More canvas particles →
Move the cursor around and check out some crazy-animated tweets synced up to HTML5 audio.
(via jonstovall)
5 tags
2 tags
CSS Border Radius →
Jacob Bijani (of Tumblr) made this elegant tool for visual creation of CSS rounded corners, one of the six holy grails of web design.
5 tags
2 tags
WebKit CSS Properties →
A cheat sheet for webkit-implemented properties. Simple and easy to read; for more info, don’t miss the ultimate resource: Apple’s Safari Dev site.
4 tags
3 tags
3 tags
HTML5 Presentation →
A slideshow on HTML5 using HTML5.
4 tags
1 tag
2 tags
2 tags
-webkit-font-smoothing →
If you’re working on an HTML5 game or graphics tool, this is a very handy property to keep in mind.
4 tags
1 tag
It'll Be Better →
A simple album promo created using HTML5 audio. Nothing mindblowing, but you can learn from it.
3 tags
HTML5 Zombo →
HTML5 re-creation of an early Internet joke. Small and simple enough that you can learn quickly from the source code.
1 tag
html5media →
Google’s solution to embedding HTML5 audio and video, with Flash fallback. See also: SublimeVideo.
4 tags
2 tags
2 tags
HTML5 for Web Designers →
Early reviews say that this guide from A List Apart is excellent. $18, Ships in June.