Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

I just got back from a fantastic event called SNDMakes. SND is the Society for News Design. Most of the people involved come from the publication and journalism world.

I thought it would be little bit outside my normal circles

But really, it wasn’t.

People at this event are largely web people and they come from organizations that are trying to make their web experiences better. Everyone was really lovely to meet and work with.

There were people there from “traditional” media outlets like the New Yorker, the Texas Tribune, Dallas Morning News, National Geographic, The Washington Post, Austin-American Statesman and more from the Cox Media Group.

There were people there from big online media like Vox Media and Pitchfork and smaller online media like theSkimm, and the Institute for Nonprofit News (INN).

There were people there from big tech organizations like Facebook, Instagram, IBM-Watson, and Mozilla’s The Coral Project.

There were students from Northwestern’s Knight Lab, UNC Chapel Hill, and Centenary College.

Just check out that incredible group (there’s even a Twitter list).

What was it?

It was kinda like a hackathon. Tongue in cheek, I was calling it a hackathon for smart people. (Marketing people, call me, I’m expensive.) They specifically don’t call it a hackathon though. It’s a rapid prototyping sprint or more casually, a boutique (really long) dinner party.

You apply to come to it, and if approved, you are then introduced and planted on a team. The teams are carefully constructed by them for diversity (in all senses of the word).

There is no competition. It’s group thinking.

Community was the theme. We all have them, participate in them. Everyone is trying to figure out how to manage them, grow them, find them, and, as much as anything, understand them.

CodePen was an Event Host

Meaning that our donation was one of many that helped fund the event. Besides the expected costs like food (dear Austin food, come back to me), some of that went toward getting students there.

It was at Statesman’s headquarters

Which is Austin’s newspaper. Big thanks to Steve Dorsey for facilitating that!

My Team

Superstars! Besides me:

We thought up a thing we called “Cultivate”

We landed on a question pretty early that helped guide us toward what we wanted to build:

Who do I want to talk to in Austin, TX?

That’s just a placeholder question. The meaning was more like…

I’m Chris from CodePen. CodePen is a large community. I know that there a subcommunity of CodePen users exists in Austin, however, I am not exactly sure who they are and where to find them. I want to reach out because I’m visiting town and would like to host a dinner.

Or to tell them about the next CodePen Meetup. Or… Connect about anything relevant to the Austin CodePen subcommunity.

So, we got to prototyping.

Large pieces of paper are great for that.

And coding.

Hey good thing we had two Python devs on our team!

And strategizing. And working through complications. And thinking of use cases.

Actually it was mostly making jokes. Like “Creating User Loving Teams, or CULT”. Which lead to Cultivate. Which meant all cult-related and gardening related puns were fair game.

I prototyped the UI in CodePen

Of course!

Here’s an early version:

See the Pen Cultivate UI by Chris Coyier (@chriscoyier) on CodePen.

We ultimately incorporated a Pen (as an elaborate loading spinner) because I love it.

See the Pen SVG Plant Generator by Blake Bowen (@osublake) on CodePen.

What Cultivate Did

Because the data is so easy to get, we mined Twitter for it. We would search Twitter for keywords (the larger community), then filter it down by location (the subcommunity), then send the tweets through an algorithm. Users got a score (a Cult Score, duh) based on stuff like how many followers they had, how many favorites and retweets and stuff like that.

We made up a quick interface for how we might ask for the starter data we need:

Then it would output the a list of the people it found, ranked:

Here’s an SVG infographic (click anywhere for each step) I slugged together to help explain the overall concept:

See the Pen Cultivate Steps by Chris Coyier (@chriscoyier) on CodePen.

We pitched the idea

Mining Twitter wasn’t really the idea, it was just one potential data source for trying to find star players in a subcommunity of a larger community. Ultimately you could feed something like this as much data as you have to find these people. We tried to drive that home in our final presentation.

Here’s our slides:

It’s out there on GitHub

It’s absolutely not a finished project, but our prototype starts to illustrate an evocative idea. If anyone is interested, the project is a repo on GitHub.

Everybody built a thing

There were 10 teams total and every team had a finished prototype of some kind. Soon there will be a roundup post of all of them together (and a fun video!) so I’ll link those things up once that is out.

There were also lightning talks

During lunch on day two, several people gave 5-minute talks on a wide variety of subjects. Really interesting stuff, like Agnes Mazur talking about what it was like helping run the Reddit AMA for Obama. Kathryn McElroy showing off the grand powers of Watson. Andrew Losowsky with a highly relevant metaphor for comment threads. Josh Kadis with a lighting talk on lightning talks ;).

I did one as well. I kept it webnerdy, explaining how you can animate the shapes of things on the web, not just positions and colors and stuff.

Here’s my slides:

Slack is kinda awesome for conferences

Not too long ago I was at XOXO which used Slack to wonderful effect. It allowed the organizers to distribute information (referenceable and in real time) as well as allowed attendees to connect with each other (and still be mostly policeable).

It may have been even more useful at SNDMakes. In part because of the predetermined team structure. Since we were all invited to the Slack with plenty of time before the conference even started, we were able to at least throw some ideas around before we got there. Then once we were there, no time was wasted figuring out how we were going to communicate.

Wanna know more?

I’ll miss this team!