// ressources

Librairie de codes

Extraits de code, correctifs et mémos techniques accumulés depuis 2013 : HTML, CSS, jQuery, PHP, Smarty, Drupal, PrestaShop et administration serveur.

CSS

• Bug Google Chrome sur les positions fixed

  Un élément en position fixed qui scintille ou disparaît sous Chrome se stabilise avec backface-visibility et translateZ, qui basculent le rendu sur le GPU.

• Print CSS de base

  Une feuille print de base : masquer les adresses affichées après les liens, neutraliser les fonds, et éviter les coupures de page au mauvais endroit.

• Bug Iphone : Menu position fixed + Scroll

  Un menu en position fixed qui saute pendant le défilement sous iOS se stabilise avec translate3d et -webkit-overflow-scrolling: touch.

• Les formes en CSS3

  Triangles, flèches et autres formes obtenues uniquement avec les bordures CSS, sans image ni SVG. Le principe d’abord, le code ensuite.

• Créer des "div" avec une hauteur identique

  Égaliser la hauteur de plusieurs colonnes sans JavaScript : la méthode historique avec display table-cell, puis la version Flexbox.

• Créer un ancre avec un header fixe

  Une ancre qui passe sous un en-tête fixe cache son titre. La structure HTML et le CSS qui décalent la cible pour que le titre reste visible.

• Transitions CSS 3

  Animer un changement d’état en CSS3 avec transition : quelle propriété animer, sur quelle durée et avec quelle fonction de temporisation.

• Hover et delay en CSS

  Ajouter un délai avant l’apparition d’un contenu au survol, avec transition-delay, pour éviter les ouvertures intempestives au passage de la souris.

Drupal

• Comment supprimer manuellement un module Drupal 8

  Quand le gestionnaire d’extensions et drush refusent de désinstaller un module Drupal 8, il reste la voie manuelle, sur la configuration du core.

HTML

• Les caractère spéciaux HTML

  Table de correspondance des caractères spéciaux HTML entre le jeu ISO-8859-1 et l’UTF-8 : accents, guillemets, esperluette, symboles monétaires.

• Ajout d'une "Class" spéciale pour Internet Explorer

  Cibler une version précise d’Internet Explorer avec les commentaires conditionnels HTML, pour appliquer une classe au body et corriger l’affichage.

• Mobile : lien vers les fonctions "Appel" et "SMS"

  Déclencher un appel téléphonique ou l’ouverture d’un SMS depuis une page web avec les schémas d’URL tel: et sms:. Deux lignes de HTML, reconnues partout.

• Jquery-mobile : Multi page avec formulaire

  Répartir un formulaire sur plusieurs écrans avec jQuery Mobile, dans un seul document HTML : structure des pages, navigation entre elles et envoi.

• Les formulaires HTML avec Bootstrap

  La structure d’un formulaire Bootstrap : form-group, form-control, étiquettes associées et textes d’aide reliés par aria-describedby.

• Structure d'une page HTML5

  Le squelette d’une page HTML5 avec ses balises sémantiques : header, nav, section, article, aside et footer, correctement imbriquées.

• Structure d'un email

  Le gabarit d’un courriel en HTML qui s’affiche correctement dans les messageries : doctype, tableaux imbriqués, styles en ligne et largeurs fixes.

ISPConfig

• Ispconfig : Messages d'erreur récursifs quand MySQL est indisponible

  Sur ISPConfig 3.1.2 à 3.1.5, une base de données arrêtée génère des milliers de lignes mysqli_ping dans les journaux et sature le disque. Cause et correctif.

• Rediriger un site actif vers un autre

  Mettre en place une redirection de site depuis l’onglet Redirection d’ISPConfig, sans éditer le vhost : choix du flag et chemin de destination.

jQuery

• Parcourir le DOM en Jquery

  Atteindre les frères, le parent et les enfants d’un élément en jQuery avec siblings(), parent() et children(), en filtrant par classe.

• Incrémenter une valeur automatiquement

  Faire défiler un nombre de zéro jusqu’à sa valeur finale avec jQuery animate() et une fonction d’easing : le compteur animé des pages de chiffres clés.

• Layout + parallax scrolling

  Alterner des couches de contenu et des fonds fixes pour changer d’image au fil du défilement. Le HTML, le CSS et le JavaScript de l’effet.

• Effet pluie en JQuery

  Une animation de pluie dessinée sur un élément canvas en JavaScript, avec la gestion du redimensionnement de la fenêtre.

• Récupérer des valeurs en Jquery

  Lire la valeur d’une liste déroulante, d’une case à cocher ou d’un champ texte en jQuery : les sélecteurs et les méthodes qui vont avec.

• Couper une liste HTML

  Couper une liste ul en deux à partir d’un élément donné, en déplaçant les éléments suivants dans une nouvelle liste insérée à la suite.

• Charger un contenu au scroll

  Charger la suite d’une liste quand le visiteur approche du bas de page, avec un verrou qui empêche les appels simultanés. Le défilement infini.

• Détecter un smartphone ou une tablette

  Reconnaître un mobile ou une tablette par le user agent puis par matchMedia, et ce que chacune des deux méthodes ne sait pas faire.

• Cookie + popup

  Ouvrir une fenêtre modale à la première visite seulement, en mémorisant la fermeture dans un cookie. Le HTML de la modale et le script.

• Animate scrollTo

  Faire défiler la page jusqu’à un élément en douceur avec animate et scrollTop, en compensant la hauteur d’un en-tête fixe.

• Parallax scrolling

  Déplacer l’image de fond moins vite que le contenu pendant le défilement, pour obtenir un effet de parallaxe en quelques lignes de JavaScript.

• Créer une "class" au scroll

  Appliquer une classe à partir d’un certain seuil de défilement, pour réduire un en-tête ou faire apparaître un bouton de retour en haut de page.

• Scroll animate to click

  Intercepter le clic sur les liens d’ancre d’une navigation et faire défiler la page en douceur jusqu’à la cible, plutôt que d’y sauter.

PHP

• Installer l'extension Brotli pour plusieurs versions PHP

  Compiler php-ext-brotli et l’activer pour chaque version de PHP installée sur un serveur, de git clone à update-alternatives. Les commandes, dans l’ordre.

PrestaShop

• Charger du contenu avec la Fancybox

  Charger une page CMS PrestaShop dans une Fancybox en iframe, avec le paramètre content_only qui retire l’en-tête et le pied de page de la boutique.

• Variables Prestashop

  Mémo des variables globales disponibles dans les templates PrestaShop : base_dir, base_dir_ssl, content_dir et les autres chemins de la boutique.

• Accès au thème mobile

  Basculer entre le thème mobile et le thème classique d’une boutique PrestaShop avec les paramètres d’URL mobile_theme_ok et no_mobile_theme.

• Mémo des liens Prestashop

  Mémo des méthodes de l’objet link dans les templates PrestaShop : lien vers une page CMS, le panier, une catégorie ou un produit, avec les échappements.

Sass

• Transition et boucle

  Appliquer un délai croissant à une série d’éléments animés grâce à une boucle Sass, pour obtenir une apparition en cascade plutôt que simultanée.

• Template Flex

  Structure de page en Flexbox : en-tête, navigation, colonnes de contenu et pied de page, avec le HTML et le CSS correspondants.

• Sass mixin

  Une fonction et un mixin Sass qui convertissent une taille en pixels vers des rem, avec un repli en pixels pour les navigateurs qui l’ignorent.

• Menu circulaire SASS

  Un menu dont les entrées se déploient en cercle autour d’un bouton, construit en Sass avec des rotations CSS et des icônes.

Smarty

• Balises Smarty

  Les balises Smarty du quotidien : debug_print_var et var_dump pour inspecter une variable, counter et foreach pour restreindre une boucle à N éléments.

• Modificateur de variable Smarty

  Les modificateurs Smarty du quotidien pour nettoyer et tronquer une chaîne dans un template : strip, strip_tags, truncate et wordwrap.

• Couper un tableau avec un "foreach"

  Fermer et rouvrir un conteneur tous les quatre éléments d’une boucle Smarty, avec smarty.foreach.iteration et l’opérateur div by.