Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
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 16KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220
  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>Vidéos — David Larlet</title>
  13. <meta name="description" content="Une page regroupant les vidéos inspirantes regardées en 2020.">
  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. <body class="remarkdown h1-underline h2-underline h3-underline hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  52. <article>
  53. <header>
  54. <h1>Vidéos</h1>
  55. </header>
  56. <nav>
  57. <p class="center">
  58. <a href="/david/" title="Aller à l’accueil" tabindex="1">🏠</a>
  59. </p>
  60. </nav>
  61. <hr>
  62. <main>
  63. <p><em>Une page regroupant les vidéos inspirantes regardées en 2020.</em></p>
  64. <h2 id="american-dream">American Dream <a href="#american-dream" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
  65. <blockquote>
  66. <p>Dans ce documentaire Noam Chomsky décrit les 10 principes de la concentration de la richesse et du pouvoir :</p>
  67. <ol>
  68. <li>Réduire la démocratie</li>
  69. <li>Former l’idéologie</li>
  70. <li>Redessiner l’économie</li>
  71. <li>Déplacer le fardeau</li>
  72. <li>Attaquer la solidarité</li>
  73. <li>Gérer les législateurs</li>
  74. <li>Manipuler les élections</li>
  75. <li>Maîtriser la populace</li>
  76. <li>Fabriquer le consentement</li>
  77. <li>Marginaliser la population</li>
  78. </ol>
  79. <p><cite><em><a href="https://www.youtube-nocookie.com/embed/kpTnYwv-qIE">Requiem for the American Dream</a></em>, Noam Chomsky</cite></p>
  80. </blockquote>
  81. <p>Je retiens notamment de ce documentaire — monté un peu trop lent à mon goût mais le contenu est éclairant — que l’on subit encore le retour de flamme des efforts démocratiques des années 60 qui ont été à l’origine d’une <cite>énorme offensive coordonnée du monde des affaires</cite>.</p>
  82. <p>Sous cet angle, je comprends un peu mieux les ficelles ayant pu mener à la situation actuelle. On pourrait facilement crier au complotisme et en même temps, en prenant un peu de recul, ça semble si facile à mettre en place lorsqu’on est un minimum privilégié.</p>
  83. <p>J’ai apprécié aussi le fait d’énoncer que la société actuelle ne soit pas capitaliste, auquel cas ce ne seraient pas les contribuables qui renfloueraient les banques en cas de krach boursier.</p>
  84. <h2 id="franck-lepage">Franck Lepage <a href="#franck-lepage" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p><a href="https://www.youtube.com/playlist?list=PLFePO0DghdicNrU0KytikJAV310b9i7Gz">Interview été 2019</a> (<a href="https://invidio.us/playlist?list=PLFePO0DghdicNrU0KytikJAV310b9i7Gz">sur invidio.us</a>) sous la forme d’une <code>playlist</code> Google Youtube. J’aimerais pouvoir lier à un endroit autre mais tout de même pérenne, pas facile.</p>
  85. <p>Un montage suivant des grands concepts, ça reste léger et pourtant tout y est. C’est tranquille dans son moulin et ça change de l’ambiance des Thinkerviews. Voir aussi ce qu’il disait sur le <a href="/david/stream/2018/11/29/">mépris de classe</a>.</p>
  86. <h2 id="citizenfour">Citizenfour <a href="#citizenfour" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p>J’ai longtemps reporté le moment de consultation de ce documentaire pensant plutôt bien connaître le sujet et en fait l’intérêt n’est pas celui auquel je m’attendais. C’est assez incroyable d’avoir des <code>rushs</code> des jours qui ont changé le monde et de voir l’intégrité et le courage d’une personne.</p>
  87. <p>Edward Snowden est un héros. Il a même une cape.</p>
  88. <p>Je renouvelle ma question : <a href="/david/stream/2018/06/16/">où sont les lanceurs d’alertes des GAFAM+ ?</a></p>
  89. <h2 id="minimalism">Minimalism <a href="#minimalism" title="Ancre vers cette partie" aria-hidden="true">#</a></h2>
  90. <blockquote lang="en">
  91. <p>Love people and use things because the opposite never works.</p>
  92. <p><cite><em><a href="https://www.imdb.com/title/tt3810760/">Minimalism: A Documentary About the Important Things</a></em></cite></p>
  93. </blockquote>
  94. <p>Un documentaire sur des personnes riches qui décident de ne plus posséder de nombreuses choses. En passant un peu à côté de ce que cela <a href="/david/2020/01/15/#maximalist-assemblage">requiert par ailleurs</a> et de la nécessité d’accumuler lorsqu’on est pauvre.</p>
  95. <p>Il y a pas mal de jolies phrases à écrire sur des murs… tout blancs.</p>
  96. <h2 id="the-game-changers">The Game Changers <a href="#the-game-changers" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p><a href="https://fr.wikipedia.org/wiki/The_Game_Changers">Documentaire</a> assez <a href="https://en.wikipedia.org/wiki/The_Game_Changers#Criticisms">controversé</a> sur le véganisme et son impact sur le corps, notamment dans le sport de haut niveau. Je suis loin d’être <em>vegan</em>, notamment car je consomme encore pas mal d’œufs et de fromage, et j’ai pu observer des transformations sur mon corps mais le contexte était tellement changeant qu’il est difficile d’arriver à la moindre conclusion personnelle.</p>
  97. <p>Ce qui me semble assez clair par contre c’est qu’il s’agit d’un levier important pour moins détériorer la planète. Et ce, pour un inconfort <em>quasi</em> nul. Je ne sais pas si c’est bon pour l’organisme mais ça soulage déjà mon cerveau !</p>
  98. <h2 id="jean-marc-jancovici">Jean-Marc Jancovici <a href="#jean-marc-jancovici" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p><a href="https://www.youtube-nocookie.com/embed/CXA2BA9in30">Jancovici a répondu à nos questions en pleine crise du coronavirus</a> (<a href="https://invidio.us/watch?v=CXA2BA9in30">sur invidious</a>, <a href="https://soundcloud.com/effondrement-imminent/5-jancovici-a-repondu-a-vos-questions-en-pleine-crise-du-coronavirus-19032020">audio sur soundcloud</a>) et cela me donne un autre regard sur la situation pour mon état actuel (19 mars) de conscience sur le sujet.</p>
  99. <p>J’apprécie notamment qu’il s’interroge dès maintenant sur le moment où l’on va devoir arbitrer entre le confinement de toute la population et la survie des <em>boomers</em> qui ont mené à cette situation avec la spéculation infinie (notamment immobilière) et le plein emploi (qui est en fait la pleine énergie).</p>
  100. <p>Mon côté misantro-anthropo-socio-éthologue suit cela à la fois avec détachement et grand intérêt.</p>
  101. <p><a href="https://www.youtube-nocookie.com/embed/QGEai5owA4w">Jancovici a répondu à nos questions en plein confinement</a> (<a href="https://invidio.us/watch?v=QGEai5owA4w">sur invidious</a>, <a href="https://soundcloud.com/effondrement-imminent/6-jancovici-a-repondu-a-vos-questions-en-plein-confinement-16042020">audio sur soundcloud</a>) c’est la suite ( visionnée le 19 avril) et ça aborde pas mal de sujets que j’ai en tête à ce moment sur le monde qui s’en vient.</p>
  102. <h2 id="contagion">Contagion <a href="#contagion" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p>Visionner ce film de 2011 en plein début de crise du Coronavirus (25 mars) rend cette fiction un peu trop réaliste à mon goût ! Pourtant tout y est : la propagation rapide depuis l’Asie, la transmission depuis une chauve-souris (!), les loupés/mensonges de l’administration, le besoin d’un vaccin, les complots faciles sur Internet, le souvenir de la non-panique du H1N1, etc.</p>
  103. <details>
  104. <summary>Divulgâcheur</summary>
  105. <p>Ils finissent par trouver un vaccin, ce qui pose un autre problème qui est celui de sa diffusion sans panique/émeute. On aurait peut-être des choses à apprendre sur le sujet…</p>
  106. </details>
  107. <h2 id="jusquau-declin">Jusqu’au déclin <a href="#jusquau-declin" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p>J’avais besoin de me changer les idées alors pourquoi pas un film sur le survivalisme qui allait forcément être caricatural ?</p>
  108. <p>Et puis finalement, pas pire. J’ai apprécié le contexte vu que je vois peu de films québécois. Le <em>scenario</em> comporte des rebondissements assez inattendus ce qui rend le truc difficilement crédible mais c’est ce dont j’avais besoin.</p>
  109. <p>Cerise sur le gâteau, je me rends compte que j’étais sur le pont de la dernière scène il y a un mois (4 mars).</p>
  110. <p><em>La <a href="/david/bushcraft/">forêt</a> me manque.</em></p>
  111. <figure>
  112. <img src="/static/david/2020/pont_ouareau.jpg"
  113. alt="Vue depuis le pont qui enjambe la rivière Ouareau."
  114. loading="lazy" width="1024" height="1024" />
  115. <figcaption>Photo prise depuis le pont.</figcaption>
  116. </figure>
  117. <h2 id="the-last-dance">The Last Dance <a href="#the-last-dance" title="Ancre vers cette partie" aria-hidden="true">#</a></h2><p>J’ai finalement vu <a href="https://en.wikipedia.org/wiki/The_Last_Dance_(TV_series)">ce documentaire</a> où des millionnaires parlent d’autres millionnaires. J’ai joué au basketball pendant ces années là, beaucoup, <em>vraiment</em> beaucoup. J’avais le maillot de Jordan et ses chaussures. Aussi, difficile de ne pas s’y retrouver et tout est fait pour ça. Une chose qui m’a marqué dans je ne sais plus quel épisode, c’est de montrer que Nike est devenu la marque actuelle en grande partie grâce au concours de Mickael Jordan à cette époque.</p>
  118. <p>Au vu de la popularité sur Netflix, ça me donne une bonne idée du pourcentage de la <a href="https://www.numerama.com/business/599695-un-francais-sur-dix-paie-un-abonnement-a-netflix.html">population des abonné·e·s</a> (<a href="/david/cache/2020/f7f37a2f04e53d5fef5189fbd172f5b7/">cache</a>) qui a mon âge… <em>good shot!</em></p>
  119. <hr />
  120. <p><em>Note : je regarde aussi des navets beaucoup moins avouables, je suis même allé au bout de la première saison de « The Witcher », c’est dire ma résistance à la nullité.</em></p>
  121. </main>
  122. <nav>
  123. <p class="center">
  124. <a href="/david/2020/" title="Liste des publications récentes">↑</a>
  125. </p>
  126. </nav>
  127. </article>
  128. <hr>
  129. <footer>
  130. <p>
  131. <a href="/david/" title="Aller à l’accueil">🏠</a> •
  132. <a href="/david/log/" title="Accès au flux RSS">🤖</a> •
  133. <a href="http://larlet.com" title="Go to my English profile" data-instant>🇨🇦</a> •
  134. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">📮</a> •
  135. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">🧚</abbr>
  136. </p>
  137. <template id="theme-selector">
  138. <form>
  139. <fieldset>
  140. <legend>Thème</legend>
  141. <label>
  142. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  143. </label>
  144. <label>
  145. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  146. </label>
  147. <label>
  148. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  149. </label>
  150. </fieldset>
  151. </form>
  152. </template>
  153. </footer>
  154. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module" defer></script>
  155. <script type="text/javascript">
  156. function loadThemeForm(templateName) {
  157. const themeSelectorTemplate = document.querySelector(templateName)
  158. const form = themeSelectorTemplate.content.firstElementChild
  159. themeSelectorTemplate.replaceWith(form)
  160. form.addEventListener('change', (e) => {
  161. const chosenColorScheme = e.target.value
  162. localStorage.setItem('theme', chosenColorScheme)
  163. toggleTheme(chosenColorScheme)
  164. })
  165. const selectedTheme = localStorage.getItem('theme')
  166. if (selectedTheme && selectedTheme !== 'undefined') {
  167. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  168. }
  169. }
  170. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  171. window.addEventListener('load', () => {
  172. let hasDarkRules = false
  173. for (const styleSheet of Array.from(document.styleSheets)) {
  174. let mediaRules = []
  175. for (const cssRule of styleSheet.cssRules) {
  176. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  177. continue
  178. }
  179. // WARNING: Safari does not have/supports `conditionText`.
  180. if (cssRule.conditionText) {
  181. if (cssRule.conditionText !== prefersColorSchemeDark) {
  182. continue
  183. }
  184. } else {
  185. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  186. continue
  187. }
  188. }
  189. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  190. }
  191. // WARNING: do not try to insert a Rule to a styleSheet you are
  192. // currently iterating on, otherwise the browser will be stuck
  193. // in a infinite loop…
  194. for (const mediaRule of mediaRules) {
  195. styleSheet.insertRule(mediaRule.cssText)
  196. hasDarkRules = true
  197. }
  198. }
  199. if (hasDarkRules) {
  200. loadThemeForm('#theme-selector')
  201. }
  202. })
  203. </script>
  204. </body>
  205. </html>