Micronotes

Micronotes is a compact JavaScript plugin that allows for beautiful{note} According to me. {/note}, clean, responsive footnotes to be added to plain HTML text. All you need to do is add a reference to the script{note} You can either download the script and add it to your website or add a reference to a hosted version of the script (you should do that, it's way easier). {/note} somewhere in your HTML.

Footnotes can be used for citations{note} github.com/generic-github-user/micronotes {/note}, additional information{note} Did you know that Post It notes were invented by accident?{note} www.todayifoundout.com/index.php/2011/11/post-it-notes-were-invented-by-accident {/note} {/note}, or anything else you want. Footnotes can also contain links{note}This is a link.{/note}, images{note} {/note}, custom HTML{note} This is a marquee using the outdated, obsolete HTML marquee element. {/note} (and CSS{note} This is some text.

This text is in italics.
This text is bold.
This text is underlined. {/note}), or just about anything else{note}{/note}. You can put as much stuff as you want into each footnote{note} Example snippet:

The program creates a set number of “nodes,” or points, that are connected to other nodes. These are dispersed randomly around the screen, and are not visually represented, but serve as points to connect with “connections” (which connect the things that are to be connected). There are also a set number of these, which are randomly given set source and destination nodes. Each connection is a bézier curve with 2 control points, stored in a JavaScript object (along with the node data). The control points are determined by performing a random weighted average on the x and y positions of the source and destination node positions (this is why two nodes with very similar x or y positions will form almost a straight line between the two – hopefully I can fix this in the future). Each connection is also assigned an opacity and width value, used for display purposes (the minimum and maximum values for these can be defined by the user in the control panel). All the lines are drawn on the HTML5 canvas with the “bezierCurveTo()” and “stroke()” functions.

To use the program, just open the web page, linked below (and here). It will immediately generate a web with the default settings (5 nodes, 100 connections, 0.1 min opacity, 0.5 max opacity, 0.1 min width, 1.0 max width). To generate a new web, you can refresh the page. To open a control panel with more settings, move your cursor to the left side of the page, and a window will open up from the side (I checked this out on mobile, and it’s a little buggy, but it usually works to just tap once on the left side of the screen. Just keep in mind that the program isn’t designed for mobile devices.). The control panel was made invisible so that if you want to take screenshots of your webs without any clutter in the way, you can. Here you can define how many nodes you want to be generated, how many connections, and the minimum and maximum opacity and width values for the connections. You can also enable “show markers” to see indicators for each node and the bézier control points for the connections (scroll down for more information about this (wow, there are a lot of parentheses in this post)). Refreshing the page will also clear any settings you have changed, so just use the “Generate” button at the bottom of the control panel if you want to regenerate the web without refreshing the page.

From onlyonesandzeros.com/programming/web-another-javascript-program. {/note} - footnotes can even be nested{note} inside{note} of{note} one{note} another! {/note} {/note} {/note} {/note}.

To view the source code for this demo page, press CTRL+U on your keyboard. More information is available in the micronotes README.