• bryan:

    Had the pleasure of joining Justin Williams on the CocoaRadio podcast to talk about CocoaPods.

    We use CocoaPods to manage our Objective-C dependencies at Tumblr. Learn more about it here.

    Source: bryan

  • Tumblr on Android

    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.

  • Tumblr iOS architecture

    Some consider the Tumblr iOS app to be a marvel of modern medicine and science. Others find our custom native HTML rendering to be a telltale sign of our insanity. Other others view our staunch avoidance of Core Data migrations as both prudent and educational. Whichever camp you fall into, you may find something to enjoy in this high-level overview of our iOS application architecture.

  • Tumblr: Hashing Your Way to Handling 23,000 Blog Requests per Second - High Scalability -

    Check out this sweet write up our own Michael Schenck [michael] wrote on scaling Tumblr’s perimeter. 

    At Tumblr, blogs (or Tumblelog) are one of our most highly trafficked faces on the internet.  One of the most convenient aspects of tumblelogs is their highly cacheable nature, which is fantastic because of the high views/post ratio the Tumblr network offers our users.  That said, it’s not entirely trivial to scale out the perimeter proxy tier, let alone the caching tier, necessary for serving all of those requests…
  • Tumblr for iOS 3.0’s dashboard JavaScript and CSS

    Back in November 2012, we released Tumblr for iOS 3.2, our first fully native version. Version 3.0, a from-scratch rewrite which came out the previous June, had plenty of native code as well but used web views to render lists of posts. At the time, I wrote:

    The decision to use a web view had nothing to do with cross-platform compatibility or ease of development and everything to do with needing to render (somewhat) arbitrary HTML, provided by our users. This makes building a Tumblr iOS app of the highest caliber an interesting challenge.

    As noted by Zach Williams, we used GRMustache to render the post lists and Zepto.js was used to implement the web view’s behavior, with some slight modications (the longTap event didn’t work exactly the way we wanted, tap wouldn’t play HTML5 audio, and we needed to prevent touches while scrolling). CSS classes were used instead of :active pseudo-classes so they could be removed programmatically, as scrolling began. Our JavaScript-native “bridge” was basically this example.

    Suitable scrolling performance was difficult to achieve in the web view as lists of Tumblr posts are usually extremely media-heavy. Some of the measures we took included using images in place of border-radius and box-shadow CSS and scaling/compressing photos on our servers, to the exact size needed on the phone.

    Though a native dashboard was clearly the way to go, I still think our web view was pretty good at the time, and I’m happy to now be able to share both the JavaScript and the CSS that we used with you.

    We’re a long way from June 2012, and I’m not sure I’d recommend copying anything in there today, but I hope you find it interesting nonetheless!

  • Core Data sample project

    Are you an iOS or OS X developer with opinions on how to implement large, performant applications using Core Data? If so, I want to hear what you think.

    Core Data, Apple’s object-graph management framework for iOS and OS X, is really powerful but also somewhat complicated, and not always entirely straightforward to use. Sometimes it feels like everyone has their own unique way of using it. We’ve used Core Data for persistence in Tumblr for iOS for years now but are always interested in re-evaluating our approach to make sure that we’re leveraging the SDK as effectively as possible.

    In the interest of gathering feedback, we’ve published the CoreDataExample sample project (inventive naming, I know). It displays a little bit of data from Tumblr API using a class called TMCoreDataController to access the underlying database, both from the main queue (user interface) and in the background. Everything in here should be pretty straightforward, but we’d still love for you to have a look and provide any feedback you may have on how we’ve implemented these particular access patterns.

    The README contains more background information, so I’d recommend starting there if I’ve successfully piqued your interest. Thanks in advance; looking forward to hearing your thoughts.

  • Ordered Broadcasts in Android

    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)

    Ordered Broadcast Strategy

    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();
     }
    };
    


    Summary

    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!

  • Who doesn’t love animated GIFs?
Believe it or not, support for GIFs at Tumblr was a happy accident! When Tumblr put together the code for handling JPEGs, support and GIFs (and PNGs) happened to also work using the same code. Perhaps even more surprising is that the tools used to handle GIFs at Tumblr hadn’t changed much from those early days. 
The image above is an original from sukme that could not be posted to Tumblr last June. It also would have failed if he’d tried last Sunday. If you click-through to the original post, you will see a muddy, reduced-saturation mess. All this because our resizer couldn’t handle the original. 
I’ve got ninety-nine problems and the GIF is one
There is a lot of misinformation about GIF limits on Tumblr, so let me set the record straight: We don’t count colors or frames or pixels. We only count bytes and seconds. Every image that comes in is scaled to a number of smaller sizes and the smaller your image is, the fewer resizes need to happen, which means less time. 
We had two core failure modes in our prior resizer: Some images would take as much as several minutes to convert. This was not directly attributable to color, dimensions, or frame count, but a mysterious mix of all of them. Some images would balloon in size (600KB at 400x400, 27MB at 250x250).
The unpredictability of these failures made our GIF limits feel arbitrary and terrible to the end users. Some have gone so far as to threaten monkey kicks. I don’t want to get kicked by a monkey, so we started working hard late last year to fix it. 
A proposed solution
Some of you may have seen this post where the performance of our current converter was compared with a new “mystery” converter. The mystery converter was roughly 1000x faster on the “slapping” GIF and happened to look great, but had quality problems on other images. Those were more fully explored in here a couple of days later.
If you haven’t figured it out yet, the mystery converter is gifsicle.
Getting a better handle on it
To get an unbiased test set, I took a random sample of roughly 90K GIFs that Tumblr users tried to upload, not limiting the corpus only to those that succeeded. These were tested against the current converter, resizing down to the next size we produce. Each resize is given up to 20 seconds to complete in our application, but all resizes must complete in 30 seconds. All resizes must be under 1MB or we will convert the first frame to JPEG and call it a day. 
2.6% of my 90K GIFs took longer than 20 seconds to resize. This is an underestimation of how many GIFs would be rejected for time because this is only one of several resizes required. A whopping 17.1% of all GIFs were over 1MB. Even if we bump up to 2MB, the rejection rate is 2.75%. The converter was making over 25% of all resizes larger than the higher-resolution originals! The total rejection rate for my sample set was 4.46% of all original GIFs uploaded. 
Using gifsicle is so much faster that our CPU rejection rate drops to 0.00 on my test set. Also, just under 99% of all images were smaller when resized than they were at their original resolution. The size rejection rate was a much lower 0.59%.
Gifsicle problems
As compelling as the performance of gifsicle is, the quality problems are too much to ignore. We played around with the code a bit, but eventually we just got in touch with the author, Dr. Eddie Kohler. The specifics are in this post, but the short version is that Eddie was able to improve quality by adding some more advanced resampling methods as well as palette expansion for small-palette images. This increased our size rejection rate to 0.68% while still keeping us well under our CPU budget. 
Proving it
Image processing is all about choices. How do you resample? Do you sharpen? Where in the workflow is gamma correction applied, if at all? The list goes on and on. 
As you can imagine from the performance differences, our previous converter and gifsicle take very different approaches to GIF resizing. The output images look different. Sometimes it is slight, sometimes it is significant, but there is no way we could put out a converter that messes up your images, even if it messes them up quickly. 
We set up a qualitative study. The goal was simply to prove that we weren’t doing worse than our old converter, not necessarily that we were doing better. This study was opened up to all Tumblr employees, as well as some “randomly selected” outsiders (my friends and family). Participants were presented with one of two questions:
1.) Given an original and 1 resize, decide whether it is ok, unacceptable, or completely broken.
2.) Given an original and 2 resizes (randomly choses which was left and which was right, sometimes they were identical), choose the better image or say there is no difference.
The results were everything I could have hoped for. The “acceptable” test showed that users found gifsicle better at producing acceptable results (87% vs. 84%), but not by a statistically relevant amount (p=0.086) and that gifsicle produced fewer broken GIFs (0.71% vs. 1.38%), but again not enough to say it is definitively better (p=0.106). The “better” test found users preferring gifsicle 37% of the time, the prior converter only 16% of the time, but users also preferred one identical image over the other 27% of the time. Again, it is hard to say that gifsicle is better, but it is clear that it is no worse.
Putting it all together
The development and testing described above took from late October until the beginning of March. Packaging, deployment, and integration took only a couple of weeks!
We aren’t done. There is work underway exploring how we handle JPEGs and PNGs. There are a slew of features that we can go after. This was a big step, a necessary step, but not the end for sure. 
We are a community, it takes a village, there’s no “i” in GIF
This project couldn’t have happened without the excellent work of Eddie Kohler in creating, maintaining, and enhancing gifsicle. Tumblr’s Site Reliability Engineering group packaged and helped deploy gifsicle onto hundreds and hundreds of machines in our datacenter. Tumblr’s Security Team vetted the code, both by inspection and by attacking it to make sure we stay safe. This was all for the awesome Tumblr creators, but I have to mention qilme/sukme (same dude, two blogs), reallivingartist, and especially gnumblr for their help in understanding and ultimately attacking this monstrous problem.

    Who doesn’t love animated GIFs?

    Believe it or not, support for GIFs at Tumblr was a happy accident! When Tumblr put together the code for handling JPEGs, support and GIFs (and PNGs) happened to also work using the same code. Perhaps even more surprising is that the tools used to handle GIFs at Tumblr hadn’t changed much from those early days. 

    The image above is an original from sukme that could not be posted to Tumblr last June. It also would have failed if he’d tried last Sunday. If you click-through to the original post, you will see a muddy, reduced-saturation mess. All this because our resizer couldn’t handle the original. 

    I’ve got ninety-nine problems and the GIF is one

    There is a lot of misinformation about GIF limits on Tumblr, so let me set the record straight: We don’t count colors or frames or pixels. We only count bytes and seconds. Every image that comes in is scaled to a number of smaller sizes and the smaller your image is, the fewer resizes need to happen, which means less time. 

    We had two core failure modes in our prior resizer: Some images would take as much as several minutes to convert. This was not directly attributable to color, dimensions, or frame count, but a mysterious mix of all of them. Some images would balloon in size (600KB at 400x400, 27MB at 250x250).

    The unpredictability of these failures made our GIF limits feel arbitrary and terrible to the end users. Some have gone so far as to threaten monkey kicks. I don’t want to get kicked by a monkey, so we started working hard late last year to fix it. 

    A proposed solution

    Some of you may have seen this post where the performance of our current converter was compared with a new “mystery” converter. The mystery converter was roughly 1000x faster on the “slapping” GIF and happened to look great, but had quality problems on other images. Those were more fully explored in here a couple of days later.

    If you haven’t figured it out yet, the mystery converter is gifsicle.

    Getting a better handle on it

    To get an unbiased test set, I took a random sample of roughly 90K GIFs that Tumblr users tried to upload, not limiting the corpus only to those that succeeded. These were tested against the current converter, resizing down to the next size we produce. Each resize is given up to 20 seconds to complete in our application, but all resizes must complete in 30 seconds. All resizes must be under 1MB or we will convert the first frame to JPEG and call it a day. 

    2.6% of my 90K GIFs took longer than 20 seconds to resize. This is an underestimation of how many GIFs would be rejected for time because this is only one of several resizes required. A whopping 17.1% of all GIFs were over 1MB. Even if we bump up to 2MB, the rejection rate is 2.75%. The converter was making over 25% of all resizes larger than the higher-resolution originals! The total rejection rate for my sample set was 4.46% of all original GIFs uploaded. 

    Using gifsicle is so much faster that our CPU rejection rate drops to 0.00 on my test set. Also, just under 99% of all images were smaller when resized than they were at their original resolution. The size rejection rate was a much lower 0.59%.

    Gifsicle problems

    As compelling as the performance of gifsicle is, the quality problems are too much to ignore. We played around with the code a bit, but eventually we just got in touch with the author, Dr. Eddie Kohler. The specifics are in this post, but the short version is that Eddie was able to improve quality by adding some more advanced resampling methods as well as palette expansion for small-palette images. This increased our size rejection rate to 0.68% while still keeping us well under our CPU budget. 

    Proving it

    Image processing is all about choices. How do you resample? Do you sharpen? Where in the workflow is gamma correction applied, if at all? The list goes on and on. 

    As you can imagine from the performance differences, our previous converter and gifsicle take very different approaches to GIF resizing. The output images look different. Sometimes it is slight, sometimes it is significant, but there is no way we could put out a converter that messes up your images, even if it messes them up quickly. 

    We set up a qualitative study. The goal was simply to prove that we weren’t doing worse than our old converter, not necessarily that we were doing better. This study was opened up to all Tumblr employees, as well as some “randomly selected” outsiders (my friends and family). Participants were presented with one of two questions:

    1.) Given an original and 1 resize, decide whether it is ok, unacceptable, or completely broken.

    2.) Given an original and 2 resizes (randomly choses which was left and which was right, sometimes they were identical), choose the better image or say there is no difference.

    The results were everything I could have hoped for. The “acceptable” test showed that users found gifsicle better at producing acceptable results (87% vs. 84%), but not by a statistically relevant amount (p=0.086) and that gifsicle produced fewer broken GIFs (0.71% vs. 1.38%), but again not enough to say it is definitively better (p=0.106). The “better” test found users preferring gifsicle 37% of the time, the prior converter only 16% of the time, but users also preferred one identical image over the other 27% of the time. Again, it is hard to say that gifsicle is better, but it is clear that it is no worse.

    Putting it all together

    The development and testing described above took from late October until the beginning of March. Packaging, deployment, and integration took only a couple of weeks!

    We aren’t done. There is work underway exploring how we handle JPEGs and PNGs. There are a slew of features that we can go after. This was a big step, a necessary step, but not the end for sure. 

    We are a community, it takes a village, there’s no “i” in GIF

    This project couldn’t have happened without the excellent work of Eddie Kohler in creating, maintaining, and enhancing gifsicle. Tumblr’s Site Reliability Engineering group packaged and helped deploy gifsicle onto hundreds and hundreds of machines in our datacenter. Tumblr’s Security Team vetted the code, both by inspection and by attacking it to make sure we stay safe. This was all for the awesome Tumblr creators, but I have to mention qilme/sukme (same dude, two blogs), reallivingartist, and especially gnumblr for their help in understanding and ultimately attacking this monstrous problem.

  • Meet Dr. Eddie Kohler, a GIF creator’s best friend!

    Scattered across the wacky animated set above is Eddie Kohler, professor of computer science at Harvard and the author of gifsicle since 1997. When it came time for Tumblr to reexamine how we manipulate GIFs, every engineer who looked at the problem inevitably came upon gifsicle, and every engineer eventually came to the same conclusion: the performance is stunning, but the quality just isn’t there. If you read between the lines of this post, sampling was obviously the issue.

    Late last year, we got in touch with Eddie. After we came to a mutual understanding of the problem, Eddie agreed to come visit us in New York. We spent Friday the 13th basking in the warm, coal-fired glow of the GIF format and how to process it. 

    By the end of the day we had a handshake-deal for Tumblr to sponsor some feature development on gifsicle, and what we are releasing now is the result of that work. 

    I would love to say there was a mutual “eureka” moment, but that would be a lie. Eddie showed up with some brilliant ideas about how to handle resizing while maintaining performance and quality. 

    Resampling:

    Eddie added several resampling methods, including some hybrid modes. None are as fast as the “naïve” default method, but the results are simply much better. 

    Palette:

    Our old tool threw away all the palette information, resizing as if there were no color limits, and then took a second pass to try to create the optimum palette for the image. This is slow and takes a ton of memory and can leave images looking muddy unless you sharpen them afterwards. 

    Gifsicle takes a very different approach. Scaling and resampling use 45-bit RGB colors (extra precision to allow a safe round-trip through gamma correction), but the results are fit to the original image’s color palette. This works for the vast majority of images while still avoiding the problem of having to choose which colors will be selected for the 512-color maximum palette (256 global and 256 frame-local colors). Despite my skepticism, this works amazingly well.

    The last change made here was to allow optional expansion of the palette for small-palette images. When reducing the size of a 2-color black-and-white GIF, it is nice to be able to use a few shades of gray for some of the pixels. 

    Results

    As previously mentioned, we took a little speed hit by changing the resampling. That meant that we were only 10x faster than our previous converter instead of being 12-15x faster. The images are significantly smaller, too. Perhaps the biggest thing is that it is highly unlikely that a resize to smaller dimensions will create a bigger file. So now the animation you lovingly crafted and optimized to be under a megabyte won’t surprise you by timing out or exploding in size and getting rejected. 

    The bottom line: our rejection rate using our old tool is estimated to be 4.46% of all original GIFs. Using gifsicle reduces that to 0.68% of all submitted GIFs, and no rejection of GIFs under 1MB. Oh, and your submissions will complete much faster. 

    Eddie isn’t a Tumblr user, so send any thanks to him on Twitter.

  • Tumblr Hosts New York Android Developers Meetup

    Nearly 200 Android developers stopped by the Tumblr office for three talks focusing on the importance of Design in Android.  Our own kevinthebigapple spoke on the importance of building beautiful, design first software for the platform.  Many thanks to the organizers of this fine event and everyone who showed up!