Long-term usable HTML and SVG


Making lasting documents doesn’t have to contradict agility, but conflicts occur.  Of that I was reminded when switching index.html of the technical User Guide of Adj (aka ElasticDraw) from XHTML to HTML5, on a branch.

Traditionally building for endurance

For more than a decade I have preferred XML compliant documents, such as XHTML, because one

  • can query one or many documents with XML tools (XSL, XPath, XQuery, XML databases) without need to serve documents from a specific server (which would have to be running), and
  • can query content without documents having to be open inside a browser (which regularly change with version updates), for example as files on disk.

Documents being pure data means Read the rest of this entry »

ElasticDraw – new name of Adj


ElasticDraw is easier to understand.

One purpose of ElasticDraw is drawings adjusting “themselves”, hence its original name Adj.

The JavaScript library keeps using the shorter symbol name Adj, for now at least.

The markup namespace prefix remains adj.

ElasticDraw is a grown-up name for Adj.

Read the rest of this entry »

Refreshingly irregular


Adj command telescopicTree allows free-form layouts: Put something here, then something to the left, then something below it, then something to the right of the first item, etc..

An Example telescopicTree

An Interactive Example Adj telescopicTree

A bit as if you were drawing on a whiteboard.

In telescopicTree Adj’s elasticity works – Adj’s raison d’être.

Within and around telescopicTree Adj’s ability to nest also works – a signature feature.

It doesn’t have to be exactly to Read the rest of this entry »

HTTP request illustration


HTTP requests are carriers of information in modern systems. Illustrating requests is within Adj‘s purpose.

Adj rcGrid displaying HTTP request headers

Adj rcGrid Used To Display HTTP Request Headers

Today’s attached example uses Adj command rcGrid with text for a formatted display of request headers.

Adj is about different layouts and constraints than either HTML or plain SVG. Adj for example offers Read the rest of this entry »

Improving Adj constraint algorithms


Today’s attached example provides a glimpse at algorithm improvements an individual could contribute.

Explain circularList Option packArc

Explain Adj circularList Option packArc

You can click the Explain checkbox and drag the slider knob. Documentation of command circularList is provided online.

Of the source commit of command circularList option packArc, essential code is Read the rest of this entry »

An interactive component in Adj

Lean Example Adj sliderKnob

A Lean Example of Adj sliderKnob

Adj is named so because it adjusts. Originally envisioned Adj adjustment would occur when subjects of illustrations change, such as during product lifecycle. While calculated in a fraction of a second, Read the rest of this entry »

Arrows representing data flow


The open source Adj framework has a new command pathArrow.


Adj pathArrow Illustrated

Adj Command pathArrow Illustrated

Command pathArrow takes a path given as arrow shape and stretches and bends its shaft along another path given to follow.

Command pathArrow becomes most useful in conjunction with other features of Adj, such as commands vine, connection, rider and more:  Automatic adjustment can work its magic where the arrow goes – relative to elements – and what it looks like.

From a designer point of view, pathArrow enables better control of width, color, transparency, and end shapes.  Even computed width is possible.

One Read the rest of this entry »