Stormfly; A PC on your wrist

I’m a huge fan of the kickstarter concept. As well as allowing technologies to exist that may not have without it, it allows me as a geek to get in on the ground floor.  I’ve backed 2 things so far; My Pebble, which is fantastic but was incredibly infuriating to wait for, taking well over a year, and Stormfly, which I backed about 4 months ago in March.

Stormfly’s slogan is “Like a PC on your wrist”.  In effect, it’s a wearable USB which you plug into a mac or windows PC and boot from, giving you access to a linux OS and all your files.  There’s a bunch of nice value adds such as a back up and 24h replace service.

There’s a bunch of reasons you’d want something like this. Perhaps security, so you don’t keep yourself logged onto friends machines. Maybe you’re a big traveler and stay with friends.  My personal reason was simple; When I travel with work I have to take my work laptop (locked down to the max and so useless for personal stuff) and my own laptop, for email, Facebook, videos, maybe a bit of development.  My hope was I could boot Stormfly up on my work PC before all the encryption and lockdown shenanigans, meaning I could just take my work PC and still have a personal machine.

The Stormfly cost me $74 including shipping (yet another kickstarter shipping from China that charges more to send to HK than the US!), which was a fairly pricey bet that this would work.

image

I was really suprised to come home and find my stormfly had arrived having had no shipping notice, nor a kickstarter update to say they were shipping. That said, this was a nice surprise, and I’d rather it be this way as I’m far too impatient when waiting for shipping. The box is fairly small, basic cardboard so lacking a bit of shiney but sufficient for the job.

It comes with some basic instructions (namely, how to boot in mac/windows to stormfly) and has a QRcode for the website if you want more information.  I dug straight in for the test.

My test machine for this was an X200 IBM Thinkpad. Plugged in Stormfly, held the thinkvantage button and prayed.

image

Hey presto!  It works.  The installation process is fairly painless; as with everything these days there’s a sizable download update.  The OS is basically Ubuntu with a couple of extra apps thrown in related to Stormfly so it can back up for you to the cloud.  I’m pleased by this as some of the earlier updates implied it might be quite heavily customized; and whilst it might be under the hood, in appearance it’s just Ubuntu.  All the updates are direct to the USB, so I can now take that and plug it into my Mac, my friends computers etc. and it will be my personal environment.

I was lucky enough to get an email directly from Stormfly a few minutes later.  I’m the first Kickstarter backer to register their Stormfly, so it’s a big milestone for the company (and a little geek victory for me).  No word on whether they’ll throw in a t-shirt or some free subscription to congratulate me ;).

I’ve played with it for most the night, managed to get Java and IntelliJ up; I forgot how terrible Linux is for getting most stuff installed and working.  It’s really very nice and nippy.  Will it be worth the cost?  I think that will become clear over the next couple of weeks as I head out on holiday, followed by work travel, and I’ll be leaving my regular laptop at home in favour of Stormfly.  If you’ve got a corporate laptop and are fed up of carrying 2 around, I highly recommend you purchase one.

Technology & Innovation; The Future of Banking Conference

I was fortunate enough this week to attend the “Technology & innovation- the future of banking” conference held at the renaissance hotel in Wanchai by FST media.  The conference consisted of about 10 or so booths with a variety of technology companies and a host of speakers, primarily from the banking industry.

As with any conference there were both good and poor presentations, but overall it was a fantastic day.  The main buzzwords for the day were mobile, innovation and customer.  The first 2 are fairly standard at the moment, but it is the latter, “customer” which I think is the most interesting one.  A number of the big APAC banks were showcasing big new products or streams which put the customer front and center, making it as easy as physically possible for a customer to do a transaction with them.  The best example of this was Citibanks funky new double touchscreen ATM which is now in 3 regions and coming to HK; customers can request a loan via their mobile with almost instant approval and take it to from the machine; they can apply and be approved for a credit card at the machine, and the card will be printed and provided there and then.  Lost your bank card? A thumb print is all you need to get a new one.

I think for all the fancy gadgetry, the ability to apply and recieve a credit card in a matter of minutes is going to be a massive winner for them.  People are incredibly impatient and lazy, and will always follow the path of least resistance.  Going to a branch, getting forms, filling them out, posting, waiting 2 weeks is far too long for a generation expecting 24 hour access to a full suite of banking services.

Standard Charter also continues to echo the customer first mantra and showcased a huge sweeping change to their client facing technology. A fully responsive website has been built that looks beautiful on all screens, and a new mobile app which has been designed to be intentionally as simple as possible; Very apple, and very refreshing to see a bank innovate and have a true direction and opinion when it comes to design.

The first speaker panel of the day through up some very interesting insights and quotes that show where the industry is heading. (Quotes may be paraphrased due to my less than sterling memory)

Bring your own device (BYOD) isn’t an optional thing’ it’s here and people expect it.  We have to have it in place. We now have to backtrack and get it working as quickly as we can.” – Ian Rae, head of technology for ANZ bank

“We haven’t done the financials and put a business case together for Byod as its just demanded of us; our competitors use iPads, we look behind the curve. The main benefit of BYOD is staff retention, it’s something people want, and that’s hard to measure”-Micky lo, global head of technology, China, Deutsche Bank.

My personal favourite insights came from Minerva Tantoko, head of client facing finance technology at UBS.  They’ve introduced hackathons (under a corporate name) in the US.  The difference to other banks is that the winning projects get funding.  In her area they’ve just launched a new and strategically important iPhone/ipad app in the US which came from the first hackathon.  That’s a hell of an incentive for staff to participate and a great way to attract talent.  Some of the other banks commented they gave extra annual leave away to the victors.

The other interesting UBS concept is that of “social coding”. Minerva didn’t elaborate more than to say they had Social Coding and anyone anywhere could look at and comment on code.  I’ve followed this up with an ex colleague who’s there and he’s confirmed they’re now using GitHub enterprise.  Very cool indeed.

One of the final speakers of the day was Ian Rae from ANZ.  In a time when other banks are rapidly contract, saving costs and taking the austerity approach to handling the financial crisis, ANZ are investing to win.  They’re rapidly expanding the bank to cover a multitude of new sites in APAC, with a long term view to expanding globally.  They’re “hiring selectively”and putting their technology and innovation to the forefront as they expand (yet again with the “customer first” concept).  It must be a really interesting challenge to expand rapidly, but without being weighed down by the legacy systems of traditional big banks.

Overall, a really interesting and thought provoking day, even if I didn’t win one of the iPad mini draws!

Dipping my toes in Node.js

Having played around a little with Node before in hack projects at work, I wanted to have a proper dive and get my hands a bit dirtier. As a result, I’m midway through another increment of http://lastband.in, this time with a node backend.  Here’s some things I’ve discovered so far

Use Express 3.0 and persist with it

I started out wanting to do a slightly different project connecting facebook to some other bits and pieces.  When you sign up with Facebook it offers to kick you off with a basic project in Heroku, which is a very nice feature; If you don’t know Heroku, it’s a great place to deploy stuff for free when starting out and offers a lot of nice tools.

The basic app uses express as it’s HTTP mechanism. If you google there’s a few “roll your own” solutions, then express and connect.

I wanted to use handlebars as my templating library which should be easy enough, but I instantly ran against a ton of issues, mostly because I was ignorant to the ways of express; When Express went from Express 2 to 3 a lot changed, and it seems a lot of the internet hasn’t caught up yet. All of the mixed documentation got me in a faff so I switched over to use connect. DO NOT DO THIS! It’s very very difficult to google, there’s very little documentation on the main site and the internet has very little to offer.

On the other hand, express is as close to a standard as you can get in node land, and once you wrap your head around it and find some reliable articles, it’s actually quite usable! 

How to use Express 3.0 with Handlebars

I was going to post the server up here but instead I’ve whacked it up on my github at https://github.com/samberic/express-handlesbars-starter. 

Node.js is still very immature

Whilst node is undeniably awesome, very easy to use, and just a lot better for quick projects and fast progress, it’s still at the very early stages.  A number of the projects I tried using in npm just wouldn’t work at all. Want to profile your app on a mac? Not a chance.  All very frustrating, and would certainly be a blocker from using it in the enterprise.

You’re not in the browser any more

For lastband, it worked in 3 tiers;  first, find the band on last.fm, render a handlebar template. Then, find artists with that name on bandcamp, render a handlebar template. Then, for each artist, get their discography, and render a handlebar template, then add them all together with a bit of jquery.

This was the easiest way to do it in the browser (I thought at the time), as I was dealing with 3 different API calls.  When porting to node I spent ages looking at JQuery replacement libraries (most of which are based on jsdom and are terrible/won’t compile; If you’re going down this route I recommend Cheerio) at building the html up in this incremental fashion.

I got this working, but it was slow, the code was fugly, and it just didn’t feel right.  As a result, I switched it up; after playing with JS for a bit I realised I could just append each API JSON result to the previous one, resulting in one massive JSON doc; Combine that with 1 single handlebars template, and voila! Now my template is clean and very obvious what’s going on, and my code is to.  

Corkboard: Online image pasting/collage making

So this weekend inspired by a project a couple of friends are doing I decided I fancied hacking around with the HTML5 paste API.  This quickly and rapidly turned into Corkboard, which you can see at http://pastey.samatkinson.com.  Here’s a corkboard of some of the photos  of me playing recently to satisfy my massive ego.

All in all I’d guess it’s probably taken somewhere between 6-8 hours, of which most was due to my inability to RTFM and the fact Javascript hates me.  Most of the project is just mashing up a bunch of pre existing ingredients.

STRd6 imgpaste plugin

When googling around for how to do it, most of the stackoverflow esque threads had been jumped on by STRd6 to point to the plugin he wrote, and  I salute him, because it works a treat. You can find it at here.  It binds to the paste command, checks it it’s an image, and if it is calls your callback with the file and the img encoded as a dataurl (particularly awesome/handy).  In no time I was pasting images to the top left of a blank page with a bit of jquery append() fun.

JQuery UI draggable and resizable

You can find these here and here respectively.  They should pretty much work out the box which is nice.  However, I wanted more than just images; If you mouse over an image you can remove it from corkboard. This was some CSS/JS magic lightly stolen from a friends project, but meant wrapping the image in a div.  I wasted a lot of time trying to figure out how to make the img resize at the same time as the div.  If you RTFM you’ll discover this wonder:

$pasteimage
                        .draggable()
                        .resizable({
                            alsoResize: $pasteimage.find('img'),
                            aspectRatio: true
                        }
                )

Pay special attention to alsoResize. This is the key to the gold.

To avoid manually generating the HTML at this point I created a simple template in handlebars.

Bootstrap

So now we can drag and resize images, but it’s fugly.  Along comes bootstrap, the HTML5 UI starter package from the folks at Twitter. HIstorically I’ve always used foundation for making my sites pretty, but I wanted to branch out.  I’ve not done anything advanced, just a nav bar with drop down and a little form; The form inside nav bar situation is hard to do in foundation, so I was relieved to see it’s built in in bootstrap.  I had my usual pebcak issues of incorrect ordering/import of CSS and JS, but once up and running, it was very easy to use, and I think overall looks nicer than foundation.

Save as an image

So one of the nice features about corkboard is that you can save it to your local machine as an image. This was a mashup of 2 plugins; HTML2Canvas andCanvas2Image. The first traverses the DOM of whatever element you pass it and renders it out as a Canvas; I imagine this may have issues if you’re doing anything very funky in your code but it worked out the box on this. Canvas2Image then gives you a whole bunch of images for turning a canvas into an image, and for downloading it.  Both plugins worked seemlessly, pretty much first time. Very impressive.

html2canvas($('#theFunStuff'), {
                onrendered: function (canvas) {
                   Canvas2Image.saveAsPNG(canvas);
                }
            })

And that’s basically the whole thing. There’s tons more I want to do (being able to raise/lower layers, rotating, persistance), but that’s for another day.  There’s also some issues on HTML2Canvas2Image depending on where the images are when the save happens I need to look into.