Developer Experience Scorecard Changelog Block for React

Edit STEPS and the release names at the top of the file. A step has a label, a unit and six values, newest first, where lower is better. The columns' heights, the value now, the change since the release before and the title are all worked out from the six numbers. Heights are a share of the row's slowest release, with a small floor so a column never vanishes.

As listed keeps the order in the file; Best change first puts the biggest improvement on top. The rows all have one height, so reordering never moves the page. The choice stays local to the block.

By an arrow, a sign and words for assistive technology: a step that got faster shows a down arrow and a true minus, a slower one an up arrow and a plus, and one that did not change a dash and 0%. The latest release is the solid column and the other five are a paler solid, so weight carries the order.

The columns are hidden from assistive technology. Each row's cell also holds the six values in a sentence, newest first, with their unit, and the table has a caption and header cells.

Below the desktop width the table scrolls sideways if it must, the six columns stay, and the change column drops (the title still says how many steps improved). The columns always run left to right, newest first. In a right-to-left layout the text and rows mirror, while versions, dates, percentages and signed changes, which are data, keep their order.