Clay (short for C Layout) is a high performance 2D UI layout library

...And the three nav links are made via empty, transparent <a> containers absolutely positioned over <div> text. Focusing, therefore, has nothing to read.

N.b both left- and right-clicking activates these anchors, because navigation is implemented as a delegated `mousedown` event on the document.

EDIT: It does work in Firefox for Android!

btw, gtk is based on tcl/tk which i believe is the, or one of the, original auto layout engines

I wonder how we can stimulate "expert" tools and systems for those who don't want to take the greedy path of least resistance, and are tired of painting themselves into corners that way.

I always thought that Apple should have really pushed the whole "Applescript Studio" thing so as to create something even better and more approachable than Visual Basic --- it could have been a true HyperCard replacement.

First, expectations and requirements went up. Laying stuff out with a mouse and snap-to alignment guides is ok for simple UI, but the more complex the design, the more I would end up fighting the vector-art style design interface. I remember staying up late fixing pixel alignment errors in nib files. Often you would need to move objects around to inspect another underneath and then play undo games to get things back exactly where they were.

The interesting parallel here is that the designers were doing all the designs in vector art apps, and were also frequently missing dynamic aspects of the design requirements.

It was one thing to design complex dialog boxes for desktop; think of a photoshop filter control pane. You target a minimum size screen, and then work with a fixed pane and lay things out. When the iPhone came out, IB worked ok for early versions and stock components. Screens were crowded but fixed width.

Once bigger screens came out, more designs started needing variable width layout computation. The APIs for dynamic layout were (as I recall now) more subtle than they sounded in the docs, and I recall joining several teams that misused them. “sizeToFit” and “sizeThatFits” were two culprits. Perhaps it made more sense in the simpler NeXT days, and perhaps the docs degraded. If you didn’t read Apple’s “Programming Guide” docs, it was hard to know how these things were supposed to work together, and those were like mini books. The guides got increasingly ignored as the iPhone’s UIKit took center stage. I was always a fan of NSAutoresizingMaskOptions but rarely saw others use them.

Second, modern version control made the binary nib files unmanageable, and merging the xml xib files was also awful.

Third, and to the parent comment’s point, there were quality problems with Interface Builder. New stuff got heaped on every year. The data model was proprietary but looking at the xml clearly just got more complicated and version-encumbered over time.

In summary, it is tempting to glorify the original NeXT tools, but I never used them. I started toying with IB in 2004. It never felt like a brilliant system because I couldn’t express the underlying logic of designs in the visual box dragging paradigm. Ironically auto layout pushed me further towards UI in code. But to each their own.

This seems to have originated in something called Visix Galaxy, and supposedly done better there than in Interface Builder. See here: https://wiki.c2.com/?SpringsAndStruts

I tried finding any documentation on this tool/SDK, but no luck. Any one else has any more information on what this Galaxy looked like?

I think flexbox and grid handle a good chunk of what you'd want here, but having to handle constraints at the "group" level. Either flexbox, so the browser finds the best way to place elements into a line based on your rules, or grid for 2 dimensions:

  boxes {
    display: grid;

    /* there are only 2 columns, 100px each */
    grid-template-columns: 100px 100px;

    /* all rows are 100px tall */
    grid-auto-rows: 100px;

    > * {
       /* All children take up 1 col, and 1 row */
       grid-column-end: span 1;
       grid-row-end: span 1;
    }
  }

  blue-box {
    /* blue-box must start at col #2 and row #2 */
    grid-column-start: 2;
    grid-row-start: 2;
  }

The style in the screenshots reminds me of KDX[0] from Haxial.

[0] https://wiki.preterhuman.net/Haxial_KDX_(software)

(otoh when i try to load the web page it doesn't work at all, not even jankily, if we're talking about https://www.nicbarker.com/clay)