Good morning and welcome to the first edition of Full Stack Express, your weekly newsletter covering tech articles, news, case studies and tips up and down the tech stack.

We’ve got a wide-ranging batch of topics today, so let’s jump right in:

• How Netflix Chooses its Artwork

• Uber’s Approach to Managing Data

• Dropping Bundle Size with Dropbox

NOTABLE ANNOUNCEMENTS

• Bun 1.0 is launching on Thursday, September 7. Register for the live-streamed event here.

• The Deno team releases Fresh 1.4, its own web framework built on Preact.

• The Microsoft team releases Playwright 1.37.1, an end-to-end testing framework supporting all modern rendering engines.

HOW NETFLIX CHOOSES ITS ARTWORK

With a whopping 238.39 million global subscribers and 8.19 million dollars in revenue for Q2, Netflix remains the most popular streaming service by a considerable margin.

How does the streaming giant decide which images to show its users?

Enter AVA.

AVA is an in-house tool built to surface still frames from video content.

Instead of watching every moment of content and selecting the best frames manually, the AVA Discovery View provides a scalable approach to surfacing authentic frames.

By aggregating a diverse set of entry points that caters to different users, creatives are able to create a more polished piece of artwork.

What a sigh of relief for the creative teams!

Find the full in-depth analysis here.

UBER’S APPROACH TO MANAGING DATA

Uber everywhere.

25 million trips per day on Uber.

136 million monthly active platform consumers on Uber Eats.

10,500 cities across 70 countries.

These are some of the numbers handled by Uber’s engineering teams today.

It’s no surprise that Uber cares about data, creating their own solution to Data Lifecycle Management (DLM).

So how does the company handle the vast variety of data stores (e.g. HDFS, MySQL, Cassandra) and datasets at “Uber scale” (over 1EB of data)?

By building a unified system consisting of:

• Dataset Metadata - Automatically determine relevant actions for different datasets (e.g. age of data)

• Lifecycle Policies - Intended actions to be taken upon datasets with certain characteristics (e.g. delete all data after d days of creation time)

The core aspects of Uber’s DLM architecture is as follows:

• Workflow Orchestration Engine - Powered by Cadence, a distributed, highly available orchestration engine. Cadence handles asynchronous, long-running business logic at scale.

• Internal Entity Store - Powered by DocStore, Uber’s own distributed, general-purpose SQL database.

Find the full in-depth analysis here.

DROPPING BUNDLE SIZE WITH DROPBOX

A great user experience is sometimes taken for granted, so much so that excessive load times is enough to turn users away completely.

With applications as feature-rich and interactive as Dropbox, performance issues are even more apparent and amplified.

One such pain point for Dropbox stemmed from its module bundler.

Utilizing a bundler that was created nine years ago (first iteration in 2014) has prove cumbersome to maintain over the years, slowing down development velocity, and hampering user experience.

Dropbox decides to opt for a replacement with Rollup due to specific requirements such as code-splitting and tree-shaking.

By breaking up the JavaScript bundle into smaller chunks, the browser only loads the pieces are necessary for the current page that the user is on.

Not only does this speed up the initial page load, but also when navigating between pages.

In addition, since Dropbox uses Protobuf definitions for efficient data transfers, bundle size would be reduced through tree-shaking, leading to a leaner, final bundle.

Find the full in-depth analysis here.

BYTE-SIZED TOPICS

ARM, the British firm backed by SoftBank, has filed for IPO

MDN creates front-end developer curriculum

Microsoft is Bringing Python to Excel

Threads Launches Highly Anticipated Web App

USEFUL TOOLS & PACKAGES

RunJS: The JavaScript playground for your desktop

Excalidraw: An open source virtual whiteboard

MacGPT: ChatGPT on your Mac and Menubar

Type Fest: TypeScript types that should be built-in

TIP OF THE WEEK

How do we actually make an object immutable in JavaScript?

Let’s start with a variable and assign it an object literal with some properties.

const car = { color: 'red', year: 2023 };

Even though the const keyword prevents reassigning the value, it doesn’t prevent properties from being added, updated, or removed.

The addition of new properties can be prevented with the following method:

Object.preventExtensions(car);

We can take this a step further by sealing the object:

Object.seal(car);

Doing so prevents extensions and makes existing properties non-configurable (e.g. existing properties cannot be removed).

Last but not least, we can freeze the object, which does all of the above, and also makes existing properties non-writable:

Object.freeze(car);

MEME OF THE WEEK