Creating Disc Space; A Developer's Folly

600 plastic DVD cases when stacked accordingly creates a pile approximately the same size as an average washing machine. I know this because in the loft of my house right now, for lack of alternate ideas, is such a pile. The cases are all empty, their discs exiled to two leather-bound albums bearing copious pockets, much like those you would have had in your car in the early 2000's caddying your ripped Maroon 5 CDs. Together, these two leather albums take up considerably less space than the floor-to-ceiling, 3 metre wide shelving unit that previously housed my film collection. Said unit was sadly retired when the wall against which it stood was deemed to be incongruous to the open-plan living my wife and I desired in our new home. Once the wall was reduced to dust, the unit was dismantled and a less dominating entertainment storage solution was sought.

At this point you may be wondering why my tech, design and illustration blog has gone a bit Phil and Kirsty. Fret not, this is all precursory stuff leading to a self-initiated dev project I completed recently.

Back when my DVDs lined the walls of my lounge, their cases proudly displayed in all their alphabetised glory, finding a film to watch on a Friday night was as simple as browsing the collection left to right, right to left, or whichever way you fancied; all the titles were simultaneously on view for total browsing consumption. Equally searching for a specific title was a piece of cake owing to the alphabetical arrangement; start in the middle at M and ascend/descend the rows until you located Eight Legged Freaks or The Pursuit of Happyness respectively.
However, now that the discs are liberated from their distinguishable box art and are hidden from view within hundreds of nondescript wallet pockets, both browsing and searching the collection have become much more arduous tasks, especially considering the rather out-of-character suspension of my fastidious nature applied when filing the discs, which I did in no discernible order - more on that later.
So, in order to restore optimum levels of ease and speed to both browsing and searching my DVD collection I decided to build myself a digital indexing platform.

To start, I needed a database to hold all the necessary info about my DVD collection. I always use phpMyAdmin for authoring MySQL databases, so I created a new table and assigned field columns for each of the criteria I'd expect to see during a browse/search such as film title, box cover image and genre. More crucially I needed a column to act as my primary key, that is, a non-variable in the complete data set. The disc slots in the leather albums are fixed in place with glue or something so it's safe to conclude their arrangement is unlikely to change. Therefore numerically ordering the slots as they are encountered page by page using small pre-numbered sticky labels became my constant - my primary key. 600 discs in 600 slots now labelled 1-600. That's 600 corresponding rows needed in the database indexed by their wallet position number.

Populating all those rows manually would be akin to eating a whole pine tree in terms of physical and mental anguish, so I wrote a couple of scripts on my sever to help me out. In short, I coded a single input field for 'film title' which when submitted would create a new row, populate the title field, populate the box art field with the same title but de-capitalised and de-spaced and fire off a look-up to popular movie archiving website IMDB to scrape back the film's genre details from the front end (this was quicker than trying to source an .xml or similar to traverse). The wallet number column was set to auto-increment. I then chipped away at the pile box by box, submitting each film title to my form and relocating its corresponding disc to its new album slot. The wallet number or "ID" was now the new constant so I didn't need to extract from the pile in any particular order, thus abandoning the former alphabetised logging.

To be perfectly honest, this is where I could have concluded the project. I'd have been more than happy to fire MySQL queries at phpMyAdmin forevermore to help track down the films I sought after, but that would have left my non-coding wife (50% of the platform's user-base) totally unable to operate it. I was going to have to build a front end...

From the off I had a rough idea what I'd want to include, namely a homepage with a search feature - a simple input field and submit button that squeezed text strings through a JavaScript Ajax function to a lookup file scouring the database's title column and returning matching LIKE rows. The Ajax response would throw up a grid of results comprised of box cover art, title and crucially, the wallet ID number. Simple.
I considered using Masonry.js for the grid, but you know what? I hate Masonry.js.
To keep things neat the lookup file first trimmed the submitted strings for white space, lowercased them and dropped all punctuation. It also hacked off "the"s if they occurred in first three characters (plus the proceeding 'space') so that an alphabetical index could be properly trained on sensical base words. This allowed me to add an A-Z filter to the top of the page that returned every entry in the database sorted should I want to browse the whole lot, or a single random entry should I be feeling particularly cavalier.
So far so good.

Next I wanted to include a genre filter; a list of links that corresponded with the genre categories scraped from IMDB earlier (Action, Adventure, Animation and so on). Clicking these links would perform a blanket lookup as you'd expect and return another grid of data, though this time the lookup was a little beefier as the IMDB dataset had allocated two genres per film, so twice the looking-up. For neatness this link list was buried under hide/show JavaScript code and a trigger button in the top nav.

The next feature for development was inspired by my wife, and specifically, how her motives for film consumption differ from mine. Sometimes I choose to watch a DVD because I find myself craving a particular atmosphere or mood. Other times I choose one because I catch myself reminiscing about a familiar scene or character or script. Whatever the catalyst, I like to detach from the world entirely and fully immerse myself in every polished performance and cinematic flourish the film I select has to offer.

My wife on the other hand chooses which DVD to watch by glancing at the clock, calculating how much time there is "to kill" between task A and task B and then sourcing the first disc to hand that would adequately fill the duration. A duration filter was therefore paramount if my wife ever wanted to enthusiastically use this system. I chose to attack this in two ways; the first was to rescrape all 600 films from IMDB for duration data (in minutes) and store this in a new column in the database. The second was to add two filter buttons to the top nav - Long and Short, each returning a grid of films over 90mins and under 90mins respectively. Now when we find ourselves with only an hour and a half before a trip to Charlton to collect a suitcase of fruit, my wife and I have but one click to make before we leave.

Things were starting to round off nicely for the platform at this point so I began to intermittently test it was fit for purpose. Just as well I did as a fairly substantial error presented itself early on. The means by which I had coded the main title search field meant that the database was trawled for each word submitted to find and return possible matches. But the trawling was a little too literal and mid-word matches were also creeping into the results grid. For instance, a submission of the word "old" with the aim of calling back 40 Year Old Virgin, though successful, would also pull back Dog Soldiers and Cold Mountain. Not a huge concern for just the pair of us, but as a UX professional it didn't sit right with me.
The solution was to append a second MySQL query to fire in the event of the first failing to find a text-literal match. The second query would split the submitted string into one-word substrings and then trawl for those within word boundary markers. As an added precautionary measure I also coded the input field to fail validation if less than two characters were submitted to prevent "so" and "an" returning Bronson and A Clockwork Orange.

Devoid of any other errors I moved on to the final two tasks of the interface construction. The first was straight forward enough; dressing the whole front end up in a device responsive design via CSS; a few button styles, icons for the filters and a hierarchy of font sizes for the results grid did the trick. Hell, I even threw in some jQuery animations for the fun of it.
The second and more painful task was sourcing and uploading all the box cover art. I racked my brain for days to come up with a script that could automate some if not all of this process, but invariably, image-based work is best done manually if it is to be done correctly. So one by one I Googled the box art of the entire collection, mindful to download only the exact replica designs and not, say, the various European or Asian releases where the art and text differed. I scaled and cropped each of the images so that only the front-face of the box art remained and that each of the resulting files was uniform in dimension, ready for bulk upload.

Days, weeks, months of using the completed system later and everything was running smoothly; our household was enjoying an efficient DVD selection process and everyone's lives had improved immensely. There was one piece of primary user feedback however, from... erm... me. I realised that every time I was presented with a swathe of DVD covers in the results grid I was reminded of films that I'd not seen for a substantial period but that weren't wholly adequate for the mood/audience at hand. Given that I'm a creative type, my mind holds on to short-term memories like a chimpanzee holds on to its own faeces, so keeping a record of the films I'd like to watch in the near future was a task I was entirely ill suited for without the assistance of faultless reliable technology. And so the bookmarking tool was developed. A quick tap of a box art graphic at any point in the system now flags its entry in the database as 'bookmarked' and also renders a clear red icon against it on screen (a subsequent tap unmarks the film). All the bookmarked films can be viewed via an additional item in the top navigation, ensuring I never again forget what I'd like to rewatch.

As a disclaimer to this post I should express that I'm fully aware there are already apps and software out there that do pretty much everything I just coded myself. Some of them are even free and include a huge range of ready-to-use film records that you cherrypick to mirror your physical collection - masses of convenience from the off. But where's the fun in using them? I'm a curious and creative person and my hobby just so happens to be the same thing I do professionally - generating digital solutions to real world problems. I could have just used one of those existing apps or softwares but I'm very much of the opinion that if by reinventing the wheel you gain a whole bunch of skills, insight, and opportunities to problem-solve, then you should crack out your hammer and chisel mate, and that's exactly what I did.

As discussed, a byproduct of rehousing an oversized collection of DVD discs into new storage is an oversized collection of empty DVD cases that serve no agenda. No agenda that is, until this past Halloween rolled around when a tremendous opportunity presented itself.
This year I was invited to attend a pirate themed Halloween party. Opting to forego the typical guise of eye-patch, bandana and sword that such a theme necessitates (precisely every other guest at the party wore as much) I chose to attend the party as another type of pirate entirely; a DVD pirate. In a flash of utter laziness genius I taped as many DVD cases from the dormant pile in the loft to my torso as possible. The pivotal embellishment in the 'costume' was that I'd replaced all the genuine artwork in the box jackets with the very best Google image search had to offer on bootleg knockoff (and largely foreign) box art for that... authentic(?)... look I was going for. It really paid off too; only around 50% of the impressively and more conventionally dressed guests had no idea why I'd arrived cocooned in Sellotape and plastic.