I had heard about Google Wave, had a quick look at their UI, thought “shiny” and not really paid it much attention. Then I was reminded of it again recently and so I had another look, watched the Keynote Speech that they gave at the Google I/O 2009 and had a bit of a look around the web for related articles.

And I got really excited and really angry.

I got angry, because most people weren’t excited for the right reasons, or were dismissive / “anti” because they didn’t really see what Google has done.

But because I am so excited about Wave (not just Google Wave), I thought I’d post this to help you understand what Google Wave actually is and what it isn’t.

What Google Wave isn’t

Google Wave isn’t Wave.

Wait a second! Why have you dropped the “Google”, what’s “Wave” all about?

Firstly let’s take an analogy, with something you are no doubt familiar with. Consider the statement: Google Mail is not email.

Imagine that email didn’t exist and Google showcased Google Mail. People might think that email was Google Mail, but we all know that isn’t the case.

The same for Wave. Google have designed a messaging system which can be run by anyone. They have designed the protocols it will use which anyone can implement. This messaging system is not Google Wave, but Wave itself.

What Google Wave is

Google have designed a UI for Wave, which is Google Wave.

Don’t get me wrong, I like their interface. It is written in HTML5 using the Google Web Toolkit and it is super slick.

However, the Wave itself is far more exciting.

What Wave is

Wave is email redesigned for the 21st century. Email was born before the internet and has been flogged and flogged into how we use it now. It is inefficient, single one-way message based, bad with files, incosistent with rich styling, non-collaborative and basically just way past it’s “sell by date”.

With Wave we no longer deal in single messages, but conversations; where content evolves over time and can be “played back” to provide the user with context. Everything email and IM can do and more. They have designed the system to be extensible and so can communicate with other systems. They also designed it to work over a federated networks model, so many people running their own Wave servers can communicate in the same rich way as if they were communicating with their people on their own server.

Amazing really, and provided we can bridge the backwards compatibility gap (which we can, remember Wave is extensible!) then I see Wave replacing email altogether.

When Google Wave goes live, Google will also be releasing the server for anyone to run, learn, enjoy and stop using email with. I am looking forward it immensely.

Oh my god. I can’t believe how addictive this game is. http://fantasticcontraption.com/. The simplicity of it really appeals to me. The idea is to move a pink block from one area on the course to another, and you do so by building a contraption from wheels and connectors. that’s pretty much it!

Doesn’t sound like much, but if you are like me, you’ll not only want to finish all the levels but also go back and experiment with loads of other different ways to finish in the vain hope of finding the perfect solution. A solution that excels by being so simple, or so elegant. So unusual, or so complex. I could play for hours. But I won’t go on for hours.

I will leave you with some of the best contraptions I have managed to come up with, and the first one you should really vote as amazing, because (and I know this sounds a bit arrogant) is ingenious!

• unusual technique! See if you can guess how it works before you start it!
• Minimalistic elegance, perfect timing.
• I saw a solution with more than one spinny thing, but this seemed a cooler solution (notice the pole to slow down the last ball slightly…)
• A cool way to do “The Ball”

That’s all for the moment, but I’m sure I’ll post more contraptions in the future…

As promised last time, I here we will discuss the transforms in WebKit, and how they can be used to create interactive applications without Javascript (for animation that is – we still need it for AJAX, etc.)

Tranforms have been implemented on a few browser using proprietary syntax, and the same is true of WebKit. As we shall see further down the article though, the WebKit transitions make them so much more powerful.

But what are they? They modify an element, without displacing it’s original setting within the document, which means we can move it about and the spacing doesn’t change.

Remember these will only work in WebKit based browsers, for example Safari for Mac, Chrome for Windows or Midori for Linux

An example: how about rotation.

element:hover {
  -webkit-transform:rotate(180deg);
}

Not very exciting, but combine this with a transition! (Try putting you mouse in the middle of the box for best effect)

element:hover {
  -webkit-transform:rotate(180deg);
}
element {
  -webkit-transition:-webkit-transform 1s linear
}

Much more useful! But there’s more, we can scale, we can translate (change its position on the screen) and also we can change the “center” for the transform. Usually the rotation happens from the center like above, but we could do it from closer to the left:

element:hover {
  -webkit-transform:rotate(180deg);
  -webkit-transform-origin:30% 50%;
}
element {
  -webkit-transition:-webkit-transform 1s linear;
  -webkit-transform-origin:30% 50%;
}

Or we could scale and move and rotate! (you might need to track it with you mouse to keep the animation! this is a demo after all!)

element:hover {
  -webkit-transform:rotate(180deg) scale(2) translate(-100%,0);
  -webkit-transform-origin:30% 50%;
}
element {
  -webkit-transition:-webkit-transform 1s linear;
  -webkit-transform-origin:30% 50%;
}

<div id='hey-look-at-me'> <div id='untarget'> <pre>
CSS:
#hey-look-at-me:target pre {
  outline:2px solid red;
  color:#f0f;
}
#hey-look-at-me pre {
  -webkit-transition-property:outline, color;
  -webkit-transition-duration:500ms;
}
</pre> </div> </div>

target me! untarget me!

NB: Notice how I nested the PRE to stop unwanted excessive screen movement.

So, what can we do with all this? Well, the culmination of the post, the Mac OSX style Dock menu, using no Javascript. Yes, that’s right a bulging docked menu, with no javascript.

Just so you remember, there no javascript in the demo.

Check out the Javascript free OSX Dock Menu Demo.

I recently read somewhere about developing web applications for the iPhone / Android browsers that you shouldn’t use Javascript Frameworks (e.g. jQuery) for animation in your web apps but instead use CSS3 transitions. I had no idea what these where, so had to look it up. Turns out it’s pretty much a WebKit only thing, but that’s fine for iPhone (Safari) and Android (Chrome) Browsers.

But what is it? Simply put, it’s a way to create a transition between to CSS states (hope that cleared everything up for you!)

Better, an example: You have two CSS rules for an element, say a link, and for it’s :hover state. like this:

Now usually, the browser would switch instantly between these two states, but with transitions we can slow it down into a smooth animation.

We can specify which propertys to transition and which to allow to change instantly. Here we can transition in the background and color properties.

Here’s two links, the they are identical except that the second has the transisions applied and if you’re using a WebKit based browser then it will fade nicely between states.

I will flick between states. Do I fade or do I flick?

Next time I’ll go into a bit more detail and show how using CSS Transforms as well we can make an OSX Dock style menu using CSS alone!

I recently discovered QR codes and how cool they are! Basically it’s a 2-D barcode and can store much more information than your standard bar code.
A QR code is a square of dots in a certain computer-readable pattern, for example there is one to the top-left of this post, encoded with the URL to this post.

Why bother though? Well, they are used mostly in Japan, where mobile phones are generally all Internet-enabled, so on an advert you might have a QR code for a URL where more info can be found. So you whip out your phone, point the in-built camera at the code, and bingo, it takes you to the website. Also you could have a film opening encoded in QR as a calendar event, so when you scan it it puts a reminder in your calendar. Useful no?

On a personal level though, when QR codes are not big in England, why should I care. Well, they are useful for transferring information I want to a phone. For example, I have a bookmarklet on my browser that converts the current page I’m looking at into a QR code (courtesy of the Google Chart API) and open the image in a new tab. Very useful if I find a page and think, “I’ll want to look at that later” I can make the QR scan it with my phone, and the page goes into it’s browser history for my later enjoyment.

For those of you interested the bookmarklet code is (should be all on one line, but for the page width’s sake…):

Try it! (will generate the QR code for this page, but a lot bigger than the one by the title)

You may have noticed that there are QR codes for the permalinks to these posts aswell, so you can easily bookmark them with a capable phone. Another useful function that my phone can do is to display the QR code for a Contact in my address book, so I can easily share that with another QR enabled phone without having to “pair” them with bluetooth, or use Infrared (if the phone still has it!) or text it or whatever. Much more convenient. I just need to find someone else with a QR enabled phone…