Blogs

Adobe recently released HTML5 Pack extension for Dreamweaver CS5. It adds initial support for HTML5 and CSS3 in Dreamweaver’s Live View mode as well as code hinting for HTML5/CSS3 exclusive properties. I just put together a quick test page and it’s pleasant to know that CSS animation is also supported within the Live View screen.

Another nice addition is the Multiscreen Preview which shows you multiple rendering of the page in different sizes. By default, it’s set to iPhone, iPad and Browser. This goes for Dreamweaver in general, but it would be nice if there was an option to set each view’s layout/rendering engine. I’m assuming it’s using some version of Webkit right now as it only accepts “-webkit-” prefix for CSS3 properties such as border-radius and text-shadow. Another addition I would like to see in the future is to be able to scroll through the whole multiscreen panel. You can scroll within each screen, but let’s say if there is a view that’s cut off below bottom of the panel, there is no way to get to it other than reducing the height of screens above it.

This extension is quite handy and I wouldn’t mind switching over to Dreamweaver to do HTML5 stuff, but then again, it crashed like 5 times while creating the test page. I’m sure it’s not the extension and it’s a Dreamweaver thing. Anyhow, I would highly recommend people with Dreamweave CS5 to try out this extension.

Adobe Dreamweaver CS5 HTML5 Pack

I have just updated my Cube Defense Demo to work in both WebGL enabled WebKit and FireFox. It is still 10-20fps slower compared to WebKit, but hey, at least it works! I would like to thank those who emailed me tips on making it compatible for both.

To share my experience, these are some of the things I had to change to make it work for WebKit and FireFox:
• Use UNSIGNED_SHORT instead of UNSIGNED_BYTE
• Use CanvasUnsignedShortArray instead of CanvasUnsignedByteArray
• For FireFox, use WebGLFloatArray instead of CanvasFloatArray. This will make things faster.
• ARRAY_BUFFER rather than ELEMENT_ARRAY_BUFFER
• “clearDepth” for WebKit, “clearDepthf” for FireFox
• In “bindBuffer” function use null instead of 0

If you have anything else to add, share your thoughts!

*Update: (November 18th, 09)
This is a little outdated now, so I crossed out some irrelevent stuff. Also, in the lastest WebKit, anything that was CanvasXXXXXArray is now WebGLXXXXXArray.