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 20KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469
  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` element
  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>
  13. Cinéma
  14. — David Larlet</title>
  15. <script>
  16. function toggleTheme(themeName) {
  17. document.documentElement.classList.toggle(
  18. 'forced-dark',
  19. themeName === 'dark'
  20. )
  21. document.documentElement.classList.toggle(
  22. 'forced-light',
  23. themeName === 'light'
  24. )
  25. }
  26. const selectedTheme = localStorage.getItem('theme')
  27. if (selectedTheme !== 'undefined') {
  28. toggleTheme(selectedTheme)
  29. }
  30. </script>
  31. <!-- Documented, feel free to shoot an email. -->
  32. <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  33. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  34. <link rel="preload"
  35. href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
  36. as="font"
  37. type="font/woff2"
  38. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  39. crossorigin>
  40. <link rel="preload"
  41. href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
  42. as="font"
  43. type="font/woff2"
  44. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  45. crossorigin>
  46. <link rel="preload"
  47. href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
  48. as="font"
  49. type="font/woff2"
  50. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  51. crossorigin>
  52. <link rel="preload"
  53. href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
  54. as="font"
  55. type="font/woff2"
  56. media="(prefers-color-scheme: dark)"
  57. crossorigin>
  58. <link rel="preload"
  59. href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
  60. as="font"
  61. type="font/woff2"
  62. media="(prefers-color-scheme: dark)"
  63. crossorigin>
  64. <link rel="preload"
  65. href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
  66. as="font"
  67. type="font/woff2"
  68. media="(prefers-color-scheme: dark)"
  69. crossorigin>
  70. <meta name="description" content="Software is a creative industry with more in common with media production industries than housebuilding.">
  71. <!-- That good ol' feed, subscribe :). -->
  72. <link rel="alternate"
  73. type="application/atom+xml"
  74. title="Feed"
  75. href="/david/log/">
  76. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  77. <link rel="apple-touch-icon"
  78. sizes="180x180"
  79. href="/static/david/icons2/apple-touch-icon.png">
  80. <link rel="icon"
  81. type="image/png"
  82. sizes="32x32"
  83. href="/static/david/icons2/favicon-32x32.png">
  84. <link rel="icon"
  85. type="image/png"
  86. sizes="16x16"
  87. href="/static/david/icons2/favicon-16x16.png">
  88. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  89. <link rel="mask-icon"
  90. href="/static/david/icons2/safari-pinned-tab.svg"
  91. color="#07486c">
  92. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  93. <meta name="msapplication-TileColor" content="#f7f7f7">
  94. <meta name="msapplication-config"
  95. content="/static/david/icons2/browserconfig.xml">
  96. <meta name="theme-color"
  97. content="#f7f7f7"
  98. media="(prefers-color-scheme: light)">
  99. <meta name="theme-color"
  100. content="#272727"
  101. media="(prefers-color-scheme: dark)">
  102. <!-- Is that even respected? Retrospectively? What a shAItshow…
  103. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  104. <meta name="robots" content="noai, noimageai">
  105. <style type="text/css">
  106. .tippy-content {
  107. min-width: 280px;
  108. padding: .5rem;
  109. font-size: calc(var(--fluid-0) * 0.8);
  110. font-family: var(--labor-font);
  111. letter-spacing: initial;
  112. text-align: left;
  113. }
  114. .tippy-content h3 {
  115. margin-top: 0;
  116. }
  117. .tippy-content h3 img {
  118. max-width: 2rem;
  119. max-height: 2rem;
  120. display: inline-block;
  121. }
  122. .tippy-content .tippy-links {
  123. display: flex;
  124. justify-content: space-around;
  125. }
  126. .tippy-content a {
  127. padding: .4rem;
  128. color: #F06048;
  129. }
  130. </style>
  131. <body data-instant-intensity="viewport-all">
  132. <article>
  133. <header>
  134. <hgroup>
  135. <h1>Cinéma</h1>
  136. <p>Le <time datetime="2024-02-21">21 février 2024</time></p>
  137. </hgroup>
  138. </header>
  139. <nav>
  140. <p>
  141. <a rel="prev"
  142. href="/david/2024/02/20/"
  143. title="Publication précédente : Véhicule">← Précédent</a> •
  144. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  145. <a href="/david/recherche/"
  146. title="Aller à la page de recherche"
  147. rel="search" data-no-instant>Recherche</a>
  148. • <a rel="next"
  149. href="/david/2024/02/22/"
  150. title="Publication suivante : Responsabilité">Suivant →</a>
  151. </p>
  152. </nav>
  153. <blockquote lang="en">
  154. <p>Software is a creative industry with more in common with media production industries than&nbsp;housebuilding.</p>
  155. <p><cite><em><a data-link-domain="baldurbjarnason.com" href="https://www.baldurbjarnason.com/2024/software-is-a-medium-of-setbacks/" hreflang="en"
  156. title="Consultation de l’article (anglais)">Software is a medium of setbacks, but a medium’s limitations don’t define the artist</a>
  157. <a href="/david/cache/2024/d133365d1dec62b9ad7ab4c911db863a/" hreflang="en"
  158. data-tippy data-description="Much of the time, progress in software development comes coupled with a matching regression.“We’ve made it better.”(Whispered) “But we’ve also made it worse. The evolution of Apple’s computing devices makes for a decent example."
  159. data-source="https://www.baldurbjarnason.com/2024/software-is-a-medium-of-setbacks/"
  160. data-date="2024-02-21"
  161. data-favicon="https://www.baldurbjarnason.com/dark-bird.svg"
  162. data-domain="baldurbjarnason.com"
  163. ><svg xmlns="http://www.w3.org/2000/svg"
  164. width="24" height="24" viewBox="0 0 24 24" fill="none"
  165. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  166. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  167. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  168. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  169. </svg>
  170. <span class="sr-only">[archive]</span></a></em></cite></p>
  171. </blockquote>
  172. <p>Pour filer la métaphore, je me demande si les assistants à base de <a data-link-domain="vitrinelinguistique.oqlf.gouv.qc.ca" href="https://vitrinelinguistique.oqlf.gouv.qc.ca/fiche-gdt/fiche/26570880/grand-modele-de-langage">grands modèles de langage</a> seraient l’équivalent des environnements verts dans lesquels évoluent les acteur·ices aujourd’hui. Leur métier a changé avec la technologie, leur jeu a dû s’adapter pour transmettre des émotions dans un contexte où iels ne maîtrisent plus du tout la chaîne de représentation de leur travail. J’imagine que même la vérification de leur prise nécessite une bonne dose&nbsp;d’imaginaire.</p>
  173. <p>Quel est leur sentiment à la fin d’une journée de tournage&#8239;? Quel sera le&nbsp;mien&#8239;?</p>
  174. <blockquote lang="en">
  175. <p>Dear Mr. Architect!</p>
  176. <p>Please design and build me a house. I am not quite sure of what I need, so you should use your discretion. My house should have between two and forty-five bedrooms. Just make sure the plans are such that the bedrooms can be easily added or deleted. When you bring the blueprints to me, I will make the final decision of what I want. Also, bring me the cost breakdown for each configuration so that I can arbitrarily pick&nbsp;one.</p>
  177. <p><cite><em><a data-link-domain="gksoft.com" href="http://www.gksoft.com/a/fun/architects.html" hreflang="en"
  178. title="Consultation de l’article (anglais)">If Architects had to work like Programmers</a>
  179. <a href="/david/cache/2024/2ad967b8fc35e160fa8e6c1d2a3b4734/" hreflang="en"
  180. data-tippy data-description="You must be thrilled to be working on an interesting project as this!"
  181. data-source="http://www.gksoft.com/a/fun/architects.html"
  182. data-date="2024-02-21"
  183. data-favicon=""
  184. data-domain="gksoft.com"
  185. ><svg xmlns="http://www.w3.org/2000/svg"
  186. width="24" height="24" viewBox="0 0 24 24" fill="none"
  187. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  188. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  189. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  190. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  191. </svg>
  192. <span class="sr-only">[archive]</span></a></em>, 1995</cite></p>
  193. </blockquote>
  194. <a href="#hr-83" title="Lien vers cette section de la page"><hr id="hr-83" /></a>
  195. <blockquote>
  196. <p>Fracas est un collectif queer et féministe d’aide à la gestion de conflits interpersonnels, de violences et d’agressions au sein de&nbsp;collectifs.</p>
  197. <p><cite><em><a data-link-domain="collectif-fracas.com" href="https://www.collectif-fracas.com/" hreflang="fr"
  198. title="Consultation de l’article">Fracas, collectif queer et féministe d’aide à la gestion de conflits</a>
  199. <a href="/david/cache/2024/f1041ff1c0dfabc719d64a4a5bcb0c10/" hreflang="fr"
  200. data-tippy data-description="Fracas est un collectif queer et féministe d’aide à la gestion de conflits interpersonnels, de violences et d’agressions au sein de collectifs."
  201. data-source="https://www.collectif-fracas.com/"
  202. data-date="2024-02-21"
  203. data-favicon="https://assets-global.website-files.com/60339ece26e0011279a8b071/614c50304051ad041149ae60_favicon.png"
  204. data-domain="collectif-fracas.com"
  205. ><svg xmlns="http://www.w3.org/2000/svg"
  206. width="24" height="24" viewBox="0 0 24 24" fill="none"
  207. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  208. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  209. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  210. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  211. </svg>
  212. <span class="sr-only">[archive]</span></a></em></cite></p>
  213. </blockquote>
  214. <p>Si peu de temps et tellement à&nbsp;explorer.</p>
  215. <p>(<a data-link-domain="cqfd-journal.org" href="https://cqfd-journal.org/Se-reapproprier-nos-conflits" hreflang="fr"
  216. title="Consultation de l’article">Via CQFD</a>
  217. <a href="/david/cache/2024/81e8bd49021e320b84e5d4fbd4c7f587/" hreflang="fr"
  218. data-tippy data-description="En se penchant sur les manières dont sont prises en charge les violences (notamment sexistes et sexuelles) dans les milieux militants, l’ouvrage (...)"
  219. data-source="https://cqfd-journal.org/Se-reapproprier-nos-conflits"
  220. data-date="2024-02-21"
  221. data-favicon="https://cqfd-journal.org/squelettes/favicon.ico"
  222. data-domain="cqfd-journal.org"
  223. ><svg xmlns="http://www.w3.org/2000/svg"
  224. width="24" height="24" viewBox="0 0 24 24" fill="none"
  225. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  226. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  227. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  228. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  229. </svg>
  230. <span class="sr-only">[archive]</span></a> qui arrive à ne faire aucun lien vers le site en question, ça me rend&nbsp;fou…)</p>
  231. <nav>
  232. <p>
  233. <a href="/david/2024/dystopie/"
  234. title="Liste de tous les articles 2024 associés à cette étiquette"
  235. rel="tag">#dystopie</a>
  236. <a href="/david/2024/ia/"
  237. title="Liste de tous les articles 2024 associés à cette étiquette"
  238. rel="tag">#IA</a>
  239. <a href="/david/2024/psychologie/"
  240. title="Liste de tous les articles 2024 associés à cette étiquette"
  241. rel="tag">#psychologie</a>
  242. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  243. </p>
  244. </nav>
  245. <nav>
  246. <p>
  247. <a rel="prev"
  248. href="/david/2024/02/20/"
  249. title="Publication précédente : Véhicule">← Précédent</a> •
  250. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  251. • <a rel="next"
  252. href="/david/2024/02/22/"
  253. title="Publication suivante : Responsabilité">Suivant →</a>
  254. </p>
  255. </nav>
  256. <form action="/david/recherche/" method="get">
  257. <fieldset>
  258. <legend>Recherche</legend>
  259. <label for="input-search">Termes de votre recherche :</label>
  260. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  261. <input type="submit" value="Chercher">
  262. <p id="indexation-infos">
  263. <small>
  264. Seuls les contenus de ces 8 dernières années sont indexés.
  265. </small>
  266. </p>
  267. </fieldset>
  268. </form>
  269. <aside>
  270. <theme-toggle></theme-toggle>
  271. </aside>
  272. </article>
  273. <hr>
  274. <footer>
  275. <p>
  276. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  277. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  278. <a href="http://larlet.com"
  279. title="Go to my English profile"
  280. data-instant>Pro</a>
  281. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  282. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  283. </p>
  284. <template id="theme-selector">
  285. <form>
  286. <style type="text/css">
  287. fieldset div {
  288. text-align: center;
  289. }
  290. </style>
  291. <fieldset>
  292. <legend>Thème</legend>
  293. <div>
  294. <label>
  295. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  296. Auto
  297. </label>
  298. <label>
  299. <input type="radio" value="dark" name="chosen-color-scheme">
  300. Foncé
  301. </label>
  302. <label>
  303. <input type="radio" value="light" name="chosen-color-scheme">
  304. Clair
  305. </label>
  306. </div>
  307. </fieldset>
  308. </form>
  309. </template>
  310. </footer>
  311. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  312. <script>
  313. class ThemeToggle extends HTMLElement {
  314. constructor() {
  315. super()
  316. const themeSelectorTemplate = document.querySelector('#theme-selector')
  317. const form = themeSelectorTemplate.content.firstElementChild
  318. this.attachShadow({ mode: 'open' })
  319. this.shadowRoot.appendChild(form.cloneNode(true))
  320. }
  321. connectedCallback() {
  322. const form = this.shadowRoot.querySelector('form')
  323. form.addEventListener('change', (e) => {
  324. const chosenColorScheme = e.target.value
  325. localStorage.setItem('theme', chosenColorScheme)
  326. toggleTheme(chosenColorScheme)
  327. })
  328. const selectedTheme = localStorage.getItem('theme')
  329. if (selectedTheme && selectedTheme !== 'undefined') {
  330. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  331. }
  332. }
  333. }
  334. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  335. window.addEventListener('load', () => {
  336. let colorsLayer = undefined
  337. let hasDarkRules = false
  338. for (const styleSheet of Array.from(document.styleSheets)) {
  339. let mediaRules = []
  340. for (const layerRule of styleSheet.cssRules) {
  341. if (!(layerRule instanceof CSSLayerBlockRule)) {
  342. continue
  343. }
  344. if (layerRule.name === 'colors') {
  345. colorsLayer = layerRule
  346. }
  347. for (const cssRule of layerRule.cssRules) {
  348. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  349. continue
  350. }
  351. // WARNING: Safari does not have/supports `conditionText`.
  352. if (cssRule.conditionText) {
  353. if (cssRule.conditionText !== prefersColorSchemeDark) {
  354. continue
  355. }
  356. } else {
  357. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  358. continue
  359. }
  360. }
  361. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  362. }
  363. }
  364. // WARNING: do not try to insert a Rule to a styleSheet you are
  365. // currently iterating on, otherwise the browser will be stuck
  366. // in a infinite loop…
  367. for (const mediaRule of mediaRules) {
  368. // Safari requires the `0` second parameter (even if default).
  369. colorsLayer.insertRule(mediaRule.cssText, 0)
  370. hasDarkRules = true
  371. }
  372. }
  373. if (hasDarkRules) {
  374. if ('customElements' in window && !customElements.get('theme-toggle')) {
  375. customElements.define('theme-toggle', ThemeToggle)
  376. }
  377. }
  378. })
  379. </script>
  380. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  381. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  382. <script>
  383. tippy('[data-tippy]', {
  384. content(reference) {
  385. reference.addEventListener('click', (e) => e.preventDefault())
  386. return `
  387. <h3 lang="fr">
  388. <img src="${reference.dataset.favicon}" loading="lazy">
  389. <a href="${reference.dataset.source}"
  390. >Article sur ${reference.dataset.domain}</a></h3>
  391. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  392. <div class="tippy-links" lang="fr">
  393. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  394. </div>
  395. `
  396. },
  397. allowHTML: true,
  398. interactive: true,
  399. delay: [150, 700],
  400. hideOnClick: false
  401. })
  402. </script>
  403. <script type="module">
  404. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  405. const markObserver = new IntersectionObserver((entries, observer) => {
  406. const computedStyle = getComputedStyle(document.documentElement)
  407. const markBackground = computedStyle.getPropertyValue('--mark-background')
  408. for (const entry of entries) {
  409. if (entry.intersectionRatio === 0) continue
  410. const markElement = entry.target
  411. markElement.style.backgroundColor = 'inherit'
  412. const annotation = annotate(
  413. markElement, {
  414. type: 'highlight',
  415. multiline: true,
  416. color: markBackground,
  417. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  418. animate: false
  419. }
  420. )
  421. annotation.show()
  422. observer.unobserve(markElement)
  423. }
  424. }, {threshold: 1.0})
  425. for (const markElement of document.querySelectorAll('mark')) {
  426. markObserver.observe(markElement)
  427. }
  428. </script>
  429. </body>
  430. </html>