Posts in the Web development category

While retro-fitting QUnit felt like the worst task imagineable, starting up front it's a great tool that helps to really give you confidence in your code. There are a few resources out there, like the slideshow presentation on QUnit by Ben Alman. It's been a few weeks since I last used it, so right now I'm trying to get familiar with it so that I can hopefully drive it's adoption in my new development team.

I have multiple Twitter accounts, generally one for each of my projects. Although I want people to find those accounts organically, sometimes you can increase your Twitter accounts worth by following more people, who, in turn, follow you back.

It's a bit of a hack, or probably better described as playing the game, but not something I would do with my personal account. Spreading news of my brand/projects is important though, so I am willing to just follow larger numbers of people. If any real followers want to really interact with those accounts, they're likely (guaranteed?) to @ the releavant account in their message.

There is another case, where you might want to follow all, or most, of the accounts that a friend follows. Whichever case you're interested in, below is a script you can run in your browser and it will click follow for every account it finds.

javascript:$('.follow-button').each(function() { $(this).click(); });

This could be adapted to work on Facebook or any other social network. Google+'s use of circles, rather than lists, makes this harder to implement, but maybe that could be turned into an extension?

To make the process even easier, just drag this link to the bookmark bar in a modern browser, then all you have to do is click on the bookmark to follow everyone you can see.

Possibly one of the few killer features missing from Google+ is the ability to create vanity URLs. Facebook, Twitter, LinkedIn and all the rest let others find you with fairly short URLs like http://twitter.com/cchana or http://linkedin.com/in/cchana

While quite a few people have commented on this, if you have a Google profile URL - mine is http://profiles.google.com/cchana - you can use that to send people directly to your Google+ profile.

Another option, and one I've adopted, is the use of your own domain to redirect users to wherever they need to go. By adding a '+' to the end of your domain - http://domain.com/+ - with the power of an apache redirect, you can take users straight to their Google+ page. I've found it far easier to find a few friends of mine who have that exact redirect in place than to go to Google+ and find them. Hopefully this is a temporary situation and Google open up vanity URLs for everyone.

If you'd like to do the same for yourself, feel free to use the code below:

Options +FollowSymlinks
RewriteEngine on
# Social Network redirects
Redirect 301 /+ http://profiles.google.com/cchana

Simply, the above just redirects you from http://domain.com/+ to my Google profile. This in turn, redirects to my Google+ profile. Not ideal, and not something new users seem to be able to do, but a good stop gap. If you don't have a friendly Google profile URL, you can always replace the URL with your Google+ profile.

I went to the extreme and replace the '+' with a '-', '*' or '^' takes you to Facebook, Flickr or Twitter respectively.

Much of the credit for this method of a friendly Google+ URL, must go to Boback Shahsafdari and Adrian Parr.

While Google's +1 service has been around for a few weeks, their result Google+ and UI improvements are more recent announcements. The launch of Google+ brought back memories of the ill-fated Wave platform that still exists but is dead in the water.

When Wave launched last year, I was excited at the prospect of finding a new way to communicate effectively with friends and colleagues, but a mix of factors made that impossible. Google stated that Wave is email, if email was invented today. A bold thing to say and it didn't pay off and Google Wave is probably Google's biggest failure. Google+ has a lot more promise, and I for one, would love to see it succeed.

One of the problems that plagued Wave was the invite process. They were far and few between, and while invites had served GMail so well, the concept is a little outdated now. If you're a company like Google, or Apple for that matter, it's probably too much to expect people to wait for an invitation to a service. Your reach is already vast and when you announce something like Wave and Google+, a lot of people want in instantly, if only to find out more about the product by actually using it.

Google+

Google launched Google+ a few days ago and to be honest, I completely lost it's launch in the +1 project, not really getting what the fuss was about. Once a few 'acquantences' started talking about Google+, I realised it was more than an extension of the +1 project.

Put simply, it can be viewed in one of two ways:

1. A social network that learns from all the mistakes of Buzz and Wave (maybe even replacing the former, if not both)
2. A real rival to Facebook

Either way, I couldn't be more excited about yet another social network. While LinkedIn serves a purpose and Twitter makes it easy to follow the information you want, Facebook has always been a bit of an odd one for me. I liked it's simplicity early on, but it's grown into a monster and I find a lot of friends rellying on it for way too much.

The difference between Google+ and Facebook is that Google+ has Google behind it. Facebook is Facebook and unless they branch out in to advertising, search, email and whatever else in a big way, it will be a site with a range of features. Google is now like an entire suite of software. A free suite, I might add.

Trust in Google?

For the most part, my email is handled by GMail, I use Picasa (and Flickr), YouTube and Google Docs. I look at website stats through Google Analytics and monetize through AdSense. I've even advertised through AdWords! I have an Android phone and there's a level of trust I have in Google to deliver me quality search results and an excellent user experience in all of it's products. This isn't always the case, but in 90% of my interactions with Google, I am a happy customer. If my interaction with Google means that they are able to serve me better ads, I don't have much of a problem with that. I've been using the internet long enough to be able to distinguish between ads and content 99.9% of the time and have enough self control not to be sucked in and buy things I don't need.

Google+ Android App

The Google+ Android app has already had one update since I downloaded it, but these incremental changes are fine by me if I'm getting features on to my device quicker. There are a few things I'd tweak in the app and the desktop version, like making the feed more relevant, rather than using as many options as possible to bring old posts to the top, but it's pretty good as is. Muting, being able to +1, comment and share are all easy and familiar and the Instant Upload feature is brilliant. Data intensive, for sure, but a great feature to have. How this effects Picasa storage remains to be seen, but maybe Google will be giving more away for free?

UI

Lastly, I'd like to talk about the small UI improvements. You've probably noticed them if you use Google at all. The new, dark, global navigation bar makes discovery of other parts of Google much easier. Switching between it's accounts is straightforward, and although it was a little crazy for a few days, it's working as expected, if not better.

The Google+ and +1 projects are tying in together nicely and I am enjoying making use of both, although going back to results to +1 something is a little counter intuitive and not something I'll be doing often. Tweeting results is more likely, but hey, Google know who I follow and improve my own search results with that information too!

I noticed yesterday, on my iPod touch, that there's a slightly different mobile UI too.

Previously you had a cluttered interface that showed Google services. Not very useful for a lot of users I felt. I certainly made use of this feature maybe 3 times in the last 3 years. Now, we have the above, a small list of links that are much harder to click on... however, if you swipe down on your device, you get the following:

Yes, I noticed this change while performing a vanity search, but it's a great application of gestures on a mobile device. The user gets more of what it is they really want but all the options are still there within easy reach.

More of the same from Google is more than welcome.

Circles

If you'd like to add me to one of your circles, or just follow me, check out my profile!

After launching receeve.it, I thought there was more I could do to make it stand out that little bit more. One thing I really wanted to include as a part of the project, was Google Maps. It made sense on most levels, but I've never found a practical home for it on the site. I've tried backgrounds, 'widgets' and more but it never just works...

The use for Google Maps hit me in a moment of real inspiration. Time to improve error handling for receeve.it!

404

If you're unlucky enough to come across a 404 page because of the site's migration from one service to another, you'll now be greated with a much more appealing 404 page than anything I've built before.

The 404 and error pages now have Google Maps as a background with an info window on top. Feel free to take a look at the source of the page, it's really easy to do!

Although the layout and feel are very different to the rest of the site, I'm hoping it serves it's purpose a lot better. Making this change also lets me see how the branding works in another situation and track who's ending up where (and more importantly), why they are where they shouldn't be!

Other errors

Other error pages get the same treatment, but those should be even less common and actually serve the same purpose as the 404s. If anything, it's just nice to be able to do something different and fun rather than making the sitation a bit too serious for users of receeve.it

Almost two years ago, I launched the original version of receeve.it, a bookmarking site for all the cool stuff you see online and would like to buy, or more appropriately, receive as a present.

After a bit of a fuck up on my part, I re-built the site and re-launched. Few front end tweaks but a complete overhaul of the back end system. The site had a small number of users but I couldn't quite figure out the best way to promote the site. By the second launch, the number of competitiors for this service has grown and Amazon's own wishlist service was doing all of that and more. The turning point for registrations was having receeve.it accepted as a part of AddThis. A great achievement and there was a lot more traffic finding it's way over to receeve.it

Unfortunately, the day of acceptance to AddThis coincided with a big event in my personal life that stopped any real development for over a month. I managed to make a few minor tweaks but this magazine, Nike+PHP and a currency conversion site I had an idea for took over the development time I had.

This mag launched with a few friends as contributors, Nike+PHP matured to v2 and the currency site, launched obscurly in April/May 2010 got some attention.

The currencty site already did it's job well enough, but I never quite had the end goal in sight. Earlier this year, I sat down with Photoshop and trashed out a decent design. The logo/brand never felt the best, but I thought the UI was a good effort and moved on with what I had.

QCon got in the way, but beacause of the amount of time I spent learning about HTML5, the currency site benefited from it.

In March, I decided to cut my losses with receeve.it as it is. I informed AddThis, who kindly responded and removed receeve.it from their list of services and I posted a closure notice on the website. The end of March arrived and I closed registrations and at the end of April, the site closed down briefly.

Re-launch

As part of the re-launch, I turned put the receeve.it name to the currency site.

The site is now a one page app, with a simple three step process.

Enter the amount of GBPs that you'd like to convert, choose the currency you'd like to convert to and hit go!

If you have JavaScript enabled, you'll see your results below and if not, you'll be redirected to the appropriate page. Because it's a HTML5 app, you'll see the URL changing regardless and back and forward actions have been accounted for in this situation. You can also share any URL from the site, which will hopefully make it more useful.

I hope to add more retailers and hopefully get the site to a good place where it's running itself. It's pretty much doing that now, but could do with a few tweaks, which I'll apply as I find the time.

If you're off on holiday soon, convert your currency on receeve.it and you could save a few pounds, or, more appropriately, gain a few dollars!

While working on a HTML5 app/website that is currently in development, I noticed that mixing the browser's history API and Ajax calls caused multiple calls to be made and then rendered together. Even though my JavaScript code should have cleared the first lot of data and replaced it with the second lot, I think the calls were made too close together. Luckly I came across a post on Stack Overflow that showed how you the XHR request in JavaScript actually contains an abort() method. The response to the post has enough detail to get you going, but I thought I'd show a before and after here.

function doSomething() {
  $.ajax({
    options
  });
}
window.onpopstate = function(event){
  //do stuff like this:
  doSomething();
}

Taking the example above, I had an Ajax query that could be called by other functions, but was also used inside the window.onpopstate event so that when the user navigates through the browser's history, the page would update. Much like how Facebook now works.

To stop doSome0thing running multiple times, I made the following changes (highlighted in green).

var xhr;

function doSomething() {
  xhr.abort();
  $.ajax({
    options
  });
}

window.onpopstate = function(event){
  //do stuff like this:
  doSomething();
}

The Ajax call is still called by the window.onpopstate event, but is now aborted if the doSomething function is called again, which is how I trigger the Ajax calls themselves.

It wouldn't be a stretch to say that spending 4 of my last 10 days at conferences has been overwhelming. Looking back, QCon was a great experience, but geared far more towards seasoned software engineers rather than anyone in the web development field. Apart from friday which had a great HTML5 track.

Today, I had the joy of attending the State of the Browser event in London.

With representatives from Google Chrome, Mozilla, Opera and towards the end, RIM, there was a lot to talk about and a lot to learn. There was a last minute change to the schedule with the Microsoft rep having to pull out due to personal matters, but he wasn't missed by me or many others. It was a great day for everyone to show where things had moved in the last 10 years or so.

As was rightly stated, 10 years ago, the situation was very different with browsers doing their best to sell themselves on their unique features. Although this may still happen in todays world, the collaboration and thought that goes into each new feature is impressive.

My browser of choice is currently Chrome and having seen Michael Mahemoff now speak twice, I've a great appreciation for where Google, Apple and the W3C have taken us. Mozilla really impressed today and Opera were a big surprise. All positive and all clearly proposing something different.

A member of the Mozilla team described Chrome as the window to the web, very little clutter, with the browser just delivering whatever is asked of it. Firefox was then described as a 'butler' in the sense that it not only delivers the web, when you ask for something a little more, Firefox is there to offer it to you. A fantastic analogy as for me, Chrome is what I expect of a browser, while my colleagues, friends and clients could all require something very different and find the Firefox, Opera or even IE offer that something.

The day offered two breakout sessions where I attended one talk on CSS3 by Chris Mills and another on optimizing web apps by Martle Ubl. The first was very interesting for me because I realised a few things I've struggled with CSS3 all comes down to documentation and a lack of time to experiment on my part. All things I'm going to push for both at home and work.

The HTML5 talk was a lot quicker but concise. Some of the advice was common sense on reflection but not always put into practice.

Why, in a loop, read and write again and again? Why not read and read and read and then write just once? Surely a lot quicker? It was described as being a magnitude faster, but I'm not sure how true that is. Would be interesting to see though. Especially versus a loop that contained multiple append()'s as apposed to .text() or .html() (jQuery methods).

Being on a Saturday was never going to be ideal, now I only have half a weekend, but I enjoyed it and took enough away for it to have been worthwhile. Big thumbs up!

Check out my State of the Web set on flickr and follow the feed on twitter.

Ever since my wife and I made our way back from Rome, I've wanted to setup a travel based website that used the might of Google Maps to convey useful information anyone who may be thinking of visiting any where in the world I may have already been. Great idea I thought, but it's harder to execute.

I had experimneted with setting Google Maps as the background, rotating the maps (with CSS) and a whole host of other things. Today, I stumbled across an article by Wade Hammer which talks about how he'd gone about making Google Maps the background of his website and I have to say I am really impressed with his execution.

Not only has he used Google Maps to great effect, he's used a fancy web counter and one of my favourite fonts from the Google Web Fonts collection.

A great looking website that I wish I'd built myself. As I find myself falling back into design, this will inspire me to build a follow up to my next project (which is loosely travel related) with something travel dedicated.

For three days this March, I attended the QCon conference in London. It was my first QCon and something that turned out to be quite an interesting few days.

Hosted in the Queen Elizabeth II Conference Centre, the conference was hosted as a way of reaching out to programmers, or software engineers, and promoting a range of products, services and work processes.

There were 15 tracks all together and it was great to have the luxury to mix and match.

Day 1 featured an interesting iOS/Android track.

There was the unforunate site of people promoting their companies and services through their talks, most noteably Adobe, but generally, the speakers were dishing out their experiences and messages in interesting and positive ways.

Further to that, I'd even say that some people were actually chatting shit. The track on REST wasn't bad but towards the end, it was a load of bullshit, hacks and just general nonsense.

Representatives from both Twitter and Facebook both made appearances, Facebook had more than one, giving great talks. The biggest plus I took away from QCon was knowing that established services like Twitter and Facebook face problems with scaling, caching and availability almost as much as your average web developer with a dream of being the next big thing.

They both showed they knew how to handle it, but for me, Twitter's scalability seems far more sensible than Facebook.

Frasier Spears gave an inspiring talk on his experiences of tooling children at the school he works at with iPad. They now have a 1:1 ratio of iPads to kids and from the talk he gave, you would expect the iPad to be an actual educational tool. For me that made Apple's journey over the last 20 years come around full circle. Apple's were once the dreadedcomputer in the corner that no one understood, but under Steve Job's guidance they've now become the 'computer' that everyone wants a piece of.

Mike Lee also gave an inspirational talk, titled How to Make Apps That Don't Suck. Great title and the presentation lived up to the title. As a developer that's been around and done so much, he's now using his time to promote better end products. Why develop an app and then release update after update to give your users when you want, when you could just give them what they want in the first place. Not a luxury that everyone has, but something we should all aim for.

Day three saw the HTML5 track and the promotion of Single Page Web Apps. Great idea, but not the easiest to execute. Well, that's not strictly true anymore thanks to things like HTML5 and the History API. Neither is compatibe with all browsers right now, but an excellent way forward when you know that Microsoft are trying to kill IE6.

All in all, QCon was a good experience. I'd definitely go again, but pay more attention to what's on offer. Day three was the best for me. I've only highlighted a few things above, but for the more traditional software engineers (as apposed to web developers) there's a lot to see.

You can check out a handful of photos that I took, over on flickr.