During my co-op term as an enterprise developer at Canadian Blood Services (CBS) I spent most of my time working on Grails web apps. Part way though the term, I decided to put what I had been learning at work to good use and make a website of my own, for a few reasons. First, I wanted to start some kind of programming project that I could work on in my spare time. Second, I had never actually seen Grails or Groovy (the language Grails runs on) before I started work at CBS and, as such, had a lot to learn. While there were a few other reasons (who doesn’t want their own website?), building a website would allow me to try some things I had never had a chance to try at work and generally improve my programming skills.
However, there was a pretty serious issue: I am not a front end web designer; I know how to make websites work, not how to make them look good. While I do have some experience doing front end web design (both at CBS and from other projects), I lack the visual creativity to create a theme from scratch. Therefore, my first course of action was to find something I could use to template my theme, which led me to the Twitter Bootstrap. Initially, I was under the impression that it was a fairly simple plugin which would make my site pretty; however, as I began working with it, I discovered that it was capable of much more. The Twitter Bootstrap is a front end framework made by Twitter and released as open source software. I installed it as a plugin for my Grails project and it immediately added some code to my new project (primarily views). Each time I generate new domain classes, controllers or views it will set them up for me, saving me a lot of the legwork. As this project was meant as an opportunity for me to build my backend web skills, I have made minimal changes to the front end. There were a few pages which needed some tweaking to fit the data I was providing them, but compared to the amount the Bootstrap does, it was a trivial amount.
After I got the Twitter Bootstrap all set up, I ran into my next issue: I needed a database. At work, I had always been provided with Oracle databases to work with, which wasn’t going to happen here. As I had previously messed around with MS SQL, I initially thought of that, but after a short stint of frustration, I ended up ditching it and downloading MySQL. This worked out shockingly well because I found the interface easy to use, the syntax was familiar (unlike IBM and its different syntax) and the service I ended up using to host my website uses MySQL as well.
Now the only thing left to do was to create my website! I already had some ideas on what I wanted for my website; I wanted to be able to post blog entries and other interesting things such as youtube videos, pictures or comics. I also wanted to be able to create a way to upload from an app or the webpage and provide people the URL to the download. Additionally, my friends and I sometimes do little programming challenges (like finding prime numbers using recursion with a language you don’t normally use) which are a little outside our normal programming comfort zone and I wanted a method of keeping track of the scores. Beyond those three things, it was pretty much up in the air.
I’m going to skip a lot of the finer points of development and just discuss some more of the challenges I ran across. Skip ahead and…
BOOM. The website was (mostly) working; it had basic CRUD (create, read, update, delete) functionality, default views and no advanced functionality (like file uploads). Interestingly enough, I implemented the blog and photo parts of my website first (despite originally wanting the programming challenges and file download). After some serious Google searches I came across this article on photo uploads to a DB which suited my needs perfectly.
After this was successfully implemented, I ran into yet another issue. Some of the pages display quite a few photos (easily over 20); I had been uploading the photos in decent quality (around 0.5-1.5 MB per photo) so they would look good when displayed individually (taking up the whole screen). However, if I had 15 photos (15 × 1 MB) on a page, the loading time was really slow. Anytime I have more than one photo on the screen, all the photos are small (around 300px wide), so I needed a method of making and sending thumbnails of all the pictures. Since another part of this project for me was learning to work with other people’s tools, APIs and code rather than reinvent the wheel (much like we do in school all the time), I once again went looking for a tool to do it for me. I stumbled upon a number of plugins for grails and some for java (because Groovy can run straight java code) before settling upon grails-hd-image-utils. Upon upload, I would make a copy of the image being uploaded, use the plugin to decrease the size and store it in a ‘thumbs’ table.
Around this time, I needed a little work on the front end design since the basic displaying information in tables wasn’t going to work for photos and videos. With some help from one of my friends who specializes in front end design, we created new ‘list’ pages (labeled ‘Archive’ in most places on my site) as well as a new fancy method of displaying photo albums. After the major structuring had taken place, I continued to refine some of the finer points such as fixing some of the mobile pages, info pages, etc.
The final step left was to host my site; Grails sites require Apache Tomcat which quickly cuts down the list of available options. Other than Tomcat, I was looking for somewhere cheap and ideally with customer support. After consulting the list of recommended hosts on the grails website, I settled on JVM host. I decided to use ianholstead.com for my domain name; I thought about trying to get a .ca name but it would have cost more money and having a .com name just sounds cool. Initially, I got the cheaper of the two options for hosting but found it too slow so I ended up going for slightly more expensive hosting.
So there you have it! A really quick overview of the issues I ran into with developing my website.