04 June 2013
Introducing PicDinner (my first Meteor JS application)
As my first exploration into the Meteor JS web framework, I decided to build a simple application that lets you combine an image and an audio file to play together—I called it PicDinner. After wrapping my head around how different Meteor is to any other framework I’ve used before, it was a joy to use. Despite being a rather silly project, I tinkered around with it every once in a while for the next 6 months (amidst work, other side projects, and living my life) purely because it was fun to build.
The application: the project is no longer running :'(
The source code: github.com/mrcoles/picdinner_meteor
You can find some of my initial thoughts in the README of the github project. Here are some additional neat things in the project:
-
I ended up going with the SoundCloud HTML5 widget for audio. Sound cloud doesn’t have the breadth of music that Youtube has, but it feels way classier.
-
I employed some classic algebra to come up with a less css mixin for a reactive fluid grid layout (it’s rewarding to use high-school math for something other than calculating a tip).
-
I ran into lots of trouble with autoplay not working on mobile phones, so I came up with a trick to detect HTML5 autoplay support that uses data URIs.
-
I wrote a script to make the backbone router easier to use with HTML5 pushstate—however, for future projects, I’ll just use the meteorite router.
-
I wrote some image scripts to full screen an image on a page and to stop animated gifs except on hover (using a canvas).
-
I wrote a script to forward port 80 to port 3000 so you can test your local app with your phone (I ran into this issue when originally running meteor directly on port 80).
It should work on mobile (but all the media files might slow it down). If you login, “picdins” that you add will be associated with your account (here’s mine) and you can also vote things up or down. Thanks to Quinn Scripter for adding a “seek to” feature for songs. I added an embed feature too.
Some nice future features might be a slicker interface for adding picdins (with gif and audio search), more social info to show off users who are adding good content (then maybe it wouldn’t be just me), and more advanced time-decaying of voting, but honestly I’m pretty surprised I built out as much as I have so far. Enjoy the experience!
