Ah, hackathons. I normally organise and appropriate them for dancers (like this and this), and joined an art/tech one as a participant who did not make at all — the making was in the hands of the developers.
Today. Well. Today was May 4th, and hence, different. I joined the Open Food Network’s UK Hack Weekend as a developer (*cue big fat imposter syndrome*). Just to clarify, the nature of this hackathon sat between Informal Hack Events and Talent Showcase on David Dunn’s matrix.
Being halfway through Flatiron’s web development course meant that I finished learning Ruby on Rails, had my initial introduction to JavaScript and used Postgres once. Since OFN’s tech stack is Ruby, Rails, Postgres and AngularJS, armed with my interest in open source and social impact initiatives, I excitedly joined the hackathon on Saturday morning at Newspeak House.
Here is a video of OFN’s Developer Pau Perez’s presentation on OFN. And if anyone is interested in joining the project as a contributor, there is extensive documentation on OFN’s GitHub on how to do so.
Setting Up the Environment
When we finally sat down at our laptops, the first thing that we had to do was environment set up. This has so far been a hurdle to overcome half the time I start a new side project. From installing GoLang to learn GoLang to getting NVM to work to test Ghost, it always takes at least two hours to get things going. I had to switch to an older version of Ruby for the hack for the first time, but thanks to Pau’s excellent documentation, it all went smooth as butter for me.
- Lesson 1 (a): Don’t underestimate the time needed for environment set up. Be prepared in advanced if possible.
- Lesson 1(b): Good documentations enable others.
Reading through code base
It was pretty amazing to read through a real, functional code base that included both backend and frontend languages. It was long. There were loads of folders, templates and partials, and I did not understand much of the coffee script, .haml files and this thing called darkswarm.
However, I managed to get my head round by poking around the rather familiar Rails MVC structure, checking the front end using Chrome console, and using git grep to find relevant files in this humongous folder.
Finding an issue to work on (and learning how to debug)
There were good two pages of issues labelled “good first issue” and “ukdev-hack” on their GitHub, which means less experienced developers don’t feel intimidated. On a side note, there were 5 of us who either just completed or still are at coding bootcamp at Flatiron and Makers (very friendly face-off 😊).
I picked an issue that looked easy to solve — to add an “Add Link” button to the WYSIWYG text editor on the new and edit form of a product. Hah. Easy.
It wasn’t too bad to find out how to add the button to the form. Then it was slightly more challenging to find out why even though the function worked on the form itself, when the page loads, the <a href> tag was filtered out. Pau helped me with this, and we put a few byebugs in the Controllers and traced the data that was being passed around from POST to GET.
- Lesson 2: Check what the server is doing
It looked like that the <a href> stuck around until the GET request initiated and got lost on page load, so Pau suggested that to look for “sanitization”. It was really cool to do this tracing — seeing the data being passed from the Rails form to the SQL database, to Rails Serializer Controller, to being sanitized by AngularJS and then finally rendered on the page. So we tweaked the sanitizemethod and got it working.
The final thing to close this issue was to make sure that the <a href>tag included target=_blank. This involved writing a custom config for Text Angular, and given that there was a generally approved version of it by the Text Angular community, I hoped that it could be resolved quickly.
So I had this piece of custom config code, translated from JavaScript to Coffee Script, but where should I put it? No one on site seemed to be familiar with AngularJS so I tried placing it experientially in a few places which broke the page or simply didn’t work. I then learnt that this actually had been an issue that was opened and closed multiple times due to UX purpose, so this custom config exists but for other forms on the site. I spent some time digging into this but sadly by the time it was beer and dinner time, I still didn’t come round to a solution.
- Lesson 3: Read through old issues that were closed, even on the repo that you are working on as someone else had already solved the problem before in a different context. This might have saved a bit of time and also to keep consistency of the codebase.
In the meantime, several gongs went off — celebrating the successes of other participants who made pull requests on GitHub, and a few more virtual cheers on Slack when their PRs were merged. I was a bit sad to not send a PR at the end of the day, however the OFN team was very encouraging which meant I left the venue feeling better about it.
The next day, I messaged Luis Ramos, author of the custom config who was supporting the hack remotely, to say I couldn’t seem to get the load page working, and whether I could push my commits to GitHub so he could check the code and shed some light on what went wrong or how to fix it.
After an hour or so, I got a message back saying the fixes were correct and ready to be merged!
There, my first PR on an open source project, and I am likely to be the 99th/100th contributor to OFN’s codebase! 🤩
Finally, don’t forget the producers
A big shoutout to Lynn, the organiser, who did a brilliant job of on-boarding being welcoming. The dev team at OFN was warm and welcoming, helping out when we were stuck without making us feel stupid, which has been key to a great first experience.
Staying true to the mission of OFN, the food provided at the hackathon was home-cooked, fresh and wholesome local produce. I thought that I would never put blue cheese in my mouth, but this Perl Las cheese from Wales was so phenomenal that I ate so much of it before I learnt it was blue cheese!
