For the Fall 2021 term of the Linux Foundation Mentorship program I worked with moja global (opens in a new tab) on Cloud native measurement, reporting and validation of carbon emissions. All the work was merged and the project finished on scope.
moja global builds FLINT — the Full Lands Integration Tool — an engine that estimates greenhouse gas emissions and removals from land use. Countries use this class of software to produce the numbers they report under international climate agreements, which sets an unusually high bar for correctness. My work was on FLINT UI (opens in a new tab), the Vue frontend for configuring and running those simulations.
What shipped
Grouping by theme rather than by week makes the shape of the work clearer than the chronological log did.
Component library and design system
- #32 (opens in a new tab) — added Storybook to manage components, stories, and documentation
- #66 (opens in a new tab) — deployed Storybook to Chromatic
- #80 (opens in a new tab) — stories for the button, card, and footer components
- #136 (opens in a new tab) — new
Alerts,Divider,Progress, andPopupConfirmcomponents with stories
CI and automation
- #92 (opens in a new tab) — continuous integration: install, lint, build the Vue app, build Storybook, on every push and pull request
- #87 (opens in a new tab) — scoped the Chromatic action to
flint.ui/.storybook/**andflint.ui/src/stories/**, and added Dependabot to keep the Flint.Cloud submodule current - FLINT.Example#25 (opens in a new tab) — pipeline to build and publish the Flint.Example Docker image to the GitHub container registry
Correctness and usability fixes
- #74 (opens in a new tab) — made the output simulation table read-only, fixing a bug where results looked editable
- #91 (opens in a new tab) — truncated Point and RothC output to five significant figures
- #96 (opens in a new tab) — formatted step dates from full ISO 8601 to
YYYY-MM-DD - #78 (opens in a new tab) — rewrote toast notifications with messages that say something
- #70 (opens in a new tab) — fixed irregular card sizing on the dashboard
- #102 (opens in a new tab) — added a
vue-tourguided walkthrough for new users
Infrastructure and cleanup
- FLINT.Cloud#48 (opens in a new tab) — Terraform to generate globally unique Cloud Storage bucket names
- FLINT.Cloud#46 (opens in a new tab) — removed the top-level
rest_api_*folders - FLINT.Cloud#50 (opens in a new tab) and #52 (opens in a new tab) — moved dictionary inserts to their definition; moved the image to the GitHub container registry
- #16 (opens in a new tab) — installation guidelines in the README
- #72 (opens in a new tab) — migrated to Yarn
Two changes worth explaining
The date formatting change (#96 (opens in a new tab)) looks trivial and is not. JavaScript hands you ISO 8601 by default — YYYY-MM-DDTHH:mm:ss.sssZ — which is correct and useless here. FLINT simulations run over decades or centuries, so the hours, minutes, and seconds are always meaningless noise attached to every row of every table. Truncating to YYYY-MM-DD removed a large amount of visual clutter for a very small diff.
Scoping the Chromatic action (#87 (opens in a new tab)) was the same kind of change applied to CI. Chromatic runs visual regression tests, which are slow and metered. Running them on every commit regardless of what changed burned through the quota and trained everyone to ignore the results. Restricting it to paths that can actually affect the rendered components made it fast enough to pay attention to.
NOTE
Both fixes are about signal rather than features. A timestamp nobody reads and a check nobody trusts cost more than they look like they do, because they teach people to skim. Most of the highest-value work I did on this project was of that shape.
What I learned
The stack was new to me in most places: Vue, Storybook, Chromatic, Sphinx, and design systems as a discipline rather than a vocabulary. Terraform and Google Cloud I had only read about before this. The Docker, GitHub Actions, JavaScript, REST, and Python side I knew but used more seriously here than I had previously.
The larger thing I took away was the domain. Writing a frontend for software whose output feeds national emissions reporting changes how you think about a rounding decision. Truncating to five significant figures is a UI change and also, at a distance, a claim about how precise the underlying model actually is.
Thanks to my mentors Andrew O'Reilly-Nugent (opens in a new tab) and Gopinath Balakrishnan (opens in a new tab), and to Arnav Tiwari (opens in a new tab), Harsh Bardhan Mishra (opens in a new tab), Mohammad Warid (opens in a new tab), Shloka Gupta (opens in a new tab), and Shubham Karande (opens in a new tab) for reviews and help along the way. The LFX-2021 repository (opens in a new tab) has the full record.