I built a travel journal — Retrospective
In preparation for an exciting trip to The States, I built a simple travel journal (trips.mattwelson.com)
You can view the GitHub repo here
The Idea
I wanted to build a website that I could update as I went, kind of like sending a postcard from each location. One to three photos that capture the spirit of the spot, along with a small blurb. While I was making the site I had a mantra of “I want to update this while I wait in line at Starbucks”. Really, it was just a way to keep my family updated on where I was and how the trip was going so far.
The Stack
I built the site using GatsbyJs, NetlifyCMS and Pose. It’s not the first time I had worked with GatsbyJs and I really do love it. Unfortunately I was building the site just as v2.0 was being released, some of the supporting libraries had been updated and some had not yet been. NetlifyCMS was easy to build with, although the editing experience could certainly be frustrating.
Pose was a fun addition to the project, I was setting out to make a site that looked good and included lots of fun (and helpful) animations. After all, the main priorities were to finish the site and launch it, and to learn a lot while doing it.
The Good
I spent just about 2 months working on this site in my spare time, I then managed to share it with my mother in what I hope was a nice surprise! When I started the project, Gatsby v2.0 was not yet released, so part of development included migrating to the newer version once it was ready. This took some time but right away I could see improvements to my build times (especially on Netlify).
Speaking of Netlify, the process to add a new site under a subdomain took no time at all. I always fear the worst whenever I need to touch anything to do with a DNS and this was an amazingly smooth experience!
Pose was fun, it added lots of character to the site with just a little bit of effort. The hardest part of using Pose is working out how your elements need to be sized and positioned in CSS so that it can work in a smooth manner, with things stopping and starting where you intend for them to be. This was especially tricky with the hover over drawers for the back and forwards arrows that control the image/trip you are viewing.
The Bad
I was a bit disappointed with the upload process, it really dragged out uploading a few images one at a time when I was on terrible camp ground internet (we actually visited surprisingly few Starbucks while we were in the RV). I did a few test uploads on mobile, but doing it on 4g at home is nothing like doing it on data roaming in the middle of nowhere.
I also had assumed that all the photos I would upload would be taken on our camera, and then would be edited and uploading without needing to be cropped, but in reality I uploaded a few photos from my phone — which look fine in terms of quality but the main issue is I accidentally uploaded a portrait photo for Observation Point! Sure, I could fix it, but I’ve decided I’d leave it warts and all and just talk about the issues I had instead.
All the development work for the site was done on my MacBook, which meant I was always looking at the images on a high density screen. Turns out some of the quality compression stuff I was doing actually makes the images look like garbage on a normal density laptop. I’ve noticed this is fairly common on responsive sites, I think quality 90 on the image compression is too noticeable — luckily it’s easy to bump that up and take a little bit of a hit on page load times, thanks to the GraphQL query that powers that transformation.
Next time
Next time I work on a project that is so image dependent I will make sure I use a third party upload tool for images. Luckily, NetlifyCMS has an UploadCare integration that came out shortly before my trip. This could have saved me a great deal of frustration with how I uploaded images. I didn’t want to spend time dealing with responsive images right from scratch again, after I had taken my time to get it working with local images in the first place. I would also make sure that cropping is enforced at upload as some of my pages look pretty dumb, namely Observation Point. I’ll definitely continue to make fun websites, for my own learning.
