Aller au contenu

Divers⚓︎

Un style pour mastodon⚓︎

🐣 2023-01

Info

J’utilise maintenant (circa-2024) uniquement TangerineUI par @nileane qui fait un boulot de dingue. MERCI ! 🧡

Warning

Travail en cours, une version potentiellement plus à jour est disponible directement sur mon serveur.

L’avantage d’avoir sa propre instance est de pouvoir ajouter des styles CSS que l’on trouve un peu plus appropriés à son usage et à sa propre conception de la lisibilité.

mastodon.css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
/* A theme for mastodon admins (or Stylus browser's extension). */

body.theme-default {
  /* You need to download/install that font, for instance here:
  https://befonts.com/interface-font-family.html */
  font-family: Interface, "mastodon-font-sans-serif",sans-serif;;
  /* With 500 chars, readability of paragraphs matters. */
  line-height: 1.5;
}

/* Makes the default theme background darker for `Followers only` messages
and even darker (black) for `Mentioned people only` messages. */
.theme-default .status__wrapper-private {
  background: midnightblue;
}
.theme-default .status__wrapper-direct {
  background: black;
}

/* More colors for @`mentions` and #`hashtags`. */
.theme-default .hashtag.mention.status-link {
  color: yellow;
}
.theme-default .u-url.mention.status-link {
  color: dodgerblue;
}

/* Less colors for `@`mentions and `#`hashtags. */
.theme-default .u-url.mention.status-link,
.theme-default .hashtag.mention.status-link {
  display: inline-block;
}
.theme-default .u-url.mention.status-link::first-letter,
.theme-default .hashtag.mention.status-link::first-letter {
  color: gray;
}

/* Experimental. */
.column {
  width: 385px;
}

Accents et fichiers dans git⚓︎

🐣 2023-09

J’avais souvent une erreur avec des noms de fichiers accentués en français sur certains dépôts git. J’ai découvert qu’il fallait changer une configuration sous macOS, soit en faisant :

git-unicode.sh
1
2
git config --global core.precomposeunicode true  # (1)
git reset --hard origin/master && git pull  # (2)
  1. À ne faire qu’une seule fois par machine/OS.
  2. Ou recloner le dépôt.

Soit (pas testé) en faisant :

git-quotepath.sh
1
2
git config --global core.quotepath false  # (1)
git reset --hard origin/master && git pull  # (2)
  1. À ne faire qu’une seule fois par machine/OS.
  2. Ou recloner le dépôt.

Cela devrait afficher les fichiers avec des noms accentués incohérents mais au moins ça ne bloque pas les interactions avec le dépôt.

Ne récupérer qu’un sous-répertoire de git⚓︎

🐣 2024-10

Il est parfois intéressant de ne récupérer qu’un sous-dossier d’un dépôt complet. Selon la taille du dépôt et son historique ça peut accélerer le traitement de plusieurs ordres de grandeur !

Par exemple ici on ne va récupérer que le dossier docs-users contenu dans le dépôt umap qui contient l’intégralité du code dont on n’a pas besoin pour générer la documentation statique :

git-subfolder.sh
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
rm -rf docs
git init tmp-umap
cd tmp-umap
git remote add origin https://github.com/umap-project/umap
git fetch --depth=1
git config core.sparseCheckout true
echo docs-users >> .git/info/sparse-checkout
git checkout master
cd ..
mv tmp-umap/docs-users docs
rm -rf tmp-umap

C’est inspiré d’un gist.

Note

Voir aussi git sparse-checkout.

Ressources pour travailler les polices⚓︎

🐣 2024-10

Note

Il est aussi possible de forger les bonnes URL Google Fonts à la main pour récupérer les fichiers sans aucun outil, voir la description par ici.

Ressources pour travailler l’accessibilité⚓︎

🐣 2024-10

  • a11y.css pour pointer les incohérences niveau HTML (avec ses extensions navigateurs)
  • sa11y qui fait sensiblement la même chose (avec beaucoup plus de JS)
  • magentaa11y pour aider à produire des checklists avec tests
  • Easy Checks documentation par le W3C
  • WAVE (web accessibility evaluation tool) des extensions avec des infos
  • Axe pareil
  • Tanaguru un testeur à partir d’une URL
  • Asqatasun (ex-Tanaguru) pour faire des audits
  • A11Y Style Guide une référence avec des entrées par composants
  • WhoCanUse pour vérifier les contrastes de couleurs et le rendu selon la vision des personnes
  • RandomA11Y un outil pour générer des couleurs avec des contrastes satisfaisants
  • PageSpeed / LightHouse permettent de mettre en lumière certains soucis de perf / accessibilité aussi