Writing on Tablets Tech stuff from @yeltzland

From Bing To Skype

After working on Bing for as long as it's been in existence - I was there back in the "Windows Live Search" days - I've now taken a position with the Skype team in London.

It will be a big change for me, and I'll really miss working with some of the smartest people I've ever met. However, I'm definitely ready to try something new and I'm very excited to move to Skype at what's a very exciting time.

I'll hopefully be learning lots of new skills and techniques - and reacquainting myself with some old ones! - so I'm also hoping I'll have some interesting things to post on here too.

Personal

Adventures in Posterous template design

I've got several blogs than run on Posterous - including this one - but to be honest the default templates are all a little dull. Therefore I thought I'd have a go at building my own fully customised template.

Now as you can see I'm no designer, but I am reasonably pleased with the results so far with just a few remaining minor glitches.

There are some obvious limitations on what you're allowed to put in your Posterous blog template, the main one being no additional JavaScript references are allowed - either to an external file or inline.

This is fair enough for security reasons, but that means the dynamic features of the Bootstrap framework I'm using don't work - for example trying to use a dropdown in the top nav bar now fails. Unfortunately this means the navbar doesn't really match the one on the main BraveLocation website, but I don't think there is anything to be done about that.

The other main problem which I haven't solved yet is the injection of the Posterous control at the top right of the page messes up the size and hence the alignment of the top navbar is slightly off. More irritating than anything else, and I can live with that as my CSS skills aren't strong enough to bother seeing if I can solve it.

Aside from those small issues, overall it's really nice this blog now at least resembles the main website, and for me I'm pretty happy with the way both look.

Bootstrap Blogging

Updating my Chrome extension to manifest version 2

I got an email from Google saying I needed to update the manifest for my "Bing Translate" Chrome extension - which turned out to be slightly trickier than I thought.

According to the depreciation guide, developers need to update the manifest file that describes the extension properties to version 2 reasonably soon - although to be honnest without looking I have absolutely no idea what version Chrome is currently on.

You can see all the code on GitHub if you are interested, but the trickiest change was to do with the improved security model to help prevent cross site scripting attacks. In particular my code calls the Bing Translate API in a JavaScript call to http://api.microsofttranslator.com, which I now had to specifically enable in the manifest file.

The line I had to add to the manifest was:

"content_security_policy": "script-src 'self' https://api.microsofttranslator.com; object-src 'self'",

... a detailed explanation of which can be found on the Chrome Extensions documentation site

The key point to note is that this only works for https secure websites, but fortunately the Translator API also works via https://api.microsofttranslator.com, so once I'd figured that out everything worked again.

If you are one of the users of this slightly useful tool, please go to Tools->Extensions menu and click on "Update Extensions now" to get the updated v1.1.

Bing Translate Chrome Extension

Making a JQuery Slideshow

I've been trying to learn more about jQuery recently, and had an opportunity to try to figure out how to make a slideshow on my friend Josie's web site.

Josie has been trying to show how she paints her fantastic pictures by taking a photo every hour during the creation process. We've been thinking for a while on how best to show this on the website, and decided on making a slideshow to animate the images as there are over 60 in the set!

Searching on the web, there are a lot of JQuery slideshows out there of differing quality, so I was very happy when I found a fantastic article by Jonathan Snook, that not only documented a simple but effective slideshow, but also explained how it worked.

You can see the complete code in the slideshow at http://www.josiemccoy.co.uk/gallery/hourlypictures.aspx, but basically it can all be done in a couple of lines of code which reorders the stack of images (which have been all placed on top of each other) dynamically.

I amended the code slightly by adding in a "pause" and "play" button via a simple boolean variable, and am pretty happy with the results.

I added the code to Gist if you want to use, improve, extend - and it turns out Posterous will automatically embed inline if I just include the Gist URL:

 

Jonathan's code is very elegant, so as well as coming up with a pretty simple solution I also learnt a lot about image handling and transitions in JQuery.

Just for fun, here's the completed picture of LeeLoo - Milla Jovovich from The Fifth Element:

jQuery

Moving from Mercurial to Git

For a while now I've been keeping my personal code repositories on BitBucket - which I'm really happy with - and using Mercurial as my source control tool of choice.

However since Bitbucket started also supporting Git - and that's what all the cool kids seem to be using nowadays - I'd thought I'd switch all my code over to Git to see what all the fuss is about.

Converting from Mercurial to Git

There are plenty of tools that in theory should help to export Mercurial changelist details to Git. However most of them didn't seem work very well on Windows, and the couple of things I tried didn't really work, so I was a bit stymied.

It's also slightly surprising that BitBucket don't offer tools to do Mercurial->Git the conversion, but to be honest I haven't drilled into the details and maybe it's not so straightforward?

After pondering for a bit, I decided to recreate my existing Mercurial repositories in Git by manually creating a new Git repository, then simply adding in the latest version of all the files.

There's an obvious drawback in what I did - I lost all of the change history of the existing Mercurial projects. However I decided there was really little of value for me as I'm really using Bitbucket just as an offsite backup right now, so it was OK to make the switch.

Using Git for Windows

The main reason I decided to take the plunge and move to Git was the release of what is a great new GitHub for Windows app released recently.

Phil Haack - ex-MSFT and now at GitHub - has a great blog post about what GitHub for Windows does, and another one about how to get it working for non-GitHub repositories, obviously useful for getting setup with the BitBucket repositories.

Other than a few issues with initialising the local repositories using the drag and drop functionality from Explorer which intermittently crashed the program - I think it was because they were initially empty - it all worked very smoothly.

The tool is very simple to use, and much easier than the command-line utilities I was used to in Mercurial, although power tools are there under the covers if necessary.

If you're using Git on Windows already I'd definitely recommend trying out the GitHub for Windows app, and a couple of days in I'm very happy I've made the move from Mercurial.

My first project on GitHub

Now I was all set, I decided to release my "Bing Translate to English Chrome Extension" on GitHub, just in case anyone was interested in how it worked or wanted to extend how it works. In the unlikely event that's you, feel free to drop me a line as I'm very happy to help in any way I can.

Development Git