Note: Some techy stuff right here so if you're not too bothered about the ins and outs of domain name servers you may not care too much for this article.

We have been running GoSquared (including LiveStats) on Amazon EC2 for a few months now to cope with the dramatically increased load we've been experiencing, and to efficiently scale our other web apps that will be released in the future.

However, we also kept our old servers running with (mt) Media Temple as a backup while we learned the ropes of EC2. Yesterday we decided to end our (mt) hosting because a) we hardly used the servers for the last month, b) we have a much greater understanding of EC2 now than we did a few months ago, and c) keeping the hosting running when we weren't using it didn't make much financial sense.

When we finally ended the hosting with (mt), our DNS records and domain zone files - the files that tell "gosquared.com" and several other domains to point to our EC2 servers - were also lost. This meant everyone going to http://www.gosquared.com/ was met with a rather horrendous error page.

After much time spent frantically phoning around and emailing everyone that could help, (mt) restored the zone files while we switched things over to EasyDNS.

On a side note, anyone monitoring their traffic in real-time with LiveStats, please ensure you embed the GSTC right before the </body> tag in your Site's HTML. This way, if there are ever any problems on our end they won't affect the loading of content on your Site. Thankfully, the DNS issues suffered yesterday did not cause adverse effects on Sites using LiveStats.

We are pleased to say GoSquared is well and truly back online. We hope there won't be any hiccups during the domain transfer phase - it usually takes several hours, if not days to ensure the DNS changes propagate throughout the world.

Today we're pleased to introduce the LiveStats Widget - the easiest way to share the number of people on your Site with everyone.

With this update to LiveStats we've also added a pane to get your GSTC (GoSquared Tracking Code) easily without having to email us and ask for it. Access the pane by clicking on the LiveStats Monitor - the area in the centre of the toolbar that shows you the total number of people on your Site. For help with any of the new features of LiveStats, and all the ones that already exist, check out GoSquared Support.

We also fixed an issue where Sites with a .info domain could not be added to LiveStats. Sorry about that.

We've worked on more performance improvements and we'll be letting more Sites in very soon. Those of you still waiting for your Sites to be enabled won't have to wait much longer we promise.

Wanna see what the LiveStats Widget looks like? Look no further:

What a week.

On Tuesday* last week, we finally released LiveStats into the wild - our web app for monitoring your Site's traffic in real-time.

Everything went exactly to plan until Thursday when our good friends at Smashing Magazine decided to tweet about us and the just launched LiveStats. We were really hoping to grow our user base after launch, but could never have imagined the response we would get from that one tweet - in under 10 minutes we received over 1,000 new visitors and in that hour almost 400 sign-ups.

400 signups to our blog wouldn't be too much of an issue, but those new 400 people wanted to add their Site to GoSquared and check out LiveStats for themselves. We thought we were prepared for increased load when we launched LiveStats, but we just didn't expect so many Sites, and so many Sites with such high traffic levels joining in such a short period of time.

Let's not forget that a substantial number of our 400-or-so new users also had more than one Site. You get the message - we were swamped.

There was no way we were going to let any of our lovely new members down, so we went about implementing an extremely long, and still growing, list of performance & reliability improvements:

Increased Hard Disk Capacity Three Fold

To cope with the dramatically increased amounts of data that are flooding into our databases, we have grown to 3x the capacity of our old servers. At one point, thankfully while we had taken LiveStats offline, we ran into our last GB of hard disk space causing all sorts of fun problems to solve. But we fixed them. Now we have some breathing room - at least on the data storage front.

Reduced Time for Data Expiry

Before we launched LiveStats we intended to retain traffic data collected by LiveStats indefinitely. Why? We wanted to make it easier for members to migrate to something we have planned for the future. At launch though, we decided this was an impractical and likely unnecessary practice. We now store traffic stats data collected by LiveStats for a minimum of 10 minutes. Anything stored longer than 10 minutes will expire once you leave the LiveStats application.

Data is written to our databases constantly so that all your traffic is shown to you as soon as you launch LiveStats. This is one of the reasons LiveStats is such a resource intensive application. When we were storing this data over longer periods of time, our databases grew and grew until reading information from them started to take insane amounts of time.

LiveStats Memcached

Memcached is a caching system designed to reduce the number of times external data sources (such as databases) need to be accessed. We've been running Memcached on GoSquared for a while but mostly to improve performance on our (as yet) unreleased applications. It was a big challenge implementing Memcached for LiveStats but it has enabled us to reduce database query time massively - resulting in dramatically faster performance.

Database Replication

Over the weekend we implemented database replication. Put simply this means we are now running three copies of the LiveStats database on our servers. This means we write to one database (the master), copy to another two, and can then read from any of the three. This helped to reduce some of the performance issues by balancing the load out, but what's unique about LiveStats is that it does a great deal more writing to the databases than reading. We're still working to reach a more effective solution for balancing out the writing of data across multiple master databases while keeping them all constantly in sync. We're getting there.

Splitting Up

Another change made just yesterday - we are now running the GoSquared user database on a different server to the one that records data for LiveStats. One of the most annoying issues for users was that while we were having issues with LiveStats, at times most of the GoSquared site was inaccessible. We have done a lot of work to ensure the public facing GoSquared site is very much structurally detached from the LiveStats app and other apps that will be coming along in the future.

OK, I think that's all I'm going to go into for now on the performance and reliability side of things. I've pretty much touched on each of the main improvements, but my words don't do justice to the efforts and time put in by the team.

New Sign-in Page

We introduced a new sign-in page yesterday for all GoSquared Accounts. It's been received pretty well so far - we just want to ensure your experience while visiting and using GoSquared is as pleasurable as possible.

Improvements to Welcome screen including new Site Preview Images

We've been improving the Welcome screen (the screen you are met with once you have signed in to your GoSquared Account) to make it easier to know what's happening with regards to LiveStats system status, and for accessing your Sites.

When we launched LiveStats we didn't know how many Sites people would be adding to their GoSquared Accounts. Our estimates tended towards 1, but since launch the majority of people have 2, and many have 3 Sites under their name. So we implemented a feature we were saving for the Sites app - Site preview images. Now when you access your Welcome screen the first thing you'll see is a large preview image of each of your Sites.

No text, no visual clutter, just a large image that's easy to find and click on - making LiveStats even easier to access.

Some Questions You've Been Asking

Over the course of the week many of you have been asking questions about GoSquared and LiveStats, I think we've replied to all of them, but here's some that kept cropping up:

Is LiveStats in Beta?

We still regard LiveStats as a very much in-development product. We will be closing new Site sign-ups tomorrow to ensure we can develop and grow the LiveStats app and underlying engines with a controlled number of Sites. We will introduce an invitation system soon to grow the user base further.

For now, everyone who already has a Site in their GoSquared Account can continue using LiveStats as usual, and anyone after tomorrow that wants to monitor another Site with LiveStats will have to wait. If you have a friend that might like to try LiveStats, tell him/her now! We'll be closing off new Site signups tomorrow (November 4th) at midnight GMT.

Is LiveStats Free?

Currently, LiveStats is completely free. You will never have to pay for a GoSquared Account. However, we have been planning a pricing structure for LiveStats for Sites that have considerably high levels of traffic. Currently, we can't support a large number of busy Sites efficiently without greater expenditures on servers and system infrastructure.

Any changes to the cost of using LiveStats will be discussed with you - our users - thoroughly before being implemented. We haven't got any fixed figures in our heads, so LiveStats will remain free for the foreseeable future. We don't want to charge for LiveStats yet - we would much rather build a great community of people that use and love the product and give us valuable feedback than to make a few extra quid.

Where Can I View My Site's GSTC (GoSquared Tracking Code)?

There is currently no way to access your Site's GSTC from LiveStats. We're working on allowing you to access this as soon as we can. In the meantime, just contact us to get your GSTC sent to you. We apologise for the delay in bringing this feature to you - the reason it's not in there right now is a long story.

How did you make that animation for LiveStats that I saw on YouTube?

We have JT and his Adobe After Effects skills to thank for the LiveStats YouTube animation. We're pretty proud of it! You can watch it here:

http://www.youtube.com/watch?v=o-XHA7Xzr8Y

Where's my Activation Email?

During the mad hour or so that Smashing Magazine tweeted about us we had to restart the database server a number of times to bring it back to life. This meant a large number of signups that occurred during the reboot time were not activated. We later switched to automatically approving all new signups for the day and simply stopped sending out activation emails. We learned a lot from those couple of hours of madness and have prepared a more bulletproof plan of action for similar scenarios in the future.

Is there an easier way to switch between Sites from within LiveStats?

Currently, no. As I mentioned earlier, we weren't expecting so many people to have more than one Site in their Accounts. We've been looking at ways to switch between Sites in LiveStats for a few months. We will only implement a non-essential feature such as this when we have reached a solution that a) doesn't clutter the interface and b) doesn't get in the way for people who don't need or want to use it.

If I sign-up to GoSquared does that mean I'm signing up to Sell Ads with you too?

No. When you sign up to GoSquared at the moment, you open a GoSquared Account (which is obviously free) and have access to the LiveStats app. We have not yet released the new Get Seen + Sell Ads apps, but when we do, their use will be entirely optional. Selling Ads with GoSquared will also require further approval - we want to ensure all Sites selling Ads with GoSquared are of a high quality and offer significant influence to advertisers.

How do I get access to this "new stuff" you're working on?

We don't want to discuss our unreleased products too much right now, but if you feel your Site is pretty influential and happens to attract a creative audience, then please get in touch.

And Finally a Thank You

I couldn't write this post without showing some gratitude.

I'd like to say thanks to Geoff (@TheDeveloper) and JT (@floopily) for the numerous sleepless nights they've had this week working on these improvements to the backend of LiveStats. There's been some massive overhauls of very integral parts of GoSquared and the only feedback they tend to receive from users is a complaint or two when things go wrong. Stuff doesn't "just work" without devotion to the intensely complex underlying components that make the system what it is.

Finally, thanks to all of you wonderful, supportive, friendly, and awesome members of GoSquared. Some of you have been with us for years, some for only days (hours even). Your willingness to accept and understand the problems we've been having is truly refreshing and fills us with confidence that we're building a strong community around a great product. We listen to every word you guys and girls say - on Twitter, on Facebook, by email, and anywhere else you care to mention us.

We've got some great stuff coming in the next few weeks so stay tuned.

Keep on rocking,

James Gill
The GoSquared Team

*Tuesday: OK, we actually launched at about 2am Wednesday morning. Same thing, right?

Today we're pleased to announce the launch of LiveStats - a web app that lets you see the traffic on your Site in real-time.

Learn more about LiveStats now at http://www.gosquared.com/livestats/

What is LiveStats?

LiveStats is a web app that lets you see who's browsing your Site right now. Without any plugins (like Flash or Silverlight) or any applications to download, LiveStats updates in real-time showing you who's browsing and which pages are being looked at.

It doesn't do graphs. It doesn't do trends. It doesn't do segmentation. It doesn't do event tracking. It tells you everything you need to know about who's on your Site - right now.

Why do I need LiveStats?

We're guessing you already use an analytics solution of some sort - many use Google's Analytics, or Mint by Shaun Inman. These are great for seeing how your traffic has been doing over a period of time in the past. LiveStats isn't meant to replace these tools, but work alongside them.

We found ourselves asking "Who's on our site right now?"

It turns out there aren't many tools that give you simple, useful information like the number of people viewing your site, and what pages they're browsing. LiveStats makes it really easy to get this information quickly - the number of people on your site right now is clearly displayed in the toolbar, and every visitor is represented by a row in the list below.

You can instantly scan the LiveStats interface and see which visitors have been browsing extensively and which have come and gone quickly. Click on a visitor's row to dive deeper into their browsing experience and see more information about them such as what browser they're running, which operating system they use, their screen size, the language they speak, and which country they're from.

You haven't seen LiveStats until you've tried it out on your own Site.

For those of you who have been with GoSquared for a while, you'll also notice a completely rewritten interface. We started from the ground up to build a strong foundation for a new suite of web applications that will help you run a better website, and build a stronger business.

Thanks,

James Gill, Geoff Wagstaff, James Taylor
(a.k.a.) The GoSquared Team.

P.S. We haven't completely forgotten about advertising - we can't wait to tell you what we have planned for November.

A while ago we said we were working on some things.

On Tuesday 27 October we'll be launching LiveStats, a web app for monitoring your site's traffic in real-time. It's been in private beta testing for around a month and we've been improving it with feedback from a number of sites.

On Tuesday we'll be giving access to the first 100 people that apply. Just visit the GoSquared homepage on Tuesday to apply.

Thanks,

The GoSquared Team

Last week we attended Future of Web Apps London, a fantastic conference that the great guys at Carsonified put on every year for web developers to meet, chat, and learn about what's going on in their field.

We attended FOWA London in 2008, but this year we came only days away from missing out on all the fun when all attempts to get discounted passes failed. That is, until we took a look at the Media Temple blog and their "Are you a FOWA geek?" competition... And yes, we entered (after much persuasion from people already happily attending the conference).

After piling our desks with every last piece of tech equipment we had lying around our respective pads, taking a photo, and tweeting it to the world, all we could do was wait. Wait and hope no one judged us. Confidence grew as (other than Geoff and I) only two more entries had been posted - for 5 tickets. Things were looking promising! Saturday morning involved waking up to a DM from the guys at MediaTemple congratulating each of us on winning, followed by jumping up and down yelling WOOP WOOP WOOP. We'd done it!

The best thing? Other than not having to pay a penny, we won VIP Dinner tickets as well as conference passes!

VIP Dinner at Gaucho

MediaTemple hired out the vaulted cellars of the wonderful Gaucho restaurant in Piccadilly for an evening of chatting, wining and dining with the who's who of the web. We were lucky enough to be sharing a table with Kevin Rose (Digg), Britt Selvitelle (Twitter), CTO of Moo.com, and loads of others! Just incase you don't believe us, here's unflattering proof on Flickr.

The dinner was great - so great that we didn't back home 'till 2am. This made waking up at 6am on the Thursday somewhat challenging.

The Conference

Up at 6am bright and early - that's dedication to web apps.

Wi-Fi

Don't even go there.

The Talks

Unlike last year we managed to get there on time for the start of the conference, which we're very glad we did as Kevin's talk on "Taking your web app from 1 to 1 million users" had some useful tidbits of info for startups.

Taking your Site from One to One Million Users by Kevin Rose from Carsonified on Vimeo.

One of my favourite talks was from Francisco Tolmasky of 280 North on their upcoming awesome app for building beautiful interfaces in Cappuccino.

Introducing Atlas: A Visual Development Tool for creating Web Applications by Francisco Tolmasky from Carsonified on Vimeo.

The Guardian talk stood out for me in highlighting just how far ahead they are on the web compared to most other newspapers. The Guardian have been busy building a platform, sharing their information through open APIs to distribute it further and deeper than they could possibly achieve if acting alone.

Brit from Twitter made an awesome entrance by kneeling down to the audience and proclaiming "I LOVE WEB DEVELOPMENT" just before announcing Twitter Labs would be coming soon (which rapidly became RT'd by everyone in the audience).

After Party in Piccadilly

We had a great time on Thursday evening meeting, dancing, and talking with some of the dudes and dudettes we met at FOWA in the day, introducing Kevin Rose to the finer points of Cockney Rhyming Slang, and learning that some of Digg's employees really don't know their way around London.

Gary and Kevin Show

Gary V's talk on NOW being the time to get out there and start your web company was, for me, his most inspiring yet. No one else on the web manages to give me such motivation, such "why not" attitude to give everything I have to the business we run. If you haven't wateched or listened to a talk by Gary before, I beg of you to watch the one embedded below - you'll be glad you did.

Shortly after Gary's talk, the Gary and Kevin show commenced. Involving stage diving, butt flashing, geek dating, a Kanye interruption, and live Twitter commentary, the Gary and Kevin show put Live Diggnation to shame.

All in all, FOWA London this year was awesome. If you couldn't make it (for whatever reason), tickets are on sale for FOWA Miami right now.

P.S. Sorry the post a little delayed - we kinda came down with "FOWA Flu" shortly after returning which put us out of action for about a week. We're all better now and working full steam ahead on the next version of GoSquared. See you soon!

If you're getting errors such as "227 entering passive mode... Connection [Failed/Timed out]" this may work for you

I decided enough was enough and set about problem-solving: the developer's favourite. It turns out, as usual, the problem relates to the ports the EC2 firewall opens for its instances, namely, none at all. Since passive mode connects to any random port > 1023, this is a problem. So, what you will need to do is define a fixed port range for VSFTP to use for PASV connections and then allow these in your "Security Groups" firewall rules.

Note: This method will probably work on any server, just add the config settings and then open the correct ports in your software firewall or router

1. Specify a port range in which VSFTP will run PASV connections
Add the following lines to your vsftpd.conf file:

pasv_enable=YES
pasv_max_port=12100
pasv_min_port=12000
port_enable=YES

You also need to add an extra line to specify which IP address VSFTP will advertise in response to a passive connection, so underneath the lines you've already pasted in vsftpd.conf, put:
pasv_address={your public IP address}

OR if you don't have a fixed elastic IP address:

pasv_addr_resolve={your public domain or DNS}

2. Authorise required ports in a security group that applies to your instance

This can be done via the AWS management console (Amazon's EC2 web control panel), or in your own console:

ec2-authorize default -p 20-21
ec2-authorize default -p 12000-12100

Now restart vsftpd by typing /etc/init.d/vsftpd restart in your server's terminal.

If all goes well and it's your lucky day, passive connections should now work properly.

We're attending Future of Web Apps London again this year. We've been working solidly for the last few weeks to get some cool things ready for the event. We've mentioned it before, but the next version of GoSquared is just around the corner. This time we're going all out to ensure advertising with GoSquared means business.

The new stuff is really beginning to take shape and we can't wait to show it to you. If you're attending FOWA, don't hesitate to get in touch so we can meet up, we'll show you what we've got so far if you want.

A lot's been happening around here, and we've even gone and made some t shirts to celebrate. Geoff and I will be wearing them at FOWA if you wanna check 'em out If anyone's keen, we may get a few more printed - just get in touch if you're interested.

Oh and we hope you like the business cards. Thanks for stopping by and see you tomorrow if you're at FOWA!

We've shown you how to make pie with Adobe's vector drawing application, but how about those times when you need to give someone a cake?

Let's start with a new document (obviously) - choose web if that's what you're planning to use the final image to your site as this will ensure all measurements are in pixels and colours are set in RGB. The canvas size doesn't matter too much either, but 800x600 makes sense in this scenario.

To start the basic shape, use the Ellipse Tool (L) to draw a stretched circle with vaguely the same dimensions as those in the image. Make a couple of copies of this, and drag them off the canvas for now. Make another copy by Alt dragging the circle directly below by about 150 pixels. Also hold down Shift while dragging to keep the duplicate copy of the shape aligned to the original.

Using the Direct Selection Tool (A) select the top point of each ellipse and delete it by hitting backspace.

Using the Direct Selection Tool (A) again, select the point on the right of the top ellipse, and holding down Shift also select the same point on the lower ellipse. Now join these two points by going to Object > Path > Join (Command J). Now do the same for the points on the left of each ellipse. This will create a single shape from our two deformed ellipses.

To get this fairly random looking shape looking vaguely cylindrical we need to fill it with a gradient. Go the Gradient Palette (Command F9) and make 3 colour points. Make the points at the two ends of the gradient spectrum the same light brown colour. Make the third point slightly darker brown positioned at about 85%.

Now for something that many people don't use enough in Illustrator - Photoshop Effects. Make a duplicate of the main cylindrical shape we just made and go to Effect > Texture > Grain... This will bring up the Photoshop Effect Palette that will be pretty familiar to anyone who's ever dabbled in Photoshop. These textures aren't vectorised, though, so use them with wisely otherwise you could quickly defeat the whole point of using Illustrator in the first place.

Once you've clicked OK on the Photoshop Effects Palette, you'll see your new textured cake shape. Change its Opacity to about 65% by going to the Transparency Palette (Shift + Command + F10). Now just align the textured shape over the previous non textured shape of the same size.

So we've created the main part of the cake, and I guess you can take that out the oven for now and leave it to cool. Now for the icing. This part is pretty similar to before where we had the the 2 ellipses. Create another 2 ellipses of the same size as before (this is where making a few copies comes in handy) and keep them aligned, but ensure they're closer together than the ellipses we used for the main part of the cake. This time, delete the bottom point on the top ellipse, and delete the top point on the lower ellipse using the Direct Selection Tool (A). Now Join (Command J) the points and make it into a shape like below.

Fill the shape we just created with a 3 colour linear gradient. Place each colour in the same positions as before - 2 of the same colour points (I've used just white here) at each end, and then a very slightly darker colour at 85%. I used a slight purple just to spice things up a bit. Make your icing any colour you like.

Position the layer of icing on top of the main cake base by ensuring it's above everything else. Send the icing to the front by pressing Command + Shift + ].

Now take another one of those ellipses that you dragged off the canvas earlier. Fill this ellipse with white and Feather (Effect > Stylise > Feather) it with a Feather Radius of 15px. Ensure this circle is above everything (including the icing layer we just brought to the front) and align it to the horizontal centre, and vertical top of the main icing layer. The Alignment Palette can be accessed by hitting Shift F7.

Now select the icing layer that we formed with our two ellipses earlier. Use the Add Another Anchor Point Tool (+) to add a bunch of new points on the bottom edge of the icing shape. These don't have to be accurately spaced out or anything - they're supposed to give the effect of dripping icing once we've moved them about in the next step.

Using the Direct Solution Tool (A), select each of the points you just created, one at a time. Move every other point down a few pixels, and move a few random points up a few pixels. With a little experimentation, you should get a fairly natural effect similar to that in the image below.

To make the icing look like it's slightly raised above the cake it's dripping from, add a subtle drop shadow to the icing shape. Select the icing shape and go to Effects > Stylise > Drop Shadow. On the Drop Shadow Pane, set the Mode to Normal, Opacity to 45%, X-Offset to 0, Y-Offset to 1px, and Blur to 0px. Ensure the colour is black or very dark brown.

We've got a fairly tasty looking cake, baked and iced, now for a shiny silver base to sit it on. Using the same method as earlier, create two larger ellipses and delete their top points. Join (Command + J) the two ellipses to make one very short cylindrical shape just like a wider, shorter version of the cake base shape. Fill this shape with a linear gradient of 4 colours to give a chrome like appearance keeping these colours in greyscale. Give this cylindrical shape a drop shadow (Effect > Stylise > Drop Shadow...) Set the drop shadow Mode to Normal, Opacity to 65%, X-Offset to 0px, Y-Offset to 1px, Blur to 3px, and ensure the colour is black.

Create another ellipse of the same size as the ones used to create the shape we just made, and fill it with a dark grey. I used a colour of 50% black.

Drag another one of the ellipses onto the canvas that you dragged off earlier - keeping it the same size as the main cake shape. Fill this circle with a very dark grey (darker than the last one we created) - I used 80% black. Feather this ellipse with a Feather Radius of 15px.

Align each of these 3 shapes to the horizontal centre and Group (Command + G) them. Send them to the back with Command + Shift + [ and ensure they are horizontally centred with the main cake shape too. Now you have a cake, baked, iced, and on a shiny plate!

Now for the candles. It's time to draw a few more ellipses - this time we need to make a really tall, thin version of the basic cake shape that we made before. Use the same method - draw two small ellipses directly above one another and then delete the top points and Join (Command + J) the two shapes. Fill this shape with a 3 colour linear gradient with the 2 end point colours the same, and a darker shade of the same colour at around 85% along. Your candles can be any colour, but I decided to go for a bright pinky red.

Make a copy of an ellipse of the same size as the ones you just used to create the basic candle shape. Fill it with a similar, preferably slightly darker colour as that of the main candle shape. Align this to the top of the candle shape so it forms the top of the candle.

Make another copy of that same ellipse, but scale it down to about a third of the original size. Fill this ellipse with a dark colour, I just used black. Feather this ellipse with a Feather Radius of 2px. Align this to the centre of the ellipse sitting on top of the candle.

Make yet another copy of the ellipse and proportionally stretch it so that it's slightly larger than the candle width. My ellipse was around 50px wide and 14px high. Fill this ellipse with black and Feather it with a Feather Radius of 12px.

That's the main candle made, now to light it. To make the flame, draw another ellipse, but this time stretch it vertically so it's taller than it is wide. Using the Convert Anchor Point Tool (Shift + C) click on the top point of the ellipse you just made. This will cause that point to become a vertex rather than a smooth curve. You should now have a nice flame shape. Fill it with bright yellow.

To make the flame more realistic, make a copy of the shape and proportionally scale it so that it's slightly smaller. Align it to the bottom centre of the first flame shape. Fill this with a slightly darker shade of yellow. Repeat this same step a few times, making the shape smaller and filling it with a slightly darker colour. The centre of a flame, if you look closely, is actually made up of a spectrum of blue. Fill the smallest couple of flame shapes with blue. Ensure all of these shapes are horizontally aligned to the centre and vertically aligned to the bottom of one another. It would probably make life a little easier to Group (Command + G) the flame shapes together so that you can easily align them slightly above the centre of the candle shape.

Now make a few copies of the whole candle shape (again, easier if you Group all the candle elements together here) and position them on the top of your cake however you wish.

Now just dim the lights, and you're ready to sing happy birthday. Here's the outcome. Yum.

Get the Adobe Illustrator CS2 File [705KB]

Don't have Adobe Illustrator? Download the SVG.

Don't forget to save some cake for me when you're done. Thanks for reading!

So Apple's Media Event (on the memorable date of 09.09.09) is done and dusted, the new iPods are on the shelves of every Apple Store you care to visit, and iTunes 9 is most likely sitting on millions of people's desktops.

But what's changed? I'm pleased to say quite a few things, in varying degrees of magnitude. Most of the changes to the iTunes app itself are subtle, but could be good indicators of where Apple's UI intentions are heading. Then there's the iTunes Store which has seen its biggest overhaul yet. There's no shortage of design tweaks to have a look at and learn from.

Changes to the iTunes Application

The Toolbar

iTunes at first glance doesn't look very different at all, but when we compare 8 and 9 together it's clear they've been paying attention to the details and refining things - the main toolbar is 5 pixels shorter for example. Losing 5 pixels from the height of the toolbar may be overlooked by some as unnecessary , but any attempt to reduce the vertical space used (and often wasted) by toolbars in software is always good to see in this age of increasingly wide displays where vertical space is at a minimum.

The toolbar has also been lightened slightly - the vertical gradient is now more obvious than 8's darker, flatter bar. I prefer the lighter feeling of 9, and I feel many apps are becoming a little too dark in Leopard, so I hope iTunes 9's brighter more curvaceous toolbar will be making its way into more apps.

The Buttons

You will notice the playback buttons have also been altered slightly, going from a plain and simple linear gradient in iTunes 8, to a more sophisticated gradient with a subtle blur in 9. The volume slider has a lighter appearance making it clear that pulling the knob to the right will increase volume to its maximum. The speaker icons (that represent up/down volume) have been made lighter, and look more indented now.

The Sidebar

The headings (still in all caps) are ever so slightly darker than in iTunes 8, but that's probably the most subtle change here, along with the slightly lighter (OK, this is almost unnoticeable now) blue background colour.

Icons

What's more noticeable are the changes to icons for different content types. Apps - now has a more understandable rounded square surrounding the "Application" symbol. The previous orb was a beautiful little icon, but perhaps it was considered too Vista-esque to represent Apple's mobile software strategy? Almost all of the icons have had some attention paid to them - the Movies icon is now noticeably shinier, the TV Shows LCD screen looks like it's been upgraded - with a smaller framed TV, and no longer representing one of the Sony Bravia LCDs. The Audiobook icon is now a more sober shade of brown rather than the old, almost garish, orange. The little person in the Podcast icon is now more central - before he was a little too low in comparison to the surrounding circles.

The iTunes U icon is entirely new - this media type never used to be given such a prominent location - perhaps a sign that Apple has realised how lucrative the educational market can be. Whether they start monetizing some iTunes U content or simply keep using it as another reason to keep users in the iTunes ecosystem remains to be seen. The bell for Ringtones seems to have a slightly different shade of bronze, but changes there are almost non-existent. And finally the Radio icon has been given a much lighter, more detailed look - the radio tower's metal structure is now clear looking more like the Eiffel Tower. The radio waves have also been coloured blue, ensuring they are visually different to the radio tower structure itself.

Who'd have thought you could analyse something so small in so much detail? Having spent a lot of time working on small icons of similar sizes myself lately, I often find it takes much more time and effort getting something at 15 pixels to make sense than getting something at 256 pixels to look good. It's great to see Apple have kept focussed on the details.

In our next post we'll have an in depth look at the vast array of changes made to the iTunes Store.