Author Archives: Matthew Livingston

A Future of Transportation

Lit C-1

Imagine Lit C-1, plus google self driving cars, plus “Lit Lanes” on existing roads, i.e. bicycle lanes for Lit vehicles, as being the new future for single-person mass transit in cities and on highways. Wouldn’t this solve so many issues with congestion, parking space, carbon emissions, as well as to make roads safer? Their integrated windshield HUD could be used for both informational and entertainment purposes, but could activate into ‘emergency’ mode if the driver needed to takeover.

In my opinion, this plus Tesla’s brand new Supercharger stations around the country (and soon the world) and their Model S, could define the future of transportation. Well, at least the next iteration after fossil fuels, we’ll see what happens with fuel-cell based vehicles. I can also see Lit vehicles being parked at docking stations like Barclay’s Bikes as found in London, similar to zipcar, and people would be able to use one whenever they needed to get somewhere that wasn’t easy to walk or bike to.

There’s so much ‘real-world’ innovation still to be done it’s mind-boggling and sometimes makes me wonder why some of the worlds’ greatest engineers are spending all of their time building apps.

First foray into modern frontend development with backbone.js and Twitter Bootstrap

At the beginning of this summer, I had the fantastic opportunity to work at my uncle’s startup in Oxford, EngageSciences. They have created a social media marketing platform for enterprises to better manage their marketing efforts across multiple channels. My uncle gave me the choice of two projects: To build an internal UI verification and testing tool using backbone.js, or to learn Selenium to help automate their web-based UI testing. I chose the former, as it sounded like a great way to get stuck into some modern frontend dev and to have something to show by the end of my two weeks. What follows is a brief overview and reflection of my experience of the project, having completed a production ready app after having had no prior frontend experience before starting.

Ok I lied, before starting I spent about a week getting stuck into learning the basics of HTML/CSS/JavaScript and jQuery on codeacademy, which I can’t recommend highly enough. This first step was essential once I arrived and without having done this, it would have taken me a long time to catch up before being able to start my project. Soon enough, my uncle sat down with me and specced out the app that I was to build. He told me to check out backbone.js, handlebars.js for templating and Twitter Bootstrap to get a head start on the UI. I had a sketch and the basic functionality that was needed, so it was time to  dive in the deep end.

My first step was to lay out the UI with bootstrap, whilst getting more comfortable with CSS in the process and without worrying too much about functionality. I started off with the bootstrap fluid layout example and iterated from there, adding what I needed and removing redundancies. I needed two main UI components – a left-aligned navigation/information panel and a preview iFrame on the right. I started off attempting to build the navigation panel using plain HTML and bootstrap components, but soon realised that I was dealing with a collection of objects that needed to be displayed in a table view. This collection of objects needed to be dynamically populated from data received from the backend, so it was time to start thinking in terms of backbone and getting familiar with templating…

The next stage of development was probably the hardest. Beginning to understand MV* JS frameworks, what backbone is and why it’s used and then applying that knowledge to my own app and implementing it to the best of my ability. Luckily, the community that has developed around backbone is fantastic and there is no shortage of amazing resources. Probably the two most helpful tutorials I came by were Jérôme Gravel-Niquet‘s todos app, with annotated source code and also this post on building a contacts manager with backbone. Of course, there is the backbone.js official documentation as well. At this point, I also decided to opt to use underscore.js for templating as opposed to handlebars. It was mostly a personal decision, as I felt underscore would be easier to get started with since it’s baked right into backbone.

Once I had a decent understanding of how backbone worked I began to create the models, views and collections I needed. The original HTML that represented an individual row in the table now became a template for one view, which is compiled by underscore before it gets rendered. I also used some of the bootstrap JS plugins such as typeahead, popover and tooltip to add additional functionality and give the app a more professional feel. You can see the finished code here on Github.

Conclusion

Working with backbone has overall been a great experience and I’m looking forward to using it on bigger, more ambitious projects in the future. In fact, I may have the opportunity to use it on an internal tool here at PayPal, as well as to help my mates at patchworkpie develop their front-end. Theres tons of exciting things happening in frontend land right now, nicely summarised at the recent Throne of JS conference, as well as in this longer, more in-depth article by Smashing Magazine. Of course, I’ll have to keep an eye on meteor as well because what they’re building looks to be a completely revolutionary new way of building web applications.

Climbing in the Western Cape of South Africa

Our home in South Africa is in Pearl Valley, located in between Paarl and Franschhoek. Until now I hadn’t realised just how much there is to explore down here in the Western Cape – from trad climbing to sport, bouldering to hiking, every mountain activity seems to be represented in full force.

Bouldering Mecca – Rocklands

I was recently lucky enough to convince my family of taking the three hour drive up to Rocklands, at the top of the Cederberg Mountain Reserve and this place truly deserves the reputation its raised for itself over recent years. It couldn’t have been easier to get to – you simply drive north on the N7 until you see signs for Clanwilliam and De Pakhuys, ”Where all the climbers stay”, is another 20 minutes from there. I stayed at Traveller’s Rest for a night, as De Pakhuys was full; if you’re planning a trip to Rocklands make sure you sort out your accommodation in advance, especially if you want to stay in the lodges. Most of the climbers, however, camp at the De Pakhuys site in winter, when it’s slightly cooler. The campsite is perfectly situated and has a chilled vibe so when (not if, when!) I go back, that’s where I’ll be for sure!

The bouldering itself is seemingly infinite – if you’re a bouldering junky you will be in heaven. There are boulders as far as the eye can see, of every shape, size and colour, host to problems of every grade and ability level. However as I found, you’re probably more likely to call it a day due to your hands getting wrecked from the super course rock than from getting pumped out! It would definitely take some getting used to.

Warm-up boulder at Close Plateau

Sport climbing paradise – Montagu

I haven’t personally been to Montagu yet, but it’s only two hours away so I’ll get there soon enough. Apparently it’s pumping there with a lively climbing community – with over 400 single pitch routes I would probably think so!

Paarl Rock

Paarl Rock is practically in my backyard. I drove there in under 30 minutes the other day and hiked to the top of it for the first time, scoping out a few boulder problems that I want to try along the route and the view of the valley from the top was incredible. The main climbing here is natural slab on a cluster of three large granite domes.

The Granite Domes

Du Toit’s Kloof is also just around the corner, through the huguenot tunnel. There’s quite a lot to explore here, including the Yellowwood Amphitheatre which is host to some quality trad and sport climbing, including some fairly long multi-pitch routes.

Table Mountain is of course not too far away, being an hours drive back into Cape Town. I bought the Table Mountain Classics guide, which is over 300 pages of information on walks, scrambles and rock climbs on table mountain. Suffice to say, there’s enough to keep oneself busy for a long, long while. You also get the added bonus of climbing an iconic mountain with magnificent views of Cape Town and Cape Point, overlooking both the Atlantic and Indian oceans.

If indoor climbing is your thing, or you want to train on a rainy day for all the fantastic climbing the Western Cape has to offer, then City Rock is quite literally the only place to be/go. I went there for a few hours and they have a nice new bouldering area as well as plenty of lead climbing, as well as the best gear shop in the Cape!

If you want to hire some experienced guides, who certainly know far more than I do, check out Cape Climb, these guys sound amazing! For all the latest rock climbing news in South Africa, climb.co.za is the site to check out.

Alright that’s my primer on climbing in South Africa, get down here as soon as you can possibly afford to! Cheers

Gaming Rig

I’ve wanted to build my own gaming rig for quite some time, and finally this year I had enough money and time to do so! Whilst working over the summer I did tons of research on sites such as newegg, scan and amazon and this was the build I came up with:
  • Case – Corsair Special Edition Graphite Series 600T Mid Tower Gaming Computer Case
  • Motherboard – ASUS P8Z68-V PRO
  • Processor – Intel Sandybridge i5-2500K OC 4.6GHz
  • Graphics Card – Asus 1GB GeForce GTX 560TI DirectCUII PCI-E Graphics Card OC 900MHz
  • Memory – Corsair 8GB 1600MHz CL9 DDR3 Vengeance Memory Two Module Kit
  • Hard Drive – Western Digital Caviar Black 1 TB 7200 RPM Internal Hard Disk Drive
  • SSD – OCZ Agility 3 60GB
  • PSU – Corsair Enthusiast Series TX750 V2 High Performance 750W Power Supply
  • Cooling – Corsair H80 Water Cooler
  • Monitor – Asus 24-inch VH242H Wide Gaming LCD TFT Monitor
The Parts

Ready for assembly!

Case

Mid-way Through Assembly

About to install the Corsair H80 Water Cooling

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

SSD Set-up:

I opted to use my SSD as an accelerated cache for the WD Caviar using Intel Smart Response Technology, one of the features of the ASUS P8Z68-V PRO. I haven’t performed any hardcore benchmarks purely because the system is so fast and reliable that I haven’t seen the need to. It generally boots up in around 40-50 seconds, which I know is slightly slower than if the SSD was a pure boot-drive but this is fast enough for me and I get the added advantage of all of my frequently used applications running faster. If you are going for a 60GB or smaller SSD I’d highly recommend this configuration.

The Result:

This rig exceeds all of my expectations and the research, learning and building process was extremely gratifying! Here is my Geekbench score and below is a screenshot showing the overclocking I achieved using tools like MSI Afterburner, CPU-ZCore Temp and of course the motherboard BIOS, which was actually really easy to use.

Overclocking

Results of overclocking my CPU and GPU plus Windows Experience scores

Side without panelSide with panelInsideFront

Things I learnt this week #1

This week I continued on my Unix journey, exploring SSH/SFTP, pair programming, Homebrew and a couple of nifty new commands.

First off, I needed to SSH into our university server called snowy, but I didn’t want to have to type “ssh snowy@a.b.c.d” every time because that’s so much more effort. So I created another alias in my ./bash_profile called snowy of course! Even further, I didn’t want to have to type in my password upon login each time, so I read this article that shows you how to SSH in without a password using RSA encryption; basically you generate some keys in ~/.ssh and cat your public key onto the remote server.

This makes terminal remote SSH super easy, but you might want to use a GUI-based SFTP client instead. Being on OSX I installed CyberDuck and this does the trick, although it’s a little slow to load up sometimes. Windows/Linux users can check out FileZilla, I hear good things from my flatmate.

I also needed to edit files on the remote server and I’m not a power emacs/vim user, so I returned to my favourite editor, Sublime Text! I found and installed the Sublime SFTP plugin using package installer and this allows me to edit remote files locally. I can then simply swap to my active SSH terminal window and build my program straight away!

With all this newfound knowledge I thought it was time to put it to good use. So I stole my flatmates SSH keys as he had left his password in my keychain so I had full access to his system (through Finder!). I attempted to run a script that lists all active IP address on a network to no avail, so I went to his room and typed ifconfig in front of him to acquire the needed address. My grandmaster plan was to SSH into his machine and run echo -e “\007″ in a loop (endless beeping) for fun, so all I had to do now was type “ssh thomas@ipaddress” since I had his SSH keys, but I got the address of his desktop instead of his laptop! So in the end all I achieved was creating a bunch of directories within each other called “fileception” with a rickroll video at the end.

Another cool tool I found this week is a program called tmux, a terminal multiplexor that enables a number of terminals to be controlled from a single screen. What this means is you and a colleague can SSH into a single machine and attach yourselves to the same tmux session and then you can pair program like a pro! You can easily install tmux on a Mac using MacPorts or Homebrew.

Things I learnt this week #0

This week I started delving deeper into the world of Unix and I wrote my first bash script, hnbash, which provides three regex filters using grep for the HN who’s hiring page so that you can more easily find the right opportunities without scrolling through every job post (i.e. “I want to find a mobile internship position in San Francisco”).

The script uses curl to transfer data from the URL and pipes the output to grep and sed; the latter is a stream editor that I used to strip out the HTML tags. The output of sed is then redirected to a text file where it can be viewed as plain text.

Another useful Unix feature I learnt is the creation of aliases. For example, the current project I’m working on is in ~/documents/java/spe/Cookbook. I can create an alias by typing alias cb=’cd ~/documents/java/spe/Cookbook’ and then typing cb will cd straight into the project’s directory. Very handy. I can delete this alias by typing unalias cb. Bear in mind that if you want these aliases to be permanent you must add them to your ~/.bash_profile or ~/.bashrc file (if it doesn’t exist then create it).

matt.might’s blog is the best place I’ve found so far for getting started with Unix.

UPDATE: This is another excellent series of posts on using Unix as an IDE.

Sublime C

I’ve migrated almost exclusively over to a new text editor you probably haven’t heard of: Sublime Text 2. It’s still in beta but don’t let that put you off, this text editor is god-like!

My favourite features:

  1. Multi-selection. Going back to any other text editor without this feature is a massive letdown.
  2. Multiple drag-able tabs and easily customisable layout – I usually roll with two columns open.
  3. Amazing shortcuts! Command-R jumps to any function or keyword in your file, Control-G jumps to line number, Command-Shift-P brings up the ‘command palette’ where you can change the syntax highlighting, insert code snippets, automatically install plug-ins once you have this (Git integration of course) and so much more…
  4. Full-screen and distraction free mode in Lion.
  5. Command-line tool. Quickly open files using the subl command.

Working in Sublime Text 2 on my 24-inch monitor with iTerm2 open just feels extraordinarily productive. Give it a try and don’t forget to check out this link for loads more tips and tricks in Sublime Text 2!