Meta Note

This is the meta note to this entire site. It narrates how this idea came about. Here you’ll find an in-depth walk-through of the site.

Inspiration

I discovered the idea of the Digital Garden while roaming Maggie Appleton’s site. This was around the end of summer 2020. I had just created my blog and was looking for a way to add Tuftesque sidenotes to posts.

Further reading led me to Andy Matuschak’s site, which I believe is the origin of this theme, and eventually to Aravind Balla’s notes. I’d been thinking of taking computable notes using Wolfram Notebooks, and Aravind’s layout seemed ideal for what I had in mind. I like the idea of computational notebooks and I use them for note taking. With this medium, I’m exploring new ways of extending Wolfram Notebooks.

Wolfram notebooks would make such a great computable notes app.

— @m_arti, February 7, 2020

I like how plain and simple the layout is, and the seamless linking and transitions between notes. I also like that I can do my note-taking inside a Wolfram Notebook and publish it straight away. Notebooks are versatile and dynamic. A Wolfram Notebook can take the form of a formal document or a computational essay. Cells can be hidden automatically and only revealed when hovered over. One can set a background of any colour. Youtube videos, Soundcloud tracks and Bing maps can be embedded. These are just a few things one can do with them on the web.

It’s possible to create a notebook-centric version of this theme. Pages will essentially be embedded notebooks (Julia, Jupyter, Wolfram, etc.). For Wolfram Notebooks, docked cells can hold tags and other meta information on each note. There’s a potentially more serious issue: should Wolfram Cloud—for instance, which hosts Wolfram Notebooks—someday collapse, so shall the entire theme. Wolfram Notebooks aren’t currently so widely used as to be hosted by third-party organisations.

How it works

• Framework: This site is built with Gatsby, which claims to be “the fastest frontend for the modern web.” It’s hosted on Netlify. There is an RSS feed and a sitemap.

• Design/Style: The original theme is here; my version has some edits. Styling is done with Tailwind CSS—speed and simplicity.

  For dark mode, I use a Tailwind plugin called Nightwind. It simplifies the handling of colours that change when switching between light ⇄ dark modes. I give your device’s dark mode setting precedence—changing it on your device will override that of this site. Click/tap this button to toggle: ◑. I use use-sound, to play a short audio clip whenever the buttons are clicked.

  To match the style of embedded Wolfram Notebooks to that of notes, I use a stylesheet. The matching isn’t quite exact—e.g., this site uses the font ‘SF Pro’, while notebooks use ‘Source Sans Pro’. To stylise a notebook, I run the following from within that notebook:

  SetOptions[EvaluationNotebook[],
  StyleDefinitions -> Import["https://wolfr.am/U7U6ZSd2"]]
  

• Notes: This thing you’re currently reading is a note. Notes are .mdx files. MDX combines the strengths of Markdown and JSX (an extension of Javascript for creating React elements). Here’s a brief demo (from within this note) of how both can be used:

  — Markdown:
  *Italic text in Markdown. Default background.*
  Italic text in Markdown. Default background.

  — JSX:

  <div style={{fontStyle:'italic', backgroundColor:'seagreen'}}>
    <p>Italic text in JSX. Sea green background.</p>
  </div>
  

  Italic text in JSX. Sea green background.

  — JSX + Tailwind:

  <div class="italic text-white bg-indigo-500">
    <p>Italic text in JSX. Indigo background.</p>
  </div>
  

  Italic text in JSX. Indigo background.

  Images are rendered with gatsby-plugin-image, and thanks to Lauren Ashpole’s react-inner-image-zoom, you can click on an image in a note to zoom.

  

  Banana tree (Martins Dogo, 2020)
  Watecolour and goauche on paper.

  One of the cool things about this is that you can zoom multiple images in multiple notes, at the same time.

• Notes graph and search: Clicking on the ⁘ button shows a graph of all notes; credit to Mathieu Dutour for creating this very useful component. Thanks to Algolia, you can search for notes by clicking the ⊹ button.

• Definitions/Jargon: You may have noticed that some words (with a ? aloft) have an attached definition that pops up when you hover over them, e.g. tesseractTesseract The tesseract is the hypercube in , also called the 8-cell or octachoron. See Mathworld entry. and HypercubegraphHypercubeGraph HypercubeGraph[n] gives the n-dimensional hypercube graph . See Wolfram Documentation.. These are created using a Gatsby plugin rather appropriately called jargon.

• Math: MDX makes documents easily customisable. You can render mathematical text and symbols using ${\KaTeX}$—$9 × 8$ becomes $9 × 8$, for example.

• Embeddings: I embed Wolfram Notebooks and other items from various sites such as Soundcloud and Vimeo using iframe.

Why this way

• Learning: Life-long learning. The goal of this site is to learn from/about the things I write and through the process of doing so. Additionally, I’m learning some skills—web development/design, Javascript, etc.—through the process of adding features to the site and maintaining it.

• Curation: Of interlinked notes, ideas, knowledge, questions, etc. that I find interesting. But also of computational artefacts which evolve.

• Simplicity: At least, by way of presentation and interaction. Notes are intended to be short and simple. If a note matures into some lengthy disquisition, it ideally should be moved to my blog. There are several features here but each one has a purpose. I’d like to think that this is the least simple note you’ll come across, as it demos all the features. Embeds, for instance, are one source of complexity, because the embedded object introduces its own interface, etc. However, within notes, I may need to link dynamic information.

Aspirations

• Automate refreshing of meta notebook.
• Make internal links in embedded notebooks open as a stacked page, and not as a new page in the same/new browser tab.
• Create a Wolfram Notebook version of this theme as I described above.

Meta notebook

This is a notebook which analyses the contents of site. For now I’ll be updating its contents manually. Though in the future I might make it auto-update say, once every week, or whenever I add new note.