I’ve managed to put together about 4 complete articles in the last week to this blog. I used the the GitHub.dev personal website template to generate it based on jekyll templates with markdown blog posts. I like the use of markdown and the ability to just commit a blog post to git for it to be published. The layout of the main page needs rework, so I will try and rebuild some of that with a new layout. All the usual stuff is there, but I need to organize a few other things:

  • experiment gallery of code, a place to show off visual and experimental work
  • easier navigation to blog vs code gallery vs projects
  • comment system? might hold off on this
  • blog needs search, site needs search in general
  • explore alternative layouts and engines usable through github pages

Another prominent feature that I don’t quite see yet in this layout (at this time), is a more prominent way to view the posts. The use of a short title, and a date isn’t quite enough. It might be nice to include a short description, an image preview/gif that would give the website a more “gallery” like experience for navigating. I might try and separate the traditional “blog posts” in the chronological order vs having a preview page of more in depth articles (haven’t quite decided on this yet).

Another frequent thing that comes up is actual gists and embeded p5js code. The workflow for this is usually create some code on p5 or gist, then use the embedded frame. Additional steps should be taken to improve quality such as taking a preview picture, annotating the code, having source references to link to, and being able to write out the different state of an experiment through an embedded editor. Book of shaders does a great job at letting the user actually make changes to several variables to update the live preview of the post (similar to what you would see in a notebook).

Another alternative is to take a look at Observable https://observablehq.com/@observablehq/downloading-and-embedding-notebooks which seems to have a much more fluid environment for creating notebooks.

References