This month I’m adventuring into a new way of telling stories. Specifically, I want to explore how micro-applications can help convey some information.

This article consists mainly of an application with an interactive tutorial. The story we illustrate is from previous article about the scope of projects, so make sure to scan through the article first.

In the future I’ll try to intersperse such micro-applications into articles. This first attempt taught me that my current default article layout is interacting a bit too-much with the application so far. As a result the application may not work nor render well on mobile. Also, I do not promise the code is bug-free, however the steps made in the interactive Tutorial work well at least. I apologize for such recklessness.

In general, feedback is highly appreciated as I need to calibrate how much time to budget on micro-applications versus textual content.

an exercise to go further

As an exercise, at the end of the tutorial you could say that your application is now encoutering some success, in that case you need to be able to receive money. To receive money you’ll need some “Billing” feature(s). Have fun adding “Billing” as a feature, zooming-in and studying how to split the Billing-scope in sub-scopes.

help

legend for: EDIT table

cell	status	details
	done
	todo	intermediary node (computed)
	todo	leaf of scope tree
	in disagreement	intermediary node is claimed done but internal status is not

the scope

As you define a matrix of tech steps by features , the scope of your #project grows.

If you zoom on a given tile (you over the mouse on a tile and press the 🔽 “zoom” button) then the scope displayed changes. You get prompted the whole path in your hierarchy, for instance

🔼 TechStepName :: FeatureName🌐 global

As you press the 🔼, you navigate upward. When (and only when) you reach the 🌐 global #project-scope the graphs are updated.

understanding the graphs

The graphs represent the progress of the scope at the 🌐 global scope only.

All graphs start grayed out and represent a normalized value (i.e., the largest value of the whole series takes 100% of the height of the bar). Most recent values are on the right.

scope is how many “tiles” there are in total

delivery is how many “tiles” are claimed or effectively delivered (claimed correspond to the checkbox on the tile, effective correspond to a majority of the subscope being delivered, the definition is recursive)

progress has two colors and represents the fraction of “delivered scope” as well as the size of the scope, having both on the same graphs lets you see when the scope grows compared to previous values at a same time as when the delivery grows at fixed scope

coverage is the percentage of declared features (i.e., verticals) that are fully-delivered