This week we held our latest hack day here at Purr. What’s a hack day? It’s when we let our coders out of their cages and give them free reign to explore anything developer-ish that advances their skills in one way or another. In the past, we’ve had sensible explorations like trying out OpenCart, which led to it becoming a platform we introduced to the PHP team. We have also had more amusing explorations such as building Doughnut Dash – an app that tracks how long it takes to run and buy a box of Krispy Kreme and get them back to the office.
The idea behind my app was to find the songs a band needed to play at a particular concert to result in their objectively best set list. To do this, you would give the app the ID of a setlist from setlist.fm, and it would work out the each song’s rank in terms of popularity. It would then substitute the ‘best’ song played at that concert with the best song in their back catalogue, the second best song in the setlist with the second best song in their discography, and so on. It would work out a song’s popularity by retrieving the number of times it had been played on last.fm.
The app was built with CodeIgniter and used the setlist.fm and last.fm APIs. It also used a new front-end framework called Milligram and utilised a package manager called Bower, both of which were pretty new to us.
I’d like to extend the idea to get some interesting data come back from band’s setlist. For example, working out if it’s more likely for a band to put their best song later or earlier in their set, when it’s more likely to hear a relatively less popular song, and which city got the overall best set list on a tour.
I decided to develop my existing ReactJS skills and try out React Native, a framework for creating mobile apps. Having previously worked on a musical composition tutorial app using Phonegap, I decided to rework this into the new technology. After successfully setting up and familiarising myself with the environment, I quickly realised the scope of the task was beyond a hack day’s worth of work! (setting up audio play/record features etc). To salvage the day, I picked up a great little tutorial on how to create a mobile calculator. Really impressed with the strict programmatic approach (zero HTML or CSS) and efficiency of the code. Really useful exercise – and definitely a technology I would put forward when we work on our next mobile app.
How: Websockets create a pipeline between a server and client, allowing them to emit messages to each other and respond to these messages without having to refresh the page.
Extend? Build private messaging
Want to know more?: Read the chat example in the screenshot below! 🙂
For my hack day, I got a React-native android project running on an android emulator by carefully picking through official (and unofficial) instructions. Extra steps involved adding a local.properties file to the android folder of my project and installing various SDK platform tool versions. Previously I’d had a lot of problems setting up the mac/android react native combo , so once it was installed I considered the day a triumph.
The rest of the hack day was spent familiarising myself with React native and making syntax errors. I got an initial insight into states and rendered some content with code that seemed like mutated HTML and CSS. I didn’t quite get my app – that pulls the definition of a user-entered vocab word from a JSON file and saves it – up and running, but I did make an input field and a blocky red rectangle. You pressed the red block and ‘not found’ text appeared underneath. A great day !!!
I had an idea to create an office ‘sharing dashboard’, whereby all employees would have a place to upload links/photos/ideas/documents collaboratively in one place. Think of it like a Slack style team model mixed with a Pinterest style board.
I decided to use nodeJS/express as its something I’m working with more and more in my spare time, and increasingly enjoying using. I also found a great tool called Packery to create a draggable masonry layout. It’s definitely something I’ll be working on going forward – I’m determined for the office to be using it in 2017!
We all learned something new and look forward to the opportunity to put these skills to use. All I can say is if you can implement something like this in your office, do so! It’s a great team building event, is a great way to ensure internal knowledge transfer, makes training fun and boosts morale.Code, Developer, Development, Hack Day, Industry News, Purr