15 changed files with 1047 additions and 60 deletions
+ 9
- 1
david/2024/01/31/index.html
View File
| @@ -125,12 +125,16 @@ | |||
| title="Aller à la page de recherche" | |||
| rel="search" data-no-instant>Recherche</a> | |||
| • <a rel="next" | |||
| href="/david/2024/02/01/" | |||
| title="Publication suivante : Vision">Suivant →</a> | |||
| </p> | |||
| </nav> | |||
| <p>Je termine mon mécénat de compétence avec uMap sur ces 4 derniers mois (25 jours de travail). Je suis très content d’avoir pu faire cette expérience avec / grâce à Scopyleft et OSM-FR.</p> | |||
| <p>Voici les notes que j’avais prises avant d’établir une Convention de mécénat avec <a data-link-domain="openstreetmap.fr" href="https://www.openstreetmap.fr/association/">OpenStreetMap France</a>, j’ai pris le soin de documenter la démarche car ça pourrait donner lieu à d’autres dons en nature de la part de Scopyleft (et puis ça pourrait peut-être vous inspirer 😇).</p> | |||
| <p><em>Note : vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. #IAmNotALayer</em></p> | |||
| <p><em>Note : vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. #IAmNotALawyer</em></p> | |||
| <blockquote> | |||
| <p>Une des possibilités offertes à un mécène entreprise consiste à apporter non pas des financements en numéraire mais des moyens (produits ou services) à la cause qu’elle entend soutenir. Il s’agit ici, d’un « mécénat en nature ou de compétence ». Les critères d’éligibilité à cette forme de mécénat sont exactement les mêmes que ceux prévus pour une contribution en numéraire.</p> | |||
| @@ -235,6 +239,10 @@ Représentant de l’entreprise / Représentant de l’association</p> | |||
| <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a> | |||
| • <a rel="next" | |||
| href="/david/2024/02/01/" | |||
| title="Publication suivante : Vision">Suivant →</a> | |||
| </p> | |||
| </nav> | |||
+ 365
- 0
david/2024/02/01/index.html
View File
| @@ -0,0 +1,365 @@ | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Vision | |||
| — David Larlet</title> | |||
| <meta name="description" content="But if you were to try just one thing using Vision Pro — just one thing — it has to be watching a movie in the TV app, in theater mode. Try that, and no matter how skeptical you were beforehand about the Vision Pro’s price tag, your hand will start inching toward your wallet."> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Is that even respected? Retrospectively? What a shAItshow… | |||
| https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ --> | |||
| <meta name="robots" content="noai, noimageai"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2024-01-28.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/century_supra_ot_a_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/century_supra_ot_a_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/century_supra_ot_a_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/century_supra_ot_b_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/century_supra_ot_b_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/century_supra_ot_b_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <body data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <hgroup> | |||
| <h1>Vision</h1> | |||
| <p>Le <time datetime="2024-02-01">1 février 2024</time></p> | |||
| </hgroup> | |||
| </header> | |||
| <nav> | |||
| <p> | |||
| <a rel="prev" | |||
| href="/david/2024/01/31/" | |||
| title="Publication précédente : Mécénat">← Précédent</a> • | |||
| <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a> | |||
| • | |||
| <a href="/david/recherche/" | |||
| title="Aller à la page de recherche" | |||
| rel="search" data-no-instant>Recherche</a> | |||
| </p> | |||
| </nav> | |||
| <blockquote lang="en"> | |||
| <p>But if you were to try just one thing using Vision Pro — just one thing — it has to be <mark>watching a movie</mark> in the TV app, in theater mode. Try that, and no matter how skeptical you were beforehand about the Vision Pro’s price tag, your hand will start inching toward your wallet.</p> | |||
| <p><cite><em><a data-link-domain="daringfireball.net" href="https://daringfireball.net/2024/01/the_vision_pro">Daring Fireball: The Vision Pro</a> <a href="/david/cache/2024/cd9184008ba5d9e4c9be4d0a0eea4f60/" title="Copie locale au 2024-01-31"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" | |||
| width="20" height="20" viewBox="0 0 24 24" | |||
| fill="none" stroke="currentColor" | |||
| stroke-width="2" stroke-linecap="square" stroke-linejoin="round" | |||
| ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> | |||
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"> | |||
| </path> | |||
| </svg> | |||
| <span class="sr-only">[archive]</span> | |||
| </a></em></cite></p> | |||
| </blockquote> | |||
| <p>Ce jouet est bien trop cher… et c’est une bonne chose. D’une certaine manière, c’est la seule innovation de 2023 qui ne comporte pas IA dans le premier écran marketing, c’est déjà pas mal. Je n’ai pas la naïveté de penser que la version 2 ne nous amènera pas vers le <em>SpatIAl Computing</em> pour autant, restons sérieux.</p> | |||
| <p>Je peux imaginer des des <a data-link-domain="theinfiniteexperience.world" href="https://theinfiniteexperience.world">expériences immersives</a> dans des endroits dédiés, de la location comme on pouvait louer un DVD il y a des années, des salles dédiées en bibliothèques (ambiance dystopie cyberpunk assurée), à un moment il pourrait même y avoir un espace pour ça (payant ?) dans les <em>Apple Store</em>. Si le son est aussi bon que ce que peut décrire <em>Daring Fanboy</em>, j’aurais vraiment envie de me retrouver au milieu d’un concert, d’avoir le choix entre plusieurs points de vues et acoustiques.</p> | |||
| <p>Le côté immersif aurait aussi sa place en terme d’apprentissage / transmission. Être au premier rang d’une conférence ou d’un cours pourrait permettre de redéfinir son attention (?) et sachant que la dernière version de l’iPhone permet de capter de telles vidéos, c’est peut-être un moyen de faire entrer quelqu’un dans son salon ce qui produirait un autre type d’intimité.</p> | |||
| <p>En parlant de captation et d’intimité, avec les <em>deepfakes</em> il devient possible de se retrouver dans un salon mais dans une autre tenue. Toute prise de vidéo devient une menace potentielle. Impossible de ne pas penser à des objets connectés / synchronisés autour de la pornographie…</p> | |||
| <a href="#hr-59" title="Lien vers cette section de la page"><hr id="hr-59" /></a> | |||
| <blockquote lang="en"> | |||
| <p>The “i” in iPhone stands for “inequality”. […]</p> | |||
| <p><mark>iPhone owners live in a different world</mark> than high-end Android buyers, and light-years away what the bulk of the market experiences. No matter how you slice it, the performance inequality gap is growing for CPU-bound workloads like JavaScript-heavy web apps.</p> | |||
| <p><cite><em><a data-link-domain="infrequently.org" href="https://infrequently.org/2024/01/performance-inequality-gap-2024/">The Performance Inequality Gap, 2024</a> <a href="/david/cache/2024/0676c7ccf1ab2b380641866789366d26/" title="Copie locale au 2024-01-31"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" | |||
| width="20" height="20" viewBox="0 0 24 24" | |||
| fill="none" stroke="currentColor" | |||
| stroke-width="2" stroke-linecap="square" stroke-linejoin="round" | |||
| ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> | |||
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"> | |||
| </path> | |||
| </svg> | |||
| <span class="sr-only">[archive]</span> | |||
| </a></em></cite></p> | |||
| </blockquote> | |||
| <p>Ce rapport me rappelle que la notion d’accessibilité est très vaste. Et je suis mal placé pour donner des leçons en vous faisant charger 5 polices de caractères pour vous afficher une page… je n’ai pas encore travaillé les performances du thème de l’année et c’est une erreur.</p> | |||
| <blockquote lang="en"> | |||
| <p>We got to a place where performance has been a constant problem in large part because a tribe of programmers convinced themselves that it <em>wasn’t</em> and <em>wouldn’t be</em>. […]</p> | |||
| <p>But tribalism-boosted confirmation bias mixed with JavaScript’s toxic positivity culture to precipitate out a Silicon Prosperity Gospel; all resources would go infinite if you just <em>believed</em>. […]</p> | |||
| <p>The solutions are social, not technical, because <mark>the delusions are social,</mark> rather than technical.</p> | |||
| <p><cite><em>Ibid.</em></cite></p> | |||
| </blockquote> | |||
| <p>Ça pique.</p> | |||
| <a href="#hr-60" title="Lien vers cette section de la page"><hr id="hr-60" /></a> | |||
| <blockquote lang="en"> | |||
| <p>Rather, the biggest benefits I see are <em>collective</em>, cutting across the industry as a whole. I think web components can make the entire web more accessible. They have the potential to unify currently fragmented communities, including various JavaScript frameworks <em>and</em> <mark>those who avoid them</mark>.</p> | |||
| <p>[…] Web components won’t take web development by storm, or show us the One True Way to build websites. They don’t need to dethrone JavaScript frameworks. We probably won’t even all learn how to write them!</p> | |||
| <p><cite><em><a data-link-domain="jakelazaroff.com" href="https://jakelazaroff.com/words/the-web-component-success-story/">The Web Component Success Story</a> <a href="/david/cache/2024/f4d2d42eba58062be910407690ae447c/" title="Copie locale au 2024-01-31"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" | |||
| width="20" height="20" viewBox="0 0 24 24" | |||
| fill="none" stroke="currentColor" | |||
| stroke-width="2" stroke-linecap="square" stroke-linejoin="round" | |||
| ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> | |||
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"> | |||
| </path> | |||
| </svg> | |||
| <span class="sr-only">[archive]</span> | |||
| </a></em></cite></p> | |||
| </blockquote> | |||
| <p>Très bon article et la boite de prévisualisation au survol de chaque lien ressemble beaucoup à ce que j’avais l’intention de faire pour régler mes soucis d’accès à la version archivée tout en affichant le domaine. Actuellement chaque lien devient trop long et hache le texte lorsque ça n’est pas en pied de citation (et encore). Il faut que je creuse comment cela est fait, via un <em>web component</em> réutilisable j’imagine :-).</p> | |||
| <p>PS : si vous minifiez votre JavaScript, les <a data-link-domain="developer.mozilla.org" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap">SourceMap</a> sont un moyen de partager votre expérience. Sinon l’aspect <q lang="en">collective</q> est beaucoup moins pertinent.</p> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/2024/accessibilite/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#accessibilité</a> | |||
| <a href="/david/2024/dystopie/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#dystopie</a> | |||
| <a href="/david/2024/evolution/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#évolution</a> | |||
| <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a> | |||
| </p> | |||
| </nav> | |||
| <nav> | |||
| <p> | |||
| <a rel="prev" | |||
| href="/david/2024/01/31/" | |||
| title="Publication précédente : Mécénat">← Précédent</a> • | |||
| <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a> | |||
| </p> | |||
| </nav> | |||
| <form action="/david/recherche/" method="get"> | |||
| <fieldset> | |||
| <legend>Recherche</legend> | |||
| <label for="input-search">Termes de votre recherche :</label> | |||
| <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required> | |||
| <input type="submit" value="Chercher"> | |||
| <p id="indexation-infos"> | |||
| <small> | |||
| Seuls les contenus de ces 8 dernières années sont indexés. | |||
| </small> | |||
| </p> | |||
| </fieldset> | |||
| </form> | |||
| <aside> | |||
| <theme-toggle></theme-toggle> | |||
| </aside> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil">Accueil</a> | |||
| • | |||
| <a href="/david/log/" title="Accès au flux RSS">Suivre</a> | |||
| • | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant>Pro</a> | |||
| • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a> | |||
| • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <style type="text/css"> | |||
| fieldset div { | |||
| text-align: center; | |||
| } | |||
| </style> | |||
| <fieldset> | |||
| <legend>Thème</legend> | |||
| <div> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </div> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| class ThemeToggle extends HTMLElement { | |||
| constructor() { | |||
| super() | |||
| const themeSelectorTemplate = document.querySelector('#theme-selector') | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| this.attachShadow({ mode: 'open' }) | |||
| this.shadowRoot.appendChild(form.cloneNode(true)) | |||
| } | |||
| connectedCallback() { | |||
| const form = this.shadowRoot.querySelector('form') | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let colorsLayer = undefined | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const layerRule of styleSheet.cssRules) { | |||
| if (!(layerRule instanceof CSSLayerBlockRule)) { | |||
| continue | |||
| } | |||
| if (layerRule.name === 'colors') { | |||
| colorsLayer = layerRule | |||
| } | |||
| for (const cssRule of layerRule.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| // Safari requires the `0` second parameter (even if default). | |||
| colorsLayer.insertRule(mediaRule.cssText, 0) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| if ('customElements' in window && !customElements.get('theme-toggle')) { | |||
| customElements.define('theme-toggle', ThemeToggle) | |||
| } | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 1
- 1
david/2024/_sources/2024-01-31 - Mecenat.md
View File
| @@ -4,7 +4,7 @@ Je termine mon mécénat de compétence avec uMap sur ces 4 derniers mois (25 | |||
| Voici les notes que j’avais prises avant d’établir une Convention de mécénat avec [OpenStreetMap France](https://www.openstreetmap.fr/association/), j’ai pris le soin de documenter la démarche car ça pourrait donner lieu à d’autres dons en nature de la part de Scopyleft (et puis ça pourrait peut-être vous inspirer 😇). | |||
| *Note : vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. \#IAmNotALayer* | |||
| *Note : vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. \#IAmNotALawyer* | |||
| > Une des possibilités offertes à un mécène entreprise consiste à apporter non pas des financements en numéraire mais des moyens (produits ou services) à la cause qu’elle entend soutenir. Il s’agit ici, d’un « mécénat en nature ou de compétence ». Les critères d’éligibilité à cette forme de mécénat sont exactement les mêmes que ceux prévus pour une contribution en numéraire. | |||
| > | |||
+ 47
- 0
david/2024/_sources/2024-02-01 - Vision.md
View File
| @@ -0,0 +1,47 @@ | |||
| # Vision | |||
| > [en] But if you were to try just one thing using Vision Pro — just one thing — it has to be ==watching a movie== in the TV app, in theater mode. Try that, and no matter how skeptical you were beforehand about the Vision Pro’s price tag, your hand will start inching toward your wallet. | |||
| > | |||
| > <cite>*[Daring Fireball: The Vision Pro](https://daringfireball.net/2024/01/the_vision_pro)*</cite> | |||
| Ce jouet est bien trop cher… et c’est une bonne chose. D’une certaine manière, c’est la seule innovation de 2023 qui ne comporte pas IA dans le premier écran marketing, c’est déjà pas mal. Je n’ai pas la naïveté de penser que la version 2 ne nous amènera pas vers le *SpatIAl Computing* pour autant, restons sérieux. | |||
| Je peux imaginer des des [expériences immersives](https://theinfiniteexperience.world) dans des endroits dédiés, de la location comme on pouvait louer un DVD il y a des années, des salles dédiées en bibliothèques (ambiance dystopie cyberpunk assurée), à un moment il pourrait même y avoir un espace pour ça (payant ?) dans les *Apple Store*. Si le son est aussi bon que ce que peut décrire *Daring Fanboy*, j’aurais vraiment envie de me retrouver au milieu d’un concert, d’avoir le choix entre plusieurs points de vues et acoustiques. | |||
| Le côté immersif aurait aussi sa place en terme d’apprentissage / transmission. Être au premier rang d’une conférence ou d’un cours pourrait permettre de redéfinir son attention (?) et sachant que la dernière version de l’iPhone permet de capter de telles vidéos, c’est peut-être un moyen de faire entrer quelqu’un dans son salon ce qui produirait un autre type d’intimité. | |||
| En parlant de captation et d’intimité, avec les *deepfakes* il devient possible de se retrouver dans un salon mais dans une autre tenue. Toute prise de vidéo devient une menace potentielle. Impossible de ne pas penser à des objets connectés / synchronisés autour de la pornographie… | |||
| --- | |||
| > [en] The “i” in iPhone stands for “inequality”. […] | |||
| > | |||
| > ==iPhone owners live in a different world== than high-end Android buyers, and light-years away what the bulk of the market experiences. No matter how you slice it, the performance inequality gap is growing for CPU-bound workloads like JavaScript-heavy web apps. | |||
| > | |||
| > <cite>*[The Performance Inequality Gap, 2024](https://infrequently.org/2024/01/performance-inequality-gap-2024/)*</cite> | |||
| Ce rapport me rappelle que la notion d’accessibilité est très vaste. Et je suis mal placé pour donner des leçons en vous faisant charger 5 polices de caractères pour vous afficher une page… je n’ai pas encore travaillé les performances du thème de l’année et c’est une erreur. | |||
| > [en] We got to a place where performance has been a constant problem in large part because a tribe of programmers convinced themselves that it *wasn’t* and *wouldn’t be*. […] | |||
| > | |||
| > But tribalism-boosted confirmation bias mixed with JavaScript’s toxic positivity culture to precipitate out a Silicon Prosperity Gospel; all resources would go infinite if you just *believed*. […] | |||
| > | |||
| > The solutions are social, not technical, because ==the delusions are social,== rather than technical. | |||
| > | |||
| > <cite>*Ibid.*</cite> | |||
| Ça pique. | |||
| --- | |||
| > [en] Rather, the biggest benefits I see are *collective*, cutting across the industry as a whole. I think web components can make the entire web more accessible. They have the potential to unify currently fragmented communities, including various JavaScript frameworks *and* ==those who avoid them==. | |||
| > | |||
| > […] Web components won’t take web development by storm, or show us the One True Way to build websites. They don’t need to dethrone JavaScript frameworks. We probably won’t even all learn how to write them! | |||
| > | |||
| > <cite>*[The Web Component Success Story](https://jakelazaroff.com/words/the-web-component-success-story/)*</cite> | |||
| Très bon article et la boite de prévisualisation au survol de chaque lien ressemble beaucoup à ce que j’avais l’intention de faire pour régler mes soucis d’accès à la version archivée tout en affichant le domaine. Actuellement chaque lien devient trop long et hache le texte lorsque ça n’est pas en pied de citation (et encore). Il faut que je creuse comment cela est fait, via un *web component* réutilisable j’imagine :-). | |||
| PS : si vous minifiez votre JavaScript, les [SourceMap](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap) sont un moyen de partager votre expérience. Sinon l’aspect <q lang="en">collective</q> est beaucoup moins pertinent. | |||
| #accessibilité #dystopie #évolution | |||
+ 90
- 0
david/2024/accessibilite/index.html
View File
| @@ -134,6 +134,96 @@ | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/02/01/" title="Lien permanent vers cet article">Vision</a> <time datetime="2024-02-01">1 février 2024</time> | |||
| </h2> | |||
| <blockquote lang="en"> | |||
| <p>But if you were to try just one thing using Vision Pro — just one thing — it has to be <mark>watching a movie</mark> in the TV app, in theater mode. Try that, and no matter how skeptical you were beforehand about the Vision Pro’s price tag, your hand will start inching toward your wallet.</p> | |||
| <p><cite><em><a data-link-domain="daringfireball.net" href="https://daringfireball.net/2024/01/the_vision_pro">Daring Fireball: The Vision Pro</a> <a href="/david/cache/2024/cd9184008ba5d9e4c9be4d0a0eea4f60/" title="Copie locale au 2024-01-31"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" | |||
| width="20" height="20" viewBox="0 0 24 24" | |||
| fill="none" stroke="currentColor" | |||
| stroke-width="2" stroke-linecap="square" stroke-linejoin="round" | |||
| ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> | |||
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"> | |||
| </path> | |||
| </svg> | |||
| <span class="sr-only">[archive]</span> | |||
| </a></em></cite></p> | |||
| </blockquote> | |||
| <p>Ce jouet est bien trop cher… et c’est une bonne chose. D’une certaine manière, c’est la seule innovation de 2023 qui ne comporte pas IA dans le premier écran marketing, c’est déjà pas mal. Je n’ai pas la naïveté de penser que la version 2 ne nous amènera pas vers le <em>SpatIAl Computing</em> pour autant, restons sérieux.</p> | |||
| <p>Je peux imaginer des des <a data-link-domain="theinfiniteexperience.world" href="https://theinfiniteexperience.world">expériences immersives</a> dans des endroits dédiés, de la location comme on pouvait louer un DVD il y a des années, des salles dédiées en bibliothèques (ambiance dystopie cyberpunk assurée), à un moment il pourrait même y avoir un espace pour ça (payant ?) dans les <em>Apple Store</em>. Si le son est aussi bon que ce que peut décrire <em>Daring Fanboy</em>, j’aurais vraiment envie de me retrouver au milieu d’un concert, d’avoir le choix entre plusieurs points de vues et acoustiques.</p> | |||
| <p>Le côté immersif aurait aussi sa place en terme d’apprentissage / transmission. Être au premier rang d’une conférence ou d’un cours pourrait permettre de redéfinir son attention (?) et sachant que la dernière version de l’iPhone permet de capter de telles vidéos, c’est peut-être un moyen de faire entrer quelqu’un dans son salon ce qui produirait un autre type d’intimité.</p> | |||
| <p>En parlant de captation et d’intimité, avec les <em>deepfakes</em> il devient possible de se retrouver dans un salon mais dans une autre tenue. Toute prise de vidéo devient une menace potentielle. Impossible de ne pas penser à des objets connectés / synchronisés autour de la pornographie…</p> | |||
| <a href="#hr-59" title="Lien vers cette section de la page"><hr id="hr-59" /></a> | |||
| <blockquote lang="en"> | |||
| <p>The “i” in iPhone stands for “inequality”. […]</p> | |||
| <p><mark>iPhone owners live in a different world</mark> than high-end Android buyers, and light-years away what the bulk of the market experiences. No matter how you slice it, the performance inequality gap is growing for CPU-bound workloads like JavaScript-heavy web apps.</p> | |||
| <p><cite><em><a data-link-domain="infrequently.org" href="https://infrequently.org/2024/01/performance-inequality-gap-2024/">The Performance Inequality Gap, 2024</a> <a href="/david/cache/2024/0676c7ccf1ab2b380641866789366d26/" title="Copie locale au 2024-01-31"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" | |||
| width="20" height="20" viewBox="0 0 24 24" | |||
| fill="none" stroke="currentColor" | |||
| stroke-width="2" stroke-linecap="square" stroke-linejoin="round" | |||
| ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> | |||
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"> | |||
| </path> | |||
| </svg> | |||
| <span class="sr-only">[archive]</span> | |||
| </a></em></cite></p> | |||
| </blockquote> | |||
| <p>Ce rapport me rappelle que la notion d’accessibilité est très vaste. Et je suis mal placé pour donner des leçons en vous faisant charger 5 polices de caractères pour vous afficher une page… je n’ai pas encore travaillé les performances du thème de l’année et c’est une erreur.</p> | |||
| <blockquote lang="en"> | |||
| <p>We got to a place where performance has been a constant problem in large part because a tribe of programmers convinced themselves that it <em>wasn’t</em> and <em>wouldn’t be</em>. […]</p> | |||
| <p>But tribalism-boosted confirmation bias mixed with JavaScript’s toxic positivity culture to precipitate out a Silicon Prosperity Gospel; all resources would go infinite if you just <em>believed</em>. […]</p> | |||
| <p>The solutions are social, not technical, because <mark>the delusions are social,</mark> rather than technical.</p> | |||
| <p><cite><em>Ibid.</em></cite></p> | |||
| </blockquote> | |||
| <p>Ça pique.</p> | |||
| <a href="#hr-60" title="Lien vers cette section de la page"><hr id="hr-60" /></a> | |||
| <blockquote lang="en"> | |||
| <p>Rather, the biggest benefits I see are <em>collective</em>, cutting across the industry as a whole. I think web components can make the entire web more accessible. They have the potential to unify currently fragmented communities, including various JavaScript frameworks <em>and</em> <mark>those who avoid them</mark>.</p> | |||
| <p>[…] Web components won’t take web development by storm, or show us the One True Way to build websites. They don’t need to dethrone JavaScript frameworks. We probably won’t even all learn how to write them!</p> | |||
| <p><cite><em><a data-link-domain="jakelazaroff.com" href="https://jakelazaroff.com/words/the-web-component-success-story/">The Web Component Success Story</a> <a href="/david/cache/2024/f4d2d42eba58062be910407690ae447c/" title="Copie locale au 2024-01-31"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" | |||
| width="20" height="20" viewBox="0 0 24 24" | |||
| fill="none" stroke="currentColor" | |||
| stroke-width="2" stroke-linecap="square" stroke-linejoin="round" | |||
| ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> | |||
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"> | |||
| </path> | |||
| </svg> | |||
| <span class="sr-only">[archive]</span> | |||
| </a></em></cite></p> | |||
| </blockquote> | |||
| <p>Très bon article et la boite de prévisualisation au survol de chaque lien ressemble beaucoup à ce que j’avais l’intention de faire pour régler mes soucis d’accès à la version archivée tout en affichant le domaine. Actuellement chaque lien devient trop long et hache le texte lorsque ça n’est pas en pied de citation (et encore). Il faut que je creuse comment cela est fait, via un <em>web component</em> réutilisable j’imagine :-).</p> | |||
| <p>PS : si vous minifiez votre JavaScript, les <a data-link-domain="developer.mozilla.org" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap">SourceMap</a> sont un moyen de partager votre expérience. Sinon l’aspect <q lang="en">collective</q> est beaucoup moins pertinent.</p> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/2024/accessibilite/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#accessibilité</a> | |||
| <a href="/david/2024/dystopie/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#dystopie</a> | |||
| <a href="/david/2024/evolution/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#évolution</a> | |||
| <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a> | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/01/09/" title="Lien permanent vers cet article">Blessure</a> <time datetime="2024-01-09">9 janvier 2024</time> | |||
| </h2> | |||
+ 1
- 1
david/2024/commun/index.html
View File
| @@ -140,7 +140,7 @@ | |||
| <p>Je termine mon mécénat de compétence avec uMap sur ces 4 derniers mois (25 jours de travail). Je suis très content d’avoir pu faire cette expérience avec / grâce à Scopyleft et OSM-FR.</p> | |||
| <p>Voici les notes que j’avais prises avant d’établir une Convention de mécénat avec <a data-link-domain="openstreetmap.fr" href="https://www.openstreetmap.fr/association/">OpenStreetMap France</a>, j’ai pris le soin de documenter la démarche car ça pourrait donner lieu à d’autres dons en nature de la part de Scopyleft (et puis ça pourrait peut-être vous inspirer 😇).</p> | |||
| <p><em>Note : vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. #IAmNotALayer</em></p> | |||
| <p><em>Note : vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. #IAmNotALawyer</em></p> | |||
| <blockquote> | |||
| <p>Une des possibilités offertes à un mécène entreprise consiste à apporter non pas des financements en numéraire mais des moyens (produits ou services) à la cause qu’elle entend soutenir. Il s’agit ici, d’un « mécénat en nature ou de compétence ». Les critères d’éligibilité à cette forme de mécénat sont exactement les mêmes que ceux prévus pour une contribution en numéraire.</p> | |||
+ 1
- 1
david/2024/documentation/index.html
View File
| @@ -140,7 +140,7 @@ | |||
| <p>Je termine mon mécénat de compétence avec uMap sur ces 4 derniers mois (25 jours de travail). Je suis très content d’avoir pu faire cette expérience avec / grâce à Scopyleft et OSM-FR.</p> | |||
| <p>Voici les notes que j’avais prises avant d’établir une Convention de mécénat avec <a data-link-domain="openstreetmap.fr" href="https://www.openstreetmap.fr/association/">OpenStreetMap France</a>, j’ai pris le soin de documenter la démarche car ça pourrait donner lieu à d’autres dons en nature de la part de Scopyleft (et puis ça pourrait peut-être vous inspirer 😇).</p> | |||
| <p><em>Note : vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. #IAmNotALayer</em></p> | |||
| <p><em>Note : vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. #IAmNotALawyer</em></p> | |||
| <blockquote> | |||
| <p>Une des possibilités offertes à un mécène entreprise consiste à apporter non pas des financements en numéraire mais des moyens (produits ou services) à la cause qu’elle entend soutenir. Il s’agit ici, d’un « mécénat en nature ou de compétence ». Les critères d’éligibilité à cette forme de mécénat sont exactement les mêmes que ceux prévus pour une contribution en numéraire.</p> | |||
+ 365
- 0
david/2024/dystopie/index.html
View File
| @@ -0,0 +1,365 @@ | |||
| <!DOCTYPE html><!-- This is a valid HTML5 document. --> | |||
| <!-- Screen readers, SEO, extensions and so on. --> | |||
| <html lang="fr"> | |||
| <!-- Has to be within the first 1024 bytes, hence before the `title` element | |||
| See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset --> | |||
| <meta charset="utf-8"> | |||
| <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 --> | |||
| <!-- The viewport meta is quite crowded and we are responsible for that. | |||
| See: https://codepen.io/tigt/post/meta-viewport-for-2015 --> | |||
| <meta name="viewport" content="width=device-width,initial-scale=1"> | |||
| <!-- Required to make a valid HTML5 document. --> | |||
| <title> | |||
| Étiquette #dystopie | |||
| — David Larlet</title> | |||
| <meta name="description" content="Publications relatives au tag #dystopie"> | |||
| <!-- That good ol' feed, subscribe :). --> | |||
| <link rel="alternate" | |||
| type="application/atom+xml" | |||
| title="Feed" | |||
| href="/david/log/"> | |||
| <!-- Generated from https://realfavicongenerator.net/ such a mess. --> | |||
| <link rel="apple-touch-icon" | |||
| sizes="180x180" | |||
| href="/static/david/icons2/apple-touch-icon.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="32x32" | |||
| href="/static/david/icons2/favicon-32x32.png"> | |||
| <link rel="icon" | |||
| type="image/png" | |||
| sizes="16x16" | |||
| href="/static/david/icons2/favicon-16x16.png"> | |||
| <link rel="manifest" href="/static/david/icons2/site.webmanifest"> | |||
| <link rel="mask-icon" | |||
| href="/static/david/icons2/safari-pinned-tab.svg" | |||
| color="#07486c"> | |||
| <link rel="shortcut icon" href="/static/david/icons2/favicon.ico"> | |||
| <meta name="msapplication-TileColor" content="#f7f7f7"> | |||
| <meta name="msapplication-config" | |||
| content="/static/david/icons2/browserconfig.xml"> | |||
| <meta name="theme-color" | |||
| content="#f7f7f7" | |||
| media="(prefers-color-scheme: light)"> | |||
| <meta name="theme-color" | |||
| content="#272727" | |||
| media="(prefers-color-scheme: dark)"> | |||
| <!-- Is that even respected? Retrospectively? What a shAItshow… | |||
| https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ --> | |||
| <meta name="robots" content="noai, noimageai"> | |||
| <!-- Documented, feel free to shoot an email. --> | |||
| <link rel="stylesheet" href="/static/david/css/style_2024-01-28.css"> | |||
| <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. --> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/century_supra_ot_a_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/century_supra_ot_a_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/century_supra_ot_a_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/century_supra_ot_b_regular.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/century_supra_ot_b_bold.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <link rel="preload" | |||
| href="/static/david/css/fonts/century_supra_ot_b_italic.woff2" | |||
| as="font" | |||
| type="font/woff2" | |||
| media="(prefers-color-scheme: dark)" | |||
| crossorigin> | |||
| <script> | |||
| function toggleTheme(themeName) { | |||
| document.documentElement.classList.toggle( | |||
| 'forced-dark', | |||
| themeName === 'dark' | |||
| ) | |||
| document.documentElement.classList.toggle( | |||
| 'forced-light', | |||
| themeName === 'light' | |||
| ) | |||
| } | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme !== 'undefined') { | |||
| toggleTheme(selectedTheme) | |||
| } | |||
| </script> | |||
| <style type="text/css"> | |||
| details[open] summary { | |||
| display: none; | |||
| } | |||
| </style> | |||
| <body data-instant-intensity="viewport-all"> | |||
| <article> | |||
| <header> | |||
| <hgroup> | |||
| <h1>#dystopie</h1> | |||
| <p>Publications relatives à cette étiquette</p> | |||
| </hgroup> | |||
| </header> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil"> | |||
| Accueil</a> | |||
| • | |||
| <a rel="tags" | |||
| href="/david/2024/#tags" | |||
| title="Liste de toutes les étiquettes"> | |||
| Étiquettes</a> | |||
| • | |||
| <a href="/david/recherche/" title="Aller à la page de recherche" rel="search" data-no-instant>Recherche</a> | |||
| • | |||
| <a href="/david/log/" title="Accès au flux RSS">Suivre</a> | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/02/01/" title="Lien permanent vers cet article">Vision</a> <time datetime="2024-02-01">1 février 2024</time> | |||
| </h2> | |||
| <blockquote lang="en"> | |||
| <p>But if you were to try just one thing using Vision Pro — just one thing — it has to be <mark>watching a movie</mark> in the TV app, in theater mode. Try that, and no matter how skeptical you were beforehand about the Vision Pro’s price tag, your hand will start inching toward your wallet.</p> | |||
| <p><cite><em><a data-link-domain="daringfireball.net" href="https://daringfireball.net/2024/01/the_vision_pro">Daring Fireball: The Vision Pro</a> <a href="/david/cache/2024/cd9184008ba5d9e4c9be4d0a0eea4f60/" title="Copie locale au 2024-01-31"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" | |||
| width="20" height="20" viewBox="0 0 24 24" | |||
| fill="none" stroke="currentColor" | |||
| stroke-width="2" stroke-linecap="square" stroke-linejoin="round" | |||
| ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> | |||
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"> | |||
| </path> | |||
| </svg> | |||
| <span class="sr-only">[archive]</span> | |||
| </a></em></cite></p> | |||
| </blockquote> | |||
| <p>Ce jouet est bien trop cher… et c’est une bonne chose. D’une certaine manière, c’est la seule innovation de 2023 qui ne comporte pas IA dans le premier écran marketing, c’est déjà pas mal. Je n’ai pas la naïveté de penser que la version 2 ne nous amènera pas vers le <em>SpatIAl Computing</em> pour autant, restons sérieux.</p> | |||
| <p>Je peux imaginer des des <a data-link-domain="theinfiniteexperience.world" href="https://theinfiniteexperience.world">expériences immersives</a> dans des endroits dédiés, de la location comme on pouvait louer un DVD il y a des années, des salles dédiées en bibliothèques (ambiance dystopie cyberpunk assurée), à un moment il pourrait même y avoir un espace pour ça (payant ?) dans les <em>Apple Store</em>. Si le son est aussi bon que ce que peut décrire <em>Daring Fanboy</em>, j’aurais vraiment envie de me retrouver au milieu d’un concert, d’avoir le choix entre plusieurs points de vues et acoustiques.</p> | |||
| <p>Le côté immersif aurait aussi sa place en terme d’apprentissage / transmission. Être au premier rang d’une conférence ou d’un cours pourrait permettre de redéfinir son attention (?) et sachant que la dernière version de l’iPhone permet de capter de telles vidéos, c’est peut-être un moyen de faire entrer quelqu’un dans son salon ce qui produirait un autre type d’intimité.</p> | |||
| <p>En parlant de captation et d’intimité, avec les <em>deepfakes</em> il devient possible de se retrouver dans un salon mais dans une autre tenue. Toute prise de vidéo devient une menace potentielle. Impossible de ne pas penser à des objets connectés / synchronisés autour de la pornographie…</p> | |||
| <a href="#hr-59" title="Lien vers cette section de la page"><hr id="hr-59" /></a> | |||
| <blockquote lang="en"> | |||
| <p>The “i” in iPhone stands for “inequality”. […]</p> | |||
| <p><mark>iPhone owners live in a different world</mark> than high-end Android buyers, and light-years away what the bulk of the market experiences. No matter how you slice it, the performance inequality gap is growing for CPU-bound workloads like JavaScript-heavy web apps.</p> | |||
| <p><cite><em><a data-link-domain="infrequently.org" href="https://infrequently.org/2024/01/performance-inequality-gap-2024/">The Performance Inequality Gap, 2024</a> <a href="/david/cache/2024/0676c7ccf1ab2b380641866789366d26/" title="Copie locale au 2024-01-31"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" | |||
| width="20" height="20" viewBox="0 0 24 24" | |||
| fill="none" stroke="currentColor" | |||
| stroke-width="2" stroke-linecap="square" stroke-linejoin="round" | |||
| ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> | |||
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"> | |||
| </path> | |||
| </svg> | |||
| <span class="sr-only">[archive]</span> | |||
| </a></em></cite></p> | |||
| </blockquote> | |||
| <p>Ce rapport me rappelle que la notion d’accessibilité est très vaste. Et je suis mal placé pour donner des leçons en vous faisant charger 5 polices de caractères pour vous afficher une page… je n’ai pas encore travaillé les performances du thème de l’année et c’est une erreur.</p> | |||
| <blockquote lang="en"> | |||
| <p>We got to a place where performance has been a constant problem in large part because a tribe of programmers convinced themselves that it <em>wasn’t</em> and <em>wouldn’t be</em>. […]</p> | |||
| <p>But tribalism-boosted confirmation bias mixed with JavaScript’s toxic positivity culture to precipitate out a Silicon Prosperity Gospel; all resources would go infinite if you just <em>believed</em>. […]</p> | |||
| <p>The solutions are social, not technical, because <mark>the delusions are social,</mark> rather than technical.</p> | |||
| <p><cite><em>Ibid.</em></cite></p> | |||
| </blockquote> | |||
| <p>Ça pique.</p> | |||
| <a href="#hr-60" title="Lien vers cette section de la page"><hr id="hr-60" /></a> | |||
| <blockquote lang="en"> | |||
| <p>Rather, the biggest benefits I see are <em>collective</em>, cutting across the industry as a whole. I think web components can make the entire web more accessible. They have the potential to unify currently fragmented communities, including various JavaScript frameworks <em>and</em> <mark>those who avoid them</mark>.</p> | |||
| <p>[…] Web components won’t take web development by storm, or show us the One True Way to build websites. They don’t need to dethrone JavaScript frameworks. We probably won’t even all learn how to write them!</p> | |||
| <p><cite><em><a data-link-domain="jakelazaroff.com" href="https://jakelazaroff.com/words/the-web-component-success-story/">The Web Component Success Story</a> <a href="/david/cache/2024/f4d2d42eba58062be910407690ae447c/" title="Copie locale au 2024-01-31"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" | |||
| width="20" height="20" viewBox="0 0 24 24" | |||
| fill="none" stroke="currentColor" | |||
| stroke-width="2" stroke-linecap="square" stroke-linejoin="round" | |||
| ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> | |||
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"> | |||
| </path> | |||
| </svg> | |||
| <span class="sr-only">[archive]</span> | |||
| </a></em></cite></p> | |||
| </blockquote> | |||
| <p>Très bon article et la boite de prévisualisation au survol de chaque lien ressemble beaucoup à ce que j’avais l’intention de faire pour régler mes soucis d’accès à la version archivée tout en affichant le domaine. Actuellement chaque lien devient trop long et hache le texte lorsque ça n’est pas en pied de citation (et encore). Il faut que je creuse comment cela est fait, via un <em>web component</em> réutilisable j’imagine :-).</p> | |||
| <p>PS : si vous minifiez votre JavaScript, les <a data-link-domain="developer.mozilla.org" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap">SourceMap</a> sont un moyen de partager votre expérience. Sinon l’aspect <q lang="en">collective</q> est beaucoup moins pertinent.</p> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/2024/accessibilite/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#accessibilité</a> | |||
| <a href="/david/2024/dystopie/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#dystopie</a> | |||
| <a href="/david/2024/evolution/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#évolution</a> | |||
| <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a> | |||
| </p> | |||
| </nav> | |||
| <form action="/david/recherche/" method="get"> | |||
| <fieldset> | |||
| <legend>Recherche</legend> | |||
| <label for="input-search">Termes de votre recherche :</label> | |||
| <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required> | |||
| <input type="submit" value="Chercher"> | |||
| <p id="indexation-infos"> | |||
| <small> | |||
| Seuls les contenus de ces 8 dernières années sont indexés. | |||
| </small> | |||
| </p> | |||
| </fieldset> | |||
| </form> | |||
| <aside> | |||
| <theme-toggle></theme-toggle> | |||
| </aside> | |||
| </article> | |||
| <hr> | |||
| <footer> | |||
| <p> | |||
| <a href="/david/" title="Aller à l’accueil">Accueil</a> | |||
| • | |||
| <a href="/david/log/" title="Accès au flux RSS">Suivre</a> | |||
| • | |||
| <a href="http://larlet.com" | |||
| title="Go to my English profile" | |||
| data-instant>Pro</a> | |||
| • | |||
| <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a> | |||
| • | |||
| <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr> | |||
| </p> | |||
| <template id="theme-selector"> | |||
| <form> | |||
| <style type="text/css"> | |||
| fieldset div { | |||
| text-align: center; | |||
| } | |||
| </style> | |||
| <fieldset> | |||
| <legend>Thème</legend> | |||
| <div> | |||
| <label> | |||
| <input type="radio" value="auto" name="chosen-color-scheme" checked> | |||
| Auto | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="dark" name="chosen-color-scheme"> | |||
| Foncé | |||
| </label> | |||
| <label> | |||
| <input type="radio" value="light" name="chosen-color-scheme"> | |||
| Clair | |||
| </label> | |||
| </div> | |||
| </fieldset> | |||
| </form> | |||
| </template> | |||
| </footer> | |||
| <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script> | |||
| <script> | |||
| class ThemeToggle extends HTMLElement { | |||
| constructor() { | |||
| super() | |||
| const themeSelectorTemplate = document.querySelector('#theme-selector') | |||
| const form = themeSelectorTemplate.content.firstElementChild | |||
| this.attachShadow({ mode: 'open' }) | |||
| this.shadowRoot.appendChild(form.cloneNode(true)) | |||
| } | |||
| connectedCallback() { | |||
| const form = this.shadowRoot.querySelector('form') | |||
| form.addEventListener('change', (e) => { | |||
| const chosenColorScheme = e.target.value | |||
| localStorage.setItem('theme', chosenColorScheme) | |||
| toggleTheme(chosenColorScheme) | |||
| }) | |||
| const selectedTheme = localStorage.getItem('theme') | |||
| if (selectedTheme && selectedTheme !== 'undefined') { | |||
| form.querySelector(`[value="${selectedTheme}"]`).checked = true | |||
| } | |||
| } | |||
| } | |||
| const prefersColorSchemeDark = '(prefers-color-scheme: dark)' | |||
| window.addEventListener('load', () => { | |||
| let colorsLayer = undefined | |||
| let hasDarkRules = false | |||
| for (const styleSheet of Array.from(document.styleSheets)) { | |||
| let mediaRules = [] | |||
| for (const layerRule of styleSheet.cssRules) { | |||
| if (!(layerRule instanceof CSSLayerBlockRule)) { | |||
| continue | |||
| } | |||
| if (layerRule.name === 'colors') { | |||
| colorsLayer = layerRule | |||
| } | |||
| for (const cssRule of layerRule.cssRules) { | |||
| if (cssRule.type !== CSSRule.MEDIA_RULE) { | |||
| continue | |||
| } | |||
| // WARNING: Safari does not have/supports `conditionText`. | |||
| if (cssRule.conditionText) { | |||
| if (cssRule.conditionText !== prefersColorSchemeDark) { | |||
| continue | |||
| } | |||
| } else { | |||
| if (cssRule.cssText.startsWith(prefersColorSchemeDark)) { | |||
| continue | |||
| } | |||
| } | |||
| mediaRules = mediaRules.concat(Array.from(cssRule.cssRules)) | |||
| } | |||
| } | |||
| // WARNING: do not try to insert a Rule to a styleSheet you are | |||
| // currently iterating on, otherwise the browser will be stuck | |||
| // in a infinite loop… | |||
| for (const mediaRule of mediaRules) { | |||
| // Safari requires the `0` second parameter (even if default). | |||
| colorsLayer.insertRule(mediaRule.cssText, 0) | |||
| hasDarkRules = true | |||
| } | |||
| } | |||
| if (hasDarkRules) { | |||
| if ('customElements' in window && !customElements.get('theme-toggle')) { | |||
| customElements.define('theme-toggle', ThemeToggle) | |||
| } | |||
| } | |||
| }) | |||
| </script> | |||
| </body> | |||
| </html> | |||
+ 90
- 0
david/2024/evolution/index.html
View File
| @@ -134,6 +134,96 @@ | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/02/01/" title="Lien permanent vers cet article">Vision</a> <time datetime="2024-02-01">1 février 2024</time> | |||
| </h2> | |||
| <blockquote lang="en"> | |||
| <p>But if you were to try just one thing using Vision Pro — just one thing — it has to be <mark>watching a movie</mark> in the TV app, in theater mode. Try that, and no matter how skeptical you were beforehand about the Vision Pro’s price tag, your hand will start inching toward your wallet.</p> | |||
| <p><cite><em><a data-link-domain="daringfireball.net" href="https://daringfireball.net/2024/01/the_vision_pro">Daring Fireball: The Vision Pro</a> <a href="/david/cache/2024/cd9184008ba5d9e4c9be4d0a0eea4f60/" title="Copie locale au 2024-01-31"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" | |||
| width="20" height="20" viewBox="0 0 24 24" | |||
| fill="none" stroke="currentColor" | |||
| stroke-width="2" stroke-linecap="square" stroke-linejoin="round" | |||
| ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> | |||
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"> | |||
| </path> | |||
| </svg> | |||
| <span class="sr-only">[archive]</span> | |||
| </a></em></cite></p> | |||
| </blockquote> | |||
| <p>Ce jouet est bien trop cher… et c’est une bonne chose. D’une certaine manière, c’est la seule innovation de 2023 qui ne comporte pas IA dans le premier écran marketing, c’est déjà pas mal. Je n’ai pas la naïveté de penser que la version 2 ne nous amènera pas vers le <em>SpatIAl Computing</em> pour autant, restons sérieux.</p> | |||
| <p>Je peux imaginer des des <a data-link-domain="theinfiniteexperience.world" href="https://theinfiniteexperience.world">expériences immersives</a> dans des endroits dédiés, de la location comme on pouvait louer un DVD il y a des années, des salles dédiées en bibliothèques (ambiance dystopie cyberpunk assurée), à un moment il pourrait même y avoir un espace pour ça (payant ?) dans les <em>Apple Store</em>. Si le son est aussi bon que ce que peut décrire <em>Daring Fanboy</em>, j’aurais vraiment envie de me retrouver au milieu d’un concert, d’avoir le choix entre plusieurs points de vues et acoustiques.</p> | |||
| <p>Le côté immersif aurait aussi sa place en terme d’apprentissage / transmission. Être au premier rang d’une conférence ou d’un cours pourrait permettre de redéfinir son attention (?) et sachant que la dernière version de l’iPhone permet de capter de telles vidéos, c’est peut-être un moyen de faire entrer quelqu’un dans son salon ce qui produirait un autre type d’intimité.</p> | |||
| <p>En parlant de captation et d’intimité, avec les <em>deepfakes</em> il devient possible de se retrouver dans un salon mais dans une autre tenue. Toute prise de vidéo devient une menace potentielle. Impossible de ne pas penser à des objets connectés / synchronisés autour de la pornographie…</p> | |||
| <a href="#hr-59" title="Lien vers cette section de la page"><hr id="hr-59" /></a> | |||
| <blockquote lang="en"> | |||
| <p>The “i” in iPhone stands for “inequality”. […]</p> | |||
| <p><mark>iPhone owners live in a different world</mark> than high-end Android buyers, and light-years away what the bulk of the market experiences. No matter how you slice it, the performance inequality gap is growing for CPU-bound workloads like JavaScript-heavy web apps.</p> | |||
| <p><cite><em><a data-link-domain="infrequently.org" href="https://infrequently.org/2024/01/performance-inequality-gap-2024/">The Performance Inequality Gap, 2024</a> <a href="/david/cache/2024/0676c7ccf1ab2b380641866789366d26/" title="Copie locale au 2024-01-31"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" | |||
| width="20" height="20" viewBox="0 0 24 24" | |||
| fill="none" stroke="currentColor" | |||
| stroke-width="2" stroke-linecap="square" stroke-linejoin="round" | |||
| ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> | |||
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"> | |||
| </path> | |||
| </svg> | |||
| <span class="sr-only">[archive]</span> | |||
| </a></em></cite></p> | |||
| </blockquote> | |||
| <p>Ce rapport me rappelle que la notion d’accessibilité est très vaste. Et je suis mal placé pour donner des leçons en vous faisant charger 5 polices de caractères pour vous afficher une page… je n’ai pas encore travaillé les performances du thème de l’année et c’est une erreur.</p> | |||
| <blockquote lang="en"> | |||
| <p>We got to a place where performance has been a constant problem in large part because a tribe of programmers convinced themselves that it <em>wasn’t</em> and <em>wouldn’t be</em>. […]</p> | |||
| <p>But tribalism-boosted confirmation bias mixed with JavaScript’s toxic positivity culture to precipitate out a Silicon Prosperity Gospel; all resources would go infinite if you just <em>believed</em>. […]</p> | |||
| <p>The solutions are social, not technical, because <mark>the delusions are social,</mark> rather than technical.</p> | |||
| <p><cite><em>Ibid.</em></cite></p> | |||
| </blockquote> | |||
| <p>Ça pique.</p> | |||
| <a href="#hr-60" title="Lien vers cette section de la page"><hr id="hr-60" /></a> | |||
| <blockquote lang="en"> | |||
| <p>Rather, the biggest benefits I see are <em>collective</em>, cutting across the industry as a whole. I think web components can make the entire web more accessible. They have the potential to unify currently fragmented communities, including various JavaScript frameworks <em>and</em> <mark>those who avoid them</mark>.</p> | |||
| <p>[…] Web components won’t take web development by storm, or show us the One True Way to build websites. They don’t need to dethrone JavaScript frameworks. We probably won’t even all learn how to write them!</p> | |||
| <p><cite><em><a data-link-domain="jakelazaroff.com" href="https://jakelazaroff.com/words/the-web-component-success-story/">The Web Component Success Story</a> <a href="/david/cache/2024/f4d2d42eba58062be910407690ae447c/" title="Copie locale au 2024-01-31"> | |||
| <svg xmlns="http://www.w3.org/2000/svg" | |||
| width="20" height="20" viewBox="0 0 24 24" | |||
| fill="none" stroke="currentColor" | |||
| stroke-width="2" stroke-linecap="square" stroke-linejoin="round" | |||
| ><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect> | |||
| <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"> | |||
| </path> | |||
| </svg> | |||
| <span class="sr-only">[archive]</span> | |||
| </a></em></cite></p> | |||
| </blockquote> | |||
| <p>Très bon article et la boite de prévisualisation au survol de chaque lien ressemble beaucoup à ce que j’avais l’intention de faire pour régler mes soucis d’accès à la version archivée tout en affichant le domaine. Actuellement chaque lien devient trop long et hache le texte lorsque ça n’est pas en pied de citation (et encore). Il faut que je creuse comment cela est fait, via un <em>web component</em> réutilisable j’imagine :-).</p> | |||
| <p>PS : si vous minifiez votre JavaScript, les <a data-link-domain="developer.mozilla.org" href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap">SourceMap</a> sont un moyen de partager votre expérience. Sinon l’aspect <q lang="en">collective</q> est beaucoup moins pertinent.</p> | |||
| <nav> | |||
| <p> | |||
| <a href="/david/2024/accessibilite/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#accessibilité</a> | |||
| <a href="/david/2024/dystopie/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#dystopie</a> | |||
| <a href="/david/2024/evolution/" | |||
| title="Liste de tous les articles 2024 associés à cette étiquette" | |||
| rel="tag">#évolution</a> | |||
| <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a> | |||
| </p> | |||
| </nav> | |||
| <h2> | |||
| <a href="/david/2024/01/20/" title="Lien permanent vers cet article">Extinction</a> <time datetime="2024-01-20">20 janvier 2024</time> | |||
| </h2> | |||
+ 9
- 2
david/2024/index.html
View File
| @@ -163,10 +163,16 @@ | |||
| </p> | |||
| <h2>Février 2024</h2> | |||
| <p> | |||
| <a href="/david/2024/02/01/">Vision</a>. | |||
| </p> | |||
| <h2 id="tags">Par tags</h2> | |||
| <p> | |||
| <a href="/david/2024/accessibilite/" rel="tag">#accessibilité (1)</a>, | |||
| <a href="/david/2024/accessibilite/" rel="tag">#accessibilité (2)</a>, | |||
| <a href="/david/2024/accompagnement/" rel="tag">#accompagnement (2)</a>, | |||
| <a href="/david/2024/addiction/" rel="tag">#addiction (4)</a>, | |||
| <a href="/david/2024/apprentissage/" rel="tag">#apprentissage (6)</a>, | |||
| @@ -175,10 +181,11 @@ | |||
| <a href="/david/2024/decision/" rel="tag">#décision (2)</a>, | |||
| <a href="/david/2024/dependance/" rel="tag">#dépendance (1)</a>, | |||
| <a href="/david/2024/documentation/" rel="tag">#documentation (1)</a>, | |||
| <a href="/david/2024/dystopie/" rel="tag">#dystopie (1)</a>, | |||
| <a href="/david/2024/echanges/" rel="tag">#échanges (3)</a>, | |||
| <a href="/david/2024/ecriture/" rel="tag">#écriture (5)</a>, | |||
| <a href="/david/2024/equipe/" rel="tag">#équipe (4)</a>, | |||
| <a href="/david/2024/evolution/" rel="tag">#évolution (4)</a>, | |||
| <a href="/david/2024/evolution/" rel="tag">#évolution (5)</a>, | |||
| <a href="/david/2024/experience/" rel="tag">#expérience (8)</a>, | |||
| <a href="/david/2024/fediverse/" rel="tag">#fédiverse (1)</a>, | |||
| <a href="/david/2024/foret/" rel="tag">#forêt (3)</a>, | |||
+ 1
- 1
david/2024/partage/index.html
View File
| @@ -140,7 +140,7 @@ | |||
| <p>Je termine mon mécénat de compétence avec uMap sur ces 4 derniers mois (25 jours de travail). Je suis très content d’avoir pu faire cette expérience avec / grâce à Scopyleft et OSM-FR.</p> | |||
| <p>Voici les notes que j’avais prises avant d’établir une Convention de mécénat avec <a data-link-domain="openstreetmap.fr" href="https://www.openstreetmap.fr/association/">OpenStreetMap France</a>, j’ai pris le soin de documenter la démarche car ça pourrait donner lieu à d’autres dons en nature de la part de Scopyleft (et puis ça pourrait peut-être vous inspirer 😇).</p> | |||
| <p><em>Note : vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. #IAmNotALayer</em></p> | |||
| <p><em>Note : vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. #IAmNotALawyer</em></p> | |||
| <blockquote> | |||
| <p>Une des possibilités offertes à un mécène entreprise consiste à apporter non pas des financements en numéraire mais des moyens (produits ou services) à la cause qu’elle entend soutenir. Il s’agit ici, d’un « mécénat en nature ou de compétence ». Les critères d’éligibilité à cette forme de mécénat sont exactement les mêmes que ceux prévus pour une contribution en numéraire.</p> | |||
+ 4
- 2
david/index.html
View File
| @@ -143,6 +143,7 @@ | |||
| <h2>Publications 2024</h2> | |||
| <p>Liste des publications récentes en ordre anté-chronologique :</p> | |||
| <p> | |||
| <a href="/david/2024/02/01/">Vision</a>, | |||
| <a href="/david/2024/01/31/">Mécénat</a>, | |||
| <a href="/david/2024/01/30/">Équipe</a>, | |||
| <a href="/david/2024/01/29/">Déploiement</a>, | |||
| @@ -179,7 +180,7 @@ | |||
| </p> | |||
| <p id="tags-2024">Ou par étiquettes :</p> | |||
| <p> | |||
| <a href="/david/2024/accessibilite/" rel="tag">#accessibilité (1)</a>, | |||
| <a href="/david/2024/accessibilite/" rel="tag">#accessibilité (2)</a>, | |||
| <a href="/david/2024/accompagnement/" rel="tag">#accompagnement (2)</a>, | |||
| <a href="/david/2024/addiction/" rel="tag">#addiction (4)</a>, | |||
| <a href="/david/2024/apprentissage/" rel="tag">#apprentissage (6)</a>, | |||
| @@ -188,10 +189,11 @@ | |||
| <a href="/david/2024/decision/" rel="tag">#décision (2)</a>, | |||
| <a href="/david/2024/dependance/" rel="tag">#dépendance (1)</a>, | |||
| <a href="/david/2024/documentation/" rel="tag">#documentation (1)</a>, | |||
| <a href="/david/2024/dystopie/" rel="tag">#dystopie (1)</a>, | |||
| <a href="/david/2024/echanges/" rel="tag">#échanges (3)</a>, | |||
| <a href="/david/2024/ecriture/" rel="tag">#écriture (5)</a>, | |||
| <a href="/david/2024/equipe/" rel="tag">#équipe (4)</a>, | |||
| <a href="/david/2024/evolution/" rel="tag">#évolution (4)</a>, | |||
| <a href="/david/2024/evolution/" rel="tag">#évolution (5)</a>, | |||
| <a href="/david/2024/experience/" rel="tag">#expérience (8)</a>, | |||
| <a href="/david/2024/fediverse/" rel="tag">#fédiverse (1)</a>, | |||
| <a href="/david/2024/foret/" rel="tag">#forêt (3)</a>, | |||
+ 45
- 48
david/log/index.xml
View File
| @@ -6,13 +6,56 @@ | |||
| <link href="https://larlet.fr/david/" rel="alternate" type="text/html" /> | |||
| <link href="https://larlet.fr/david/log/" rel="self" /> | |||
| <id>https://larlet.fr/david/</id> | |||
| <updated>2024-01-31T12:00:00+01:00</updated> | |||
| <updated>2024-02-01T12:00:00+01:00</updated> | |||
| <author> | |||
| <name>David Larlet</name> | |||
| <uri>https://larlet.fr/david/</uri> | |||
| </author> | |||
| <rights>Copyright (c) 2004-2024, David Larlet</rights> | |||
| <entry xml:lang="fr"> | |||
| <title type="html">Vision</title> | |||
| <link href="https://larlet.fr/david/2024/02/01/" rel="alternate" type="text/html" /> | |||
| <updated>2024-02-01T12:00:00+01:00</updated> | |||
| <id>https://larlet.fr/david/2024/02/01/</id> | |||
| <summary type="html"> | |||
| <blockquote lang="en"> | |||
| <p>But if you were to try just one thing using Vision Pro — just one thing — it has to be <mark>watching a movie</mark> in the TV app, in theater mode. Try that, and no matter how skeptical you were beforehand about the Vision Pro’s price tag, your hand will start inching toward your&nbsp;wallet.</p> | |||
| <p><cite><em><a href="https://daringfireball.net/2024/01/the_vision_pro">Daring Fireball: The Vision&nbsp;Pro</a></em></cite></p> | |||
| </blockquote> | |||
| <p>Ce jouet est bien trop cher… et c’est une bonne chose. D’une certaine manière, c’est la seule innovation de 2023&nbsp;qui ne comporte pas IA dans le premier écran marketing, c’est déjà pas mal. Je n’ai pas la naïveté de penser que la version 2&nbsp;ne nous amènera pas vers le <em>SpatIAl Computing</em> pour autant, restons&nbsp;sérieux.</p> | |||
| <p>Je peux imaginer des des <a href="https://theinfiniteexperience.world">expériences immersives</a> dans des endroits dédiés, de la location comme on pouvait louer un DVD il y a des années, des salles dédiées en bibliothèques (ambiance dystopie cyberpunk assurée), à un moment il pourrait même y avoir un espace pour ça (payant&#8239;?) dans les <em>Apple Store</em>. Si le son est aussi bon que ce que peut décrire <em>Daring Fanboy</em>, j’aurais vraiment envie de me retrouver au milieu d’un concert, d’avoir le choix entre plusieurs points de vues et&nbsp;acoustiques.</p> | |||
| <p>Le côté immersif aurait aussi sa place en terme d’apprentissage / transmission. Être au premier rang d’une conférence ou d’un cours pourrait permettre de redéfinir son attention&nbsp;(?) et sachant que la dernière version de l’iPhone permet de capter de telles vidéos, c’est peut-être un moyen de faire entrer quelqu’un dans son salon ce qui produirait un autre type&nbsp;d’intimité.</p> | |||
| <p>En parlant de captation et d’intimité, avec les <em>deepfakes</em> il devient possible de se retrouver dans un salon mais dans une autre tenue. Toute prise de vidéo devient une menace potentielle. Impossible de ne pas penser à des objets connectés / synchronisés autour de la&nbsp;pornographie…</p> | |||
| <hr /> | |||
| <blockquote lang="en"> | |||
| <p>The “i” in iPhone stands for “inequality”. […]</p> | |||
| <p><mark>iPhone owners live in a different world</mark> than high-end Android buyers, and light-years away what the bulk of the market experiences. No matter how you slice it, the performance inequality gap is growing for CPU-bound workloads like JavaScript-heavy web&nbsp;apps.</p> | |||
| <p><cite><em><a href="https://infrequently.org/2024/01/performance-inequality-gap-2024/">The Performance Inequality Gap, 2024</a></em></cite></p> | |||
| </blockquote> | |||
| <p>Ce rapport me rappelle que la notion d’accessibilité est très vaste. Et je suis mal placé pour donner des leçons en vous faisant charger 5&nbsp;polices de caractères pour vous afficher une page… je n’ai pas encore travaillé les performances du thème de l’année et c’est une&nbsp;erreur.</p> | |||
| <blockquote lang="en"> | |||
| <p>We got to a place where performance has been a constant problem in large part because a tribe of programmers convinced themselves that it <em>wasn’t</em> and <em>wouldn’t be</em>. […]</p> | |||
| <p>But tribalism-boosted confirmation bias mixed with JavaScript’s toxic positivity culture to precipitate out a Silicon Prosperity Gospel; all resources would go infinite if you just <em>believed</em>. […]</p> | |||
| <p>The solutions are social, not technical, because <mark>the delusions are social,</mark> rather than&nbsp;technical.</p> | |||
| <p><cite><em>Ibid.</em></cite></p> | |||
| </blockquote> | |||
| <p>Ça&nbsp;pique.</p> | |||
| <hr /> | |||
| <blockquote lang="en"> | |||
| <p>Rather, the biggest benefits I see are <em>collective</em>, cutting across the industry as a whole. I think web components can make the entire web more accessible. They have the potential to unify currently fragmented communities, including various JavaScript frameworks <em>and</em> <mark>those who avoid them</mark>.</p> | |||
| <p>[…] Web components won’t take web development by storm, or show us the One True Way to build websites. They don’t need to dethrone JavaScript frameworks. We probably won’t even all learn how to write&nbsp;them!</p> | |||
| <p><cite><em><a href="https://jakelazaroff.com/words/the-web-component-success-story/">The Web Component Success&nbsp;Story</a></em></cite></p> | |||
| </blockquote> | |||
| <p>Très bon article et la boite de prévisualisation au survol de chaque lien ressemble beaucoup à ce que j’avais l’intention de faire pour régler mes soucis d’accès à la version archivée tout en affichant le domaine. Actuellement chaque lien devient trop long et hache le texte lorsque ça n’est pas en pied de citation (et encore). Il faut que je creuse comment cela est fait, via un <em>web component</em> réutilisable&nbsp;j’imagine&nbsp;:-).</p> | |||
| <p>PS&nbsp;: si vous minifiez votre JavaScript, les <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/SourceMap">SourceMap</a> sont un moyen de partager votre expérience. Sinon l’aspect <q lang="en">collective</q> est beaucoup moins&nbsp;pertinent.</p> | |||
| <nav><p><a href="https://larlet.fr/david/2024/accessibilite/">#accessibilité</a> <a href="https://larlet.fr/david/2024/dystopie/">#dystopie</a> <a href="https://larlet.fr/david/2024/evolution/">#évolution</a></p></nav><hr/><p><a href="mailto:david@larlet.fr">Réagir ?</a></p></summary> | |||
| </entry> | |||
| <entry xml:lang="fr"> | |||
| <title type="html">Mécénat</title> | |||
| <link href="https://larlet.fr/david/2024/01/31/" rel="alternate" type="text/html" /> | |||
| @@ -21,7 +64,7 @@ | |||
| <summary type="html"> | |||
| <p>Je termine mon mécénat de compétence avec uMap sur ces 4&nbsp;derniers mois (25&nbsp;jours de travail). Je suis très content d’avoir pu faire cette expérience avec / grâce à Scopyleft et&nbsp;OSM-FR.</p> | |||
| <p>Voici les notes que j’avais prises avant d’établir une Convention de mécénat avec <a href="https://www.openstreetmap.fr/association/">OpenStreetMap France</a>, j’ai pris le soin de documenter la démarche car ça pourrait donner lieu à d’autres dons en nature de la part de Scopyleft (et puis ça pourrait peut-être vous inspirer&nbsp;😇).</p> | |||
| <p><em>Note&nbsp;: vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. #IAmNotALayer</em></p> | |||
| <p><em>Note&nbsp;: vous pouvez réutiliser ces sources d’informations mais elles n’ont pas été validées par une personnes qui serait compétente dans le domaine. #IAmNotALawyer</em></p> | |||
| <blockquote> | |||
| <p>Une des possibilités offertes à un mécène entreprise consiste à apporter non pas des financements en numéraire mais des moyens (produits ou services) à la cause qu’elle entend soutenir. Il s’agit ici, d’un «&nbsp;mécénat en nature ou de compétence&nbsp;». Les critères d’éligibilité à cette forme de mécénat sont exactement les mêmes que ceux prévus pour une contribution en&nbsp;numéraire.</p> | |||
| @@ -1235,50 +1278,4 @@ Isobel hésite. Sans lever les yeux de son livre, Emily répond à sa place& | |||
| <nav><p><a href="https://larlet.fr/david/2024/accompagnement/">#accompagnement</a> <a href="https://larlet.fr/david/2024/ecriture/">#écriture</a> <a href="https://larlet.fr/david/2024/web/">#web</a></p></nav><hr/><p><a href="mailto:david@larlet.fr">Réagir ?</a></p></summary> | |||
| </entry> | |||
| <entry xml:lang="fr"> | |||
| <title type="html">Fondations</title> | |||
| <link href="https://larlet.fr/david/2024/01/02/" rel="alternate" type="text/html" /> | |||
| <updated>2024-01-02T12:00:00+01:00</updated> | |||
| <id>https://larlet.fr/david/2024/01/02/</id> | |||
| <summary type="html"> | |||
| <p>Tellement de choses sont dorénavant possibles en CSS, je suis submergé par l’ampleur de la tâche. J’ai envie d’essayer trop de choses&nbsp;: des <em>grids</em>, des <em>layers</em>, des fonctionnalités avancées de typographie, que cet espace redevienne un terrain de jeu dans ce domaine car je sens bien que j’ai un peu délaissé cet aspect au fil du&nbsp;temps.</p> | |||
| <p>Je commence par regarder à quoi ressemble une page nue avec la précédente sémantique HTML. Ce n’est pas si mal mais les icônes en SVG pourraient avoir des dimensions plus appropriées. Je les retire, il est temps de gagner en légèreté. Je regarde à quoi ressemblent des <em>reset</em>&nbsp;modernes&nbsp;:</p> | |||
| <ul> | |||
| <li><a href="https://piccalil.li/blog/a-more-modern-css-reset/">A (more) Modern CSS Reset</a> par Andy&nbsp;Bell&#8239;;</li> | |||
| <li><a href="https://www.joshwcomeau.com/css/custom-css-reset/">My Custom CSS Reset</a> par Josh W. Comeau&#8239;;</li> | |||
| <li><a href="https://github.com/jensimmons/cssremedy">CSS Remedy</a> par Jen Simmons et Miriam&nbsp;Suzanne&#8239;;</li> | |||
| <li><a href="https://jgthms.com/minireset.css/">A tiny modern CSS reset</a> par Jeremy&nbsp;Thomas.</li> | |||
| </ul> | |||
| <p>J’aimerais commencer ma CSS par <code>@layer reset</code> mais c’est sur du <a href="https://caniuse.com/css-cascade-layers">Baseline™ 2022</a>. Toujours cette tension entre jouer avec les nouveautés sans exclure pour autant une partie de l’auditoire potentiel. <mark>Au pire, cette page nue est consultable</mark> et le flux devrait être supporté partout. Peut-être que je n’ai pas besoin d’avoir des <a href="https://css-tricks.com/css-cascade-layers/">CSS layers</a> mais quand je fais une refonte de cet espace je ne suis pas <em>que</em> sur le besoin. J’obtiens un reset que j’imagine fonctionnel mais il est un peu frustrant d’arriver à un résultat finalement moins lisible que ce que j’avais sans aucun styles. <strong>Commencer par déconstruire pour reconstruire est probablement l’un des maux de notre culture.</strong> Ne pas accepter qu’il puisse exister quelque chose de suffisant sur lequel s’appuyer. Une attitude de&nbsp;colon.</p> | |||
| <p>Je finis par tout jeter / ré-interroger et je m’en sors avec&nbsp;6&nbsp;règles.</p> | |||
| <p>J’ai besoin de voir mon texte en action pour pouvoir le travailler. Qu’il passe de lisible à enviable, que sa fabrique —&nbsp;<a href="https://www.quaternum.net/2023/06/02/fabrique-concept/">coucou Antoine</a>&nbsp;— fasse partie intégrante de sa création+diffusion. C’est le texte que je suis en train d’écrire qui <em>est</em> le modèle. Je commence par adoucir les contrastes et à centrer quelques éléments. Puis j’applique cette astuce pour avoir des citations <a href="https://code.larlet.fr/css/#une-grille-avec-elements-a-fond-perdu">à fond perdu</a> tout en centrant le texte de l’article. J’ai envie de leur donner la place qu’elles méritent dans mes&nbsp;publications.</p> | |||
| <p>Je suis satisfait de mon résultat très minimaliste du&nbsp;jour.</p> | |||
| <hr /> | |||
| <blockquote> | |||
| <p>Le long trajet est essentiel. Surtout ne pas se laisser tenter par un livre, un ordinateur de poche, ou autres artifices. L’ennui permet l’étincelle des rêveries, tout comme la nuit la profondeur des&nbsp;rêves.</p> | |||
| <p><cite><em><a href="https://www.la-grange.net/2023/07/10/notes-train">notes</a></em>, Karl</cite></p> | |||
| </blockquote> | |||
| <p>🧡</p> | |||
| <hr /> | |||
| <p>Plus tard, je me rends compte en voulant faire les choses proprement que j’avais déjà fait des essais il y a un peu plus d’un&nbsp;an&nbsp;:</p> | |||
| <figure> | |||
| <a href="https://larlet.fr/static/david/2024/2024-01-02-ancien-essai.png" | |||
| title="Cliquer pour une version haute résolution"> | |||
| <img | |||
| src="https://larlet.fr/static/david/2024/2024-01-02-ancien-essai.png" | |||
| width="2488" height="1486" | |||
| srcset="/static/david/2024/2024-01-02-ancien-essai.png 2488w, /static/david/2024/2024-01-02-ancien-essai.png 660w, /static/david/2024/2024-01-02-ancien-essai.png 990w, /static/david/2024/2024-01-02-ancien-essai.png 1320w" | |||
| sizes="min(100vw, calc(100vh * 2488 / 1486))" | |||
| loading="lazy" | |||
| decoding="async" | |||
| alt="Capture d’écran de l’essai"> | |||
| </a> | |||
| <figcaption>Capture d’écran de&nbsp;l’essai.</figcaption> | |||
| </figure> | |||
| <p>Je ne sais pas trop quoi en penser, c’est toujours marrant de retrouver de vieilles tentatives. De mémoire, c’était déjà plus pour m’amuser avec les <em>layers</em> qu’une refonte sérieuse (et cette typo&nbsp;😱 (Bizmeud, <a href="https://velvetyne.fr/news/vtf-is-dead-long-live-velvetyne/">en retraite</a>)). Il n’est pas exclus que les essais actuels finissent également à la&nbsp;poubelle.</p> | |||
| <p>Tiens, est-ce que j’arrive à faire déborder l’image du flux aussi&#8239;? Oui, et ça ouvre des perspectives d’agencements photographiques à&nbsp;explorer…</p> | |||
| <nav><p><a href="https://larlet.fr/david/2024/experience/">#expérience</a> <a href="https://larlet.fr/david/2024/technique/">#technique</a> <a href="https://larlet.fr/david/2024/web/">#web</a></p></nav><hr/><p><a href="mailto:david@larlet.fr">Réagir ?</a></p></summary> | |||
| </entry> | |||
| </feed> | |||
+ 14
- 2
david/recherche/index.html
File diff suppressed because it is too large
View File
+ 5
- 1
site.py
View File
| @@ -420,7 +420,11 @@ class Page: | |||
| except IndexError: | |||
| # It happens for old contents, parsed for the search index. | |||
| pass | |||
| page = Page(title, content, tags, file_path.name) | |||
| try: | |||
| page = Page(title, content, tags, file_path.name) | |||
| except ValueError: | |||
| print(f"{title} has no date(?), see {file_path.name}") | |||
| continue | |||
| pages_by_url[page.url] = page | |||
| if not page.is_draft: | |||
| all_tags.update(tags) | |||
Loading…