momh

SPIPer avec DDEV (bis)

Brice Boucard — 2024-05-21T04:37:58Z

Si nous parvenions dans notre premier article à obtenir un environnement de développement sous SPIP rapidement grâce à DDEV, la méthode proposée aboutit à rendre problématique l'usage de PHP en CLI. La solution, pour ce qui est de SPIP en tout cas : ne plus utiliser le paramètre --docroot.

Installer une version 4.3

On commence par cloner le dépôt de SPIP, puis l'on configure notre environnement DDEV avant d'utiliser la commande checkout pour basculer sur la branche qui nous intéresse :

git clone https://git.spip.net/spip/spip.git spip43 cd spip43 ddev config --project-type=php --php-version=7.4 ddev checkout ddev checkout spip -b4.3 public

Si vous êtes confronté au message suivant :

fatal: detected dubious ownership in repository at '/var/www/html' To add an exception for this directory, call: git config --global --add safe.directory /var/www/html

Il suffit d'exécuter la commande indiquée, au sein du container bien évidemment :

ddev exec git config --global --add safe.directory /var/www/html

Installer la branche `master`

git clone https://git.spip.net/spip/spip.git master cd master ddev config --project-type=php --php-version=8.2 ddev composer install ddev composer local mode-dev rm -rf web/plugins-dist ddev composer local install

SPIPer avec DDEV

Brice Boucard — 2024-03-21T12:26:32Z

DDEV est, pour le dire vite, une surcouche à Docker permettant de mettre en place extrêmement rapidement des environnements de développement Web. Nous allons tenter de décrire ici comment nous l'utilisons pour nos développements avec SPIP.

Je ne vais pas ici décrire l'installation de DDEV, sa documentation se suffisant à elle-même plus que largement.

SPIP-Cli & checkout

Ces outils en ligne de commande que sont checkout (méthode unifiée d'installation et de mise à jour) et SPIP-Cli (installation, mise à jour, manipulation...) m'apparaissent comme indispensables ; un grand merci à nicod donc pour en proposer une intégration à DDEV.

Personnellement, j'ai commencé par cloner le dépôt dans un répertoire ~/sources avant de créer un lien (non symbolique) pour chacun des deux scripts vers le répertoire ~/.ddev/commands/web/ :

Ainsi, pour chacun de nos projets, ces deux commandes seront accessibles une fois le conteneur web lancé (seul bémol, il conviendra de réinstaller les utilitaires à chaque redémarrage, mais les scripts proposés par nicod s'en charge très bien).

Installer SPIP dans un environnement DDEV

Avant d'installer SPIP, il convient de préparer notre environnement de développement : création d'un répertoire, configuration du projet et initialisation :

mkdir mon_site && cd mon_site ddev config --project-type=php --webserver-type=apache-fpm --docroot=web --composer-root=web ddev start

Une fois cela fait, on peut procéder à l'installation de SPIP (sur sa branche master ici) avec SPIP-Cli (il convient de lancer la commande spip une première fois pour procéder à son installation) :

ddev spip ddev spip dl git -b master -d web

Là, on tombe sur ce message, auquel il faut répondre par l'affirmative :

Le répertoire existant web a été renommé en web__OLD. Souhaitez vous le supprimer ? (yes/no) [yes] :

Puis, on peut poursuivre l'installation, comme indiqué dans le README de SPIP, en prenant bien soin de faire précéder certaines commandes de ddev :

ddev composer install ddev composer local mode-dev rm -rf web/plugins-dist ddev composer local install

Enfin, il suffit de procéder à l'installation de SPIP, en utilisant les informations de connexion à la base de données retournées par la commande describe :

ddev describe

SPIP-Cli sur serveur mutualisé

Brice Boucard — 2022-04-27T16:24:45Z

SPIP-Cli est « une interface en ligne de commande pour SPIP ». Sa documentation nous guide parfaitement pour une installation avec un accès root ou sudo. Sur un hébergement mutualisé, avec a minima un accès SSH relativement ouvert, il faut adapter la procédure.

Une fois connecté via SSH à votre serveur, il convient tout d'abord de créer un répertoire ~/.local/bin :

mkdir -p ~/.local/bin

Ensuite, dans ce répertoire, on clone le dépôt de SPIP-Cli et on lance l'installation avec composer (chez alwaysdata, il faut utiliser composer2) :

cd ~/.local/bin/ git clone https://git.spip.net/spip-contrib-outils/spip-cli.git cd spip-cli/ composer install

Ensuite, ne nous reste plus qu'à créer un lien symbolique afin de faciliter l'usage de la commande spip :

ln -s /home/$USER/.local/bin/spip-cli/bin/spip /home/$USER/.local/bin/

Pour ce qui est de l'autocomplétion, il suffit d'éditer le fichier ~/.profile ainsi :

source ~/.local/bin/spip-cli/bin/spip_console_autocomplete

Une fois Bash relancé, la commande devrait être disponible et l'automplétion de ses options fonctionner.

Installer « globalement » PHP_CodeSniffer

Brice Boucard — 2022-04-26T20:05:01Z

PHP_CodeSniffer est un outil de contrôle de votre code PHP afin d'en garantir la conformité au standard de votre choix.
Plutôt que de l'installer dans chacun de vos projets, il est possible de l'installer « globalement » et de le configurer pour permettre d'autres standards que ceux fournis de base, ceux de SPIP par exemple.

Préalables

Si vous n'avez pas de répertoire ~/bin/ dans votre /home, on commence par le créer :

mkdir ~/bin

Puis, on installe composer de façon « globale » dans ce répertoire ~/bin qui se trouve dans notre $PATH ; on commence par suivre les instructions de la documentation de Composer mais la troisième commande devient :

php composer-setup.php --install-dir=~/bin --filename=composer

Installation de PHP_CodeSniffer

Une fois cela fait, on peut installer « globalement » PHP_CodeSniffer :

composer global require squizlabs/php_codesniffer composer global require spip/coding-standards

Par défaut, chez moi, on retrouve les packages dans ~/.config/composer/vendor/ et les exécutables dans ~/.config/composer/vendor/bin/

Ne nous reste plus qu'à créer des liens symboliques dans notre ~/bin/ des exécutables de PHP_CodeSniffer :

ln -s ~/.config/composer/vendor/bin/phpcs ~/bin ln -s ~/.config/composer/vendor/bin/phpcbf ~/bin

On relance Bash et on peut alors déclarer le répertoire des standards SPIP à PHP_CodeSniffer :

phpcs --config-set installed_paths /home/$USER/.config/composer/vendor/spip/coding-standards/src/,/home/$USER/.config/composer/vendor/phpcompatibility/php-compatibility

Vous pouvez vérifier que la configuration est bien correcte en éditant le fichier ~/.config/composer/vendor/squizlabs/php_codesniffer/CodeSniffer.conf.

Utilisation

Il est alors possible de lancer les commandes phpcs et phpcbf où que vous soyez.
Il peut alors être intéressant de profiter d'une configuration locale, propre à votre projet : cela se passe dans le fichier phpcs.xml placé à la racine de votre projet :

  ./ **/*.js **/*.css **/*.scss node_modules/* vendor/*

Pour découvrir plus précisément les possibilités de configuration, je vous laisse consulter le fichier phpcs.xml.dist de PHP_CodeSniffer.

Faire cohabiter plusieurs versions de PHP sous Debian

Brice Boucard — 2022-03-12T17:58:39Z

Surtout par curiosité, je me suis penché sur la possibilité de faire cohabiter plusieurs versions de PHP sur ma Debian Bullseye et surtout sur la façon de basculer aisément de l'une à l'autre.

Installation

Pour installer plusieurs versions de PHP conjointement, il faut ajouter le dépôt Sury :

sudo apt update sudo apt -y install apt-transport-https lsb-release ca-certificates curl sudo curl -sSLo /usr/share/keyrings/deb.sury.org-php.gpg https://packages.sury.org/php/apt.gpg sudo sh -c 'echo "deb [signed-by=/usr/share/keyrings/deb.sury.org-php.gpg] https://packages.sury.org/php/ $(lsb_release -sc) main" > /etc/apt/sources.list.d/php.list' sudo apt update

De là, il est possible d'installer diverses versions de PHP et de ses modules ; ainsi, sous Bullseye, je me vois proposer les versions 5.6, 7.0, 7.1, 7.2, 7.3, 7.4, 8.0 et 8.1 :

apt search php | grep "php[0-9]\.[0-9]/" [...] php5.6/bullseye 5.6.40-57+0~20211119.60+debian11~1.gbp8a9bd1 all php7.0/bullseye 7.0.33-57+0~20211119.61+debian11~1.gbp5d8ba5 all php7.1/bullseye 7.1.33-44+0~20211119.61+debian11~1.gbp448fbe all php7.2/bullseye 7.2.34-28+0~20211119.67+debian11~1.gbpf24e81 all php7.3/bullseye 7.3.33-1+0~20211119.91+debian11~1.gbp618351 all php7.4/stable-security,now 7.4.28-1+deb11u1 all [installé, pouvant être supprimé automatiquement] php8.0/bullseye 8.0.16-1+0~20220221.30+debian11~1.gbp8b91a5 all php8.1/bullseye,now 8.1.3-1+0~20220223.13+debian11~1.gbp7757b9 all [installé, automatique]

Changer facilement de version de PHP

Afin de faciliter le basculement d'une version à une autre, j'ai compilé différentes sources pour finalement produire un petit script, très certainement imparfait, qui permet de choisir de manière interactive parmi les versions de PHP installées celle à utiliser.

touch ~/bin/php-switch chmod +x ~/bin/php-switch nano ~/bin/php-switch

#!/bin/bash # based on https://askubuntu.com/a/883140 # and on https://stackoverflow.com/a/68905711 # Déterminer la version de PHP actuellement utilisée par Apache VAR=$(ls /etc/apache2/mods-enabled/php*) IFS=' ' read -r -a array <<< "$VAR" array[0]=${array[0]#*php} array[0]=${array[0]%.conf} OLDVERSION=${array[0]} echo "La version de PHP actuellement utilisée est la" $OLDVERSION. echo "Liste des versions de PHP disponibles :" # Lister les versions de PHP installées RAWPOSSIBILITIES=$(update-alternatives --list php | sed 's/.*\(...\)/\1/') POSSIBILITIES=($RAWPOSSIBILITIES) # Demander la version de PHP à activer PS3='Choisissez la version de PHP à activer : ' select opt in "${POSSIBILITIES[@]}" "Annuler"; do case "$REPLY" in $((${#POSSIBILITIES[@]}+1))) echo "Salut!"; exit;; esac [ $REPLY -gt $((${#POSSIBILITIES[@]}+1)) -o $REPLY -lt 1 ] && echo "Choix invalide" || break done echo "Activer la version ${POSSIBILITIES[(($REPLY-1))]} ? Entrée pour valider, Ctrl-C pour annuler." read x # On reconfigure Apache sudo a2dismod php${OLDVERSION} sudo a2enmod php${POSSIBILITIES[(($REPLY-1))]} # On met à jour la version par défaut sudo update-alternatives --set php /usr/bin/php${POSSIBILITIES[(($REPLY-1))]} sudo update-alternatives --set phar /usr/bin/phar${POSSIBILITIES[(($REPLY-1))]} sudo update-alternatives --set phar.phar /usr/bin/phar.phar${POSSIBILITIES[(($REPLY-1))]} # On relance le service Apache sudo systemctl restart apache2

Node.js et autocomplétion avec Tmux

Brice Boucard — 2022-02-22T21:12:10Z

Si je bénéficiais parfaitement de l'autocomplétion des commandes fournies par node.js dans mon terminal classique, celle-ci ne fonctionnait plus sous Tmux : une sombre histoire de différence entre interactive shell et login shell.

Mon .bashrc contenait pourtant bien le code nécessaire mais, au-delà de l'autocomplétion de node.js, il ne semblait pas du tout être lu, puisque même mon invite de commande ne correspondait pas à celle configurée...

Cependant, mes recherches se focalisaient sur le problème de l'autocomplétion de node.js et ne me fournissaient guère de solution... C'est en changeant de perspective que je suis tombé sur le sujet « New tmux sessions do not source bashrc file » sur Stack Exchange et surtout sur la réponse très complète de Simba qui présente donc la différence entre les interactiven non-login shells — qui sourcent le fichier .bashrc — et les login shells — qui sourcent quant à eux les fichiers .profile et .bash_profile notamment.

Deux solutions sont alors possibles :

soit on « source » le fichier .bashrc depuis l'un de ces deux derniers fichiers — cette solution étant celle que recommande Simba justement :
```
# if running bash if [ -n "$BASH_VERSION" ]; then # include .bashrc if it exists if [ -f "$HOME/.bashrc" ]; then . "$HOME/.bashrc" fi fi 
```
soit on « intègre » l'autocomplétion de node.js dans le fichier .profile avec la simple commande :
```
npm completion >> ~/.profile 
```

Tailwind CSS, PostCSS et SCSS

Brice Boucard — 2021-12-22T20:39:00Z

À l'occasion de la « collection automne 2021 » de momh.fr, je me suis essayé à Tailwind CSS, le framework CSS qui renverse l'habituel mantra du CSS des classes sémantiques. Il m'a fallu un peu de temps avant de trouver une configuration satisfaisante, découvrant à cette occasion le postprocesseur CSS PostCSS.

Il faut commencer par installer nodejs et son gestionnaire de paquets npm ; plutôt que de passer par les dépôts Debian, on utilise les paquets proposés par NodeSource comme recommandé par la documentation de Node.js. Ainsi :

curl -fsSL https://deb.nodesource.com/setup_17.x | sudo -E bash - sudo apt-get install -y nodejs npm

on peut commencer par initier un projet avec la commande npm init.

Ensuite, il faut installer les paquets nécessaires :

npm install -D tailwindcss postcss postcss-cli postcss-easy-import autoprefixer cssnano watch

On génère ensuite automatiquement les fichiers de configuration minimalistes de PostCSS et de Tailwind CSS avec la commande suivante :

npx tailwindcss init -p

On peut ensuite éditer les fichiers tailwind.config.js et postcss.config.js, étant donné une arborescence comme celle qui suit :

|_ content |_ truc.html |_ machin.html |_ css |_ src |_ _base.scss |_ _cards.scss |_ tailwind.scss |_ tailwind.css |_ inclure |_ inclusion.html |_ script.js |_ index.html

On commence par peaufiner la configuration de PostCSS :

nano postcss.config.js

module.exports = { plugins: { 'postcss-easy-import': { path: ['./css/src'], prefix: '_', extensions: ['.css', '.scss'] }, 'tailwindcss/nesting': {}, tailwindcss: {}, autoprefixer: {}, ...(process.env.NODE_ENV === 'production' ? { cssnano: {} } : {}) } }

Puis on s'attelle à la configuration de Tailwind CSS :

nano tailwind.config.js

const defaultTheme = require('tailwindcss/defaultTheme') module.exports = { content: [ "./*.{html,js}", "./content/*.{html,js}", "./inclure/*.{html,js}", ], theme: { screens: { 'xs': '480px', ...defaultTheme.screens, }, extend: { fontFamily: { 'cursive': ['Life Savers', 'cursive'], }, }, }, plugins: [], }

On peut ensuite modifier la section « script » du fichier package.json avec les commandes permettant de compiler nos styles grâce à la commande npm run-script XXX :

 "scripts": { "styles:dev": "postcss css/src/tailwind.scss -o css/tailwind.css", "styles:prod": "NODE_ENV=production postcss css/src/tailwind.scss -o css/tailwind.css", "styles:watch": "watch 'npm run dev:scss' ../squelettes/", },

Prism, une aide à l'édition pour SPIP

Brice Boucard — 2021-05-23T12:30:00Z

Prism est un plugin pour SPIP visant à faciliter l'édition des contenus en ajoutant la coloration syntaxique aux raccourcis typographiques.

S'appuyant sur les librairies développées par Lea Verou PrismJS et Prism Live, le plugin Prism, disponible sur git.spip.net, propose donc une coloration syntaxique des raccourcis SPIP sur tous les textarea` (les champs longs de saisie) dotés d'une barre d'édition, c'est-à-dire où le Porte-plume est chargé (par défaut ou grâce au plugin Porte -plume partout).



  


Il convient de noter que Prism propose la coloration syntaxique et des raccourcis typographiques propres à SPIP et la syntaxe Markdown, lorsque le plugin Markdown est actif et configuré pour appliquer la syntaxe Markdown par défaut.



mycli : autocomplétion et coloration syntaxique pour MySQL
Brice Boucard — 2021-04-20T05:27:00Z
Qu'il est laborieux de saisir des commandes MySQL dans son terminal, sans coloration syntaxique et surtout sans autocomplétion... La solution ? mycli !
		Écrit en Python, mycli est une interface en ligne de commandes 

pour MySQL ou MariaDB notamment qui facilite grandement la saisie grâce à la coloration syntaxique et grâce surtout à l'autocomplétion.

 
 Démonstration de mycli
 https://github.com/dbcli/mycli



Pour l'installer, rien de plus simple sous Debian :
sudo apt install mycli 
Il est aussi possible d'utiliser l'utilitaire Python pip :
sudo pip install -U mycli 
Pour le lancer, il suffit de lancer la commande mycli avec pour argument une base de donnée, un utilisateur... Exemples :
mycli my_database mycli -u user mycli -u user -h host my_database 


SCSS & Gulp
Brice Boucard — 2021-03-31T05:45:00Z
Je me suis mis à utiliser le préprocesseur CSS Sass avec sa syntaxe SCSS il y a quelques années, le mobilisant de temps en temps, au gré des différentes refontes de ce site. Plus récemment, j'ai cherché à automatiser un certain nombre de tâches répétitives (compilation, minification, autoprefixer...) avec Gulp.
		Ainsi, jusqu'à récemment, je faisais en sorte que mon éditeur de code (jusqu'alors Sublime Text avec le plugin Autoprefixer), ajoute les propriétés propre à chaque navigateur à l'enregistrement du fichier sur lequel je travaillais. Je n'avais ensuite plus qu'à lancer la compilation de mon SCSS avec la commande classique sass :
sass -s compressed style.scss style.css 
Mais, travaillant à un projet qui nécessitait aussi de manipuler du JavaScript (de le minifier essentiellement), j'ai cherché à rationaliser et automatiser tout un tas de petites actions avec — rien de bien surprenant — le bien connu Gulp.
Voici donc le gulpfile.js que je m'étais concocté pour compiler mon SCSS, minifier le JavaScript et surveiller la modification des fichiers pour automatiser ces tâches.
const gulp = require('gulp'), sass = require('gulp-sass'), cleancss = require('gulp-clean-css'), rename = require('gulp-rename'), autoprefixer = require('gulp-autoprefixer'), sourcemaps = require('gulp-sourcemaps'), concat = require('gulp-concat'), minify = require('gulp-minify'); var sources = { scss: ['css/src/**/*.s*ss'], scss_main: ['css/src/main.scss'], js: ['js/src/**/*.js'] }; var dests = { css: 'css/', js: 'js/' } function watch() { gulp.watch(sources.scss, styles); gulp.watch(sources.js, scripts); } function styles() { return gulp.src(sources.scss_main) .pipe(sourcemaps.init()) .pipe(sass({ outputStyle: 'compact', precision: 10 }).on('error', sass.logError) ) .pipe(autoprefixer()) .pipe(cleancss()) .pipe(rename({ suffix: '.min' })) .pipe(sourcemaps.write('')) .pipe(gulp.dest(dests.css)); } function scripts () { return gulp.src(sources.js) .pipe(concat('scripts.js')) .pipe(gulp.dest(dests.js)) .pipe(minify( {ext:{ min:'.min.js' }} )) .pipe(gulp.dest(dests.js)); } exports.watch = watch; exports.styles = styles; exports.scripts = scripts; exports.default = styles; 
Avant de s'en servir, il faut bien évidemment installer les modules Node.js qui vont bien :
npm install --save-dev gulp gulp-autoprefixer gulp-clean-css gulp-concat gulp-minify gulp-rename gulp-sass gulp-sourcemaps 
Il suffit ensuite de lancer la commande gulp suivie de la fonction souhaitée.