Google Maps Game Cube

Here's a very cool interactive google maps game called Cube. You move a ball by tilting the cube to get to a certain destination and avoid obstacles. Much like that labrynth game with a marble in a wooden box. Very nice 3D animations and fast performance. The eye in london actually rotates like a feris wheel! It integrates features of google maps to show off bike lanes, subways and traffic!

Embedded Link

Cube – A game about Google Maps
Play your way through a cubic Google Maps world. Travel through New York, Tokyo and many other cities and learn all about the great features of Google Maps.

Browser Canvas Rendering Compete

Seb Lee-Delisle has created this wild test for browsers canvas implementations. It creates ting particles and renders them in the canvas element. Then it shows you the frame per second rate. This was just a simple test to see how browsers would handle computing and rendering millions of particles. FF was actually the clear winner still rendering at above 5 fps at around 3.6 millions particles! That's insane! The equivalent of 18 million particles managed every second (3.6 * 5/second). Chrome apparently will be updated soon though and should be able to at least match that. Not that production sites routinely render millions of particles, but it's certainly a good stress test that I find interesting.

Embedded Link

Battle of the Browsers | Seb Lee-Delisle
image by Andi Smith I had a great time at the State of the Browser conference in London on Saturday – it was nice to see representatives from FireFox,

Google Embracing Responsive Web Design

Google showcases a few of their own sites that have become responsive here in their google webmaster blog post. They explain the need they had from watching their analytics and walkthrough some other decision made in going responsive!

Embedded Link

Responsive design – harnessing the power of media queries
Webmaster Level: Intermediate / Advanced

We love data, and spend a lot of time monitoring the analytics on our websites. Any web developer doing the same will have noticed the increase in traffic from mobile devices of late. Over the past year we’ve seen many key sites garner a significant percentage of pageviews from smartphones and tablets. These represent large numbers of visitors, with sophisticated browsers which support the latest HTML, CSS, and JavaScript, but which also have limited …

Instant Install

Tired of uploading and unzipping the latest build of your favorite CMS when you start a new project? Here's a time saver, just upload one php file and click a button. Instand Install from 9miles Media (NC). It loads the latest to your server and unpacks it, then takes you to the install page to connect to the database! I was floored when I first tried it with how fast it worked. I was finding that I did this so often and got tired of waiting for all the files to upload, since I can't unzip a file via transmit, and I was searching around to find a terminal tutorial to hlep me learn to do this via the command line… But this app came up in a post and I tried it, which proves that I can continue to avoid the terminal in favor of using better designed (at least as fast) solutions. =)

Anyone have any experience with the app or any others they prefer (or even a detail to how to do it via command line)?

Embedded Link

Instant Install – Quickly and easily install WordPress, Drupal, Joomla, and more
An easier way to install web applications.

"Common" Breakpoints are missing the point

Great article from Jeremy Keith about the nonsense it is to use breakpoints determined by devices. The whole point of responsive web design is to make your designs flexible. Let's not only target certain widths, let's just finish the thought and make it a great experience no matter what width it is. Let the content determine the breakpoints.

Embedded Link

Adactio: Journal—Fanfare for the common breakpoint
“Common” breakpoints are the new fold.

Is webkit the new ie6?

All browsers are on the verge of implementing the webkit vendor prefix because developers have been building for webkit only specifically. This old article from Bruce Lawson (of Opera) rings even more true today. He states that the horrid broken non standard state of the ie6 web was not always seen as that. IE6 was the first to support many features of CSS and honestly was a step in the right direction. The main problem was that it was only one step, and then no more for years. The web dev community built according to the browser rather than according to standards! Doing this created the trap that is IE still today, as it's forced to support old specific non-standards code as well as future thinking standards based and everything between. Let's build for standards and let the browsers support it rather than bend to each browsers whim and build for them specifically. This creates a disjointed complicated setting where we worry about browsers and OS still. In a time when we are diverging and numbers of browsers and devices are compounding, standards is our sanity! Please, for the sake of … well, standards!

Embedded Link

Bruce Lawson’s personal site 
: In praise of Internet Explorer 6

Bruce Lawson's blog, focussing on web accessibility, web standards, travellers tales, and music

Boston Globe Responsive Process Interview w Scott Jehl

Some good insight into the thought process behind the "famous" responsive web (re)design for the Boston Globe. I think the discussions about the fallbacks and technical challenges very important. Sites should be optimized to have a low overhead and build with the worst oldest devices in mind as well as the latest and best.

Embedded Link

Scott Jehl on the responsive Boston Globe site | Interview | .net magazine
Opera’s Bruce Lawson talks to Scott Jehl of The Filament Group about developing the highly-regarded and responsive website for The Boston Globe

CSS3 Only Cycle

Here is a great example but an even better writeup on the full process. Some great details on the inner working on css3 animations and the different browser implementations. It's amazing the things that css can accomplish now, especially when we don't support ie! Jokes!

Embedded Link

A Pure CSS3 Cycling Slideshow | Smashing Coding
Thanks to CSS3, we can create effects and animations without using JavaScript, which will facilitate the work of many designers.

Exploring the Javascript requestAnimationFrame API

Here's a great overview and explanation of the new-ish requestAnimationFrame API for javascript. This makes the animations happen in sync and controlled by the browser. This is something that will really help javascript come up to par with animations we are used to and use hardware acceleration. Although it still requires vendor prefixes for all browsers there is a polyfill available to make it happen. I want to see some more demos, (the one linked here in jsfiddle –http://jsfiddle.net/wMkJg/ is more jumpy than my first flash animation 7 years ago).

Embedded Link

requestAnimationFrame — The secret to silky smooth JavaScript animation
Do you often find yourself lying awake at night wondering how you, too, can get your JavaScript animations to be as smooth as those silk sheets of yours? I can’t say for certain that all of us on the CreativeJS team actually have silk sheets, but we did want to show you how to make your animations rock, so we created a page over in our Resources section dedicated to the new(ish) requestAnimationFrame API. Go take a look!