Written by Brent Laverty, Steve McKinney, and Guillermo Esteves
Our recent front page redesign can trace many of its roots to the CES 2013 hub we launched in January to cover all the developments out of the show. We used the hub, more or less, as a testbed to experiment with some new front-page functionality which we would eventually roll into a refresh of the homepage proper. These new features included video integration for archived and live feeds, new interstitial hero slots for pinning big news and longform pieces, and new ways to present and contrast multiple StoryStreams. The additions yielded some great usage statistics, the most significant of which was a large spike in video views. Refreshing The Verge front page would prove to be a bigger challenge than creating a one-off hub for an event. The general look is really iconic, so it was vital that we avoid disrupting the lively newspaper spirit of it all.
Written by Guillermo Esteves, Front-end Engineer, The Verge
If you’ve been following this blog for a while, then you’ve already been acquainted with many of our Product Team members in previous posts, but today, we’d like to introduce one of our hardest-working teammates: CampfireBot, or cfbot for short.
It all started during that magical summer of 2007: developed entirely in-house by our VP of Technology Pablo Mercado (long before 37signals released a Campfire API), CampfireBot was originally a Ruby script that simulated a login into Campfire, stored the cookie, parsed the HTML response to “listen” to a room and replied using HTTP POSTs, for the main purpose of automating code deployment to our servers. Since then, it has evolved to use the Campfire API, Campfire and Jabber listeners written in Go, Redis integration for data storage, and a browser GUI built into our Banana Stand sandbox management tool.
All of this allows cfbot to perform a number of jobs that greatly enhance our productivity across the entire team, such as:
- Announcements of deployments to staging, production, or our various sandboxes.
- Announcements of new commits in our various projects.
- Error alerts in our Notifications room thanks to Sentry, New Relic, and Nagios integration.
- Searching through Binder, our custom-built search tool for storing internal company information and resources.
- "Pinging" people via IM when certain user-configurable keywords are uttered in any room, which comes in handy to get someone’s attention when they’re busy and away from Campfire.
- Integration with FogBugz, allowing bugs to be assigned to any user from Campfire.
- Integration with Pager Duty, to find out who is on call when shit hits the fan outside of business hours.
- Real-time traffic numbers for our sites thanks to our top-secret Providence analytics tool.
However, cfbot’s functionality doesn’t stop there, and adding new commands has become a rite of passage for new developers joining the Product Team. This has resulted in a multitude of commands and utilities, some useful, some… not so much, yet equally entertaining:
good morning is usually a good way to start the day; if it’s early and there’s no one else in Campfire, cfbot will keep you company. You mileage may vary if your name is “Dave”, though.
what is your mood? queries cfbot’s current mood.
congratulate, used to celebrate important milestones in our team.
roll for rolling dice, just for fun or to greatly simplify our decision-making process.
weather for [location] uses the Forecast.io API to get a weather report for any part of the world.
rdio me [song name] is pretty self explanatory, but useful when you want to
rickroll share a song with the team.
ralph me, displays a random quote from Ralph Wiggum, if you like… stuff.
swanson me does, well, see for yourself.
yelp me comes in handy when trying to decide where to go for lunch close to the office.
aww me, otter me, corgi me, red panda me, and others, get a random image from different subreddits, depending on the command (e.g. aww me displays a random image from /r/aww).
show me [search term] display the first result of the Google Image Search for that term. Can be used as show me a gif of [search term] to narrow down the search to animated gifs, or as giphy me [search term] to do the same thing using Giphy, since we tend to hit the rate limit for Google Image Search pretty frequently.
gif add [keyword] and gif me [keyword] are used for storing and retrieving random gifs from collections in Redis, because sometimes all you need to get you through a long day of work are a few gif me kittens.
store [keyword] and get [keyword] are just a simple way of telling cfbot to store and retrieve certain data in Redis.
But my personal favorite, and I’m sure many of my teammates will agree, is [person] is at [url], which uses ImageMagick to superimpose cutouts of many of our team members on top of any image on the web, and has resulted in many hijinks over the years:
The is at command hit a major milestone earlier this year, when Polygon Software Engineer David Zhou extended it with the addition of OpenCV for face detection and replacement, with hilarious results:
You might be wondering what the point of all of this is, and why we waste time on it. Well… On one hand, the utility of cfbot’s integration with our development tools and services is evident: it allows us to stay appraised of what everyone is working on, when code is being deployed to production or our sanbox/staging environments, and when serious errors occurs, all of which are crucial for a team that is spread across the United States and for which Campfire is our main communication hub. But on the other hand, our cfbot tomfoolery, silly as it may seem, encourages people to be present and active in Campfire throughout the day, which helps everyone remain informed and part of the team, no matter how far away they are from their teammates. And to be honest, those special and rare “cfbot moments” – when a well-placed “is at” causes the entire office to explode in laughter – are one of the main reasons why coming in to work every day is so much fun.
Written by Brian Anderson, Software Engineer
I recently started working as a developer for Vox Media. I work remotely from the lovely city of Ames, Iowa – which in case you didn’t know, is the birthplace of the The Atanasoff–Berry computer, the first electronic digital computing device. (Don’t worry that was a TIL for me too). I’ve lived here for 7 years now, after moving from Silicon Valley in 2006. At that time my wife and I just had our first child and we were ready for a slower life and to experience tornadoes up close.
I spend most of my day sitting at my desk, and supporting the editorial team with quick fixes to Chorus. If you sent a nasty, hilarious, or hilariously-nasty email about our platform, chances are it gets assigned to me. The rage is slowly building…
Let’s start with the most important thing on my desk — coffee. I am pretty particular about it. The beans are locally roasted by Burgies Coffee, I grind and brew 32 ounces of it in a Chemex coffeemaker every morning. After 4 years of this, I’ve converted my wife into a coffee snob too! The funny thing is I used to make fun of elite coffee drinkers while pouring loads of creamer in my coffee then a few years ago, I worked with a guy who brought in the most marvelous coffee. A few weeks later I was hooked, and I just HAD to purchase my own setup.
Back to what is on my desk, I work on a 13“ MacBookAir (2013). The Air has a silly fast SSD, which reduces sleep/wake time and load time compared to regular hard drives. I also like the flexibility of grabbing the light-weight Air and heading down to a local coffee shop to get a fresh perspective (and fresh coffee). The battery lasts 10 hours, which is freakishly long—probably longer than my brain can focus on writing software.
A couple of years back I switched to using an Apple Magic Trackpad full time. The multitouch gestures come very natural to me.
I constantly have Chrome, Safari, Textmate and a handful of terminal windows open, and that’s not easy on the 13” screen of the Macbook Air. To supplement that, I have a simple Dell UltraSharp U2412 24” monitor.
I have a small light behind the monitor, to reduce the strain on my eyes from staring at the display all day. I bought a small desk lamp ready to house my programmable LIFX Kickstarter-backed LED I am desperately waiting for. Eight months of delay seems to be normal for ambitious Kickstart projects, or so I tell myself. I plan on using the LIFX to light my office with the colors on the most recent animated gif in our Campfire room, soothes the eyes and the humor bone.
I try to drink enough water to balance out all the coffee I drink; so I put an empty cup on my desk. The desk itself is an old Ikea desk paired with an old Staples office chair. Neither are all that great. The older my body gets, the more I contemplate getting something nicer. Possible building a custom standing desk from old schoolhouse doors, or recycled barn lumber. Sometimes I sit on a yoga ball because people say it would help my flabby core – I haven’t seen any improvement.
On the way to get coffee, I often end up waiting for the train.
I usually listen to dance, house, or electronic music while I am working. I like music that I am not tempted to sing along to and provides upbeat, driving tracks. Soundcloud consistently has the best remixes and mash-up music. At least once a day, I listen to one of the monthly Funky House London mixes.
To get those happy songs into my ear-holes I am currently using a pair of Bose On-Ear headphones. They seem to provide a nice mix of noise isolation (from my 5 & 7 year old boys) and breathability for my overly-sweaty ears. Personal confession: sometimes I find myself sitting for an hour, or more, with the headphones on without music playing, which is really embarrassing. I think this is because I’ve played through an hour long mix and I don’t realize that the track stopped. (Or possibly, I paused the music to watch some random youtube video).
I have a boring iPhone, that I use to tweet, take pictures, and listen to podcasts. Excluding conversations with my mom, I’ve used about 3.52 voice-minutes this year. I am ready for something new. My apple fanboyism is fading, so maybe this is the year to get an Android device. Though I can’t get over the laggy-UI and those horrible pentile displays.
Somewhere in my house is my retina iPad 3, though I suspect my kids have taken it over for Minecrafting. To help manage the various cords for my devices I have a Blue Lounge Sumo preventing things from sliding behind my desk.
I’ve tried so, so, hard to be a digital-only note taker, but nothing beats the ability to scribble, doodle and take notes on paper. I’ve taken a good amount of notes over the last four years, as I returned to school for a Computer Science degree from Iowa State. It is hard to beat the speed and flexibility of paper. I’ve even dabbled with those ridiculous digitizing pens – they are a joke.
I use a Pilot Birdy Mini ballpoint pen and Field Notes Night Sky Edition. Field Notes lets you feel hip, old-timey, and small-business friendly all in one tiny doodle-inducing useful package. I have a bad habit of cruising Jet Pens, looking eye-catching writing tools. I don’t remember how I got into this horrible habit of mindlessly browsing Jetpens, but I am powerless to their monthly newsletter and always end up ordering tiny Japanese pens. Without a doubt, my favorite pen of all time is the Zebra Sarasa Push Clip Gel Ink Pen - 0.4 mm. You can spend a lot more money on a pen, but nothing else places ink more consistently on the paper than this workhorse.
I have a collection of classic computer science textbooks that I am slowly (very very slowly) trying to make my way through. Fundamental Algorithms, by Donald Knuth, is a wonderful text that details the art of creating beautiful algorithms. I believe writing software is an art form where the developer is a craftsman sculpting the ideal solution. The other book is the Dragon book on compilers has come highly recommended. Sadly, I haven’t cracked it open yet. I can’t tell if I actually enjoy reading these types of books or if I just enjoy thinking about reading the books. Maybe I’ll write a follow up post in a couple years and let you know I’ve finish either of these.
Also, I have a fun little radiometer that spins when it is in the sunlight. I am a huge sucker for gadgets, I think it is from trolling the electronic surplus stores that peppered the silicon valley in the late 80’s. Middle School science fairs were a lot of fun where I grew up, it was the golden era of hobbyist-built computers and pvc-plastic based robotic arms. All the dads, with their killer mustaches, giant glasses and plaid shirts competed to out-nerd their children’s classmates’ dads. I guess my son’s science fairs projects will be GMO gene-sequence soy and rhubarb hybrids: rhuhoy!
I work in one of our spare bedrooms, and get to look out my window and admire the wonderful Iowa flora. Sometimes I get to see fox, deer, rabbits, drunk Iowa State students (or professors) and neighborhood children running around back there.
And before you ask: you should also own two grills! It is amazing how resourceful they can be. For instance you can have one rust out, leak gas and be overrun with field mice and still prepare a nice dinner for your family on the other.
There are a plethora of fantastic, web focused conferences out there, but this week, I’m at the 40th annual SIGGRAPH convention.
For those unfamiliar with SIGGRAPH, it is an interdisciplinary conference sponsored by the Association for Computing Machinery, largely focusing on the broad field of computer graphics. This covers everything from Pixar’s computer animated films to low-level GPU programming for Subspace Fluid Re-simulation.
Last month, around 10 Vox designers descended upon San Diego to participate in a design conference called Valiocon. Our mission was three-fold:
- Go to a cool conference. Learn new things. Connect with new people.
- Give a talk, on the designing of our newest Vox vertical, Polygon.com. Do Vox proud.
- Go forth and bond with thy team.
Valiocon, (billed as the FUN design conference) is set in beautiful San Diego at the Catamaran Resort. The lineup of speakers ranged from letterpress experts to designers-turned-surfing-acai-smoothie-evangelists to talks on magazine publishing for web designers - bookended by good food, and time in the Southern California
sun June Gloom. All-in-all, an engaging and well-balanced event.
Team Polygon Design gave a 45 minute presentation called Polygon: Design at Scale - where we mapped out our process… touching on typography decisions, moodboard development, and responsive design. If you read this blog regularly, we’ve been over much of this stuff here, on the product blog. But *do* take a gander at the deck we put together if you’d like more!
While it was awesome to share our process with other folks in the design community, and the talks were thought-provoking - it turned out the bonding was the best part of this excursion. Though we had hoped (even planned) for some solid team-building time, we may not have been prepared for what a week together would come to mean. Over tacos, and beer, and the dancing (oh my god the dancing), and some potentially misguided late night swimming… some team fires started to re-ignite.
I’m sure I don’t have to explain to you what it feels like to make meaningful connections with other human beings - but I did want to underscore the value of this sort of thing.
We, as colleagues, were able to double-down on relationships. We shared laughs, stories, and generated a shockingly large number of new inside jokes. If you want to look at it from a company angle, we strengthened trust and goodwill amongst team members. It will - no doubt - leave a long-tail of increased interest in collaboration, and improved culture.
But there is more to it than that. When you step back and look at your life, and the decisions you make about where to spend your time, and what you spend your time doing… it’s nice to feel like you’re among kindred spirits. It’s nice when those kindred spirits turn out to be the people you work with.
Written by Ted Irvine, Design Director, and Sharon Wong, Lead Designer
You might notice a new green-toned Vox Product logo on this blog. We’re not celebrating Earth Day, St. Paddy’s Day, or Bruce Banner Day. We’re simply flying some new colors within the Vox Media family.
To accompany the launch of our corporate website, voxmedia.com, we’re rolling out our new branding system. Why bother implementing a new branding system, you ask? Well, the dirty secret is that to grow a media company it takes a talented set of folks with a diverse range of abilities, many of which do their work behind the scenes and out of the spotlight.
We have grown to three verticals, but the teams that build the properties, sell the advertising and develop brand stories have grown as well. As things have hit critical mass this year, we’ve needed to both formalize existing groups within Vox and create new ones that satisfy our organizational needs.
We wanted to provide these organizations with an identity that was unique and identifiable, yet still clearly a part of Vox Media. Our new system relies on the Vox brand mark and logotype to anchor each of these divisions — color becomes the main differentiator here. We decided to stay within the existing color conventions of the Vox mark and focus on tones within each color family.
With this is mind, we developed color explorations for each organization. We explored not only the conventions around branding and color theory but also chose the color family that best represents each organization’s personality and service.
Blue was ultimately chosen for the sense of authority, success and security that the color family evokes. Those values represent what our sales and ad operations folks at Vox Media are all ‘bout - the business side of Vox. We swear it had nothing to do with suits.
Green was chosen for the sense of life it represents and is also reflective of the essence of our Product culture and what we create. Ultimately, this is the greenhouse where our products are conceived, produced, developed, modified and iterated on. Everything we do is homegrown in our laboratory for the fresh consumption of our audiences, editorial and advertising folks.
Bright pinks and magentas were chosen for the sense of imagination and innovation that those colors can evoke. It is a good representation for the in-house group of creative designers, developers, directors and storytellers that help make our ads and our brands beautiful, compelling and unique.
Reds were chosen for the feelings of passion, vibrancy and punch that this color family is renowned for, representing the dynamic folks who produce highly engaging video content for our passionate audiences.
With all that being said and done - we can’t wait til we roll out the colored jumpsuits so everyone is clearly identified. I guess we know who gets a red shirt.
Advertising on the Internet is often considered a necessary evil, but at Vox Media we believe that advertising can be as good as an experience for readers as our content - engaging, seamless, and beautiful. The Interactive Advertising Bureau (IAB) has struggled to keep pace with the types of experiences available to both readers and brands, so we decided to take matters into our own hands.
The ad products we build in-house are far superior to other high-impact units that can be found on the Internet. We draw inspiration from gorgeous full-page magazine ads—well-designed, elegant, and a cohesive part of the experience of visiting one of our sites. What we leave out matters as much as what we include: these products never automatically play video or audio, and they are integrated on the page seamlessly, never covering up or blocking our great content.
At Vox Media, we are passionate about our advertising the same way we are passionate about all of our media properties. Just like SBNation,The Verge, and Polygon, Advertising Products has its own cross-functional team of developers and designers on our Product team, and this team has built some pretty great ads for some pretty great brands. Each has challenged us to design great interactions within front-end responsive constraints.
EVE Online came to us with an opportunity to build some custom advertising for the launch of their newest expansion, EVE Odyssey. They wanted to share their game trailer and showcase their awesome imagery for the expansion pack, especially the spaceship you can see in on their site. We have a new ad product we are rolling out called the Fishtank that we thought would be perfect for this use case.
There are some lovely details to this advertisement, from a subtle zoom that indicates traveling through space to the clouds that drift across the screen to give a sense of depth. Ads like this perform extremely well, and are fun to build given the great assets video game companies share with us.
Samsung Galaxy S4
Samsung came to us with an opportunity to promote their new Galaxy S4 which has many interesting features, such as the large screen, the camera, and the ability to navigate without having to touch the phone.
Building this was quite a technical challenge. There is a cool animation on each click that gives a sense of depth; our designers and developers had to come together to create both it and the moving bokeh in the background.
Oftentimes our editorial teams will come up with a great series that a brand wants to be aligned with. The Polygon crew did exactly that, building a series called “Human Angle”. This original series tells the stories about great games and the people that influence and are influenced by them. When Microsoft heard about this editorial series, they wanted to sponsor it, aligning their brand with our great Polygon content.
The great thing about the Human Angle fishtank is how much it feels like a Polygon experience, from the placement on the homepage to the styling to the great content. Our readers love this ad product because it collects great content for them and Microsoft loves this product because it aligns their brand with Polygon quality editorial - everyone wins!
Our Product Team is just getting started on these challenges, and we relish the opportunity to make advertising on the Internet better. If you’re interested in joining the good fight, we’re hiring!
Written by Guillermo Esteves, Front-End Engineer
Tuesday is normally a very special day for us at Vox: it’s our weekly team lunch, which we’ve come to lovingly call Bertuesdays. Originally, this was a weekly Bertucci’s pizza delivery, but it has since expanded to include a variety of delicious food.
With last week falling on America’s birthday, our awesome office manager, Lauren Williams, treated us to an incredible Fourth of July Bertuesday, which included a variety of the best all-American food D.C. has to offer: half-smokes, burgers, chili, potato salad, and corn muffins from Ben’s Chili Bowl; ribs and chicken from Hill Country; fresh fruit and veggies; and fried chicken, crab cakes, baked beans, and mac & cheese made by Lauren herself.
She also went the extra mile and appropriately decorated our office in red, white and blue.
For dessert, senior accountant Katie Richman (who you may know as the mastermind behind Vox Baking) contributed delicious Lofthouse-style frosted sugar cookies. “They’re the homemade version of the big soft frosted sugar cookies found at nearly every grocery store,” Katie said, without the “unpronounceable mystery ingredients.”
All in all, it was a pretty fun day for our team, even for those of us who weren’t born in the United States, such as yours truly, seen here with support manager Cory Williams (you can probably guess who’s who).
Of course, none of this would have been possible without Lauren’s hard work. Thanks, Lauren!
Do you want to come enjoy our Bertuesdays, and more importantly, build some really cool stuff? Come join us, we want you.
Here at Vox Product, our Campfire rooms are overflowing with team members sharing ideas, jokes, news and interesting websites. There was a ton of great discovery over the past few days, so please join us on a journey through our favorite internet things for the week of June 24, 2013.
Face to GIF: A site created by Horia Dragomir, Face to GIF allows anyone with a working camera on their computer to make an animated GIF without the difficulties of actually knowing how to do anything.
Here’s Polygon’s Support Manager, Cory Williams, having some fun with Polygon Designer Tyson Whiting.
No designers were hurt in the making of this GIF.
Here’s Senior Front-End Engineer Dan Chilton showing off his mad Zippo skills.
Nifty Modal Window Effects: The Verge’s front-end engineer, Guillermo Esteves, shared this gem on Wednesday. There are apparently endless ways to style your modals through CSS. Which one is your favorite?
Finally, here’s a magical GIF of a ton of Pokemon who look a lot alike.
See you next week for another edition of “Cool internet things we’ve discovered this week”!