This work was done during the 2015 Greylock Hackfest
Coming to a hackathon with no idea what you want to work on is always leads to the same thing. Once you have your team, the HQ for the next 36ish hours and unpacked the two backpacks worth of computer hardware, maybe an extra keyboard and mouse and some pillows you then preceed to spend the next 2-3 hours throwing around ideas, most of which are either stupid or too hard. This is exactly what happened when we got to the old TellApart office that Greylock converted into one of the best run hackathon spaces I've been to. There was a chocolate fountain, a carnival outside with churros, food trucks, a ping pong table and hammocks. So you can waste a bit of time exploring the space and talking to people but ultimately you need to sit down and figure out what to do. Sitting side by side next to my team at the cleared out desk of some engineer we started talking about technologies we wanted to try out, looking up documentation and finding out that our genius idea was done 6 times before. I had a web page open and was telling my teammate next to me to look it up and thats when we had the idea for our project. "Why can't I just drag my browser window onto your desktop?"
It started out as a silly idea but as we thought about it, the ability to just open a page on someone else's machine is actually really cool (given you do the work to curb spamming and other security concerns). Especially in the one to many case, i.e. I open a window on all of my teammates screens. We also thought that the movemement of dragging the window off the screen was a nice intuitive interaction that is easy to remember since it feels contextual.
Now you may ask why sending the URL isnt good enough and it is, but if you break down the steps to do so you get:
- Click on the URL bar
- Highlight the entire URL (while there are shortcuts to do this, its "not inuitive" you need to create the muscle memory, and using the mouse can incure errors)
- Copy the URL
- Paste it
- Send the message
- Everyone else has to click on it
This is compared to:
- Drag the window off the screen
- There is no step 2
Ekko
So cool idea, how do you implement it?
Everyone on our team had Macs and we wanted to play with Swift so we chose to make a toolbar extention. It creates a hotzone on the right hand side, where if a browser is dragged into it, it turns slightly grey and instantly the same website is opened on everyone else's machine. To limit the scope of the sharing we created rooms, so links are only share amongst users in that room.
We get the URL from the browser using AppleScript, which is an incredible feature of the operating system. AppleScript allows developers to access all sorts of underlying APIs for different applications. In our case it let us query what the URL open in the current window of the browser is (on Firefox, Chrome and Safari).
We then used Firebase to manage the URL transmission to the different users in the room. Their Ekko instances will recive a notification and then open the browser and the web page.
In concept it's really simple but in actual usage it was a pretty perfound experience. The first time I could share a web page with the flick of the mouse was a incredible moment. The judges agreed. We were able to allow them to play directly with the app on a couple of laptops and we could tell by the reactions on their faces the first time a window popped open with a funny meme that we had something good. Ultimately we won Top 10 at Greylock Hackfest but more importantly we actually kept using Ekko when were working on class work or wanted to share a YouTube video long after we left the hackathon, a rare outcome for most hackathon projects.
You can checkout the source code for Ekko here: