Thinking of what to remix for this assignment, I was drawn to an audio piece I could work on or remix some sort of generative creative art (No not machine generated, I mean procedural rules that are hand made to then create a work of art.). But I simply ran out of time. So I thought it would be easier to remix my own version of the side-notes I references in where to from here. The goal is to create a clean and straightforward way to reference work in my writing, as well as notes, in a way that adds some interactivity for the reader. It should be clear, clean, fast, and easy to make sense of without interrupting the reading. And these should hold true no matter what sized device the reader is using.

My go to resource was the excellent article on gwern.net which introduces their design philosophy. They introduce the tufte-css style as a straightforward and lightweight implementation as well as their own custom library sidenotes.js. From there I browsed the net for other developers working on their static site. All in all I found the following implementations:

• Tufte-CSS: Efficient and straightforward, though not naively tailwind or easy to adapt to my style. I like how it worked out of the box and does provide full functionality without interrupting the reader. I highly recommend as a drop in solution. However I was not really a fan of how it handles slim layouts and I had a hard time adapting it.
• Sidenotes.js: In principle a great solution with high functionality, it is pretty and adaptable. However, it caused dependency errors that my non-CS head could not bypass and so I put it to the side, assuming it probably does more than I need.
• jQuery.sidenotes: From the screenshots looks great but I don't want the overhead of another framework on my mind.
• fabian writes solution: Aha! Someone who explains their thoughts and development with code, images and gifs!.

I initially tried to adapt the Tufte implementation as it worked from a quick copy paste. The CSS quickly became as mess as I got my hands into the details, changing elements, colours, and worst-of-all, logic. Turns out that simply moving an html element to a new place is not easy when you are not well versed in how it works. I decided it was time to start from the ground up beginning with sketches (Fig. 2). Rather than adapting my oppositional CSS, I decided to remix Fabians solution as it made the most sense.

I drew inspiration on various static sites scattered over the web, and enjoyed how notes look when they have a vertical leading line to keep cohesiveness. I had previously enjoyed the style some people add to their blogs with custom asterisms which attracted me to obelisms for margin annotations.^⊹ Keeping the notes in the margin, I would allow two types of marginal: The reference using a numerical citation style, and notes which would be a simple glyph. Remixing Fabians code in my framework was easy once I got a grasp on the process. Each note element is a flexible container with two halves: the glyph and the content. To get the leading line I simply add a border above the glyph half and to the left of the content half so that it matches the total size taken up. You might have noticed them already on the right, but here's one below for clarity.

After writing this, I realized that the 🙜 character loads only on some browsers which means I need to find a more uniform symbol. This means also a less floral option for one that is less decorative, that way it is more likely to be rendered on any platform. I browsed w3schools to find some options that rendered on my phone: ☼, ℵ, ⋇, ⊹, ⨳, ⤦, and ↗. None of these provide the slight floral/earthy-ness that I liked with my first choice, however I settled on ⊹ for its simplicity, it matches my site theme so far.

It comes down to adding a second column next to my main content, and positioning the column depending on the width of the device we are using. For smaller screens, all notes simply load one after the other in the column which is put below the content. But on larger displays, the column is allowed to exist on the right side. To get each note in line with the content, I borrow Fabians trick to offset each element according to the "parent" reference in text that it belongs to.^⊹ There is a little nuance here to first of all detect if there are any notes on the page (otherwise why would you want to loose the right margin real estate?), otherwise no need to add this margin, then secondly keep track of the positions of the references. As it stands right now, I haven't implemented numeral references which are needed for any real citation tracking, however I hope it will drop in to the current code nicely. Long term I would like to add a hover effect to highlight the relevant note and an easy method for adding figures in the margin like Tufte does. I think this remix turned out well, I was able to peruse the net for existing ideas that inspired me, and drill down on a few examples that I could remix with attribution. This isn't the end of the process, but a good start to a new feature that I hope will do some heavy lifting.

I decided to implement the numerical citation style by making a wrapper of my sidenotes code that uses CSS to generate and increment a counter. Check it out! This is an example citation. ¹

I decided to implement the numerical citation style by making a wrapper of my sidenotes code that uses CSS to generate and increment a counter. Check it out! This is an example citation. ²