Voici quelques découvertes du mois que j’ai pris le temps de compiler dans un article !

PHP

match

match, un opérateur qui n’existe que depuis PHP 8.1 et que je n’avais encore jamais utilisé. Il sert à évaluer une valeur et à retourner directement un résultat, comme un switch mais en plus concis.

Avant, avec un switch :

switch ($invoice->getPaymentMode()) {
    case PaymentMode::CB:
        $payment_mode = "Carte bancaire";
        break;
    case PaymentMode::CHEQUE:
        $payment_mode = "Chèque";
        break;
    case PaymentMode::ESPECES:
        $payment_mode = "Espèces";
        break;
    case PaymentMode::VIREMENT:
        $payment_mode = "Virement";
        break;
    case PaymentMode::LYDIA:
        $payment_mode = "Lydia";
        break;
}

Après, avec match :

$payment_mode = match (PaymentMode::tryFrom($invoice->getPaymentMode())) {
    PaymentMode::CB => "Carte bancaire",
    PaymentMode::CHEQUE => "Chèque",
    PaymentMode::ESPECES => "Espèces",
    PaymentMode::LYDIA => "Lydia",
    PaymentMode::VIREMENT => "Virement",
};

Je trouve ça beaucoup plus lisible, surtout quand on veut juste faire une correspondance valeur -> label.

TypeScript

La différence entre as et satisfies, découverte au travers d’un post LinkedIn.

type Colors = "red" | "green";

const favoriteColors = { red: "yes", green: false, platypus: false } as Record<
  Colors,
  unknown
>;

Ici, on force le typage avec as sans que le compilateur TypeScript vérifie vraiment la cohérence de l’objet.

type Colors = "red" | "green";

const favoriteColors = {
  red: "yes",
  green: false,
  platypus: false,
} satisfies Record<Colors, unknown>;

Avec satisfies, le compilateur TypeScript peut lever une erreur.

J’ai aussi découvert le blog de Christian Ekrem, et surtout ces deux articles :

Why TypeScript won’t save you - Ce que j’en retiens

  • TypeScript peut donner l’illusion d’une codebase plus sécurisée alors qu’il garantit surtout que le code est cohérent avec les types créés.
  • Il existe des moyens de contourner TypeScript (as, any, ts-ignore) qui peuvent créer des failles potentielles.
  • Les systèmes externes avec lesquels on interagit (API, etc.) restent hors de portée de TypeScript.
  • TypeScript disparaît à l’exécution.
  • D’où l’importance de la validation des données au runtime.

Ce point m’amène au second article.

Parse, don’t validate - Ce que j’en retiens

  • La différence entre parsing et validation.
  • On valide souvent une donnée en entrée d’un contrôleur puis on passe à autre chose.
  • Plutôt que de faire transiter un User brut, il vaut mieux créer un type dédié (ValidUser) avec des propriétés métier explicites.
  • Le parsing permet à TypeScript de retenir le type valide de la donnée et de propager cette garantie dans le reste du programme.

Citation clé de l’article :

If I had to compress King’s idea into a sentence I’d actually remember at 11pm before a release: make the type system carry the proof, not your memory. Every time you check something and don’t encode the result in a type, you’re asking your future self to remember. Future you will not remember.

Activer un debugger TypeScript sur Cursor

J’ai dû débugger quelques scripts Node. Plutôt que de jongler avec les console.log, j’avais envie de tester un debugger plus efficace.

  • Ajouter dans le fichier tsconfig l’option "sourceMap": true
  • Lancer la commande avec l’option --inspect-brk
    • node --inspect-brk ./node_modules/.bin/tsx leetcode/linkedlist/mergeLinkedList.ts
  • Placer un point d’arrêt
  • Menu Run > Start debugging

Images responsives

C’est la fin d’une époque !

Historiquement, on gérait les images responsives avec les attributs srcset et sizes : pour chaque breakpoint, il fallait spécifier quelle image utiliser.

Désormais, grâce à l’attribut sizes=auto, le navigateur va sélectionner la bonne image automatiquement à partir de celles définies dans l’attribut srcset !

Les images responsives ne disparaissent pas mais seront plus simplement maintenables. Cette valeur est encore expérimentale mais devrait être déployée d’ici quelques mois.

The End of Responsive Images par Mat Marquis

Le sélecteur CSS du jour ::search-text

Ce sélecteur permet de personnaliser l’occurence de texte trouvée à partir d’une recherche sur la page du navigateur (le bon vieux “Ctrl+F” / “Command+F”).

::search-text {
  background-color: purple;
  color: white;
}

Si tu lis cet article depuis une version récente de Chrome/Edge/Opéra, tu peux le tester en action :)

C’est disponible sur le mode expérimental (sur Chromium), il faudra surveiller le support sur tous les navigateurs.

DevTools

Il est possible de débugger avec l’IA via les DevTools, désormais intégré dans Chrome !

DevTools - Debug with AI

On peut cibler un élément HTML et démarrer un chat pour débugger son comportement.

Google Sheets API

À partir d’une URL d’un Google Sheet public, il est possible d’extraire du JSON ou du CSV en changeant l’URL.

Pour du CSV :

.../pubhtml?gid=1877378934 -> .../pub?gid=ID_GOOGLE_SHEET&single=true&output=csv

Pour du JSON :

https://docs.google.com/spreadsheets/d/e/.../gviz/tq?tqx=out:json&gid=ID_GOOGLE_SHEET

Productivité

Entre mes différentes activités, je me suis longtemps cherchée sur la gestion de mes tâches.

J’ai découvert l’application TickTick : une app installable sur Mac qui permet d’avoir une vision de ses tâches sous la forme d’une matrice d’Eisenhower.

Matrice d’Eisenhower - Ticktick

Cette représentation des tâches a été un GameChanger de mon côté. Il y a aussi un petit timer Pomodoro intégré.