Thread by @mathisonian

Now that things have settled down a bit with @ParametricPress I want to share a couple tech tidbits that I found interesting when putting together the issue.

Maybe you'll find them interesting too.

👇

First, the graphics in parametric.press/issue-01/on-pa… were all made with a GUI editor, without ever dropping down into JavaScript to write visualization code

The author, @RicMBianchi, used Apparatus (aprt.us) to create *parameterized* graphics.

This means that the graphic can update visually according to the value that certain variables take on. GIF shows an example of what this editing process looks like:

We then downloaded the graphics and brought them into our article template. This allowed us to rapidly build a UI using @idyll_lang and use it to control the graphic.

All of the buttons and controls shown here are defined in Idyll and reactively update the graphic's parameters

I think this workflow is really powerful. No writing low level graphics code! build dynamic visuals in a graphical editor! Then it is just a matter of wiring things together.

Another thing that we were able to do is embed a domain specific language within Idyll through the creation of reusable custom components.

To write the copy for parametric.press/issue-01/flatl… we were able to utilize this pattern

Here's what the code looks like.

The [Prompt] and [Option] components were created custom for this article, and we were able to nest them to completely define the "choose-your-own-adventure" style interactivity of the piece

While each of the articles were developed in their own repos (see github.com/ParametricPres…), we were able to created a set of shared components and styles that were used across all of the articles.

These reusable modules can be `npm install`'d in any article that needs them.

You can see the source for these on GitHub at the links below:

Shared components: github.com/parametricpres…
Shared styles: github.com/parametricpres…

And the configuration necessary to utilize them:

This gave us nicely access to a set of nicely versioned re-usable site utilities, while still allowing authors to add their own custom components and CSS to their articles as appropriate

It also let us re-use which components designed for a specific article by adding them to the list of shared components. Authors could benefit from each other's work with little friction.

Notice those grouped buttons in On Particle Physics also show up in parametric.press/issue-01/the-m…

For generating the article archives, we were able to set up a script based on github.com/webrecorder/wa…, and run it after each update of an article.

The work of the @webrecorder_io team made the task of generating offline archives into a one-liner

While there is still A TON of room for improvement in the workflow for creating interactive content like this, it is really cool to see various open source tools working together in harmony

...and because all of the articles themselves are open source, we were able to use Zenodo to generate a unique digital object identifiers (DOI) for each article, making everything easily citable

The entire issue is hosted by Zeit Now (@zeithq) which made deploying trivial, and lets us push updates live in a few seconds. They also completely handle the server scaling problem, so we don't have to worry about going down if there's a big blast of traffic

Anyways, I think that's it for now! If you haven't yet, check out the first issue: parametric.press/issue-01/