## This is a talk about...
- Reducing costs (less important)
- Getting better at what we do (more important)
---
## About Mozilla's Data
We have a lot of it!
- We ingest 10 Tb/day just for the main ping.
- BigQuery quoted cost => $5/TB
---
## Queries and Dashboards = $$$
- Proportional to data scanned and frequency
- Queries which answer interesting questions tend to cost more money!
---
## First pass
- Used a query by @jason that calculated scheduled query cost on sql.telemetry.mozilla.org
- Emailed a pile of people (privately)
- Hand-answered a big pile of questions about why their queries were so expensive
---
## Initial results
---
## What was the followup?
- Most of my attention for the rest of the year went to the GCP Migration and Iodide itself
- Wrote up a sequel dashboard that worked against BigQuery instead of Athena, checked it every once in a while
---
## Problems
- Spent time explaining same things over-and-over
- Hard to track progress or impact
- Unclear if this was really something I should be doing
---
## What we did
- Don't explain. Document!
- Eliminate decision-making
- Distribute the responsibility
- eliminate fear
---
## Documentation
- Distill understanding of how to solve problems
---
## Distribute the responsibility
- To the people writing the queries...
---
## Distribute the responsibility
- ... to my peers
---
## Eliminate fear
- File bugs!
- It is expected to get things wrong, what matters is the learning
- It is ok to call/organize meetings, even if you're not a manager
---
## Future work
- Mechanize more of this process
- Where are derived datasets most useful?
- How can we apply this approach in more areas?
## Who am I?
- Front-end developer
- VSCode :heart:
- I use tabs. :cat:
---
### 70% of our users are developers. Developers :heart: GitHub.
---
{%youtube E8Nj7RwXf0s %}
---
### Usage flow
---
```graphviz
digraph {
compound=true
rankdir=RL
graph [ fontname="Source Sans Pro", fontsize=20 ];
node [ fontname="Source Sans Pro", fontsize=18];
edge [ fontname="Source Sans Pro", fontsize=12 ];
subgraph core {
c [label="Hackmd-it \ncore"] [shape=box]
}
c -> sync [ltail=session lhead=session]
subgraph cluster1 {
concentrate=true
a [label="Text source\nGithub, Gitlab, ..."] [shape=box]
b [label="HackMD Editor"] [shape=box]
sync [label="sync" shape=plaintext ]
b -> sync [dir="both"]
sync -> a [dir="both"]
label="An edit session"
}
}
```
---
### Architecture of extension
---
---
## Content script
- Bind with each page
- Manipulate DOM
- Add event listeners
- Isolated JavaScript environment
- It doesn't break things
---
# :fork_and_knife:
---
<style>
code.blue {
color: #337AB7 !important;
}
code.orange {
color: #F7A004 !important;
}
</style>
- <code class="orange">onMessage('event')</code>: Register event listener
- <code class="blue">sendMessage('event')</code>: Trigger event
---
# :bulb:
---
- Dead simple API
- Only cares about application logic
---
```typescript
import * as Channeru from 'channeru'
// setup channel in different page environment, once
const channel = Channeru.create()
```
---
```typescript
// in background script
const fakeLogin = async () => true
channel.answer('isLogin', async () => {
return await fakeLogin()
})
```
<br>
```typescript
// in inject script
const isLogin = await channel.callBackground('isLogin')
console.log(isLogin) //-> true
```
---
# :100: :muscle: :tada:
---
### Wrap up
- Cross envornment commnication
- A small library to solve messaging pain
- TypeScript Rocks :tada:
---
### Thank you! :sheep:
You can find me on
- GitHub
- Twitter
- or email me
{"metaMigratedAt":"2023-06-15T11:23:51.637Z","metaMigratedFrom":"YAML","title":"Talk slides template","breaks":true,"description":"View the slide with \"Slide Mode\".","contributors":"[{\"id\":\"bc09ae22-19ce-4552-a1b8-34465f7c997d\",\"add\":5208,\"del\":1335}]"}