-
Notifications
You must be signed in to change notification settings - Fork 30
/
html.html
174 lines (119 loc) · 7.53 KB
/
html.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
<html>
<head>
<title>This page is a truly naked, brutalist html quine.</title>
</head>
<body>
<h1>This page is a truly naked, brutalist html quine.</h1>
<p>One of my favorite things is to misuse technology in creative ways. Breaking the rules without breaking the rules.</p>
<p>For example, a hobby project I built long ago was <a href='https://github.com/secretGeek/dod'>DOS-on-dope</a>, a working Ruby-on-rails parody, billed as <em>the last batch-file based MVC framework you'll ever need</em>. And there was <a href='http://www.secretgeek.net/console_log'>a console.log() adventure</a> in which you played an old school console-adventure-game from inside the chrome developer tools.</p>
<p>The world of esoteric programming is filled with examples of people stretching the rules to breaking point, and misusing technology in creative ways. In particular (for example) I love <a href='http://wiki.secretgeek.net/quine'>quines</a>. Quines are programs which output their own source code. Life is a Quine.</p>
<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>
<p>A similarly intriguing idea which has fallen into disuse is the idea of <a href='https://en.wikipedia.org/wiki/Naked_objects'>naked objects</a>, wherein:</p>
<blockquote>The user interface should be a direct representation of the domain objects.</blockquote>
<p>Putting all this together I decided to make a truly naked, brutalist html page, that is itself a quine. And this page is it.</p>
<p>Viewing <a href='https://raw.githubusercontent.com/secretGeek/html_wysiwyg/master/html.html'>the source</a> of this page should reveal a page identical to the page you are now seeing. Nothing is hidden. It's a true "What you see is what you get."</p>
<h2>How it works.</h2>
<p>Did you know that the rules of html and css allow you to make <strong>every</strong> element visible, even elements like 'title' or 'style' or 'script', that are normally hidden from view? Those are just elements like any other. You can expose them <strong>all</strong> like so:</p>
<style>* { display:block; }</style>
<p>With that snippet of code (which is <strong>not</strong> a snippet of code, but an <strong>actual</strong> style block itself!) you can now see every element of this page, including that style block, the html and title tags, etc.</p>
<p>It does have one downside: every element on the page is now a "block" element, even some which should be "inline", such as "code" and "anchor" elements. We can correct this like so:</p>
<style>a,code,em,strong {display:inline}</style>
<p>To give the code a more 'view source' feel, I've also applied <code>monospace</code> fonts, and a generally simple and consistent style to all elements, using a "*" selector, like so:</p>
<style>*{ font-family:Monospace; margin:1.5em 0; padding:0; text-decoration:none}</style>
<p>So far I've put style declarations all on one line, because ordinary html refuses to treat line breaks as "br" tags. But there is a way to make line-breaks display as line-breaks, and that is with this piece of styling:</p>
<style>
style, blockquote {
white-space: pre-wrap;
}
</style>
<h2>Make the internal external.</h2>
<p>The next trick is to make the internal external. We can start by ensuring that the tags themselves, such as paragraph tags, are exposed in their stark, brutal, beauty:</p>
<style>
p::before {
content:'<p>'
}
p::after {
content:'</p>'
}
</style>
<p>That works for "p" elements, but do we need to have custom styling for <strong>every</strong> element? If there was a way to output the "name" of a tag in html, then we could reduce all of the necessary style rules above to something like:</p>
<blockquote>
*::before {
'<' name() '>'
}
</blockquote>
<p>And...</p>
<blockquote>
*::after {
'<\/' name() '>'
}
</blockquote>
<p>But alas there is no "name()" function (yet!). So we are forced to generate a chunk of style information like this (via <a href="https://nimbletext.com/Live/1105905186/">NimbleText</a> of course)</p>
<p>Please scroll happily past the next 28 offensively repetitive lines...</p>
<style>
html::before {content:'<html>'}
html::after {content:'</html>'}
head::before {content:'<head>'}
head::after {content:'</head>'}
title::before {content:'<title>'}
title::after {content:'</title>'}
body::before {content:'<body>'}
body::after {content:'</body>'}
h1::before {content:'<h1>'}
h1::after {content:'</h1>'}
h2::before {content:'<h2>'}
h2::after {content:'</h2>'}
p::before {content:'<p>'}
p::after {content:'</p>'}
pre::before {content:'<pre>'}
pre::after {content:'</pre>'}
code::before {content:'<code>'}
code::after {content:'</code>'}
a::before {content:'<a>'}
a::after {content:'</a>'}
aside::before {content:'<aside>'}
aside::after {content:'</aside>'}
blockquote::before {content:'<blockquote>'}
blockquote::after {content:'</blockquote>'}
em::before {content:'<em>'}
em::after {content:'</em>'}
strong::before {content:'<strong>'}
strong::after {content:'</strong>'}
</style>
<p>Some elements are a little trickier because they have attributes. Consider for example the "anchor" which often has a <code>href</code> attribute. We <em>need</em> that attribute to be visible, including its value. This is done like so:</p>
<style>a[href]::before {content: "<a href='" attr(href) "'>"}</style>
<p>The <code>attr()</code> function, see <a href='https://developer.mozilla.org/en-US/docs/Web/CSS/attr'>mozilla docs</a> is a nifty trick, "supported" since CSS 2.</p>
<p>The only other style that is special is "style" itself, which has to include an escape character to avoid being taken literally.</p>
<style>
style::before {content:'<style>'}
style::after {content:'<\/style>'}
</style>
<aside>I like to think that may be a parser bug created by browser developers who did not suspect that people would engage in such an atrocity.</aside>
<p>Finally to reduce the visual weight of the before and after pseudo elements we can give them a soft purple color and a low weight font:</p>
<style>
*::before,*::after {
color:rgba(136, 18, 128, 0.5);
font-weight:100;
font-size:1.0em
}
</style>
<aside>A different though similar thing I wanted to do was to make a "markdown.css" file that displays html as markdown. Fortunately I found that some other twisted person had <a href='https://mrcoles.com/demo/markdown-css/'>already done exactly that.</a> Nice work Mr Coles.</aside>
<p>Finally, because I believe brutalist design, even when applied to truly naked brutal html quines, is about function, not about deliberate ugliness, I'd like to apply these humble styles that improve the readability of this brutiful missive.</p>
<style>
html {
max-width:70ch;
padding:2ch;
margin:auto;
color:#333;
font-size:1.2em;
}
</style>
<p>...they're derived from <a href='https://jrl.ninja/etc/1/'>"58 bytes of css to look great nearly everywhere"</a>.</p>
<p>One last thing. Although this idea has bounced around in my head for a decade, the thing that reminded me to pipe it into a file was seeing this piece of "Code as Art" from Geoff Huntley: <a href='https://noyaml.com/'>no yaml</a>. Bring back the world weird web.</p>
<p>Kind regards</p>
<p><a href='http://secretGeek.net'>Leon</a></p>
<p>p.s. <a href='https://github.com/secretGeek/html_wysiwyg/'>source code here</a></p>
</body>
</html>