One distinguishing feature of Automattic’s work culture is a team rotation, through which an individual can move from one team to another. A rotation can happen for a few reasons: to “try out” a new role and gain new skills, to backfill an understaffed team, or to cultivate cross-pollination and diversity across the company. Some rotations are several months long, while others may turn into a permanent team switch.
Tumblr, which is part of Automattic, is currently hiring data scientists and search engineers and machine learning engineers. Thanks to this system of rotations, last year we were able to fill a few of these positions, on the Tumblr Core Data Science team, internally. This team contributes to Tumblr recommendation systems, discovery feeds, targeted push notifications, user-interest profiling, and computational advertisement. Team members work on designing, developing, and maintaining large-scale machine learning algorithms, data pipelines, and backend services to connect users with the content they love. Our data infrastructure is built on top of open source big data frameworks such as Apache Spark and Scalding, orchestrated by Apache Airflow and with a PHP backend layer.
In this post, Adam and Vicki, two Automatticians who experienced a rotation onto the team, tell us about their work in data, their rotations, and being part of Automattic.
It was HACK WEEK at Tumblr and Automattic earlier this month! Just like back in June, we stopped our normal work to focus on some great possible new features, some bug fixing, and more. Here’s a taste of some of the projects that got hacked together. Some of these will hopefully make it to be real new parts of Tumblr, but as always, we can’t guarantee anything here with a timeline or even that they’ll ever see the light of day again – they’re hacks!
Fixing Tag URL issues across Tumblr
L and @superchlorine are working on fixing a lot of issues about how we parse tags in URLs, so that we are more consistent across the web and the apps. This is something that we know has been frustrating for a long time: trying to search for posts tagged with a + sign or with spaces often doesn’t work as you’d expect. But not for much longer! We’ve been slowly fixing these issues one at a time and posting about it on the Changes blog.
Tumblr Ignite: pay to promote posts!
This actually carried over from a previous Hack Day: the ability to click a little 🔥 button on a post, throw down some cash, and promote that post as a Sponsored post across Tumblr. There’d be some kind of moderation queue on our side to ensure nothing unsafe gets sponsored in this way, and any sponsored post would be “frozen” and not editable during the time it’s being promoted. The Ads Core team, lead by @thstall with help from Argyris, Oleg, and Nathan took this pretty far towards being production-ready.
Bringing two-factor authentication settings to the mobile apps
We really want as many people as possible to protect their accounts by leveraging Two Factor Authentication, which you can currently enable by going to your account settings on the web. But it’d be even better to be able to access these settings in the mobile apps themselves! Megs, Adam, and Eduardo are still working to make this a reality.
The Return of Reblog Graphs
For those of you who remember this experiment in Tumblr Labs, this is a popup you can check out on posts which shows you a graph of all of the reblogs on a post and how they’re connected. This is one crazy way you can visualize how posts on Tumblr get reblogged around in huge chains and clusters! @cyle got a working React-based prototype working for Hack Week, and now we’re working to bring this back to the web for real.
Tumblr Fan Funding
Connie and the Post+ team built a prototype of Fan Funding on Tumblr, to help creators set a funding goal and get to that goal, using a lot of the same technology we used to create Post+.
Stay tuned to the @changes blog to find out if any of these end up becoming a part of Tumblr for real!
John Bunting talks about different services Tumblr has built and how their architecture helps them be fault tolerant as they continue to grow.
John Bunting talks about different services Tumblr has built and how their architecture helps them be fault tolerant as they continue to grow.
You are looking at a Tumblr post, so you love GIFs. You are reading an engineering post, so you love bits. Have you ever wanted to know how Tumblr turns these bits into GIFs? Thanks to QCon, you can watch cyborg hacker codingjester talk about how its done.
This summer the engineering team at Tumblr got to work with some amazing Interns. We asked each of them to share their experiences and tell you a little bit about the projects they worked on. Here is the first in a series of upcoming intern profiles.
This summer I interned at Tumblr as a front end web engineer working with the discovery team. I had amazing opportunities here to build awesome things that many people see, but more important, to work with a creative and dynamic team, and be able to contribute to Tumblr. Additionally, I loved spending the summer in New York - really is an exciting place to be.
I started off getting setup with my own development box and similar access to full time employees at Tumblr. While I started off with smaller projects to get to know the codebase and team, I quickly started getting bigger and bigger projects. It was really overwhelming at first to deploy the tumblr.com codebase within the first week I was here, going from only writing tiny things to a site as big as Tumblr.
The first big project I worked on was making a new logged out tag page. Throughout the summer, I was mostly mentored by Johnny Benson, who really helped me out with how things are done and constant creative and practical decisions involving my work. I also worked with Tag Savage for many of the design changes I was working on. It was always fun for me to hear “if this isn’t too hard to do…,” and be able to make a proof-of-concept by the day’s end. In fact, the current tag page design started off as refinements to a current tag page, then grew into a bigger project when I took these suggestions on. The layout of this page is rather unique - smart sliding rows, and it took a good deal of code to make it work properly.
I also had the opportunity to clean up and improve on some of the already stunning login and register views. These pages were mostly complete, just needing some design and code tweaks. It was a bit nerve wracking deploying these pages as there was a chance I could have missed something and would break login. Most of the changes I made were on the backend PHP, so that going out without a hitch was great for me.
I really enjoyed the other interns at tumblr this summer - previously, I would be the only intern at a company, now I had other interns working with me. Going to lunch, exploring the city was always fun with the other interns.
Now, it is time for me to head back to school at the University of Southern California, and face the homework, the time crunches, and the assignments once again. Seeing Tumblr grow and change over the past few months was a cool experience, and I’m glad I was able to be a part of it.
Want to embed a tweet? Just paste the URL into a new link block on Tumblr. Or you can use the Share feature in other apps, like Twitter itself, to send the tweet URL to the Tumblr app.
You’ll get a perfect little screenshot of the tweet. You don’t have to flap your device around to help the image develop, but nobody is going to stop you.
Once again it was Hack Week (more than just a day!) at Tumblr!
This is getting repetitive in the best way. A couple of times per year
we slow down our normal work and spend a week working on scratching a
personal itch or features we want as user and see how far we can get
with our hacks. One thing from the last Hack Week in September made it all the way to a new experiment out to some testers: Tumblr Patio!
Here are some of the projects that got built for our most recent Hack
Week in January. Some of these things you may also end up seeing on the
site…
Spoiler text, spoiler blocks, and centered text!
This one is so obvious and amazing, it’s wild we don’t already have
it. For Hack Week, Katie added the ability to select text in a paragraph
to be hidden behind a wall of black that can be revealed with a tap.
This can be super useful to hide spoilers. And even better: whole
spoiler blocks. And while we’re here, the ability to center text!
A plethora of new default blog avatars
We haven’t updated our default avatars in several years. (Some of you may remember this one
from 10+ years ago.) They’re feeling a bit stale to us, so why not
update them? And while we’re at it… make a ton more variations! Paul
from the Tumblr Design team came up with a suite of new default avatars,
using our latest Tumblr color palette. Here’s a look at some of them, but there are actually many dozens more using different colors:
Notifications and emails about engagement on your posts
This one is for the folks on Tumblr who love numbers and their Activity
page. Daniel, @jesseatblr, and the Feeds & Machine Learning team
worked on some new notifications and emails we could send out to people
about how their posts have been doing lately on the platform, such as
how many views they’ve gotten, and by how many people. We already have
this available (and more) when you Blaze a post, but why not open it up
to more people? It’s really useful to the folks who use Tumblr to help
build an audience for their work!
A new way of navigating the web: the Command Palette
Some apps we use a lot have a “command palette” accessible via a
keyboard shortcut for quick keyboard-driven access to different parts of
the platform. For example, Slack and Discord have Command + K to access
their quick switchers to hop around conversations. What if Tumblr had
one? Kelly and Paul built one! Press Command/Control + K on Tumblr and
you can use your keyboard to jump to your blog, Activity, your recent
conversations, search, dozens of places!
As always, stay tuned to the @changes blog to see if any of these hacks make it on Tumblr for real!
Once again it was Hack Week (more than just a day!) at Tumblr! A couple of times per year we slow down our normal work and spend a week working on scratching a personal itch or features we want as user and see how far we can get with our hacks. One thing from the last Hack Day in March made it all the way to production: redesigning how direct messaging looks on Tumblr! Pretty cool!
Here are some of the projects that got made for this most recent Hack Week in September. Some of these things you may also end up seeing on the site…
Tumblr Patio
Maybe this will look familiar to you, but we love this idea of being able to organize Tumblr feeds into many “columns” side-by-side, creating a very dense but lively view of Tumblr. Lenny, Kelly, and Paul hacked this together, and we’re pretty excited to see where it’ll go. Each column can be a different feed on Tumblr, like For You, Following, your Activity, a specific blog, a search, Trending, even a Collection, so many possibilities!
Tumblr Booths
Meanwhile, a separate team of @autoplanes, Katie, @lex, Shaun, and Eve dug into the idea of selling digital and physical goods through blogs on Tumblr, leveraging our sibling platform WooCommerce! Blogs could put whatever they’d like for sale here, and have a dedicated space for it. We know there are so many amazing artists and artisans here who could use this to more easily sell their creations on Tumblr!
Avatar Frames/Hats
This one is a golden oldie, it keeps coming back hack day after hack day, and each time it gets even better. Santi and Maxime hacked together some example avatar “frames” and “hats” that folks on Tumblr could purchase for their blog. Maybe eventually people could create these and sell them or gift them to each other!
As always, stay tuned to the @changes blog to see if any of these hacks make it on Tumblr for real!
He’ll be doing a workshop on how to use the Tumblr API that will hopefully inspire you to use our dataset to create the next big application. If you use the Tumblr API, you’re eligible to win a $500 Amazon Gift Card for you and your team!
If you’re going to be there, give a shout out (John is @codingjester). John will have stickers and t-shirts for anyone who swings by. We hope to see you there!
One of the Core Web team’s goals at Tumblr is to reduce the number of runtime issues that we see in our React codebase. To help move some of those issues from runtime to compile time, I evaluated the two leading type systems, Flow and TypeScript, to see if they could give us more type safety. I did a bit of background reading about the differences between Flow and TypeScript to see what the community had to say about them.
This post claims that Flow and TypeScript are similar enough that you should choose whichever of them is easier to integrate with your other tools. For Angular development, it recommends using TypeScript; for React, Flow.
This post outlines the author’s experience with using Flow in a React codebase. It advocates switching from Flow to TypeScript because of Flow’s unhelpful error messages, bad tooling, and propensity to spread untyped code. It also claims that most of the type annotations are able to be shared between Flow and TypeScript with only minor changes.
This slideshow shows many differences around the philosophies and goals of TypeScript and Flow, and it gives detailed explanations in the differences between the two type systems. It explains IDE support and how to get access to third-party type definitions.
Lack of Consensus
It seems like many people have differing opinions about which type system is better for a React codebase. Because there wasn’t a broad consensus across the community, I decided to get some first-hand experience with each of these tools to see which one would be most practical and helpful for use at Tumblr.
For the most part, Flow and TypeScript are basically interchangeable. I was able to reuse most of the source code between both projects with only minor changes. Here are some examples of changes I needed to make to get my TypeScript code working with Flow:
Flow requires that types are imported using import type where TypeScript re-uses import.
Some generic type constraints are different in redux’s type declarations between Flow and TypeScript, so I dropped the generic constraint for Flow.
Types cannot have the same name as constants, so I had to rename a few small things (see below).
Testing
After I got the project prepared I set up the following situations to see which tool performed better. These are my assumptions of the most common situations in which a type checker will help when writing React code on a day-to-day basis.
Handling an Unnecessary Case in a Switch
TypeScript
TypeScript realizes that 'not_real' is not a possible case for the switch.
Flow
Flow does not detect any issue.
Declaring Variables with Same Name as Type
TypeScript
TypeScript allows types to have the same name as constants, and it allows Command-clicking on the types to see their declarations.
Flow
Flow requires types and constants to have different names. In this case, I needed to rename the type to INCREMENT_ENTHUSIASM_T to appease Flow’s type checker.
Returning Incorrect Type from Function
TypeScript
[ts]
Type '{ enthusiasmLevel: string; languageName: string; }' is not assignable to type 'StoreState'.
Types of property 'enthusiasmLevel' are incompatible.
Type 'string' is not assignable to type 'number'.
Flow 0.52
[flow] object literal (This type is incompatible with the expected return type of object type Property `enthusiasmLevel` is incompatible:)
Flow 0.53
[flow] property `enthusiasmLevel` of StoreState (Property not found in number) [flow] property `languageName` of StoreState (Property not found in number)
Missing Required Props When Instantiating a Component
TypeScript
TypeScript shows the error at the site where the properties are missing with the error:
[ts] Type '{}' is not assignable to type 'IntrinsicAttributes & Props'. Type '{}' is not assignable to type 'Props'. Property 'name' is missing in type '{}'.
Flow
Flow shows the error within the component where the property will be used, with no way to discover which call site is missing a property. This can be very confusing in codebases that have lots of reusable components. Flow displays this error:
[flow] property `name` of Props (Property not found in props of React element `Hello`)
Code Safety
TypeScript
TypeScript allows enforcing full type coverage on .ts files with the noImplicitAny flag in the tsconfig.
Flow
Flow provides a code coverage plugin so that you can see which lines are implicitly not typed.
Other Considerations
Flow has the most React community support and tooling, so there is much more documentation about how to get Flow and React working together. TypeScript is more popular with Angular developers. Choosing TypeScript may be breaking from community standards, so we may have more issues that don’t have a simple answer on Google.
Conclusion
I concluded that we should use TypeScript because it seems easier to work with. My experience seems to line up with this blog post. It has better error messages to debug type issues and its integration with VSCode makes coding more pleasant and transparent. If this ends up being the wrong choice later on, our codebase will be portable to Flow with some minor changes.
Shortly after arriving at this conclusion, Flow 0.53 was released and a blog post on Medium published touting it’s “even better support for React”. However, after running through the test cases above, I only found one case where Flow had improved its error messaging. TypeScript still seems like the more reliable, easier to use solution.
