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 previousposts, 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.
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.
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 bestremixes 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 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.
Whether through sketches on a whiteboard or grids in your favorite Adobe product, the design of brand experiences for the web traditionally begins in an environment outside the browser. In the world of responsive design, this feels increasingly strange.
Proper design exploration takes many many hours - and we love every minute of it. When you are defining both a web experience and the overall style of brand, an attractive visual presentation is the knot that ties everything together.
Polygon Exploratory Phase
SB Nation Exploratory Phase
In the past when we presented visual design directions, we presented in a static, traditional fashion. While this process served us well, it was insulated from reality. Mood boards are an outstanding tool for presenting the core of a design direction; they help all the parties involved understand the overall vibe of a project. Static images, however, are a poor representation of what a design will actually feel like in a browser because it does not account for the interactive elements of the web. Most of the design we now do at Vox is responsive— with type and other elements that change across different types devices. Static images do not provide the information needed to make a good decision on that particular direction.
Additionally, our discovery process hadn’t historically included a Front-End Designer in the mix. So there was a clear cost: design direction was visually strong, but not immersive. And when buildout began, we’d find reasons to change things anyway. For any brand on the web (and certainly for ours), well-designed user interactions are just as important as beautiful visuals, if not more so.
Our main adjustment: get design into code much, much faster.
Enter Responsive Mood Boards.
Over the past 18 months, we have launched some big things (The Verge and Polygon) and relaunched some bigger things (SB Nation). With this flurry of activity, we haven’t spent much time on our Vox Media site and brand. With the VoxMedia.com project, we wanted to take all the things we learned as we matured and put those experiences in refining our parent company’s brand voice and appearance.
So, this sounds great in theory - but how did we execute this plan? Simple - we came up with a framework to sketch our design directions, then quickly moved them into code:
What do responsive mood boards get us?
The idea that Photoshop & InDesign can be sketching tools rather than layout tools.
A better understanding by stakeholders of how design options will hold up across devices.
The ability to make important decisions in the browser. We don’t necessarily design in the browser, but we *decide* in the browser.
A cursory understanding of how individual elements act across devices.
A stronger cross-functional team, with empowered front-end developers.
Again, we haven’t abandoned Photoshop or InDesign, but we’re not confined to them, either. There’s a middle path, where design and code have a healthy conversation that’s good for the design, the product, and the team. Our plan is to lean on this process for projects where big new design is needed, and keep refining.
We’ve developed this approach with a little trial-and-error, and with a lot of inspiration from other folks doing some cool things.
Style Tiles - A very cool system developed by Samantha Warren.
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. Now as you can probably tell, this is not a conference specifically focused on web development, and while there are plenty of talks that directly correspond with web development, often times the intersections with web work are tangential at best. So you might be asking, “Why would a front-end developer working on my favorite websites on the whole internet be attending this conference?”
The answer is multifaceted.
1. Escape the web echo chamber.
Anyone who knows even the slightest bit about web development knows that there are a ton of smart people working on the web, each of whom is doing incredible things to move the web forward. Working in the web field, I regularly gorge myself on blog posts, Hacker News, Codepen demos and GitHub repos. This behavior can lead to getting stuck in the web echo chamber, where I’m reading the same great ideas, the same techniques, and the same “best practices” from lots of different sources, without gaining any real technical perspective on what is going on outside the world of web development.
Attending SIGGRAPH makes it explicitly clear that there are so many people doing smart things outside the web world that will, in time, greatly influence the future of the web. WebGL, the driving force behind some of the coolest demos on the web, was born of the 3D animation community and continues to evolve thanks to smart people, who might not necessarily work on websites, dedicating their lives to research.
2. Surround yourself with smart creatives.
Some of the talks I’ve attended here at SIGGRAPH have nothing to do with web development. The first thing I did when I arrived was attend a session by Saschka Unseld, the director of Pixar’s recent short film “The Blue Umbrella.”
This was an enlightening talk about how to tell a story, and while it’s true that at Vox Media we are all about telling meaningful stories, this particular discussion did not apply to my day to day work. However, what I’m saying is: that’s okay! Surrounding yourself with smart, creative people is a great way to get inspired, and the advice of successful creative people often applies to any field. Unseld urged the entire audience to “make useless things,” citing that his Pixar short was the end of a path that started with a few “useless” animation demos he created during his free time.
3. A breadth of knowledge makes you a better person.
There are so many different subjects and research topics covered at SIGGRAPH, I believe that nearly anyone in the world could find something that interests them. At the end of the day, it doesn’t matter that these techniques or subjects don’t directly apply to what you do at your day job. Part of being a successful engineer is having the drive and ambition to always be looking for opportunities to learn and never being satisfied with what you already know.
A great thing about working for Vox Media is that the company recognizes that education comes in lots of different forms, and supports the product team in our ceaseless quest for knowledge. If you want to have this kind of support, consider checking out our jobs page.
So in conclusion, I’d like to share a few of the cool things I’ve seen this week in hopes that I inspire you to seek knowledge everywhere, not just the regular rotation that shows up in the top 5 links on Hacker News.
Collaberative Medical Imaging in the browser
This is a product created by researches at Boston Children’s Hospital that uses WebGL and Websockets to share, in real time, medical imaging data across multiple devices. It’s a great example of how the web and emerging technologies can be used for the greater good.
Interactive graphics firm BeautyPi created ShaderToy to allow shader artists to create and share 3d shaders in the browser. This is another awesome example of new uses of WebGL.
- Technical papers
One of the key elements of the SIGGRAPH conference is the presentation of technical research papers. These cover a huge range of fascinating topics.
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.
Hello, we are the Vox Media product team. We are designers, developers, operations engineers, and product and community managers, based in Washington, DC, New York, and Austin, and distributed remotely in cities from Santa Barbara, California to Springfield, Missouri.