description:

Creating this portfolio turned out to be one of the best things that has happened to me recently. I was running behind on publishing this site which pressed me into a decision point wherein I had to choose between using a web framework and building the site from scratch purely in HTML (no Javascript).

The problem with a web framework was that it had been a while since I used one. Since they're made up of multiple layers, I'd have to re-familiarize myself with using a database, defining models, templating, etc. as well as handling the unique problems inevitably rising from each.

Another hurdle I was facing was an aesthetics problem. For reasons unbeknownst to me, I don't grok CSS. Giving elements colors and boarders aren't a problem but I find CSS's spacial model very difficult. I decided that if I was going to be struggling with the aesthetics anyway, I might as well not struggle on their delivery and leave that to the server already running on Ubuntu.

In order to compensate for my poor CSS skills, I choose to leverage the complete lack of aesthetics that the web originally had. I figured that if it was good enough for Tim Berners-Lee and Richard Stallman, then it was good enough for me. I wanted to have some form of computational art so this presented an opportunity to create an animated tree in the style of a time without animation.

The decision not to use a web framework allowed me to encounter the ways in which hand replicating code becomes unsustainable. This gave me a deeper understanding of the logic behind the design of the different parts. By choosing to keep my CSS simple, I solidified my understanding of the underpinnings of both CSS and HTML. I'm in a much better position to make use of both.

challenges and contributions:

Tree: I found the original tree written by Anastasis Chasandras on Open Processing, maybe 2-3 years ago. At that time, it performed very poorly when compiled to Javascript by Processing.js. I spent a fair amount of time figuring out what the absolute minimum number of Tracers (the main object) would be so as to save on memory. Tracers multiply according to a few different probabilities so the final number of Tracers is always an unknown. As such you need to balance the rate at which the Tracers are added with the rate they are removed.

I also added a barrier on the probability that a branch would divide. I encouraged (read: constrained) my tree to not stray too far from the base, and to choose a starting angle and step size that would cause it to curl (as opposed to a long arch). I wanted the tree to blossom more fully, so instead of blossoming on the tips only, I had to deposit the letters along the branch at random intervals. Speaking of which, I changed the blossom from a circle, to a square (had period where I thought it would be more digital looking), to a letter from a word.

PJAX-Standalone: In order to not have URL's with .html endings, I leveraged the fact that Apache servers will default to using index.html when given a URL without a filename (/location/of/page/. Since my aesthetics were so barren, I figured I could provide the illusion of a more asynchronous experience. Unfortunately, requesting a page meant that the Processing.js sketch would run again, thereby ruining the effect. I would have to set up some asynchronous way to get the other content, and that came in the form of thybag's PJAX-Standalone. Using it is so simple you'll think you're getting away with cheating. I simply told it what container to replace, which links to exclude, and that was it.

FancyBox: Only one thing remained in the way of a quote unquote seamless user experience, the images opened in new pages. I was fortunate to find the Fancybox Library to create image modals with. Again, it was quite simple. Unfortunately, using that library causes the page to shift ever so slightly down and to the right. Not wanting to make perfect the enemy of good, I was content to leave it there for the time being.

CSS: My friend Charlie DeTar also gave me some great advice which ended up clarifying my model of CSS. Not incidentally one piece of advice had to do with the CSS property "clearfix".

Footnotes: I inspected Wikipedia and used their structure and conventions.

lessons:

• Be careful of any directive that modifies position including width and height.
• Imagine the page you're building as a very long magazine layout.
• Replicating back-linked footnotes is tedious. Templating languages and partials are very useful.
• Handwriting all of your text into the document isn't as good as a form field, model, and database.
• Randomness is finding the right balance which is still slightly unbalanced.
• General trigonometry, and the foundation to learn more.

future directions:

• Instead of drawing tracers, separate the branches and the blooms into objects. This way you can have them obey certain properties of nature such as leaves falling, or branches in the wind.
• Add a time element such that the size of the letters and color are mapped onto time such that when you load the page, the tree is seasonally appropriate to the exact day.
• Re-write into pure Javascript (the very exciting P5.js, and mostly likely coffeescript).
• Grab text for tree via Twitter or some other stock of text. Perhaps a hashtag tree that grabs a tweet per day and stores it so that the text of the blossoms can change with the date as well.
• Format unordered lists with list-like qualities (bullets, roman numerals, letters)