Tag: code

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

16 avril 2024 by Matt Biscay · Lecture: 6 minutes

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.

Group photo of all devs at Cloudfest Hackathon 2022

Le Hackathon du CloudFest 2022

20 December 202325 avril 2022 by Matt Biscay · Lecture: 3 minutes

Cette année, j’ai eu la chance et le grand honneur d’être invité au CloudFest 2022 pour le hackathon: 3 jours de code sur un projet web en mode open-source pour faire avancer les choses.

Le Cloudfest

Le Cloudfest est une convention de développeurs et d’acteurs du web qui peuvent être extrêmement variés: cela va des hébergeurs web aux plateformes comme Codeable mais aussi avec de gros acteurs comme Airbus, Intel, Automattic, HP, Cpanel, Plesk…

Les conférences sont très variées: intelligence artificielle, business… et il est très facile de rencontrer des gens très connus sur le web pour se faire un réseau.

Le Cloudfest se tient à Rust, en Allemagne, à l’Europa Park.

Le Hackathon

Cette année le hackathon proposait plusieurs projets mais j’ai opté pour travailler sur wp-cli pour ajouter une nouvelle commande qui permettre de sécuriser 80% des attaques contre les instances WordPress, en appliquant simplement les meilleures pratiques de sécurité courantes.

Concrètement, nous avons identifié les problèmes de sécurité courants et nous avons développé une extension de l’interface de ligne de commande WordPress (wp-cli) pour offrir une alternative sécurisée et facile à utiliser aux plugins de sécurité WordPress généralement non sécurisés.

Avec la simple commande wp secure all, les meilleures pratiques courantes sont appliquées automatiquement à votre instance WordPress, et en moins de 60 secondes, vous attenuez la grande majorité des vecteurs d’attaque WordPress actuels : permissions de fichiers et de dossiers, entêtes de sécurité, bloquer l’accès aux fichiers sensibles…

PHP: résoudre l’erreur “file_get_contents(): SSL operation failed with code 1”

14 March 202231 mai 2020 by Matt Biscay · Lecture: 2 minutes

J’ai récemment joué avec l’API de YouTube pour pouvoir récupérer diverses informations sur les vidéos afin d’ajouter au site les données structurées idoines.

Il se trouve qu’en local, lorsque l’on utilise file_get_contents(), on peut obtenir une erreur de ce type lorsque le serveur n’est pas configuré avec le bundle de certificats OpenSSL:

Warning: file_get_contents(): SSL operation failed with code 1. OpenSSL Error messages: error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate verify failed in ...php on line 2

Warning: file_get_contents(): Failed to enable crypto in ...php on line 2

Warning: file_get_contents(https://........f=json): failed to open stream: operation failed in ...php on line 2
Code language: JavaScript (javascript)

Si cela vous arrive, plusieurs solutions s’offrent à vous.

Méthode 1: configuration de PHP côté machine/serveur

1. Vérifiez qu’OpenSSL est bien installé sur votre machine (il devrait l’être sur le serveur!).

2. Ajoutez cette ligne à la configuration de PHP, dans votre php.ini:

openssl.cafile=/usr/local/etc/openssl/cert.pemCode language: JavaScript (javascript)

3. Redémarrez le service PHP.

Méthode 2 : une fonction qui utilise curl au lieu de file_get_contents()

Au lieu de m’embêter à configurer OpenSSL ou à toucher à PHP dans un conteneur docker (Local), il se trouve que l’on peut réécrire la fonction file_get_contents() avec une fonction maison qui utilise curl.

Voici la fonction en question:

/*
Custom CURL function that mimicks file_get_contents()
@returns false if no content is fetched
Matt Biscay (https://mattbiscay.com)
*/
function sky_curl_get_file_contents( $URL ){
	$c = curl_init();
	curl_setopt( $c, CURLOPT_RETURNTRANSFER, 1 );
	curl_setopt( $c, CURLOPT_URL, $URL );
	$contents = curl_exec( $c );
	curl_close( $c );
	if( $contents ) :
		return $contents;
	else:
		return false;
	endif;
}Code language: PHP (php)

La fonction retourne false si la requête échoue, ce qui est très utile pour éviter de faire des appels à des valeurs d’un tableau qui n’existe pas.

On peut alors réfléchir à un autre moyen de peupler les champs de données structurées (mais c’est un sujet à aborder une autre fois).

Utiliser Git pour envoyer du code versionné sur Github

8 February 202322 août 2019 by Matt Biscay · Lecture: 2 minutes

Git – et son homologue Github – permet de versionner votre code afin de pouvoir commenter les changements de code, revenir en arrière et annuler une modification en cas de problème, tenir une feuille de route, accepter des demandes de modifications venant d’autres développeurs (pull requests) et permettre la collaboration de plusieurs personnes sur un même projet.

Voici un petit tuto pour vous donner les commandes essentielles qui permettent de créer le dépôt, ajouter du code et l’envoyer sur Github.

Installation de Git

Commençons par l’étape obligatoire qui est l’installation de Git sur votre système d’exploitation:

MacOSX : résoudre l’erreur xcrun: error: invalid active developer path

Sous MacOSX, lorsque vous lancez une commande git, vous pouvez obtenir le message d’erreur suivant:

xcrun: error: invalid active developer path (/Library/Developer/CommandLineTools), missing xcrun at: /Library/Developer/CommandLineTools/usr/bin/xcrunCode language: JavaScript (javascript)

Cela signifie qu’il vous manque les outils de développement XCode. Cela peut arriver après chaque mise à jour d’OSX donc vous pouvez les installer avec:

sudo rm /Library/Developer/CommandLineTools -rf
sudo xcode-select --install

Créer un nouveau dépôt Git et l’associer à votre dépôt GitHub

Placez-vous dans le répertoire qui contient votre code. On crée un nouveau dépôt Git avec:

git init

Cela initialise votre répertoire avec les dossiers cachés de git. On ajoute maintenant l’adresse de notre dépôt sur GitHub:

git remote add origin https://github.com/example/example-projectCode language: JavaScript (javascript)

Nous allons maintenant pouvoir ajouter notre code.

Ajouter et valider votre code

Pour ajouter des fichiers, on utilise la directive add:

git add *
git add <filename>Code language: HTML, XML (xml)

Ensuite, on valide avec un message qui explique la validation des changements:

git commit -m "Ajout des fichiers du projet"Code language: JavaScript (javascript)

A ce stade, le fichier est dans le HEAD de git, mais pas encore dans votre dépôt distant. On l’envoie donc sur GitHub avec:

git push origin master

Pour mettre à jour votre dépôt local vers les dernières validations qui se trouvent sur GitHub (attention, cela écrase les fichiers locaux!), exécutez la commande:

git pull

Voilà, c’est un petit mémo simple mais il permet déjà de se servir des principales fonctions de git.

PHP : script pour retirer les attributs des tags HTML photo

PHP : script pour supprimer certains attributs de tags HTML

29 March 202221 novembre 2015 by Matt Biscay · Lecture: 2 minutes

J’ai eu besoin récemment de pouvoir contrôler les attributs des liens qui s’affichaient sur le blog et plus spécialement ceux qui sont fournis par des sites tiers (sponsors etc).

Et bien figurez-vous que certains liens ne sont pas du tout valides : leurs liens ont des attributs obsolètes ou inadaptés avec comme des target="_blank".

Tout cela brise la navigation en fenêtres/onglets supplémentaires, et supprime la fonctionnalité du bouton back pour revenir à la page précédente.

Du coup, j’ai retroussé un peu mes manches pour remédier à ce problème.

Cela m’a donné ce script, qui me permet de dresser la liste des attributs à filtrer dans un code source donné.

Sky Cleanup Attributes

Voici la fonction principale, sobrement appelée Sky Cleanup Attributes : elle permet de filtrer des attributs définis dans une liste. Il suffit de passer le code dans une variable et la fonction filtre et retourne le code final, sans les attributs gênants.

Code du Collégien

29 March 202217 mars 2015 by Matt Biscay · Lecture: 3 minutes

Introduction au Code

Aujourd’hui, je vous fais part d’un document que j’utilise chaque année lorsque j’enseigne au collège : le Code du Collégien.

C’est la base sur laquelle je m’appuie pour établir les règles de vie de classe et c’est l’une des premières feuilles que l’on colle dans le cahier.

Le but est d’avoir en tout et pour tout dix règles de vie commune qui permettent de mieux vivre ensemble en société, de manière respectueuse.

C’est primordial au collège où les élèves n’ont pas forcément une idée de ce qui est acceptable au non. Cela leur donne un cadre, des normes et des valeurs.

Pour bien vivre ensemble, travailler et réussir!

Règle n ° 1 :

J’obéis à tous les adultes de l’établissement.
Je ne discute pas les décisions ni les sanctions d’un adulte.

Règle n ° 2 :

Je suis poli(e) et je n’utilise pas de langage vulgaire ni un ton agressif
envers qui que ce soit.

Règle n ° 3 :

Je ne règle pas mes problèmes par la violence (même pour jouer).

Règle n ° 4 :

J’ai une tenue vestimentaire correcte.
Je n’ai pas de téléphone portable, ni de lecteur MP3, etc…

Règle n ° 5 :

J’arrive à l’heure.
Dès la sonnerie, je me range calmement sur la base.
J’assiste à tous les cours (je justifie mes absences dès mon retour).

WordPress : afficher les accents dans des blocs texte colorisés par Crayon Syntax Highlighter

29 March 202215 janvier 2015 by Matt Biscay · Lecture: 2 minutes

Jusqu’à très récemment, il m’était tout à fait possible d’avoir des caractères accentués dans des blocs de texte sous WordPress en utilisant le plugin Crayon Syntax Highlighter pour coloriser le code.

Or depuis quelques temps tous les blocs en lang="text" ne permettent plus d’afficher les accents : je me retrouve avec des mots tronqués comme si le texte n’était pas encodé en UTF-8.

Problème : des caractères non-Unicode

Voici ce que donne la phrase “j’ai mangé une tarte à la crème à Noël” avec une colorisation par défaut avec Crayon Syntax Highlighter :

J'ai mangé une tarte à la crème à Noël.

Gloups! C’est totalement illisible, les accents deviennent un caractère mal encodé et certaines lettres adjacentes sont littéralement supprimées. Pas glop.

Solution : créer un alias

La solution que je propose est plus une rustine d’appoint qu’une véritable solution.

Je pense que le problème réside dans l’expression régulière des langages du plugin : certains langages (shell par exemple) n’acceptent pas les accents alors que d’autres (HTML par exemple) oui.

Je me suis rendu compte en changeant la langue du bloc que le langage batch affichait correctement les accents.

Comme je n’allais pas éditer tous mes articles pour changer le langage des blocs texte que j’ai utilisé jusqu’à maintenant, j’ai opté pour la création d’un alias.

jQuery : sélectionner un élément dont l'ID ou la classe commence ou finit par une chaîne photo 1

jQuery : script toggle pour afficher et cacher de multiples blocs HTML

10 March 202402 janvier 2015 by Matt Biscay · Lecture: 8 minutes

J’ai écrit il y a quelques temps un script jQuery utilisant la fonction toggle pour afficher/cacher un seul bloc HTML mais pas mal de gens m’ont demandé comment faire pour afficher plusieurs blocs HTML.

Voici comment s’y prendre, en utilisant les fonctions jQuery .slideup(), .slidedown() et .closest().

Démo

Article A

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Lire la suite
Replier

Article B

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Lire la suite
Replier

Article C
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam

Lire la suite
Replier

Le script

1. Ajoutez jQuery dans l’entête de votre page (head), comme ceci :

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>Code language: HTML, XML (xml)

WordPress : remplacer le vieux code Dailymotion de vos articles par une URL oEmbed photo 1

WordPress : mettre à jour le code Dailymotion

7 March 202413 décembre 2014 by Matt Biscay · Lecture: 1 minute

Cet article est le pendant de l’article pour remplacer le vieux code YouTube de vos articles WordPress par une URL oEmbed mais pour Dailymotion.

Voici donc les manipulations à effectuer pour transformer les vieux codes d’intégration avec les URL oEmbed de WordPress.

Nous utilisons toujours le plugin Search Regex pour WordPress avec la case regex activée et le signe dièse (#) comme délimiteur pour les expressions régulières.

Remplacer les liens swf/video de Dailymotion

J’appelle ces liens “swf/video” parce qu’on retrouve cela dans l’URL de l’intégration Flash. Il vaut mieux lancer cette substitution en premier.

On recherche :

#<object data="http://www.dailymotion.com/swf/video/(.*)" width="300" height="150">(.*)</object>#Code language: HTML, XML (xml)

Et on remplace par :

https://www.dailymotion.com/video/$2Code language: JavaScript (javascript)

Remplacer les liens swf de Dailymotion

On s’occupe maintenant des liens qui contiennent juste le terme “swf”.

On recherche :

#<object data="http://www.dailymotion.com/swf/(.*)" width="300" height="150">(.*)</object>#Code language: HTML, XML (xml)

Et on remplace par :

https://www.dailymotion.com/video/$2Code language: JavaScript (javascript)

Voilà, vous venez de nettoyer les anciens codes d’intégration Flash pour les remplacer par des URI oEmbed natives. Propre.

WordPress : remplacer le vieux code YouTube de vos articles par une URL oEmbed photo

WordPress : mettre à jour le code Youtube

7 March 202411 décembre 2014 by Matt Biscay · Lecture: 2 minutes

Le code des plateformes – vidéos ou autre – évolue et il n’est pas rare de tomber sur de vieux articles qui embarquent un vieux code embed pour afficher des vidéos.

Si votre site a quelques années, il y a plusieurs méthodes d’intégration – plus ou moins optimisées – dont certaines ne s’afficheront pas (celles utilisant le plugin Flash par exemple) sur une tablette ou un smartphone.

Sur SkyMinds, je me suis dit que ce serait sympa d’avoir un système unifié : toutes les vidéos YouTube seront automatiquement insérées par WordPress en utilisant la méthode native, à savoir oEmbed.

Pour ce faire, j’utilise le plugin Search Regex qui permet d’intervenir facilement sur la base de données pour effectuer des changements en masse, tout en proposant la visualisation des changements avant que ces derniers ne soient appliqués.

Toutes les manipulations sont à effectuer avec Search Regex, en activant la case regex. Je me sers du signe dièse (#) comme délimiteur pour les expressions régulières.

Remplacer le vieux code d’intégration flash de YouTube

Avec Search Regex, on cherche :

<object [^>]*><param name="movie" value="https:\/\/www\.youtube\.com\/v\/([^"&?]+)">.*?<\/object>Code language: HTML, XML (xml)

Et on remplace par :

https://www.youtube.com/watch?v=$1Code language: JavaScript (javascript)

Bash : réparer les tables MySQL en cas de crash photo

BASH : renommer une liste de fichiers en ajoutant un suffixe aléatoire

31 March 202201 novembre 2013 by Matt Biscay · Lecture: 1 minute

J’ai récemment eu à renommer toute une floppée de fichiers PDF avec un suffixe aléatoire. BASH peut très bien faire l’affaire!

Ajouter un suffixe aléatoire à une liste de fichiers :

for f in *.pdf; do cp "$f" "${f%.*}-$RANDOM$RANDOM.${f##*.}"; doneCode language: JavaScript (javascript)

Vite fait, bien fait.

WordPress : retourner et exécuter un shortcode dans une fonction

8 April 202226 août 2013 by Matt Biscay · Lecture: 2 minutes

Pour les besoins du Centre de Kriya Yoga France, j’ai écrit une fonction qui doit afficher une vidéo automatiquement.

Or je voulais juste renvoyer un shortcode vidéo qui prendrait en charge toute la partie code du lecteur vidéo.

On ne peut pas juste renvoyer la valeur, il faut utiliser la fonction do_shortcode() de WordPress.

Cas 1 : exécuter un shortcode dans une fonction

La solution réside dans l’utilisation de la fonction do_shortcode(). Voici un petit exemple :

<?php
/*
|-----------------------------------------------------------------------
| Sky Show Video by Matt - www.skyminds.net
|-----------------------------------------------------------------------
|
| Returns shortcode to be executed in WordPress.
|
*/
function sky_show_video($content) {
   // do stuff
   // return video
   return do_shortcode("[video src='$vid_url' width='600' height='480' type='video/mp4' preload='true']");
}Code language: HTML, XML (xml)

Cet exemple exécute le shortcode [video].