See more posts like this on Tumblr
#animation #open source #AndroidToday, Tumblr is releasing Kanvas, the Media Editor and Camera used in the Tumblr iOS app, as open-source!
https://github.com/tumblr/kanvas-ios
ALTKanvas is an open-source iOS library for adding effects, drawings, text, stickers, and making GIFs from existing media or the camera. It’s used by Tumblr for its camera, media editor, GIF maker, and media posting tool, and WordPress will be using it in the future too!
ALTThe 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.
ALTThe Core Web team at Tumblr is proud to announce the release of Laphs (Live Anywhere Photos - LAPhs; get it?), an open source JavaScript library for implementing Apple’s Live Photos on the web.
We use Laphs to support Live Photos on the web at Tumblr and now you can too! Check it out on github and npm and let us know what you think.
Happy coding!
An article by @vanillaburritos as a reflection of her experience open-sourcing PermissMe at Tumblr. Give it a read!
Simulating background / foreground notifications in Android
In a recent article I wrote for objc.io detailing how notifications in Android differ from those in iOS, a reader messaged me and asked
“How do I detect if an Application is in the foreground when a notification arrives? Android seems to be missing this functionality, where iOS has it readily available.” paraphrased
It’s true, there is no intrinsic differentiation for foreground and background notifications in Android. This is largely a fundamental difference in how Android handles notifications altogether. In Android, the developer has full control over the lifecycle and presentation of a notification, and such, it could be presented at any time. Whether the app is actively running or not, the developer is responsible for presenting notifications to the user. The same callbacks are presented in all scenarios. In light of this question, I created a sample project to demonstrate one such approach to this problem.
OrderedBroadcast Example (Github)
See the demo video (YouTube)
One strategy for mitigating this problem is using a not-so-well-known API titled sendOrderedBroadcast (used in place of sendBroadcast) available on any Context within your application. An ordered broadcast takes the same intent you would use with a normal broadcast, the primary difference lies within the receiver. By setting a priority on the IntentFilter using setPriority(int priority) you tell the system that this receiver should be called before any other. Lets take a look at some code.
@Override
protected void onResume() {
super.onResume();
IntentFilter filter = new IntentFilter(AlarmReceiver.ACTION_RECEIVE_NOTIFICATION);
// The default priority is 0. Positive values will be before
// the default, lower values will be after it.
filter.setPriority(1);
// It’s good practice to register your BroadcastReceiver’s in
// onResume() unless you have a good reason not to
registerReceiver(mForegroundReceiver, filter);
}
When registering a receiver programmatically, we have the ability to set a priority on it. You might have seen this before, but never known why to use it. Well, now you know! Ordered broadcasts will inspect this priority before sending to the receivers. Receivers with a higher priority will catch the broadcast first, and then send itself on to lower ones (default is 0).
The beauty of using an ordered broadcast is that you (the developer) can decide whether or not your want that broadcast propagated. For example, if you have two BroadcastReceivers catching q broadcast, one as a foreground receiver and one as a background receiver, you can tell the foreground receiver to abort the broadcast using abortBroadcast(), so that any lower priority receivers won’t catch it.
private BroadcastReceiver mForegroundReceiver = new BroadcastReceiver() {
@Override
public void onReceive(Context context, Intent intent) {
// Don’t send this intent to anyone else!
abortBroadcast();
// Let the user know we received a broadcast (if we want).
Toast.makeText(MainActivity.this, R.string.received_in_foreground, Toast.LENGTH_SHORT).show();
}
};
That’s it! Using the ordered broadcast strategy, you can send the same intents for background and foreground notifications, and display them in different ways by utilizing different priorities.
You can go even crazier with this approach by setting different priorities for different Activitys. Maybe when you’re on the main screen, you want to intercept all notifications, but on subscreens you only want to intercept notifications related to that specific screen. The possibilities are endless!
Tumblr on Android is always a hot topic among savvy Tumblr users. It’s easy to get caught up in the hustle and bustle of every day life and forget that this isn’t just a silly app for looking at cool and weird stuff - It’s a complex and robust spectacle of engineering that is under a constant barrage of updates, bug fixes, and new features - all in the sake of helping you look at the cool and weird stuff you love.
If you’ve ever daydreamed about the nuts and bolts of Tumblr’s Android app, then this presentation is right up your alley.
adb shell monkey —throttle 100 -v -p com.your.packagename 50000
I like to put my app through ‘the Gauntlet’ every night. 50,000 random events. Make sure you plug your headphones in first (so you don’t annoy your co-workers when the monkey turns the music on.) I like to leave the throttle at 100 to keep the events coming in at a ‘crazed’ rate rather than having them come in at an unthrotteld ‘cocaine-bender’ speed.
I run this at least once a day on my current dev build.
Earlier this year, we asked our Android users to join an exciting new open beta program to help us squash bugs. We’ve since developed something stronger. Something that opens your mind in ways you’ve never thought possible. A way to opt into the mystery, the wonder, the beauty that is the latest Tumblr app: alpha.
What’s different? While the open beta app is updated twice a month, the closed alpha app updates with the latest build every night. It will also set your mind free. Both are great things to help you find bugs, which help us make Tumblr even better.
Who can join? A very limited number of Android users will be accepted for membership on a first-come, first-serve basis. Testers should use Tumblr daily and be diligent in alerting us when they find a bug. That’s what this whole thing is for, after all.
How does that work? When you see a bug, shake your phone with gleeful rage. Rage-shaking opens an email. Describe the bug and hit send.
What else? Well, heck. That’s what the FAQ is for.
Now that we have that settled, go on and apply for membership.
We’ve open-sourced a couple of Android utilities that we use in the Tumblr app for Android. Check it out:
A UI widget that allows for headers and footers on lists backed by RecyclerView.
As we were upgrading our app to migrate from ListView to RecyclerView, we found it kind of silly that RecyclerView doesn’t support headers by default. So we built a little wrapper that’ll do this for you.
An in-memory data store backed by shared preferences.
SharedPreferences are useful but since they’re backed by disk, they can have unpredictable performance characteristics – you’re not guaranteed to always be in memory, and in the case of write operations, you have to hit disk (possibly asynchronously) and remember what you wrote.
Remember takes care of that by putting a write-through cache in front of SharedPreferences. It also gives you a bunch of desirable consistency and concurrency characteristics – access can happen from any number of threads concurrently, and doing a write followed by a read will always return the value you just put. (Even if the value hasn’t been written to disk yet).
Both of these projects are open-sourced under the Apache license, and are available at our Github page. Let us know what you think!
Introducing Graywater, Tumblr’s framework for decomposing complex items in a RecyclerView list in order to improve scroll performance, reduce memory usage, and lay a foundation for a more composition-oriented approach to building lists. With Graywater, the app now scrolls faster and crashes less often, and it also gives us a solid foundation for building new features faster and better than before.
On screens that display posts, such as the dashboard, the Tumblr Android app customizes one adapter across multiple screens. This approach results in a complex adapter, and over time, our previous solution became difficult to manage and hard to reason about since there was no consistent place for screen-specific behavior.
Furthermore, each post type had its own layout and viewholder, which meant that once a user encountered a post type they hadn’t seen on that screen before, the entire post had to go through the inflate, layout, and draw process. Once offscreen, the post would take up large chunk of memory in the RecyclerView pool.
Graywater solves this by rendering only the parts of a post that are visible and reusing the parts of a post that appear in other posts, such as the header and footer. By breaking up a large post into smaller components, the UI thread has to do less on each scroll. Even though there are more view types, each individual view type is smaller, so memory usage is lower.
For example, a photoset post may be composed of ten photos, one after another. In the previous architecture, a photoset layout with headers and footers would be inflated and the photo views added in afterwards. If the viewholder is recycled and the next photoset post only has one photo, the extra photo views are discarded. With Graywater, each individual photo view is recycled separately, which allows RecyclerView to reuse the photo views that appeared earlier in the photoset.
This idea is based off of Facebook’s post on a faster news feed and Components for Android, which have been open-sourced as Litho.
Graywater differs from other RecyclerView libraries by being small (a single file!) and flexible enough to work within your model architecture. For libraries like Epoxy and Groupie to accomplish sub-item recycling, complex items like posts need to be decomposed into smaller viewmodels beforehand. For Litho to flatten view hierarchies and perform fine-grained recycling, existing XML layouts need to be converted to layout specs.
By converting to Graywater, we’ve been able to reduce OutOfMemory errors by 90% and dramatically improve scroll performance. It is now much easier to add new item types that are composed of preexisting post components. We have also migrated screen-specific logic to the screen itself by injecting the customized component into the adapter. By open-sourcing Graywater, we’re hoping the Android community will achieve similar performance and architecture gains, and we’re excited to hear what the community builds next!
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…
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!
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:
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!
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!
