Utiliser un certificat SSL sur un site Jekyll en local

Sur Playorama.app, j’ai mis en place la possibilité de streamer son écran d’ordinateur vers la Playdate. J’utilise la bibliothèque pd-usb qui utilise l’API Web Serial (fonctionnalité propriétaire de Chromium, meh). Et pour que ça fonctionne, il faut impérativement être en HTTPS (même en local).

J’étais tombé il y a quelques mois sur cet article qui explique parfaitement la marche à suivre (dans mon cas, sur un site Jekyll). En résumé :

brew install mkcert
brew install nss # for firefox
mkcert -install

Puis dans le dossier du projet :

mkdir ssl/
mkcert -key-file ssl/key.pem -cert-file ssl/cert.pem "playorama.local"

Et enfin on lance Jekyll avec les arguments suivants :

bundle exec jekyll serve --ssl-key ssl/key.pem --ssl-cert ssl/cert.pem

Et ça marche.

Résoudre l’erreur « Unable to provision site » avec Local pour WordPress sur macOS

J’ai récemment découvert l’application « Local » pour facilement déployer un site WordPress en local. Mais à mon grand désarroi, l’application sur macOS sur un Mac avec un processeur Apple (M1, M2, …) déclenchait une erreur « Unable to provision site » (comme celle-ci) à la création d’un site.

La solution ? Installer Rosetta à la main en exécutant la commande suivante dans un Terminal :

softwareupdate --install-rosetta

LEGO Jurassic Park: The Unofficial Retelling

J’ai enfin vu le court-métrage animé « LEGO Jurassic Park: The Unofficial Retelling ». Bon, ça casse pas des briques (huhu), c’est très enfantin, mais j’ai quand même ri deux fois. Et surtout j’ai bien aimé le clin d’oeil à la fin avec ce personnage non nommé qui porte le même T-shirt que Spielberg sur le tournage du film.

À gauche, une photographie de Steven Spielberg sur le tournage de Jurassic Park, avec casquette, lunettes et T-shirt arborant plusieurs T-Rex sur fonds colorés. À droite, une capture d'écran du film LEGO montrant un personnage barbu avec casquette, lunettes et le même T-shirt.À gauche, une photographie de Steven Spielberg sur le tournage de Jurassic Park, avec casquette, lunettes et T-shirt arborant plusieurs T-Rex sur fonds colorés. À droite, une capture d'écran du film LEGO montrant un personnage barbu avec casquette, lunettes et le même T-shirt.

Tirer parti d’OpenType pour créer une police de coloration syntaxique

J’adore l’idée. Un des avantages non mentionné que j’y vois est que, vu qu’il s’agit simplement d’une déclaration @font-face, le fichier de police (qui fait 53 Ko) n’est pas téléchargé s’il n’est pas utilisé sur une page.

Playdate Pizza Cover

Panic sort une housse de protection pour la Playdate en forme de boîte à pizza. C’est ridicule donc parfaitement indispensable. Et le site offre une utilisation rare de border-image pour faire le cadre en damier.

La housse de protection version Pizza pour la Playdate.

Contrôles alternatifs.

Madeline Thorson (la conceptrice du jeu Celeste) a partagé sur Mastodon :

Il y a un nombre surprenant de personnes qui jouent à Celeste avec une combinaison de clavier et de manette, avec une main sur chaque, comme ça :

Schéma d'un clavier et d'une manette PS5 côte à côte. Les touches ZQSD contrôlent la direction, les boutons de la manette contrôlent le saut, le dash et l'interaction.

Ça m’a fait penser à cette technique utilisée par les personnes qui jouent à Tetris de manière compétitive jouent : le rolling. J’ai découvert ça via la formidable chaîne Youtube EGO :

Le rolling, ça consiste à utiliser ses cinq doigts pour les taper les uns à la suite des autres très vite contre l’arrière de la manette, de manière à presser la manette contre votre doigt.

À voir (à partir de 7 minutes).

Not By AI

Un badge pour signaler qu’une création a été faite sans Intelligence Artificielle. (On en est là.) D’autres alternatives ici, ou .

Au revoir Twitter.

La semaine dernière, j’ai définitivement supprimé mon compte Twitter. Je n’y ai rien posté depuis plus d’un an, et je n’y mettais quasiment plus les pieds. Les frasques du nouveau propriétaire ne me font rien regretter du tout. Je laisse derrière moi 15 116 abonnés et plus de 24 000 tweets. J’ai mis en place une archive de mes tweets sur tweets.hteumeuleu.fr grâce à Tweetback (qui tourne sous Eleventy). Je suis désormais plutôt actif sur Mastodon et j’espère vous y retrouver.

Responsive Web Design

Lu sur Mastodon :

Après toutes ces années, je viens seulement de me rendre compte que l’illustration de l’article d’Ethan Marcotte qui a donné naissance au Responsive Design est elle-même responsive.

Je… Je… Je le découvre aussi.

Installer une autre version de Ruby sur macOS.

Note à moi-même parce que sinon j’oublie à chaque fois : pour installer une autre version de Ruby sur macOS avec rvm, et éviter les erreurs du genre Error running '__rvm_make -j8':

rvm install 3.2.3 --with-openssl-dir=$(brew --prefix openssl@1.1)

Outlook 16.80 sur macOS.

Ce mois-ci, je me suis fixé comme objectif de mettre à jour Can I email avec des tests sur la dernière version de Outlook sur macOS. En effet, Microsoft uniformise les versions desktop d’Outlook (sur Windows et macOS) pour n’être plus qu’une vue web utilisant plus ou moins le même filtrage que sur Outlook.com. La bonne nouvelle, c’est que ça va enfin nous débarrasser du moteur de Word dans Outlook sur Windows. La mauvaise nouvelle, c’est que c’est une sacré régression (en terme de support HTML/CSS) pour Outlook sur macOS.

Refaire des tests sur Can I email, ça veut dire pour chacune des 272 fonctionnalités HTML/CSS actuellement testées :

  • Rouvrir le fichier de test correspondant.
  • Le copier dans Parcel, et s’envoyer un test avec.
  • Afficher l’e-mail dans le client mail et observer le résultat. Si le résultat est négatif, comprendre ce qui ne passe pas. (Est-ce que ça la propriété est simplement supprimée ? Tout le temps ou seulement pour certaines valeurs ?)
  • Reporter le résultat dans le fichier Markdown correspondant du site.

Je n’en suis pas encore à la moitié de ces tests, et c’est déjà une sacré dégringolade pour Outlook dans le classement des clients mails par support de Can I email. De la troisième position avec 236 sur 272 fonctionnalités supportées, Outlook (macOS) est passé dixième (avec un score de 189 sur 272). Et j’imagine que la chute va continuer jusqu’à se rapprocher de Outlook.com (le webmail desktop), actuellement en 24e place (avec un score de 161 sur 272).

Les petits secrets de la copie privée

J’ai enfin pris le temps de regarder cette conférence de 2019 et cette redevance, appliquée pour tout achat de matériel de stockage, est toujours aussi scandaleuse. J’ai appris dans cette vidéo que l’on pouvait demander à en être remboursé (par exemple en tant que professionnel si on n’utilise pas ses disques durs pour faire de la copie privée). Mais le parcours pour y arriver est totalement délirant. La simple création d’un compte chez Copie France requiert plein de paperasse lourdingue ou payante (Extrait de Kbis, statuts, fiche INSEE, …). Et surtout, un remboursement nécessite une facture indiquant le montant de la redevance pour copie privée payée sur l’appareil. J’ai regardé sur mes derniers achats chez la Fnac, Apple ou Backmarket, et je n’ai trouvé la mention nulle part. Et voilà comment Copie France a récolté 285 millions d’euros en 2022.

Diamond Subpixel Arrangements

Un outil pour visualiser la disposition des pixels « en diamant » (comme sur un iPhone).

Capture d'écran de l'outil montrant à gauche divers dessins en pixels et à droite la disposition des pixels rouges, verts et bleus sur un écran.

Recadrer un SVG avec Inkscape.

Note à moi-même parce que j’oublie tout le temps : pour recadrer un SVG à la taille de son contenu, dans Inkscape sous macOS, on fait sa sélection puis cmd+maj+r.

Contexte final

Cabel Sasser (le co-fondateur de chez Panic), dans un article intitulé « Fantasy Meets Reality », aborde la difficulté de concevoir des choses dans leur contexte.

Le design, c’est global. Personne ne peut avoir toute la compréhension du monde. Et cela peut conduire à des angles morts. Je pense qu’il y a de bons arguments à faire valoir à ce qu’une équipe plus diversifiée de designers autonomes travaillant ensemble pourrait détecter beaucoup plus de pièges potentiels en matière de conception dans le monde réel.

Mais honnêtement, je pense qu’en grande partie, c’est juste que certains designers sont extraordinaires pour imaginer des choses, mais pas pour imaginer des choses entourées par l’univers. Ce joli truc sur lequel vous travaillez, se trouve en fait dans une fenêtre, sur votre écran, coincée sous une barre de titre, et c’est aussi épineux que possible. Et si vous n’arriviez pas à imaginer des choses dans leur contexte final ?

Un système de menus incroyablement élaboré

En ce moment, je (re-)regarde toutes les vidéos de Game Maker’s ToolKit. Et dans celle sur Arkam Knight, j’ai bien aimé cette affirmation (à 1:55).

Les jeux « bac à sable » devraient idéalement contenir des mécanismes nécessitant un bac à sable. Comme attaquer des bases comme vous le souhaitez dans Far Cry, ou les poursuites policières élaborées dans Grand Theft Auto. Sinon, vous venez juste de créer un système de menus incroyablement élaboré pour passer d’un moment de jeu à un autre.

Demain la veille #9

Aujourd’hui, c’est demain la veille. Numéro neuf.

Oui, je sais, on n’est pas lundi. Et ça fait un mois que je n’ai rien posté. Mais on est le premier juin et il fait beau alors c’est reparti.

Demain la veille #8

Aujourd’hui, c’est demain la veille. Numéro huit.

Demain la veille #7

Aujourd’hui, c’est demain la veille. Numéro sept.

Demain la veille #6

Aujourd’hui, c’est demain la veille. Numéro six.

  • When is :focus-visible visible? Un article avec un diagramme clair et concis pour savoir quand s’applique la pseudo-classe :focus-visible.
  • When JavaScript fails, sur la fragilité de JavaScript et l’absurdité d’en dépendre. « Le problème n’est pas que les gens désactivent JavaScript, mais que JavaScript n’est pas fiable. Ce qui signifie que ça touche chacun de nous, environ 3 % du temps. »
  • Firefox Nightly est le premier navigateur à supporter la requête media @media (scripting:none) (via Mastodon).
  • Safari 16.4 est sorti sur macOS et iOS avec une nouvelle fournée de trucs chouettes : Push API, Badging API, Notifications API, margin-trim, les unités relatives au line-height (lh et rlh), les pseudo-classes :user-valid et :user-invalid, les nouvelles syntaxes de requête media (@media (400px <= width < 900px)) et plein d’autres choses encore…
  • Le mystère le plus étrange du jeu vidéo par Julgane. Une histoire de bug dans Super Mario 64 comme je les aime, avec des rayons cosmiques, des bits de parité et une prime de 1000 $ toujours disponible.