davidbgk
/
larlet-fr-david
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
Browse Source

Article

master
David Larlet 2 months ago
parent
6c2c45a28f
commit
f9e98a0a6f
Signed by: David Larlet <david@larlet.fr> GPG Key ID: 3E2953A359E7E7BD
11 changed files with 881 additions and 45 deletions
Split View Show Diff Stats
  1. 8
    0
      david/2024/02/13/index.html
  2. 372
    0
      david/2024/02/14/index.html
  3. 17
    0
      david/2024/_sources/2024-02-14 - GeoCodage.md
  4. 46
    0
      david/2024/commun/index.html
  5. 5
    3
      david/2024/index.html
  6. 321
    0
      david/2024/opendata/index.html
  7. 46
    0
      david/2024/technique/index.html
  8. 20
    20
      david/blogroll/index.html
  9. 4
    2
      david/index.html
  10. 30
    20
      david/log/index.xml
  11. 12
    0
      david/recherche/index.html

+ 8
- 0
david/2024/02/13/index.html View File

@@ -152,6 +152,10 @@
title="Aller à la page de recherche"
rel="search" data-no-instant>Recherche</a>
• <a rel="next"
href="/david/2024/02/14/"
title="Publication suivante : GéoCodage">Suivant →</a>
</p>
</nav>
@@ -237,6 +241,10 @@
<a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
• <a rel="next"
href="/david/2024/02/14/"
title="Publication suivante : GéoCodage">Suivant →</a>
</p>
</nav>


+ 372
- 0
david/2024/02/14/index.html View File

@@ -0,0 +1,372 @@
<!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>
GéoCodage
— David Larlet</title>
<meta name="description" content="Dans le cadre de mon travail avec le LABRRI, j’avais besoin de pouvoir laisser l’utilisateur·ice choisir une localité parmi les villes et arrondissements au Québec. Je me suis dit que c’était une bonne occasion d’explorer les données ouvertes locales.">
<!-- 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-02-03.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">
.tippy-content {
min-width: 280px;
padding: .5rem;
font-size: calc(var(--fluid-0) * 0.8);
font-family: var(--labor-font);
letter-spacing: initial;
text-align: left;
}
.tippy-content h3 {
margin-top: 0;
}
.tippy-content h3 img {
max-width: 2rem;
max-height: 2rem;
display: inline-block;
}
.tippy-content .tippy-links {
display: flex;
justify-content: space-around;
}
.tippy-content a {
padding: .4rem;
color: #F06048;
}
</style>

<body data-instant-intensity="viewport-all">
<article>
<header>
<hgroup>
<h1>GéoCodage</h1>
<p>Le <time datetime="2024-02-14">14 février 2024</time></p>
</hgroup>
</header>
<nav>
<p>
<a rel="prev"
href="/david/2024/02/13/"
title="Publication précédente : Feutrage">← 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>
<p>Dans le cadre de mon travail avec le <a data-link-domain="labrri.net" href="https://labrri.net/">LABRRI</a>, j’avais besoin de pouvoir laisser l’utilisateur·ice choisir une localité parmi les villes et arrondissements au Québec. Je me suis dit que c’était une bonne occasion d’explorer les données ouvertes&nbsp;locales.</p>
<p>Je tombe rapidement sur le <a data-link-domain="donneesquebec.ca" href="https://www.donneesquebec.ca/recherche/dataset/repertoire-des-municipalites-du-quebec">Répertoire des municipalités du Québec</a> qui dispose des communes et arrondissements au format CSV. Il me manque tout de même les coordonnées pour pouvoir ensuite les afficher sur une carte. Je creuse un peu et il existe des services de géocodage locaux comme <a data-link-domain="geocoder.ca" href="https://geocoder.ca/">geocoder.ca</a> mais je suis persuadé que ça doit être accessible librement quelque part. Je finis par trouver les <a data-link-domain="statistique.quebec.ca" href="https://statistique.quebec.ca/statistiques/divisions-territoriales/fichiers_code_geo/code-geographique-quebec.html">Fichiers du code géographique du Québec</a> qui comportent des coordonnées pour chaque localité, le tout en XML. Elles sont au format <code>47° 22' 34&quot; N</code> ce qui ne m’arrange pas et je me fais surtout avoir par la longitude un moment car elle est en français(!) <code>61° 52' 05&quot; O</code> — <code>O(uest)</code> vs. <code>W(est)</code>. Avec un petit coup de <code>ElementTree</code> + <a data-link-domain="pypi.org" href="https://pypi.org/project/latlon3/">latlon3</a>, j’arrive enfin à des coordonnées utilisables par <a data-link-domain="leafletjs.com" href="https://leafletjs.com/">Leaflet</a> qui me serviront à afficher les situations sur une&nbsp;carte.</p>
<p>Il me manque les coordonnées pour les arrondissements mais j’ai déjà fait la moitié à la main précédemment et il n’y en a qu’une quarantaine. Jouable, ne jamais oublier <a data-link-domain="xkcd.com" href="https://xkcd.com/1319/">ce XKCD</a> lorsqu’on&nbsp;développe.</p>
<p>Je passe maintenant à l’interface et je me dis que cette problématique est une bonne candidate pour <code>&lt;datalist&gt;</code> surtout qu’il y a deux champs du formulaire où il faut saisir le lieu&nbsp;: il est possible de référencer la même liste de données pour deux champs distincts ce qui est élégant. Ce qui l’est moins par contre, c’est que pour rendre ces choix non modifiables, il faut définir un <code>pattern</code> avec l’ensemble des localité, pour chaque champ concerné, donc en double. Je me retrouve avec 3&nbsp;fois les mêmes données… mais cela donne lieu à une <a data-link-domain="code.larlet.fr" href="https://code.larlet.fr/html/#forcer-un-element-parmi-une-datalist">nouvelle entrée dans ma mémoire technique</a>. Le formulaire complet faisant au final moins de 110Ko, je considère que c’est suffisant pour ne pas affaiblir l’interface avec du JavaScript qui factoriserait ces&nbsp;données.</p>
<figure>
<a href="/static/david/2024/2024-02-14-input-datalist.png"
title="Cliquer pour une version haute résolution">
<img
src="/static/david/2024/2024-02-14-input-datalist.png"
width="1634" height="408"
srcset="/static/david/2024/2024-02-14-input-datalist.png 1634w, /static/david/2024/2024-02-14-input-datalist.png 660w, /static/david/2024/2024-02-14-input-datalist.png 990w, /static/david/2024/2024-02-14-input-datalist.png 1320w"
sizes="min(100vw, calc(100vh * 1634 / 408))"
loading="lazy"
decoding="async"
alt="Un champ de saisie dans lequel j’ai écrit «&nbsp;baie&nbsp;» et qui affiche des suggestions de villes québécoises.">
</a>
<figcaption>Et&nbsp;voilà!</figcaption>
</figure>
<p>Si jamais vous avez besoin des données générées, <a href="/static/david/2024/municipalites_quebec_geocodees.csv">voici un CSV</a> (67Ko) qui est originellement sous licence <a data-link-domain="creativecommons.org" href="https://creativecommons.org/licenses/by/4.0/legalcode.fr">Creative Commons 4.0 – Attribution CC BY</a> l’«&nbsp;Institut de la statistique du Québec, Fichiers du code géographique du Québec&nbsp;» même si je ne sais pas trop ce que ça signifie après une telle transformation… qui devient vraiment le «&nbsp;BY&nbsp;»&#8239;? 🤔</p>
<p><em>Note&nbsp;: l’interface proposée sous iOS pour les choix de datalist est assez déroutante car les suggestions se retrouvent dans la partie d’auto-completion du&nbsp;clavier&#8239;!</em></p>

<nav>
<p>
<a href="/david/2024/commun/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#commun</a>
<a href="/david/2024/opendata/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#opendata</a>
<a href="/david/2024/technique/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#technique</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/02/13/"
title="Publication précédente : Feutrage">← 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>
<script src="/static/david/js/popper-2.11.8.min.js"></script>
<script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
<script>
tippy('[data-tippy]', {
content(reference) {
reference.addEventListener('click', (e) => e.preventDefault())
return `
<h3 lang="fr">
<img src="${reference.dataset.favicon}" loading="lazy">
<a href="${reference.dataset.source}"
>Article sur ${reference.dataset.domain}</a></h3>
<p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
<div class="tippy-links" lang="fr">
<a href="${reference.href}">Archive au ${reference.dataset.date}</a>
</div>
`
},
allowHTML: true,
interactive: true,
delay: [150, 700],
hideOnClick: false
})
</script>

</body>
</html>

+ 17
- 0
david/2024/_sources/2024-02-14 - GeoCodage.md View File

@@ -0,0 +1,17 @@
# GéoCodage

Dans le cadre de mon travail avec le [LABRRI](https://labrri.net/), j’avais besoin de pouvoir laisser l’utilisateur·ice choisir une localité parmi les villes et arrondissements au Québec. Je me suis dit que c’était une bonne occasion d’explorer les données ouvertes locales.

Je tombe rapidement sur le [Répertoire des municipalités du Québec](https://www.donneesquebec.ca/recherche/dataset/repertoire-des-municipalites-du-quebec) qui dispose des communes et arrondissements au format CSV. Il me manque tout de même les coordonnées pour pouvoir ensuite les afficher sur une carte. Je creuse un peu et il existe des services de géocodage locaux comme [geocoder.ca](https://geocoder.ca/) mais je suis persuadé que ça doit être accessible librement quelque part. Je finis par trouver les [Fichiers du code géographique du Québec](https://statistique.quebec.ca/statistiques/divisions-territoriales/fichiers_code_geo/code-geographique-quebec.html) qui comportent des coordonnées pour chaque localité, le tout en XML. Elles sont au format `47° 22' 34" N` ce qui ne m’arrange pas et je me fais surtout avoir par la longitude un moment car elle est en français(!) `61° 52' 05" O` — `O(uest)` vs. `W(est)`. Avec un petit coup de `ElementTree` + [latlon3](https://pypi.org/project/latlon3/), j’arrive enfin à des coordonnées utilisables par [Leaflet](https://leafletjs.com/) qui me serviront à afficher les situations sur une carte.

Il me manque les coordonnées pour les arrondissements mais j’ai déjà fait la moitié à la main précédemment et il n’y en a qu’une quarantaine. Jouable, ne jamais oublier [ce XKCD](https://xkcd.com/1319/) lorsqu’on développe.

Je passe maintenant à l’interface et je me dis que cette problématique est une bonne candidate pour `<datalist>` surtout qu’il y a deux champs du formulaire où il faut saisir le lieu : il est possible de référencer la même liste de données pour deux champs distincts ce qui est élégant. Ce qui l’est moins par contre, c’est que pour rendre ces choix non modifiables, il faut définir un `pattern` avec l’ensemble des localité, pour chaque champ concerné, donc en double. Je me retrouve avec 3 fois les mêmes données… mais cela donne lieu à une [nouvelle entrée dans ma mémoire technique](https://code.larlet.fr/html/#forcer-un-element-parmi-une-datalist). Le formulaire complet faisant au final moins de 110Ko, je considère que c’est suffisant pour ne pas affaiblir l’interface avec du JavaScript qui factoriserait ces données.

![Un champ de saisie dans lequel j’ai écrit « baie » et qui affiche des suggestions de villes québécoises.](/static/david/2024/2024-02-14-input-datalist.png "Et voilà!")

Si jamais vous avez besoin des données générées, [voici un CSV](/static/david/2024/municipalites_quebec_geocodees.csv) (67Ko) qui est originellement sous licence [Creative Commons 4.0 – Attribution CC BY](https://creativecommons.org/licenses/by/4.0/legalcode.fr) l’« Institut de la statistique du Québec, Fichiers du code géographique du Québec » même si je ne sais pas trop ce que ça signifie après une telle transformation… qui devient vraiment le « BY » ? 🤔

*Note : l’interface proposée sous iOS pour les choix de datalist est assez déroutante car les suggestions se retrouvent dans la partie d’auto-completion du clavier !*

#commun #opendata #technique

+ 46
- 0
david/2024/commun/index.html View File

@@ -134,6 +134,52 @@
</p>
</nav>
<h2>
<a href="/david/2024/02/14/" title="Lien permanent vers cet article">GéoCodage</a> <time datetime="2024-02-14">14 février 2024</time>
</h2>
<p>Dans le cadre de mon travail avec le <a data-link-domain="labrri.net" href="https://labrri.net/">LABRRI</a>, j’avais besoin de pouvoir laisser l’utilisateur·ice choisir une localité parmi les villes et arrondissements au Québec. Je me suis dit que c’était une bonne occasion d’explorer les données ouvertes&nbsp;locales.</p>
<p>Je tombe rapidement sur le <a data-link-domain="donneesquebec.ca" href="https://www.donneesquebec.ca/recherche/dataset/repertoire-des-municipalites-du-quebec">Répertoire des municipalités du Québec</a> qui dispose des communes et arrondissements au format CSV. Il me manque tout de même les coordonnées pour pouvoir ensuite les afficher sur une carte. Je creuse un peu et il existe des services de géocodage locaux comme <a data-link-domain="geocoder.ca" href="https://geocoder.ca/">geocoder.ca</a> mais je suis persuadé que ça doit être accessible librement quelque part. Je finis par trouver les <a data-link-domain="statistique.quebec.ca" href="https://statistique.quebec.ca/statistiques/divisions-territoriales/fichiers_code_geo/code-geographique-quebec.html">Fichiers du code géographique du Québec</a> qui comportent des coordonnées pour chaque localité, le tout en XML. Elles sont au format <code>47° 22' 34&quot; N</code> ce qui ne m’arrange pas et je me fais surtout avoir par la longitude un moment car elle est en français(!) <code>61° 52' 05&quot; O</code> — <code>O(uest)</code> vs. <code>W(est)</code>. Avec un petit coup de <code>ElementTree</code> + <a data-link-domain="pypi.org" href="https://pypi.org/project/latlon3/">latlon3</a>, j’arrive enfin à des coordonnées utilisables par <a data-link-domain="leafletjs.com" href="https://leafletjs.com/">Leaflet</a> qui me serviront à afficher les situations sur une&nbsp;carte.</p>
<p>Il me manque les coordonnées pour les arrondissements mais j’ai déjà fait la moitié à la main précédemment et il n’y en a qu’une quarantaine. Jouable, ne jamais oublier <a data-link-domain="xkcd.com" href="https://xkcd.com/1319/">ce XKCD</a> lorsqu’on&nbsp;développe.</p>
<p>Je passe maintenant à l’interface et je me dis que cette problématique est une bonne candidate pour <code>&lt;datalist&gt;</code> surtout qu’il y a deux champs du formulaire où il faut saisir le lieu&nbsp;: il est possible de référencer la même liste de données pour deux champs distincts ce qui est élégant. Ce qui l’est moins par contre, c’est que pour rendre ces choix non modifiables, il faut définir un <code>pattern</code> avec l’ensemble des localité, pour chaque champ concerné, donc en double. Je me retrouve avec 3&nbsp;fois les mêmes données… mais cela donne lieu à une <a data-link-domain="code.larlet.fr" href="https://code.larlet.fr/html/#forcer-un-element-parmi-une-datalist">nouvelle entrée dans ma mémoire technique</a>. Le formulaire complet faisant au final moins de 110Ko, je considère que c’est suffisant pour ne pas affaiblir l’interface avec du JavaScript qui factoriserait ces&nbsp;données.</p>
<figure>
<a href="/static/david/2024/2024-02-14-input-datalist.png"
title="Cliquer pour une version haute résolution">
<img
src="/static/david/2024/2024-02-14-input-datalist.png"
width="1634" height="408"
srcset="/static/david/2024/2024-02-14-input-datalist.png 1634w, /static/david/2024/2024-02-14-input-datalist.png 660w, /static/david/2024/2024-02-14-input-datalist.png 990w, /static/david/2024/2024-02-14-input-datalist.png 1320w"
sizes="min(100vw, calc(100vh * 1634 / 408))"
loading="lazy"
decoding="async"
alt="Un champ de saisie dans lequel j’ai écrit «&nbsp;baie&nbsp;» et qui affiche des suggestions de villes québécoises.">
</a>
<figcaption>Et&nbsp;voilà!</figcaption>
</figure>
<p>Si jamais vous avez besoin des données générées, <a href="/static/david/2024/municipalites_quebec_geocodees.csv">voici un CSV</a> (67Ko) qui est originellement sous licence <a data-link-domain="creativecommons.org" href="https://creativecommons.org/licenses/by/4.0/legalcode.fr">Creative Commons 4.0 – Attribution CC BY</a> l’«&nbsp;Institut de la statistique du Québec, Fichiers du code géographique du Québec&nbsp;» même si je ne sais pas trop ce que ça signifie après une telle transformation… qui devient vraiment le «&nbsp;BY&nbsp;»&#8239;? 🤔</p>
<p><em>Note&nbsp;: l’interface proposée sous iOS pour les choix de datalist est assez déroutante car les suggestions se retrouvent dans la partie d’auto-completion du&nbsp;clavier&#8239;!</em></p>

<nav>
<p>
<a href="/david/2024/commun/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#commun</a>
<a href="/david/2024/opendata/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#opendata</a>
<a href="/david/2024/technique/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#technique</a>
<a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
</p>
</nav>
<h2>
<a href="/david/2024/01/31/" title="Lien permanent vers cet article">Mécénat</a> <time datetime="2024-01-31">31 janvier 2024</time>
</h2>

+ 5
- 3
david/2024/index.html View File

@@ -177,7 +177,8 @@
<a href="/david/2024/02/10/">Validisme</a>,
<a href="/david/2024/02/11/">Violence</a>,
<a href="/david/2024/02/12/">Renards</a>,
<a href="/david/2024/02/13/">Feutrage</a>.
<a href="/david/2024/02/13/">Feutrage</a>,
<a href="/david/2024/02/14/">GéoCodage</a>.
</p>
@@ -188,7 +189,7 @@
<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 (11)</a>,
<a href="/david/2024/commun/" rel="tag">#commun (3)</a>,
<a href="/david/2024/commun/" rel="tag">#commun (4)</a>,
<a href="/david/2024/communaute/" rel="tag">#communauté (5)</a>,
<a href="/david/2024/decision/" rel="tag">#décision (4)</a>,
<a href="/david/2024/dependance/" rel="tag">#dépendance (2)</a>,
@@ -204,6 +205,7 @@
<a href="/david/2024/gratitude/" rel="tag">#gratitude (2)</a>,
<a href="/david/2024/ia/" rel="tag">#IA (2)</a>,
<a href="/david/2024/lecture/" rel="tag">#lecture (1)</a>,
<a href="/david/2024/opendata/" rel="tag">#opendata (1)</a>,
<a href="/david/2024/opensource/" rel="tag">#opensource (4)</a>,
<a href="/david/2024/parentalite/" rel="tag">#parentalité (3)</a>,
<a href="/david/2024/partage/" rel="tag">#partage (2)</a>,
@@ -214,7 +216,7 @@
<a href="/david/2024/psychologie/" rel="tag">#psychologie (5)</a>,
<a href="/david/2024/solastalgia/" rel="tag">#solastalgia (1)</a>,
<a href="/david/2024/sport/" rel="tag">#sport (3)</a>,
<a href="/david/2024/technique/" rel="tag">#technique (10)</a>,
<a href="/david/2024/technique/" rel="tag">#technique (11)</a>,
<a href="/david/2024/velo/" rel="tag">#vélo (1)</a>,
<a href="/david/2024/web/" rel="tag">#web (6)</a>.

+ 321
- 0
david/2024/opendata/index.html View File

@@ -0,0 +1,321 @@
<!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 #opendata
— David Larlet</title>
<meta name="description" content="Publications relatives au tag #opendata">
<!-- 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-02-03.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>#opendata</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/14/" title="Lien permanent vers cet article">GéoCodage</a> <time datetime="2024-02-14">14 février 2024</time>
</h2>
<p>Dans le cadre de mon travail avec le <a data-link-domain="labrri.net" href="https://labrri.net/">LABRRI</a>, j’avais besoin de pouvoir laisser l’utilisateur·ice choisir une localité parmi les villes et arrondissements au Québec. Je me suis dit que c’était une bonne occasion d’explorer les données ouvertes&nbsp;locales.</p>
<p>Je tombe rapidement sur le <a data-link-domain="donneesquebec.ca" href="https://www.donneesquebec.ca/recherche/dataset/repertoire-des-municipalites-du-quebec">Répertoire des municipalités du Québec</a> qui dispose des communes et arrondissements au format CSV. Il me manque tout de même les coordonnées pour pouvoir ensuite les afficher sur une carte. Je creuse un peu et il existe des services de géocodage locaux comme <a data-link-domain="geocoder.ca" href="https://geocoder.ca/">geocoder.ca</a> mais je suis persuadé que ça doit être accessible librement quelque part. Je finis par trouver les <a data-link-domain="statistique.quebec.ca" href="https://statistique.quebec.ca/statistiques/divisions-territoriales/fichiers_code_geo/code-geographique-quebec.html">Fichiers du code géographique du Québec</a> qui comportent des coordonnées pour chaque localité, le tout en XML. Elles sont au format <code>47° 22' 34&quot; N</code> ce qui ne m’arrange pas et je me fais surtout avoir par la longitude un moment car elle est en français(!) <code>61° 52' 05&quot; O</code> — <code>O(uest)</code> vs. <code>W(est)</code>. Avec un petit coup de <code>ElementTree</code> + <a data-link-domain="pypi.org" href="https://pypi.org/project/latlon3/">latlon3</a>, j’arrive enfin à des coordonnées utilisables par <a data-link-domain="leafletjs.com" href="https://leafletjs.com/">Leaflet</a> qui me serviront à afficher les situations sur une&nbsp;carte.</p>
<p>Il me manque les coordonnées pour les arrondissements mais j’ai déjà fait la moitié à la main précédemment et il n’y en a qu’une quarantaine. Jouable, ne jamais oublier <a data-link-domain="xkcd.com" href="https://xkcd.com/1319/">ce XKCD</a> lorsqu’on&nbsp;développe.</p>
<p>Je passe maintenant à l’interface et je me dis que cette problématique est une bonne candidate pour <code>&lt;datalist&gt;</code> surtout qu’il y a deux champs du formulaire où il faut saisir le lieu&nbsp;: il est possible de référencer la même liste de données pour deux champs distincts ce qui est élégant. Ce qui l’est moins par contre, c’est que pour rendre ces choix non modifiables, il faut définir un <code>pattern</code> avec l’ensemble des localité, pour chaque champ concerné, donc en double. Je me retrouve avec 3&nbsp;fois les mêmes données… mais cela donne lieu à une <a data-link-domain="code.larlet.fr" href="https://code.larlet.fr/html/#forcer-un-element-parmi-une-datalist">nouvelle entrée dans ma mémoire technique</a>. Le formulaire complet faisant au final moins de 110Ko, je considère que c’est suffisant pour ne pas affaiblir l’interface avec du JavaScript qui factoriserait ces&nbsp;données.</p>
<figure>
<a href="/static/david/2024/2024-02-14-input-datalist.png"
title="Cliquer pour une version haute résolution">
<img
src="/static/david/2024/2024-02-14-input-datalist.png"
width="1634" height="408"
srcset="/static/david/2024/2024-02-14-input-datalist.png 1634w, /static/david/2024/2024-02-14-input-datalist.png 660w, /static/david/2024/2024-02-14-input-datalist.png 990w, /static/david/2024/2024-02-14-input-datalist.png 1320w"
sizes="min(100vw, calc(100vh * 1634 / 408))"
loading="lazy"
decoding="async"
alt="Un champ de saisie dans lequel j’ai écrit «&nbsp;baie&nbsp;» et qui affiche des suggestions de villes québécoises.">
</a>
<figcaption>Et&nbsp;voilà!</figcaption>
</figure>
<p>Si jamais vous avez besoin des données générées, <a href="/static/david/2024/municipalites_quebec_geocodees.csv">voici un CSV</a> (67Ko) qui est originellement sous licence <a data-link-domain="creativecommons.org" href="https://creativecommons.org/licenses/by/4.0/legalcode.fr">Creative Commons 4.0 – Attribution CC BY</a> l’«&nbsp;Institut de la statistique du Québec, Fichiers du code géographique du Québec&nbsp;» même si je ne sais pas trop ce que ça signifie après une telle transformation… qui devient vraiment le «&nbsp;BY&nbsp;»&#8239;? 🤔</p>
<p><em>Note&nbsp;: l’interface proposée sous iOS pour les choix de datalist est assez déroutante car les suggestions se retrouvent dans la partie d’auto-completion du&nbsp;clavier&#8239;!</em></p>

<nav>
<p>
<a href="/david/2024/commun/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#commun</a>
<a href="/david/2024/opendata/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#opendata</a>
<a href="/david/2024/technique/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#technique</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>

+ 46
- 0
david/2024/technique/index.html View File

@@ -134,6 +134,52 @@
</p>
</nav>
<h2>
<a href="/david/2024/02/14/" title="Lien permanent vers cet article">GéoCodage</a> <time datetime="2024-02-14">14 février 2024</time>
</h2>
<p>Dans le cadre de mon travail avec le <a data-link-domain="labrri.net" href="https://labrri.net/">LABRRI</a>, j’avais besoin de pouvoir laisser l’utilisateur·ice choisir une localité parmi les villes et arrondissements au Québec. Je me suis dit que c’était une bonne occasion d’explorer les données ouvertes&nbsp;locales.</p>
<p>Je tombe rapidement sur le <a data-link-domain="donneesquebec.ca" href="https://www.donneesquebec.ca/recherche/dataset/repertoire-des-municipalites-du-quebec">Répertoire des municipalités du Québec</a> qui dispose des communes et arrondissements au format CSV. Il me manque tout de même les coordonnées pour pouvoir ensuite les afficher sur une carte. Je creuse un peu et il existe des services de géocodage locaux comme <a data-link-domain="geocoder.ca" href="https://geocoder.ca/">geocoder.ca</a> mais je suis persuadé que ça doit être accessible librement quelque part. Je finis par trouver les <a data-link-domain="statistique.quebec.ca" href="https://statistique.quebec.ca/statistiques/divisions-territoriales/fichiers_code_geo/code-geographique-quebec.html">Fichiers du code géographique du Québec</a> qui comportent des coordonnées pour chaque localité, le tout en XML. Elles sont au format <code>47° 22' 34&quot; N</code> ce qui ne m’arrange pas et je me fais surtout avoir par la longitude un moment car elle est en français(!) <code>61° 52' 05&quot; O</code> — <code>O(uest)</code> vs. <code>W(est)</code>. Avec un petit coup de <code>ElementTree</code> + <a data-link-domain="pypi.org" href="https://pypi.org/project/latlon3/">latlon3</a>, j’arrive enfin à des coordonnées utilisables par <a data-link-domain="leafletjs.com" href="https://leafletjs.com/">Leaflet</a> qui me serviront à afficher les situations sur une&nbsp;carte.</p>
<p>Il me manque les coordonnées pour les arrondissements mais j’ai déjà fait la moitié à la main précédemment et il n’y en a qu’une quarantaine. Jouable, ne jamais oublier <a data-link-domain="xkcd.com" href="https://xkcd.com/1319/">ce XKCD</a> lorsqu’on&nbsp;développe.</p>
<p>Je passe maintenant à l’interface et je me dis que cette problématique est une bonne candidate pour <code>&lt;datalist&gt;</code> surtout qu’il y a deux champs du formulaire où il faut saisir le lieu&nbsp;: il est possible de référencer la même liste de données pour deux champs distincts ce qui est élégant. Ce qui l’est moins par contre, c’est que pour rendre ces choix non modifiables, il faut définir un <code>pattern</code> avec l’ensemble des localité, pour chaque champ concerné, donc en double. Je me retrouve avec 3&nbsp;fois les mêmes données… mais cela donne lieu à une <a data-link-domain="code.larlet.fr" href="https://code.larlet.fr/html/#forcer-un-element-parmi-une-datalist">nouvelle entrée dans ma mémoire technique</a>. Le formulaire complet faisant au final moins de 110Ko, je considère que c’est suffisant pour ne pas affaiblir l’interface avec du JavaScript qui factoriserait ces&nbsp;données.</p>
<figure>
<a href="/static/david/2024/2024-02-14-input-datalist.png"
title="Cliquer pour une version haute résolution">
<img
src="/static/david/2024/2024-02-14-input-datalist.png"
width="1634" height="408"
srcset="/static/david/2024/2024-02-14-input-datalist.png 1634w, /static/david/2024/2024-02-14-input-datalist.png 660w, /static/david/2024/2024-02-14-input-datalist.png 990w, /static/david/2024/2024-02-14-input-datalist.png 1320w"
sizes="min(100vw, calc(100vh * 1634 / 408))"
loading="lazy"
decoding="async"
alt="Un champ de saisie dans lequel j’ai écrit «&nbsp;baie&nbsp;» et qui affiche des suggestions de villes québécoises.">
</a>
<figcaption>Et&nbsp;voilà!</figcaption>
</figure>
<p>Si jamais vous avez besoin des données générées, <a href="/static/david/2024/municipalites_quebec_geocodees.csv">voici un CSV</a> (67Ko) qui est originellement sous licence <a data-link-domain="creativecommons.org" href="https://creativecommons.org/licenses/by/4.0/legalcode.fr">Creative Commons 4.0 – Attribution CC BY</a> l’«&nbsp;Institut de la statistique du Québec, Fichiers du code géographique du Québec&nbsp;» même si je ne sais pas trop ce que ça signifie après une telle transformation… qui devient vraiment le «&nbsp;BY&nbsp;»&#8239;? 🤔</p>
<p><em>Note&nbsp;: l’interface proposée sous iOS pour les choix de datalist est assez déroutante car les suggestions se retrouvent dans la partie d’auto-completion du&nbsp;clavier&#8239;!</em></p>

<nav>
<p>
<a href="/david/2024/commun/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#commun</a>
<a href="/david/2024/opendata/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#opendata</a>
<a href="/david/2024/technique/"
title="Liste de tous les articles 2024 associés à cette étiquette"
rel="tag">#technique</a>
<a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
</p>
</nav>
<h2>
<a href="/david/2024/02/05/" title="Lien permanent vers cet article">Jeu</a> <time datetime="2024-02-05">5 février 2024</time>
</h2>

+ 20
- 20
david/blogroll/index.html View File

@@ -174,6 +174,26 @@
</nav>
<p>N’hésitez pas à me contacter si vous ne souhaitez pas figurer dans cette liste.</p>
<h2>Leurs dernières publications</h2>
<dl>
<dt>
<a href="https://n.survol.fr/n/comment-developpera-t-on-demain">Comment déve­lop­pera-t-on demain ?</a>,
15-02-2024
</dt>
<dd>
Les déve­lop­peurs de mes équipes demandent depuis un moment des licences Github Copi­lot. J’ai vu quelques personnes parler de l’édi­teur Cursor.sh. J’avoue que j’ai eu envie de tester un peu. Sur un projet perso j’ai tenté l’ap­proche « allons-y tota­le­ment ». Je suis bluffé. Bon, j’ai encore le réflexe de cher­cher tout ce que je ne sais […]
— <a href="https://n.survol.fr/">Éric D.</a>
</dd>
</dl>
<dl>
<dt>
<a href="https://blog.ecologie-politique.eu/post/Une-colere-qui-se-tient-sage">Une colère qui se tient sage</a>,
15-02-2024
</dt>
<dd>
La récente mobilisation agricole a emmêlé tous les ingrédients qui caractérisent la France depuis son accélération illibérale : une pauvreté que le travail peine à résorber malgré les promesses renouvelées depuis 2007 de lui redonner sa « valeur » (morale, voire moralisatrice, mais jamais économique) ; la colère à laquelle donnent lieu ces promesses non tenues et le sentiment d’avoir été le…
— <a href="https://blog.ecologie-politique.eu/">Aude</a>
</dd>
</dl>
<dl>
<dt>
<a href="https://n.survol.fr/n/magasins-velo-en-ligne">Maga­sins vélo en ligne</a>,
@@ -284,16 +304,6 @@
— <a href="https://www.hypothermia.fr/">Eliness</a>
</dd>
</dl>
<dl>
<dt>
<a href="https://blog.ecologie-politique.eu/post/France-Bullshit">France Bullshit</a>,
25-01-2024
</dt>
<dd>
Il y a quelques jours j’ai repéré une pub assez laide pour un entreprise avec un nom à la con. Un peu comme Assur2000 ou Charenton Clés. Passant et repassant devant pour aller prendre le métro (quand il est accessible), il m’a fallu un temps pour comprendre que France Services était une énième déclinaison de France Bullshit, cette refonte des services de l’État sous une marque à la syntaxe…
— <a href="https://blog.ecologie-politique.eu/">Aude</a>
</dd>
</dl>
<dl>
<dt>
<a href="https://emmaclit.com/2024/01/19/culture-froncaise/">Culture fronçaise</a>,
@@ -344,16 +354,6 @@
— <a href="https://emmaclit.com/">Emma</a>
</dd>
</dl>
<dl>
<dt>
<a href="https://n.survol.fr/n/code-en-francais">Code en français</a>,
28-12-2023
</dt>
<dd>
« C’est ridi­cule ce getTauxRemboursementSecu(). Le code on le fait en anglais. (refor­mu­la­tion libre de débats trou­vés sur Twit­ter) Je ai eu ce débat quasi­ment dans chaque équipe que j’ai traversé. Les réponses n’ont pas toujours été les mêmes et — sans vous dire quoi faire dans votre situa­tion spéci­fique, bien que mon avis géné­rique soit […]
— <a href="https://n.survol.fr/">Éric D.</a>
</dd>
</dl>
<dl>
<dt>
<a href="https://thom4.net/2023/12/27/vigipirate/">☕️ Journal : Vigipirate</a>,

+ 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/14/">GéoCodage</a>,
<a href="/david/2024/02/13/">Feutrage</a>,
<a href="/david/2024/02/12/">Renards</a>,
<a href="/david/2024/02/11/">Violence</a>,
@@ -196,7 +197,7 @@
<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 (11)</a>,
<a href="/david/2024/commun/" rel="tag">#commun (3)</a>,
<a href="/david/2024/commun/" rel="tag">#commun (4)</a>,
<a href="/david/2024/communaute/" rel="tag">#communauté (5)</a>,
<a href="/david/2024/decision/" rel="tag">#décision (4)</a>,
<a href="/david/2024/dependance/" rel="tag">#dépendance (2)</a>,
@@ -212,6 +213,7 @@
<a href="/david/2024/gratitude/" rel="tag">#gratitude (2)</a>,
<a href="/david/2024/ia/" rel="tag">#IA (2)</a>,
<a href="/david/2024/lecture/" rel="tag">#lecture (1)</a>,
<a href="/david/2024/opendata/" rel="tag">#opendata (1)</a>,
<a href="/david/2024/opensource/" rel="tag">#opensource (4)</a>,
<a href="/david/2024/parentalite/" rel="tag">#parentalité (3)</a>,
<a href="/david/2024/partage/" rel="tag">#partage (2)</a>,
@@ -222,7 +224,7 @@
<a href="/david/2024/psychologie/" rel="tag">#psychologie (5)</a>,
<a href="/david/2024/solastalgia/" rel="tag">#solastalgia (1)</a>,
<a href="/david/2024/sport/" rel="tag">#sport (3)</a>,
<a href="/david/2024/technique/" rel="tag">#technique (10)</a>,
<a href="/david/2024/technique/" rel="tag">#technique (11)</a>,
<a href="/david/2024/velo/" rel="tag">#vélo (1)</a>,
<a href="/david/2024/web/" rel="tag">#web (6)</a>.

+ 30
- 20
david/log/index.xml View File

@@ -6,13 +6,42 @@
<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-02-14T12:00:00+01:00</updated>
<updated>2024-02-15T12: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">GéoCodage</title>
<link href="https://larlet.fr/david/2024/02/14/" rel="alternate" type="text/html" />
<updated>2024-02-14T12:00:00+01:00</updated>
<id>https://larlet.fr/david/2024/02/14/</id>
<summary type="html">
&lt;p&gt;Dans le cadre de mon travail avec le &lt;a href=&quot;https://labrri.net/&quot;&gt;LABRRI&lt;/a&gt;, j’avais besoin de pouvoir laisser l’utilisateur·ice choisir une localité parmi les villes et arrondissements au Québec. Je me suis dit que c’était une bonne occasion d’explorer les données ouvertes&amp;nbsp;locales.&lt;/p&gt;
&lt;p&gt;Je tombe rapidement sur le &lt;a href=&quot;https://www.donneesquebec.ca/recherche/dataset/repertoire-des-municipalites-du-quebec&quot;&gt;Répertoire des municipalités du Québec&lt;/a&gt; qui dispose des communes et arrondissements au format CSV. Il me manque tout de même les coordonnées pour pouvoir ensuite les afficher sur une carte. Je creuse un peu et il existe des services de géocodage locaux comme &lt;a href=&quot;https://geocoder.ca/&quot;&gt;geocoder.ca&lt;/a&gt; mais je suis persuadé que ça doit être accessible librement quelque part. Je finis par trouver les &lt;a href=&quot;https://statistique.quebec.ca/statistiques/divisions-territoriales/fichiers_code_geo/code-geographique-quebec.html&quot;&gt;Fichiers du code géographique du Québec&lt;/a&gt; qui comportent des coordonnées pour chaque localité, le tout en XML. Elles sont au format &lt;code&gt;47° 22&#x27; 34&amp;quot; N&lt;/code&gt; ce qui ne m’arrange pas et je me fais surtout avoir par la longitude un moment car elle est en français(!) &lt;code&gt;61° 52&#x27; 05&amp;quot; O&lt;/code&gt; — &lt;code&gt;O(uest)&lt;/code&gt; vs. &lt;code&gt;W(est)&lt;/code&gt;. Avec un petit coup de &lt;code&gt;ElementTree&lt;/code&gt; + &lt;a href=&quot;https://pypi.org/project/latlon3/&quot;&gt;latlon3&lt;/a&gt;, j’arrive enfin à des coordonnées utilisables par &lt;a href=&quot;https://leafletjs.com/&quot;&gt;Leaflet&lt;/a&gt; qui me serviront à afficher les situations sur une&amp;nbsp;carte.&lt;/p&gt;
&lt;p&gt;Il me manque les coordonnées pour les arrondissements mais j’ai déjà fait la moitié à la main précédemment et il n’y en a qu’une quarantaine. Jouable, ne jamais oublier &lt;a href=&quot;https://xkcd.com/1319/&quot;&gt;ce XKCD&lt;/a&gt; lorsqu’on&amp;nbsp;développe.&lt;/p&gt;
&lt;p&gt;Je passe maintenant à l’interface et je me dis que cette problématique est une bonne candidate pour &lt;code&gt;&amp;lt;datalist&amp;gt;&lt;/code&gt; surtout qu’il y a deux champs du formulaire où il faut saisir le lieu&amp;nbsp;: il est possible de référencer la même liste de données pour deux champs distincts ce qui est élégant. Ce qui l’est moins par contre, c’est que pour rendre ces choix non modifiables, il faut définir un &lt;code&gt;pattern&lt;/code&gt; avec l’ensemble des localité, pour chaque champ concerné, donc en double. Je me retrouve avec 3&amp;nbsp;fois les mêmes données… mais cela donne lieu à une &lt;a href=&quot;https://code.larlet.fr/html/#forcer-un-element-parmi-une-datalist&quot;&gt;nouvelle entrée dans ma mémoire technique&lt;/a&gt;. Le formulaire complet faisant au final moins de 110Ko, je considère que c’est suffisant pour ne pas affaiblir l’interface avec du JavaScript qui factoriserait ces&amp;nbsp;données.&lt;/p&gt;
&lt;figure&gt;
&lt;a href=&quot;https://larlet.fr/static/david/2024/2024-02-14-input-datalist.png&quot;
title=&quot;Cliquer pour une version haute résolution&quot;&gt;
&lt;img
src=&quot;https://larlet.fr/static/david/2024/2024-02-14-input-datalist.png&quot;
width=&quot;1634&quot; height=&quot;408&quot;
srcset=&quot;/static/david/2024/2024-02-14-input-datalist.png 1634w, /static/david/2024/2024-02-14-input-datalist.png 660w, /static/david/2024/2024-02-14-input-datalist.png 990w, /static/david/2024/2024-02-14-input-datalist.png 1320w&quot;
sizes=&quot;min(100vw, calc(100vh * 1634 / 408))&quot;
loading=&quot;lazy&quot;
decoding=&quot;async&quot;
alt=&quot;Un champ de saisie dans lequel j’ai écrit «&amp;nbsp;baie&amp;nbsp;» et qui affiche des suggestions de villes québécoises.&quot;&gt;
&lt;/a&gt;
&lt;figcaption&gt;Et&amp;nbsp;voilà!&lt;/figcaption&gt;
&lt;/figure&gt;
&lt;p&gt;Si jamais vous avez besoin des données générées, &lt;a href=&quot;https://larlet.fr/static/david/2024/municipalites_quebec_geocodees.csv&quot;&gt;voici un CSV&lt;/a&gt; (67Ko) qui est originellement sous licence &lt;a href=&quot;https://creativecommons.org/licenses/by/4.0/legalcode.fr&quot;&gt;Creative Commons 4.0 – Attribution CC BY&lt;/a&gt; l’«&amp;nbsp;Institut de la statistique du Québec, Fichiers du code géographique du Québec&amp;nbsp;» même si je ne sais pas trop ce que ça signifie après une telle transformation… qui devient vraiment le «&amp;nbsp;BY&amp;nbsp;»&amp;#8239;? 🤔&lt;/p&gt;
&lt;p&gt;&lt;em&gt;Note&amp;nbsp;: l’interface proposée sous iOS pour les choix de datalist est assez déroutante car les suggestions se retrouvent dans la partie d’auto-completion du&amp;nbsp;clavier&amp;#8239;!&lt;/em&gt;&lt;/p&gt;
&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/commun/&quot;&gt;#commun&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/opendata/&quot;&gt;#opendata&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/technique/&quot;&gt;#technique&lt;/a&gt;&lt;/p&gt;&lt;/nav&gt;&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
</entry>
<entry xml:lang="fr">
<title type="html">Feutrage</title>
<link href="https://larlet.fr/david/2024/02/13/" rel="alternate" type="text/html" />
@@ -1291,23 +1320,4 @@ quelqu’un nous&amp;nbsp;voit&lt;/p&gt;
&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/addiction/&quot;&gt;#addiction&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/evolution/&quot;&gt;#évolution&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/technique/&quot;&gt;#technique&lt;/a&gt;&lt;/p&gt;&lt;/nav&gt;&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
</entry>
<entry xml:lang="fr">
<title type="html">Rééducation</title>
<link href="https://larlet.fr/david/2024/01/15/" rel="alternate" type="text/html" />
<updated>2024-01-15T12:00:00+01:00</updated>
<id>https://larlet.fr/david/2024/01/15/</id>
<summary type="html">
&lt;p&gt;J’ai réussi à marcher 6&amp;#8239;km dans la neige avec des bottes de neige assez hautes. Pas pire. On va voir si ça ne tire pas trop dans la nuit. J’ai appris à mettre des bandes de kynésiologie aussi pour un léger soutien sur la rotation interne. Ce n’est pas une entorse classique car généralement deux arbres ne sont pas impliqués donc la torsion est différente. Du moins, c’est ce que mon doctorat express en médecine me laisse à penser… et mes sensations&amp;nbsp;surtout&amp;#8239;!&lt;/p&gt;
&lt;p&gt;Récupération active ou&amp;nbsp;impatience&amp;#8239;?&lt;/p&gt;
&lt;hr /&gt;

&lt;blockquote lang=&quot;en&quot;&gt;
&lt;p&gt;The front-end to your dev&amp;nbsp;env.&lt;/p&gt;
&lt;p&gt;&lt;cite&gt;&lt;em&gt;&lt;a href=&quot;https://mise.jdx.dev/&quot;&gt;mise-en-place&lt;/a&gt;&lt;/em&gt;&lt;/cite&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;Ironiquement, j’ai toujours la crainte que ces outils viennent davantage polluer mon environnement actuel. Je ne suis pas sur assez de produits pour rencontrer des limites à ce niveau. Je m’en sors plutôt bien avec &lt;a href=&quot;https://code.larlet.fr/shell/#alias&quot;&gt;quelques alias&lt;/a&gt; et un &lt;a href=&quot;https://code.larlet.fr/shell/#auto-deactivation-des-virtualenvs&quot;&gt;environnement virtuel dé·monté&lt;/a&gt; à l’entrée dans un&amp;nbsp;dossier.&lt;/p&gt;
&lt;p&gt;Je compare un peu des carottes et des patates mais ça donne une direction en terme de frugalité sur ce plan là. On simplifie rarement un environnement en ajoutant une couche (coucou Docker), au mieux on masque une incompétence. Ce qui n’est pas toujours une &lt;a href=&quot;https://larlet.fr/david/2024/01/05/&quot;&gt;tension&lt;/a&gt; en fonction du&amp;nbsp;contexte&amp;#8239;!&lt;/p&gt;
&lt;nav&gt;&lt;p&gt;&lt;a href=&quot;https://larlet.fr/david/2024/addiction/&quot;&gt;#addiction&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/evolution/&quot;&gt;#évolution&lt;/a&gt; &lt;a href=&quot;https://larlet.fr/david/2024/sport/&quot;&gt;#sport&lt;/a&gt;&lt;/p&gt;&lt;/nav&gt;&lt;hr/&gt;&lt;p&gt;&lt;a href=&quot;mailto:david@larlet.fr&quot;&gt;Réagir ?&lt;/a&gt;&lt;/p&gt;</summary>
</entry>
</feed>

+ 12
- 0
david/recherche/index.html View File

@@ -276,6 +276,12 @@
</template>
<script id="search-index" type="application/json">[
{
"title": "G\u00e9oCodage",
"url": "/david/2024/02/14/",
"date": "2024-02-14",
"content": "Dans le cadre de mon travail avec le LABRRI, j\u2019avais besoin de pouvoir laisser l\u2019utilisateur\u00b7ice choisir une localit\u00e9 parmi les villes et arrondissements au Qu\u00e9bec. Je me suis dit que c\u2019\u00e9tait une bonne occasion d\u2019explorer les donn\u00e9es ouvertes\u00a0locales. Je tombe rapidement sur le R\u00e9pertoire des municipalit\u00e9s du Qu\u00e9bec qui dispose des communes et arrondissements au format CSV. Il me manque tout de m\u00eame les coordonn\u00e9es pour pouvoir ensuite les afficher sur une carte. Je creuse un peu et il existe des services de g\u00e9ocodage locaux comme geocoder.ca mais je suis persuad\u00e9 que \u00e7a doit \u00eatre accessible librement quelque part. Je finis par trouver les Fichiers du code g\u00e9ographique du Qu\u00e9bec qui comportent des coordonn\u00e9es pour chaque localit\u00e9, le tout en XML. Elles sont au format 47\u00b0 22 34\" N ce qui ne m\u2019arrange pas et je me fais surtout avoir par la longitude un moment car elle est en fran\u00e7ais(!) 61\u00b0 52 05\" O \u2014 O(uest) vs. W(est). Avec un petit coup de ElementTree + latlon3, j\u2019arrive enfin \u00e0 des coordonn\u00e9es utilisables par Leaflet qui me serviront \u00e0 afficher les situations sur une\u00a0carte. Il me manque les coordonn\u00e9es pour les arrondissements mais j\u2019ai d\u00e9j\u00e0 fait la moiti\u00e9 \u00e0 la main pr\u00e9c\u00e9demment et il n\u2019y en a qu\u2019une quarantaine. Jouable, ne jamais oublier ce XKCD lorsqu\u2019on\u00a0d\u00e9veloppe. Je passe maintenant \u00e0 l\u2019interface et je me dis que cette probl\u00e9matique est une bonne candidate pour <datalist> surtout qu\u2019il y a deux champs du formulaire o\u00f9 il faut saisir le lieu\u00a0: il est possible de r\u00e9f\u00e9rencer la m\u00eame liste de donn\u00e9es pour deux champs distincts ce qui est \u00e9l\u00e9gant. Ce qui l\u2019est moins par contre, c\u2019est que pour rendre ces choix non modifiables, il faut d\u00e9finir un pattern avec l\u2019ensemble des localit\u00e9, pour chaque champ concern\u00e9, donc en double. Je me retrouve avec 3\u00a0fois les m\u00eames donn\u00e9es\u2026 mais cela donne lieu \u00e0 une nouvelle entr\u00e9e dans ma m\u00e9moire technique. Le formulaire complet faisant au final moins de 110Ko, je consid\u00e8re que c\u2019est suffisant pour ne pas affaiblir l\u2019interface avec du JavaScript qui factoriserait ces\u00a0donn\u00e9es. <a href=\"/static/david/2024/2024-02-14-input-datalist.png\" title=\"Cliquer pour une version haute r\u00e9solution\"> <img src=\"/static/david/2024/2024-02-14-input-datalist.png\" width=\"1634\" height=\"408\" srcset=\"/static/david/2024/2024-02-14-input-datalist.png 1634w, /static/david/2024/2024-02-14-input-datalist.png 660w, /static/david/2024/2024-02-14-input-datalist.png 990w, /static/david/2024/2024-02-14-input-datalist.png 1320w\" sizes=\"min(100vw, calc(100vh * 1634 / 408))\" loading=\"lazy\" decoding=\"async\" alt=\"Un champ de saisie dans lequel j\u2019ai \u00e9crit \u00ab\u00a0baie\u00a0\u00bb et qui affiche des suggestions de villes qu\u00e9b\u00e9coises.\"> Et\u00a0voil\u00e0! Si jamais vous avez besoin des donn\u00e9es g\u00e9n\u00e9r\u00e9es, voici un CSV (67Ko) qui est originellement sous licence Creative Commons 4.0 \u2013 Attribution CC BY l\u2019\u00ab\u00a0Institut de la statistique du Qu\u00e9bec, Fichiers du code g\u00e9ographique du Qu\u00e9bec\u00a0\u00bb m\u00eame si je ne sais pas trop ce que \u00e7a signifie apr\u00e8s une telle transformation\u2026 qui devient vraiment le \u00ab\u00a0BY\u00a0\u00bb\u202f? \ud83e\udd14 Note\u00a0: l\u2019interface propos\u00e9e sous iOS pour les choix de datalist est assez d\u00e9routante car les suggestions se retrouvent dans la partie d\u2019auto-completion du\u00a0clavier\u202f!"
},
{
"title": "Feutrage",
"url": "/david/2024/02/13/",
@@ -540,6 +546,12 @@
"date": "2024-01-01",
"content": "33\u202f% de 44\u00a0millions de consommateurs vont faire le Dry January 22\u202f% des consommateurs ont une conso excessive, c\u2019est-\u00e0-dire 10\u00a0verres/semaine max et plus de deux\u00a0verres/jour. Les seniors sont aussi tr\u00e8s touch\u00e9\u00b7es. L\u2019alcool est une drogue.. On peut faire la f\u00eate sans alcool et\u00a0s\u2019\u00e9clater. Quand on arr\u00eate\u00a0: bienfaits sur le foie, la peau, le coeur, etc\u2026 Pb\u00a0: m\u00e9moire, troubles cognitifs, responsable de cancer, pb sommeil, d\u00e9compensation de maladie psy,\u2026 41000\u00a0d\u00e9c\u00e8s par an en\u00a0France. Les cinq sympt\u00f4mes d\u00e9finissent un probl\u00e8me de\u00a0d\u00e9pendance\u00a0: Perte de\u00a0contr\u00f4le Usage\u00a0compulsif Envie\u00a0r\u00e9pressive Usage\u00a0chronique Cons\u00e9quences psychiques, physiques, sociales,\u2026 Bon Dry J. pour celleux qui le font\u202f! Moi j\u2019en\u00a0suis\u202f! @Air@framapiaf.org Dans mon entourage, de plus en plus de personnes que j\u2019estime ne boivent pas d\u2019alcool, de plus en plus de personnes qui vieillissent en deviennent d\u00e9pendantes. Je suis davantage attir\u00e9 par la premi\u00e8re option\u2026 et pas pour un seul\u00a0mois. Je me sens pr\u00eat, on verra bien o\u00f9 cela me\u00a0m\u00e8ne. Grosse envie de reprendre la CSS par ici en ce d\u00e9but d\u2019ann\u00e9e. Avec le dilemme de faire chuter cette motivation si je publie d\u00e8s maintenant avec l\u2019ancienne (qui restera effective sur les anciens articles). Je vais essayer de me\u00a0retenir."
},
{
"title": "G\u00e9oCodage",
"url": "/david/2024/02/14/",
"date": "2024-02-14",
"content": "Dans le cadre de mon travail avec le LABRRI, j\u2019avais besoin de pouvoir laisser l\u2019utilisateur\u00b7ice choisir une localit\u00e9 parmi les villes et arrondissements au Qu\u00e9bec. Je me suis dit que c\u2019\u00e9tait une bonne occasion d\u2019explorer les donn\u00e9es ouvertes\u00a0locales. Je tombe rapidement sur le R\u00e9pertoire des municipalit\u00e9s du Qu\u00e9bec qui dispose des communes et arrondissements au format CSV. Il me manque tout de m\u00eame les coordonn\u00e9es pour pouvoir ensuite les afficher sur une carte. Je creuse un peu et il existe des services de g\u00e9ocodage locaux comme geocoder.ca mais je suis persuad\u00e9 que \u00e7a doit \u00eatre accessible librement quelque part. Je finis par trouver les Fichiers du code g\u00e9ographique du Qu\u00e9bec qui comportent des coordonn\u00e9es pour chaque localit\u00e9, le tout en XML. Elles sont au format 47\u00b0 22 34\" N ce qui ne m\u2019arrange pas et je me fais surtout avoir par la longitude un moment car elle est en fran\u00e7ais(!) 61\u00b0 52 05\" O \u2014 O(uest) vs. W(est). Avec un petit coup de ElementTree + latlon3, j\u2019arrive enfin \u00e0 des coordonn\u00e9es utilisables par Leaflet qui me serviront \u00e0 afficher les situations sur une\u00a0carte. Il me manque les coordonn\u00e9es pour les arrondissements mais j\u2019ai d\u00e9j\u00e0 fait la moiti\u00e9 \u00e0 la main pr\u00e9c\u00e9demment et il n\u2019y en a qu\u2019une quarantaine. Jouable, ne jamais oublier ce XKCD lorsqu\u2019on\u00a0d\u00e9veloppe. Je passe maintenant \u00e0 l\u2019interface et je me dis que cette probl\u00e9matique est une bonne candidate pour <datalist> surtout qu\u2019il y a deux champs du formulaire o\u00f9 il faut saisir le lieu\u00a0: il est possible de r\u00e9f\u00e9rencer la m\u00eame liste de donn\u00e9es pour deux champs distincts ce qui est \u00e9l\u00e9gant. Ce qui l\u2019est moins par contre, c\u2019est que pour rendre ces choix non modifiables, il faut d\u00e9finir un pattern avec l\u2019ensemble des localit\u00e9, pour chaque champ concern\u00e9, donc en double. Je me retrouve avec 3\u00a0fois les m\u00eames donn\u00e9es\u2026 mais cela donne lieu \u00e0 une nouvelle entr\u00e9e dans ma m\u00e9moire technique. Le formulaire complet faisant au final moins de 110Ko, je consid\u00e8re que c\u2019est suffisant pour ne pas affaiblir l\u2019interface avec du JavaScript qui factoriserait ces\u00a0donn\u00e9es. <a href=\"/static/david/2024/2024-02-14-input-datalist.png\" title=\"Cliquer pour une version haute r\u00e9solution\"> <img src=\"/static/david/2024/2024-02-14-input-datalist.png\" width=\"1634\" height=\"408\" srcset=\"/static/david/2024/2024-02-14-input-datalist.png 1634w, /static/david/2024/2024-02-14-input-datalist.png 660w, /static/david/2024/2024-02-14-input-datalist.png 990w, /static/david/2024/2024-02-14-input-datalist.png 1320w\" sizes=\"min(100vw, calc(100vh * 1634 / 408))\" loading=\"lazy\" decoding=\"async\" alt=\"Un champ de saisie dans lequel j\u2019ai \u00e9crit \u00ab\u00a0baie\u00a0\u00bb et qui affiche des suggestions de villes qu\u00e9b\u00e9coises.\"> Et\u00a0voil\u00e0! Si jamais vous avez besoin des donn\u00e9es g\u00e9n\u00e9r\u00e9es, voici un CSV (67Ko) qui est originellement sous licence Creative Commons 4.0 \u2013 Attribution CC BY l\u2019\u00ab\u00a0Institut de la statistique du Qu\u00e9bec, Fichiers du code g\u00e9ographique du Qu\u00e9bec\u00a0\u00bb m\u00eame si je ne sais pas trop ce que \u00e7a signifie apr\u00e8s une telle transformation\u2026 qui devient vraiment le \u00ab\u00a0BY\u00a0\u00bb\u202f? \ud83e\udd14 Note\u00a0: l\u2019interface propos\u00e9e sous iOS pour les choix de datalist est assez d\u00e9routante car les suggestions se retrouvent dans la partie d\u2019auto-completion du\u00a0clavier\u202f!"
},
{
"title": "Feutrage",
"url": "/david/2024/02/13/",

Write Preview
Loading…
Cancel
Save