Learning Elm by making a blog
If you are reading this then everything works. Hooray!
This project started with two itches needing to be scratched. The first itch, Elm, had been itching for quite a while. With several people in my company talking warmly about it, and having attended Elm-conf as a pre-conf to Strangeloop last year, I had heard a lot about it, but never tried it for myself.
The second itch came while organizing a hackathon at my company. Using a Wix-based website for the hackathon, we wanted to show a leaderboard for the participating teams. As the points were entered in a Google Spreadsheet, we wanted to automatically update the scoreboard. This turned out to be tricky, as the plugins for Wix that solve this problem are quite terrible. Could the Google Drive API could be used from a small web app, without the need for a dedicated backend?
And there we go. A new language to learn and a new API to discover. As the more complex spreadsheet API seemed a bit daunting as a starting point, I opted for familiarizing myself with the text API first. A simple blog, using Google docs as the CMS sounded like a good proof of concept. I would be able to write and edit blog posts from Google Drive, either on the web or from the app on my phone, and present them on my blog. This appealed to me, as I mostly write all my texts in Drive.
I started out by exploring the API using Postman. I was able to get a list of documents in a specific Google Drive folder, aptly named “Blog”, and with a second call to the API the contents of a given file exported as plaintext. Ordering the documents by date in the API request saves me from sorting them in the app. Neat. Now that I was familiar enough with the API to start coding, I took my first baby steps with Elm.
Starting out with the official Elm Guide, I was able to adapt the example code to my needs, and eventually also write my own. As always when learning new things, there were several distinct moments when things “clicked” into place, and started to make sense. In Elm, these moments came very early! While the simplistic syntax seemed strange at first, and took some time getting used to, I now enjoy writing Elm. The Elm architecture, which has inspired React/Redux, is rock solid and really intuitive.
The Elm toolchain is also great. The compiler gives really helpful error messages, something that a beginner will really appreciate. Using elm-live as a development server for hot reloading, and the Elm-plugin for Visual Studio Code gives a tight feedback loop when writing code.
It isn’t all rainbows and unicorns, though. When I was ready to make my early blog app into a proper single page application, I was met with a frustrating “TODO” in the Elm guide. After some googling i found a blog post titled “The missing part of the Elm guide: URL handling with Browser.application” that fills the gap in the guide. Problem solved, but this crucial part should really be in the official documentation.
I also struggled with getting the last part of the current URL, in order to get the ID of the blog post to be fetched. I ended up taking the URL as a string, splitting it on forward slashes into an array, reversing the array and taking the first element. While this can be done in Elm with a single functional line of code, having to do it this way is a bit strange. There might be a better way, though.
Another pain point was decoding JSON from the API. Having to write decoders by hand, while not terrible, was not exactly intuitive. As working with JSON is a major part of web development, I hope this is improved upon in coming Elm releases.
Other than these complaints, my first meeting with Elm was a pleasant one, and I would really like to use it more. As for whether or not using Google documents as a CMS for a blog is a good idea, I am not sure. While convenient, there are some limitations. Plaintext works great, but if I wanted to include images on the blog I would have to add the images in the Drive document, and export the document as HTML. This HTML would have to be sanitized and redundant tags removed. Alternatively, I could embed the URLs to images in the text, with some markup, and transform those to <img>-tags on the rendered page. A problem for the future, for sure.