I've always liked small things. As a kid, Legos & Micro Machines were my some of my favorite toys. I've also [responsibly] enjoyed adult beverages throughout my adult life. Sometime in 2006, I was at a liquor store buying mini-bottles to take on a double date with my wife and friends. When I realized how many of the 50ml bottles were clones in shape and design of their larger counterparts, I was hooked.
Fast forward a few years and I had a pretty impressive collection growing in my basement. I added in some shelving to display the bottles on and organized them by type. I even got to the point where I was running out of room! My wife generously persuaded me to narrow the focus of the collection. I even had a huge 30th birthday party where we purged about 300 plastic bottles from the collection. Now I typically follow these general rules of thumb pertaining to my collection:
Well, I'm a web developer by trade. It began to occur to me that my collection presented an almost perfect opportunity for a web application project that would help me practice and understand more about several technologies I had been learning. The collection is both quantifiable and complex. And as my hobby, it should theoretically be able to hold my attention.
When I first began building, I had just recently discovered the Bootstrap UI framework and was eager to try it out. A few major versions of Bootstrap have since been released and I have upgraded the site to help understand the changes. I'm using a few Google Fonts (Lobster and Cabin right now). The awesome icons are, of course, from Font Awesome. I'm also a big fan of image sprites and I added in this great world flag sprite from github.
I am interested in dynamic image processing and how to make many different versions of the same base image. 50ml.org employs the phpThumb() library to create different cached images on the server when new bottles are added to the collection. I integrated the imgAreaSelect jQuery plug-in on the back-end to make cropping down to the square label feasible. I added the Coudzoom plug-in on the front-end so the user could zoom the bottle images in the modal.
I was also interested in best practices for the mySQL database I created to hold the data for the site. A friend turned me onto Markdown when I was asking about how to best store the description data. I'm using the showdown.js port of the original markdown perl script for front-end display.
At first, I developed this site without any version control. After friend turned me onto Bitbucket, I began using a private git repository. Then I started using this Bitbucket FTP deployment script to automatically publish any git pushes to the web server.
In short, this project/site has been a place for me to test out technologies I am learning or am interested in. I've been getting excited about Angular JS recently and I'm already thinking I want to redevelop a lot of the main functionality of 50ml.org to take advantage of what Angular's live data filtering could offer.
In late 2014, things started changing for me at work and I began my journey from front-end web developer to full-stack software engineer. I'm learning everything I can about the Ruby on Rails framework and my first major goal was to rebuild this project within a Rails application. I'm excited to say the porting project is complete and you are currently viewing the “Rails Version” of 50ml.org! I'm using CloudFlare as my CDN on top of a single dyno Heroku account for hosting.
Along the way I have found some really incredible resources for learning, troubleshooting, and working with Rails. When I wanted more from AciveRecord for keeping bottles in order and knowing which is next and previous, Gleb Mazovetskiy's order_query gem saved the day. I'm using the Rails Assets jquery-cycle2 gem, the bootstrap-sass and rails-bootstrap-markdown gems on the front end. Oh, and I ditched Facebook login in favor of Devise because it was time to learn more about rails-based authentication schemas.
That’s about it as far as the current state of things. I've got lots of todos open for improvements and additions and even a few new bottles to index. Check back for relevant links as I add new resources. And as always, please enjoy this site responsibly!
The collection currently contains
that came from
all over the world!