candle's blog

low tech template

following on from domino, i made a template that i can use whenever i want to make a new standalone web tool. i have used it for add-bitsy-audio, bitsy-muse-ui and flicksy2

the thing these tools have in common is that they exist as single standalone html pages written in plain javascript

this format is important to me as a way of making the tool legible to and remixable by other people

a single html page can be much more easily saved locally and exchanged with others

writing directly in plain (not-machine translated) javascript means the code can be modified in-situ without any special build process

however, i find this format unwieldy for prolonged development of the entire codebase

it is a lot easier to navigate the code when it's split into (somewhat) modular files

html is really noisy and i prefer to write it as .pug and then convert it to html (unlike many javascript build processes, the result looks as if it was human-written)

it is also convenient to have tools for automatically refreshing the page when you make changes, and for easily publishing the page

i have also included a configuration file that tells my editor (vscode) how to attempt to provide autocompletion for the javascript--something that makes programming much easier for me

the format and template is simple enough that i think it could probably be useful to other people who want to move beyond just editing a single html file directly in the text editor

the usage is as follows:

the "src" folder contains "index.pug" which defines the html and references all the css and javascript files to be included

the "./build.cmd" command runs a tool to generate the final html file with everything bundles

the "./watch.cmd" command runs a tool to open the browser and rebuild and refresh whenever the source files change

the "./publish.cmd" command runs a tool to upload the built page to neocities