The Google UK logo today is a mass of bouncing colourful balls that flee the mouse (screencast):

This is another example how Google are happy to play with their brand to show off some cool new browser technology (the other of course being the Pac Man logo a few weeks back). This, and the Pac Man is meant to show off what you can do with JavaScript and HTML5 and how smooth it can look on Chrome. My screenshot was taken with Firefox, so there is no racism in this code either – another plus in my book.

If you reverse engineer the code you will find that the bubbles are actually DIV elements that have a huge border radius. You can find the whole code of the effect in the source code when you look for google.doodle() or in this gist (beautified):

As you can see there is not much magic to it. The CSS is even easier:

Yes, all of this is pointless bells and whistles, but I have to say I like it that a company puts technology and showing it off just for a day on their agenda.

Update: the fact that the DOCTYPE of the site is HTML5 does not make this effect HTML5 though. It is simply a JavaScript that moves DIVs around and resizes them. This could be done in HTML4 and for IE6, too. The upgrade from classic DHTML animation is that it uses CSS3 to create the round bubbles and that nowadays this animation looks smooth on faster computers. In the time when IE6 was hot this would have looked terrible. Notice Google blocks IE from getting the effect (and sadly enough Opera, too, although it would work just fine with their JS engine).

Another Update: Rob Hawkes used the code here to port the effect to Canvas to make it HTML5 (well Canvas) driven.

Last update Robin Berjon ported the code to SVG as another open technology in the new stack.

Whenever I go to conferences I see lots of people running around with impressive SLR cameras snapping away furiously at everything that moves. When I get back from the conference and check the normal sources for these photos (Flickr, Facebook, heck even Picasa…) I get almost nothing. This wasn’t the case a few years ago – almost every conference was well documented by amateur photographers and yielded lots of great comments and conversations on Flickr.

I am not alone in my analysis – @yaili complained on Twitter:

@yaili: Flickr needs more @dConstruct 2010 photos. How am I supposed to feed my post-conference blues?

And I agreed:

@yaili over the last year less and less people upload photos from conferences. annoying. Everybody runs around with SLRs and shoots a lot.

I did talk to people with impressive photo gear and a lot of them agreed never to upload much. There might be a few reasons for that:

• People take photos in high resolutions – and wireless at conferences is not able to cope
• People who spent a lot of money on massive cameras aspire to be a real photographer and are reluctant to upload photos that haven’t been perfected in Aperture or Lightroom
• People just forget as by the time one event is over the next is on.

This aim for perfection leads to a lot of people missing out. Why not upload lower resolution photos as “raw” or “live” to Flickr and at least allow people to join the fun. It sounds to me like Worth1000 vs. B3TA – both had the same goal – funny photoshop manipulations. Whilst Worth1000 had strict quality control and only the most impressive stuff got released b3ta is all about the joke, then the technique. B3ta left its mark on mainstream media with magazines republishing content and some TV ads being made by artists who started at b3ta. Worth1000 is still a web community and seems to dwindle down to another “make better photos” resource. Allow yourself to release non-perfect products – and more people will find you.

Interestingly enough the post-conference follow-up fail goes even further. As Stuart Robson pointed out it takes too long to get the slides:

StuRobson @codepo8 I wonder what they’re doing with these photos at home. I’m just forever waiting for the slides to go up. #Iwillgettoaconference1day

Both of this is a real shame, as organisers, speakers and the amateur photographers miss out a massive opportunity to create more buzz about the conference and themselves.

• Conferences create a lot of buzz on Twitter – your photo could give that a visual add-on. If you license your photo with CC large blogs and newspapers could use them and have to mention your name.
• Slideshare is a large community and your slides being featured as part of a conference channel or even on the homepage has quite an impact. This could be as simple as your presentation being the first to be uploaded for a large BarCamp
• Speakers who do publish their presentations and blog about the conference always look for good photos of themselves. As it is hard to shoot those whilst you speak (I normally give my camera to a friend) I for example troll Flickr immediately when I get back from a conference. If you shot a cool photo of me, I will use that and link your name.
• People who missed the conference will get an idea of what was covered and how much fun people had – and will get a ticket next time.

So, please share, folks – the web needs you!

I just got back from Frontend 2010 in Oslo, Norway. Two days of excessive drinkinggreat information about designing and building the web of tomorrow.. I was invited as a speaker alongside a lot of great people and my task was to give the last presentation of the conference to sum up a bit what we had heard about and what to do with it when we get back home. And this is what I did. Here are the slides. More to come later when the video is out and I am not using my almost empty Nexus as a hotspot as the British Airways wireless is FAIL again.

Yesterday Framsia organized a meetup in Oslo, Norway with Molly Holzschlag, Paul Irish and me ramping up to the Frontend2010 conference. Molly talked about the open web and the open stack of technologies and Paul showed people the developer tools in Chrome.

My talk was about building web applications with JavaScript and how using progressive enhancement helps you build great things with very few lines of code. The slides are available on Slideshare:

As per usual, I also created a audio recording of the talk hosted on The Internet Archive:

I loved the evening – the location sponsored by Epinova had all the things we needed (including a copious amount of beer) and the audience (once warmed up) had some very good questions to answer. The talks were filmed and Framsia will release them soon.

One of the things that gets me excited about the new features of browsers is the “HTML5” Web Storage module. I like it mostly because of its simplicity.

The Web Storage idea is to simplify storing of information for the user. I always hated using cookies because of all the domain issues. It was also a mess to check for them and then fall back to other things. Most of all people are paranoid about them and I know a lot of corporate computer users who have all cookies disabled.

Web Storage on the other hand is a simple object in the browser. You can set localStorage.foo to ‘bar’ and when you read out localStorage.foo next time you load the document it will be ‘bar’. That’s how easy it is. You can store 5MB of textual data which could be integers or strings. With JSON.stringify() you can easily store more complex information.

So I was wondering what you could use that for to get the most out of it and I realised that in a lot of cases I render simple HTML in PHP and then do some clever stuff in JavaScript to make it a different interface. If I wanted to retain the state of that interface I’d have to somehow store it in a DB so next time the user comes to the site, I re-render the last state of affairs.

With localStorage you could do that by simply caching the innerHTML of the main app (if you build it progressively):

You can check the source of the trick in this Gist on GitHub:

If you don’t get what I am doing here, check this quick screencast:

I’ll be using that a lot – it is terribly simple and yet powerful.