Picowiki

This document was conceived as a picopedia. This means that you can view sections individually, so that they look like a small webpage, or all together, so that it looks like a huge article of little entries. According to technology nomenclature as of 2011, this would be considered an SPA or Single-page application.

I suppose that I was influenced by TiddlyWiki, which I first saw used by Garrett Lisi in 2007. Unlike TiddlyWiki, this document is source edited, and uses jquery.hashchange but should also degrade gracefully. You could also think of this as a weblog that conforms to the neutral settings and sticky slope design principles. But since it's more like a wiki, there is no syndication feed.

The picowiki source is very simple. You only need a stylesheet to set div to not display and div.selected to display as block, and the following Javascript:

$(function () {
   $('div').each(function() {
      $(this).attr('id', $(this).attr('id') + '_')
   }); 

   $(window).hashchange(function () {
      $('.selected').removeClass('selected'); 
      var id; if (location.hash) id = location.hash + '_'; 
      $(id || 'div').addClass('selected'); 
   }); 
   $(window).hashchange(); 
});

Or in CoffeeScript:

$ ->
   $('div').each ->
      $(@).attr 'id', $(@).attr('id') + '_'

   $(window).hashchange ->
      $('.selected').removeClass 'selected'
      id = location.hash + '_' if location.hash
      $(id || 'div').addClass 'selected'

   $(window).hashchange()

And this CSS:

h1 { display: none }
h2 a { color: #000 !important; text-decoration: none }
div { display: none }
div.selected { display: block }

About the Picowiki

Picowiki