Various Desktop Feed Features

August 1, 2018 3-minute read

JavaScript • Ember.js • Sass • Web Performance

I worked on the Desktop feed for quite a while. Performance, i18n, and accessiblity were always a work-in-progress for a product that receives millions of views a day across the world in 20+ languages/locales.

Here are some of the interesting projects I worked on:

New way of rendering feed updates

Developer velocity was also a focus for a period of time. Now that we had the feed served across 4 platforms (android, ios, mobile-web, desktop), it was always a huge effort to create a new feed update. Any time we wanted to add a new update or a different team wanted a new update, we would need to create new models and add support for this new update on the API and implement the view 3 or 4 times on each platform.

So we spent a lot of time coming up with a generic framework for rendering feed updates. This involved creating a new set of models that could express all existing (hopefully future) feed updates, differentiating common components across feed updates, moving a bunch of logic up to the server, and coming up with processes across design and engineering to ensure we write as little client code as possible with new updates.

Performance across the App

Since all of LinkedIn's major consumer products were on this new Ember.js single page app, there were a ton of performance challenges. Some of them were solved by decreasing asset size, squashing memory leaks, and ensuring Ember's run loop does as little as possible (lazy-loading, lazy-rendering).

A lot of tooling, contributions to Ember, and analytics were required for this. Here's a cool article that demonstrates some of these efforts: https://engineering.linkedin.com/blog/2018/03/how-we-built-the-same-app-twice-with-preact-and-glimmerjs

Translations in Feed

With the Microsoft acquisition of LinkedIn, we were able to leverage Microsoft's translation engine to display translations of content that was written in your default locale. This meant that posts in Spanish were now accessible to Chinese users, and vice versa. I primarily acted as a consultant and influenced architecture here, as the localization team (comprised of only a few engineers who did not have any experience with our new tech stack).

Flexible Height Images / Intelligent Cropping

Displaying images on feed is always a touchy subject. On one hand, posts with images are engaged with heavily (excellent for engagement metrics). On the other hand, they take up a lot of space (poor for revenue metrics). So quite a lot of thought and analytics were put into finding the right size of image and the right crop of image (if cropped). We experiemented and implemented flexible height images. Images could be displayed within a range of aspect ratios to limit cropping.

Later on, we added some intelligent cropping. Using machine learning, we attempted to find the right sections of images to display and cropped the image in a way that the relevant section appeared. This was fun because I did quite a bit of math to come up with an algorithm to do this.

Photo Tagging

Adding the ability to tag folks in images was quite a requested feature, which we eventually took on in mid-late 2018. I first worked on the consumption flow, basically a little pill at the bottom of the image to indiciate “$someoneTagged and 1 other” along with a tooltip indiciating who was tagged overlaying the image. Then I worked on the creation flow, basically allowing the user to specify locations of the tag and preview the update.