A place to cache linked articles (think custom and personal wayback machine)
Du kannst nicht mehr als 25 Themen auswählen Themen müssen mit entweder einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.

index.html 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
  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>TikTok and the coming of infinite media (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="http://www.roughtype.com/?p=8677">
  55. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick">
  56. <article>
  57. <header>
  58. <h1>TikTok and the coming of infinite media</h1>
  59. </header>
  60. <nav>
  61. <p class="center">
  62. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  63. <a href="http://www.roughtype.com/?p=8677" title="Lien vers le contenu original">Source originale</a>
  64. </p>
  65. </nav>
  66. <hr>
  67. <main>
  68. <figure class="wp-block-image"><img src="http://www.roughtype.com/wp/wp-content/plugins/jetpack/modules/lazy-images/images/1x1.trans.gif" alt="" class="wp-image-8691" data-lazy-src="https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?fit=625%2C294" data-lazy-srcset="https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?w=1656 1656w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?resize=300%2C141 300w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?resize=768%2C361 768w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?resize=1024%2C481 1024w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?resize=624%2C293 624w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?w=1250 1250w" data-lazy-sizes="(max-width: 625px) 100vw, 625px"/><noscript><img src="https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?fit=625%2C294" alt="" class="wp-image-8691" srcset="https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?w=1656 1656w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?resize=300%2C141 300w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?resize=768%2C361 768w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?resize=1024%2C481 1024w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?resize=624%2C293 624w, https://i2.wp.com/www.roughtype.com/wp/wp-content/uploads/2020/01/tiktok.jpg?w=1250 1250w" sizes="(max-width: 625px) 100vw, 625px"/></noscript></figure>
  69. <p>If Instagram <a href="http://www.roughtype.com/?p=2106">showed</a> us what a world without art looks like, TikTok shows us what a world without shame looks like. The old virtues of restraint — prudence, discretion, tact — are gone. There is only one virtue: to be seen. In TikTok’s world, which more and more is our world, shamelessness has lost its negative connotations and become an asset. You may not get fifteen minutes of fame, but you will get fifteen seconds.</p>
  70. <p>The rise of TikTok heralds something bigger, though: a reconfiguration of media. As mass media defined the twentieth century, so the twenty-first will be defined by infinite media. The media business has always aspired to endlessness, to securing an unbroken hold on the sense organs of the public. TikTok at last achieves it. More than YouTube, more than Facebook, more than Instagram, more than Twitter, TikTok reveals the sticky new atmosphere of our lives.</p>
  71. <p>Infinite media requires endlessness on two fronts: supply and demand. Shamelessness, in this context, is best understood as a supply-side resource, a means of production. To manufacture the unlimited supply of content that an app like TikTok needs, the total productive capacity of the masses needs to be <a href="http://www.roughtype.com/?p=634">mobilized</a>. That requires not just the ready availability of media-production tools (the smartphone’s camera and microphone and its editing software) and the existence of a universal broadcast network (the internet), but also a culture that encourages and celebrates self-exposure and self-promotion. Vanity must go unchecked by modesty. The showoff, once a risible figure, must become an aspirational one.</p>
  72. <p>On the demand side, too, TikTok achieves endlessness. It is endless horizontally, each video an infinitely looping GIF, and it is endless vertically, the videos stacked up in an infinite scroll. There is no exit from TikTok’s cinema. One college student I know, having recently downloaded the app, told me that she now finds herself watching TikToks until her iPhone battery dies. She can’t pull her eyes away from the screen, but she is still able to withstand the temptation to recharge her phone while the app’s running. Electrical failure is the last defense against infinite media.</p>
  73. <p>TikTok’s Chinese owner, ByteDance, specializes in using machine-learning algorithms to tailor content to individual appetites. (With artificial intelligence, there is accounting for taste.) “Personalised information flows will dictate the way,” the company <a href="https://ailab.bytedance.com/">declares</a> in a vaguely Maoish aphorism in its mission statement. It doesn’t need to build exhaustive data profiles of its users as, say, Facebook does. It just watches what you watch, and how you watch it, and then feeds you whatever video has the highest calculated probability of tickling your fancy. You feel the frisson of discovery, but behind the scenes it’s just a machine pumping out widgets. “TikTok deals in the illusion, at least, of revelation,” <em>New York Times</em> critic Amanda Hess <a href="https://www.nytimes.com/interactive/2019/10/10/arts/TIK-TOK.html">writes</a>. Not to mention the illusion, at least, of egalitarianism, of communalism, of joy.</p>
  74. <blockquote class="wp-block-quote"><p>When I tap the heart on some high school kid’s weird video, I feel a flicker of pride, as if I am supporting him in some way. But all I am really doing is demanding more.</p></blockquote>
  75. <p>TikTok is at once a manifestation and a parody of what Stanford communication professor Fred Turner has <a href="https://www.press.uchicago.edu/ucp/books/book/chicago/D/bo10509859.html">termed</a> the “democratic surround.” From the 1940s through the 1960s, media-minded intellectuals promoted the ideal of a polyphonic multimedia experience that would be created and consumed by the public. The democratic surround would not only free the masses from centrally controlled media, with its authoritarian aura, but would raise the collective consciousness. TikTok gives us the democratic surround, but it turns out to be a pantomime. The central authority is still there, hidden behind a mask of your face.*</p>
  76. <p>Infinite media sucks in all media, from news to entertainment to communication. Look at what’s going on in pop. Each TikTok has a soundtrack, a looping clip spinning on a wee turntable in the corner of the screen. The music business, seeing TikTok’s ability to turn songs into memes, has already developed a craving for the app’s yee yee juice. As Jia Tolentini <a href="https://www.newyorker.com/magazine/2019/09/30/how-tiktok-holds-our-attention">explains</a> in the <em>New Yorker</em>:</p>
  77. <blockquote class="wp-block-quote"><p>Certain musical elements serve as TikTok catnip: bass-heavy transitions that can be used as punch lines; rap songs that are easy to lip-synch or include a narrative-friendly call and response. A twenty-six-year-old Australian producer named Adam Friedman, half of the duo Cookie Cutters, told me that he was now concentrating on lyrics that you could act out with your hands. “I write hooks, and I try it in the mirror—how many hand movements can I fit into fifteen seconds?” he said. “You know, goodbye, call me back, peace out, F you.”</p></blockquote>
  78. <p>The aural hooks amplify the visual hooks, and vice versa, to saturate the sensorium. When it comes to the infinite, more is always better.</p>
  79. <p>Boomers may struggle to make sense of TikTok, but they’ll appreciate its most obvious antecedent: the Ed Sullivan Show. Squeeze old Ed through a wormhole and give him a spin in a Vitamix, and you get TikTok. There’s Liza Minnelli singing “MacArthur Park,” then there’s a guy spinning plates on the ends of sticks, then there’s Señor Wences ventriloquizing through a hand puppet. Except it’s all us. We’re Liza, we’re the plate-spinning guy, we’re Señor Wences, we’re the puppet. We’re even Ed, flicking acts on and off the stage with the capriciousness of a pagan god.</p>
  80. <p>Every Sunday night during the sixties the nation found itself glued to the set, engrossed in a variety show. It was an omen.</p>
  81. <p>___________<br/>*In a recent essay, collected in the book <em>Trump and the Media</em> (reviewed <a href="https://lareviewofbooks.org/article/can-journalism-be-saved">here</a> by me), Turner argues that the democratization of media may paradoxically breed authoritarianism.<br/></p>
  82. </main>
  83. </article>
  84. <hr>
  85. <footer>
  86. <p>
  87. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  88. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  89. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  90. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  91. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  92. </p>
  93. <template id="theme-selector">
  94. <form>
  95. <fieldset>
  96. <legend>Thème</legend>
  97. <label>
  98. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  99. </label>
  100. <label>
  101. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  102. </label>
  103. <label>
  104. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  105. </label>
  106. </fieldset>
  107. </form>
  108. </template>
  109. </footer>
  110. <script type="text/javascript">
  111. function loadThemeForm(templateName) {
  112. const themeSelectorTemplate = document.querySelector(templateName)
  113. const form = themeSelectorTemplate.content.firstElementChild
  114. themeSelectorTemplate.replaceWith(form)
  115. form.addEventListener('change', (e) => {
  116. const chosenColorScheme = e.target.value
  117. localStorage.setItem('theme', chosenColorScheme)
  118. toggleTheme(chosenColorScheme)
  119. })
  120. const selectedTheme = localStorage.getItem('theme')
  121. if (selectedTheme && selectedTheme !== 'undefined') {
  122. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  123. }
  124. }
  125. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  126. window.addEventListener('load', () => {
  127. let hasDarkRules = false
  128. for (const styleSheet of Array.from(document.styleSheets)) {
  129. let mediaRules = []
  130. for (const cssRule of styleSheet.cssRules) {
  131. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  132. continue
  133. }
  134. // WARNING: Safari does not have/supports `conditionText`.
  135. if (cssRule.conditionText) {
  136. if (cssRule.conditionText !== prefersColorSchemeDark) {
  137. continue
  138. }
  139. } else {
  140. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  141. continue
  142. }
  143. }
  144. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  145. }
  146. // WARNING: do not try to insert a Rule to a styleSheet you are
  147. // currently iterating on, otherwise the browser will be stuck
  148. // in a infinite loop…
  149. for (const mediaRule of mediaRules) {
  150. styleSheet.insertRule(mediaRule.cssText)
  151. hasDarkRules = true
  152. }
  153. }
  154. if (hasDarkRules) {
  155. loadThemeForm('#theme-selector')
  156. }
  157. })
  158. </script>
  159. </body>
  160. </html>