A Few Fun Tools We Built At Booking.com
By: Matthew Pennell
Tags: Front End Development, Development, Terminal, Web Development

So there you are, on your first day, sitting at your new desk and clutching a brand new MacBook (what? I prefer shiny things), trying to decide what to install first. Because it’s true — we don’t care what code editor you prefer, whether you’re an Outlook person or a Thunderbird person; Photoshop or Sketch, Powerpoint or Keynote, GitHub or the command line… We really don’t care. Productivity is the priority.

And for the first few weeks (maybe even the first few months), that’s great. In fact, it’s awesome. But when you’re working in a department of over 1,000 people with a technology stack that encompasses at least half-a-dozen different languages — not to mention interacting with a broader company over 10,000 strong — eventually you’re going to run up against a problem that can’t be solved with existing tools.

Where other large organizations might decide it’s time to start looking for outside vendors to plug a hole in the process, at Booking.com we live by a simple rule: See a problem, own a problem. When we find an issue, it’s time to get hacking.

A Few Small Things We Built In Our Spare Time

Like many other companies built around technology, Booking.com provides a space for developers and designers to tackle those annoying issues that don’t get attention in regular “Hackathon” sessions. For us, that means forming small teams of sympatico colleagues for a couple of days each month to scratch a communal itch — either to improve one of our existing systems or developing something that’s missing but would make everyone’s lives easier.

Some of the things we have come up with (either during hackathons or individually, because we encountered the same damn problem too many times) are relatively simple command line tools, shortcuts that let us reduce the amount of time we spend writing code to free up time so we can focus on what matters. A few examples:

Bash scripts

Boo , created by client-side developer Ricardo Tomasi, is a Grunt-like set of tools designed to allow us to work on code locally while testing on remote servers. It handles automatic uploads of changed files, auto-runs concatenation scripts or server restarts, and can even tell us whether a particular commit has been deployed to the live site.

, created by client-side developer Ricardo Tomasi, is a Grunt-like set of tools designed to allow us to work on code locally while testing on remote servers. It handles automatic uploads of changed files, auto-runs concatenation scripts or server restarts, and can even tell us whether a particular commit has been deployed to the live site. Database engineer Simon Mudd created the queryprofiler and ps-top tools to make it easier for our DBAs to measure query performance, and to see in real time exactly what was going on in the depths of MySQL. Both have been released publicly.

and tools to make it easier for our DBAs to measure query performance, and to see in real time exactly what was going on in the depths of MySQL. Both have been released publicly. Ever looked at a git history and wished it would just tell you who the right people are to talk to about a file? Eric Herman’s owner.pl script does just that, identifying the core contributors of any file.

mysqly is a wrapper around the MySQL command line prompt that automatically handles user authentication and connects you to the correct cluster of database machines.

Browser Extensions

But bash scripts, no matter how complex, just scrape the surface of what’s available to a motivated engineer determined to do no more work than they absolutely have to. Browser extensions are another great option when looking to shave precious seconds from repetitive or common tasks (that foosball isn’t going to play itself, after all).

Here are some of the browser extensions and other related bits and pieces we have built for ourselves:

Running thousands of A/B tests across a multi-lingual website can often involve some delicate juggling of cookie variables and query parameters. Deepak Gulati’s Silver Hammer was the first in a series of Chrome extensions aimed at reducing the pain of development and testing by allowing us to easily toggle tests and languages on or off, as well as to jump quickly between our development, staging and live environments. Eventually it was superseded by B.quick by Marcelo Oliveira and Renato Costa, which in addition to the original features also hooked into our server-side debugging mechanism. This made the development and testing of new features much easier.

was the first in a series of Chrome extensions aimed at reducing the pain of development and testing by allowing us to easily toggle tests and languages on or off, as well as to jump quickly between our development, staging and live environments. Eventually it was superseded by by Marcelo Oliveira and Renato Costa, which in addition to the original features also hooked into our server-side debugging mechanism. This made the development and testing of new features much easier. For our Customer Service department, we built the Blue Phone Extension , a handy widget that not only allows our call centre staff to interact with it as if it is their physical phone, but also integrates with our backend job queue management system. (Look out for a longer write-up on this by client side developer Mat Swainson, coming to this blog in the near future.)

, a handy widget that not only allows our call centre staff to interact with it as if it is their physical phone, but also integrates with our backend job queue management system. (Look out for a longer write-up on this by client side developer Mat Swainson, coming to this blog in the near future.) Although not strictly an extension, the B.Home replacement ‘New Tab’ page for Google Chrome, by Wesley Souza contains a summary of information relevant to the user, plus useful links to common tools and monitors.

replacement ‘New Tab’ page for Google Chrome, by Wesley Souza contains a summary of information relevant to the user, plus useful links to common tools and monitors. Developed by Aziz Yuldoshev, Blueprint is an extension for Chrome devtools which adds the ability to toggle experiments on or off, as well as search through all available server-side variables and arrays.

is an extension for Chrome devtools which adds the ability to toggle experiments on or off, as well as search through all available server-side variables and arrays. Anyone who has ever worked on a complex enterprise-level site will not be surprised to learn that we have many hundreds, possibly thousands, of different templates. It can often be tricky to figure out where a particular piece of the page was actually generated, so Developer Eli Abramovitch whipped up a lengthy but incredibly useful JavaScript bookmarklet that allows us to click on any part of the page to find the responsible template source.

Terminal goodies

Terminal one-liners and browser extensions can achieve some extremely cool results, but sometimes they’re just not enough. That’s when we break out the mini web apps and standalone services. Some of the useful things that have resulted include:

Booker , an iOS app that integrates with our intranet and SAP database to let you find colleagues in the main Amsterdam offices. Blueprint maps of the building’s floors and desk layout let you pinpoint where to find the person you need, and you can also book meeting rooms from within the app.

, an iOS app that integrates with our intranet and SAP database to let you find colleagues in the main Amsterdam offices. Blueprint maps of the building’s floors and desk layout let you pinpoint where to find the person you need, and you can also book meeting rooms from within the app. Lingo is a tool for managing copy translations. As the world’s largest translator of content, we needed a flexible tool that enabled our copywriters to effectively communicate with specialists in over forty different languages… so we built one!

is a tool for managing copy translations. As the world’s largest translator of content, we needed a flexible tool that enabled our copywriters to effectively communicate with specialists in over forty different languages… so we built one! A room in a hotel might seem like a simple thing to model, but in reality there are many different moving parts — hotel policies, room policies, group sizes, child ages, facilities, prices and so on — so finding and testing every single edge case is a tough job. Give.me is our internal tool for quickly locating properties that fit a specific profile.

is our internal tool for quickly locating properties that fit a specific profile. Blinchik , Artem Tyurin and Aziz Yuldoshev, is a plugin for the Sublime text editor that groks our heavily modified template language, flagging up syntax and stylistic errors before they become a problem; developers Valerii Iatsko and Esteban Beltran also created a similar plugin for the Atom editor. (And speaking of Atom, developer Angelo Di Donato added HQL support to Atom too.)

, Artem Tyurin and Aziz Yuldoshev, is a plugin for the Sublime text editor that groks our heavily modified template language, flagging up syntax and stylistic errors before they become a problem; developers Valerii Iatsko and Esteban Beltran also created a similar plugin for the Atom editor. (And speaking of Atom, developer Angelo Di Donato added HQL support to Atom too.) Recently we experimented with Slack as an internal communication tool within the Technology department, in addition to our existing Jabber platform. During the transition, we needed a way to communicate across platforms, so senior developer Manuel Ceron built Slabber , a Jabber-to-Slack posting tool, so that no critical communications were missed due to people using the wrong chatroom to share important gif-based communication.

, a Jabber-to-Slack posting tool, so that no critical communications were missed due to people using the wrong chatroom to share important gif-based communication. It’s not just web developers who need help. Android developer Aliaksandr Jeihala developed a plugin for Android Studio to enable our mobile developers to easily monitor the state of experimentation on that platform, integrating with our testing system to flag whether tests are currently running or need to be removed.

Although we have a plethora of OSX and web-based helpers, Linux and Windows users aren’t completely left out in the cold. Thomas Shone created an Ubuntu tray app named Blerty to provide handy access to tools for those users, while Dan-el Khen built fsync for Windows.

to provide handy access to tools for those users, while Dan-el Khen built for Windows. Since moving from CSS sprites to font icons, we discovered the need for a quick reference guide for our icon set. Designer Michel Ferreira whipped up a fancy searchable list, complete with light/dark colour scheme options and automatic copying of icon names to the clipboard.

The exceedingly well-named “ Where Is My Table? ” tool, created by Jonathan Zhang, is a search engine for databases that allows us to search for tables based on their name, columns or schema.

” tool, created by Jonathan Zhang, is a search engine for databases that allows us to search for tables based on their name, columns or schema. For new starters, configuring a new laptop is often an unnecessary time-suck. Ricardo Tomasi and Mauricio Wolff created Bookstrap, a Ruby-based mini-script that handles the download and installation of the most commonly used software and tools a new hire might need to get to work.

.dotfiles

Finally, a special mention has to be made of our “dotfiles” git repositories. These per-user repos contain our personal bash preferences, aliases, and any other bits and pieces we frequently use while working. The clever part? Whenever we login to any of our servers — even ones that we’ve never used before — our personal set of files is copied to the server. This provides us with an instant set of familiar scripts and shortcuts wherever we need to work. (Want to know more about this? Check out our previous blog post on the subject.)

Of course, this is not even close to a complete list. New tools and programs have been developed since I started writing this article, and I’m sure most coders at Booking.com have some sneaky secret shortcuts they’re keeping to themselves. So if your boss or company hasn’t yet seen the light and embraced the creative chaos of a regular hackathon, why not propose that you start?

(You might have noticed that we’re quite fond of the letter B when it comes to christening our creations, and that’s not even counting the numerous B.branded laptop stickers adorning every available surface, such as b.proud, b.awesome, b.epic, and so on. Coming up with a new word that adequately describes your creation and that also starts with a B can sometimes be the hardest part of the process. Hmm. There’s probably an app idea in there somewhere…)