Wrangl

A simple tool that visualised two sides of an argument.

When: Mar 2011
Stage: A prototype
Outcome: Grew into an active site of its own at wrangl.com.

Archived screenshot of Wrangl — Archived screenshot. The site itself is gone; this is the evidence.

Wrangl was a simple tool for visualising the two sides of an argument. People could work together on a Wrangl that showed the shape of a debate at a glance, then drill down into a point for references and links. It was meant for democracy projects, decision making, explaining the differences between similar products, and lots more. I built it in a weekend in March 2011 while the kids were sleeping, ahead of the referendum that May, and it went on to an active life of its own at wrangl.com.

Lineage

Became Wrangl.comGrew into an active site of its own at wrangl.com.

Around the same time

Wake up monsters!Writing · 2011
Cognitive ConsonanceMusic · 2011
Screened - a map visualisation of UK film screening dataWriting · 2011
Stories from an Invisible TownProjects · 2011

Earlier in projects: Pretty-Textmate-Ruby-puts. Later in projects: IVES.

/* No script, no button and no pill: the header sits in the page as the plain bar, every room in the row, and the body keeps its own top padding. */ /* grouped: the same idea, and why this block now names two layouts. Its rooms sit behind the More button, so with no script to open it they have to be a plain second line instead. float needs no equivalent — its bar renders every room already, and its rules below hide .site-more outright. */ :root[data-fx-nav-layout="grouped"] .site-more-button { display: none; } :root[data-fx-nav-layout="grouped"] .site-more .site-more-list { display: flex; position: static; flex-wrap: wrap; gap: 0.5rem 1rem; min-width: 0; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; } :root[data-fx-nav-layout="float"] header.site-header { position: static; width: auto; height: auto; margin: 0 0 2.5rem; padding: 0; flex-wrap: wrap; align-items: baseline; background: none; border: 0; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } :root[data-fx-nav-layout="float"] body.py-8 { padding-top: 2rem; } :root[data-fx-nav-layout="float"] .site-header .site-nav { flex-wrap: wrap; } :root[data-fx-nav-layout="float"] .site-header .site-nav > a { display: inline; } :root[data-fx-nav-layout="float"] .site-more { display: none; } :root[data-fx-nav-layout="float"] .site-header .site-title, :root[data-fx-nav-layout="float"] .site-header .site-title:has(> span) { max-width: none; opacity: 1; margin-right: 0; visibility: visible; }