Archive

Presentation Bar Tab

Building Bar Tab at TNW Hack Battle 2015

I recently competed in TNW Hack Battle 2015, part of the annual TNW conference.

As the non-technical startup Founder, of Party with a Local (a free app that connects travellers and locals that want to party), you could say my first ‘hack’ was getting accepted in the Hack Battle in the first place.

A bit of backstory on that – I’ve fairly recently moved to working full-time on Party with a Local and very recently recruited 2 new developers to work on it with me. I came across the TNW Hack Battle and saw it as a great opportunity to enter us as a team – so we could work together, really get to know each other’s way of working, and build something cool in a couple of days.

You had to apply to be accepted into the Hack Battle. I knew my devs would qualify as they had relevant experience and are true hackers, but I had to be slightly ‘creative’ with my application. I said I was a ‘Startup Founder / Web-based Front-end Developer with knowledge of APIs like Facebook, Google Maps & Foursquare’. This is in fact true, but my technical knowledge of these things is pretty limited, and my coding skills don’t go far beyond HTML & CSS! What I lack in hacking skills, I think I make up for with a hustling mentality, plus I love bringing new ideas to life and working with a committed team. I also enjoy the rush of working under time pressure, which you need when trying to build and launch something in 2 days.

Anyway, I crafted a nice application demonstrating my enthusiasm, and said I was entering with the other guys, as a team. We all ended up getting accepted via Appsterdam and one of the API partners of the Hack Battle – getDNS. Thanks for that guys!

So our Hack Battle team consisted of Jaideep (back-end hacker) and Vinod (very back-end hacker) and me (hustler). We recruited a 4th team member from Brazil, who had also been accepted via getDNS. He happened to be more of a real front-end guy than me was a handy edition to our team (our team’s hipster?).

Bar Tab iconOne of the ideas I’d had for a while and was hoping to bring to life at the Hack Battle, was ‘Bar Tab’. This was inspired by WanderTab and Product Hunt’s Chrome extension, which as well as being Chrome extensions, are literally extensions of another product, something that Ryan Hoover of Product Hunt calls “productized marketing”. This basically refers to apps or sites which are tangential to one’s core business, but which can be an effective way to reach new users (or keeping your product front of mind to attract more daily active users to your core product). I thought this could be a nice add-on to our core Party with a Local app.

The idea behind Bar Tab was simple – to show cool bars with every new tab that you open in Google Chrome. The problem this solves is – how do you discover bars in your city? There are so many great bars in every city, with new ones popping up all the time. How do you keep up – read newspaper reviews or long Blog posts? See which bars your friends like on Facebook? Just happen to walk past a cool looking bar? We think discovering great bars shouldn’t be that complicated. This is also a problem our app users can relate to – they are curious and looking to find cool new places (as well as to meet new people).

So the goal of Bar Tab would be to make finding great bars easy and inspiring – every time you open a new tab you would be presented with a beautiful image of a curated bar with some key info about it: bar name, a link to bar’s website, when it’s open, how to get there, (what else do you really need to know about a bar before going there?) as well as options to refresh to see a new bar, share a bar on Facebook or Twitter, and suggest a new bar (which would also have paid options for bars, events and brands).

Before diving in to building this, the whole point of the Hack Battle was to hack using the partner APIs, so we had to see whether we could utilise any of them first. So at the beginning of the battle, we spent a lot of time as a team discussing how we could best use the getDNS API (seeing as they were the ones who invited us). It was proving really challenging for us to create anything very creative or fun with getDNS beyond a bland DNS security product, let alone Bar Tab. We were a bit stuck.

ZEEF APIWe were very happy when ZEEF presented their ZEEF API docs on stage, and we saw the perfect partner for helping create our ideal product of Bar Tab. So we started to hack…

I first curated a list of cool bars I knew in Amsterdam, whilst the devs looked at the possibilities of the partner APIs. I mocked-up how I thought Bar Tab should look, which our front-end guy started to design. Next I created a ZEEF account (very easy with Twitter). I then built a page on ZEEF with ‘blocks’ that included the name of the bar, a link to the bar’s website, as well as a link to a nice photo of the bar (we found photos that were either Creative Commons or from the bar themselves where possible). The ZEEF guys helped us best structure the ZEEF page and blocks for what we wanted to build.

Jaideep then hooked up the API with the ZEEF REST-based API. We made calls to the APIs and got the results from the page I created. The URI mechanism is really easy and did not take time to populate the results to our database. The next task for us will be to schedule jobs on the back-end to fetch information about new bars as we add them. The search feature of ZEEF is also useful, we want to explore it and hook with our APIs. Jaideep also found a couple of little things that could be improved on the API, and the ZEEF guys appreciated the feedback.

We still really wanted to utilise the getDNS API, especially seeing as they had invited us. The most obvious use of the getDNS API is to check whether website is DNS secure (DNSSEC) or not. So, we decided to show whether each bar on Bar Tab we are showing in a tab is DNS secure, DNS insecure, a bogus website, or unknown. We symbolise each of these 4 possible DNS statuses on Bar Tab with a different symbol next to the link to the website. This gives users some confidence and choice about whether to access a website or not.

We used Python bindings for the getDNS API. First, we create a context, an opaque object which describes the environment within which a DNS query is performed. Secondly, a query is performed with extensions, a python dictionary, where key “dnssec_return_status” is set to getdns.EXTENSION_TRUE. In short, once we get the bar using the ZEEF API, we do DNSSEC query for the Domain name and check the “dnssec_status” in the response. This dnssec_status is shown to users in a user readable format (with the symbols). Not the most creative use of their API we admit, but it was good we could use it in some way.

Other tools we used to build Bar Tab:

In true Hack Battle style, we hustled to get it done and didn’t sleep much for 2 days and we literally went live with Bar Tab on the Chrome Store five minutes before our final pitch (completed in the line to speak)! As a result my pitch was not the most polished and I didn’t emphasise enough that the product was actually live to download from the Chrome Store right then (& had a business model built in too).

Bar Tab

Whilst we didn’t build the most advanced product, or utilize the partner APIs in super creative ways, we achieved our goal of hacking something cool together in a few days, and as a bonus it was something that looked nice and was related to Party with a Local. I’m not sure how many other teams launched a live to the public product (with a business model). I was really proud of the team, how we worked together and especially how we hustled to get shit done to go live just in time.

We didn’t come away with the grand prize, but it was a great experience for the team, and we did win a Raspberry Pi from ZEEF which is cool (my girlfriend was very excited when I told her we’d won a Raspberry Pi, but disappointed when I told her it wasn’t actually a ‘Pie’ :-P). We also celebrated our efforts with quite a few beers at the end, which is customary with Team Party with a Local.

So Bar Tab is live, but it isn’t finished. We plan on expanding it to 9 more cities before really announcing we are live (probably on Product Hunt), and if there’s enough traction, we’ll actively pursue the business side of it and get bars and events to advertise. If not, we’ll just use it as a nice add-on and extra marketing channel for Party with a Local.

A big thanks to TNW Hack Battle for organising a great event and our API partners, especially ZEEF. We look forward to developing Bar Tab further and entering the next Hack Battle!

Get Bar Tab and discover great bars with every new tab.

0
apple-watch

Header images and improved API

We’ve released a new version of ZEEF again! Read on to discover more about header images, the improved Chrome extension, our updated API and other ZEEF improvements.

Header images

You might have seen them: nice header images above pages like Apple-Watch.ZEEF.com. We received a lot of requests to add these so we’ve now made it possible for our early access users. Would you like to add a header image to your own page and try other upcoming features? Apply for our early access program!

Updated API for developers

APIQuite some new calls were added to the API: create a new page, manage the scratchpad and filtering on region or page type. We made it possible to easily try out the API using Swagger. And there’s a client library available for Java developers now.

New Chrome extension coming soon

Collecting links with ZEEF has never been easier. When you have our Chrome extension installed you can add links to your Scratchpad with only 2 clicks. When you’re back on your ZEEF page you can drag and drop your links from the Curate Panel into a block of your choice.

Other changes

  • New link actions:
    • Thank a link
    • Contact the curator about a link
    • Flag a link as inappropriate
  • Long pages will load much faster
  • Search on Android works again
  • Daisycon was added as affiliate network
  • Design of Widgets can now be customized on request
  • Image quality has been improved
0
Improved UX

Updated UX and announcing our beta API

Today we have released our latest update in improving the ZEEF user experience for both desktop and mobile. We’re also happy to announcing our first beta version of the ZEEF API. Read on for more details on the new version.

Updated UIUpdated UX

The design of our blocks is more accessible because of the white color of the title. Also, we included the subject page favicons on the homepage to make it look more alive. Last release, we introduced a responsive design. In this release we refined that even more with a mobile menu and a top bar. From that bar you will be able to find the menu and search, wherever you are.

 

APIBeta API

A beta version of our API is available. With the API you’ll be able to retrieve and update your own pages. In later versions it will be updated with more functionality. If you’re interested in the possibilities and want to try it, please contact us.

Other changes

  • It’s possible again to change the title of a page
  • Fixed an issue with wrong favicons being displayed
  • Integration with affiliate networks Daisycon and TradeTracker
  • More intuitive redirects when using incomplete URLs
1
css.php