Quand l’IA générative épuise ses adeptes - Next

Les progrès techniques ne font gagner du temps que pour les patrons, rarement pour les croquants lambda comme nous... sinon, on ne travaillerait plus qu'un ou deux jours par semaine pour la même production. Il en a été de même pour la voiture, l'informatique en général, internet, les machines-outils numériques, l'industrialisation... en gros, pour le boss, plus de fric, pour nous, plus de précarité, de mobilité et de stress ou de chômage.

Si on peut faire un taf trois fois plus vite avec trois fois moins d'employés, ce sera trois fois moins de gens embauchés pour trois fois plus de production, pas neuf fois plus de temps libre pour les employés...

Via https://sebsauvage.net/links/

Responsive Moderne, le Web au-delà des breakpoints - Alsacreations

Je n'ai pas forcément compris toutes les explications mais l'article est vraiment intéressant.

J'imagine qu'il me faudrait réfléchir pour remplacer mon usage des media queries façon patch à la pelle de chantier des trucs qui foirent quand on change la taille du viewport... si je pouvais me passer des breakpoints...

Mais bon, j'ai déjà bossé à un refacto du css de mon appli de documents/exercices pour les élèves en modernisant le code à coups de nesting et de variables pour les couleurs... résultat, certains navigateurs au collège affichent de la merde parce qu'ils ne sont pas mis à jour

Je ne sais pas pour vous amis codeurs, mais de mon côté, si je n'ai pas un problème concret pour intégrer des nouveautés,impossible de les comprendre vraiment...

CSS properties that solve annoying problems - YouTube

Je me note quelques astuces intéressantes. Toutefois, une remarque en passant... ARRÊTEZ DE FAIRE DES VIDÉOS DE PROGRAMMATION... à quoi ça rime ? on ne peut pas faire de copier coller, pas de récup auto de snippets, pas de tests... à part faire grimper votre popularité sur les raizosocio... pfff.

Oui, je sais qu'en description il a mis les snippets : mais il pouvait les inclures dans une page de blog, non ? Ou alors plus personne ne sait lire à part moi et on ne m'a rien dit ?!

un effet glow ou une ombre qui suit le background de la div.

L'astuce consiste à utiliser des pseudo éléments héritant du background de la div et à les blur.

.gradient-shadow {
  background: linear-gradient(
    45deg,
    hsl(var(--clr-orange)),
    hsl(var(--clr-blue))
  );
  position: relative;
  isolation: isolate;
}

.gradient-shadow::before,
.gradient-shadow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
  /*   border: 10px dotted white; */
}

.gradient-shadow::before {
  filter: blur(0.75em);
}

.gradient-shadow::after {
  opacity: 0.5;
  filter: blur(2em);
}

Faire en sorte que la répartition du texte sur plusieurs lignes soit meilleure

En gros, le navigateur essaie de couper le texte de façon plus homogène

// pour les titres (peu de lignes) 
h1{ text-wrap: balance;}
// pour les paragraphes etc (beaucoup de lignes): pas d'orphelin sur la dernière ligne
p{text-wrap:pretty;}



Note perso: les commentaires dans les adresses email

Comments are allowed in the domain as well as in the local-part; for example, john.smith@(comment)example.com and john.smith@example.com(comment) are equivalent to john.smith@example.com.

Donc, on peut faire des emails commentés pour garder la trace des entreprises à qui on les a données, histoire de

  • pouvoir effectuer un traitement automatisé des mails en fonction de l'émetteur
  • pouvoir tracer les salopards qui vendent ton email (lol: tous)

Valable sous réserve que :

  1. l'entreprise collectant l'email autorise les caractères ( et ) dans le champ... ils se torchent souvent avec les normes.
  2. si elle l'autorise, qu'elle n'en suprrime pas les commentaires automatiquement...

Tous Les Mêmes ? Gauche vs Droite : Qui a dit quoi ?

Petit partage en passant: un site codé par un visiteur... Il s'est amusé à scraper des centaines de citations, en a viré le contexte pour en faire «un blind test vicieux» (ce sont ses propres termes )

Capture d’écran du 2026-02-07 14-15-49.webp Capture d’écran du 2026-02-07 14-18-24.webp Capture d’écran du 2026-02-07 14-19-05.webp

En gros, vous choisissez deux personnalités politiques, on vous donne une citation et votre tâche est de deviner qui l'a proférée... Un lien vers la source est fourni.

«C'est gratuit, sans pub, sans tracker»

Allez ...

Planet crafter : et maintenant, que fais-je faiiiiireuuuuh (réf de vieux)

Bon... ça-y-est... J'ai re-fini Planet crafter. Quand je dis fini, je ne veux pas dire les fins à la con où tu livres la planète aux corpos etc... J'ai juste TOUT terraformé... Tout le système... et c'était vraiment bien. Comme j'en ai déjà parlé avant ( https://warriordudimanche.net/article1959/planet-crafter-early-access-pourquoi-cest-bien ) je vais faire vite...

D'abord : Prime

Histoire de me remettre dans le bain, j'ai refais la première planète, Prime, aux ressources abondantes. Cette fois, j'en connaissais tous les secrets, j'ai donc bien planifié, hiérarchisé etc... et je me suis mis un mod permettant de faire des piles de 10 dans l'inventaire (je ne voulais plus des allers-retours de farming)

Une fois la planète arrivée au bout de sa terraformation, je n'ai pas fait les déclencheurs de fin: j'ai seulement fabriqué une fusée interplanétaire, je l'ai chargée de matos stratégiquement choisi pour la planète suivante afin de pouvoir démarrer direct avec tout le nécessaire.

Et on peut en mettre: en gros l'équivalent d'une armoire et de deux coffres (dans mon inventaire et celui de la navette) J'ai réservé 5 emplacements afin d'emmener 50 drones.

Les autres planètes (sauf Toxicity )

Chaque planète propose un challenge un peu différent, soit en matière de ressources (plus rares ou différentes) ou en méthodes d'extraction (comme Aqualis sur laquelle on ne peut mettre de foreuse)

Autant le dire de suite, rien de très affolant, en particulier quand on a stratégiquement préparé son arrivée. Ceci dit, le plaisir est là et la découverte toujours agréable. J'ai passé de belles heures à terraformer tout ça.

Dernière planète : Toxicity

Celle-ci a été une vraie réussite à mon goût: en effet, on arrive sur une planète dévastée et complètement polluée qu'il faudra d'abord nettoyer et purifier avant de la terraformer.

On y retrouver un peu la précarité des premières heures de jeu car on voit apparaître une nouvelle barre de contamination qui nous oblige à nouveau à faire attention, comme avec l'oxygène au début.

Conclusion

Je recommande vraiment ce jeu: il est paisible, sans ennemi à abattre, écologique, sans prise de tête avec des arbres technologiques etc...

Le seul problème: A quoi jouer après ça ?!

memequentin.jpeg

My Opinionated CSS Reset | Vale.Rocks

Je me note quelques astuces à tester ou retenir :

/* empêcher les navigateurs mobiles d'ajuster la taille du texte */
-webkit-text-size-adjust: none;
text-size-adjust: none;
/* le body prend tout le viewport */
html{ block-size: 100%; }
body{ min-block-size: 100%; }
/* empêcher les medias de déborder */
img,
iframe,
audio,
video,
canvas {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
}

svg {
    max-inline-size: 100%;
}
/* overflow horizontal */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}
/* rendre le disabled plus visible */
:disabled {
    opacity: 0.8;
    cursor: not-allowed;
}

Un dictionnaire alternatif et complet pour votre Kobo - Tiger-222

Petit rappel: il existe des dictionnaires libres, mis à jour à partir du Wiktionnaire, pour votre liseuse Kobo. Le projet semble encore actif.

Pour en installer un, copier juste le fichier téléchargé dans .kobo/custom-dict ou .kobo/dict selon votre firmware.

Liens:

Via http://www.tiger-222.fr/links/

The Incredible Overcomplexity of the Shadcn Radio Button

Donc on PEUT styler les boutons radio sans casser l'accessibilité ni recourir à des libs ou frameworks hippopotamesques.

Hop, dans mon snippetvamp.

La lecture de l'article est intéressante.


input[type="radio"] {
  /* Disable the browser's default radio button styles */
  appearance: none;
  margin: 0;

/ Recreate the circle container / border: 1px solid black; background: white; border-radius: 50%;

/ Center our dot in the container / display: inline-grid; place-content: center;

/ Use a pseudo-element to display our "dot" / &::before { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%; }

/ And display it when the radio button is checked / &:checked::before { background: black; } }

via https://www.devenet.eu/links/?_X-l9g

Technic Lego compatible brick - PrintableBricks.com

Aaaahhh, le remplaçant de Print-a-brick qui avait disparu, victime d'une entreprise Lego jalouse de ses brevets. A vos imprimantes 3D !

[EDIT]

J'ajoute https://machineblocks.com/ qui permet même d'éditer les briques ! On peut changer les paramètres de largeur, longueur, hauteur forme etc en partant de briques existantes ! Le tout téléchargeable en plusieurs formats dont STL

glopglop !

You no longer need JavaScript Ʊ lyra

Oui, avant tout recours à JS on devrait vérifier que ce n'est pas possible en CSS/HTML5 pur...

Le nesting est en effet un game changer, même si la dernière fois que j'ai voulu reprendre le CSS de mon appli de documents/exerciseur pour le collège, j'avais omis de compter avec le manque de mises à jours sur les ordis du boulot.

Au passage, je me note les possibilités du RGB() pour dériver une couleur d'une autre: à utiliser dans mon framework perso... plus simple que les multiplications de variables CSS... On ne garde qu'une variable pour la couleur de base et on calcule les autres couleurs nécessaires...


 /* remove blue from a color */
rgb(from #123456 r g 0);
/* make a color transparent */
rgb(from #123456 r g b / 0.5);
/* make a color lighter */
hsl(from #123456 h s calc(l + 10));
/* change the hue in oklch color space */
oklch(from #123456 l c calc(h + 10));
/* mix two colors in oklab color space */
color-mix(in oklab, #8CFFDB, #04593B 25%);

Et ça marche avec des variables CSS:


*{ --base-color:red; }

/Ajouter de la transparence/ .transparent{ hsl(from var(--base-color) h s calc(l + 12)); }

/ désaturer une couleur de base/ .desat{ color: hsl(from var(--base-color) h calc(s + -50) l); }

/ complémentaire/ .complementaire{ hsl(from var(--base-color) calc(h + 180) s l); }

/ plus loin : primary, seconday, tertiary/ .primary{ hsl(from var(--base-color) calc(h + 90) s l); } .secondary{ hsl(from var(--base-color) calc(h + 180) s l); } .tertiary{ hsl(from var(--base-color) calc(h + 270) s l); }

De plus, depuis un an, on peut centrer officiellement un block verticalement sans quitter le display:block; à l'aide de align-content: center; #youpi

Et que dire de @starting-style qui permet de se passer de keyframes ?


 .toast {
  transition: opacity 1s, translate 1s;
  opacity: 1;
  translate: 0 0;
  @starting-style {
    opacity: 0;
    translate: 0 10px;
  }
}
Via https://link.toutetrien.lithio.fr/

C'est officiel : stocker vos données en Europe ne sert à rien face aux USA

Heu... non, ce n'est pas ce qui est dit: il ne sert à rien d'héberger ses données chez une entreprise américaine même si elle est basée en Europe... mais rien de nouveau ici.

Si tu as tes données ailleurs que chez amazon & consorts, tu es tranquille. Les USA n'ont pas le droit de récupérer tes données stockées chez O2switch par exemple...

Via https://cochi.se/links/?r1jTeg

User Inyerface - A worst-practice UI experiment

Outre le fait que c'est vraiment nien trouvé, c'est ABSOLUMENT hilarant tellement le concept d'UI mal foutue est poussé loin. Ce n'est plus de la dark pattern, c'est de la troll pattern

Insupportable !

Via https://cochi.se/links/

Petit topo sur la différence Whatsapp /Signal pour ma gamine qui voulait comprendre - www.monvoisin.xyz

Un résumé rapide de ce remarquable article:

Whatsapp, c'est Meta: donc, tout ce qu'on peut reprocher à Facebook peut l'être à whatsapp.

Whatsapp récupère de fait systématiquement:

  • les contacts,
  • l'identifiant perso,
  • l'IP,
  • ce que l'on regarde comme pubs, comme services, ...
  • chez qui on achète, avec quoi on paie,
  • combien de temps on es en ligne, quand, avec qui, et où

Whatsapp récupère très probablement:

  • nos sons et vidéos locales (accès obligatoire au support de stockage local)

Whatsapp récupère tes données mais également celle des autres même s'ils refusent d'utiliser Whatsapp.

Tout ce qui est stocké en info de contact finit sur les serveurs de Meta ➜ on nuit aux autres aussi.

en croisant et corrélant les données auxquelles il a accès, Whatsapp :

  • peut établir et deviner des liens complexes entre les utilisateurs en comparant les données de chacun: des messages échangés entre personnes ayant des positions de rapprochant = un rendez-vous; selon les POI autour, on devine la raison du RDV.
  • par ces corrélations, il déduit tes VRAIES données (habitudes, âge, heure de lever et de coucher, habitudes de consommation, sant, intérêts, engagements politiques etc.)

Whatsapp est utilisé comme outil de surveillance et de propagande

Entreprise américaine = exploitation des données par l'état. Meta préfère payer des amendes que de respecter les lois européennes de protection des données.

Whatsapp est sujet aux failles et fuites de données

Signal n'a pas tous ces défauts et son code est ouvert; même s'il reste centralisé et qu'il faut un numéro de téléphone (qu'on n'est pas obligé de donner à un contact)

via https://qosgof.fr/fosteb/shaare/v9v-yQ



L'animation dans les interfaces numériques : moins, mais mieux. - Alsacreations

Résume :

Amen.

  • On définit le but : est-ce que c'est pour expliquer, guider, ou juste faire plaisir ?
  • On pense à la fréquence : plus c'est utilisé, moins ça doit bouger
  • On reste rapide, toujours sous les 300 ms
  • On donne le contrôle, en respectant toujours les préférences de la personne qui utilise l'interface.

(oui, l'image de titre est bien un troll )

Ce que les couleurs de vos ports USB vous indiquent (et pourquoi ...

Au temps pour le «UNIVERSAL» de USB...

Donc, pour les ports USB A:

  • Blanc = USB 1.0 / 12Mbps
  • Noir = USB 2.0 / 480Mbps
  • Jaune = USB 2.0/3.0 + toujours alimentés même sur une machine éteinte
  • Orange = USB 3.0 + toujours alimentés même sur une machine éteinte
  • Bleu = USB 3.0 Superspeed / 5Gbps
  • Turquoise = USB 3.1 / 10 Gbps
  • Rouge = USB 3.1 Gen 2 / 10-20 Gbps + toujours alimentés même sur une machine éteinte

Résumé en une image (trouvée sur https://www.corsair.com/fr/fr/explorer/diy-builder/storage/usb-port-colors-explained/ )

FireShot Capture 008 - Explication des couleurs des ports USB - CORSAIR - www.corsair.com.png
Fil RSS des articles de cette catégorie