mon titre de page

Alsacreations.com - Actualités

Adapter et migrer votre ancien site PHP vers PHP8 ()
Vous savez déjà sûrement que PHP8 est la version actuelle de PHP, et que la branche 7 est officiellement en fin de vie (end of life). La version 8.0 précisément ne dispose plus que de correctifs de sécurité, il faut en réalité viser PHP 8.1 et 8.2, respectivement maintenus jusqu'en 2024 et 2025. De nombreux sites sont encore hébergés en PHP 7, voire dans de précédentes versions, ce qui peut conduire à des incompatibilités à terme, de plus en plus difficiles à maintenir, et des failles de sécurité. Les évolutions vers PHP 8.1 ou 8.2 (et ainsi de suite) seront nécessairement plus évidentes en partant de PHP8. Un saut majeur de la 7 à la 8 amène des changements plus importants. Il n'est pas possible de prévoir et appliquer une seule tactique : cela va dépendre de votre base de code actuelle, des dépendances utilisées, du CMS ou framework s'il y en a un, et surtout du code maison ajouté. Par quoi débuter ? En premier lieu, la documentation officielle est toujours un bon point de départ, avec les guides de migration d'une version à l'autre. Citons dans le cas présent Migration de PHP 7.4.x vers PHP 8.0.x, ainsi que le fichier UPGRADING sur le repo GitHub de PHP. Le but ici est de pouvoir estimer les grandes phases, la faisabilité : savoir si en l'état votre projet est concerné et quel sera le temps nécessaire d'adaptation. S'agit-il de quelques correctifs mineurs et syntaxiques, ou d'une obligation de revoir l'architecture globale ? Quels bugs peuvent surgir ? PHP devenant plus "strict" au fur et à mesure des versions, les premières erreurs ou les premiers avertissements qui peuvent survenir à l'exécution vont concerner la syntaxe, l'appel de fonctions, le typage de variables ou l'usage de valeurs indéfinies, les mots clés, notamment : PHP8 a ajouté des erreurs de type Uncaught Error qui auparavant provoquaient des avertissements ou des erreurs fatales : par exemple, en appelant une méthode sur une valeur null. Les erreurs TypeError sont plus strictes : en appelant une fonction avec des arguments de type incorrect, cela peut entraîner une erreur de cette sorte, par exemple pour les fonctions de manipulation de texte qui s'attendent à recevoir en paramètre un string qui aurait en réalité pour valeur null. Dans ce cas, un patch rapide serait d'utiliser l'opérateur Null coalescent : $variable ?? '' Certaines opérations d'union, de coalescence et de comparaison ont été modifiées pour être plus strictes. Des mots réservés ont été ajoutés https://www.php.net/manual/fr/reserved.other-reserved-words.php Quels sont les outils permettant d'aider à une migration ? Tout d'abord, ne changez pas tout d'un seul coup en production, chez votre hébergeur même si la plupart permettent de changer la version à la volée, sans possibilité de retour en arrière. Il y a un fort risque que cela ne fonctionne pas du premier coup. Testez en local pour vous assurer que tout fonctionne au préalable (par exemple à l'aide de Docker, voir ci-après). Pour faire une analyse locale du code et relever les passages qui pourraient poser problème, un certain nombre d'outils existent. Si votre machine locale sert au développement, connaître la version de PHP installée avec php --version est une première étape (sauf si vous vous servez de Docker évidemment). En général il vous faudra git et aussi composer installable dans la plupart des systèmes (sur Linux ou équivalent) via curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer. phan phan est un analyseur statique. Il faut l'installer, le configurer en définissant la version cible à atteindre, le dossier à examiner, les plugins à activer. composer require phan/phan Créer un fichier de configuration dans le dossier .phan/config.php en suivant le modèle : https://github.com/phan/phan/wiki/Getting-Started#creating-a-config-file et notamment en modifiant la ligne 'target_php_version' => '8.1', avec la bonne version. Puis lancer ./vendor/bin/phan. Il est possible à ce stade qu'il vous faille également installer pecl install ast et ajouter extension=ast.so à php.ini. L'analyse se lance et produit moult résultats en vrac analyze ████████████████████████████████████████████████████████████ 100.0% 204MB/205MB Pour les rediriger vers un fichier lisible ajoutez >phan-log.txt à l'instruction précédente, puis ouvrez-le tranquillement avec votre éditeur de code. phpstan phpstan vérifie la syntaxe, à la recherche d'erreurs, sans exécuter votre code. La documentation de phpstan est bien conçue. composer require --dev phpstan/phpstan # Lancer l'analyse où www est votre dossier de code source vendor/bin/phpstan analyse www --memory-limit 1024M L'analyse se déroule... 240/452 [▓▓▓▓▓▓▓▓▓▓▓▓▓▓░░░░░░░░░░░░░░] 53% Et dévoile les résultats fichier par fichier. ------ -------------------------------------------------------------------------------- Line app/helpers/string.php ------ -------------------------------------------------------------------------------- 207 Function random_string() should return string but return statement is missing. ------ -------------------------------------------------------------------------------- Pour les rediriger vers un fichier lisible ajoutez >phpstan-log.txt à l'instruction précédente, puis ouvrez-le tranquillement avec votre éditeur de code. PHPCompatibility PHPCompatibility est un ensemble de compléments pour PHP CodeSniffer qui vérifie la compatibilité entre plusieurs versions de PHP, et qui fonctionne à partir de PHP 5.4 composer require squizlabs/php_codesniffer --dev composer require phpcompatibility/php-compatibility --dev # Lancer l'analyse où "www" est le nom du dossier contenant le code source vendor/bin/phpcs -p ./www --extensions=php --standard=vendor/phpcompatibility/php-compatibility/PHPCompatibility --runtime-set testVersion 8.2 L'analyse se lancera alors avec affichage de la progression... .............................................WW............. 60 / 452 (13%) ......W......................W...........W.................. 120 / 452 (27%) ............................................................ 180 / 452 (40%) ............................................................ 240 / 452 (53%) ......EW....W..W.W.E....E...W........EEEEE.E.E.EE........... 300 / 452 (66%) ............E....................E.E........................ 360 / 452 (80%) .............................WEE..W.........E....W......W... 420 / 452 (93%) W............................... 452 / 452 (100%) Et un inventaire des fichiers et des erreurs ou avertissements avec explications... FILE: /var/www/unfichier.php ----------------------------------------------------------------------------------------------------------- FOUND 0 ERRORS AND 1 WARNING AFFECTING 1 LINE ----------------------------------------------------------------------------------------------------------- 108 | WARNING | Function create_function() is deprecated since PHP 7.2; Use an anonymous function instead ----------------------------------------------------------------------------------------------------------- Pour rediriger l'analyse vers un fichier lisible plutôt que de remplir tout le terminal, ajoutez >phpcs-log.txt puis ouvrez-le tranquillement avec votre éditeur de code. Si vous avez un grand nombre de fichiers à analyser, vous devrez peut être augmenter le paramètre memory_limit de php.ini (utilisez la commande php --ini pour savoir où se trouve le fichier utilisé), ou ajouter à la commande -d memory_limit=1024M. Docker Docker n'est pas en soi dédié à PHP, mais permettra de tester très facilement si votre projet, votre site tourne bien avec une quelconque version de PHP. Si votre projet fonctionne avec l'image PHP7.x, alors vous pouvez de manière très souple changer la version dans le fichier Dockerfile, par exemple FROM php:7.4-apache vers FROM php:8.2-apache , relancer le conteneur et procéder pas à pas. Et WordPress ? La compatibilité de WordPress avec les versions les plus fraîches de PHP n'est pas toujours évidente. Dans notre expérience nous avons plusieurs fois constaté des erreurs, avertissements en essayant d'utiliser les versions les plus récentes de PHP, avec la branche actuelle de WordPress. Cependant la situation s'améliore constamment et les difficultés proviennent plus souvent des extensions (alimentées par la communauté, mais pas toujours maintenues aussi activement qu'il le faudrait). WordPress 6.2 fonctionne bien avec PHP 8.1 Les versions 5.6 à 6.2 de WordPress fonctionnent toujours bien avec PHP 5.6 à PHP 7.4, pour des raisons de rétro-compatibilité. Publié par Alsacreations.com
>> Lire la suite

Les Container Queries en CSS ()
CSS Container Queries (ou "requêtes de conteneur" ?) permettent d'appliquer des styles à un élément en fonction des propriétés de son conteneur, généralement sa taille. Il s'agit d'un mécanisme complémentaire aux historiques Media Queries qui, eux, détectent les caractéristiques de l'ensemble de la fenêtre ou de l'écran du périphérique. Usage et intérêt Les Media Queries représentent la première réponse proposée par le W3C pour s'adapter à tous les nouveaux "device intelligents", friands de Web, qui débarquent autour des années 2008-2010 (l'iPhone date de 2007) et qui préparent à la naissance du Responsive Webdesign. Pour la petite histoire, les premiers brouillons de spécifications des Media Queries datent de…2001 mais le véritable essor de cette fonctionnalité attendra 2010 avec les premières implémentations des navigateurs. Les Container Queries introduisent un nouveau palier dans le Responsive Webdesign en apportant une souplesse jusqu'alors inatteignable : tandis que les Media Queries ne détectent que l'ensemble du périphérique, les Container Queries permettent d'interroger le parent (ou ancêtre) d'un composant, bien plus proche et pertinent. À l'heure où l'intégration se conçoit de plus en plus de manière atomique, en isolant chacun des composants, il devient de plus en plus cohérent de styliser ces composants en vertu de leur environnement direct plutôt que de raisonner à l'échelle de la fenêtre entière du navigateur. Les Container Queries sont parfaitement conçues dans cette optique. L'extrait ci-dessous montre que la syntaxe entre les Media Queries et les Container Queries est très similaire : /* Media Query (on détecte la largeur de la fenêtre) */ @media (min-width: 640px) { /* ici les styles appliqués */ } /* Container Query (on détecte la largeur du conteneur) */ @container (min-width: 640px) { /* ici les styles appliqués */ } Support navigateurs Poursuivons sur les bonnes nouvelles : les propriétés de Container Queries sont supportées par une large majorité des navigateurs récents, comme en témoigne la ressource CanIUse, comme en témoigne la capture suivante. Elles sont donc déjà utilisables en production, moyennant quelques ajustements sur certains périphériques mobiles par exemple. Container Query : en pratique Appliquer des styles selon uneé Container Query se déroule en deux temps : Nous devons identifier qui est le conteneur à interroger en créant un "contexte de confinement" Nous pouvons tester les conditions via @container (syntaxe quasiment identique à @media) Déclarer qui est le conteneur à interroger Pour identifier le conteneur que nous testerons, il nous faut créer un contexte de confinement (rassurez-vous, rien à voir avec la douloureuse période de l'an 2020) à l'aide de la propriété container-type dont les valeurs possibles sont inline-size, size, ou normal : inline-size : la condition porte sur la dimension inline (synonyme de largeur dans la majeure partie des cas) size : la condition porte sur les dimensions inline et block en même temps (horizontale et verticale) normal : la condition ne peut pas porter sur la dimension de l'élément (mais il est toutefois possible de cibler ses styles) Prenons comme exemple un composant .card dont les styles dépendent de la largeur de son parent .card-container : <div class="card-container"> <article class="card"> ici le contenu d'une card </article> </div> /* On crée un contexte de confinement sur .card-container */ /* Et on testera sa largeur */ .card-container { container-type: inline-size; } Note : Le conteneur n'est pas forcément le parent direct, il peut s'agir de n'importe quel ancêtre de l'élément à modifier. Affichage des différents état d'une card selon la taille de son conteneur Démo : une card responsive Interroger le conteneur via @container À présent que notre conteneur est identifié, nous pouvons l'interroger afin de connaître ses états (taille, ratio, orientation) et appliquer des styles sur ses descendants : aspect-ratio : il s'agit du ratio entre la largeur et la hauteur du conteneur (ex. "16/9") block-size : il s'agit de la dimension "block" (généralement synonyme de hauteur, mais dépend de l'orientation du conteneur) height : désigne la hauteur du conteneur, quelle que soit son orientation inline-size : il s'agit de la dimension "inline" (généralement synonyme de largeur, mais dépend de l'orientation du conteneur) orientation : c'est l'orientation du conteneur (valeurs landscape ou portrait) width : désigne la largeur du conteneur, quelle que soit son orientation Exemple : /* je teste si le conteneur a une largeur supérieure ou égale à 640px */ @container (min-width: 640px) { .card { ... } } Affichage des différents état d'un bouton selon la taille de son conteneur Démo : un bouton responsive Nommer le conteneur Les spécifications prévoient de conférer un nom personnalisé au conteneur à interroger. Cette possibilité offre la perspective très intéressante de pouvoir cibler un ancêtre qui ne serait pas forcément le premier rencontré dans la branche. Ce nom est donné grâce à la propriété container-name. On pourra ensuite cibler ce conteneur spécifique au sein de la règle @container : /* On crée un contexte de confinement sur .card-container */ /* Et on le nomme "product" */ .card-container { container-type: inline-size; container-name: product; } /* Je teste si "product" a une largeur supérieure ou égale à 640px */ @container product (min-width: 640px) { .card { ... } } Syntaxe range et and / or Une évolution récente (mais déjà très bien supportée) des Media Queries autorise une syntaxe dite "range syntax" bien plus intuitive pour tout le monde. Cette "range syntax" est également adoptée au sein des Container Queries et facilite grandement la lecture : /* version "à l'ancienne" */ @container (min-width: 640px) { .card { ... } } /* version "moderne" */ @container (width >= 640px) { .card { ... } } Les spécifications offrent également la possibilité d'enrichir et de combiner les requêtes via les mots-clés and, or et not : @container (width > 400px) and (height > 400px) {...} @container (width > 400px) or (height > 400px) {...} @container not (width < 400px) {...} Nouvelles unités responsive De nouvelles unités de mesure CSS ont été ajoutées lorsque des styles sont appliqués à l'aide de Container Queries. Ces unités permettent de définir les dimensions des composants en fonction de l'espace disponible au sein de leur conteneur : cqw : 1% de la largeur du conteneur cqh : 1% de la hauteur du conteneur cqi : 1% de la dimension inline du conteneur cqb : 1% de la dimension block du conteneur cqmin : la plus petite valeur entre cqi et cqb cqmax : la plus grande valeur entre cqi et cqb Dans l'exemple qui suit, les styles suivants seront appliqués si le conteneur a une largeur entre 320px et 640px : une grille de deux colonnes est générée sur .card, la première colonne a une largeur de 20% du conteneur et la seconde occupe l'espace restant. La taille de police de .card-title est relative à la largeur du conteneur avec un valeur minimale de 1em : @container (320px <= width <= 640px) { .card { display: grid; grid-template-columns: 20cqw 1fr; } .card-title { font-size: max(1em, 10cqw); } } Aller plus loin : style queries Bien que la peinture des Container Queries soit encore toute fraîche, une évolution de ce mécanisme est déjà en préparation : les Style Container Queries ! Cette évolution est encore expérimentale et son support très partiel, mais son principe est déjà révolutionnaire : il sera possible de cibler un conteneur selon la valeur calculée de l'une de ses propriétés, voire d'une propriété personnalisée (custom property) en CSS : @container style(position: relative) { .card { color: hotpink; } } @container style(--theme: dark) { .card { color: hotpink; } } Découvrez-en plus sur ce sujet palpitant grâce à l'article de Ahmad Shadeed Ressources Pour finir sur ce très vaste sujet, voici quelques liens pour aller encore plus loin dans votre veille technologique : Documentation de MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries Awesome Container Queries : https://github.com/sturobson/Awesome-Container-Queries CSS Container Queries guide : https://blog.logrocket.com/css-container-queries-guide/ Container style queries : https://ishadeed.com/article/css-container-style-queries/ Démo Cactus (Una Kravets) : https://codepen.io/una/full/mdOgyVL Démo Card : https://codepen.io/alsacreations/pen/dyQxERW Démo Bouton : https://codepen.io/alsacreations/pen/gOQVJRe Publié par Alsacreations.com
>> Lire la suite