I've long thought that more can be achieved through greater cross-pollenation between discipline domains, that people should specialise in a little more than one area, that we should explore the possibilities of mixing techniques together in creative and interesting ways, and do it through the play that using highly interactive tools and flexible, modular architecture allows.

Monday, 9 January 2017

Procedural Website? - Part 1

Web
Site Needed

Apparance is at the
stage now where it needs a proper web-site to bring together all the
information accumulating around the project and provide a hub for people to
find out all about it. It's going to
need all the usual stuff; summary pages, a gallery, detailed project information, feature lists,
technical information, contact information, blog, documentation, and contact
information. Something like this:

A prototype Apparance homepage.

There are many ways
to approach creating a web site. It
could be out-sourced, built using an online web-site maker, using offline
tools, crafting from the many kits and examples available, or writing it all by
hand in notepad.

Not having huge
resources available and having hand crafted a few pages in my time I figured it
would be best, at least in the short term to code it up myself. So, given that I'm 'living and breathing procedural' right now, is there any reason not to try and do this procedurally, with Apparance?

I can't see anyone else making websites procedurally! Am I crazy?

Approach

I'm not familiar
with all that is trendy in web development and I'd like to keep things simple
so I'm thinking static HTML pages with CSS styling. I'd like to be able to author page content in
some sort of simple format and not have to be editing html or using any web
design tools to make changes. Any image
manipulation should preferably be handled automatically or with little
interaction. Given this, some
process will be needed to effectively compile the content, images, structure,
and styling together into each page.

Utilities

Content
Processing

Simple format text
files with basic formatting information you say? Sounds like mark-down to me. A bit of digging found a rather impressive command line
utility called Pandoc which actually will convert a plethora of document
formats. By default though passing in
simple markdown text it will spit out an HTML fragment.

Pandoc, by default converts markdown into HTML

Perfect for
injecting into the structure needed around it to form a complete page.

Image
Processing

The most common need
for image preparation on a web page has to be scaling to generate thumbnail
previews, something we're going to need to show off all the visual goodness of Apparance. A well know tool that handles
this adequately is Image Magick. Again a
command line tools with a huge number of features and functions, it comes with
an command specifically designed for generating thumbnails.

Image Magick, great for quickly handling thumbnail generation

Perfect to add to the arsenal of tools for
building my pages.

Automation

Now to the question
of automation; how best to take all this and build pages out of it? Let's look at the requirements.

Generate the common page HTML
and CSS according to the page design.

Launch Pandoc to turn the
page content into HTML.

Launch Image Magick to
generate thumbnails for the images.

Combine the HTML into pages.

Assemble it all in a suitable
file/folder structure for serving as a web-site.

Doing
it wrong

There are existing static web page compilers available (e.g. Hugo) I could use. I could write a program to do it, or come up with something in python or similar scripting languages. But thinking about
Apparance and some of the philosophies behind it I realised that these
approaches went against it on several levels.

First, there was the baking process, the page needed to be compiled
before it could be viewed. Now, whilst any process of assembling a page
requires time to complete, with scripts and command line tools there are still
several steps involved in getting from making a change to seeing the
results. You lose the immediacy of a
truly interactive editing experience.

Second, committing anything to script or code goes against the
data-driven approach, and again, you lose the direct connection between your
design and the results.

We've
seen this before

Having already
worked on interactive editing and text based processing with the material and
shader system in Apparance it seemed like a similar approach could be applied here. Why not use procedures in Apparance to handle
the HTML composition, the control of command line utilities, and the
manipulation of files and the directory structure? It would mean any part of the web-site
could be editing and you would get to see the results in real-time! This was clearly the path to follow.

And So; To Procedural

A few things would
be needed to be added to Apparance's capabilities for us to be able to support
this though:

Extra string handling
functions - we are going to be doing more fancy things than we did with
shader building.

File handling operations - we
are actually going outside the application, to work with files.

An operator for spawning
processes and collecting their output - to allow us to use other tools to
do our bidding.

With all this in
place, we are in a position to start building the site by creating procedures and letting Apparance do the work. Next time we'll have a look at how this went and what it's like to work with. Here's a sneak peek at the editor with the procedure for writing out the HTMLpages.

Coming from a technical and practical upbringing I've always been passionate about computers and electronics; writing programs and building contraptions from primary school age upwards. Studied electronics at university, and working in games development since 1995.