Record the demo instead of filming a screen - #18
Merged
Merged
Conversation
The README's animation was a hand-made recording of the desktop app. It was 880 by 610, scaled from a screen capture, and out of date: it showed the tree layout as it was before the rewrite, so the picture at the top of the README had not matched the program for weeks. npm run demo:record drives the published page in Chromium and encodes the result. The recording is of the thing a visitor can actually click, at full resolution, and regenerating it is one command rather than a screen capture, a trim and a filename with a narrow no-break space in it. The frame holds the demo alone: it sits well below the fold under a sticky header, so recording the page recorded mostly prose with the interesting part half off screen. The GIF is trimmed past the setup, slightly quickened, and cut to 64 colours, which the interface does not notice because it is flat colour throughout. 933 KB against 617 KB before, for a picture that is current and considerably better looking.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The README's animation was a hand-made screen recording of the desktop app,
and it had a worse problem than looking rough: it was out of date. It
showed the tree layout as it was before the rewrite, so the picture at the top
of the README had not matched the program for weeks, and nothing would ever
have said so.
npm run demo:recorddrives the published page in Chromium with Playwright andencodes the result into
docs/demo.mp4,docs/demo.gifand a poster frame.The recording is of the thing a visitor can actually click, at full resolution,
and regenerating it is one command rather than a screen capture, a trim, and a
filename with a narrow no-break space in it.
Staleness stops being something to remember and becomes something to re-run.
Two things the script has to handle
The demo sits well below the fold under a sticky header, so recording the page
records mostly prose with the interesting part half off screen. The script
strips the page down to the demo for the recording.
The demo scales the tree to its finished extent, so on a large graph the
early steps look sparse. It records Kite, which is small enough that the tree
fills the frame and still finds three shapes.
The assets
npm run demo:recordHalf again as large, for a picture that is current and considerably better
looking. The GIF is trimmed past the setup, slightly quickened, and cut to 64
colours — the interface is flat colour throughout, so nothing is lost and it
saved 250 KB. GitHub will not autoplay a video from a repository path, which is
why the README still needs a GIF at all; the site uses the MP4.