Make your own tools. Hybridize your tools in order to build unique things. Even simple tools that are your own can yield entirely new avenues of exploration. Remember, tools amplify our capacities, so even a small tool can make a big difference.

While the tools we use to build on the web are complex, there are a few things we’ve taken time to make for ourselves at Planetary. Today, we’re especially excited to share the latest release of one of our tools; it’s called 

 is a foundation for modern web projects.

It takes care of a few things that are common to every project, no matter what architecture, environment, or scale:

 compiling to enable future Javascript syntax

We’ve been using it daily, adapting it, adding to it and sometimes subtracting from it since the beginning of Planetary. Though the specific tools have changed over time (From less to sass to postcss, from grunt to gulp to npm, from browserify to webpack), the basic values stay the same:

 Make sure the tools can be used in many contexts.

 Make it easy for developers to quickly start a project.

 Make the tool useful for as many developers as possible.

 Keep the tool sharp and strive to improve it constantly.

This release marks the clearest statement of these principals to date: while there’s less in the tin than ever before, we’ve really doubled down on the most functional parts to deliver on our values. In addition, we’ve documented all its features to make it even more accessible.

We share Airframe mostly out of simple curiosity: what does this tool look like in other people’s hands? What new ways will developers use it? We can learn a lot from seeing Airframe used by whoever finds a use for it.

As much as we hope Airframe receives contributions from the community, we also look forward to finding many forks and clones out in the wild.

And finally, even if you don’t use Airframe, we’d love to hear your feedback.

— The Planetary team: Andrew, Josh, Matt, Sam, Valdis, & Vince

As I’m writing this, the Planetary team is spread out across 4 time zones in 4 different countries. This isn’t unusual for us, but it makes our “office” a unique place: we don’t all start working at the same time, keep the same hours, or even have the same daylight or seasons.

These aspects, as I’ve learned, make a surprising difference when it comes to feeling empathy.

At a traditional office, Monday mornings come with shared jokes about caffeine dependency. Rainy days put a damper on the whole team, from the wet commute to the required wardrobe changes. Early meetings can happen over breakfast, and late nights aren’t quite as bad when you’re sharing a pizza.

 I don’t know when my teammate is worn-out from a long day when I’m just getting into the swing of mine. Unless a coworker drops a picture into Slack, I have no idea what the world looks and feels like where they are. I have to keep a close eye on meeting times, to make sure they’re not too early or late.

To help bring our team closer, about a year ago we decided to try something new: a tool to allow everyone on our team to share their working hours. It automatically detects timezone and location, displaying the team as a series of ever-moving timelines, shifted by their timezone and bounded by their work hours. This hacked-together tool in hand, showed us when team members were in the “office”, or whether they were beginning their day, or finishing it up.

It worked. Scheduling meetings became easier, knowing when not to ping teammates about decisions became smoother. No more “so how many hours from now is that?” or “wait, is that too late for some of you?”

Standard view for a single user. The red line is the current time. Next, we added a Slack bot, allowing us to simply include an @-mention to convert a local time to others’. And, just for fun, a constantly-updated weather emoji automatically tacked onto the end of each person’s name.

Slack bot integration Meeting planning went from this:

We talk about the weather, and it’s easy to know when and when not to jump into a team chat. Team happiness is up, and (I’d like to think) everyone feels a little bit closer despite the distance.

Today, we want to share this tool with everyone. We’ve called it Spacetime and you can get it, free, right here or via the Slack App Directory.

While still in “beta,” we hope you enjoy using it with your remote team!

Bringing your remote team closer

Finding the “just-right” in data visualization

Data visualization is everywhere. From analytics platforms to infographics, across newsrooms and social media channels, there are vast swaths of the internet devoted to delivering data in non-tabular format. There are entire blogs devoted to the subject, such as the ubiquitous 

. With such an immense interest in seeing and understanding complex data, designers are constantly challenged to produce images that both catch a viewer’s eye and accurately depict the information at hand.

With such a high demand, there are (inevitably) a great number of approaches being employed; some to great success, others to embarrassing failure. It’s possible, then, to learn from these approaches to create data visualizations that are good-looking 

. By “plain english,” I mean “words that you speak out loud regularly.” Depending on where you work, you might say phrases like “regular spectral density potential” regularly — so instead think of words your 

Show highs and lows, let the viewer fill in the rest

. Most graphs fall victim to “too many axes” syndrome: lots and lots of grid lines dividing up the space, ostensibly to give the viewer a hand in judging the data. However, humans are pretty good at spatial estimation, so only plot the maximum and minimum on each axis.

. For such a seemingly obvious component, the title is often forgotten. What do you want your viewer to get out of a graph? If you answer this question in a title above the graph, you’ll provide the viewer with vital context and a good sense of what they’re looking at.

Let’s say I’m preparing a graph for a client who makes pizzas. They’re interested to see how their pizza production rates have fluctuated over the last four months. Here are a few examples of how these three guidelines can be applied (or not).

In every board room in the world, there’s a laser pointer landing on a graph that looks like this:

This graph has everything: big numbers, lots of lines, overly redundant labeling. There’s no way you could misinterpret this!

 Well, it’s labeled. But isn’t “July first” much easier to say than “seven-one-twenty-fifteen?”

 This is an example of over-labeling. We’re only looking at four months here — no need for all the lines.

 It does! But it’s a little too literal.

, chances are there’s some sort of data visualization being done. And more often than not, it looks something like this:

Of course, there are good examples of data viz on Dribbble and other showcase sites, but in many cases, the design is being done from a strictly aesthetic point.

 Kind of. But it’s not very descriptive.

Let’s split the difference between these two. We’ll show what’s necessary to preserve the aesthetic qualities, but label clearly and simply to ensure accuracy:

 Yes. We’re really clear about the time scale, as well as the domain and purpose of the graph.

 They are! Also, the extra zeros on the numbers are truncated to save some space.

 It does; “…last 4 months” spells out the time frame in a much simpler manner than “7/1/2015 to 10/31/2015.”

These examples and guidelines are a (biased) set of tools for making good-looking and useful graphs. There are a huge number of topics I’ve glossed over, each of which holds innumerable hints on properly visualizing data; for more information, read the works of 

, a critic of poor data visualization and a proponent of the just-right approach.

Lastly, no approach is successful without constant improvement and experimentation. Edit frequently and update your methods constantly. By refining and revisiting, you’ll find the happy medium between overwrought powerpoint and abstract art doodle.

Goldilocks your graphs

Airframe 2.x — Why We Open Source Our Tools

Website

We developed a new vertical for the storied Wall Street Journal.

Buy Side from WSJ

Product Design and Development

We iteratively designed and developed Sacra's digital platform.

Sacra

Product Design

We envisioned a new creator platform for Hellosaurus' digital product.

Hellosaurus Creator Studio

Network of Websites

We redesigned a network of school websites to align with their new brand.

Higher Ground Schools

Product

We created a remote team building product that serves real food.

Pizzatime

We reconceptualized the website for Miss Hall's School based on their rebrand.

Miss Hall's School

Mobile and Web Apps

We reinvented the furniture customization process for a family-owned furniture company.

Airframe 2.x — Why We Open Source Our Tools

Airframe is a foundation for modern web projects.

Make it your own.

Goldilocks your graphs

Bringing your remote team closer