It was Hack Day again at Tumblr! A couple of times per year we grind everything to a halt and spend 24 hours working on whatever we want and see how far we can get with our hacks. Here are some of the projects that got made for Hack Day! Some of these things you may end up seeing on the site…
Timestamps on Posts
@superchlorine hacked the website to show timestamps on every post, reblog trail item, and note in the notes view. This is also already a popular XKit extension, and it’s easy to see why!
Mutual Love
Evgeniy hacked the Tumblr Android app to play a cute sound and animation whenever you follow someone who already follows you! Being mutuals on Tumblr is something special, and this celebrates it in such a cute way.
@cyle hacked the dashboard on web to view it in a grid format (like the Likes page on web) or a masonry format (like the Explore and Tagged pages on web). It creates a dense amount of information!
Post only to a Tagged Page
Tanya hacked the post editor to let you post directly to a tagged page! The posts made this way will only show up on that tagged page, and not your blog, or anywhere else. Great for folks that want to participate in a tag but not have it show up on their blog!
Mobile Rave Room
And it wouldn’t be a Tumblr Hack Day without a rave room hack: @oli took the rave room mobile and did a (completely not officially sponsored) DJ set in NYC and live streamed it.
Stay tuned to the @changes blog to see if any of these hacks make it on Tumblr for real!
Apple has always focused on providing a great experience, from the presentations to what it proposes for the developers. On the second day of the WWDC21 event, a theme that keeps coming back is the importance of a more inclusive and accessible design on all of the different application scopes.
It can even be seen in the language that we use and look for reference, respecting different perspectives, adopting more accessibility features, making our design more inclusive, especially in the area of content that includes writing, images, audio, video, it can be seen everywhere... everything we use to "talk" to our audience. 🗣🗣🗣
Despite being a topic of great importance, my main concern is that it makes us wonder if our products are in fact meeting these expectations as much as possible. ❤️
Below you can see the two sessions that talk more about it.
Dynamic type is not new. It's something that has been around since iOS 7, but its adoption by apps has been somewhat slow. Since iOS 11, Apple has been making significant improvements to the feature that should lead to wide-scale adoption.
Getting a little more technical... ⚙️🛠 Dynamic type supports up to seven size settings, but that's not the limit, for example, the body text style is 17pt in the default setting, but can range from 14pt to 23pt, and we can, in extreme cases count with the accessibility setting that supports even larger fonts up to 53pt for body text.
My mother ❤️is a great example of someone that is heavily dependent on this particular feature. Communication and social networking apps that have a lot of content in a very small screen real estate (iPhone screen) can take advantage of this and avoid losing any content due to the lack of space.
Does Tumblr handle Dynamic Type?
Tumblr allows us to share many different types of media in a single post. That makes the content super cool and unique, however, posts that have a lot of "regular" sized text, despite having good contrast (✨bonus points for Tumblr here!✨) still, readability can be compromised when compared to a wider range of users.
To make our vision even more inclusive when developing our apps, it's necessary to start by making the design process more inclusive as well. I'm sure this will affect the design and implementation of a good application. 📱
I have been using Tumblr for the past week, before that, I have never really jumped into it.
My first impression of the platform was that it was a more user choice-focused platform, kinda like Reddit. I got this impression from the Markdown and HTML editors that you can use to customize your blog and write posts. I was really impressed that a modern social media company still allowed the choice to edit custom HTML for blogs and a rich content editor for posts. However, this was all in the web interface…
When I opened the iPad app, I quickly realized that the app is nowhere near optimized for the iPad or any of Apple’s newer technologies. In this post, I will be going over how I think Tumblr can take some of the new technologies Apple has released so far in WWDC and make their platform one of the most advanced social media on iOS.
What I think Tumblr could improve upon
The iPad UI
Other posts have touched a lot more on Tumblr’s iPad UI so I will not go as in-depth as them. However I do have to say, it really needs improvement. Having one central post-column looks comical on an iPad and really ruins the look and feel of Tumblr. I think adapting to Apple’s new multi-column layouts for iPad would be an amazing choice for Tumblr.
Supporting new technologies like multi-column layouts would put Tumblr ahead of the competition. A lot of social media currently do not support iPad’s as well as they could. They just show a scaled-up version of their mobile interface. This leads to a lot of annoyances about the iPad app. With a lot of people moving to iPad’s as the main device, having an unoptimized iPad app will send people away from using Tumblr as their blogging platform.
Multitasking
Apple so far has talked a lot about the new iPad multitasking features. Now there isn’t really much at all that has been added, it is just way more discoverable than before. With more discoverability comes more users looking to use it in their favorite apps.
When I tried to use Tumblr in a multitasking manner, it just fails to work. There is no way to have multiple windows of the app, and when it is in split-screen the UI fails to adapt well. I believe adding support for iPad’s new multitasking features will allow Tumblr to fly ahead of other social media at a user experience level. On Apple devices, Everything Just Works. And for the Tumblr app and multitasking, it doesn’t. New and returning users will look to use multitasking and then learn that it is not supported, leaving them a little disappointed. I think supporting features like these are essential for Tumblr to thrive in the growing social media space.
Shortcuts Support
A lot of my time is spent using and creating Shortcuts. I really wish that Tumblr had a lot more support for Shortcuts. Currently, Tumblr has one action, and you need to login into that action inside the Shortcuts app. Even if you are logged into the Tumblr app on your device. I think that improved support for Shortcuts will be necessary for the future for any app on an Apple Platform. Doing simple things: like opening a specific blog, or going to your favorite creator’s page, should all be doable through Shortcuts actions. Apple has been putting a lot of time and development into Shortcuts, and I really believe that Tumblr should integrate as well as it can into the Shortcut ecosystem.
In Total
I believe that Tumblr should look into supporting more of iOS’s power-user features. These features will bring more people to the platform. It also makes Tumblr a good model candidate for an iOS social media app.
You've probably already skipped those introductory screens that explain how the application works, a.k.a onboardings, or you've given up putting your information on a very long form. I know! I was also on that boat once! 👀👀
Although there are several super cool new technologies and features, it's also necessary that we know how to apply them in a correct way, ensuring a more fluid and pleasing experience within the application. The same applies to releasing a new feature, for example, how can people learn what your app is able to do?
On the third day of the WWDC21 event, the "Discoverable design" session was able to deliver to us several insights on how to create a more interactive app and memorable experiences starting with the onboarding and coming all the way to the app itself. I will comment on two of the ones that I liked the most ❤️
The Worldwide Developers Conference kicked off this week, and we are following along to see the latest iOS improvements and dreaming up how to build a better Tumblr.
Meet Victoria, Praveen, Zach, and Ethan, a group of emerging developers writing about iOS and the future of Tumblr.
We’re currently rolling out an opt-in beta for a new post editor on web which will leverage the Neue Post Format behind the scenes. It’s been a very long time coming – work on the Neue Post Format began in 2015 and was originally codenamed “Poster Child”, and it was borne out of a lot of things we learned dealing with the previous new post editor we released on web around that time. Over the years, the landscape of how people make posts on different platforms across the internet has changed dramatically. But here on Tumblr, we still want to stay true to our blogging roots, while giving access to a wide creative canvas, and the Neue Post Format reflects that work.
With literally billions (tens of billions!) of posts on Tumblr, how do we move this churning engine of content from one format to another without breaking everything? It took many phases, and releasing the new editor on the web will be one of the final pieces in place. To understand how far we’ve come and the challenges we’ve had to face, you need to know the deep dark secrets of how we store post content on Tumblr. This hellsite we all love is held together by duct tape, good intentions, and luck, and we’re constantly working to make it better!
A post is seemingly a very simple data model: it has an author, it has content, and it was posted at a certain time. Every post has a unique identifier once it’s created. In the case of reblogs, they also have the “parent” post and blog it was reblogged from (more on How Reblogs Work over here). In a standard normalized database table, these columns would look like:
Post identifier (a very big integer)
Author blog identifier (an integer pointing to the “blogs” database table)
Parent post identifier (if it’s a reblog)
Parent blog identifier (if it’s a reblog)
When it was posted (a timestamp of some kind)
Post content (more on this in a minute)
Before the Neue Post Format, posts had discrete “types”, so that’d be a column here as well. But once you have these discrete “types”, you have to determine how you want to store the content of each “type”. For photo posts, this is a set of one or more images. For video posts, this is either a reference to an uploaded video file, or it’s a URL to an external video. For text posts, it’s just text, in HTML format. So the actual value of that “post content” column can change depending on what type it is.
Here’s a simple example, note how each post type has different kinds of content:
As Tumblr grew, its capabilities grew. We added the ability to add a caption to photo, video, and audio posts. We added the ability to add a “source” to quote posts. We needed somewhere to store that new post content. Because Tumblr was growing so rapidly at the time, this needed to happen fast, so we took the easiest path available: add a new column! That first “post content” column was renamed “one”, and the new post content column was named “two”. And as Tumblr grew more, eventually we added “three”. And each column’s value could be different based on the post type.
Needless to say, eventually this made it very difficult to have consistent and easy to understand patterns for how we figure out things like… how many images are in a post? Since we added the ability to add an image in the caption, it’s possible there’s images in the “one”, “two”, or “three” columns, but each may be in a different format based on the post type. Reblogs further complicate the storage design, as a reblog copies and reformats post content from its parent post to the new post. The code to figure out how to render a post became extremely complicated and hard to change as we wanted to add more to it.
Further complicating this was the fact that most (but not all) of these post content fields leveraged either HTML or PHP’s built-in serialization logic as the literal data format. Before PHP 7, HTML parsing in PHP (which is what Tumblr uses behind the scenes) was extremely slow, so rendering a post became more of a struggle as the post’s reblog trail grew or its post content complexity increased. And HTML and PHP’s serialization logic isn’t easily portable to other languages, like Go, Scala, Objective-C, Swift, or Java, which we use in other backend services and our mobile apps.
With all this in mind, in 2015, two needs converged: the need to have a more easily understandable and portable data format shared from the database all the way up to the apps, and the need for more types of post content, decoupled from post type. The Neue Post Format was born: a JSON-based data schema for content blocks and their layout. This has afforded us the flexibility to make new types of content available faster, without needing to worry necessarily about how we’ll store it in HTML format, and has made the post content format portable from the database up to the Android app, iOS app, and the new React-based web client.
Going back to the standard, normalized database table schema for posts, we’ve now achieved the intended simplicity with a flexible JSON structure inside that “post content” column. We no longer need post types at all when storing a post. A post can have any and all of the content types within it, instead of being siloed separately with a myriad of confusing options depending on the post type. Now a post can be a video and photo post at the same time! When the new editor on the web is fully released, we can finally say that this format is the fuel powering the engine of content on Tumblr. It’ll enable us to more quickly build out block types and layouts we couldn’t before, such as polls, blog card blocks, and overlapping images/videos/text. Sky’s the limit.
The project is licensed under the Mozilla Public License v2. Check out the Projects tab on GitHub for an idea of what we’re working on, and how you can contribute. The README is a good place to see Kanvas in action and add it to your own app. And if you’re interested, follow the project, as we’ll be posting more documentation about how Kanvas work and the history of the project.
Thanks to everyone who’s contributed to Kanvas over the years, and we’re excited to see what this new open-source & WordPress chapter brings.
We posted an update about this back in April, and now as of July 1st, it’s really, really here, for everyone: the old dashboard has been replaced with our brand new web experience on desktop. This has been a very long time in the making, and the primary reason behind it is to make the desktop web experience of Tumblr easier to maintain and build on top of.
We’re continuing to improve the experience of using Tumblr on the web with some new features, some of which were formerly a part of XKit and other third party extensions:
Color Palettes are now available to change the whole look of the site, just use the “Change Palette” option by clicking on the silhouette icon at the top right.
Viewing tags used in reblogs is now available in the notes view on every post.
Timestamps are available by hovering over the “fold” at the top right of any post, or now also available by clicking on the meatballs menu at the top right of any post. There are a lot of new options in there, too!
The dashboard now soft refreshes by default, so you don’t have to press that browser button to see the latest content.
Audio in audio posts can now “pop out” so you can see it while you scroll your dashboard.
One piece of feedback we heard a lot was allowing pagination by changing the URL of the dashboard, and that’s something we plan to support. Thank you again for all of the insightful feedback about the new web experience, keep it coming!
Heads up! If you have endless scrolling disabled on desktop, you should now see the URL update on your likes page, drafts page, and dashboard, as you paginate.
Yup! You should be able to see the URL change when paging through your likes now if you have endless scrolling turned off in your Dashboard settings. More to come!
When someone likes your post, follows you, reblogs you, etc., we make a record of it in the activity feed for your blog. Over the last several months, we’ve been building a new backend for that activity system. We’re rolling out this new activity backend now, and hopefully, none of you will notice a thing except maybe your activity loading a little faster.
Another benefit of this new backend is that we can finally update the activity view to filter by activity type(s). So if you want to see just a list of new followers, or just your mentions, or even a feed of only reblogs and likes, you’ll be able to! To enable that feature, we’re building a new frontend for the activity page on desktop web, using Tumblr’s new web experience. Here’s a little sneak peek:
The current backend that powers every blog’s activity stream is pretty old and uses an asynchronousmicroservice-like architecture which is separate from the rest of Tumblr. It’s written in Scala, using HBase and Redis to store its data about all of the activity happening everywhere on Tumblr.
We’ve been working to replace it with a new architecture that more closely aligns with the rest of how Tumblr works: written in PHP, using MySQL and Memcached for data storage. The old architecture is something we don’t support anymore, which made fixing activity bugs and building new features for activity very difficult. Our hope is that this new system will be faster, more extendable, less complex, and easier to maintain.
Some of you nerds out there will say, “PHP is definitely not faster than Scala,” and you would be right to call that out. But you’d be missing the major change we’re making. Instead of the activity event system being asynchronous and separate from the rest of Tumblr, we’re bringing that code into the Tumblr PHP app and using the same underlying interface we’d use to fetch a blog or a post. That’s what actually makes it faster. We got rid of a bridge by eliminating the river, so it’s now faster to drive across!
The old system looked like this; you can read it top to bottom (if it looks complex, that’s because it is):
The new system is much simpler:
Again, our hope for this much simpler system is that we make activity load a bit faster, and we’re able to fix bugs and build new features for it more quickly. As always, if you experience any issues, please do not hesitate to contact Tumblr Support.
We posted an update about this back in April, and now as of July 1st, it’s really, really here, for everyone: the old dashboard has been replaced with our brand new web experience on desktop. This has been a very long time in the making, and the primary reason behind it is to make the desktop web experience of Tumblr easier to maintain and build on top of.
We’re continuing to improve the experience of using Tumblr on the web with some new features, some of which were formerly a part of XKit and other third party extensions:
Color Palettes are now available to change the whole look of the site, just use the “Change Palette” option by clicking on the silhouette icon at the top right.
Viewing tags used in reblogs is now available in the notes view on every post.
Timestamps are available by hovering over the “fold” at the top right of any post, or now also available by clicking on the meatballs menu at the top right of any post. There are a lot of new options in there, too!
The dashboard now soft refreshes by default, so you don’t have to press that browser button to see the latest content.
Audio in audio posts can now “pop out” so you can see it while you scroll your dashboard.
One piece of feedback we heard a lot was allowing pagination by changing the URL of the dashboard, and that’s something we plan to support. Thank you again for all of the insightful feedback about the new web experience, keep it coming!
Hello! I've noticed that Tumblr now uses React. I was wondering what was the stack used before and how long did it take to migrate from said stack to React? And why React over Vue?
Great questions! Some of the answers you’ll find over on our Javascript blog, which is run by our Javascript engineers here at Tumblr. Feel free to send an ask or two their way!
