Moving to work at the Royal Academy took me away from east London and it's mix of modern offices and tech companies to an organisation in west London celebrating it's 250th anniversary. I wanted to experience a new environment and I have in so many ways! Of particular note is the beautiful building and the artwork displayed inside. To keep a momento and to share with others I started taking regular pictures and sharing them to Instagram. I was frustrated that you couldn't filter by both a user and a hashtag so built an app, View From The RA so that you can view just the pictures of the RA that I share.
See the Pen SVG Animated Heart Mask by Mike Harris (@mikemjharris) on CodePen.
For me, spending time on side projects has two benefits. Firstly I get to build some functionality that I want. Second I get play around with some new tech. For a while I wanted to try out SVG masks - as I often do I make some sketches with code in codepen to try and learn what I'm doing and flesh out some ideas before starting on a full on app. You can see one of my test cases above - I took a previous SVG animation and layered it over an image from the RA with pretty cool results. In the end for a whole page of images I went for something more subtly but it was fun to try a few things out although I was pretty happy with the opening image mask and animation.
Updating a Seed project
In setting up the app I went back to a seed project that I've used in the past as a basis for projects. It's a bit outdated (last commits Aug 2015!) so I took the change to change some of how it's setup. The tech world has change quite a bit in the past two years.. You can see the chagnes on github but here's a quick summary:
- Update node 9
- Remove outdated package tools - i.e. bower
- Convert build process to webpack from gulp
- Add build and run scripts in package.json
- Use ejs templating instead of jade
Try out Pupeteer
Google recently lauched Pupeteer which provide a headless chrome experience along the lines of PhantomJS. I wanted to try it out and this project was the perfect test case. Instagram is limiting their API so I went down the route of scraping their site for my data - this method shouldn't really be used but in this case I'm only fetching my own public data for a side project. The experience was fantastic - stable, easy to install with fantastic docs. This script runs nightly - it calls my page on instagram, saves the global variable which has the inital page data and list of images. Headless chrome then simulates scrolling down the page and the script captures the responses of the calls to the api. This data is all combined as an array of images and inserted as a JSON object into MongoDB to be used on the next view of the page.
Deployment
I've written before about my home built ci / deployment tooling. I love the benefits of previous efforts to automate processes - now the structure was there it's a fairly straight forward procdure to get the app up on my digital ocean droplet and auto deploying when I push to git. It's not new but it is very satisfying.
The app
The app itself is fairly standard - a bunch of images on a page. The RA itself - both the building and the works of art - are really the star. You can still just head to instagram and probably get a better experience but your viewings might be interupted by other more mundane pictures that I post
Other new environments
I've written and documented the physical environment I've been exposed to at the RA. However the working environment is very different - the arts world has it's own diversity issues but in some ways it is better than in tech and finance. It's been interesting and educational to work in an environment where the majority of employees identify as female. However building an app where I post pictures of the members of the meetings I attend isn't as appropriate as images of art.