A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 22KB

3 yıl önce
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>My website is a shifting house next to a river of knowledge. What could yours be? (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f0f0ea">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f0f0ea">
  26. <!-- Documented, feel free to shoot an email. -->
  27. <link rel="stylesheet" href="/static/david/css/style_2020-06-19.css">
  28. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  29. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <script type="text/javascript">
  36. function toggleTheme(themeName) {
  37. document.documentElement.classList.toggle(
  38. 'forced-dark',
  39. themeName === 'dark'
  40. )
  41. document.documentElement.classList.toggle(
  42. 'forced-light',
  43. themeName === 'light'
  44. )
  45. }
  46. const selectedTheme = localStorage.getItem('theme')
  47. if (selectedTheme !== 'undefined') {
  48. toggleTheme(selectedTheme)
  49. }
  50. </script>
  51. <meta name="robots" content="noindex, nofollow">
  52. <meta content="origin-when-cross-origin" name="referrer">
  53. <!-- Canonical URL for SEO purposes -->
  54. <link rel="canonical" href="https://thecreativeindependent.com/people/laurel-schwulst-my-website-is-a-shifting-house-next-to-a-river-of-knowledge-what-could-yours-be/">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>My website is a shifting house next to a river of knowledge. What could yours be?</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="https://thecreativeindependent.com/people/laurel-schwulst-my-website-is-a-shifting-house-next-to-a-river-of-knowledge-what-could-yours-be/" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <h2 id="what-is-a-website">What is a website?</h2>
  69. <p>For the past handful of years, I’ve been teaching courses about interactive design and the internet.</p>
  70. <p>I teach within art departments at universities, so we learn about the internet’s impact on art—and vice versa—and how technological advance often coincides with artistic development.</p>
  71. <p>In class, we make websites. To do this, we learn the elemental markup and code languages of the web—HTML, CSS, and some JavaScript.</p>
  72. <p>However, sometimes after the semester is over, I receive perplexing emails from students asking, “So how do I <em>actually</em> make a website?”</p>
  73. <p>This sparked my own questioning. “What is a website, anyway?” It’s easy to forget. Today there are millions of ways to make a website, and the abundance is daunting. But at its core, a website is still the same as ever before:</p>
  74. <p>A website is a file or bundle of files living on a server somewhere. A server is a computer that’s always connected to the internet, so that when someone types your URL in, the server will offer up your website. Usually you have to pay for a server. You also have to pay for a domain name, which is an understandable piece of language that points to an IP. An IP is a string of numbers that is an address to your server.</p>
  75. <p>Links (rendered default blue and underlined—they’re the hypertext “HT” in HTML) are the oxygen of the web. Not all websites have links, but all links connect to other webpages, within the same site or elsewhere.</p>
  76. <p>But my students already know this! So when they ask me about <em>actually</em> making a website, they are referring to a website <em>in the world</em> … <em>today</em>.</p>
  77. <p>It’s healthy to acknowledge today’s web is much different than the web many of us grew up using. So when they ask how to make a website (despite having already “learned”), they are alluding to the technological friction and social pressures that often come along with creating and maintaining a website in 2018.</p>
  78. <p>Although they may seem initially accommodating and convenient to their users, universally popular social media sites—like Facebook, Instagram, Snapchat, and Pinterest—are private companies that prioritize advertising above their users’ needs. Their users’ happiness is not the primary focus, so it’s perfectly normal for you to feel anxiety when using or even thinking about social media. In this age of digital cacophony dominated by these platforms, no one is looking out for you… but you. It makes perfect sense, then, when individuals tell me they want their website to do the job of “setting the record straight” on who they are and what they do.</p>
  79. <p>However, clarity is one of many possible intentions for a website. There are other legitimate states of mind capable of communication—a surprising, memorable, monumental, soothing, shocking, unpredictable, radically boring, bizarre, mind-blowing, very quiet and subtle, and/or amazing website could work. You also need not limit yourself to only one website—as perhaps you’d like to confuse or surprise with multiple.</p>
  80. <p>My favorite aspect of websites is their duality: they’re both subject and object at once. In other words, a website creator becomes both author and architect simultaneously. There are endless possibilities as to what a website could be. What kind of room is a website? Or is a website more like a house? A boat? A cloud? A garden? A puddle? Whatever it is, there’s potential for a self-reflexive feedback loop: when you put energy into a website, in turn the website helps form your own identity.</p>
  81. <h2 id="why-have-a-website">Why have a website?</h2>
  82. <p>Today more than ever, we need individuals rather than corporations to guide the web’s future. The web is called the web because its vitality depends on just that—an interconnected web of individual nodes breathing life into a vast network. This web needs to actually work for people instead of being powered by a small handful of big corporations—like Facebook/Instagram, Twitter, and Google.</p>
  83. <p>Individuals can steer the web back to its original architecture simply by having a website. I think artists, in particular, could be instrumental in this space—showing the world where the web can go.</p>
  84. <p>Artists excel at creating worlds. They do this first for themselves and then, when they share their work, for others. Of course, world-building means creating everything—not only making things inside the world and also the surrounding world itself—the language, style, rules, and architecture.</p>
  85. <p>This is why websites are so important. They allow the author to create not only works (the “objects”) but also the world (the rooms, the arrangement of rooms, the architecture!). Ideally, the two would inform each other in a virtuous, self-perfecting loop. This can be incredibly nurturing to an artist’s practice.</p>
  86. <p>To those creative people who say “I don’t need a website,” I ask: why not have a personal website that works strategically, in parallel to your other activities? How could a website complement what you already do rather than competing or repeating? How can you make it fun or thought-provoking or (insert desired feeling here) for you? How can the process of making and cultivating a website contribute to your approach?</p>
  87. <p>A website can be anything. It doesn’t (and probably shouldn’t) be an archive of your complete works. That’s going to be dead the moment you publish. A website, or anything interactive, is inherently unfinished. It’s imperfect—maybe sometimes it even has a few bugs. But that’s the beauty of it. Websites are living, temporal spaces. What happens to websites after death, anyway?</p>
  88. <h2 id="what-can-a-website-be">What can a website be?</h2>
  89. <p><strong>Website as room</strong></p>
  90. <p>In an age of information overload, a room is comforting because it’s finite, often with a specific intended purpose.</p>
  91. <div class="arena-block">
  92. <center><img src="https://d2w9rnfcy7mm78.cloudfront.net/2156742/original_dad9fec02b2d60598cf24bce07371e64.jpg" /></center>
  93. <p>Louis Rossetto</p>
  94. </div>
  95. <p>Simultaneously, a room can be flexible: you can shift its contents or even include a temporary partition, depending on occasion. You can also position elements in spatial juxtaposition, or create entrances to adjacent rooms through links.</p>
  96. <p>In the early days of The Creative Independent, we sometimes thought of TCI’s website like a <a href="https://blog.lareviewofbooks.org/interviews/creative-independent-art-interview/">house next to a river</a>. We considered the interviews the flowing water, as they were our house’s nutrients and source of life. We would collect and drink from the water every day. But sometimes, depending on its nutrient makeup, the water would change our house. We’d wake up to see a new door where a picture frame once was. Knowledge became the architect.</p>
  97. <p>Like any metaphor, it’s not perfect. For better or worse, it’s much more difficult to delete a building than a website.</p>
  98. <div class="arena-block">
  99. <center><img src="https://d2w9rnfcy7mm78.cloudfront.net/2156743/original_10f0b57c8b7f1bb981ed6399ea92a33d.jpg" /></center>
  100. <p>Orit Gat</p>
  101. </div>
  102. <p><strong>Website as shelf</strong></p>
  103. <p>Zooming into this room inside this house, we see a shelf. Maybe a shelf is easier to think about than a whole room. What does one put on a shelf? Books and objects from life? Sure, go ahead. Thankfully there’s nothing too heavy on the shelf, or else it would break. A few small things will do, knowledge-containing or not. Plus, lighter things are easy to change out. Is a book or trinket “so last year?” Move it off the shelf! Consider what surprising juxtapositions you can make on your little shelf.</p>
  104. <p><strong>Website as plant</strong></p>
  105. <p>Plants can’t be rushed. They grow on their own. Your website can be the same way, as long as you pick the right soil, water it (but not too much), and provide adequate sunlight. Plant an idea seed one day and let it gradually grow.</p>
  106. <p>Maybe it will flower after a couple of years. Maybe the next year it’ll bear fruit, if you’re lucky. Fruit could be friends or admiration or money—success comes in many forms. But don’t get too excited or set goals: that’s not the idea here. Like I said, plants can’t be rushed.</p>
  107. <div class="arena-block">
  108. <center><img src="https://d2w9rnfcy7mm78.cloudfront.net/2175982/original_0a8da472fc1d1d47a2552efe8ae27a17.png" /></center>
  109. <p>Paul Ford</p>
  110. </div>
  111. <p><strong>Website as garden</strong></p>
  112. <p>Fred Rogers said you can grow ideas in the garden of your mind. Sometimes, once they’re little seedlings and can stand on their own, it helps to plant them outside, in a garden, next to the others.</p>
  113. <p>Gardens have their own ways each season. In the winter, not much might happen, and that’s perfectly fine. You might spend the less active months journaling in your notebook: less output, more stirring around on input. You need both. Plants remind us that life is about balance.</p>
  114. <p>It’s nice to be outside working on your garden, just like it’s nice to quietly sit with your ideas and place them onto separate pages.</p>
  115. <div class="arena-block">
  116. <center><img src="https://d2w9rnfcy7mm78.cloudfront.net/2178263/original_9a6075c9dfe65a42ebf790872a8f1332.png" /></center>
  117. <p>Fred Rogers</p>
  118. </div>
  119. <p><strong>Website as puddle</strong></p>
  120. <p>A website could also be a puddle. A puddle is a temporary collection of rainwater. They usually appear after rainstorms. Like a storm, creating a website can happen in a burst. Sometimes it’s nice to have a few bursts/storms of creating a website, since the zone can be so elusive. Some people even call rain “computer weather.”</p>
  121. <p>There is also no state of “completeness” to a website, like a puddle, since they’re ephemeral by nature. Sometimes they can be very big and reflective. Despite their temporal nature, I’ve even seen some creatures thrive in puddles. Meanwhile, some smaller puddles may only last a day.</p>
  122. <p>Not everything, even the most beautiful puddle with its incredible reflective surface, needs to last long. If the world doesn’t end tomorrow, there will be another storm. And where there’s a hole, a puddle will appear again.</p>
  123. <p>Puddles evaporate slowly over time. It might be difficult, but I would love to see a website evaporate slowly, too.</p>
  124. <p><strong>Website as thrown rock that’s now falling deep into the ocean</strong></p>
  125. <p>Sometimes you don’t want a website that you’ll have to maintain. You have other things to do. Why not consider your website a beautiful rock with a unique shape which you spent hours finding, only to throw it into the water until it hits the ocean floor? You will never know when it hits the floor, and you won’t care.</p>
  126. <p>Thankfully, rocks are plentiful and you can do this over and over again, if you like. You can throw as many websites as you want into the ocean. When an idea comes, find a rock and throw it.</p>
  127. <div class="arena-block">
  128. <center><img src="https://d2w9rnfcy7mm78.cloudfront.net/2156745/original_afec0cbff111cc56530f1ad954e6e585.jpg" /></center>
  129. <p>J.R. Carpenter</p>
  130. </div>
  131. <h2 id="the-web-is-what-we-make-it">The web is what we make it</h2>
  132. <p>While an individual website could be any of those metaphors I mentioned above, I believe the common prevailing metaphor—the internet as cloud—is problematic. The internet is not one all-encompassing, mysterious, and untouchable thing. (In <a href="https://noahveltman.com/internet-shape/">early patent drawings depicting the internet</a>, it appears as related shapes: a blob, brain, or explosion.) These metaphors obfuscate the reality that the internet is made up of individual nodes: individual computers talking to other individual computers.</p>
  133. <p><img src="http://tci-assets.s3.amazonaws.com/uploads/laurel-schwulst-cloud.png" alt="laurel-schwulst-cloud.png" /></p>
  134. <p><em class="caption"></em></p>
  135. <p>The World Wide Web recently turned 29. On the web’s birthday, Tim Berners Lee, its creator, published a <a href="https://webfoundation.org/2018/03/web-birthday-29/">letter</a> stating the web’s current state of threat. He says that while it’s called the “World Wide Web,” only about half the world is connected, so we should close this digital divide.</p>
  136. <p>But at the same time, Berners Lee wants to make sure this thing we’re all connecting to is truly working for us, as individuals: “I want to challenge us all to have greater ambitions for the web. I want the web to reflect our hopes and fulfill our dreams, rather than magnify our fears and deepen our divisions.”</p>
  137. <p><img src="http://tci-assets.s3.amazonaws.com/uploads/laurel-schwulst-flock.png" alt="laurel-schwulst-flock.png" /></p>
  138. <p><em class="caption"></em></p>
  139. <p>“Metaphor unites reason and imagination,” says George Lakoff and Mark Johnson in their book, <em>Metaphors We Live By</em> (1980). “Metaphors are not merely things to be seen beyond. In fact, one can see beyond them only by using other metaphors. It is as though the ability to comprehend experience through metaphor were a sense, like seeing or touching or hearing, with metaphors providing the only ways to perceive and experience much of the world. Metaphor is as much a part of our functioning as our sense of touch, and as precious.”</p>
  140. <p>Instead of a cloud, let’s use a metaphor that makes the web’s individual, cooperative nodes more visible. This way, we can remember the responsibility we each have in building a better web. The web is a flock of birds or a sea of punctuation marks, each tending or forgetting about their web garden or puddle home with a river of knowledge nearby.</p>
  141. <p>If a website has endless possibilities, and our identities, ideas, and dreams are created and expanded by them, then it’s instrumental that websites progress along with us. It’s especially pressing when forces continue to threaten the web and the internet at large. In an age of information overload and an increasingly commercialized web, artists of all types are the people to help. Artists can think expansively about what a website can be. Each artist should create their own space on the web, for a website is an individual act of collective ambition.</p>
  142. <p><hr />
  143. <p><em>To accompany this essay, I’ve created a channel on Are.na called “<a href="https://www.are.na/the-creative-independent-1522276020/sparrows-talking-about-the-future-of-the-web">Sparrows talking about the future of the web</a>.” There you’ll find a handful of quotes from essays, also linked, that informed this piece.</em></p></p>
  144. <div class="arena-block">
  145. <center><img src="https://d2w9rnfcy7mm78.cloudfront.net/2175983/original_2f574d74fc77a94d79e1d466669ab677.png" /></center>
  146. <p>Tim Berners Lee</p>
  147. </div>
  148. </main>
  149. </article>
  150. <hr>
  151. <footer>
  152. <p>
  153. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  154. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  155. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  156. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  157. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  158. </p>
  159. <template id="theme-selector">
  160. <form>
  161. <fieldset>
  162. <legend>Thème</legend>
  163. <label>
  164. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  165. </label>
  166. <label>
  167. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  168. </label>
  169. <label>
  170. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  171. </label>
  172. </fieldset>
  173. </form>
  174. </template>
  175. </footer>
  176. <script type="text/javascript">
  177. function loadThemeForm(templateName) {
  178. const themeSelectorTemplate = document.querySelector(templateName)
  179. const form = themeSelectorTemplate.content.firstElementChild
  180. themeSelectorTemplate.replaceWith(form)
  181. form.addEventListener('change', (e) => {
  182. const chosenColorScheme = e.target.value
  183. localStorage.setItem('theme', chosenColorScheme)
  184. toggleTheme(chosenColorScheme)
  185. })
  186. const selectedTheme = localStorage.getItem('theme')
  187. if (selectedTheme && selectedTheme !== 'undefined') {
  188. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  189. }
  190. }
  191. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  192. window.addEventListener('load', () => {
  193. let hasDarkRules = false
  194. for (const styleSheet of Array.from(document.styleSheets)) {
  195. let mediaRules = []
  196. for (const cssRule of styleSheet.cssRules) {
  197. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  198. continue
  199. }
  200. // WARNING: Safari does not have/supports `conditionText`.
  201. if (cssRule.conditionText) {
  202. if (cssRule.conditionText !== prefersColorSchemeDark) {
  203. continue
  204. }
  205. } else {
  206. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  207. continue
  208. }
  209. }
  210. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  211. }
  212. // WARNING: do not try to insert a Rule to a styleSheet you are
  213. // currently iterating on, otherwise the browser will be stuck
  214. // in a infinite loop…
  215. for (const mediaRule of mediaRules) {
  216. styleSheet.insertRule(mediaRule.cssText)
  217. hasDarkRules = true
  218. }
  219. }
  220. if (hasDarkRules) {
  221. loadThemeForm('#theme-selector')
  222. }
  223. })
  224. </script>
  225. </body>
  226. </html>