Recently, we released uw.edu/social into the wild. You should go check it out (and connect with our social media properties).
The idea behind it is pretty simple. Our presence on social media properties is growing—and growing a little unruly. Not all of our social media properties have the same account name (an unfortunate byproduct of being an institution named “UW”), plus our presence spans almost a dozen properties. Our mission was to wrangle everything into a simple landing page that makes it easier for Huskies to connect with our central UW accounts.
Although I am on the University Marketing & Communications social media working group, I’m first and foremost a developer. Which means I wouldn’t be the one blogging about this site if there wasn’t something cool going on in the code.
The code pulls in the last 40 photos from our Instagram account and then scaffolds and populates a background grid with those pictures. The images are randomly selected with a few caveats, and the wonder of Backbone’s object-oriented framework makes those caveats possible without shoving lots of extra data into the DOM or polluting the global namespace. When choosing a background image for one of the background tiles, the InstagramBackgroundView object (an extension of Backbone.View) keeps track of loaded images to ensure that identical images aren’t too close to each other in the background. It even does this while rotating the tiles dynamically. It’s also mobile friendly: The DOM stays light and our users’ mobile data usage is minimized because the view doesn’t actually download the images or create/populate the grid.
The social site is more than just a nice thing; it’s a harbinger of things to come, a peek into our future. The model-view-controller paradigm is such a nice way of organizing code that we’re going to try to do it everywhere. In future iterations of the UW theme, keep your eye out for our take on MVC-izing WordPress.