Learning from Giants #61
The key method for outcome-driven product teams, a foundational paper of relational database query engines from the 70s, and building a CSS-only design editor at Canva.
👋 Hi, this is Mathias with your weekly drop of the 1% best, most actionable, and timeless resources to grow as an engineering or product leader. Handpicked from the best authors and companies. Guaranteed 100% GPT-free content.
Did a friend send this to you? Subscribe to get these weekly drops directly in your inbox. Read the archive for even more great content. Also: I share these articles daily on LinkedIn.
The Value Engineering method
Product people, this is for you! Switching from an output to an outcome-driven product culture isn't enough. You must fundamentally change the way you work as a company to make a difference. Otherwise, your shiny new outcomes just map to your old outputs.
"In an outcome-driven environment, organizations have shifted focus to funding teams and outcomes over work. [...] The reality is that many initiatives continue to run through 'completion' and are judged on their results."
To be effective, one must match an outcome-driven culture with an incremental approach to value creation–with checkpoints and milestones. That's called Value Engineering.
"The Value Engineering approach recognizes these initiatives as a portfolio of bets and uses an evidence-based approach to make decisions as new information is revealed. [...] It is an evidence-based decision making model for identifying when to pivot, persevere, or stop investments."
That decision-making model is based on incremental bets to create learnings and near-instant usage of these learnings. Here's a template for each initiative:
Hypothesis: We believe [this capability] will result in [this outcome]. We will have confidence to proceed when we see a [measurable signal].
Desired outcome: Explanation of a future state, ideally measurable. This might be an OKR, a target for a KPI, or just an articulation of the future."
Max bet: If you could buy the outcome off the shelf, how much would you pay? This can be in terms of dollars, but it's often easier to define this as people over time (e.g. 2 teams over 16 weeks)"
After each incremental bet, we ask the same question:
"Do we pivot, persevere, or quit?"
"That decision may be relative to other investments. Because we can plot other initiatives across these axes, we can visualize whether or not we have longer-running initiatives worth doubling down on or earlier initiatives showing more promise."
That last point is what makes the Value Engineering method so strong. It gives you a framework to visualize initiatives relative to each other and compare them to make the necessary trade-offs.
📗
's Value Engineering article is a must-read for product people in outcome-driven cultures. As Barry puts it, "With one checkpoint (at the end), the only potential scenarios are luck or overcommitment.". Building that test, learn, and iterate culture is a necessary first step, but it's the plotting and visualization that will make your decisions more intentional and strategic.Access Path Selection in a Relational Database Management System
SQL and relational databases are 50 years old!
Most modern systems still use the language and query optimization concepts from the 70s. The papers of that era from the IBM Research Division are a treasure trove of canonical papers. In particular, one paper is the father of many systems.
"Access Path Selection in a Relational Database Management System" from Patricia Griffiths Selinger.
The IBM team built System R, one of the first-ever relational databases.
"System R is an experimental database management system developed to carry out research on the relational model of data."
The paper describes how System R does Access Path Selection, meaning turning a SQL query into a plan to retrieve the data from disk, filter, and join it to satisfy the query.
"The four phases of [SQL] statement processing are:
Parsing,
Optimization,
Code generation,
Execution."
Parsing is quite simple to understand. Code generation and execution are intelligent ways to execute the defined plan. The focus of the article is on the second step: the OPTIMIZER.
▶︎ "The OPTIMIZER accumulates the names of tables and columns referenced in the query and looks them up in the System R catalogs to verify their existence and to retrieve information about them. [...] Finally the OPTIMIZER performs access path selection. It first determines the evaluation order among the query blocks in the statement. Then for each query block, the relations in the FROM list are processed. If there is more than one relation in a block, permutations of the join order and of the method of joining are evaluated. The access paths that minimize total cost for the block are chosen from a tree of alternate path choices."
That's the high-level approach System R and many following databases took for the next 50 years. Compute the cost of possible access paths, compare them, and take the smallest. But how does the costing work?
▶︎ "During catalog lookup, the OPTIMIZER retrieves statistics on the relations in the query and on the access paths available on each relation. [...] Using these statistics, the OPTIMIZER assigns a selectivity factor 'F' for each boolean factor in the predicate list. This selectivity factor very roughly corresponds to the expected fraction of tuples which will satisfy the predicate."
For example, the selectivity factor of a single field = ‘value’ clause is computed as 1 / field cardinality.
By merging that selectivity factor with the costs of accessing each path, the optimizer can make trade-offs between sequential and index reads and, more generally, choose the lowest cost path.
📗 Patricia Griffiths Selinger's Access Path Selection in a Relational Database Management System paper from 1979 then covers the cost formula for single path access and joins, as well as the selection algorithms involved—a nice read into the world of databases.
Absolutely positioning things relatively at Canva
How Canva automatically turns designs into responsive websites.
For their new Websites product, a Canva team needed to go beyond the limits of the Canva editor.
"Canva is a design platform where users can create designs by freely dragging and dropping elements using our fixed dimensions editor."
"Our challenge is whether we can do this automatically at scale. Can we take any design and render it responsively? And just for a challenge, can we do all this without JavaScript?"
Their initial thought was to stick with absolute positioning and scale everything according to the device's dimensions. Users place elements inside the drag-and-drop editor, giving fixed coordinates for each.
"There are a few optimizations we can make, but there's one big problem: the text becomes impossible to read [on smaller devices]."
And because absolute is, well, absolute, text will overflow the elements if you don't scale it down with the rest of the design. So, absolute positioning was out of the picture.
"We need a simple absolute positioning system, but the reflowing text should influence the position of other elements. That is, the best of both absolute positioning and the normal relative flow."
The team achieved this using CSS Grids. In the world of CSS Grids, you define as many rows and columns as needed and give each element a start, end row, and column on the grid.
Because rows and columns can't overlap, they can stretch to accommodate content and thus avoid the pitfalls of absolute positioning.
"To calculate the grid-template-columns, we calculate the offset as a percentage of the design/screen width from the previous column."
The trick is not to use percentages only but to combine them with max-content:
min-max (12vw, max-content)
Max-content will ensure the columns and rows can grow beyond the fixed percentage to always fit their content.
📗 Benjamin Morris's CSS: Absolutely positioning things relatively describes the team's journey to figure out the right software solution to the complex problem that is solving responsiveness auto-magically. Beyond performance, the team put much effort into creating the best user experience, making it a super interesting read.