An html page by Leon Bambrick (2019) that uses CSS magic to expose the full tag structure underlying the page.
In this form not very practical[1] [2], but can come handy for visualizing dynamic JS-generated content? In any case the philosophy behind it — and this particular application of the term “brutalist” — resonates with the goals of malleable, or at least explorable software:
<p>A different but somehow related topic I like is <a href="https://en.wikipedia.org/wiki/Brutalist_architecture">brutalism</a>, in particular, this often overlooked aspect:</p>
<blockquote>Another common theme in Brutalist designs is the exposure of the building’s functions.</blockquote>
<p>…the tendency to <strong>make the internal external</strong>, and reveal the secrets of the building, in a somehow… <em>brutaful</em> way. ;-).</p>
Reactive HTML notebooks ⋅ Max Bo uses this technique + contenteditable to build a neat reactive env — while demonstrating how it’s all built, editable <script> by <script> [1] Here limiting the technique to certain tags made it useful without being too verbose.
Browser extensions doing something related, exposing page functionality that is there but frequently left undiscoverable: Display #Anchors, Display Access Keys
This can display CSS source; if you want to display computed CSS values, see this elaborate hack.
[2] Reading/editing HTML in-place is rather verbose & hard on most eyes , but with lighter syntaxes, the UX of seeing the markup while editing may be superior to fighting invisible WYSIWYG structure(?!) In-place rendering has been popular in some markdown circles ever since #StackEdit… [CodeMirror & Emacs are handy substrates for building such interfaces, as both support variable fonts and flexible syntax highlight.]
I’d used several EDA tools that featured a visible REPL pane with running Tcl commands equivalent to the actions you invoke via the UI. Could say that is “brutalism” in service of end-user programming.
Also interesting: the reference to Naked Object, a term I hadn’t seen before although I have been practicing something very similar recently (adopting principles 1 and 2 but inverting principle 3).
I have memories of using the Wordperfect word processor in the mid/late 1990s and the sudden transition from WP to Microsoft Word. And while WP was by no means a user-friendly program, I did very much miss its “reveal codes” mode, which would show you its markup syntax so you could fix formatting errors. Word and Rich Text Format on the other hand, you just had to live with invisible, unchangeable codes doing mysterious wrong things. The trick/habit of pasting Word or HTML text into Notepad to strip formatting still lives on today.
I feel like Markdown editors are trending in this invisible-deep-magic direction too and I don’t entirely like it. Wordpress’s Gutenberg editor is one extreme of this, and it gives me a sense of anxiety because any punctuation might do random weird things like inserting entire widgets.
I realise a lot of my tinkering with syntaxes is very much in the “brutalist” direction: trying to find a very lightweight markup structure which could be edited and parsed directly with as little magic as possible.
This has suddenly given me a new idea which I might try applying to my “SUSN” experiment. Just brackets, but with slash immediately after an open bracket (and nowhere else) indicating a “type”. A second slash in this position (and nowhere else) escapes the first. Would be very like TeX, but this maybe avoids some nuisances caused by needing too much escaping. Going to try it and write it up.
[Maybe this editors tangent is off-topic, as we’re not really talking of software malleability, merely transparency of specific built-in structures. Unless you take this angle Cyrus Omar once said :
I think the way to design an authoring environment is to have it based in a programming environment where you have the whole richness of mathematics there, and then you layer on top of it the graphical elements that allow you to construct values of type string by just typing and construct values of type image by loading them from disk or something like that. But fundamentally, they’re still those values then they can be manipulated programmatically.
but imho transparency–malleability is a continuum. And I must rant ;-]
FWIW, Word has long had a “show nonprinting characters” ¶ toggle, Ctrl+Shift+8. (dunno if it had it in WP times)
I found now they also have a more advanced “reveal formatting” pane, Shift+F1.
… The trick/habit of pasting Word or HTML text into Notepad to strip formatting still lives on today.
Totally! Ctrl+Shift+V is sufficient in many programs.
The one thing that always drove me crazy in WYSIWYG, are continuity of numbered lists.
I like writing multi-paragraph items, which is easy in LaTeX or markdown but not directly expressible in most WYSIWYG
(beyond Shift+Enter faking which is handy but limited, still being part of one paragraph).
what you do is insert more “items”, indent them to become sub-items,
then toggle off their numbering —
and pray that the outer numbered chain remained unbroken.
It’s pretty easy to break into separate lists, re-starting from 1 — and then I know no way to “stitch” them back together other than re-creating each item after that by tedious copy-paste… :-((
Showing →·¶ chars certainly never allowed to see list continuity, dunno about Shift+F1 but I suspect not?
At its root, this is a deep model mis-match to what I want to do — Word and LibreOffice consider bullets a per-paragraph property, and I want items to contain paragraph(s). But there are some hidden pointers(?) in their model that can chain numbered items together despite intervening “non-list” paragraphs, and that state is not manipulable. /rant
WYSIWYG text editors are a nice example of a much wider UX issue with computing: figuring out in which situations magic (i.e. opaque behavior) is desirable, acceptable, tolerable, and inacceptable. The overall tendency of the industry has been towards more magic, which often went too far.