To utilize Chrome Frame on your site, all that is needed is a single meta tag – if Chrome Frame is installed, IE will use it, and if not, the page will still render. This is very nice, unobtrusive behavior indeed.
Google developed Chrome Frame primarily for their upcoming Google Wave communication software. It probably became quickly evident to Google that they would never be able to offer the rich functionality that Wave requires under IE. I would expect that the release of Chrome Frame is ruffling some feathers at Microsoft – Google seems to be getting on the nerves of some it’s major tech competitors lately using similar tactics. Still, it’s hard to see how consumers lose with this move – to some extent, it’s the best thing that could happen to Internet Explorer.
Here’s a 3D CSS Animated Image Carousel that I created while I was learning about 3D CSS animation. Watch the video above to see the technique in action. If you’re on a 3D CSS animation capable browser (currently a non-production version of MAC Safari and mobile Safari in the iPhone and iPod Touch), go ahead and check it out. The video was shot with my XBOX360 webcam, of all things.
I just recently changed to a new theme for my site. Since then, I’ve been doing my first real digging into the internals of how theming works and how to talk to the back end of WordPress. It’s been a suprisingly pleasant venture – all your content is easily accessible and the interface is clean. I’m just starting to learn PHP (from a .NET background), and it’s been nice to find that I can hack around and usually get the code right on the first or second try.
I’ve also been making some progressive enhancements to the site at the same time. If you came in via a webkit-based browser, you’ll hopefully notice the webkit-only light blue gradient behind post titles, as opposed to a solid color. I also animated the RSS button in the upper right hand corner to grow 10% larger on hover. These are examples of ways to embrace progressive flourishes on your site without breaking the experience for anyone. Next up, I’m going to incorporate rgba into the footer somehow. Hope you enjoy the new layout!
I hadn’t realized until very recently that the not-yet-released Palm Pre is wholly implemented using not much more than Webkit and HTML technologies. The entire platform is called WebOS, but it’s little more than a shell that is designed to run Webkit. This is an ingenious move in creating a smartphone, for a few reasons.
First, Webkit is open-source and is actively developed. This means that Palm can get new bleeding-edge technology into their phones solely by upgrading to the latest version of Webkit rather than having to develop the technology themselves. In this arena, their singular hardware goal should be to provide the best environment possible to run Webkit.
Second, since all applications are based upon Webkit and HTML, there are already millions of developers that understand your platform. Development tools? You don’t have to write those, it’s all just HTML. This is a significant cost-savings over proprietary platforms, and will serve to quickly grow the application suite that is available for the Pre.
Is the browser-only OS really viable? Certainly – the web world has already created solutions to a very large number of problems with a browser-only OS. Offline databases? There’s support for that in HTML 5. What about a 2D/3D graphics API? Canvas provides 2D support, and 3D support can be built in (and a canvas spec for 3D graphics is in the works, so it will eventually be a moot point in any case). Multithreading? Again, HTML 5 has support for worker threads.
To this end, I’m willing to bet there are more than a few mobile phone makers that are envious of the sheer simplicity and elegance of the Pre platform. Here is a video of a Palm exec talking about the technology behind the Pre at Google I/O. Skip to about 3 minutes in to hear just the Pre segment, which is well worth the time to watch.
I’ve been working a lot more on CSS animations lately. There’s not much documentation out there and what is available is incomplete, so working with them is definitely a bit of a chore. I’ve been creating some examples that are pretty cool and demonstrate some more difficult techniques. They only work in Safari and Chrome, so fire one of those up and click through.
I’ve been working mostly with the onclick event. The hover event is ultimately a bit disappointing because it reverses the animation effect when you stop hovering. That’s good for effects like growing buttons on hover, but not for a lot of other uses. The one-way nature of the onclick event means that it doesn’t cause the animation to reverse itself, which leads to some pretty neat effects. Check out these examples, and let me know if you end up using anything from them – I’m very curious to see what people do with this technology!
Webkit is the rendering engine that runs Apple Safari and Google Chrome. Analogously, Trident powers IE and Gecko powers Firefox. Webkit, however, is by far the most advanced of the three (with Trident being a distant third).
-webkit-transition: color 1s ease-in-out;
Enhancements like this are progressive-style enhancements – they aren’t supported everywhere, but they likely will be in the web of the future (minus the ‘-webkit’ identifier), and they don’t take much away if they aren’t present.