5 days in Sitges for the Simpleweb team to hone their skills

5 days in Sitges for the Simpleweb team to hone their skills

Recently, we flew the entire Simpleweb team to Sitges in Spain’s Catalonia region for a multi day hack event. We didn’t get as much sun as we’d hoped but we did get great food, some great ideas and apps, and a little more understanding of each other.

We found the most beautiful villa overlooking Sitges, and challenged the team to create something, anything, as long as it was creative and could be demonstrated to everyone at the end of the trip.

It wasn’t all about sitting in front of a screen though; with Barcelona only 20 minutes away, its beautiful gothic quarter and amazing architecture, we all tried to soak up the culture as well.

On the final evening, we gathered around to show each other what we’d made. After the presentations, Mark, Jack and Beccy’s aim was to choose a winner. While it was unanimous that Ben should get the prize, we couldn’t split the next three, so we decided that they were all winners 🙂 . Over the next few weeks we’ll free up some time to turn their hacks into real working products.

So without further ado, here’s what the team came up with:

The hacks

Which Movie Today

@dcorking, Developer

Which Movie Today is a tool made by developer David for visualising movie recommendations. Users enter the name of a film they want to base recommendations on, and Which Movie Today uses this to pull recommendation data from the The Movie Database API and display it in an interesting way.

Gudetama Bot & Physical Web Beacon

@herecomesjaycee, Developer

Jaycee who will be starting with us towards the end of May, finished her first project “too quickly” and decided to work on a second…

The first, Gudetama Bot, is a tool for automatically retweeting specific users or hashtags on Twitter. The tool could be particularly useful for events, however, Jaycee has been using it to automatically retweet her favourite comic – Gudetama.

Jaycee’s second hack, Physical Web Beacon, uses JavaScript to configure beacons to broadcast different URLs. The device typically broadcasts her Twitter handle, but at the press of a button, it can broadcast her GitHub handle for a set amount of time, before switching back to Twitter.

DerpDb

@dmcropley Project Manager, @craigrcoles Front-End developer

The second movie recommendation based app of the weekend. Like most social mediums Netflix learns what you like and then shows you recommendations accordingly. The problem with this is that you end up with a very similar pool of content. With some help from front-ender Craig, Dave set about finding a way to make it easier to discover completely new things to watch.

With no way to query Netflix’s database, Dave and Craig had to find other open databases they could use. They discovered the Movie Database (which they recommended to David for his hack).

The app shows users a completely random movie selected from 334,014 films from around the world. Users are given a brief synopsis of the film, helping them to decide if it’s the one for them. If the film is featured on IMDb the title can also be clicked sending the user to IMDb for more info and reviews.

Simplepool

@craigrcoles, Front-End Developer

Craig invented a Slack bot for Simpleweb pool tournaments using NodeJS and a node package called BotKit.

Simplepool lets you challenge users to a game of pool via Slack, allowing you to play your arch rival. It then creates an interactive leaderboard so you can keep track of your scores.

The bot works on a per channel basis. Users simply message @simplepool the term ‘challenge’ followed by who they want to play. The user can choose whether to accept or decline. Once they’ve played, whoever wins types in ‘win’ and the bot responds with a ‘congratulations’ for the winner and a ‘better luck next time’ for the loser.

CampaignCowboy

@jamesguest Project Manager, @alifeoflatitude, Marketing Assistant

Andy and James created a UTM link generator & shortener for tracking marketing campaigns, which allows users to compare data against 6 different sources and 5 content variations (for testing).

This means that marketers can test different headlines, copy, images etc to find out what works best. CampaignCowboy ties into Google Analytics, Data Studio and Fusion Tables to measure the effectiveness of your campaigns.

As neither James or Andy are developers, they created the site in Google Sites, using a Google Form to gather data and generate links.

References

@tholder CTO, @CoatezyUK developer

When creating proposals for prospective clients, companies like Simpleweb are usually required to give references from previous happy clients. We have loads of happy customers and they’re always up for providing references but it can be a pain to manage these, and we’re not really comfortable giving out their personal details to prospective clients.

Created by the two Toms, References is an application that uses IVR (from Nexmo in this case) to streamline the management of customer references.

Prospective clients are given a single phone number for references. Each reference has a unique PIN which can be entered to ensure the prospective client connects to the referee they want to speak to.

Alternatively, users can press 0# to connect to a random referee, and are told who that will be before they are connected.

Once the call has ended, Nexmo sends a webhook to the app saying the call has ended and how long it was. An email is then automatically generated and sent to the referee thanking them for their time. Tom and Tom envision future versions of this email would include some kind of reward for referees, such as Amazon gift vouchers.

Slidify

@GeoSpeck, developer

George just doesn’t ‘get’ PowerPoint, but he does get markdown. “I don’t know how to use PowerPoint” he says “so the easiest way for me to create a presentation is markdown”.

Slidify takes a markdown file as the input and generates an HTML based slideshow/presentation with slick transitions read to run straight in the browser.

Sketch to React Native

@benjaminreid Front-End Developer

Ben wanted to speed up the prototyping process by cutting down the time it takes to turn designs into apps. Sketch to React Native essentially converts a user’s Sketch designs into a React Native app without the need to write any code.

Sketch to React Native interprets how Sketch describes the “things being designed”, like the size, position, and colour of a simple rectangle for instance. It then uses that information to automatically write the code to reproduce that same rectangle within React.

So far it can translate things like rectangles, ovals, bitmap images, positions, sizes and fonts, and hopefully it will be able to bring in new things like drop shadows and gradients in the future.

To make it even easier for the user, who doesn’t even have to be familiar with code, Ben also built a MacOS application (using Electron), so a Sketch file can be dragged into it and a brand new React Native app with your designs converted for you is given back. On top of this, if you make any changes to the Sketch file, those changes are automatically mirrored to the React Native app.

A very cool app, that had documentation, purpose and just finished enough to be useful. A worthy winner of our little competition. We’re very much looking forward to spending some more time on this.

Request VCR

@karlentwistle, developer

Karl went on a quest to solve a common problem with web services, webhooks in particular. If a service fails (for whatever reason) and the sending party has no mechanism to reply to failed requests – the requests get lost. If these requests are to do with payments, this can be a big deal.

Request VCR is essentially a webhook recorder. It stores http requests from third party services and holds them in a database. Should a client application become unable to receive webhooks, Request VCR can be used to find and reply lost requests.

Karl built Request VCR with open-source API management app, Kong. He particularly wanted to use Kong as it allows developers to reduce complexity and deployment times in implementing an API solution. Kong can handle millions of requests a second so in theory, Request VCR would be able to handle enterprise level traffic.

Learning Erlang

@_andysomniac, Developer

Although it’s not a hack, we wanted to give a shout out to Andy who decided to spend the weekend learning a new programming language. We love that our team are always eager to learn and do all we can to encourage continuous growth.

Winners

Winners is a bit of a loose term, as everybody delivered something or learnt something new.

The overall winner was Ben with his amazing Sketch to React Native tool, followed by:

  • References by Tom and Tom
  • Simplepool by Craig
  • Request VCR by Karl

We also had a vote on the “people’s choice”, and Dave’s Random Movie tool grabbed the vote. We just couldn’t stop refreshing the page 😉

It was an amazing weekend and some amazing stuff was created. Our team is awesome and it was great to spend some time together working on our own personal projects.

We hold regular hacknights in our offices which are open to everyone. Join us on Meetup to find out about the next one!