Anatomy of a Mashup:Definitive Daft Punk visualized Web technologist Cameron Adams recently created a mashup of 23 Daft Punk songs titled Definitive Daft Punk.  Like any good music mashup as you’re listening it becomes easy to get lost in the track and figure out where one track begins and ends.  To illustrate the layering and composition Cameron created this killer HTML5 and CSS3 visualization of the mashup.  Make sure you view it in a modern browser like Chrome or Safari.

Anatomy of a Mashup:
Definitive Daft Punk visualized

Web technologist Cameron Adams recently created a mashup of 23 Daft Punk songs titled Definitive Daft Punk.  Like any good music mashup as you’re listening it becomes easy to get lost in the track and figure out where one track begins and ends.  To illustrate the layering and composition Cameron created this killer HTML5 and CSS3 visualization of the mashup.  Make sure you view it in a modern browser like Chrome or Safari.

Permalink

Traction Premium Theme With subtle glowing edges and high-contast elements, Traction is the latest futuristic yet simple three column premium theme from Style Hatch. Choose either the light or dark style and customize your colors, background and 60+ appearance options—see all the customization options.  Buy the theme for only $49. I had a lot of fun building this theme out with the latest HTML5 and CSS3 techniques.  If you look closely at the source you’ll notice only three images are being used in the theme at a light-weight 20kb.  All of the rounded corners, inner and outer glows, drop shadows, font-face icons, and insets are stylized using CSS3.  Plus, I added CSS3 animation touches throughout the theme—try it out by rolling over a few links, linked images, and clicking inside the search bar.  If you’re viewing the site on an anchient browser like Internet Explorer everything will degrade nicely to more simplistic design elements. If you have any other questions about the theme or need support send me an email - traction@stylehatch.co.  Also expect updates to Backburner, Inspire Well, Nova and Savory before the end of the year.

Traction Premium Theme

With subtle glowing edges and high-contast elements, Traction is the latest futuristic yet simple three column premium theme from Style Hatch. Choose either the light or dark style and customize your colors, background and 60+ appearance options—see all the customization options.  Buy the theme for only $49.

I had a lot of fun building this theme out with the latest HTML5 and CSS3 techniques.  If you look closely at the source you’ll notice only three images are being used in the theme at a light-weight 20kb.  All of the rounded corners, inner and outer glows, drop shadows, font-face icons, and insets are stylized using CSS3.  Plus, I added CSS3 animation touches throughout the theme—try it out by rolling over a few links, linked images, and clicking inside the search bar.  If you’re viewing the site on an anchient browser like Internet Explorer everything will degrade nicely to more simplistic design elements.

If you have any other questions about the theme or need support send me an email - traction@stylehatch.co.  Also expect updates to Backburner, Inspire Well, Nova and Savory before the end of the year.

Permalink

Biolab Disaster - Pure HTML5 & JavaScript Dominic Szablewski put together an incredibly impressive demonstration of what he’s able to pull of with pure HTML5 and JavaScript with the game Biolab Disaster.  Although the graphics and gameplay are on par with what you’d expect out of the NES in the early 1990s it still shows the bright future for in-browser games and applications. Read more about Biolab Disaster and the Impact HTML5 Game engine on Dominic’s blog.

Biolab Disaster - Pure HTML5 & JavaScript

Dominic Szablewski put together an incredibly impressive demonstration of what he’s able to pull of with pure HTML5 and JavaScript with the game Biolab Disaster.  Although the graphics and gameplay are on par with what you’d expect out of the NES in the early 1990s it still shows the bright future for in-browser games and applications.

Read more about Biolab Disaster and the Impact HTML5 Game engine on Dominic’s blog.

Permalink

Vimeo HTML5 Video Embeds I just updated JonathanMoore.com and the Inspire Well theme with the ability to support Vimeo HTML5 videos.  Now both work perfectly on the iPad or browsers without Flash installed. Inspire Well Tumblr Theme: Earlier this week Vimeo updated their universal embed code to support HTML5 video.  Any new Vimeo videos you add should already support HTML5, but if you have quite a few old videos on your site you can now select “Use HTML5 embeds for Vimeo” in Customize > Appearances to update the videos. See the full change log and download Inspire Well. This site is using Matthew Buchanan’s jQuery rewrite of Vimeo’s embedenator.js file.  Some time next week I will update both Inspire Well and Backburner with the jQuery implementation.

Vimeo HTML5 Video Embeds

I just updated JonathanMoore.com and the Inspire Well theme with the ability to support Vimeo HTML5 videos.  Now both work perfectly on the iPad or browsers without Flash installed.

Inspire Well Tumblr Theme:

Earlier this week Vimeo updated their universal embed code to support HTML5 video.  Any new Vimeo videos you add should already support HTML5, but if you have quite a few old videos on your site you can now select “Use HTML5 embeds for Vimeo” in Customize > Appearances to update the videos.

See the full change log and download Inspire Well.

This site is using Matthew Buchanan’s jQuery rewrite of Vimeo’s embedenator.js file.  Some time next week I will update both Inspire Well and Backburner with the jQuery implementation.

Permalink

Harmony - Javascript Procedural Drawing Tool Flash developer Mr. Doob well known for his Actionscript experiments has recently started experimenting with HTML5 and Javascript.  By incorporating various drawing algorithms with the <canvas> tag he created the Harmony experiment.  The image above was created with Harmony. Mr. Doob’s blog post on the experiment | Video screen capture of the experiment in action Edit: It appears that the power of the internets took Mr. Doob’s server down

Harmony - Javascript Procedural Drawing Tool

Flash developer Mr. Doob well known for his Actionscript experiments has recently started experimenting with HTML5 and Javascript.  By incorporating various drawing algorithms with the <canvas> tag he created the Harmony experiment.  The image above was created with Harmony.

Mr. Doob’s blog post on the experiment | Video screen capture of the experiment in action

Edit: It appears that the power of the internets took Mr. Doob’s server down

Permalink