Illustrated portrait of a man with a polygonal art style against a blue background, holding a magnifying glass, with the WordPress logo visible, with the text PHPCS, WPCS, and VSCode.

Valider votre projet VSCode avec PHP CodeSniffer (PHPCS) et WordPress Coding Standards (WPCS)

Dans ce tutoriel, nous allons explorer comment utiliser Composer pour installer et configurer PHP CodeSniffer (PHPCS) et WordPress Coding Standards (WPCS) dans un projet WordPress (PHP), spécifiquement en utilisant l’éditeur de code Visual Studio Code (VSCode). 

PHPCS est un outil indispensable pour analyser le code PHP, JavaScript et CSS afin de détecter les violations de standards de codage. WPCS est un ensemble de règles pour assurer que le code WordPress respecte les conventions de codage recommandées par WordPress. 

L’intégration de ces outils dans votre environnement de développement peut grandement améliorer la qualité du code et faciliter le respect des normes de codage.

Installation de Composer

Pour commencer, vous devez installer Composer, un gestionnaire de dépendances pour PHP qui permet d’installer et de gérer des bibliothèques au sein de vos projets PHP.

  • Windows :
    • Téléchargez et exécutez l’installateur de Composer depuis getcomposer.org.
    • Suivez les instructions à l’écran pour installer Composer.
  • macOS et Linux :
    • Ouvrez un terminal et exécutez la commande suivante pour télécharger le programme d’installation de Composer :
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"Code language: JavaScript (javascript)

Ensuite, exécutez le programme d’installation :

php composer-setup.phpCode language: CSS (css)

Pour rendre Composer accessible globalement, déplacez le fichier composer.phar dans un répertoire accessible dans votre PATH :

mv composer.phar /usr/local/bin/composer

Confirmez l’installation en vérifiant la version de Composer :

composer --version

Passons maintenant à la configuration de Visual Studio Code pour utiliser PHPCS et WPCS.

Lire la suite

Un périphérique NAS Synology représenté à côté d'une clé dorée, symbolisant l'authentification par clé SSH, sur un fond dégradé bleu avec le logo Synology.

Synology: activer l’authentification par clé SSH pour les scripts rsync

Si vous utilisez un Synology, vous savez déjà à quel point il est précieux pour stocker et gérer vos données. Cependant, pour optimiser son utilisation tout en assurant la sécurité de vos fichiers, un petit réglage s’impose : la configuration d’un accès SSH et la création d’un compte dédié rsync, car depuis la dernière mise à jour DSM, le conseiller en sécurité vous alerte désormais lorsque le compte admin est actif, puisqu’il est ciblé avec des attaques par brute-force, ainsi que des rançongiciels.

Dans les lignes qui suivent, on va décomposer ensemble cette tâche pour la rendre aussi simple que possible. Pas de chichis, juste les étapes clés pour sécuriser vos transferts de fichiers et rendre votre expérience NAS encore plus fluide.

Prêt à mettre les mains dans le cambouis ? Allons-y.

1. Activation de SSH sur le NAS

  1. Connexion à DSM : connectez-vous au DiskStation Manager (DSM) de votre Synology.
  2. Panneau de Configuration : allez dans le Panneau de Configuration.
  3. Terminal & SNMP : sélectionnez Terminal & SNMP sous les options avancées.
  4. Activer le service SSH : cochez la case Activer le service SSH. Cela vous permettra de vous connecter au NAS via SSH.
  5. Appliquer : cliquez sur Appliquer pour sauvegarder vos changements.

2. Création de l’utilisateur rsync sur le NAS

  1. Accéder au DSM : connectez-vous au DSM.
  2. Ouvrir le Panneau de Configuration : naviguez jusqu’au Panneau de Configuration.
  3. Création de l’utilisateur : allez dans Utilisateur puis cliquez sur Créer. Suivez l’assistant pour créer un nouvel utilisateur.
    • Pour Nom, entrez rsync.
    • Attribuez un mot de passe fort au compte.
    • Vous voudrez peut-être limiter l’accès de cet utilisateur à des dossiers spécifiques qui seront utilisés pour les opérations rsync.
    • Assurez-vous de ne pas donner à cet utilisateur plus de permissions que nécessaire pour la tâche à effectuer.
  4. Compléter l’assistant : suivez l’assistant, en ajustant les paramètres selon vos besoins de sécurité et opérationnels, puis terminez le processus de création de l’utilisateur.

Assurez-vous que le service SSH est activé sur votre NAS (comme indiqué dans les instructions précédentes). L’utilisateur rsync héritera de l’accès SSH s’il est activé globalement.

Lire la suite

sandy tropical beach with sea waves foot steps shore footprints sand sunset 265223 8371

Ajouter des notes de bas de page élégantes et sémantiques

Je vous ai déjà fait un petit tutoriel pour créer des notes de bas de page (footnotes en anglais) juste en utilisant CSS.

Voici maintenant une autre manière de créer vos notes de bas de page, en HTML sémantique, CSS et vanilla JavaScript.

Des notes de bas de page sémantiques

Pour commencer, nous allons utiliser les balises HTML details et summary, qui sont trop peu souvent utilisées. Elles sont pourtant idéales pour ce que nous souhaitons accomplir: montrer un contenu après un clic, mais qui doit rester caché le reste du temps.

Le gros avantage de cette nouvelle version d’inclure des liens et du HTML dans la note de bas de page, ce qui n’était pas possible avec la version en CSS pur.

Un clic sur le numéro de la note ouvre la note. Il suffit de cliquer sur l’encart jaune de la note pour la fermer, ou alors cliquer sur un autre numéro de note.

Exemple de notes de bas de page

Le dernier serveur de SkyMinds s’appelle Apollo
1
Il a été mis en service le 1er octobre 2023.
et tourne sous Ubuntu Server.
Il est facile de changer le MOTD
2
Cela est même recommandé car cela permet d’identifier le serveur rapidement et de ne pas se tromper de terminal lorsque l’on entre une commande.
et apporter de nouvelles informations aux utilisateurs SSH.
Mon mémoire professionnel a été publié récemment
3
Créer et soutenir la motivation des élèves du cycle central en classe d’Anglais () Institut Universitaire de Formation des Maîtres (IUFM). Mémoire:
, ce que j’aurais dû faire bien plus tôt.

Lire la suite

Plausible Analytics, une alternative respectueuse de la confidentialité à l'installation de Google Analytics pour Ubuntu Server.

Plausible Analytics au lieu de Google Analytics

Tout le monde connaît Google Analytics mais savez-vous qu’il existe une alternative simple, open source et qui ne nécessite pas de bannière de cookies ? Je vous présente Plausible Analytics.

Plausible Analytics est une plateforme d’analyse Web open source qui se concentre sur le respect de la vie privée et la simplicité. Contrairement à des solutions plus courantes comme Google Analytics, Plausible a été conçu avec une approche centrée sur la vie privée, ce qui signifie qu’il ne collecte pas de données personnelles des visiteurs.

Cela rend la plateforme conforme aux réglementations strictes en matière de protection des données, telles que le RGPD en Europe, donc idéal pour nous.

Caractéristiques clés

  1. Respect de la vie privée : pas de cookies, pas de suivi des adresses IP, ce qui signifie que vous n’avez généralement pas besoin de demander le consentement des utilisateurs pour suivre les statistiques.
  2. Open Source : le code source est disponible pour tout le monde, ce qui signifie que vous pouvez l’héberger vous-même et examiner le code pour vous assurer qu’il respecte ses promesses en matière de vie privée.
  3. Simple et facile à utiliser : l’interface utilisateur est simple, propre et facile à comprendre, même pour les personnes qui ne sont pas techniquement compétentes.
  4. Léger : le script de suivi est beaucoup plus léger que celui de solutions concurrentes, ce qui signifie qu’il a un impact minimal sur les performances du site Web.
  5. Rapports en temps réel : vous obtenez des rapports en temps réel sur les visiteurs, les pages vues, les taux de rebond, et plus encore.
  6. Intégration facile : Plausible Analytics peut être facilement intégré avec d’autres plates-formes et outils, grâce à des API et des webhooks.

En résumé, Plausible Analytics est une alternative solide et respectueuse de la vie privée aux solutions d’analyse Web traditionnelles. Il est particulièrement utile pour ceux qui valorisent la simplicité, l’open source, et le respect des données des utilisateurs.

Ce tutoriel aborde l’installation sous Ubuntu Server mais comme c’est une image docker, c’est totalement adaptable pour votre distribution linux préférée.

Lire la suite

An automatic computer screen displaying the message "sorry you have been blocked".

Contourner le blocage du WAF Cloudflare pour les uploads de zip dans WordPress

Le blocage des fichiers zip par le WAF (Web Application Firewall) de Cloudflare est un casse-tête pour de nombreux développeurs WordPress, surtout lors de la mise à jour de plugins et de thèmes. Heureusement, il existe une solution pour contourner ce problème sans compromettre la sécurité de votre site WordPress.

Pourquoi le WAF bloque-t-il les fichiers Zip ?

Cloudflare met régulièrement à jour ses Managed Rules pour renforcer la sécurité. Un upload de fichier zip peut être un vecteur pour des attaques malveéillantes, comme l’installation de shells. Ainsi, Cloudflare bloque ces requêtes pour protéger votre site.

Dans notre cas, par contre, cela nous empêche de faire nos mises à jour et c’est quand même plus simple de mettre à jour les plugins et thèmes payants avec un fichier zip, plutôt que de passer par SFTP ou wp-cli.

Solution #1: créer une exception dans le WAF de Cloudflare

Évidemment, nous n’allons pas désactiver ces règles qui fonctionnent si bien et ajoutent une couche de protection à notre site. Non, nous allons simplement créer une exception aux Managed Rules, que nous placerons avant tous les autres set de règles pour qu’elle soit prise en compte en priorité.

Étape 1: rendez-vous dans le Dashboard de Cloudflare

Allez dans Security > WAF > Managed Rules.

Voici ce que vous obtenez:

A screenshot of the WAF settings in Google Analytics showcasing blocked zip files.

Cliquez ensuite sur le bouton Add exception à droite.

Lire la suite

avif logo rgb

Recréer les fichiers AVIF corrompus

Cela fait une paire de fois que les images au format AVIF ne s’affichent pas sur SkyMinds et aujourd’hui, on règle le problème une bonne fois pour toute.

Concrètement, à chaque fois que j’uploade une image dans la bibliothèque de média de WordPress, plusieurs images sont créés: les miniatures bien sûr mais aussi un jeu d’images au format WEBP et au format AVIF. Tout se fait de manière automatique avec ShortPixel lors de l’upload.

Or, dernièrement certaines images ne s’affichent plus. Si on retire la source AVIF du DOM du document, le WEBP s’affiche bien, tout comme l’image originale en PNG ou JPG. C’est donc au niveau de la compression AVIF que cela coince.

Procédure de debug

Configuration NginX

Si vous vous souvenez bien, j’ai dans ma configuration NginX des directives pour donner la précédence aux formats AVIF et WEBP sur toutes mes images. Cela permet de servir en priorité les fichiers images aux formats les plus récents, avec un fallback sur les formats plus anciens (JPG, PNG notamment).

J’ai passé la configuration au peigne fin et il n’y a pas de problème à ce niveau. Les fichiers AVIF sont bien servis, le problème se trouve plus au niveau de l’encodage des fichiers.

Tester les images affectées

Lorsque je visionne un article avec une image affectée par le bug, elle ne saffiche pas mais apparait comme une image cassée. Lorsque l’on ouvre l’image dans un nouvel onglet, on obtient l’erreur suivante: “the image cannot be displayed because it contains errors“.

Je ne connais pas le nom des images affectées ni leur nombre (cela inclut aussi les miniatures) donc le plus simple est de dresser la liste des fichiers AVIF sur le site. Ensuite, je veux inspecter chaque image pour vérifier qu’elles possèdent bien les entêtes et bits nécessaires à leur bon affichage.

Commençons par installer les outils nécessaires pour examiner les fichiers AVIF:

apt install libavif-bin libavif13

On lance un test sur un fichier problématique:

avifdec /home/www/example/wp-content/uploads/2021/05/the-handmaids-tale-june-nick.avif /dev/null Code language: JavaScript (javascript)

et voici le résultat:

Decoding with AV1 codec 'dav1d' (1 worker thread), please wait... 
ERROR: Failed to parse image: BMFF parsing failed 
Diagnostics: * Box[meta] does not have a Box[hdlr] as its first child boxCode language: JavaScript (javascript)

L’erreur (“ERROR: Failed to parse image: BMFF parsing failed”), suggère que le fichier est en effet soit corrompu, soit incompatible donc nous allons le recréer.

Un script bash pour recréer tous les fichiers AVIF corrompus

Il est évident que nous n’allons pas tester tous les fichiers un par un. Maintenant que nous avons pu tester un fichier, nous allons créer une boucle pour tester tous les fichiers qui ont été uploadés sur le site : si le fichier est corrompu, nous allons le recréer, sinon on passe au suivant.

Lire la suite

Un livre sur une table avec des lunettes posées.

La compréhension écrite au bac : la méthode pour réussir

  1. Bac : méthode pour l’étude d’un texte poétique
  2. 10 conseils pour bien réussir l’épreuve de Compréhension Orale du bac
  3. La compréhension écrite au bac : la méthode pour réussir
  4. Conseils pour bien réussir l’épreuve d’Expression Orale du bac
  5. Bac : le dossier en spécialité LLCER Anglais
  6. Bac : épreuve orale de spécialité LLCER Anglais
  7. Conseils pour bien réussir le Grand Oral du Bac
  8. La synthèse de documents en LLCER : méthode pour réussir

Voici quelques conseils pour bien aborder et réussir l’épreuve de compréhension écrite en anglais qui compte dans le contrôle continu du baccalauréat.

Découverte des questions du sujet

Examinez attentivement chaque question en identifiant les éléments suivants :

  • L’auxiliaire ou le verbe principal ainsi que le temps verbal auquel ils font référence : présent, futur, ou passé.
  • Les marqueurs temporels, le cas échéant, qui corroborent le temps exprimé par le verbe.
  • Le sujet de la question.
  • Le mot de questionnement qui vous aidera à localiser la réponse pertinente dans le texte.

Découverte des documents de compréhension écrite

Avant toute chose, il faut lire 2 fois le texte.

La première lecture se fait sans souligner quoi que ce soit, stylo posé. On le lit attentivement. Lors de cette lecture, ne vous attardez pas sur les mots ou les sections qui ne sont pas immédiatement clairs. Vous aurez l’occasion de les examiner plus en détail ultérieurement.

Tout au long de cette première lecture, soyez attentif à identifier des informations clés comme la date de publication du texte, l’identité de l’auteur, et le genre littéraire de l’œuvre. Bien que ces détails puissent sembler mineurs, ils peuvent s’avérer précieux pour répondre aux questions de compréhension par la suite.

Lors de la deuxième lecture, on peut prendre des stylos de couleur, souligner les informations importantes et commencer ses repérages. C’est à ce moment que vous devriez commencer à prendre des notes et à vous immerger pleinement dans l’analyse du texte.

Les repérages du texte

Méthode: stabilo ou tableau

Lors de l’analyse de documents, les élèves adoptent diverses méthodes pour organiser et interpréter l’information, chacune ayant ses avantages. Une méthode populaire consiste à souligner directement dans le texte. Cette approche offre une visibilité immédiate des éléments clés et permet aux élèves de repérer facilement les réponses aux questions interrogatives (“who?”, “what?”, “where?”, “when?”) tout en restant engagés avec le texte original. Cela facilite la compréhension contextuelle et la rétention des informations importantes, surtout lorsqu’on utilise des couleurs différentes pour chaque catégorie, rendant le processus d’analyse plus intuitif et visuellement accessible.

D’un autre côté, certains élèves préfèrent élaborer un tableau à double entrée, où les questions interrogatives sont placées en colonnes et les différents documents sont répartis en rangées. Cette méthode structurée permet une comparaison et une analyse ciblée des documents. Elle favorise une vue d’ensemble claire, facilitant la mise en relation des informations entre les différents documents.

Ce tableau sert également de référence concise lors de la rédaction de réponses ou d’analyses, aidant à organiser les pensées et à construire des arguments cohérents. De plus, cette approche aide à éviter d’écrire directement sur les documents, ce qui peut être préféré par ceux qui souhaitent conserver leurs documents intacts ou qui trouvent plus facile de synthétiser les informations dans un format tabulaire.

Chacune de ces méthodes a ses mérites et il est important que chaque élève choisisse celle qui correspond le mieux à son style d’apprentissage et à sa manière de traiter l’information.

Les repérages de base indispensables

Il est primordial de débuter en identifiant la source et la nature du document : s’agit-il d’une affiche, d’un passage de roman, ou d’un article de presse ?

Typiquement, le corpus comprend un élément de fiction (comme un extrait de roman, qui est fréquent), un élément non-fictionnel (tel qu’un fragment d’article de presse, de mémoires, ou de discours) et un élément visuel (comme une photographie, une affiche, ou une publicité).

Lire la suite

php 8.3 fireworks

Installer PHP 8.3 sur le serveur

Tous les sites et services hébergés sur Apollo tournent actuellement sous PHP 8.2 mais PHP 8.3 vient de pointer le bout de son nez donc nous allons l’installer sur le serveur.

Nouveautés et changements de PHP 8.3

PHP 8.3 marque une avancée notable dans l’univers de PHP, apportant avec elle une panoplie de nouveautés et d’améliorations captivantes. Au cœur de PHP 8.3, on découvre des innovations passionnantes.

Des constantes de classe typées : avec PHP 8.3, place à la précision ! Les constantes de classe se dotent d’un typage explicite, renforçant ainsi la rigueur dans l’application des types et affinant la détection des erreurs.

Récupération dynamique des constantes de classe : simplification à l’horizon ! Cette nouveauté rend la récupération des constantes de classe plus intuitive, rendant ainsi votre code plus clair et plus facile à entretenir.

Le flamboyant attribut #[\Override] : tel un gardien, cet attribut veille à ce qu’une méthode portant le même nom soit présente dans une classe parente ou une interface, boostant la fiabilité de votre code et facilitant son évolution.

Clonage en profondeur des propriétés en lecture seule : PHP 8.3 innove en permettant la modification unique des propriétés en lecture seule dans la méthode __clone, ouvrant la voie à un clonage plus profond.

La fonction innovante json_validate() : vérifier la validité d’un JSON devient un jeu d’enfant avec cette nouvelle fonction, plus efficace et rapide.

La méthode inédite Randomizer::getBytesFromString() : prolongeant l’extension Random de PHP 8.2, cette méthode est un véritable couteau suisse pour générer des chaînes aléatoires spécifiques, idéale pour créer des identifiants uniques comme des noms de domaine.

Un éventail de nouvelles méthodes et fonctions : PHP 8.3 n’est pas avare en nouveautés et offre un large éventail de méthodes et fonctions inédites, telles que DOMElement::getAttributeNames(), IntlCalendar::setDate(), et ldap_connect_wallet(), pour n’en nommer que quelques-unes.

Avec PHP 8.3, non seulement vous bénéficiez d’améliorations de performances et de corrections de bugs, mais aussi d’une expérience de développement web plus fluide et efficace.

PHP 8.3 est-il plus rapide?

Alors on peut se demander si cette nouvelle mouture est bien plus rapide que les versions précédentes. Rien de tel qu’un petit test avec WordPress et WooCommerce.

Sous WordPress 6.4, le site sert:

  • 153 requêtes/s avec PHP 8.2
  • 165 requêtes/s avec PHP 8.3

Sous WooCommerce 8.0, on obtient:

  • 49 requêtes/s avec PHP 8.2
  • 58 requêtes/s avec PHP 8.3

Donc oui, PHP 8.3 est plus rapide que PHP 8.2 et les versions précédentes.

Lire la suite

A robotic hand is typing on a laptop keyboard to extract content.

Comment empêcher les chatbots IA d’extraire le contenu de votre site

Vous êtes inquiet à l’idée que des chatbots basés sur l’intelligence artificielle puissent aspirer le contenu de votre site Web ? Heureusement, il existe des moyens de les en empêcher. Voici comment procéder.

Comment les chatbots IA accèdent-ils au contenu de votre site ?

Les chatbots alimentés par intelligence artificielle sont formés à l’aide de multiples jeux de données, dont certains sont en libre accès et disponibles au grand public. Selon un article de recherche publié par OpenAI, GPT-3 a été formé à partir de cinq jeux de données distincts :

  • Common Crawl (contribution de 60% à l’entraînement)
  • WebText2 (contribution de 22% à l’entraînement)
  • Books1 (contribution de 8% à l’entraînement)
  • Books2 (contribution de 8% à l’entraînement)
  • Wikipédia (contribution de 3% à l’entraînement)

Common Crawl englobe des pétaoctets de données issues de sites Web collectées depuis 2008, un peu à la manière dont l’algorithme de recherche de Google scrute les contenus en ligne. WebText2 est un jeu de données créé par OpenAI, qui contient environ 45 millions de pages Web liées depuis des publications Reddit ayant reçu au moins trois votes positifs.

Il est donc important de noter que, dans le cas de ChatGPT, le chatbot n’accède ni n’explore directement les pages de votre site Web — du moins, pas pour l’instant. Néanmoins, l’annonce récente d’un navigateur Web hébergé par ChatGPT a suscité des inquiétudes sur une éventuelle évolution de cette situation.

À l’heure actuelle, les propriétaires de sites Web devraient surveiller d’autres chatbots IA qui entrent sur le marché. Bard est un autre acteur majeur dans ce domaine, mais on en sait peu sur les jeux de données utilisés pour son entraînement. Bien sûr, nous savons que les robots d’exploration de Google parcourent constamment les pages Web, mais cela ne signifie pas nécessairement que Bard a accès aux mêmes données.

Pourquoi certains propriétaires de sites Web sont-ils inquiets ?

La principale inquiétude des propriétaires de sites Web est la dévalorisation de leur contenu par des bots IA tels que ChatGPT, Bard et Bing Chat. Ces bots IA utilisent le contenu existant pour générer des réponses, réduisant ainsi le besoin pour les utilisateurs d’accéder à la source originale. Au lieu de visiter des sites Web pour obtenir des informations, les utilisateurs peuvent simplement demander à Google ou à Bing de générer un résumé des informations dont ils ont besoin.

Dans le contexte des chatbots IA intégrés aux moteurs de recherche, la perte de trafic est la préoccupation majeure des propriétaires de sites Web. Par exemple, Bard, le chatbot IA, inclut rarement des citations dans ses réponses génératives, ce qui indique aux utilisateurs de quelles pages il tire ses informations.

Ainsi, en plus de remplacer les visites sur les sites Web par des réponses générées par IA, Bard supprime presque toute possibilité pour le site source de recevoir du trafic — même si l’utilisateur souhaite obtenir des informations supplémentaires. À l’opposé, Bing Chat lie plus fréquemment aux sources d’information.

En résumé, la génération actuelle d’outils IA génératifs utilise le travail des créateurs de contenu pour systématiquement supplanter le besoin de ces créateurs. Cela soulève la question de l’incitatif pour les propriétaires de sites Web à continuer à publier du contenu. Et, par extension, que se passera-t-il pour les chatbots IA si les sites Web cessent de publier le contenu dont ils dépendent pour fonctionner ?

Lire la suite

A woman using a cell phone while sitting at a table with a cup of coffee and reading an eBook on her tablette.

ePub, comment lire un eBook (tablette et PC) ?

Découvrez la simplicité de la lecture numérique avec ePub

ePub est devenu le format de prédilection pour les adeptes du livre numérique, et pour cause : sa facilité d’utilisation est inégalée. Cet article vous guide à travers le processus en deux étapes faciles : télécharger un lecteur d’eBook et plonger dans votre lecture.

Qu’est-ce que le format ePub ?

ePub, l’acronyme de ‘electronic publication’, est largement reconnu comme le standard universel pour les livres numériques. Sa conception ouverte et adaptable garantit que le texte s’affiche parfaitement sur tous vos appareils, qu’il s’agisse d’ordinateurs, de tablettes ou de smartphones.

Vos premiers pas avec les lecteurs d’eBooks

La première étape consiste à choisir et installer un lecteur d’eBooks. Cette étape franchie, vous pourrez accéder à votre bibliothèque numérique à tout moment, sans aucune manipulation supplémentaire.

Comment lire un ePub sur Smartphone ou Tablette ?

Pour les utilisateurs d’iOS (iPad ou iPhone) :

Transférez vos fichiers ePub sur votre appareil via iTunes, et retrouvez-les facilement sur l’application iBooks, préinstallée et prête à l’emploi.

Pour les utilisateurs d’Android :

Aldiko est une excellente option, mais libre à vous d’explorer et de choisir l’application qui vous convient le mieux.

Lire un ePub sur un ordinateur

Sur Mac et Windows :

Adobe Digital Editions (ADE) est le choix privilégié pour les nouveaux venus dans le monde de la lecture numérique sur ordinateur. C’est une solution fiable qui promet une expérience de lecture fluide et intuitive. Voici comment démarrer avec ADE :

  1. Téléchargez et installez le logiciel sur votre ordinateur, qu’il soit sous Windows ou macOS.
  2. Une fois l’installation terminée, ouvrez ADE et ajoutez vos livres au format ePub à la bibliothèque.
  3. Double-cliquez sur un livre pour commencer à lire.

Sur Mac, Windows et Linux :

Calibre est bien plus qu’un simple lecteur d’eBooks : c’est une véritable bibliothèque numérique pour votre ordinateur, compatible avec Windows, macOS et Linux. C’est un outil complet qui permet non seulement de lire, mais aussi de gérer et d’organiser votre collection d’eBooks. Suivez ces instructions pour utiliser Calibre :

  1. Téléchargez et Installez Calibre et lancez-le.
  2. Importez vos eBooks au format ePub dans Calibre en cliquant sur “Ajouter des livres”.
  3. Sélectionnez un livre et cliquez sur “Lire” pour ouvrir le livre et profiter de votre lecture.

Lire la suite

An image of a computer screen with a green and purple background displaying the Message Of The Day (MOTD) on Ubuntu Server.

Changer le Message Of The Day (MOTD) sous Ubuntu Server

Le Message Of The Day (communément appelé MOTD) est un message d’accueil ou des notifications importantes que les administrateurs de serveurs peuvent configurer pour s’afficher lorsqu’un utilisateur se connecte au serveur via SSH.

Ce tutoriel vous montre comment mettre à jour et personnaliser le MOTD sur un serveur Ubuntu 22.04.

Prérequis

  • Serveur Ubuntu 22.04 avec accès root ou un utilisateur avec des privilèges sudo.
  • Accès SSH au serveur.

Étape 1 : connexion au Serveur

Connectez-vous à votre serveur Ubuntu via SSH:

ssh USER@SERVER_IP -pPORTCode language: CSS (css)

Étape 2 : vérifier le MOTD existant

Pour voir le MOTD actuel, utilisez la commande suivante :

cat /run/motd.dynamic

Étape 3 : modifier le MOTD dynamique

Ubuntu 22.04 utilise des scripts dans le répertoire /etc/update-motd.d/ pour générer une partie du MOTD dynamiquement. Vous pouvez ajouter, supprimer ou modifier les scripts dans ce répertoire pour personnaliser davantage le MOTD.

Entête MOTD

Nous allons créer un entête qui contient le nom de notre serveur en ASCII art, ce qui nous permettra de bien l’identifier lors de nos sessions SSH:

sudo nano /etc/update-motd.d/00-custom

Et on y ajoute notre script bash:

#!/bin/sh

# Reset
Color_Off='\033[0m'       # Text Reset

# Bold
BBlack='\033[1;30m'       # Black
BRed='\033[1;31m'         # Red
BGreen='\033[1;32m'       # Green
BYellow='\033[1;33m'      # Yellow
BBlue='\033[1;34m'        # Blue
BPurple='\033[1;35m'      # Purple / Magenta
BCyan='\033[1;36m'        # Cyan
BWhite='\033[1;37m'       # White

# Set the text color to green
printf "$BGreen"

# https://patorjk.com/software/taag/#p=display&f=Doom&t=APOLLO%20.%20SKYMINDS%20.%20NET
cat << "EOF"
  ___  ______ _____ _      _     _____       _____ _   ____   ____  ________ _   _______  _____       _   _  _____ _____
 / _ \ | ___ \  _  | |    | |   |  _  |     /  ___| | / /\ \ / /  \/  |_   _| \ | |  _  \/  ___|     | \ | ||  ___|_   _|
/ /_\ \| |_/ / | | | |    | |   | | | |     \ `--.| |/ /  \ V /| .  . | | | |  \| | | | |\ `--.      |  \| || |__   | |
|  _  ||  __/| | | | |    | |   | | | |      `--. \    \   \ / | |\/| | | | | . ` | | | | `--. \     | . ` ||  __|  | |
| | | || |   \ \_/ / |____| |___\ \_/ /  _  /\__/ / |\  \  | | | |  | |_| |_| |\  | |/ / /\__/ /  _  | |\  || |___  | |
\_| |_/\_|    \___/\_____/\_____/\___/  (_) \____/\_| \_/  \_/ \_|  |_/\___/\_| \_/___/  \____/  (_) \_| \_/\____/  \_/
EOF

# Set the text color to magenta
printf "$BPurple"

# Left image lines
left1="                                   88 88  "
left2="                                   88 88  "
left3="                                   88 88  "
left4=",adPPYYba, 8b,dPPYba,   ,adPPYba,  88 88  ,adPPYba,"
left5="\"\"     \`Y8 88P'    \"8a a8\"     \"8a 88 88 a8\"     \"8a"
left6=",adPPPPP88 88       d8 8b       d8 88 88 8b       d8"
left7="88,    ,88 88b,   ,a8\" \"8a,   ,a8\" 88 88 \"8a,   ,a8\""
left8="\"8bbdP\"Y8 88\`YbbdP\"'   \"\"YbbdP\"'  88 88  \"\"YbbdP\"'"
left9="           88                                          "
left10="           88                                         "

# Right image lines
right1=" .              +   .                .   . .     .  ."
right2="                   .                    .       .     *"
right3="  .       *                        . . . .  .   .  + ."
right4="            \"You Are Here\"            .   .  +  . . ."
right5=".                 |             .  .   .    .    . ."
right6="                  |           .     .     . +.    +  ."
right7="                 \\|/            .       .   . ."
right8="         . .        V          .    * . . .  .  +   ."
right9="               +      .           .   .      +"
right10="                               .       . +  .+. ."

# Combine and print
echo "$left1 $right1"
echo "$left2 $right2"
echo "$left3 $right3"
echo "$left4 $right4"
echo "$left5 $right5"
echo "$left6 $right6"
echo "$left7 $right7"
echo "$left8 $right8"
echo "$left9 $right9"
echo "$left10 $right10"

# STATS
upSeconds="$(/usr/bin/cut -d. -f1 /proc/uptime)"
secs=$((${upSeconds}%60))
mins=$((${upSeconds}/60%60))
hours=$((${upSeconds}/3600%24))
days=$((${upSeconds}/86400))
UPTIME=$(printf "%d days, %02dh%02dm%02ds" "$days" "$hours" "$mins" "$secs")

# get the load averages
read one five fifteen rest < /proc/loadavg

# text in yellow
printf "$BYellow"

echo "
   .~~.   .~~.    `date +"%A, %e %B %Y, %r"`
  '. \ ' ' / .'   `uname -srmo`
   .~ .~~~..~.
  : .~.'~'.~. :   Uptime.............: ${UPTIME}
 ~ (   ) (   ) ~  Memory.............: `cat /proc/meminfo | grep MemFree | awk {'print $2'}`kB (Free) / `cat /proc/meminfo | grep MemTotal | awk {'print $2'}`kB (Total)
( : '~'.~.'~' : ) Load Averages......: ${one}, ${five}, ${fifteen} (1, 5, 15 min)
 ~ .~ (   ) ~. ~  Running Processes..: `ps ax | wc -l | tr -d " "`
  (  : '~' :  )   IP Addresses.......: `ip a | grep glo | awk '{print $2}' | head -1 | cut -f1 -d/` and `wget -q -O - https://icanhazip.com/ | tail`
   '~ .~~~. ~'    Weather............: `curl -s "https://rss.accuweather.com/rss/liveweather_rss.asp?metric=1&locCode=EUR|FR|FR|NANTES|" | sed -n '/Currently:/ s/.*: \(.*\): \([0-9]*\)\([CF]\).*/\2°\3, \1/p'`
       '~'
"

# text default colour
printf "$Color_Off"Code language: PHP (php)

Cela affiche le nom du serveur (apollo.skyminds.net) puis une petite frise, et enfin les statistiques ainsi que la météo pour Nantes. Vous pouvez modifier la ville dans l’avant-dernière ligne.

Notez que j’ai compilé deux images pour qu’elles s’affichent sur les mêmes lignes: le mot “apollo” en ASCII art et une version de l’univers avec le texte “You are here!”. Il faut jouer avec l’indentation mais au bout de quelques essais, cela rend plutôt pas mal je trouve.

Rendez le script exécutable :

sudo chmod +x  /etc/update-motd.d/00-custom

Lancez la compilation de tous les modules dynamiques pour obtenir le MOTD final qui sera affiché à chaque connexion SSH:

run-parts /etc/update-motd.d/ > /run/motd.dynamicCode language: JavaScript (javascript)

Lire la suite

viewport overflow

Vanilla JS : identifier l’élément plus large que le viewport

Aujourd’hui, je régle un petit souci d’affichage sur un une boutique WooCommerce propulsée par Astra.

Le problème est le suivant: lorsqu’on visite le site depuis un mobile, il est possible de faire bouger le contenu de la page vers la gauche, ce qui dévoile une hideuse colonne grise/verte sur le côté droit. Pourtant, aucun élément ne semble dépasser la largeur du contenu.

L’identification de l’élément causant ce défaut d’affichage n’est pas vraiment une chose aisée, car visuellement, on ne distingue rien qui dépasse.

Vanilla JS à la rescousse

Voici un petit script en Vanilla JS qui permet de trouver l’élément qui dépasse la largeur du viewport de votre page:

/**
 * Identify elements that exceed the viewport width
 * by Matt Biscay
 * https://www.skyminds.net/?p=614036
 */
document.addEventListener("DOMContentLoaded", function() {
  const elements = document.querySelectorAll('body *');
  elements.forEach(element => {
    if (element.offsetWidth > document.documentElement.clientWidth) {
      console.log('Element causing overflow: ', element);
    }
  });
});Code language: JavaScript (javascript)

CSS: couvrez cet overflow que je ne saurais voir

Une fois votre ou vos éléments identifiés, il ne vous reste plus qu’à cacher son overflow-x :

#element {
  overflow-x: hidden;
}Code language: CSS (css)

Rafraîchissez la page. Hop, problème résolu.