The Garden

A collection of notes and side projects, loosely curated, oft-tended.

• CSS Quest Sapling

  

  A fully playable, pure HTML/CSS RPG demo featuring our hero Yogaraptor and absolutely no JavaScript!

  Includes arrow key controls, multiple maps, character walk animations, items you can pick up and use, enemy encounters, puzzles and even some cut-scenes. All without a single line of JS.

  Uses features currently only available in desktop Chrome/Chromium, but everything is standard CSS.

  Write up on the techniques used coming soon, as part of my upcoming "Weird Flex" series.

• Turnto Seedling

  A portable, zero-dependency generator for web-based "choose your own adventure" stories, with as much care paid to the authoring experience as playing.

• Why a garden? Established

  "Digital gardens should be just as unique and particular as their vegetative counterparts. The point of a garden is that it's a personal playspace."
  Maggie Appleton

  "A digital garden is a kind of digital refuge, a retreat to get in touch with your own ideas"
  Tim Rodenbroeker

  With blogging, you're talking to a large audience. With digital gardening, you're talking to yourself. You focus on what you want to cultivate over time.
  Tom Critchlow

  Sounds good to me!

• CSS5 Scroll Effects Seedling

  CSS5 overflow ( spec document , demos ) brings CSS-only buttons and markers, enabling silky smooth CSS-only carousels. But there must be some creative ways to exploit these new psuedo-elements.

  Coming soon… This one turned into "CSS Quest" (see above), but I've got some other weird and wonderful scroll-based creations in the works too!

• Belize Zoo Fonts Established

  

  

  Created by photographing hand-painted signage from around The Belize Zoo and Tropical Education Center and processing the images with GIMP , Inkscape and Birdfont .

  Both fonts were gifted to this excellent rescue centre as a thank you for three wonderful weeks of being an assistant keeper.