-
Notifications
You must be signed in to change notification settings - Fork 2
/
hackers-culture-and-the-fear-of-wysiwyg.html
1779 lines (695 loc) · 84.5 KB
/
hackers-culture-and-the-fear-of-wysiwyg.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
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=510">
<link rel="stylesheet" href="/and/style/in/reset.css" type="text/css" />
<link rel="stylesheet" href="/and/style/in/grid.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="/and/style/in/habitus.css" />
<link rel="start" href="/and/" title="Home" />
<link rel="alternate" type="application/atom+xml" title="Recent Entries" href="/and/feed/us/recent_entries.xml" />
<script type="text/javascript" src="/and/scripts/being/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="/and/scripts/being/scripts.js"></script>
<title>I like tight pants and hacker culture and the fear of wysiwyg</title>
<meta property="og:title dc:title" content="I like tight pants and hacker culture and the fear of wysiwyg"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="http://i.liketightpants.net/and/hackers-culture-and-the-fear-of-wysiwyg"/>
<meta property="og:image" content="http://i.liketightpants.net/and/assets/called/xerox-star-8010-09.jpg"/>
<meta property="og:site_name" content="I like tight pants and mathematics"/>
<meta property="og:description dc:description"
content="Flash forward to 2014, and most Content Management Systems still offer us the same inhospitable form fields that look nothing like the page they will produce. The programmers are to blame, and here’s why."/>
<meta name="description"
content="Flash forward to 2014, and most Content Management Systems still offer us the same inhospitable form fields that look nothing like the page they will produce. The programmers are to blame, and here’s why."/>
<meta property="fb:admins" content="1488294875"/>
<meta property="mt:entry_basename" content="hackers-culture-and-the-fear-of-wysiwyg" />
<meta property="dc:modified" content="2014-11-13T14:51:11" />
</head>
<body>
<div id="header" class="container_7">
<div class="grid_2">
<h1><a href="/and/">i . like tight pants . net</a></h1>
</div>
<div class="grid_3">
<ul>
<li ><a href="/and/hybrid-publishing-back-to-the-future-publishing-theses-at-the-kabk">latest</a></li>
<li><a href="/and/about">about</a></li>
<li ><a href="/and/archives">index</a></li>
</ul>
</div>
<div class="grid_2">
<p class="byline" id="recent_entries">New entries published Monday and Thursday, 22:00 CET (<a href="/and/feed/us/recent_entries.xml">RSS</a>)</p>
</div>
</div>
<div id="content" class="container_7">
<div class="sidebar grid_1">
<img src="/and/assets/that/are/pictures/of/author/habitus.png" style="width:100px;height:100px;" alt="" />
<h4 class="author" property="dc:created" content="2014-05-22T23:40:24">May 22, 2014</h4>
<h4 class="author">by <span property="dc:creator">habitus</span></h4>
<p> </p>
<hr />
<h4>Other articles by habitus</h4>
<dl>
<dt><a href="/and/who-makes-standards">Who gets to write the web: the power struggles around the standards</a></dt>
<dd>November 20, 2013 9:08 PM</dd>
<dt><a href="/and/no-one-starts-from-scratch-type-design-and-the-logic-of-the-fork">No-one Starts From Scratch: Type Design and the Logic of the Fork</a></dt>
<dd>October 9, 2013 8 PM</dd>
<dt><a href="/and/belgian-newspapers">Belgian Newspapers</a></dt>
<dd>March 29, 2013 9:17 PM</dd>
<dt><a href="/and/i-like-ziggy-over-zarathustra">Ziggy over Zarathustra</a></dt>
<dd>January 8, 2012 3:43 PM</dd>
<dt><a href="/and/judging-art">Judging art</a></dt>
<dd>June 7, 2011 3:35 PM</dd>
</dl>
<h4>habitus’s comments</h4>
<ul>
<li>Dear Ian, thank you for taking the time to respond. ... <a href="/and/who-makes-standards#comment-333" title="full comment on: Who gets to write the web: the power struggles around the standards">read more</a></li>
<li>Thanks for your insight that it is not just programmers ... <a href="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-320" title="full comment on: Hacker Culture and the Fear of WYSIWYG">read more</a></li>
<li>Thanks for the link, Martín. I agree that hybrid solutions ... <a href="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-318" title="full comment on: Hacker Culture and the Fear of WYSIWYG">read more</a></li>
<li>I would prefer it to tell me Everything is OK <a href="/and/ufo2otf-makes-otfs-webfonts-and-css-from-ufo#comment-272" title="full comment on: ufo2otf Makes OTF’s, Webfonts and CSS From UFO’s">read more</a></li>
<li>This also has implications for sharing tools, which for me ... <a href="/and/48-hours-of-writing-stylesheets-with-etherpad-and-a-gong#comment-266" title="full comment on: 48 Hours of Writing Stylesheets with Etherpad and a Gong">read more</a></li>
<li>For a much more nuanced critique of Helvetica and similar ... <a href="/and/no-one-starts-from-scratch-type-design-and-the-logic-of-the-fork#comment-248" title="full comment on: No-one Starts From Scratch: Type Design and the Logic of the Fork">read more</a></li>
<li>A strictly generative approach to typesetting is of course limiting ... <a href="/and/i-need-my-generic-font-medicine#comment-245" title="full comment on: I Need My Generic Font Medicine">read more</a></li>
<li>Well, at least you managed to download software that also ... <a href="/and/it-might-be-a-unix-sin-but-i-would-like-you-to-add-dot-t-x-t-as-the-extension-of-your-readme-file#comment-219" title="full comment on: It Might Be a Unix Sin But I Would Like You to Add .txt As the Extension of Your README file">read more</a></li>
<li>At the event in the Library, they mainly highlight the ... <a href="/and/belgian-newspapers#comment-189" title="full comment on: Belgian Newspapers">read more</a></li>
<li>The public domain day highlighted work of authors that have ... <a href="/and/belgian-newspapers#comment-188" title="full comment on: Belgian Newspapers">read more</a></li>
</ul>
<hr />
<h4>Other writers</h4>
<ul>
<li>glit</li>
<li>jenseits</li>
<li>habitus</li>
<li>tellyou</li>
<li>baseline</li>
<li>bnf</li>
</ul>
</div>
<div class="post grid_5">
<p class="byline">
<a href="/and/the-underwater-screen-or-lessons-from-wordperfect">Previous</a>
/ <a href="/and/hybrid-publishing-back-to-the-future-publishing-theses-at-the-kabk">Next</a>
</p>
<div class="article grid_3 alpha omega suffix_2">
<h4 property="mt:entry_title">Hacker Culture and the Fear of WYSIWYG</h4>
<article property="mt:entry_id" content="97" class="entry" id="entry-97">
<style>
.article li {
list-style: inherit !important;
}
.article {
font: 15px/24px Georgia, Times, serif;
width: 625px !important;
padding-right: 10px !important;
}
.article * {
margin: 0;
padding: 0;
font-family: Georgia, Times, serif;
}
#aside.grid_2 {
width: 175px;
}
.article h1, .article h2, .article h3, .article h4, .article h5, .article h6 {
font-family: georgia, times, serif;
font-weight: normal;
font-style: italic;
}
.article h1 {
font-size: 68px;
line-height: 80px;
}
.article p {
margin: 0 0 18px;font: 15px/24px Georgia, Times, serif;
}
.article p.byline {
font-family: Arial;
font-size: 11px;
line-height: 14px;
}
.article p.byline {
margin-top: 11px;
}
.article h2 {
font-size: 40px;
line-height: 52px;
}
.article h3 {
font-size: 24px;
line-height: 30px;
}
.article h4:first-child {
display: none;
}
.article #comments h4 {
display: inherit;
}
.article h5 {
font-size: 15px;
color: #099;
}
.article h6 {
background-color: #000;
color: #fff;
padding: 0 6px;
margin-bottom: 6px;
}
.article h6 a {
color: #fff;
}
.article .intro {
font-size: 20px;
font-style: italic;
line-height: 30px;
font-weight: normal;
}
.article blockquote {
margin: 9px;
color: #666;
font-style: italic;
border-left: inherit;
padding-left: inherit;
font-size: inherit;
line-height: inherit;
}
.article a {
color: #000;
text-decoration: none;
border-bottom: 1px dotted;
outline: none;
}
.article a:active,
.article a:focus,
.article a:hover {
border-bottom: 1px solid;
outline: 0;
}
.article strong {
font-weight: bold;
}
</style>
<p>
<img src="/and/assets/called//wysiwyg.gif" style="width: 630px; height: 84px; position: relative; margin: 0px; resize: none; zoom: 1; display: inline-block; top: 0px; left: 0px;" alt="" title="" class="">
</p>
<h2>Or how, in 2004, I liked the editing interface of a small Amsterdam cultural institution, and why I am still waiting for it to get copied.</h2>
<p class="intro">In 2004 I encounter the website of the Amsterdam magazine/web platform/art organisation <a href="http://www.mediamatic.net/" class="aloha-link-text" hreflang="" target="_self" title="Mediamatic.net">Mediamatic</a>. The site is remarkable in several ways. Firstly, it shows off the potential of designing with native web technologies. Its layout is a re-appraisal of one of the core fonts available to almost all surfers: Georgia, and its Italic. The striking text-heavy layout uses this typeface for body-text, in unconventionally large headings and lead-ins. Secondly, the site opens up a whole new editing experience. In edit mode, the page looks essentially the same as on the public facing site, and as I change the title it remains all grand and Italic. I had been used to content management systems proposing me sad unstyled form-fields in a default browser style, decoupling the input of text completely from the final layout. That one can get away from the default browser style, and edit in the same style as the site itself, is nothing short of a revelation to me—even if desktop software has been showing this is possible for quite some time already.</p>
<p class="">
<img style="height: 583px; width: 625px; position: relative; margin: 0px; resize: none; zoom: 1; display: inline-block; top: 0px; left: 0px;" src="/and/assets/called/xerox-star-8010-09.jpg" title="" class="">
</p>
<p class="byline"><em>Xerox Star 8010 Interface</em> The promise of WYSIWYG: the editing interface on the screen resembles the output on paper. The image shows a Xerox Star, which is a 1981 product with which Xerox tries to commercialise their Xerox Alto (1972). The influential Xerox Alto project had premiered WYSIWYG text editing among many other techniques, and heavily influenced the Apple Macintosh.<br><a href="http://www.digibarn.com/collections/screenshots/xerox-star-8010/">source</a>, Creative Commons BY NC SA @ <a href="http://www.digibarn.com/" class="aloha-link-text">the Digibarn Computer Museun</a></p>
<p>
<img style="height: 469px; width: 625px; position: relative; margin: 0px; resize: none; zoom: 1; display: inline-block; top: 0px; left: 0px;" src="/and/assets/called/ratpoison.png" title="" class="">
<br></p>
<p class="byline"><em>Arch Linux interface with the ratpoison window manager.</em> An alternative user interface paradigm is embodied in the culture of Unix-like systems. Linux users are free to choose their own window manager—the part of the operating system that keeps track where to draw what to the screen. In this case, the window manager is called ‘ratpoison’: a self-conscious reference to the fact that this interface can be controlled almost entirely by keyboard.<br><a href="http://retroyou.org/MMM/IM/CARGO/COMMAND_LINE/screenshot-20070305122500.png">source</a>, part of the <a href="http://retroyou.org/MMM/IM/CARGO/COMMAND_LINE/001.html" class="aloha-link-text">COMMAND LINE_ LONELY SEARCH SESSIONS</a> @ <a href="http://retroyou.org/" class="aloha-link-text">retroyou.org</a></p>
<p>In 2004, there are more websites with an editing experience like Mediamatic: Flickr, for example makes it possible to change the title and metadata of a photo right on the photo page itself, if one is logged in. Yet flash forward to 2014, and most Content Management Systems still offer us the same inhospitable form fields that look nothing like the page they will produce.</p>
<p>If we look at the experience of writing on Wordpress, the most used blogging platform, the first thing one notes is that the place where one edits the posts is quite distinct from the place that is visited by the reader: you are in the ‘back end’. There is some visual resemblance between the editing interface and the article: headings are bigger then body text, italics become italic. But the font does not necessarily correspond to the resulting posts, nor do the line-width, line-height and so forth. Some other elements are not visual at all: to embed youtube and the like one uses ‘<a href="http://en.support.wordpress.com/shortcodes/">shortcodes</a>’.</p>
<p>Technologically, what was possible in 2004 should still be possible now—the web platform has since then only advanced, offering new functionality like contentEditable which allows one to easily make a part of a webpage editable, without much further scripting. So where are the content management systems that take advantage of these technologies? To answer this question, we will have to look at how web technologies come about.</p>
<h3>The dominant computing paradigm and its counter-point</h3>
<p>An editing interface that visually resembles it visual result is know as WYSIWYG, What You See Is What You Get. The term dates from the introduction of the graphical user interface. The Apple Macintosh offers the first mainstream WYSIWYG programs, and the Windows 3.1 and especially Windows 95 operating systems make this approach the dominant one.</p>
<p>A word processing program like Microsoft Word is a prototypical WYSIWYG interface: we edit in an interface that visually resembles as close as possible the result that comes out of the printer. Most graphic designers also work in WYSIWYG programs: this is the canvas based paradigm of programs like Illustrator, inDesign, Photoshop, Gimp, Scribus and Inkscape.</p>
<p>But being the dominant paradigm for user-interfaces, especially in document creation and graphic design, does not mean the WYSIWYG legacy is the only paradigm in use. Programmer and author Michael Lopp, also known as Rands, tries to convince us that ‘nerds’ use a computer in a different way. From his self-help guide for the nerd’s significant other, <a href="http://randsinrepose.com/archives/the-nerd-handbook/" class="aloha-link-text" target="_self">The Nerd Handbook</a>:</p>
<blockquote class="aloha-cite-wrapper" data-cite-id="1409931623839">
<p>Whereas everyone else is traipsing around picking dazzling fonts to describe their world, your nerd has carefully selected a monospace typeface, which he avidly uses to manipulate the world deftly via a command line interface while the rest fumble around with a mouse.</p>
</blockquote>
<p>Rand introduces a hypothetical nerd that uses a text based terminal interface to interact with her computer. He mentions the ‘command line’, the kind of computer interface that sees one typing in commands and which is introduced in <a href="http://i.liketightpants.net/and/absolute-beginners-unix-for-art-students-part-1" target="_self" class="aloha-link-text">I like tight pants and absolute beginners: Unix for Art students</a>.</p>
<p>Yet who exactly is it who likes to use their computer in such as way? ‘Nerd’ is a terribly imprecise term: one can be a nerd at many things, and it is mainly a derogative term. But it seems safe to suggest that those using the command line have some familiarity with text as an interface, and with using programming codes. People that are steeped in or attracted by, the practice of programming.</p>
<h3>Programmers as Gatekeepers</h3>
<p>Since the 1990ies desktop publishing revolution Graphic Designers have been able to implement their own print designs without the intervention of engineers. In most cases this is not true for the web: the implementation of websites is ultimately done by programmers. These programmers often have an important say in the technology that is used to create a website. It is only normal that the programmers’ values and preferences are reflected in these choices.</p>
<p>This effect is reinforced because the programming community largely owns its own means of production. In contrast with print design, the programming technologies used in creating web sites (the programming languages, the libraries, the content management systems) are almost always Free Software and/or Open Source. Even commercial Content Management Systems are often built upon existing Open Source components. There are many ways in which this is both inspiring and practical. Yet if this engagement with a collectively owned and community-driven set of tools is commendable, it has one important downside: the values of the community directly impact the character of the tools available.</p>
<h3>Hacker Culture</h3>
<p>Programming is not just an activity, it is embedded in a culture. All the meta-discourse surrounding programming attributes to this culture. A particularly influential strand of computing meta-discourse is what can be called ‘Hacker Culture’. If I were to characterise this culture, I would do so by sketching two highly visible programmers that are quite different in their practice, yet share a set of common cultural references in which the concept of a ‘hacker’ is important.</p>
<p>On the one hand we can look at Richard Stallman, a founder of the Free Software Movement, tireless activist for ‘Software Freedom’. Having coded essential elements of what was to become GNU/Linux, he is just as well known for his foundational texts such as the GPL license. The concept of a hacker is important to him, as evidenced in his article <a href="https://stallman.org/articles/on-hacking.html" class="aloha-link-text">‘On Hacking’</a>.<br>
On the other hand there is someone like Paul Graham, a Silicon Valley millionaire and venture capitalist. Influential in ‘start-up’ culture, Graham has turned his own experience into something of a template for start-ups to follow: start with a small group of twenty-something programmers/entrepreneurs and create a company that tries to grow as quickly as possible, attract funding, and then either fail, be bought, or in extremely rare cases become a large publicly traded company. His vision of the start-up is both codified in writing and brought into practice at the ‘incubator’ Y Combinator.<br>
As different as Graham’s trajectory might be from Stallman’s, he too has written an <a href="http://paulgraham.com/gba.html" class="aloha-link-text">article on what it means to be a hacker</a>. The popular discussion forum he has run is called Hacker News. In fact, Graham refers to the people that start start-ups as hackers.<br>
The fact that Stallman and Graham share a certain culture is shown by the fact that their conceptions of what is a hacker is far removed from the everyday usage of the world. While to most people a hacker means someone who breaks into computer systems, Stallman and Graham agree that true sense of hacker is quite different.</p>
<p>Thus, contesting the mainstream concept of hacker is itself important in the subculture: Douglas Thomas already describes this mechanism in his thoroughly readable introduction on Hacker Culture (2002). A detailed anthropological analysis of a slice of Hacker Culture is performed in Gabriella Coleman’s <a href="http://codingfreedom.com/" class="aloha-link-text" hreflang="" target="_self">Coding Freedom: the Ethics and Aesthetics of Hacking</a> (2012), though it seems to focus on Free Software developers of the most idealistic persuasion and seems less interested in the major role Silicon Valley dollars play in fuelling Hacker Culture. For this tension too is at the heart of hacker culture: even if Hacker Culture is a place to push new conceptions of technology, ownership and collaboration, the Hacker revolution is financed by working ‘for the man’. The Hacker Culture blossoming at universities in the 1960ies was only possible only through liberal funding through the department of Defense, today many <a href="http://www.pixelbeat.org/misc/google_stars.html" class="aloha-link-text" hreflang="" target="_self" title="Google’s Open Source Stars">leading Free and Open Software developers</a> work at Google.</p>
<h3>Grown (Wo)men Afraid of Mice</h3>
<p>If we want to know about Hacker’s Culture’s attitude towards user interfaces, we can start to look for anecdotal evidence. In an interview about his computing habits, arch-hacker Stallman actually seems to resemble quite closely that of the hypothetical GUI-eschewing ‘nerd’ from Rands’ article:</p>
<blockquote class="aloha-cite-wrapper" data-cite-id="1415774591247">
<p>I spend most of my time using Emacs [A text-editor]. I run it on a text console [A terminal], so that I don’t have to worry about accidentally touching the mouse-pad and moving the pointer, which would be a nuisance. I read and send mail with Emacs (mail is what I do most of the time).<br>I switch to the X console [A graphical user interface] when I need to do something graphical, such as look at an image or a PDF file.</p>
</blockquote>
<p class="byline"><a href="http://richard.stallman.usesthis.com/" class="aloha-link-text" target="_self" hreflang="" title="The Setup / Richard Stallman">The Setup / Richard Stallman</a></p>
<p>Richard Stallman does not even use a mouse. This might seem an outlier position, yet he is not the only hacker to take such a position. Otherwise, there would be no audience for the open source window manager called ‘ratpoison’. This software allows one to control the computer without any use of the mouse, killing it metaphorically.</p>
<p>The mouse is invented in the early sixties by Douglas Engelbart. It is incorporated into the Xerox Star system that goes on to inspire the Macintosh computer. <a href="http://www.newyorker.com/magazine/2011/05/16/creation-myth" class="aloha-link-text" target="_self" hreflang="" title="Creation Myth - The New Yorker">Steve Jobs commissions Dean Hovey to come up with a design that is cheap to produce, more simple and more reliable than Xerox’s version</a>. After the mouse is introduced with the Macintosh computer in 1984 it quickly spreads to PC’s, and it becomes indispensable to every day users once the Windows OS becomes mainstream in the 1990ies.</p>
<p>The mouse is part of the paradigm of these graphical user interfaces, just like the WYSIWYG interaction model. The ascendence of these interaction models is linked to (and has probably enabled) personal computers becoming ubiquitous in the 1990ies. It is not this tradition that Stallman and likeminded spirits inscribe themselves in. They prefer to refer to the roots of the Hacker paradigm of computing that stretch back further: back when computers where not yet personal, and when they ran an operating system called ‘Unix’.</p>
<h3>Unix, Hacker Culture’s Gilgamesh epic</h3>
<p>The Unix operating system plays a particular role in the system of cultural values that make up programming culture. Developed in the 1970ies at AT&T, it becomes the dominant operating system of the mainframe era of computing. In this setup, one large computer runs the main software, and various users login into this central computer from their own terminal. This terminal is an interface that allows one to send commands and view the results—the actual computation being performed on the mainframe. Variants of Unix become widely used in the world of the enterprise and in academia.</p>
<p>The very first interface to the mainframe computers is the teletype: an electronic typewriter that allowed one to type commands to the computer, and to subsequently print the response. As teletypes get replaced by computer terminals, with CRT displays and terminals, interfaces often stay decidedly minimal. It is much cheaper to use text characters to create interfaces than to have full blown graphical user interfaces, especially as the state of the interface has to be sent over the wire from the mainframe to the terminal. Everyone who has worked in a large organisation in the 1980ies or 1990ies will remember the keyboard driven user interfaces of the time.</p>
<p>This vision of computing is profoundly disrupted by the success of the personal computer. Bill Gates vision of ‘a personal computer in each home’ becomes a reality in the 1990ies. A personal computer is self-sufficient, storing its data on its own hard-drive, performing its own calculations. The PC is not hindered by having to make roundtrips to the mainframe continuously, and as processing speed increases PC’s replace text-based input with sophisticated graphical user interfaces. During the dominance of Windows operating system, for most mainstream computer users Unix seems to become a relic: after conquering the homes, Windows computers conquer the workplace as well. In 1994’s Jurassic Park, when the computer-savvy girl needs to circumvent computer security to restore the power, she is surprised to find out that <a href="https://www.youtube.com/watch?v=dFUlAQZB9Ng" class="aloha-link-text">it’s a Unix system</a>. </p>
<p>The tables turn when in 2000 Apples new OS X operating system uses Unix. At the same time, silently but surely the Linux operating system has been building mind share. A cornerstone of the movement for Free and Open Source software, Linux is a Unix clone that is free for everyone to use, distribute, study and modify. Even if both these unixes are built on the same technology as the UNIX that powers mainframe computers, these newer versions of UNIX are used in a completely different context. Linux and OS X are designed to run on personal computers, and both come with an (optional) Graphical User Interface, making them accessible to users that have grown up on Windows and Mac OS. All of a sudden, a new generation gets to appropriate Unix. A generation which has never had to actually use a Unix system at work.</p>
<p>Alan Kay claims that <a href="http://queue.acm.org/detail.cfm?id=1039523" class="aloha-link-text">the culture of programming is forgetful</a>. It is true that a new generation of programmers completely forgets the rejection of UNIX by consumers just years before, let alone wonder on the reasons for its demise. Yet the cultural knowledge embodied in Unix is now part of a community. The way in which Unix is used today might be completely different from the 1970ies, but Unix itself and the values it embodies has become something that unites different generations self-identifying with ‘hacker culture’.</p>
<blockquote>
<p>The cultural depth of Unix far exceeds naming conventions. Unix has been described as “our Gilgamesh epic” (Stephenson 1999), and its status is that of a living, adored, and complex artifact. Its epic nature is an outgrowth of its morphing flavors, always under development, that nevertheless adhere to a set of well-articulated standards and protocols: flexibility, design simplicity, clean interfaces, openness, communicability, transparency, and efficiency (Gancarz 1995; Stephenson 1999). “Unix is known, loved, understood by so many hackers,” explains sci-fi writer Neal Stephenson (1999, 69), also a fan, “that it can be re-created from scratch whenever someone needs it.”</p>
</blockquote>
<p><em>p.51 Coleman, Coding Freedom - The Ethics and Aesthetics of Hacking. New Jersey, 2012.</em></p>
<h3>The primacy of plain-text</h3>
<p>If there is a lingua franca in Unix, it is ‘plain text’. Unix originated in the epoch that users would type in commands on a tele-type machine, and typing commands is still considered an essential part of using Unix-like systems today. Many of the core UNIX commands are launched with text commands, and their output is often in the form of text. This is as true for classic UNIX programs as for programs written today. Unix programs are constructed so that the output of one program can be fed into the input of another program: this ability to chain commands in ‘pipes’ depends on the fact that all these programs share the same format of out- and input, which is streams of text.</p>
<p>The most central program in the life of a practitioner of Hacker Culture is the text editor. Contrary to a program like Word, a text editor shows the raw text of a file including any formatting commands. This is still the main paradigm for how programmers work on a project: as a bunch of text files organised in folders. This is not inherent to programming (there have been programming environments that store code in a database, or in binary files), but has proved the most lasting and popular way to do so. Unix’ tools are built around and suited for plain text files, so this approach also contributes to the ongoing popularity of Unix—and vice versa.</p>
<p>While programming, one has to learn how to create a mental model of the object programmed. As the programmer only sees the codes, she or he has to imagine the final result while editing—then compile and run the project to see if projection was correct. This feedback loop is much slower than the feedback loop as we know it from WYSIWYG programs. Maybe it is the experience of slow feedback that gives programmers more tolerance for abstract interfaces then those of us outside this culture.</p>
<p>While WYSIWYG has a shorter feed-back loop, it also adds additional complexity. Anyone who has used Microsoft Word knows the scenario: after applying several layers of formatting, the document’s behaviour seems to become erratic: remove a carriage return, and the whole layout of a subsequent paragraph might break. This is because the underlying structure of the rich text document (on the web, this is HTML) remains opaque to the user. With increased ease-of-use, comes a number of edge cases and a loss of control over the underlying structure.</p>
<p>This is a trade-off someone steeped in Hacker Culture might not be willing to make. She or he would rather have an understandable, formal system by which the HTML codes are produced—even if that means editing in an environment not resembling at all the final web page—because they already know how to work this way from their experience in programming.<br>
This is shown by the popularity of a workflow and type of tool that is known as the ‘static site generator’. In this case, the workflow for creating a website is to have a series fo plain text files. Some of them represent templates, others content. After a change, the programmer runs the ‘static site generator’ and all the content is pushed through the templates to produce a series of HTML files. The content itself is often written in a code language like ‘Markdown’, that allows one to add some formatting information through type-writer like conventions: *stars* becomes <em>stars</em>.</p>
<h3>Hacker Culture’s bias is holding back interface design</h3>
<p>Because programmers are gatekeepers to web technology, and because programmers are influenced by Hacker Culture, the biases’ of Hacker Culture have an impact outside of this subculture. The world of programming is responsible for its own tools, and contemporary web-sites are built by programmers upon Open Source libraries developed by other programmers. Shaped by the culture of Unix and plain-text, and by the practice of programming, WYSIWYG interfaces are not interesting to most Open Source developers. Following the mantra to ‘scratch one’s own itch’, developers work on the interfaces that interest them. There are scores of the aforementioned ‘static site generators’: <a href="http://staticsitegenerators.net/" class="aloha-link-text">242 of them</a>, on last count.</p>
<p>Comparatively, the offer of WYSIWYG libraries is meagre. Even if HTML5’s ContentEditable property has been around for ages, it is not used all that often; consequently there are still quite some implementation differences between the browsers. The lack of interest in WYSIWYG editors means the interfaces are going to be comparatively flakey, which in turn confirms programmers looking for an editing solution in their suspicions that WYSIWYG is not a viable solution. There are only two editor widgets based on ContentEditable that I know of: <a href="http://aloha-editor.org/" class="aloha-link-text" hreflang="">Aloha</a> and <a href="http://hallojs.org/" class="aloha-link-text" hreflang="" target="_self" title="Hallo.js - Distraction-free Rich Text Editor for the Web">hallo.js</a>. Aloha is badly documented and not easy to wrap your head around as it is quite a lot of code. Hallo.js sets out to be more lightweight, but for now is a bit too light: it lacks basic features like inserting links and images. </p>
<p>The problem with the culture of plain-text is not plain-text as a format. It is plain text as an interface. Michael Murtaugh has written a thoughtful piece on this in the context of The Institute for Network Cultures’ Independent Publishing Toolkit: <a href="http://digitalpublishingtoolkit.org/2014/04/mark-me-up-mark-me-down/" class="aloha-link-text">Mark me up, mark me down!</a>. Working with a static site generator, it becomes clear they are envisioned as a one way street: you change the source files, the final (visual) result changes. There is no way in which a change in the generated page, can be fed back into the source. Similarly, the <a href="http://daringfireball.net/projects/markdown/" class="aloha-link-text">Markdown</a> format is designed to input by a text-editor, and than programmatically turned into HTML. Whereas HTML allows for multiple kinds of interfaces (either more visual or more text oriented), a programmer-driven choice for Markdown forces the Unix love of editing plain text onto everybody.</p>
<p>If WYSIWYG would be less of a taboo in Hacker Culture, we could also see interesting solutions that cross the divide code/WYSIWYG. <a href="http://i.liketightpants.net/and/the-underwater-screen-or-lessons-from-wordperfect" class="aloha-link-text" hreflang="" target="_self">A great, basic example is the ‘reveal codes’ function of WordPerfect</a>, the most popular word processor before the ascendency of Microsoft Word. When running into a formatting problem, using ‘reveal codes’ shows an alternative view of the document, highlighting the structure by which the formatting instructions have been applied—not unlike the ‘DOM inspector’ in today’s browsers. </p>
<p>More radical examples of interfaces that combine the immediacy of manipulating a canvas with the potential of code can be found in Desktop software. The 3D editing program Blender has a tight integration between a visual interface and a code interface. All the actions performed in the interface are logged in programming code, so that one can easily base scripts on actions performed in the GUI. Selecting an element will also show its position in the object model, for easy scripting access. </p>
<p>HTML is flexible enough so that one can edit it with a text editor, but one can also create a graphical editor that works with HTML. Through the JavaScript language, a web interface has complete dynamic access to the page’s HTML elements. This makes it possible to imagine all kinds of interfaces that go beyond the paradigms we know from Microsoft Word on the one hand and code editors on the other. This potential comes at the expense of succinctness: to be flexible enough to work under multiple circumstances, HTML has to be quite verbose. Even if the HTML5 standard has already added some modifications to make it more sparse, for adepts of Hacker Culture it is not succinct enough: hence solutions like Markdown. However, to build a workflow around such a sparse plain-text format, is to negate that different people might want to interact with the content in a different way. The interface that is appropriate to a writer, might not be the interface that is appropriate to an editor, or to a designer.</p>
<h3>Conclusion</h3>
<p>The interfaces we use on the web are strongly influenced by the values of the programmers that make them, who reject the mainstream WYSIWYG paradigm. Yet What you see is what you get is not going anywhere soon. It is what made the Desktop computer possible, and for tasks such as document production, it is the computing reality for millions of users. Rather than posing a rejection, there is ample space to reinvent what WYSIWYG means, especially in the context of the web, and to find ways to combine it with the interface models that come from the traditions of Unix and Hacker Culture. Here’s to hoping that a new generation of developers will be able to go beyond the fetish for plain text, and help to invent exciting new ways of creating visual content.</p>
<p><br></p>
<p><br></p>
<p></p>
<hr style="border-width:2px">
<p></p>
<p><br></p>
<p><br></p>
<p><br></p>
<div id="aside" style="padding-top: 0px; margin-top: -14px;" class="">This article has been <a href="http://www.mediamatic.net/368415/en/hacker-culture-and-the-fear-of-wysiwyg" class="aloha-link-text">cross-posted on Mediamatic</a>. It started out in the context of <a href="http://www.bat-editions.net/" title="BAT stands for Books, Art and Texts">BAT</a>’s residency at <a href="http://www.lapanacee.org/en" title="La Panacée | Centre de culture contemporaine — Montpellier">la Panacée</a> where habitus intervened together with Alexandre Leray and Stéphanie Vilayphiou of <a href="http://osp.kitchen/" title="OSP (Open Source Publishing) →">OSP</a> for a research session on the modalities of on-line writing.<br><br>
The publication of the article coincides with the conference ‘<a href="http://digitalpublishingtoolkit.org/22-23-may-2014/program/" title="Program | DIGITAL PUBLISHING TOOLKIT for the Arts and Culture">Off the Press</a>’, organised in Rotterdam by the <a href="http://networkcultures.org/wpmu/portal/" title="Institute of Network Cultures | The Institute of Network Cultures portal">Institute of Network Cultures</a> as part of the <a href="http://digitalpublishingtoolkit.org/" title="DIGITAL PUBLISHING TOOLKIT for the Arts and Culture | RAAK-MKB project by Institute of Network Cultures, Hogeschool van Amsterdam">Digital Publishing Toolkit</a>.<br><br>
The digital publishing toolkit is a project that tries to come up with tools and best practices for independent electronic publishing in the field of art. This means coming up with workflows that allow different professionals to add their value to the process: writers, editors, designers, developers (these categories may overlap).<br><br>
As explained in this article, I like tight pants would advise the creators of the toolkit against interfaces too strongly biased towards programmer values but urge them to instead find solutions that allow multiple kinds of interfaces to the source—in short, using a plain text format like <a href="http://daringfireball.net/projects/markdown/" title="Daring Fireball: Markdown">Markdown</a> should not be forced upon all contributors.</div>
</article>
<h4 class="comments-header">19 Comments</h4>
<div id="comments" class="comments">
<div class="comments-content">
<div property="mt:comment_id" content="307" id="comment-307" resource="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-307" class="comment">
<div class="comment-editor" property="mt:comment_text">
<blockquote class="aloha-cite-wrapper aloha-cite-1400533797185" data-cite-id="1400533797185">Comparatively, the offer of WYSIWYG libraries is meagre.</blockquote>
<p>Luckily, the trend has shifted recently in the last year or so.</p>
<blockquote class="aloha-cite-wrapper aloha-cite-1400533797186" data-cite-id="1400533797186">Even if HTML5’s ContentEditable property has been around for ages, it is not used all that often; consequently there are still quite some implementation differences between the browsers.</blockquote>
<p>This is exactly the problem the Guardian has trying to solve with its <a href="http://www.theguardian.com/info/developer-blog/2014/mar/20/inside-the-guardians-cms-meet-scribe-an-extensible-rich-text-editor" class="aloha-link-pointer" hreflang="" target="_self" title="Inside the Guardian’s CMS: meet Scribe, an extensible rich text editor | Info | theguardian.com">recently released Scribe library</a>: “What we needed was a library that only patched browser inconsistencies in contentEditable and, on top of that, ensured semantic markup — a very thin layer on top of contentEditable. That’s why we built Scribe.”</p>
<blockquote class="aloha-cite-wrapper aloha-cite-1400533797187" data-cite-id="1400533797187">There are only two editor widgets based on ContentEditable that I know of: Aloha and hallo.js.</blockquote>
<p>The Guardian’s blog post does a good job of listing other alternatives. The venerable CKEditor provides inline editing, based on ContentEditable, in its latest version: <a href="http://docs.ckeditor.com/#!/guide/dev_inline" class="aloha-link-text" target="_self" hreflang="" title="Inline Editing - CKEditor 4 Documentation">http://docs.ckeditor.com/#!/guide/dev_inline</a> Between CKEditor with its huge feature set, and Scribe, which could be the minimalistic starting point for your own editor, you should be able to find a package that works for your use case.</p>
</div>
<p class="byline" >
<img src="/and/assets/that/are/pictures/of/author/bnf.png" width="18" height="18" />
by <a property="dc:creator" href="http://i.liketightpants.net/authors#bnf">bnf</a> - <a href="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-307"><span property="dc:created" content="2014-05-20T02:09:56">May 20, 2014 2:09 AM</span></a><br />
<a title="Reply" href="javascript:void(0);" onclick="mtReplyCommentOnClick(307, 'bnf')">Reply</a>
</p>
</div>
<div class="comments-parent-container" style="margin-left: 20px;">
</div>
<div property="mt:comment_id" content="310" id="comment-310" resource="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-310" class="comment">
<div class="comment-editor" property="mt:comment_text">
<p>Welcome</p>
</div>
<p class="byline" >
<img src="/and/assets/that/are/pictures/of/author/bnf.png" width="18" height="18" />
by <a property="dc:creator" href="http://i.liketightpants.net/authors#bnf">bnf</a> - <a href="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-310"><span property="dc:created" content="2014-05-20T11:26:47">May 20, 2014 11:26 AM</span></a><br />
<a title="Reply" href="javascript:void(0);" onclick="mtReplyCommentOnClick(310, 'bnf')">Reply</a>
</p>
</div>
<div class="comments-parent-container" style="margin-left: 20px;">
</div>
<div property="mt:comment_id" content="308" id="comment-308" resource="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-308" class="comment">
<div class="comment-editor" property="mt:comment_text">
<blockquote class="aloha-cite-wrapper aloha-cite-1400580234292" data-cite-id="1400580234292">Its layout is a re-appraisal of one of the core fonts available to almost all surfers: Georgia, and its Italic. The striking text-heavy layout uses this typeface for body-text, in unconventionally large headings and lead-ins.</blockquote>
<p>Makes me think of Dave Egger’s resuscitation of Garamond for McSweeney’s. Says Ellen Lupton:</p>
<blockquote class="aloha-cite-wrapper aloha-cite-1400749552089" data-cite-id="1400749552089">This Magazine cover uses the Garamond 3 typeface family in various sizes. Although the typeface is classical and conservative, the obsessive, slightly deranged layout is distinctly contemporary.</blockquote>
<p class="byline">Thinking with Type 2002 p. 44</p>
<p>
<img style="height: 697px; width: 490px; position: relative; margin: 0px; resize: none; zoom: 1; display: inline-block; top: 0px; left: 0px;" src="/and/assets/called/mcsweeneys_09.jpg" title="" class="">
</p>
<p class="byline">McSweeney’s 9, Magazine cover, 2002. Designer and editor: Dave Eggers</p>
</div>
<p class="byline" >
<img src="/and/assets/that/are/pictures/of/author/baseline.png" width="18" height="18" />
by <a property="dc:creator" href="http://i.liketightpants.net/authors#baseline">baseline</a> - <a href="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-308"><span property="dc:created" content="2014-05-20T14:03:53">May 20, 2014 2:03 PM</span></a><br />
<a title="Reply" href="javascript:void(0);" onclick="mtReplyCommentOnClick(308, 'baseline')">Reply</a>
</p>
</div>
<div class="comments-parent-container" style="margin-left: 20px;">
</div>
<div property="mt:comment_id" content="309" id="comment-309" resource="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-309" class="comment">
<div class="comment-editor" property="mt:comment_text">
<p>It’s nice that over the course of a decade they managed to keep the design in the same visual spirit. Though instead of refining it in it, they seem to have regressed slightly. For instance, <a href="https://web.archive.org/web/20030805104948/http://mediamatic.net/" class="aloha-link-text" hreflang="" target="_self" title="Mediamatic: Mediamatic: Mediamatic.net">one can see on archive.org</a> that in 2003 the design was fully fluid, where now it artificially limited to 960 pixels in width, which makes these bars on the top look awkward.</p>
<p>
<img style="border: 1px solid #cccccc; height: 94px; width: 490px; position: relative; margin: 0px; resize: none; zoom: 1; display: inline-block; top: 0px; left: 0px;" src="/and/assets/called/Screen_Shot_2014-05-20_at_12.33.33.png" title="" class="">
<br></p>
<p>Also, the editing view you loved so deeply is still there, but only to edit existing articles—when you make a new article you have your deeply maligned form views:</p>
<p>
<img style="height: 306px; width: 490px; position: relative; margin: 0px; resize: none; zoom: 1; display: inline-block; top: 0px; left: 0px;" src="/and/assets/called/Screen_Shot_2014-05-13_at_18.00.18.png" title="" class="">
<br></p>
<p>
<img src="/and/assets/called/Screen_Shot_2014-05-13_at_17.44.56.png" style="width:490px;height:587px;" alt="" title="">
</p>
<p>And what they were thinking when they added this progress-o-meter is beyond me:</p>
<p>
<img src="/and/assets/called/Screen_Shot_2014-05-20_at_12.58.04.png" style="width:333px;height:436px;" alt="" title="">
</p>
</div>
<p class="byline" >
<img src="/and/assets/that/are/pictures/of/author/baseline.png" width="18" height="18" />
by <a property="dc:creator" href="http://i.liketightpants.net/authors#baseline">baseline</a> - <a href="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-309"><span property="dc:created" content="2014-05-20T15:26:37">May 20, 2014 3:26 PM</span></a><br />
<a title="Reply" href="javascript:void(0);" onclick="mtReplyCommentOnClick(309, 'baseline')">Reply</a>
</p>
</div>
<div class="comments-parent-container" style="margin-left: 20px;">
<div property="mt:comment_id" content="311" id="comment-311" resource="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-311" class="comment comment-reply">
<div class="comment-editor" property="mt:comment_text">
<p>As a programmer, what I find more worrying is that after all this time, being a primarily government funded organisation and making money creating websites for other government funded organisations, they never Open Sourced their content management system <a href="http://www.mediamatic.nl/2466/en/benefits-of-anymeta" class="" hreflang="">anyMeta</a>.</p>
</div>
<p class="byline" >
<img src="/and/assets/that/are/pictures/of/author/bnf.png" width="18" height="18" />
by <a property="dc:creator" href="http://i.liketightpants.net/authors#bnf">bnf</a> - <a href="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-311"><span property="dc:created" content="2014-05-20T13:09:05">May 20, 2014 1:09 PM</span></a><br />
<a title="Reply" href="javascript:void(0);" onclick="mtReplyCommentOnClick(311, 'bnf')">Reply</a>
</p>
</div>
<div class="comments-parent-container" style="margin-left: 20px;">
</div>
</div>
<div property="mt:comment_id" content="312" id="comment-312" resource="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-312" class="comment">
<div class="comment-editor" property="mt:comment_text">
<p>Very interesting bit of polemic.</p>
<p>First, I don't think it's necessary to put GUI and text in opposition. They can both be useful and pleasant in certain contexts. GUI is great when you have a "spontaneous interface" where the user may not have the time or knowledge required to learn how to use it. More expert interfaces require more possibilities for expression than just clicking or tapping at buttons and menus. I don't need emacs on the ticket machine in the subway and I don't want my nuclear reactor to be controlled by a simplistic iPad app.</p>
<p>Some of the text-based interfaces you cite are popular not just because of their hardcore-nerdy street cred but because they use rule-based systems to automate much of their behavior. Ratpoison is a tiling window manager which means windows are arranged in a rule-based grid (hello swiss grid design). If you open a bunch of new windows they will fall into position relative to each other. The keyboard is mostly used to make small adjustments and do things that many power users do with the keyboard even in mainstream floating window managers (i.e. Alt-Tab to switch window focus). This can be a lot tidier and focused when one has a lot of things open.</p>
<p>Since you seem to mostly be talking about text editing systems, I would argue that one big problem with WYSIWYG is that it is based on the idea that the keyboard should only be used for linear text input and small localized editing and that all other operations should be done with the mouse. The mouse is privileged but it's not very expressive. Traditionally, this means you need to have a lot of buttons or menus all over the place which take up space and encourage particular actions. This use of space also means that the GUI has a powerful influence on your perception by use of colors, iconography and default typographic styles. This stands in pretty stark opposition to the blank slate interface of the text-based editor, which leaves you alone to confront your insecurities about the quality of the text you just wrote instead of fiddling around with the fonts. </p>
<p>I was talking to a filmmaker friend recently who still uses windows, despite the fact that most film people have long since switched to the Mac. When I asked him if he didn't get frustrated with Windows, he replied that he got frustrated all the time. Paraphrasing: "it's a crappy unreliable system but I've been using it for years so I usually know what will go wrong and how to cope with it". So I think the enduring popularity of WYSIWYG has something to do with the fact that many people would rather stick to the crappy systems they know, than switch to potentially more powerful ones they don't. And I can respect that*.</p>
<p>To conclude, I agree that there should be more UI with inline editing.** It's way more direct and intuitive. But text-based power-user interfaces have their place too. They are also important as a point of resistance for those of us who feel left out by the mainstream, corporate-dominated GUI culture.</p>
<p>* For more - see Olia Lialina's <a href="http://contemporary-home-computing.org/turing-complete-user/">Turing Complete User</a>.<br/>
** The oldest and for me, still best example is <a href="https://wiki.tils.net/">Tillswiki</a>.</p>
</div>
<p class="byline" >
by <a property="dc:creator" href="http://wintermute.org/brendan">Brendan</a> - <a href="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-312"><span property="dc:created" content="2014-05-23T15:34:56">May 23, 2014 3:34 PM</span></a><br />
<a title="Reply" href="javascript:void(0);" onclick="mtReplyCommentOnClick(312, 'Brendan')">Reply</a>
</p>
</div>
<div class="comments-parent-container" style="margin-left: 20px;">
</div>
<div property="mt:comment_id" content="313" id="comment-313" resource="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-313" class="comment">
<div class="comment-editor" property="mt:comment_text">
<blockquote>HTML5’s ContentEditable property has been around for ages</blockquote>
<p>Not exactly. The ContentEditable property has indeed been around for ages, first implemented in IE 5.5, then partially reverse-engineered by other browser vendors, but was only specified relatively recently (by the WHAT-WG).</p>
<p>On the subject of WYSIWYG editing in HTML, Nick Santos wrote an interesting low-level analysis on how ContentEditable, DOM Ranges and Selections, as currently specified, simply cannot provide a reliable editing experience. For a given input, and a given set of commands, the output can vary from one implementation to another. Therefore the promise of WYSIWYG (a two way mapping of display and structure) is broken.</p>
<p><a href="https://medium.com/medium-eng/122d8a40e480">https://medium.com/medium-eng/122d8a40e480</a></p>
<p>I very much share your desire to see more WYSIWYG and direct manipulation on the web. But it's my understanding that it can't be implemented with ContentEditable. All recent good editors (the one in Google Docs, or CodeMirror, ACE, etc) have dropped ContentEditable, and have re-implemented Ranges, Selections, etc from skratch (see <a href="http://codemirror.net/doc/internals.html">http://codemirror.net/doc/internals.html</a> ).</p>
</div>
<p class="byline" >
by <a property="dc:creator" href="http://area17.com">Ned Baldessin</a> - <a href="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-313"><span property="dc:created" content="2014-05-27T08:15:54">May 27, 2014 8:15 AM</span></a><br />
<a title="Reply" href="javascript:void(0);" onclick="mtReplyCommentOnClick(313, 'Ned Baldessin')">Reply</a>
</p>
</div>
<div class="comments-parent-container" style="margin-left: 20px;">
<div property="mt:comment_id" content="317" id="comment-317" resource="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-317" class="comment comment-reply">
<div class="comment-editor" property="mt:comment_text">
<p>Dear Ned, thanks for your reaction, and the link to the medium article: it is really insightful.</p>
<p>ContentEditable’s redeeming quality is that it works together with the DOM, the object the browser already uses to represent the page. The browser knows how to serialise the DOM to HTML, and the other way around. We have had some really bad experiences, for example, with Etherpad’s WYSIWYG editor. It is implemented in ACE, and uses character ranges to apply formatting. This breaks in unforeseeable ways, and because there is no serialisation format, we can not easily back-up or copy the information on the page. With the Aloha Editor, if something is going wrong, one can at least use the browser’s ‘inspect element’ function to see the structure produced, and to edit this way if necessary.</p>
<p><a href="http://googledocs.blogspot.be/2010/05/whats-different-about-new-google-docs.html" class="" target="_self" hreflang="" title="What’s different about the new Google Docs?">Google’s article on how they created the writing surface for Google Docs</a> is great reading. And they don’t just reinvent contentEditable: they also reinvent they entire layout mechanism of the browser. For anyone not having Google’s resources, though, I wonder if this is a feasible approach. Another problem is that it works great for Google Docs, which is a monolithic application, but when providing ‘in-line editing’ in a CMS, for instance, the solution is going to have to be able to integrate with the existing lay-out model of HTML and CSS.</p>
<p>I do believe you when you say contentEditable in its current form has inherent problems. From this perspective, the Guardian’s Scribe project, is that just lipstick on the proverbial pig? Also, in Nick Santos’ article, he mentions:</p>
<blockquote class="aloha-cite-wrapper aloha-cite-1401217945384" data-cite-id="1401217945384">There have been some rumblings lately from some Chromium contributors (Levi Weintraub, Julie Parent, and Jelte Liebrand) that they want to redo ContentEditable on top of Polymer Elements and Shadow DOM.</blockquote>
<p>I’m not sure exactly what that means (I have yet to wrap my head around the concept of the Shadow DOM), but might this be a fruitful direction? I have already run into the Shadow DOM recently when looking into <a href="https://github.com/Matt-Esch/virtual-dom" class="aloha-link-text" hreflang="" target="_self" title="Matt-Esch/virtual-dom">DOM-diffing</a> for another open problem… how to synchronise several contentEditable widgets across users in real-time!</p>
</div>
<p class="byline" >
<img src="/and/assets/that/are/pictures/of/author/bnf.png" width="18" height="18" />
by <a property="dc:creator" href="http://i.liketightpants.net/authors#bnf">bnf</a> - <a href="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-317"><span property="dc:created" content="2014-05-27T22:12:24">May 27, 2014 10:12 PM</span></a><br />
<a title="Reply" href="javascript:void(0);" onclick="mtReplyCommentOnClick(317, 'bnf')">Reply</a>
</p>
</div>
<div class="comments-parent-container" style="margin-left: 20px;">
</div>
</div>
<div property="mt:comment_id" content="314" id="comment-314" resource="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-314" class="comment">
<div class="comment-editor" property="mt:comment_text">
<p>I think you make many interesting points, and agree with your overall wish that WYSIWYG worked better for building the web. </p>
<p>However blaming the Unix/’Hacker Culture’ and a ‘text fetish’ is, in my view wide of the mark. In my experience, there are more dominant factors driving the poor state of WYSIWYG as a web-editing paradigm:</p>
<ul>
<li>
<p>Semantic web movement - web-pages as ‘information’ need to be search-able, discover-able, linked. WYSIWYG editing (as it now stands) can often be in conflict with this goal.</p>
</li>
<li>
<p>The rise of CSS - Used by website developers to separate content from presentation, but difficult to integrate with WYSIWYG. —- The rise of CSS seems to have co-coincided with the ‘fall’ of Dreamweaver</p>
</li>
<li>
<p>PDFs (mainly created via WYSIWYG inc. Word). It seems no one is reading them on the web. (Because of semantics, search-ability, discover-ability, inability to easily extract information etc. etc). PDFs could be seen as the failure of un-controlled WYSIWYG workflow.</p>
</li>
<li>
<p>Much web content originates from databases, and that information originates from a variety of sources. So WYSIWIG is relatively less important than before. <br>
Basic WYSIWYG editing in CMSs like Wordpress is adequate for short articles. And users love Wordpress.</p>
</li>
<li>
<p>Webpage update(ability), security and maintainability are also key factors in driving towards more text-based entry.</p>
</li>
<li>
<p>The web moves fast - e.g. increasing use of CSS, new HTML5 elements, and Javascript for interactivity. It is complex and difficult for WYSIWIG to keep up. </p>
</li>
</ul>
<p>The link with Macs UNIX underpinnings, web development on Linux and WYSIWYG usage is tenuous. Most website developers use Macs (very GUI); some Windows. </p>
<p>The command line is not just a Unix thing. People working with Windows at a deeper level (programmers, engineers) - just as likely end up using scripts for automating and the cmd line for particular tasks.</p>
<p>Think of Excel as one of the most successful applications ever. Unlike Word, the data is structured. A text field is the primary data entry point. Excel ‘culture’ is pervasive. A lot of web- content originates in Excel.</p>
<p>Similarly workflows for creating print publications and PDFs = The authors write in Word. Authors e-mail the lightly formatted Word file to the DTP specialist. The DTP specialist does all the layout, graphics and styling (InDesign). (plus revise and repeat)</p>
<p>Regarding the last two points, your article might better be titled:
‘Excel culture’ and fear of WYSIWYG.
‘Graphic Design/DTP culture’ and the fear of WYSIWYG.</p>
<p>I think your article would be closer to reality with just one paragraph mentioning the Unix/Hacker culture’s focus on text (it is certainly a factor - but the article really goes overboard)</p>
<p>There are some recent interesting developments such as Drupal 8’s stated goal to embrace in-place WYSIWYG: <a href="http://buytaert.net/from-aloha-to-ckeditor">http://buytaert.net/from-aloha-to-ckeditor</a></p>
</div>
<p class="byline" >
by <a property="dc:creator" href="">Tony</a> - <a href="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-314"><span property="dc:created" content="2014-05-27T12:15:40">May 27, 2014 12:15 PM</span></a><br />
<a title="Reply" href="javascript:void(0);" onclick="mtReplyCommentOnClick(314, 'Tony')">Reply</a>
</p>
</div>
<div class="comments-parent-container" style="margin-left: 20px;">
<div property="mt:comment_id" content="323" id="comment-323" resource="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-323" class="comment comment-reply">
<div class="comment-editor" property="mt:comment_text">
<p>As someone who's written a moderately complex CMS from scratch and maintained it for 10 years, thanks for saving me a lot of typing by covering what I wanted to say and more.</p>
<p>Basically the tendency in CMS to prefer to store content in as simple a format as possible, to my eyes, largely comes down to two things. First, HTML is a mess. Browsers will attempt to parse it no matter how bad it is and WYSIWYG editing of HTML generates bad and/or broken HTML, no one has solved that yet. Formatted text from Word in particular (which arrives as HTML when pasted) is a complete disaster and has to be stripped bare before making its way into a page or it will destroy your page layout and formatting.</p>
<p>The second, and more fundamental, issue is that that content may be for a webpage now, but it's also going to be in an RSS feed, maybe a mobile app, which might not be rendering text as HTML, once it might have gone to a Flash app and in 5 years who knows what system it might have to be displayed in. The universal constant when it comes to displaying speech on a screen is text, not 14pt Times with an embedded image with a 12px gutter, so if you keep your content as simple as possible you're in a far better position to continue using it in ways you hadn't previously thought of.</p>
</div>
<p class="byline" >
by <a property="dc:creator" href="">Tolan Blundell</a> - <a href="/and/hackers-culture-and-the-fear-of-wysiwyg#comment-323"><span property="dc:created" content="2014-05-28T19:54:17">May 28, 2014 7:54 PM</span></a><br />
<a title="Reply" href="javascript:void(0);" onclick="mtReplyCommentOnClick(323, 'Tolan Blundell')">Reply</a>
</p>
</div>
<div class="comments-parent-container" style="margin-left: 20px;">