Measuring the Human Impact of Software Best Practices: A Story of CSS and Empathy

⛰ Measuring the Human Impact of Software Best Practices: A
Story of CSS and Empathy

@_jnf #AbstractionsCon content warning We are going to talk about
CSS, Google Calendar, and AWS. We are going to talk about the tyranny of pay-as-you-go internet We are going to talk about the complexity of life in Venezuela There is one 30s video featuring ﬂashing shapes and colors; I’ll give an additional warning before it begins.

@_jnf #AbstractionsCon an agenda i. " ii. ✨ iii. iv.
v. vi. vii. ⛰ viii. ( otherwise i’ll just ramble

@_jnf #AbstractionsCon " hi my name is jnf I am
a… programmer leader activist Seattlite nUber

@_jnf #AbstractionsCon " hi my name is jnf I am
a… programmer leader activist Seattlite nUber that’s Bren. she’s amazing

@_jnf #AbstractionsCon ➡ Today, I'm an engineering manager within the
Uber Advanced Technology Group, an entity dedicated to bringing safe, reliable self-driving transportation to everyone, everywhere. That's relatively recent. I came to Uber via the acquisition of Mighty AI, a Seattle-based startup with the mission to deliver high-quality training data for use primarily in computer vision and autonomous driving applications. I’m speaking today about events that took place during my time at Mighty AI, before the acquisition.

@_jnf #AbstractionsCon Go forth and be awesome ✨ If you've
ever attended one of my talks, you'll recognize the central theme here. I mostly talk about either using your privilege to elevate others, or how software makes us feel and affects our relationships. Today's presentation has both. Normally, I end with the message *Go Forth, and be Awesome*, because, ideally, my presentation has left you inspired and motivated to use your privilege to elevate others and/or dig into how the software you make affects the human relationships it touches. This time, I'd like to flip the script and lead with this closer.

@_jnf #AbstractionsCon ⛰ You can, should, and are in some
ways, obligated to use whatever privilege and leverage you have to elevate, promote, and otherwise help those around you. You exist at a specific moment in time and space in which you can affect great change, have tremendous impact. That feel heavy, because it is. But the good news is that there is so much that can be done, and little pebbles, fetched diligently, can move mountains. This talk is about one of the little pebbles, and the difference it's made.

@_jnf #AbstractionsCon There are many wonderful, powerful people out there
working every day to address inequity and injustice in our society. It's hard, thankless work. This talk isn't about them. It's about the rest of us. Fundamentally, this talk is about micro aggressions and microaﬃrmations. Microagressions are small, often unintentional, interactions that remind the marginalized of their oppression, or other the underrepresented, or just plain add resistance-- friction and heat--to what should have been a frictionless moment. Microaﬃrmations are the opposite. They are small, intentional signals that you--yes you--belong. Are part of the group, are recognized and valued. When you identify a behavior or pattern that is exclusionary, do the work to make it inclusive. That's the job.

@_jnf #AbstractionsCon microaggression

@_jnf #AbstractionsCon microaffirmation

@_jnf #AbstractionsCon “you guys” Here's a relevant example. No matter
your feelings on saying *you guys*, it's totally possible (and I would argue totally trivial) to use a plethora of delightful alternatives: *friends*, *peeps*, *folks*, *heroes*, and, my absolute favorite *~yinz~*. Yinz is such a delightful word. Just perfect.

@_jnf #AbstractionsCon “you guys”

@_jnf #AbstractionsCon friends folks peeps illustrious heroes party people participants

@_jnf #AbstractionsCon ~*YINZ*~

@_jnf #AbstractionsCon microaffirmation This idea of replacing microaggressions with microaﬃrmations
extends to software. There are microaggressions in your code. In your user proﬁles, in your assumptions, in your practices, best and otherwise.

@_jnf #AbstractionsCon microaffirmations, a guide Microaggressions and micro-affirmations, accessed 2019
08 18 https://www.brown.edu/sheridan/microaggressions-and-micro-affirmations-0 Fortunately, some really smart and kind folks over at Brown University published a guide to correcting a micro-aggression with a micro-affirmation. Active listening, which focuses on hearing clearly what is being shared, and demonstrated through eye contact, open body posture, summarizing statements, and/or asking qualifying questions to ensure understanding. Recognizing and validating experiences involves elucidating the what, why, and how. It is helpful to delve deeper by identifying and validating the constructive behaviors a student demonstrated to manifest or respond to the experience, expressing care about the effect of the event, and demonstrating a willingness to think through a productive path forward. Affirming emotional reactions through verbal acknowledgement that they have experienced something exciting, frustrating, hurtful, etc. enables the conversation to focus on turning those feelings toward actions that will empower, heal, and/or foster learning.

@_jnf #AbstractionsCon microaffirmations, a guide i. active listening Microaggressions and
micro-affirmations, accessed 2019 08 18 https://www.brown.edu/sheridan/microaggressions-and-micro-affirmations-0

@_jnf #AbstractionsCon microaffirmations, a guide i. active listening ii. recognizing
& validating experiences Microaggressions and micro-affirmations, accessed 2019 08 18 https://www.brown.edu/sheridan/microaggressions-and-micro-affirmations-0

@_jnf #AbstractionsCon microaffirmations, a guide i. active listening ii. recognizing
& validating experiences iii. affirming emotional reactions Microaggressions and micro-affirmations, accessed 2019 08 18 https://www.brown.edu/sheridan/microaggressions-and-micro-affirmations-0

@_jnf #AbstractionsCon motion warning Let me show you an example,
and the impact ﬁxing it has had in our community. But it requires some context. i’m going to play a short video. it has some motion and ﬂashing colors. it’s 30 seconds long and has no audio. i’ll let yinz know when it’ll start and when it’s done.

Let's set the stage. Mighty AI was a startup that
provided training data as a service. Leveraging an open community, we could and can create large, high quality datasets intended for training and validating computer vision models, primarily in the autonomous vehicle space. Here's what it looks like. <play video> My team creates and maintains the suite of web-based tools that make what you just saw possible. Those piece-meal segmentations were captured in a series of discrete tasks, independently veriﬁed, and combined to create the ﬁnal instance or semantic segmentations. We pay per task, usually between one and three cents. It takes a fair amount of code to do this. And, because it's the browser, the code is JavaScript, HTML, and CSS.

A signiﬁcant portion of our tasking population lives in developing
nations, with a large contingent living in Venezuela. This population developed organically, and I will forever be grateful to Mighty's Community team for recognizing the group's potential. The Community team leaned in hard, working with us to localize the interface in Spanish, hiring native speakers to act as community liaisons, and always always always ensuring we paid our annotators fairly and reliably, in USD. For much of our Venezuelan community, our annotation platform (called Spare 5) is their primary source of income.

@_jnf #AbstractionsCon community members raised concerns about data transfer Algo
no tan gracioso, se nos vienen momentos difíciles a los que usamos las operadoras móviles para conectarnos y trabajar en Spare5. Se vino un aumento de el costo del mega de 0.47 a 4 Bss (en mi caso movistar). Tareas como la lidar con alto consumo de megas (50 MB) nos generaran perdidas, el costo para hacer esta tarea sera de 4 Bss/MB x 50 MB = 200 Bss y la ganancia de 0.05 $ x 3000 Bss/$ = 150 Bss. Something not so funny, difficult times come to us who use mobile operators to connect and work in Spare5. There was an increase in the cost of the mega from 0.47 to 4 Bss (in my case movistar). Tasks such as lidar with high consumption of megabytes (50 MB) will generate losses, the cost to do this task will be 4 Bss / MB x 50 MB = 200 Bss and the gain of 0.05 $ x 3000 Bss / $ = 150 Bss. — J. G., Super 5  2019 02 19, via Slack There’s a small subsection of our community—called Super 5s—that do especially complicated tasks. They’re longstanding, highly-trusted individuals. We’re all in a Slack together. One day in February, J.G. shared the post above. It was here that I realized the magnitude of the microagressions in our code base. JG was participating in a beta test of a new annotation tool that required downloading a large data payload. In this post, they do the math of how that 50mb payload meant they would lose money on the task, no matter what.

@_jnf #AbstractionsCon count the microaggressions enumerate microaggressions

@_jnf #AbstractionsCon count the microaggressions i. I forgot/ignored that many
folks buy data by the megabyte ii. I didn’t know what the cost per megabyte was for those folks iii. I didn’t know there was such flux in the data access costs for the community iv. I asked them to take a literal loss in order to participate in a beta test

@_jnf #AbstractionsCon I assumed an experience largely consistent with my
own. In summary… Classic microaggression—assumption of common experience

@_jnf #AbstractionsCon that 50mb payload was definitely not our only
application overhead then i realized something else, that 50mb was for a beta test—it was a known ill that we would work to resolve as the product matured. that foresight doesn’t forgive the harm caused, by the way, but at least it was visible Looking past that big rock, I realized there were deﬁnitely many other assets we expected folks to download everyday in order to use our platform.

@_jnf #AbstractionsCon let’s talk about CSS <link rel="stylesheet" type="text/css" href="https://spare5-
static.spare5.com/fivesweb_styles.css" /> html html + css It’s an external resource, like images It’s cachable, that is, a browser won’t download it if it doesn’t have to We have a _caching-strategy_ for deﬁning when a browser has to download the css again The strategy is imperfect

@_jnf #AbstractionsCon 1.3mb Back in February, when this story takes
place, I was haunted by this number--1.3mb. That was the disk size of our production CSS bundle for our primary annotation client. That's a lot of CSS.

@_jnf #AbstractionsCon For contrast, just how much CSS does twitter
need? Let’s pop open the developer tools and check. …that’s about 115kb.

@_jnf #AbstractionsCon

@_jnf #AbstractionsCon 1.3mb Ok, back to the 1.3mb in February.
How did we get there? When I joined Mighty, the entire front-end was embedded in a Rails application. Over the next 18 months, my team and I worked to extract the front-end into standalone applications. One of the last threads to cut was the CSS; at the time, Rails was bundling our CSS, so making a style change necessitated a back-end deploy. This bit of tech-debt had been in the backlog for awhile. I put it off, as we had many competing priorities, and they all had a better reward-to-effort ratio. Or so I thought. When we finally got into it, I realized how bad the problem was. There were multiple CSS frameworks referenced in the codebase. Percent utilization was extremely low-- in the single digits for most pages. Also, at some point, we'd broken the minifier and hadn't noticed. We removed the old frameworks, refactored some old components to use current styles and patterns, got our builds running outside of Rails, and, you know, fixed the minifier. When we were done, the new CSS bundle weighed in at 34kb. Your move, twitter.

@_jnf #AbstractionsCon 34kb

@_jnf #AbstractionsCon metaphor! Our 5s pay a CSS tax, and
we cut the tax rate by two orders of magnitude. That’s not a metaphor. I can quantify the tax rate. In February of 2019, it was between 0 and $0.18, depending on how much they tasked

@_jnf #AbstractionsCon metaphor!

@_jnf #AbstractionsCon 1300 metaphor!

@_jnf #AbstractionsCon 1300 34 metaphor!

@_jnf #AbstractionsCon time to get detailed That feels kinda vague—0
to 18 cents—so let’s get detailed. I want to show how to apply a best practice like “have separate build and deploy pipelines for front end assets” maps to speciﬁc, tangible quality of life improvements. First some facts Then some process Then some math

@_jnf #AbstractionsCon every byte transferred from server to client costs
+ AWS CloudFront Pricing Movistar Pricing It costs because it takes eﬀort (electricity, processing power, time) to transfer data We pay amazon for it 5s pay their ISP for it Every byte is paid for—at least twice—every time it is downloaded, but the numbers are hardly comparable or fair.

@_jnf #AbstractionsCon every byte transferred from server to client costs
+ AWS CloudFront Pricing Movistar Pricing

@_jnf #AbstractionsCon J. G. i. Super 5 1 ii. completed
1,090 tasks in February 2019 iii. earned $72.10USD

@_jnf #AbstractionsCon Spare 5 (tasking platform) i. so cool ii.
92 Rails production deploys in February iii. 9 of which involved CSS When we deploy Rails, the CSS is recompiled which generates a new asset hash Which tells cloudfront the css has changed Which invalidates the cache Which makes 5s re-download the ﬁle the next time they load a page So that’s… 83 times we busted the CSS cache that we didn’t need to

@_jnf #AbstractionsCon let’s just talk about the week of february
11th there’s not a february emoji ☹ 1090 tasks and 92 deploys are still pretty big numbers, so let’s drill down even further, and visualize the work JG did during just one week in february

@_jnf #AbstractionsCon ok, follow me here… here is the only
code in my entire talk, and it’s just screenshots ﬁrst let’s write a database query… That made data that looked like this… (job submitted, how long they spent, how much they made) Then write some Ruby that merges those jobs into “working sessions” and transforms the data into some csv that google calendar can understand

@_jnf #AbstractionsCon ok, follow me here…

One week of tasking sessions, in a calendar view. Hashtag
manager life A session is a contiguous block of submitted tasks w/ less than 15 minutes between the end of one and the start of the next

Overlay production application deploys (in pink), which, at the time,
included the CSS bundle (cache busting) Same week, 13 deploys. Only 2 actually touched the CSS. Every green box after a red box is a time we forced JG to re-download the CSS bundle, roughly 8-10 times Most of the time, even though we forced a re-download, it was exactly the same code.

The code only changed twice, here, in blue. Conservatively six
unnecessary downloads, or ~7.5mb of CSS JG isn’t going to use. For reference, the assets unique to a large task, assuming nothing cached, is about 2.5mb. So that’s three jobs we asked them to download (and pay for).

@_jnf #AbstractionsCon Let’s connect it to our previous metaphor. During
the week of 2/11. JG paid the CSS tax 8 times It should have been twice And it should’ve been far, far less

@_jnf #AbstractionsCon

@_jnf #AbstractionsCon 1300 x 8

@_jnf #AbstractionsCon 1300 x 8 1300 x 2

@_jnf #AbstractionsCon 1300 x 8 1300 x 2 34 x
2

@_jnf #AbstractionsCon napkin maths JUST FOR THE CSS, THE VAST
MAJORITY OF WHICH THEY DID NOT EVEN NEED TO RENDER THE INTERFACE Not including cost of JavaScript, markup, images, annotations, instructional content, etc.

@_jnf #AbstractionsCon napkin maths before: ➡ 8 cache-busting events,  at
1.3mb each ➡ 1.3 * 8 = 10.4mb ➡ 10.4mb * 5 = 52Bs. just for CSS

@_jnf #AbstractionsCon napkin maths before: ➡ 8 cache-busting events,  at
1.3mb each ➡ 1.3 * 8 = 10.4mb ➡ 10.4mb * 5 = 52Bs. just for CSS after: ➡ 2 cache-busting events,  at 33.8kb each ➡ 0.0338 * 2 = 0.676mb ➡ 0.0676mb * 5 = 0.34Bs.

@_jnf #AbstractionsCon –Rueters, 2019 06 12 Venezuela adds bigger bank
notes due to hyperinflation “Banknotes of 10,000, 20,000 and 50,000 bolivar denominations will begin circulating on [June 13, 2019]…The largest of those bank notes, equivalent to about US$8, is more than the minimum wage of 40,000 bolivars per month.” https://uk.reuters.com/article/venezuela-economy/venezuela-adds-bigger- bank-notes-due-to-hyperinflation-idUKL2N23J167 This is the second time in a year that the Venezuelan government has made a drastic change to their currency. One year ago yesterday, a new currency—the Bolívar Soberano—replaced the existing currency with a ratio of 100,000 to 1. The minimum wage at that time was 1,800 bolivars. It’s since increased to 40k, but the actual value has decreased. In USD, the minimum wage has fallen from about $8USD to less than $3.

@_jnf #AbstractionsCon –Bloomberg, 2019 08 15 Venezuelan Café Con Leche
Index “[A cup of coffee’s] price has jumped to 9,000.00 bolivars from 25.00 bolivars over the past 12 months, an increase of 35,900 percent.” https://www.bloomberg.com/features/2016-venezuela-cafe-con-leche-index

@_jnf #AbstractionsCon css won’t save us

@_jnf #AbstractionsCon css won’t save us ➡ inflation is in
the tens-of-thousands percent

the tens-of-thousands percent ➡ a cup of coffee is about 25% of a monthly minimum wage

the tens-of-thousands percent ➡ a cup of coffee is about 25% of a monthly minimum wage ➡ 52Bs.S. to download CSS is unacceptable

the tens-of-thousands percent ➡ a cup of coffee is about 25% of a monthly minimum wage ➡ 52Bs.S. to download CSS is unacceptable ➡ Is 0.34Bs.S. good enough?

@_jnf #AbstractionsCon ⛰ With changing the what and when and
how of our CSS deploys, we've taken one little pebble off the mountain our community faces. And that's how we move mountains, one little pebble at a time, all together. What's happening in Venezuela is so far out of our control, but we can still help. We can listen, recognize and validate the experiences shared, and then adapt our perspective and efforts to better include and honor those experiences. Getting our CSS under control benefits every single person using our application; keeping it under control shows we respect and value the people who's lived experiences differ from our own. Having that closer connection to our community and seeking microaffirmation opportunities makes me a better engineering leader. It helps me prioritize the right efforts by providing much more meaningful and tangible measures of impact. I would encourage you to do better than I did. Don't wait, don't assume. Seek out the disempowered folks in your product's communities. Don't assume you know what would best help them. Don't assume that your product backlog will solve their problems. Instead, reach out.

@_jnf #AbstractionsCon Ask, listen, believe and then act.

@_jnf #AbstractionsCon ask, listen, believe

@_jnf #AbstractionsCon ask, listen, believe and then act.

@_jnf #AbstractionsCon thank you (

Measuring the Human Impact of Software Best Practices: A Story of CSS and Empathy

Measuring the Human Impact of Software Best Practices: A Story of CSS and Empathy

More Decks by jnf

Other Decks in Programming

Featured

Transcript