/
index.html
501 lines (443 loc) Β· 25.7 KB
/
index.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
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
<!doctype html>
<html lang="en">
<!--
βββββββββββββββββββββββββββββββββββ
β WEB β
β PAGE β
β x β
β xx xx xx <URL> β
β xx xxx xxx x β
β xxx xxx x <URL> β
β xx xx xx β
βxxxx xxx xxxxxx xxβ
β xx xx xxxx β
β xxxx xx β
β xxxxxxx xxxx β
β <URL> xx xx β
β xxx xx β
β xxx xx β
βββββββββββββββββββββββββββββββββββ
a view source web
Garry Ing
issue 03, spring 2024, the html review
Welcome to the index.html file
-->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>a view source web</title>
<link rel="stylesheet" href="/css/style.css">
<meta property="og:title" content="a view source web">
<meta property="og:type" content="website">
<meta property="og:url" content="https://viewsource.info">
<meta property="og:image" content="https://viewsource.info/img/preview.png">
<meta property="og:image:alt" content="A patent drawing of a landscape with url tags in the sky">
<meta property="og:description" content="reflections on view source by Garry Ing. the html review, spring 2024">
<meta name="description" content="reflections on view source by Garry Ing. the html review, spring 2024">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://viewsource.info/img/preview.png">
<meta name="twitter:url" content="https://viewsource.info">
<link rel="icon" href="/favicon.ico" sizes="any">
</head>
<body>
<main>
<!-- start of the content -->
<article>
<!-- header area -->
<header id="title-content">
<div class="measure-content">
<div class="pv5">
<!-- header image -->
<img
id="title-image"
src="/img/landscape.png"
alt="A patent drawing of a landscape with url tags in the sky"
width="1200"
height="799">
<h1 class="normal monospace title-content-heading lh-solid mv5">
a view source web
</h1>
<h2 class="normal copy-content mb1">Garry Ing</h2>
<h3 class="normal copy-content mt0 i">
issue 03, spring 2024,
<a href="https://thehtml.review/" target="_blank">the html review</a>
</h3>
</div>
</div>
</header>
<!-- start of text content -->
<div class="measure-content">
<p class="copy-content">
In the Fall of 2000, after the panic of the <abbr title="Year 2000">Y2K</abbr> scare and the
collapsing dot-com bubble, I sat in front of a Macintosh desktop
computer running a program called HyperCard. I created stacks of
virtual cards which I, or anyone at the computer, could click
through to freely explore. I recall that navigating my stack from
first card to last made little sense. Each card was a fragment of
some concept I was thinking through with the program. Linking cards
was my first impressionable encounter with the concepts of
<a href="https://en.wikipedia.org/wiki/Intertwingularity" target="_blank">intertwingularity</a><sup class="footnote" id="ref1_note"><a href="#ref1">[1]</a></sup>βTed Nelsonβs
expressive term to describe the sense that there is no neat
organization of knowledge: <em>EVERYTHING IS DEEPLY INTERTWINGLED</em>.
</p>
<p class="copy-content">
It was soon after this experience that I started to discover <abbr title="HyperText Markup Language">HTML</abbr>.
Programs like Microsoft FrontPage helped me author hypertext through
a <abbr>WYSIWYG</abbr> (What You See Is What You Get) editor. Composing a βpageβ
was done by adding elements to what seemed like an infinitely tall
and wide document that I could assemble like Word Processing
software and drawing programs. Like HyperCard, these programs
considered the composing of <abbr>HTML</abbr> to be an open-ended
practiceβsoftware with βlow floors and high ceilings.β<sup class="footnote" id="ref2_note"><a href="#ref2">[2]</a></sup>
They started with the simplicity of editing elements on a page and
allowed users to make the (often considerable) transition to
expressing those objects in written code.
</p>
<p class="copy-content">
The act of assembling a website using these pieces of software felt
different from learning a programming language. Content was authored
by inserting elements on a page and a layout was clicked and dragged
into existence as a container for words, images, and links to other
pages represented as files and folders connected together. In
contrast, <em>view source</em> was the textual space where syntax
was laid bare.
</p>
<p class="copy-content">
The ability to <em>view source</em> was introduced in the
mid-1990’s through web browsers like Netscape Navigator 3.0,
released in 1996. Clive Thompson’s book <em>Coders</em> notes
that early versions of Netscape Navigator introduced
<em>view source</em> as a βfun way to let people surfing the web to
see this code, if they wanted to.β<sup class="footnote" id="ref3_note"><a href="#ref3">[3]</a></sup>
At the time it was called βDocument Source,β and located under the
βViewβ dropdown menu of the running application. When clicked on, a
window would open showing the raw <abbr>HTML</abbr> of the page you were
currently viewing. The window displays a disorienting stream of text
with traces of visible content, files, and links that feel like
encountering a new language.
</p>
<blockquote
class="copy-content"
>
βEvery single web page you visited contained the code showing you
how it was created. The entire internet became a library of how-to
guides on programming. If you wanted, you could cut and paste that
code into a new file, change a few elements, and see what happened.β
</blockquote>
<p class="copy-content">
On my personal websites <em>view source</em> meant being able to
adapt and remix ideas. Like drawing a map, elements and pages acted
as landmarks in the browser to be navigated between. As a
self-initiated learner, being able to <em>view source</em> brought
to mind the experience of a slow walk through someone else’s
map.
</p>
<p class="copy-content">
This ability to βobserveβ software makes <abbr>HTML</abbr> special to work with.
In particular, it’s sense of βtransparencyβ as Clay Shirky
wrote in April, 1998, numerating on what makes for βgoodβ software:
</p>
<blockquote class="copy-content">
βGood tools are transparent. Web design is a conversation of sorts
between designers, with the Web sites themselves standing in for
proposal and response. Every page launched carries an attached
message from its designer which reads "I think this is a pretty good
way to design a Web page", and every designer reacting to that will
be able to respond with their own workβ<sup class="footnote" id="ref4_note"><a href="#ref4">[4]</a></sup>
</blockquote>
<p class="copy-content">
I brought these early websites with me from computer to computer on
3Β½-inch floppy diskβlike an improvised sneakernet<sup class="footnote" id="ref5_note"><a href="#ref5">[5]</a></sup>
before using free to low-cost serversβand opened them with the
installed browser to share what I’d made with friends. In the
moment, seeing something you had made on someone else's computer
felt like a gift. It became an important gesture in what I was
learning, the feedback loop of creating a website and being able to
view it on another computer and continuing to change it over time.
</p>
<p class="copy-content">
I sometimes wonder what happened to those original floppy disks.
I’m sure the websites on them would continue to display as
they had in 2000 if they found their way to a computer again. <abbr>HTML</abbr>,
browsers, and the protocols they work with are incredibly durable
ecosystems. You could open these websites as a series of plain text
files using an editor. Alternatively, you could use the
browser’s
<em>view source</em>
feature; a capability that allowed me to learn how other websites
were created by seeing markup and what is rendered in tandem.
</p>
<p class="copy-content">
<em>View source</em> is still present in most web browsers as a menu
option or a standardized address that could be typed in the address
bar. In 2011 the IETF<sup class="footnote" id="ref6_note"><a href="#ref6">[6]</a></sup>
registered the pattern of using βview-source:https://β¦β to show the
source code of a given page in plain text<sup class="footnote" id="ref7_note"><a href="#ref7">[7]</a></sup>βa view preserving much of the author’s formatting and
presence. This can be in the form of comments, the traces of unused
elements, and the idiosyncratic presentation of preformatted text.
</p>
<p class="copy-content">
I often wonder what would happen if the ability to
<em>view source</em> was made to be more present in the browsing
experienceβa gesture, or invitation, to see what and how a site is
composed. What if the structure of an <abbr>HTML</abbr> file spoke further to the
content being rendered? If an element had an inner voice, what would
it say? Can this history and context be expressed in the way we
interact with and learn from <em>view source</em>?
</p>
<blockquote class="copy-content">
βMarkup works similarly in the formulation of historical
(electronic) texts. It has its own history (the versioning of
<abbr title="Standard Generalized Markup Language">SGML</abbr>/<abbr>HTML</abbr>/<abbr title="Extensible HyperText Markup Language">XHTML</abbr>),
its own grammatical lineage (the development of
some tags over others), its own narrative (the archaeological layers
of comments attached to shared code), and even its own politics
(language choices, browser compliance, and the choice to share code
or retain its mystique as the writing of an invisible professional).
Markup thus becomes a kind of ghostly writing dependent on context
and history, rather than merely a means of formatting text.β<sup class="footnote" id="ref8_note"><a href="#ref8">[8]</a></sup>
</blockquote>
<p class="copy-content">
The ability to see marginalia through <em>view source</em> could be
a place for this to happen. We can draw parallels with the
physicality of a bookβwhen you see a page in a book you are
sometimes able to see the next page depending on the paper and the
way it has been printed. I wonder if <em>view source</em> could be a
similar gesture, a website being a porous material where its
creation can be viewed at the same time. This idea draws its
parallels to book publishing and the use of hidden markup from Helen
J. Burgess:
</p>
<blockquote class="copy-content">
βLong before the magical moment of βView Source,β print and book
producers were already using their own forms of hidden markup: the
symbols written on texts that contained instructions or marked
points for the purposes of textual reproduction. These
printers’ marks are the antecedents of today’s markup
schema: they are marking up manuscripts in the same way we mark up
electronic texts.β<sup class="footnote" id="ref9_note"><a href="#ref9">[9]</a></sup>
</blockquote>
<blockquote class="copy-content">
βThe <abbr>HTML</abbr> tags we can see in our browser’s βView Sourceβ
window are akin to early printers’ marks: they are not readily
apparent, but they can be read if we know where to look, in the
process of flipping back and forth between page and source
code.β<sup class="footnote" id="ref10_note"><a href="#ref10">[10]</a></sup>
</blockquote>
<p class="copy-content">
This brings to mind J.R. Carpenter’s writing on
<em><a href="https://luckysoap.com/statements/handmadeweb.html" target="_blank" >A Handmade Web</a></em>
where a relationship is made βbetween handmade web pages and
handmade print materials, such as zines, pamphlets, and artists
books.β<sup class="footnote" id="ref11_note"><a href="#ref11">[11]</a></sup>
Pages made by hand, the presence of a person in motion, manipulating
a medium as an act of self-publishing as well as an act of allowing
others to contribute.
</p>
<p class="copy-content">
Our cursors are often gliding from one page of the page to another
in the browser window. We take for granted the ease of this
interaction as each element commands some level of attention by us,
the viewers. A texture is created not just by the final rendered
form, but also by how the layout is constructed, by the underlying
language an author imparted in constructing these documents.
</p>
<p class="copy-content">
I think of this as how Alexander Galloway describes the work of net
artists, Jodi (Joan Heemskerk and Dirk Paesmans): βThe resulting
aesthetic is, in this way, not entirely specified by the
artists’ subjective impulses. Instead, the texture of code and
computation takes over, and computing itselfβits strange logic, its
grammar and structure, and often its shape and colorβproduces the
aesthetic.β<sup class="footnote" id="ref12_note"><a href="#ref12">[12]</a></sup>
For Jodi this consideration extends beyond what is shown in
browsers, it includes the underlying protocols, standards, and
applications that enable much of what we consider to be the internet
today.
</p>
<p class="copy-content">
Examples drawing on this computation and code aesthetic include
<a href="https://designforthe.net/workshops/ascii/index.html" target="_blank">ASCII Town</a><sup class="footnote" id="ref13_note"><a href="#ref13">[13]</a></sup>
, a workshop influenced by concrete poetry and typewriter art.
Participants created imaginary dwellings referencing the rich
histories of <abbr title="American Standard Code for Information Interchange">ASCII</abbr> art<sup class="footnote" id="ref14_note"><a href="#ref14">[14]</a></sup>. And Evan Roth’s
<a href="https://all-html.net/" target="_blank">All HTML</a><sup class="footnote" id="ref15_note"><a href="#ref15">[15]</a></sup>,
a page containing every <abbr>HTML</abbr> tag in alphabetical order. Browser
default elements crudely composed in the browser window become fully
legible when <em>view source</em> is used to observe how the file is
constructed.
</p>
<p class="copy-content">
From the book, to HyperCard, to the internet, information is encoded
and βmarked-upβ as instructions so that it could be rendered into
their intended form. <em>View source</em> is a gesture that sits
somewhere in between these moments, another space where a visitor
could reside with its own aesthetic qualities and materiality. The
space is both complementing and in tension with being interoperable
with a browserβthe precision of syntax in determining if syntax is
βvalidβ or not to the minutiae of comments left a <abbr>HTML</abbr> file for us
to discover and trace its creation.
</p>
<p class="copy-content">
In the end, <em>view source</em> is a reminder that software is a
human activity with all its nuance, and mundanity, laid bare waiting
to be viewed in our browsers. <em>View source</em> is a slow space,
a gesture to see the presence of a person, and a space to come back
to.
</p>
</div>
<!-- start of footnotes -->
<footer class="measure-content">
<hr>
<h3 class="normal">Notes</h3>
<ol>
<li class="reference" id="ref1">
<a href="#ref1_note" class="monospace" title="Jump to">β©</a>
βIntertwingularity.β <em>Wikipedia</em>, Wikimedia Foundation, 1 Aug.
2023,
<a href="https://en.wikipedia.org/wiki/Intertwingularity"
target="_blank">en.wikipedia.org/wiki/Intertwingularity</a>.
</li>
<li class="reference" id="ref2">
<a href="#ref2_note" class="monospace" title="Jump to">β©</a>
A term that is often attributed to Seymour Papert and his design
principle for the
<a href="https://en.wikipedia.org/wiki/Logo_(programming_language)"
target="_blank">Logo</a>
programming language.
</li>
<li class="reference" id="ref3">
<a href="#ref3_note" class="monospace" title="Jump to">β©</a>
Thompson, Clive.
<em>Coders: The Making of a New Tribe and the Remaking of the World</em>. Penguin Press, 2019, p. 49.
</li>
<li class="reference" id="ref4">
<a href="#ref4_note" class="monospace" title="Jump to">β©</a>
Shirky, Clay. βView Source... Lessons from the Web’s massively
parallel development.β
<em>www.shirky.com/writings/view_source.html</em>, Wayback Machine,
<a href="https://web.archive.org/web/20090326072422/http://www.shirky.com:80/writings/view_source.html"
target="_blank"
class="word-wrap"
>web.archive.org/web/20090326072422/http://www.shirky.com:80/writings/view_source.html</a>, 26 Mar. 2009.
</li>
<li class="reference" id="ref5">
<a href="#ref5_note" class="monospace" title="Jump to">β©</a>
βSneakernet.β <em>Wikipedia</em>, Wikimedia Foundation, 28 Dec. 2023,
<a href="https://en.wikipedia.org/wiki/Sneakernet" target="_blank">en.wikipedia.org/wiki/Sneakernet</a>.
</li>
<li class="reference" id="ref6">
<a href="#ref6_note" class="monospace" title="Jump to">β©</a>
Internet Engineering Task Force is a standards organization and is
responsible for the technical standards that make up the Internet
protocol suite.
</li>
<li class="reference" id="ref7">
<a href="#ref7_note" class="monospace" title="Jump to">β©</a>
Yevstifeyev, M. βViewing the Source URI in HTTP(S).β IETF Draft, draft
no. draft-yevstifeyev-view-source-uri-01, April 2011.
<a href="https://datatracker.ietf.org/doc/html/draft-yevstifeyev-view-source-uri-01"
class="word-wrap"
target="_blank"
>https://datatracker.ietf.org/doc/html/draft-yevstifeyev-view-source-uri-01</a>
</li>
<li class="reference" id="ref8">
<a href="#ref8_note" class="monospace" title="Jump to">β©</a>
Burgess, Helen J. β<?php>β
<em>From A to <A>: Keywords of Markup</em>, edited by Bradley
Dilger and Jeff Rice, University of Minnesota Press, 2010, p. 169.
</li>
<li class="reference" id="ref9">
<a href="#ref9_note" class="monospace" title="Jump to">β©</a>
Burgess, Helen J. β<?php>β
<em>From A to <A>: Keywords of Markup</em>, edited by Bradley
Dilger and Jeff Rice, University of Minnesota Press, 2010, p. 168.
</li>
<li class="reference" id="ref10">
<a href="#ref10_note" class="monospace" title="Jump to">β©</a>
Burgess, Helen J. β<?php>β
<em>From A to <A>: Keywords of Markup</em>, edited by Bradley
Dilger and Jeff Rice, University of Minnesota Press, 2010, p. 169.
</li>
<li class="reference" id="ref11">
<a href="#ref11_note" class="monospace" title="Jump to">β©</a>
Carpenter, J.R. βA Handmade Webβ
<a href="https://www.luckysoap.com/statements/handmadeweb.html"
class="word-wrap"
target="_blank"
>www.luckysoap.com/statements/handmadeweb.html</a>
</li>
<li class="reference" id="ref12">
<a href="#ref12_note" class="monospace" title="Jump to">β©</a>
Galloway, A. βJODI’s Infrastructureβ e-flux journal,
<a href="https://www.e-flux.com/journal/74/59810/jodi-s-infrastructure/"
target="_blank">www.e-flux.com/journal/74/59810/jodi-s-infrastructure/</a>
</li>
<li class="reference" id="ref13">
<a href="#ref13_note" class="monospace" title="Jump to">β©</a>
As part of <a href="https://a-b-z.co" target="_blank">A-B-Z</a> with
Mindy Seu in 2017.
</li>
<li class="reference" id="ref14">
<a href="#ref14_note" class="monospace" title="Jump to">β©</a>
βJoan Stark.β <em>Wikipedia</em>, Wikimedia Foundation, 29 Sep. 2022,
<a href="https://en.wikipedia.org/wiki/Joan_Stark" target="_blank">en.wikipedia.org/wiki/Joan_Stark</a>.
</li>
<li class="reference" id="ref15">
<a href="#ref15_note" class="monospace" title="Jump to">β©</a>
βAll HTML.β
<a href="https://esoteric.codes/" target="_blank">esoteric.codes</a>,
<a href="https://esoteric.codes/blog/all-html" target="_blank">https://esoteric.codes/blog/all-html</a>
</li>
</ol>
<!-- colophon area -->
<details class="mv5">
<summary>Colophon</summary>
<p>
Created by <a href="https://garrying.com" rel="author" target="_blank">Garry Ing</a> in the Spring of 2024 for <a href="https://thehtml.review/" target="_blank">the html review</a>, issue 03.
</p>
<p>Image from "System, apparatus, method, and computer program product for indexing a file". U.S. Patent No. RE46967E1</p>
<p>
A modified version of
<a href="https://github.com/luoye-fe/dom-inspector" target="_blank">dom-inspector</a> by Lou Ye
is used for the inspect experience.
<a href="https://tachyons.io/" target="_blank">Tachyons</a>, a modular
CSS library, was used in developing the layout of this website. View the source on
<a href="https://github.com/garrying/viewsource.info" target="_blank">GitHub</a>.
</p>
</details>
</footer>
</article>
</main>
<!-- start of inspector elements -->
<aside id="support">
<!-- tag scroll -->
<div id="taglist" class="inspect-ignore"></div>
<div id="inspect-controls">
<div class="mr2">
<input
type="checkbox"
id="inspect"
name="inspect"
class="v-mid w-checkbox"
aria-labelledby="inspect-label"
checked>
<label for="inspect" id="inspect-label">inspect</label>
</div>
<div class="mr2">
<input
type="checkbox"
id="dusk"
name="dusk"
class="v-mid w-checkbox"
aria-labelledby="dusk-label">
<label for="dusk" id="dusk-label">dusk</label>
</div>
<a class="button-link" href="https://github.com/garrying/viewsource.info" target="_blank"><em>view source β</em></a>
</div>
</aside>
<!-- scripts for the inspector -->
<script src="/js/modules/dom-inspector.js"></script>
<script type="module" src="/js/main.js"></script>
</body>
</html>