Details

I've realised that I've never actually said exactly what I'm doing here in Sydney, so thought I'd spend a few blog updates explaining it. So far, I've probably explained to the point of "I work for Google, coding for Google Wave", time to elaborate. Since I've started, my job in the team comprises mainly of two sections - Client and Editor - so I'll describe them both, starting this post with Client.

What is a Client?

In the Wave world, a 'Wave client' is something you use to view waves. For example, if you use Outlook or Gmail to view emails, these are both mail clients. As Google develops Google Wave, with it we have wave.google.com which, if you have an account, you can visit to log in and view/edit all you waves. This is our wave client - a website that shows waves.

What is involved in making the Google web client?

Websites are becoming more and more complex these days, building of a number of technologies - in particular:

- HTML is a language for specifying the content of a page. This includes things like text content, panels, images, ...

- CSS is a language for setting the styles of a page - stuff like colours, borders, layouts and fonts.

These two together are enough for static (i.e. non-changing) websites and many older sites were made of these two. As more dynamic content was desired, and extra functionality needed in sites, a third part became more widespread:

- JavaScript can be thought of as the programming language for websites - it allows you to define mini programs to change the html/css of a page, to grab information from elsewhere without reloading the site, to define complex actions on button clicks, etc..

I deal with all of JavaScript, HTML and CSS in my job, however they are not the most friendly of languages to use to develop large projects - thankfully, Google has a tool for making that easier:

- Java is a programming language growing in popularity for developing projects.

- GWT is a google toolkit for converting a Java project into a website made of JavaScript, HTML and CSS.

This is very useful as there are many tools that make writing and fixing Java code very simple, plus many useful libraries available in Java that others have written and can be reused. This combination (Java + GWT) is what I spend most of my time doing.

What do I do in the Client?

I am in no way the only Client developer - there are a number in my team, as our client is rather complex, does a lot of interesting stuff and in some ways is pushing the boundaries of what a website can do inside a browser. Other than editing (which I'll talk about next post), the main chunk of what I do in the client is the project that I was assigned when first starting at Google - the toolbar (see below). Along with this I help with some generic stuff (mostly hooking up behaviour in the right-most wave panel, but also some misc. behaviour, css/html, speed profiling, bug fixes etc..).

How come you're so slow at making a Toolbar?!

So, when I started, I was tasked with making the 'Edit toolbar'. Pretty simple - whenever in edit mode, we needed a bar of buttons to allow bold, italic, underline and a few other things. Within a week I got a really basic thing hooked up, and we started using that. Unfortunately, our need for buttons grew to proper customisable ones with configurable icons and possibly text, plus fancy overlapping separators, so the HTML and CSS grew more complex to accomodate. Eventually we needed users to add their own buttons, plus dropdowns for fonts, alignment, popups for links, etc... plus features like bold buttons displaying whether the current selection was bold, and the toolbar became close to what it is today:

Along the way, the requirement grew to add a normal 'view'-mode toolbar with buttons for actions you can perform on waves, complete with both icons and text, plus adding a toolbar to the search panel (in the middle) as well as a dropdown (the '...' below) that will show the buttons that are not visible if the panels are too narrow, plus later any options or buttons that aren't supposed to be displayed normally. And so, the edit toolbar and buttons were altered and the generic Toolbar was born, plus the More button:
The last toolbar that is currently in operation is the Playback toolbar - including normal icon-only buttons for navigation, plus the fun addition of a slider which again required updating button code to allow controllers on the toolbar. All the while, making sure it works properly in all supported browsers (Safari, Firefox, Chrome) plus looks fine in the small dropdown mode (as shown below) plus on mobile devices (iPhone and Androids).

And that's the current state the toolbar is in - most of the time is spent either coming up with nice generic ways of doing the actions across all browsers (e.g. when clicking buttons while editing, you want the editor to keep its selection, even though by default browsers all get rid of the selection on clicks), or adding in behavioural aspects (still to do is to display which font family/size/colour is selected, displaying menus when you click-and-hold, etc...)

Having said all that, despite the toolbar being a bit of a time sink for the behavioural aspects, it is nice to be working on such a visible and used aspect (plus pretty! Although I do none of that, it's all thanks to our talented UI designer), especially when Stephen Fry uses it!!!

Next week, I'll get into editing, and the miscellaneous other parts of the job (this week I've been primary oncall, which has meant two 2am and two 5am wakeups so far...). Til next time, happy Waving!