PicDinner breaks down your usual video experience and builds it back up as a delicious visual and aural meal of an image plus a sound file. Sample existing picDinners or pair up your own and share them with your friends.
PicDinner was my first forray into building something with Meteor, and it was a pretty neat-o experience. The ease of building reactive documents is great, but zero effort for an environment, a db, and server is pretty amazing too.
It’s a pretty straight-forward app (I wrote it on Meteor 0.5.2), some non-standard things in there might be:
- renamed my core files to index.html, main.js, style.less (included less package)
- used History.js for HTML5 pushState and semi-manual URL routing (in the future the meteorite router would be nicer)
- wrote some relatively reusable code for including FB & Twitter sharing widgets that lives in client/shares/*
Some ideas that eluded me when I first started:
- it’s a single-page app and every file gets merged into that one page, and the server will load that page on any URL path that you hit
- the html files have essentially 3 top-level sections (that can be repeated): head, body, template
- run
meteor add lessand .less files will just work - use the Session object with Template helpers for “reactivity”
- use allow and separately publish/subscribe to limit the data
- create a pasword when you deploy your app (subject to change in the future)
Some pain-points, possibly due to being new to Meteor:
- wanted to re-use the same template in different templates with different helper function variables, I ended up making multiple templates as seen in client/shares/shares.html
- had to fall back to Tempate.foo.rendered for more advanced JS interaction like the music playing and updating the share buttons
- my CPU goes nuts when I run the application, but that’s probably just because I’m currently playing up to 10 animated gifs at once -- updated: created jquery.stopgifs.js to replace gifs with canvas elements until you hover