J’ai écrit un article contenant des émojis récemment et il était impossible de l’enregistrer. Il y avait un message disant « impossible de mettre à jour la publication dans la base de données ». A force de supprimer des éléments de l’article pour déterminer ce qui bloquait, j’ai compris que mon site, et celui-ci, ne supportaient pas les émojis. J’y ai perdu beaucoup de temps 😠. Alors je documente la solution pour me permettre de la retrouver si nécessaire, et pour aider d’autres internautes si nécessaire.
Pour déterminer la solution, je me suis appuyée sur cet excellent article, dont j’ai validé le processus par un bref echange avec Gemini 2.5 Flash.
Un InterClassement trop ancien !
Comme on le voit dans cette copie d’écran, certaines de mes tables utilisent utf8mb3_general_ci et d’autres utf8mb4_unicode_520_ci. Selon Gemini, « L’interclassement, ou « collation » en anglais, est un ensemble de règles qui définit comment les chaînes de caractères sont triées et comparées dans une base de données. Il détermine l’ordre alphabétique des caractères, la sensibilité à la casse (majuscules/minuscules) et aux accents, ce qui est crucial pour le tri des résultats de recherche ou le filtrage de données. »
Tous les interclassements que j’utilise sont basés sur UTF-8, encodage bien adapté. Mais utf8mb3 n’utilise que 3 octets par caractères et ne convient pas pour certains caractères spéciaux comme les emojis. Et il traite aussi les caractères accentués comme s’ils ne l’étaient pas, ce qui le rend moins précis.
utf8mb4_unicode_ci semble être le standard recommandé actuellement. Il convient à une gamme très large de caractères, y compris les emojis et caractères asiatiques. Il respecte les règles de tri d’Unicode, ce qui le rend bien adapté à la plupart des langues. utf8mb4_unicode_520_ci est encore plus récent.
Quelles solutions ?
Après analyse de l’article et consultation de Gemini, j’ai décidé de procéder en trois étapes :
Etape 1 : sauvegarder la base de données
Ca se fait dans l’interface de l’hébergeur (Infomaniak par exemple) ou avec l’interface phpMyAdmin.
Etape 2 : Modifier wp-config.php
Il vaut mieux en télécharger la version actuelle au cas où avant de le modifier. Dans ce fichier je vois :
define('DB_CHARSET', 'utf8');
Je me modifie en :
define('DB_CHARSET', 'utf8mb4');
Et je vois qu’il n’y a pas besoin de changer la ligne
define('DB_COLLATE', '');
Et je sauvegarde le fichier wp-config.php ainsi modifié.
Etape 3 : migrer la base de données
Je vais migrer l’ensemble de la base de données vers utf8mb4_unicode_ci.
Dans phpMyAdmin, sélectionnez votre base de données.
Cliquez sur l’onglet « Opérations » en haut.
Dans la section « Interclassement », sélectionnez utf8mb4_unicode_ci dans la liste déroulante.
Cochez la case « Changer l’interclassement de toutes les tables » puis la case « Changer les interclassements de toutes les colonnes de toutes les tables »
cliquer sur « Exécuter » :
Une fois l’opération terminée, vous verrez un message de succès.
Notez Que si on clique sur « information schema » ça reste toujours le vieil interclassement ; mais ce schéma ne sert à rien (pour le site lui-même). Donc pas de problème !
Et maintenant ?
Je peux mettre autant d’emojis que je veux dans mes articles. Est-ce que c’est mieux ou pas, je ne sais pas !
GitHub est très bien pour stocker du code dans ses versions successives. J’ai découvert récemment qu’il est aussi très bien pour mettre à disposition le rendu de ce code dans un navigateur, par l’intermédiaire des « pages » GitHub.
Rendons à César…
J’ai fait cette découverte en regardant de près cette publication sur LinkedIn de Lionel Miszka . Il y exposait comment le modèle o3-mini-high de chatGPT lui avait permis de créer un outil pédagogique intéractif sans coder. L’article est très intéressant lorsqu’on s’intéresse à l’IA. Mais il est également intéressant lorsqu’on aime un peu coder et qu’on a envie d’utiliser mieux GitHub. En effet Lionel Miszka a choisi d’héberger son outil pédagogique sur github, ici.
Et pour créer une page j’ai tout simplement demandé à Mistral AI de me dire comment Lionel avait pu faire ça…
Question n°1 : Peux-tu regarder et commenter le dépôt https://github.com/lionelmyszka2/ ?
Question n°2 : Je vois que Lionel Myszka a également des url où ces projets en html sont visibles. Par exemple le projet ‘lentille » est visible sur https://lionelmyszka2.github.io/lentille/. Comment puis-je faire quelque chose de semblable à partir de mon propre compte github ?
Mistral m’a expliqué l’essentiel de ce qui suit !
Si vous n’avez pas de compte GitHub
Créer un dépôt sur GitHub :
Connectez-vous à votre compte GitHub.
Créez un nouveau dépôt (repository) pour votre projet. Vous pouvez le nommer comme vous le souhaitez, par exemple mon-projet.
Ajouter vos fichiers HTML :
Clonez le dépôt sur votre machine locale ou téléchargez-le.
Ajoutez vos fichiers HTML, CSS, JavaScript, et autres ressources nécessaires à votre projet dans le répertoire du dépôt.
Dans mon cas j’avais déjà un compte GitHub, j’ai simplement créé un « fork » du dépôt de Lionel. Il est visible ici : https://github.com/aldelpech/lentille. J’y ai apporté deux modifications mineures :
ajout d’un lien en MarkDown dans le README pour aller plus facilement vers la démo
Ajout du lien vers la démo originelle de Lionel Myszka, pour ne pas le plagier, dans le fichier html.
Comment créer des pages GitHub ?
Configurer GitHub Pages :
Allez dans les paramètres (Settings) de votre dépôt sur GitHub.
Dans la section « Pages » (ou « GitHub Pages »), sélectionnez la branche que vous souhaitez utiliser pour le site (souvent main ou master).
Choisissez le dossier racine (/) ou un dossier spécifique (comme /docs) où se trouvent vos fichiers HTML.
Cliquez sur « Save » pour enregistrer vos modifications.
Dans le curseur « deploy from a branch » j’ai choisi « main ». Puis cliqué sur le bouton Save qui apparaît alors :
Pour ce faire, avec l’éditeur WordPress classique, je choisis un bloc « HTML personnalisé et j’y colle le code ci-dessus :
Qu’est-ce que je peux faire de ça ?
C’est un avantage énorme puisque je peux venir placer ici des démos « vivantes », sans avoir besoin de passer par l’éditeur p5.js. Et l’intégration dans un site wordPress fonctionne. C’est aussi probablement le cas dans une newsletter Substack.
Lorsqu’on crée un script p5js on apprécie de pouvoir partager le résultat sans obliger les gens à sortir du site où ils sont. C’est là que les GIF sont fantastiques. Comme dans l’image ci-dessous, ce sont des images que l’on peut voir comme une mini vidéo.
Il suffit d’ajouter la fonction suivante à la fin de sketch.js.
// Save a 5-second gif when the user presses the 's' key.
function keyPressed() {
if ( (key === 's') || (key === 'S') ) {
saveGif('mySketch', 5);
}
}
Et voilà, maintenant j’appuie sur la touche s et j’obtiens un fichier GIF.
Il y a du buzz, des cocoricos autour de Mistral, l’AI française. Je viens de regarder ce qu’elle sait faire en matière de code javascript avec la librairie p5.js. Et je suis scotchée ! Mistral AI répond à une vitesse stupéfiante à des instructions assez imprécises et propose à chaque fois une solution juste. C’est vraiment impressionnant, regardez !
En dessous je vous décris l’échange avec Mistral AI et je vous montre le résultat une fois mis dans un éditeur de code.
Euh, tu sais faire ça Mistral ?
« est-ce que tu peux m’aider à créer un script en p5js ? »
Il me répond que oui. Alors je lui pose une première question.
« je voudrais dessiner 5 cercles répartis dans le canevas et sur chacun avoir un point qui tourne sur son diamètre, et des lignes entre ces points ».
Je colle le code proposé dans un éditeur p5.js (https://editor.p5js.org/) et je vois qu’Il dessine ce que je demande mais avec les 5 cercles sur un même axe y. Ca ne me plaît pas, il faut que je précise ma question.
Des résultats époustouflants !
« Oui c’est ça l’idée. Mais je voudrais que les cercles soient positionnés sur l’ensemble du canevas, et que par exemple la forme dessinée par les traits entre les points qui tournent soit un hexagone. »
Et j’ai envie que ce soit un peu plus « chouette ». Mais je ne sais pas trop ce qui serait « chouette ». Alors je lui propose deux déclinaisons, très imprécises :
« Exactement ce que je voulais. comment pourrait-on améliorer ce script pour avoir un résultat plus joli (option 1) ou plus hypnotisant (option 2) ? «
Pour l’option 1 (plus joli) il propose d’ajouter des couleurs. c’est intéressant qu’il fasse le lien entre « joli » et multicolore. C’est certainement une interprétation juste de « joli ». En plein ecran ici, avec le code visible ici.
Et l’option 2 est effectivement plus hypnotique. Là aussi je suis surprise de la finesse de traduction d’un qualificatif. En plein ecran ici, avec le code visible ici.
Une révolution…
En quelques secondes je produis un résultat vraiment crédible. C’est bluffant !
Alors l’AI peut-elle révolutionner nos pratiques quotidiennes ? Certainement oui !
Je réalise ce projet dans l’environnement VSCodium que j’ai décrit dans un précédent article (Un environnement local pour p5.js). Je ne peux pas le réaliser avec l’éditeur p5.js car je ne peux pas communiquer ma clé d’accès à l’API de Pixabay.
Créer un compte (gratuit) sur Pixabay
J’utilise Pixabay car il autorise à copier les images, et à les modifier, sans obligations d’attribution.Et Pixabay, à la différence d’UNSPLASH, ne rend pas le « hotlinking » obligatoire.
Je suis évidemment pour l’attribution, et le respect du travail de chacun. Mais parfois c’est très très compliqué d’utiliser des images lorsque les règles en sont contraignantes. Je crois que je fais de mon mieux.
On se crée un compte sur le site https://pixabay.com/fr/accounts/register/.
Il faut maintenant avoir une « clé API »
Une fois qu’on a un compte, on se connecte à Pixabay ET https://pixabay.com/api/docs/ me donne ma clé API et m’explique comment créer une requête. Pour la suite, cette clé API sera CLE-API. Dans la réalité elle est composée de plus de 30 caractères en hexadécimal (0 à 9 et les lettres a à f).
Se connecter à l’API Pixabay en p5.js
function preload() {
// Voir https://p5js.org/reference/p5/loadJSON/
let urlPix = 'https://pixabay.com/api/?key=CLE-API&category=buildings&image_type=photo';
myData = loadJSON( urlPix, useData );
}
La fonction preload() va receuillir toutes les réponses de Pixabay qui correspondent à la requête. Ici ce sont des photos de bâtiments.
La fonction loadJSON est ici utilisée avec une « callback function », ici useData(), dont voici le contenu :
function useData() {
nbMax = min( myData.hits.length, nbMax ) ;
for( i = 0; i < nbMax; i++ ) {
imgUrl[i] = myData.hits[i].largeImageURL ; // url des images
}
}
Ici je lis simplement nbMax url renvoyées par Pixabay. et chaque url est intégrée à un array imgUrl.
Ce n’est pas toujours évident de savoir comment décrypter un fichier JSON. On peut par exemple se demander comment j’ai su qu’il fallait lire « myData.hits[i].largeImageURL ». Le plus simple je pense (en plus de lire soigneusement la documentation de l’API) , c’est d’ajouter un print(myData) ; à la fin de la fonction preload. On trouve alors dans la console un mystérieux {} !
Si je met ma souris sur les {} indiqués par la flèche orange, l’inspecteur (de Chrome) me propose de « copier l’objet« . Et si je colle cet objet dans un éditeur de texte (ou même un nouveau fichier texte de vscodium) j’obtiens des informations plus ou moins lisibles. On peut si nécessaire utiliser https://jsonformatter.curiousconcept.com/ si le JSON qu’on a est trop difficile à formater. Dans mon cas j’obtiens un fichier qui contient comme un array, intitulé myData.hits[] et donc chaque élément contient des informations telles que l’id, la pageURL, etc…
Lire une image de pixabay et l’afficher
Dans le script créé (cf les fichiers zippés correspondants), il faudra que vous mettiez votre propre clé API), j’affiche les fichiers sous la forme fr ‘graphics », des sortes de canevas virtuels, ou peut-être plutôt comme des calques. J’en avais déjà utilisé dans l’article « p5.js Brique 2 : utilisation des “GRAPHICS”« . Ici je me suis beaucoup inspirée de https://editor.p5js.org/creativecoding/sketches/-Ut0EeXZj.
J’utilise les filtres POSTERIZE et INVERT pour modifier les images.
Cette image se trouve ici sur Pixabay. Elle devient comme ça après passage dans le sketch.
Et maintenant ?
Il faut que je voies si la solution évoquée dans l’article « p5.js : la solution pour charger les images » pourrait fonctionner avec ce script dans lequel la fonction preload est dédiée à la constitution d’un fichier JSON.
Je veux créer un array d’images qui pourront être affichées simultanément sur l’écran.
Je peux maintenant écrire mes projets p5.js sur mon ordinateur (windows 10) et visualiser le résultat dans un navigateur même s’il y a des accès à des fichiers (images par exemple) ! J’utilise VSCodium, une version open source de VS Code, de Microsoft.
Jusqu’à présent j’utilisais l’éditeur en ligne p5js, très bien, pour démarrer mes projets p5.js. J’avais testé des solutions pour créer un environnement local mais rien ne fonctionnait ou me convenait. Mais aujourd’hui, ça y est, j’ai trouvé une solution ! Merci à Pierre des Portes Logiques de m’avoir proposé cette voie !
scripts p5js localement
Si je veux tester localement un projet p5js, je peux mettre dans un répertoire un fichier index.html (qui chargera un fichier css et les librairies p5js dont on a besoin). Et si je double clique sur ce fichier index.html, il s’ouvre dans mon navigateur par défaut et s’exécute. Mais si le sketch charge d’autres fichiers, par exemple des images, on a une erreur « cross-origin », « COR ». La seule solution pour l’éviter, selon la documentation des créateurs de p5.js, c’est d’avoir un serveur local.
Sur un raspberry Pi 3 sous Linux, j’ai installé node.js et fait tourner son serveur http-server. J’en ai parlé dans ces deux articles : ici et là.
VSCodium, pour coder
VSCodium est une version Libre et Open Source de VS Code de Microsoft. C’est plus ou moins un clone de VS code, sans les customisations de Microsoft. Et cerise sur le gâteau, VSCodium a accès à de nombreuses extensions de VS Code !
Pour installer VSCodium sur mon PC (windows 10), j’ai cliqué sur le bouton « Download latest release » puis choisi l’option « User Installer » pour Windows en x86 64bits. J’ai exécuté le fichier .exe, accepté les termes du contrat de licence (MIT). J’ai coché toutes les tâches supplémentaires et cliqué sur SUIVANT puis INSTALLER.
Ensuite il suffit de lancer VSCodium. On peut faire quelques réglages si on le souhaite pour les couleurs et autres.
Un serveur local avec VSCodium
Dans VSCodium, sur le côté gauche, il y a une barre avec des icones. L’une des icones correspond à « Extensions« . Je clique dessus puis je tape Live Server. Je choisis celle de Ritwickdey. C’est l’extension recommandée pour utilisation avec VS Code dans leur document sur les serveurs locaux). Attention à bien prendre celle de Ritwickdey. Lorsqu’on clique dessus on voit ça :
Cliquer sur le bouton Install. L’extension s’installe.
Maintenant dans le menu File > Open Directory, j’ouvre le répertoire d’un projet p5js de mon ordi.
Et tout en bas à droite de la fenêtre VSCodium », je trouve « Go Live ».
Je clique dessus et mon navigateur par défaut (chrome pour moi) ouvre un onglet à l’adresse http://127.0.0.1:5500/.
Pour en savoir plus
Pour plus d’informations sur le fonctionnement de Live Server, on peut aller voir le dépôt sur Github.
L’ensemble des extensions disponibles pour VSCodium est visible sur ce site : https://open-vsx.org/
Lorsqu’on charge des images dans un script p5.js, ça se passe de façon asynchrone. C’est souvent une bonne chose car ça évite d’attendre. Mais parfois ça pose beaucoup de problèmes. Alors je cherchais depuis longtemps un moyen efficace d’être certaine que les images seraient entièrement chargées avant que la suite du script ne les utilise.
J’ai trouvé la solution grace à Perplexity, le moteur de recherche avec AI. Je lui ai demandé « what are the solutions which work for loading a lot of images in an array using p5js? », il m’a répondu avec des solutions banales (qui ne fonctionnent pas lorsque les images mettent du temps à charger). J’ai insisté en « lui disant » : « this doesn’t ensure that all images in the array are fully loaded. are there more robust solutions? ». Et là il m’a apporté la réponse que je ne trouvais pas ! Merci Perplexity !
J’utilise loadImage et une fonction « call back » qui incrémente un compteur (imagesLoaded) à chaque fois qu’une image est correctement chargée. Lorsque le compteur imagesLoaded contient la valeur indiquée au début dans imagesToLoad, c’est qu’on a chargé autant d’images qu’on en avait prévu. On est donc prêts à la suite !
Site Kit est l’extension officielle de Google pour WordPress. Elle centralise Search Console, Google Analytics et PageSpeed Insights directement dans ton tableau de bord. Si tu utilises une extension de cache, elle peut aussi provoquer une déconnexion récurrente de Site Kit, voici comment éviter ce problème.
Ce que fait Site Kit
Site Kit connecte plusieurs services Google à ton site WordPress et affiche leurs données directement dans ton tableau de bord d’administration, sans que tu aies besoin de jongler entre plusieurs interfaces. Les services les plus utiles sont :
Search Console : le référencement de ton site, les requêtes qui t’amènent du trafic, les erreurs d’indexation
Google Analytics : la fréquentation du site, le comportement des visiteurs
PageSpeed Insights : la vitesse de chargement de tes pages
Une fois connecté, Site Kit sert aussi de passerelle pour d’autres extensions. Yoast SEO en est un bon exemple : au lieu de te redemander de connecter individuellement Google Analytics ou Search Console, Yoast s’appuie sur la connexion déjà établie par Site Kit pour valider ses propres accès. Tu gagnes ainsi du temps de paramétrage, en particulier si tu gères plusieurs sites.
Avantages et limites
Installer Site Kit sur tous ses sites WordPress présente de vrais atouts d’ergonomie, mais ce n’est pas forcément la meilleure solution pour tous les projets.
Avantages
Centralisation dans le tableau de bord : accès direct aux données clés de Search Console, Google Analytics et PageSpeed Insights, sans quitter l’administration WordPress
Installation simplifiée : déploiement automatique des balises de suivi, sans toucher au code du thème ni éditer de fichier
Validation de propriété rapide : Site Kit associe et vérifie la propriété du site auprès de Google en quelques clics
Gain de temps en gestion multi-sites : le même processus de configuration se répète à l’identique sur tous tes sites
Limites
Impact sur la vitesse de l’administration : Site Kit effectue de nombreux appels API en arrière-plan pour afficher ses graphiques, ce qui peut ralentir le chargement de l’admin WordPress
Rapports très synthétiques : les données affichées restent des résumés. Pour une analyse approfondie (comportement utilisateur avancé, tunnels de conversion personnalisés), il faut quand même se rendre sur les interfaces dédiées de Google Analytics ou Search Console
Consommation de ressources serveur : sur un petit hébergement mutualisé, le rafraîchissement régulier des jetons d’accès et des statistiques génère une charge processeur et mémoire inutile si tu ne consultes tes données qu’occasionnellement
Risque de double marquage : si un script Analytics est déjà injecté par ton thème, un constructeur de page (Divi, Elementor) ou une extension SEO, Site Kit peut créer des doublons de comptage s’il est mal configuré
Site Kit convient bien à des sites vitrines, des blogs, ou des sites de clients qui veulent un aperçu rapide de leur audience. Pour des sites à très fort trafic ou soumis à des contraintes d’optimisation serveur poussées, il est souvent préférable d’installer directement la balise Google Tag Manager ou Analytics, et de consulter les statistiques à la source.
Le problème de déconnexion avec une extension de cache
Si tu utilises une extension de cache comme WP Super Cache, tu as peut-être déjà rencontré ce symptôme : Site Kit se déconnecte régulièrement, parfois tous les jours, et tu dois le reconnecter manuellement à chaque fois, même si tu n’as touché à aucun réglage.
Pourquoi ça arrive
Pour rester connecté, Site Kit a besoin de renouveler régulièrement son jeton d’accès (le fameux refresh token) auprès de Google, via des requêtes vers des routes de l’API WordPress qui commencent par /wp-json/google-site-kit/. Cette requête doit s’exécuter en temps réel à chaque renouvellement.
Le problème, c’est que par défaut une extension de cache ne fait pas de distinction entre une page classique de ton site et ces requêtes d’API. Si elle met en cache la réponse de la requête /wp-json/google-site-kit/, elle va ensuite renvoyer cette réponse enregistrée, potentiellement périmée, au lieu de laisser la requête s’exécuter réellement vers Google. Google ne reçoit alors pas la confirmation attendue dans les temps, considère la session comme expirée ou corrompue, et coupe la connexion.
La solution avec WP Super Cache
Il suffit d’exclure les routes de Site Kit du cache :
Dans le tableau de bord WordPress, va sur Réglages > WP Super Cache
Ouvre l’onglet Avancé
Descends jusqu’à la section Chaînes d’URL rejetées (Rejected URL Strings)
Ajoute la ligne suivante dans le champ texte :
/wp-json/google-site-kit/
Clique sur le bouton Enregistrer les chaînes
À partir de là, WP Super Cache laisse passer ces requêtes en temps réel sans les mettre en cache, et Site Kit peut renouveler son jeton normalement.
Ce principe ne se limite pas à WP Super Cache. Si tu utilises une autre extension de cache (WP Rocket, W3 Total Cache, ou autre), le mécanisme est le même : cherche une option d’exclusion d’URL ou de chemin, et exclus /wp-json/google-site-kit/. Plus largement, tout plugin qui dépend d’un échange régulier avec une API externe peut être sujet au même type de problème s’il n’est pas exclu du cache.
J’ai découvert récemment l’intérêt de créer un site avec Google sites dans des circonstances où l’on souhaite partager simplement des documents avec un groupe de personnes. Et aujourd’hui, je viens de regarder la vidéo d’Olivier Margerand, de Digital Collab, qui nous explique comment créer un site web en 5 minutes avec Google Sites :
J’en retiens que c’est extraordinairement simple et rapide ! Il est possible de mettre en ligne des éléments de Google Suite de manière très simple. Mais aussi qu’on peut imaginer une infinité d’utilisations, comme par exemple la création d’un site pour une machine, afin de déclarer des opérations de maintenance ou suivre des fonctionnement simplement en scannant le QR code affiché sur la machine !
J’ai beaucoup apprécié les propos d’Olivier Margerand, toujours aussi percutant et juste. Par exemple :
Ce qui compte maintenant c’est l’intelligence qu’on va mettre derrière tout ça : qu’est-ce que ça peut apporter ? Qu’est-ce que ça peut aider à simplifier dans une entreprise, dans une équipe, dans un processus, avec nos clients, avec nos prospects avec nos fournisseurs ?
J’ai découvert l’application SnapCamera par une vidéo de l’excellent Cyrille CARTERET, dont la chaine FastLearner Academy recèle d’excellents tutoriels sur l’environnement Google.
Les instructions de Cyrille CARTERET sont très claires. Il faut tout simplement sélectionner la webcam SnapCamera plutôt que la webcam elle-même. C’est vrai dans google Meet, dans zoom et probablement d’autres applications.
La seule difficulté que j’ai eu est qu’il m’a fallu redémarrer windows deux fois avant que la webcam snapCamera devienne accessible.
Commentaires récents