For the second time this week, Eater and Vox Media’s product team crashed a boat-shaped off-site work space in lower Manhattan to turn editorial dreams into Vox product reality. Together, the teams learned about some nitty-gritty design elements (Jason Santa Maria), Sass/CSS (Miriam Nadler and Scott Kellum), Vox’s flow chart tool (Elite Truong and Chao Li), the evolution of Anthem (David Yee), and how Dylan Lathrop approaches an illustration project.

But first, breakfast:

Champion coffee, Bien Cuit croissant

Punctuation: Smart Quotes

Vox Product designer Jason Santa Maria kicked off the day’s talks with a presentation on punctuation. Most of Eater’s editors were surprised to learn that the product team — and especially Santa Maria — hates dumb quotes.

Why have we been told to use 'dumb' quotes for 7 years? — Amanda Kludt

Santa Maria — a designer at heart — even went so far as to create a website for educational purposes:

Essentially, editors should begin using smart quotes, or the curly quotes, everywhere instead of depending upon the dumb quotes available on keyboards. Santa Maria explained the reason for the new style switch: “Proper quotation marks are curved — they look like 6s and 9s — but the default quotes are straight, and we affectionately refer to those as dumb quotes. You were probably told to use dumb quotes because they don’t cause any problems, but they are not actually what we want from a design perspective.”

In the near future, Chorus will change them automatically. For now, here’s a website that will convert any block of text so that all quotes contained within will be smart, or curly.

Let's Get Sassy

After a short break, we dived into Sass (which front end designer/developer Miriam Nadler said was like CSS but “really they’re like squares and rectangles”), the coding language that works with HTML to create the visual elements on the web. “CSS is like the adjectives,” Nadler explained, “It’s how you tell your headline to be blue.” Nadler demonstrated some basic Sass commands, and gave the audience a primer on how a Sass editor converts commands into CSS.

Scott Kellum took over to explain how the Sass editor in Chorus can change some of Eater’s most fundamental design elements, including the color of the logo and headline or pull-quote typefaces. Everyone oohed and ahhed.

Design and Illustration

Screenshot from Dessert Rodeo

Next, designer and illustrator Dylan Lathrop pulled out a stylus and demonstrated his work flow. “Usually, I start with a pencil and paper sketch, and then scan it or take a photo of it.” Lathrop showed the audience, rapt, how he broke each sketch down into several elements, and rendered them freehand, using layers and pulling colors from a chosen palate. After he freehanded a jelly doughnut with glaze, someone wondered if he sometimes worked with live subjects. “Oh yes,” Lathrop confirmed.

Today, Eater published Dessert Rodeo, a product illustrated by Dylan, built by Eater's product team, and conceived by Eater Features Editor Helen Rosner. Take it for a spin.

And then, Parm arrived with trays and trays of eggplant parmesan, fresh mozzarella, sauteed broccoli rabe, roasted cauliflower, and too many sesame rolls. Lunch! We feasted.

Parm for lunch! #eater #eaterhackweek

A photo posted by Daniela Galarza (@superdaniela) on Apr 28, 2015 at 12:27pm PDT

Flowcharts & Quizzes

After running through a list of existing and open projects, Elite asked Chao to explain Vox’s Flowchart tool. Based off a spreadsheet, the tool allows editors to create customizable quizzes. Everyone broke off into teams to play around with Flowcharts and Quizzes.

Jarret Meskin (Eater’s Community Manager) created a pizza quiz (where every road leads to the same answer), Claire Carusillo (Eater’s Social Media Manager) worked on a gummy bear quiz, Rachel Blumenthal (Eater’s Boston editor) built out her epic burger quiz, and Eater’s reports and feature teams built a tool to guide gift givers on Mother’s Day.

All About Anthem

Late into the afternoon, as the shadows grew long, David Yee took the stage to explain Anthem. “You’re all using Anthem, right?” Half the audience nodded proudly, the other half nodded nervously.

“Learning more about Anthem today goes to show how cool it is when writers and editors get to shape the tools they work with.” — Hillary Dixler

Yee busted out an incredible, time lapse-style visualization of the growth of Chorus, Vox’s proprietary Content Management System. He explained how Anthem, a new story editor built to eventually replace the story building function of Chorus, would make editors’ lives better.

David Yee on Anthem

At the end of the day, Eater's wine expert Levi Dalton stopped by with a selection of bottles from Edna Valley. An educational wine tasting — which was captured on Periscope by the social crew —capped off day two of Eater Hack Week.

Finally, some feel-good quotes about #workingtogether and what we learned today:

“It was all super informative, I like learning more about the tools that we make, and we don’t get to talk about this stuff enough because we are all really busy doing our job and I think there are a lot of small things we can do to help one another.” — Jason Santa Maria

“I really enjoyed David’s presentation on Chorus, it’s stuff I get casually reminded about two or three times a year, and he was really great. It was personally really interesting to go through my own process about illustration, and rewarding to hear from editors about what working with them is like. And the Chicken Parm was awesome.” - Dylan Lathrop

“I was very interested to learn about smart quotes — I didn’t know I was doing anything wrong, I was just doing what came out of my keyword. I loved the Chorus visualization, I have a grasp of visualization but it was cool to learn technical details. I loved the Sass presentation, I don’t know if I’ll use it, but I like knowing that I could use it if I wanted to.” — Rachel Blumenthal

“What I liked about today is I learned a little bit about a lot of different things. It was really nice to get some of the editorial perspective on stuff that I’ve been doing everyday for several months, to be able to see things from a different angle.” — Miriam Nadler

“I learned a lot about Cascading Style Sheets and I learned how the engine of the Chorus machine really works, from David Yee. I think we all should take more opportunities to use Anthem, because one day it will be our sole tool. I learned from Dylan about how to draw food. It was a really good day.” — Claire Carusillo

“One thing about the Dylan presentation is he made it really clear that he pairs illustrations down to its most essential elements. I was amazed that he does his original sketches with a pencil and paper.” — Robert Sietsema

“I learned how to create a flow chart, for the cocktail generator — we learned how to input images and recipes.” — Kat Odell

“I learned a lot about the behind the scenes action that makes this company tick.” — Jarret Meskin

“Getting a behind-the-scenes look at CSS, SASS, and the entire framework of how words magically transform into text/layout/products was great. The entire product team has been awesome at distilling what they do on a day-to-day, hour-to-hour, minute-to-minute in a way that has me intrigued and incredibly thankful that they exist.” — Erin DeJesus

Check back in for Day 3's write up, which will include status updates on all pending projects, including a drinks generator, DOH data heatmap, better treatment for theme-day logos, and more.