[chancancode]

For those of you aren't particularly interested in Ember or frontend development in general, here is a tidbit that may be of interest to you.

While revamping the tutorial[1] to showcase the new features and idioms, I worked on this tool[2] to automate the generation of the tutorial.

Every page of the tutorial you see is the output from markdown source files (like this one[3]) which contains executable instructions for the steps. The build[4] system will run these commands and edits the same way an end-user would, capture the output of the commands and put them in the tutorial. It also takes the screenshots by opening a real browser (via puppeteer) and navigating to the actual app that we are building as part of the tutorial.

All of these ensures that the tutorial content and screenshots are up-to-date with the latest blueprints (the files used by the generators), config files, etc, and that everything really works as-expected. It makes it much easier to maintain and QC the teaching materials, but also servers as a very useful end-to-end smoke test to ensure all the moving pieces in the ecosystem (including external components like npm, node, etc) are all working together.

Right now the tool and the tutorial content are in the same GitHub repo, but the code is actually written to be completely agnostic to Ember.js (or JS even). It just runs shell commands, edit files etc. My intention is to separate out the tool to its standalone thing, so more communities can benefit from this approach.

[1]: https://guides.emberjs.com/release/tutorial/

[2]: https://github.com/ember-learn/super-rentals-tutorial/

[3]: https://raw.githubusercontent.com/ember-learn/super-rentals-...

[4]: https://github.com/ember-learn/super-rentals-tutorial/commit...

[thebenedict]

Love it. Keeping documentation screenshots and code snippets in sync with development has been a headache for me on past projects. This is clever!