Plan du site

Pages

• [Javascript] Ressources en ligne, bonnes pratiques
• [Magento 2] Ressources en ligne
• [Magento] Ressources en ligne
• [UIkit] ressources en ligne et bonnes pratiques
• [Webpack] Ressources en ligne et bonnes pratiques
• [WordPress] Ressources en ligne
• Liens
• Outils en ligne
• Plan du site
• Ressources vidéos en ligne
• UX/UI Design, transformation digitale, stratégie digitale, webmarketing (secteur automobile)
• Veille technique et technologique du développeur Front-End, les bonnes adresses
• Workflow Front-end 2018

Articles par catégorie

• Category: Accessibilité
  • [SPIP] Menu déroulant géant multi-colonnes accessible – Modifier le rendu HTML du plugin Menus afin que les listes soient correctement structurées
  • [SPIP] Ajout d’un attribut d’accessibilité aria-expanded aux blocs dépliables du plugin Couteau Suisse pour conformité au RGAA
  • [Bootstrap] Accessibilité du composant Collapse de Bootstrap 2 avec ajout des attributs aria-expanded et tabindex
  • [Accessibilité] RGAA 3 : ressources, bonnes pratiques, astuces
• Category: Adobe Audition
  • [Adobe Audition] Couper un fichier long en de multiples pistes
• Category: Angular
  • [Angular CLI] Avoir son serveur Angular dans une Machine Virtuelle Ubuntu Server et accéder à localhost depuis Windows
• Category: AngularJS
  • [AngularJS] Générer des IDs uniques par ng-repeat avec $id, $parent, $index
  • [AngularJS] Utiliser un filtre pour récupérer le nombre de clés contenues dans un objet JSON.
  • [AngularJS] Utiliser ng-hide et $index pour gérer nativement un rowspan ou un colspan dans une boucle ng-repeat (dans un tableau HTML)
• Category: Bac à sable
  • Angular JS en 60 minutes (jsfiddle.net)
  • [CSS] [jQuery] Afficher une liste d’éléments dont la hauteur peut varier
  • [CSS Sprites] Encoder des images en Base64 dans ses CSS
  • [CSS] Le modèle tabulaire
• Category: Bonnes pratiques
  • [Bonnes pratiques] Un peu de documentation sur les images Retina (ou HD Haute Densité)
  • [Magento 2] Bonnes pratiques et astuces de développement front-end
  • [IDEs] Raccourcis utiles
  • [Emmet] Bonnes pratiques et astuces d’utilisation
  • [Bonnes pratiques] Conventions
• Category: Brackets
  • [Brackets] Fonctionnalités natives et plug-ins utiles
• Category: Change cross commerce
  • [Change cross commerce] Déclarer une dépendance d’un thème existant dans un nouveau thème.
  • [Change cross commerce] Troubleshooting – Résolution d’erreurs
  • [Change cross commerce] Surcharger un template issu d’un module standard dans un thème personnalisé
  • [Change cross commerce] Exploiter de manière sélective les ressources CSS du core dans un thème personnalisé
  • [Change cross commerce] Formats prédéfinis des visuels
  • [Change cross commerce] Backoffice : configuration du bloc de facettes pour affichage sur Liste de produits
  • [Change cross commerce] Quelques commande et astuces shell
  • [Change cross commerce] Rendre disponible des templates Xhtml via le back-office
• Category: CSS
  • [CSS] Désactiver le scroll dans la page lorsqu’un élément en position absolue (de type Modale, Off-Canvas, …) est ouvert en sur-impression
  • [CSS] Des effets de fonds de couleur avec séparateur oblique avec linear-gradient
  • [jQuery][CSS] Etendre le fond d’un mega menu déroulant sur toute la largeur de la fenêtre du navigateur
  • [CSS] Habiller l’élément Select de formulaire – les techniques en CSS pur
  • [CSS] Un mega menu horizontal incremental avec flexbox (pure CSS)
  • [javascript] Importer des breakpoints CSS
  • [CSS] Une modale plein écran sans JavaScript (uniquement avec CSS/SCSS)
  • [CSS] Alignements compliqués avec Flexbox
  • [CSS] Ajuster une ancre de page à la hauteur d’un bandeau fixe (sticky)
  • [CSS] Du random en CSS avec :nth-child
  • [CSS][javaScript] Styler les barres de défilement (scrollbar) du navigateur
  • [CSS] Trouver l’élément trop large qui fait apparaître une scroll barre horizontale dans votre page
  • [CSS print] Imprimer des couleurs de fond avec SVG et du texte en couleur
  • [CSS] Un élément sticky en position: fixed; dans une iFrame sous iOS/iPhone
  • [CSS] Petits soucis à l’utilisation des propriétés Column
  • [SASS][LESS] Remonter le DOM en CSS en utilisant l’esperluette
  • [CSS] Masquer la scrollbar tout en permettant encore le scroll
  • [CSS] Ajouter un voile teinté transparent sur n’importe quel type de visuel (jpg, gif)
  • Animation CSS et JS, ressources en ligne, astuces, bonnes pratiques
  • [CSS] La propriété column-count (ou columns) coupe mes rangées de tableaux de façon arbitraire
  • [jQuery][CSS][Internet Explorer] Bug de détection de la pseudo-classe :hover ou de l’événement mouseover sur une bordure CSS
  • [CSS] Des mediaqueries adaptées à chaque marque et version de smartphones et tablettes
  • [CSS] Des feuilles de style d’impression
  • [CSS] Un background off-container
  • [CSS] Des cercles responsive dont les dimensions s’adaptent de manière homothétique
  • [CSS] Des bordures en dégradé
  • [CSS] Grid: ressources en ligne, bonnes pratiques et astuces
  • [CSS] Ne pas hériter de l’opacité d’un parent avec les Color Operation Functions de LESS ou SASS
  • [CSS] Des images responsive dans un tableau HTML ou dans un container en display: table-cell;
  • [CSS] Des containers de la largeur de la fenêtre à l’intérieur de containers de largeur limitée
  • [CSS] Utiliser la propriété « transform: rotate(); » pour faire pivoter les icônes d’une police d’icônes
  • [CSS] Changer la couleur et l’apparence des puces de l’élément UL
  • [Bootstrap] Annuler les effets du composant Affix pour une vue donnée
  • [CSS] Aligner un pseudo élément à droite d’un conteneur et le centrer verticalement avec Translate
  • [CSS] Une largeur fluide pour le widget Comments de Facebook
  • Utiliser les points de rupture du composant grille de Bootstrap 3 pour créer des media-queries JS avec Enquire.js
  • [CSS] Clipping and masking techniques avec les propriétés clip-path et mask
  • [CSS3] Animations – Astuces et ressources utiles
  • [Flexbox] Astuces et ressources utiles
  • [CSS] Afficher du contenu pour les lecteurs d’écrans uniquement
  • [CSS] Les règles d’héritage
  • [CSS] Rendre un input type radio ou checkbox invisible mais cliquable
  • [CSS] une liste d’éléments en inline-block
  • [CSS][SASS] Un chemin à étapes complexe avec les pseudo classes Before, After et les sélecteurs Sibling
  • [CSS] Ajouter des diviseurs verticaux de même hauteur
  • [CSS] Un menu déroulant avec les sélecteurs adjacents, les propriétes opacity, visibility et transition
  • [CSS] Styler tous les éléments de formulaires de façon sexy et uniquement avec CSS
  • [CSS] [jQuery] Une liste responsive d’éléments avec visuels de dimensions différentes alignés horizontalement et verticalement dans les cadres dans lesquels ils s’inscrivent
  • [CSS] Cibler le premier élément d’une liste qui possède une certaine classe parmi ses frères.
  • [CSS] Mediaqueries pour affichage Retina
  • [CSS][SASS] Styler des frères en fonction de leur ordre d’apparition dans le DOM avec les pseudo-classes nth-child et nth-last-child
  • [CSS] Les préfixes constructeurs obsolètes
  • [CSS] Sélection d’éléments, les sélecteurs avancés
  • [CSS ou JavaScript] Une version responsive de l’API Google Maps
  • [CSS] hack @font-face – les bonnes pratiques
  • [CSS][jQuery] Supprimer tous les éléments vides ou qui contiennent uniquement un espace insécable  
  • [CSS] Cross-browser inline-block
  • [CSS] Une bordure en deux teintes en CSS 3
  • [CSS] Activer un champ Select en cliquant à travers un élément sous-jacent avec la propriété CSS pointer-events
  • [CSS][Foundation 3.2.5] Reset CSS des styles du composant Tabs de Foundation v3.2.5
  • [CSS][Foundation 3.5.2] Reset CSS des styles du composant Accordion de Foundation v3.5.2
  • [CSS] Afficher des icônes issus d’une police dans des champs de formulaire (notamment ceux de Bootstrap)
  • [CSS] Scroller dans une page contenant une iframe sur périphériques mobiles.
  • [CSS] Un champ de formulaire fluide et un bouton alignés qui prennent systématiquement 100% de la largeur de leur conteneur
  • [CSS] Media queries de référence dans Bootstrap 3
  • [CSS] Iframe, object & embed responsive
  • [Magento 1.9] Modifier le mode d’affichage standard des erreurs de saisie des formulaires, orchestré via Prototype.js
  • [CSS] Créer des boutons avec des flèches en CSS3 sans markup supplémentaire avec la propriété border et la pseudo-classe :after
  • [CSS] Des boutons radio et des cases à cocher de formulaire sexys et accessibles
  • [CSS] Un fil d’Ariane (breadcrumb) sexy
  • [Bootstrap 3] Un layout 5 colonnes responsive avec Twitter Bootstrap 3
  • [Bootstrap 3] Un site ciblant uniquement le support Desktop en désactivant les classes responsive déclarées dans votre code HTML avec les media-queries
  • [CSS] Forcer une liste de définitions à se comporter comme un tableau avec la propriété display: inline-table;
  • [Magento 1.9] Afficher un nombre de produits par rangée différent en fonction du viewport dans la liste de catégories/produits du thème RWD
  • [HTML][CSS] Supprimer les marges gauche et droite ajoutées par certains navigateurs entre les éléments d’une liste horizontale lorsqu’on utilise display: inline-block;
  • [SASS] Les mixins utiles
  • [Bootstrap 3] Un fix simple pour bénéficier de la grille responsive sous IE8 avec les polyfills html5shiv.js et respond.js appellés depuis le CDN
  • [CSS] Des entités HTML en guise de séparateurs de colonnes d’en-têtes de tableaux
  • [CSS] Comment positionner l’élément Legend à l’intérieur d’un Fieldset
  • [CSS] Styler un Placeholder
  • [jQuery UI 1.8.18][tabs] Reset CSS
  • [CSS][jQuery] Un menu déroulant fondé sur flexbox (modèle tabulaire en fallback IE9-) et un sous-niveau centré horizontalement avec outerWidth
  • [jQuery][Responsive Design] Exécuter des fonctions en se basant sur les media queries CSS plutôt que sur la largeur de la fenêtre du navigateur
  • [CSS][Bootstrap 3] Utiliser la propriété vertical-align avec la grille
  • [CSS] Des tableaux responsives en full CSS
  • [CSS] Forcer une liste non ordonnée (ul) à se comporter en tableau HTML avec la pseudo-classe nth-child, la propriété box-sizing et la fonction calc
  • [CSS] Collection de polices de caractères prises en charge par le plus grand nombre de supports
  • [CSS] Centrer horizontalement et verticalement une boite de manière absolue dans une page
  • [CSS][SASS][COMPASS] installation sous Linux (SSH), configuration d’un projet et troubleshooting
  • [jQuery][CSS][Fancybox] Le wrapper de Fancybox ne s’adapte pas correctement aux dimensions d’une image
  • [PHP][CSS] Ajouter un préfixe à une classe existante
  • [CSS] Pointer les deux derniers éléments d’une liste avec la pseudo-classe :nth-last-child
  • [CSS] Comment conserver l’état au survol sur l’élément parent lorsqu’on se trouve sur un élément enfant ?
  • [CSS][jQuery] Supprimer les espaces blancs laissés par des éléments de liste en position flottants
  • [CSS] border-radius sur des tables
  • [CSS] Internet Explorer ignore les largeurs affectées aux TDs par le biais de CSS
  • [CSS][Responsive Design] Les media-queries de base pour cibler les périphériques standards.
  • [jQuery] Détecter la présence d’une classe .current sur un élément LI et ajouter des classes .before et .after aux éléments LI précédents et suivants avec prevAll et nextAll
  • [CSS] Masquer du texte
  • [CSS] [Bootstrap] Correction d’un bug de la fonctionnalité Collapse sous la v3
  • [CSS] Liste des hacks permettant de cibler spécifiquement un navigateur.
  • [CSS] [Plug-in jQuery selectBox] Fixer la largeur d’une selectBox
  • [HTML] [CSS] Liste complète des entités HTML
  • [jQuery][CSS] Menu horizontal : gérer l’apparition/disparition, au survol, de séparateurs à gauche et à droite d’un libellé
  • [CSS] Aligner un texte verticalement avec display:table, display:table-cell et vertical-align:middle
  • [CSS] Corriger les éléments orphelins avec overflow:hidden;
• Category: Development workflow
  • [NPM] Résolution d’erreurs
  • [Bower] Astuces d’utilisation du gestionnaire de packages front-end
  • [Front-end development workflow] Les ressources en ligne pour utiliser Brunch
  • [Gulp] Astuces d’utilisation et ressources en ligne
  • [Yeoman] Réussir à installer Yeoman sur Ubuntu en 3 étapes
• Category: Docker
  • [Docker] Stopper et supprimer tous les containers et images Docker
  • [Docker][NodeJS] Utiliser Docker pour créer un environnement de développement NodeJS
  • [Docker] Importer une base de données en copiant le fichier SQL dans le container DB avec docker cp
  • [Docker] Compiler les sources de Foundation (Zurb Template) dans un conteneur
  • [Docker] Utiliser node, npm, grunt, gulp, webpack, bower, yarn, etc.
  • [Docker] Mettre en place un container workflow de développement Front-End incluant NodeJS, NPM, Bower, Gulp, etc …
  • [Docker] Quelques notes de prise en main et résolution d’erreurs
  • [Docker] Les bases de l’utilisation de Docker
• Category: Drupal 7
  • [Drupal 7][Drush] Astuces, commandes utiles
  • [Drupal 7] Afficher une image dans un fichier node.tpl.php présent dans un thème
  • [Drupal 7] Monter en version de jQuery avec le plugin jQuery Multi
  • [Drupal 7] Les différentes techniques pour ajouter/supprimer des ressources CSS/JS
  • [Drupal 7] Conflit Drupal7/NPM – Erreur « segmentation fault » à l’utilisation de Drush
  • [Drupal 7.x] Les formulaires
  • [Drupal 7.x] Ajouter une CSS ou un JS conditionels via les preprocess functions
  • [Drupal 7.x] Ajouter de nouvelles variables à un thème qui peuvent être exploitées dans page.tpl.php
  • [Drupal 7.x] Les preprocess functions dans template.php
  • [Drupal 7.x] Le fichier *.info : le point de départ pour intialiser un thème
  • [Drupal 7.x] Les variables récurrentes dans les templates de page
  • [Drupal 7.x] Utiliser du javaScript (et notamment les Behavior)
  • [Drupal 7.x] Créer des surcharges de templates pour un type de node/noeud spécifique
  • [Drupal 7.x] Customiser le template Node
  • [Drupal 7.x] Ajouter des régions à un template de page
  • [Drupal 7.x] Bonnes pratiques, astuces, starter themes
• Category: Ergonomie
  • Protégé : [Benchmark UX/UI e-commerce]
  • [Ergonomie] Galerie de menus de navigation de sites e-commerce
  • [Ergonomie] Infinite scroll, une solution pas toujours pertinente
• Category: Foundation 6
  • [Foundation 6] Exploiter le composant Drilldown et jQuery pour créer un product finder wizard
  • [Foundation 6] Un lien parent cliquable qui renvoie vers une page dans le menu Drilldown
  • [Foundation] Démarrez vos développements front-end avec un starter kit incluant le moteur de templates Twig (Twig.js) et le framework JavaScript Vue.js
  • [Foundation 6] Habiller proprement un input type= »file »
  • [Foundation 6] Astuces, bonnes pratiques, ressources en ligne
  • [Foundation 6] Une grille flexbox aux largeurs de colonnes custom avec les mixin flex-grid-size
  • [Foundation 6] Customiser le libellé du lien « Back » (retour) du composant Drilldown
  • [Foundation 6] Contourner le bug du composant Modal en full screen qui empêche de scroller jusqu’en bas si on utilise l’attribut optionnel data-v-offset
  • [Foundation 6] Erreur « Error: Syntax error, unrecognized expression: ##panel2 » avec le composant Tabs
  • [jQuery][Foundation 6] Détecter la direction du scroll et agir sur des éléments Sticky
  • [Bootstrap][Foundation] Bug du composant Dropdown sur iPad et iPhone
  • [Foundation 6] Ajouter des couleurs à la palette par défaut et créer une palette de dégradés
  • [Foundation 6] Créer une ancre vers le haut de page avec le composant Sticky
  • [Foundation 6] Un menu Foundation en vue Mobile et un menu full-custom en vue Desktop
  • [Foundation 6] Un off-canvas qui prend 50% de la largeur de la fenêtre
  • [Foundation 6] Une fonction pour récupérer les valeurs des breakpoints Current, From, To
  • [Foundation 6 for sites] L’erreur « Uncaught TypeError: t.getBoundingClientRect is not a function » à l’utilisation de Box (Javascript utilities)
  • [Foundation 6] Permuter une icone lorsqu’on affiche/masque des éléments avec le plug-in Toggler
  • [Foundation 6] Un habillage Custom pour le composant Tabs
  • [Foundation 6] Un mixin SASS utilisant une fonction étendue de map-get pour obtenir un effet sur une icône
  • [Foundation 6] Réinitialiser les styles par défaut pour l’élément HTML de formulaire Input
• Category: Git
  • [Git] Configurer un compte Git sur une install Ubuntu Server et générer une clé SSH d’utilisateur
  • [Git] Les fonctionnalités et commandes utiles
• Category: Google Maps
  • [Javascript] Eviter qu’une callback function possédant un paramètre et invoquée via un EventListener click ne s’exécute immédiatement
  • [Javascript][Google Maps v3] Eviter une boucle infinie en exécutant un événement seulement si il n’a pas été invoqué dans les dernières x secondes
  • [Google Maps] Astuces et bonnes pratiques
• Category: Gulp
  • [Gulp] Utilisation de Blendid! Bonnes pratiques, astuces…
  • [Police d’icônes] bugs connus et leurs solutions
  • [NPM][Gulp] Ajouter un custom build de Modernizr à un projet
  • [Gulp][SASS] Exploiter l’option includePaths de gulp-sass pour définir, en cas de surcharges, un ordre de priorité des chemins vers lequels Gulp ira regarder quand il rencontrera un @import
  • Protégé : [Gulp-flow Change 3.6.x] Exploiter une ressource vendor dans un thème
  • [Gulp] Spritesmith
  • [Gulp] Supprimer un ensemble de fichiers ayant la même extension avec Del et la méthode .unshift() en omettant certains fichiers en particulier
  • [Gulp] Stocker ses options de configuration dans un fichier JSON externe surveillé (gulp watch)
  • [Gulp] Des icônes au format SVG dans vos projets avec gulp-svgstore
  • [Gulp] Gulpfile.js – Les bonnes pratiques de coding
  • [Change 3.x][Gulp] Ajouter les Sourcemaps dans RBS Change
  • [Gulp] Génération d’une police d’icônes avec template en SASS
• Category: HTML
  • [HTML] Exploiter les microformats pour baliser une zone de contact (h-card) de la manière la plus sémantique possible
  • [HTML] Le positionnement d’un contenu ancré est décalé à l’écran par rapport à l’emplacement où est placé l’ancre dans le code source de la page.
  • [HTML] Les commentaires conditionnels sous IE
  • [HTML] Viewport : utiliser la balise meta Viewport adéquate suivant le type de site (optimisé mobile ou non).
• Category: Hybris
  • [Hybris] Quels arguments à la condition c:if pour n’afficher un bloc de code que si le contenu qu’il habille est présent
  • [Hybris] Appliquer une classe différente en fonction d’un état
  • [Hybris] Utiliser les conditions c:if ou sec:authorize pour afficher/masquer des informations
  • [Hybris] Créer et modifier des fichiers ImpEx
  • [Hybris] Créer et appeler un fichier *.tag
  • [Hybris] Ajout de nouvelles locales
  • [Hybris] Ajouter une référence JS proprement
• Category: Javascript
  • [Javascript] Exécuter un événement qui se déclenche plusieurs fois de suite seulement après un certain délais en temps (un timeout)
  • [Javascript] Utiliser l’API de Géolocalisation avec des promesses ou Async Await
  • [Javascript] Ce que tous les développeurs javascript devraient savoir à propos des caractères unicode
  • [Javascript] Utiliser la fonction map à l’intérieur d’une autre fonction
  • [Javascript] Rendre les variables et des fonctions déclarées dans des closures (publiques/privées) accessibles en-dehors de ces dernières
  • [Javascript] Attacher plusieurs événements à un même listener
  • [Javascript] Utiliser reduce pour obtenir la somme de toutes les valeurs d’une clé spécifique dans un tableau (ou un objet)
  • [Javascript] Comment appeler une fonction à partir d’une chaîne de caractères (string) sans utiliser la méthode Eval
  • [Javascript] Créer des chemins dynamiques vers des données contenues dans un objet ou un tableau
  • [Javascript] Déclaration de condition If dynamique
  • [Javascript] Transformer une fonction fléchée (arrow function) en fonction classique
  • [Javascript] Méthode Filter: bonnes pratiques et astuces d’utilisation
  • [JavaScript] Déléguer un événement à un élément du DOM créé dynamiquement (ou détecter l’événement click sur un SVG)
  • [Javascript] Envelopper du contenu existant dans un nouvel élément du DOM
  • [Javascript] Annuler la sélection d’un bouton radio
  • [Javascript] Accéder dynamiquement et via un chemin sous forme de chaîne de caractères à une information consignée dans un objet ou un tableau JS
  • [Javascript] Construire un chemin dynamique vers des valeurs de clés stockées dans un objet avec Object.byString
  • [JavaScript] Exécuter une fonction seulement une fois
  • [JavaScript] Mediaqueries et breakpoints en JS ES6+ avec la librairie breakpoint-helper
  • [javaScript] Quelques expressions régulières (Regex) utiles
  • [javascript] L’équivalent ES6/vanilla JS de la méthode .eq() de jQuery
  • [javascript] Corriger l’erreur « Uncaught TypeError: Cannot read property ‘getData’ of undefined » (ou ‘setData’) en déclarant un addEventListener correctement
  • [Javascript] Une alternative ES6+ à la méthode .remove() de jQuery avec querySelectorAll et parentNode.removeChild
  • [javaScript] Rechercher si une valeur est déjà présente dans un tableau bi-dimensionnel
  • [javaScript] Exploiter les Mutation Observers pour surveiller la disponibilité d’éléments dans le DOM
  • [RequireJS] Astuces, bonnes pratiques
  • [Javascript] Vérifier qu’une chaîne de caractères string contient une sous-chaîne substring spécifique avec les méthodes includes ou indexOf
  • [Javascript] Supprimer les entrées dupliquées d’un tableau clé/valeur
  • [javascript] Les bases: les opérateurs
  • [javascript] Les bases: les fonctions
  • [JavaScript] UMD (Universal Module Definition) des modules JS qui s’exécutent partout!
  • [javaScript] Un accordéon avec l’attribut HTML onClick
  • [javaScript] Passer une classe CSS comme paramètre d’une fonction avec document.getElementsByClassName();
  • [javaScript] console.time et console.timeEnd pour logguer les performances d’affichage du code JS
  • [javaScript] Comment passer un élément du DOM en plein écran
  • [javaScript] boucler dans un tableau
  • [javaScript] Mettre en cache un sous-niveau de navigation pour éviter un crash du navigateur sous iOS (iPhone)
  • [javaScript] Changer la valeur d’une variable globale depuis une fonction
  • [javaScript] Importer ses points de rupture (breakpoints) CSS pour les utiliser avec javaScript
  • [Javascript] Filtrer les éléments d’un tableau et stopper à la première occurrence qui matche
  • [Javascript] Supprimer tous les caractères non numériques d’une chaîne avec la méthode Replace
  • [Javascript] Créer un tableau de sommes cumulées avec For
  • [javaScript] Vérifier qu’une chaîne de caractères contient un texte donné avec la méthode indexOf()
  • [javaScript] VideoJS – astuces et bonnes pratiques de mise en place
  • [javascript] Simuler un redimensionnement de la fenêtre du navigateur avec l’événement window resize
  • [javascript] L’exécution des ressources JS d’un projet via une fonction _autoload et l’encapsulation de code dans des namespaces
  • [JavaScript] Initialiser un plugin avec plusieurs configs pré-définies
  • [javaScript] Mettre en place le plugin videoJS avec une playlist façon YouTube
  • [Javascript] Ressources pour manipuler les tableaux
  • [javaScript] Désactiver un bouton d’action si le champ input associé affiche une valeur inférieure ou égale à zéro
  • [Javascript] Détecter l’OS, le navigateur, sa version et autres avec un plugin JS
  • [Handlebars] Recettes, astuces, bonnes pratiques
  • [javascript] Ressources utiles, bonnes pratiques
• Category: jQuery
  • [jQuery] Performances: comment utiliser de multiples éléments mis en cache?
  • [jQuery] Utiliser la méthode .contents() pour supprimer un élément parent du DOM, mais conserver tous ses enfants
  • [jQuery][bxSlider] Les liens dans le slider ne fonctionnent pas
  • [jQuery] Exploiter $.noConflict(true); pour utiliser plusieurs versions de jQuery dans une même page
  • [jQuery] Empêcher le composant dropdown de Bootstrap 3 de se refermer lorsqu’on clique à l’intérieur de celui-ci
  • [jQuery] Détecter les changements d’état (coché/pas coché) d’un champ radio ou checkbox et agir en fonction
  • [jQuery] Vider des champs de formulaire de manière dynamique
  • [jQuery] Des plugins pour gérer des actions conditionnelles (notamment afficher/masquer des champs de formulaire)
  • [jQuery] Vérifier si au moins une checkbox est cochée
  • [jQuery] Cliquer sur une zone contenant un input type radio ou checkbox actionne le booléen
  • [Vanilla JavaScript][jQuery] L’événement Click sur un élément parent, mais trouver l’élément enfant qui est cliqué avec event.target
  • [jQuery] similarElements.js – Un plugin pour gérer la mise à jour dynamique de plusieurs éléments aux actions similaires dans une même page
  • [jQuery] Un plugin pour afficher/masquer des éléments dans une page et conserver leur état en cache
  • [jQuery] Une fonction Toggle simple pour afficher et masquer des éléments dans un page
  • [jQuery] Plug-in: afficher/masquer proprement des éléments du DOM avec une fonction
  • [jQuery] Bootstrap 3 et affix ne conserve pas la pleine largeur d’un élément si j’utilise les classes de la grille
  • [jQuery] Un colonage à la carte dans une liste imbriquée type menu
  • [jQuery] Empêcher un événement de s’exécuter à de multiples reprises avec les méthodes On et Off (entre autres)
  • [jQuery] Bloquer le scroll dans la page quand un élément en position absolue est scrollable
  • [jQuery] Obtenir la somme des outerHeight de l’ensemble des éléments ayant la même classe
  • [jQuery] Trouver la distance entre deux éléments du DOM avec la méthode Offset
  • [jQuery] Eviter le scroll de la page lorsqu’on touche un élément en position absolute en sur-impression
  • [jQuery] Astuces de manipulation du widget Autocomplete de jQuery UI
  • [jQuery] Redimensionner automatiquement un element HTML Select en fonction de la largeur de l’Option sélectionnée
  • [jQuery] Vérifier en cours de saisie en live si un input[type= »text »] contient du contenu avec l’événement Input et la méthode Val
  • [bxSlider][jQuery] Synchroniser la navigation dans deux carousels distincts
  • [Bx Slider, responsive] Les images ne s’affichent pas jusqu’à ce qu’on redimensionne la fenêtre du navigateur
  • [jQuery] Stocker dans un tableau tous les éléments d’une liste et ajouter des classes à n divs en fonction du contenu de ce tableau
  • [jQuery] Migrer jQuery-ui pour jQuery 3.x
  • [jQuery][dataTables] Report des libellés d’en-têtes dans les éléments Select correspondant
  • [jQuery][dataTables] Désactiver l’élément Select si toutes les cellules d’une même colonne ont le même contenu
  • [jQuery] un sticky avec effet smooth
  • [jQuery] Passer $(this) dans une fonction à l’aide de thisObj
  • [jQuery][SASS] Masquer les éléments d’une liste au-delà de 10 et les afficher au clic sur un bouton « Voir plus »
  • [jQuery] Utiliser jQuery Migrate pour rendre compatible du code écrit pour d’anciennes versions de jQuery avec une version plus récente
  • [jQuery] Surveiller les changements sur un élément du DOM avec la méthode Bind et l’événement DOMSubtreeModified
  • [jQuery] Binder l’événement Click sur tous les éléments du DOM sauf un ou plusieurs éléments
  • [Responsive design][jQuery][SASS] Un tableau responsive en mode Flip Scroll (version 2017)
  • [jQuery] Utiliser la méthode .map() pour récupérer des informations, les stocker dans un tableau et les réutiliser
  • [jQuery] Un carousel avec visuel en pleine page avec n’importe quel plug-in
  • [jQuery] Vérifier qu’un élément est présent dans le DOM lorsqu’on scrolle dans la page
  • [jQuery] Stocker plusieurs données dans une variable sous forme de tableau et interroger la variable pour savoir si elle contient une donnée ou pas
  • [jQuery] Bloquer, jusqu’à sa validation, l’événement Submit dans un formulaire contenant plusieurs boutons
  • [jQuery] Détecter quel bouton est cliqué lors de la soumission d’un formulaire
  • [jQuery] Soumettre un formulaire sans rafraîchir la page avec Ajax
  • [jQuery] Les méthodes Detach et Attach
  • [RBS Change 3.6.x] Détecter un choix utilisateur via l’élément HTML Select/Option avec jQuery
  • [jQuery] Un mega-menu en dropdown en quelques lignes de code
  • [jQuery] Cibler un ID dont le libellé contient un caractère point « . »
  • [jQuery] Activer un bouton radio ou une checkboxe en cliquant sur un autre élément avec la méthode .prop()
  • [Magento 1.x] Un slider multi-produits responsive avec le plugin jQuery Cycle (fourni avec le thème Rwd)
  • [jQuery] Fermer un élément en sur-impression (modale, navigation) en cliquant n’importe où ailleurs dans la page
  • [jQuery] Etendre une fonction existante
  • [jQuery][Gruge] Un effet Toggle avec la méthode On.(‘Click’)
  • [jQuery] Bug c.curCSS is not a function de jQuery UI
  • [jQuery] Créer des catégories et utiliser leurs scopes pour trier des éléments du DOM
  • [jQuery] Récupérer la largeur d’une image
  • [jQuery] Vérifier, au clic, la présence d’une classe dans le DOM et afficher ou masquer des éléments en fonction
  • Optimiser et synchroniser l’exécution de media queries CSS et JS avec Sync MQ
  • [jQuery] Compter le nombre d’enfants dans chaque parent et ajouter une classe spécifique en fonction du résultat
  • [jQuery] Une navigation responsive par onglets en vue Desktop et accordéon en vue Mobile
  • [jQuery] Retourner un tableau de valeurs avec la méthode Val et trouver la plus haute avec Math.max.apply
  • [jQuery] Simuler un élément Select à partir d’une liste HTML
  • [jQuery] Rendre une partie seulement d’un élément HTML cliquable
  • [jQuery] Vérifier si au moins une case à cocher ou un bouton radio est coché
  • [jQuery] Empêcher un événement (un click) de s’exécuter à plusieurs reprises avec les méthodes On et Off
  • [jQuery] Créer un plugin avec la méthode jQuery.fn.extend()
  • [bxSlider] Les slides n’ont pas la même hauteur et s’empilent au lieu de s’afficher côte à côte
  • [bxSlider] Le slider ne s’affiche pas correctement jusqu’à ce que je redimensionne la fenêtre du navigateur
  • [bxSlider] Afficher la pagination seulement à partir d’un certain nombre de slides
  • [jQuery] Bonnes pratiques, astuces et ressources utiles
  • [jQuery] Passer des paramètres à une fonction avec data
  • [jQuery] Vérifier qu’au moins une checkbox est sélectionnée
  • [jQuery] Centrer horizontalement la partie déroulée d’un menu sur un libellé dont la largeur peut varier
  • [jQuery] Combiner plusieurs déclarations dans une même méthode .attr
  • [jQuery] Combiner plusieurs déclarations dans une seule méthode .removeAttr
  • [jQuery] Parcourir le DOM à la recherche d’un élément suivant ou précédent, mais qui n’est pas nécessairement frère de l’élément de départ
  • [jQuery] Détecter le navigateur et sa version avec le plug-in browser-detection et lancer une fonction avec les conditions if et else
  • [jQuery] Supprimer l’élément parent mais conserver ses enfants avec replaceWith
  • [jQuery] Utiliser Split pour récupérer la valeur contenue dans une classe et les opérateurs de comparaison pour agir en fonction de celle-ci
  • [jQuery] Utiliser la fonction each
  • [Bootstrap] Fermer les éléments Collapse lorsqu’on clique à l’extérieur des zones
  • [Bootstrap] Composant Collapse : fermer l’élément ouvert au click sur un autre élément
  • [jQuery] Utiliser la pseudo-classe CSS nth-child avec une valeur récupérée d’une variable
  • [jQuery] Sélectionner les x derniers éléments ayant une classe spécifique avec les méthodes Filter et Slice
  • [jQuery] Les opérateurs de comparaison
  • [jQuery][Bootstrap 3][Collapse][enquire.js] En vue Mobile, dans un menu, désactiver la redirection vers la page cible au clic sur un lien de premier niveau avec les data-attributes et jQuery.
  • [jQuery] Accéder à un élément contenu dans une iframe depuis la page parente avec la méthode contents()
  • [jQuery] Cibler une popin fancybox en fonction du support (smartphone, tablette, desktop …) et lui passer des arguments différents
  • [jQuery] Au clic sur un élément, scroller automatiquement jusqu’à un autre élément présent dans le DOM
  • [jQuery] Détecter un changement dans le contenu d’un élément HTML (plug-in)
  • [jQuery] Supprimer seulement un élément parent et pas son contenu enfant avec les méthodes contents et replaceWith
  • [jQuery] Envelopper tous les éléments de celui possédant la classe x jusqu’à celui possédant la classe y avec les méthodes addBack et wrapAll
  • [jQuery] Envelopper deux éléments adjacents dans un élément conteneur avec les méthodes andSelf et wrapAll
  • Les différentes astuces pour défaire un plug-in jQuery après son initialisation
  • [jQuery] Ajouter plusieurs attributs à un élément HTML
  • [jQuery][Foundation 3.5.2] Modifier le comportement natif du composant Accordion pour empêcher la fermeture d’un panneau au clic sur son en-tête
  • [jQuery] Agir uniquement sur des blocs contenant des boutons radio ou des cases à cocher possédant un attribut Name dont la valeur est identique
  • [jQuery] jQuery ne fonctionne plus après rafraîchissement AJAX d’un élément dans la page
  • [jQuery] Lancer une fonction après un délais avec setTimeout
  • [jQuery] Conflits, message d’erreur « $ is not a function » et corrections possibles
  • [Magento] Moderniser le fonctionnement et l’affichage du système d’évaluation produit avec Bootstrap, SASS et jQuery
  • [jQuery] Créer une fonction afin de pouvoir déclencher le code qui y est encapsulé lors d’un événement précis
  • [jQuery] Vérifier qu’un élément est visible ou masqué
  • [jQuery] Click/toggle entre deux fonctions (bouton play/pause, start/stop)
  • [jQuery] Au clic, agir sur plusieurs éléments d’une même page qui portent un data-attribute similaire
  • [Magento] Résoudre le conflit de dropdown entre Bootstrap 3 et PrototypeJS
  • [jQuery] Utiliser Bind pour délayer le lancement d’une déclaration après que la page ait été entièrement chargée
  • [jQuery] Combiner onLoad et onResize
  • [jQuery] Rendre un bloc contenant un input radio entièrement cliquable
  • [jQuery] Accéder à un élément d’une frame parente depuis une iframe avec window.parent.document
  • [jQuery][Superfish] Activer/désactiver Superfish au redimensionnement de la fenêtre du navigateur
  • [jQuery] Cibler le premier élément qui n’a pas une classe spécifique avec :not et :first
  • [jQuery] Déplacer au clic le focus d’un élément actif à un élément inactif
  • [jQuery] Bonne syntaxe pour utiliser une variable comme valeur CSS
  • [jQuery] Simuler le click sur un élément lorsque l’utilisateur clique sur un autre élément présent dans le DOM
  • [jQuery] Ajouter une classe ‘before-active’ sur l’élément frère qui précède celui qui possède la classe ‘active’
  • [Bootstrap Tabs] [jScrollPane] Utiliser jScrollPane sur un élément invisible (initialement en « display:none; »)
  • [jQuery] Simuler un placeholder
  • [jQuery] détecter IE8
  • [jQuery][Responsive Design] Centrer verticalement un élément en jQuery
  • [JQuery] J’ai mis jQuery à jour et la fonction .live() ne fonctionne plus. Méthode de migration.
  • [jQuery] Conserver une DIV en haut de page lorsqu’on scrolle vers le bas et réinitialiser sa position lorsqu’on remonte dans la page
  • [jQuery] jQuery.noConflict() | Résoudre les conflits liés à l’utilisation de plusieurs plug-ins
  • [jQuery] Vérifier à l’aide d’une condition l’existence d’une classe dans son code HTML avant d’exécuter un bout de script.
  • [jQuery] Un affichage supplémentaire pour le plug-in ScrollUp de Mark Goodyear
  • [jQuery] Transformer un input type submit en button en conservant l’ensemble de ses attributs
  • [jQuery] Créer un accordéon simple
  • [jQuery] Vérifier que la valeur d’un attribut contient un élément d’une liste consignée dans une variable avec Filter, Map et Split.
  • [jQuery] Insérer du contenu devant, derrière et à l’intérieur des éléments avec before, after, prepend et append
  • [jQuery] Utiliser la fonction trim pour supprimer les espaces vides au début et à la fin d’une chaîne de caractères
  • [jQuery] Supprimer un bout de texte ou un caractère spécifique d’une chaîne avec Split et Join
  • [jQuery] Déplacer les textes des étiquettes Label de formulaire vers les attributs Placeholder des champs Input associés
  • [jQuery] Attribuer des identifiants uniques à une série d’éléments et les utiliser pour leur ajouter dynamiquement des contenus spécifiques avec attr, split et appendTo
  • [jQuery] Grouper des éléments avec les fonctions lenght et slice
  • [jQuery] Rendre, à partir d’un lien qu’il contient, un bloc entièrement cliquable
  • [jQuery] Sélectionner l’intégralité d’une colonne de tableau
  • [jQuery] Reporter le libellé de la balise label dans le champ input, select, ou textarea qui lui est associé dans un formulaire
  • [jQuery] Des colonnes de même hauteur avec height
  • [jQuery] Créer un effet ‘pointillés’ après des libellés avec width et prev
• Category: JSP
  • [JSP] Comment ajouter une classe CSS dans une vue en regard d’une condition
• Category: LESS
  • [SASS][LESS] BEM, Block Element Modifier, astuces et bonnes pratiques
  • [LESS] Un mixin pour boucler dans un tableau contenant des valeurs allant par pairs
  • [LESS] Propriété CSS Calc : petite subtilité de déclaration
  • [LESS][Mixin] Concatener des chaînes de caractères
  • [LESS][Mixin] Une navigation simple en mode « inline » avec les guards
• Category: Linux
  • [Ligne de commande] Utiliser grep pour manipuler des données
  • [NPM] Mettre à jour Node et NPM sous Ubuntu (ligne de commande)
  • [Linux][Réseau] Configurer une adresse IP dynamique sur GNU Linux famille Ubuntu
  • [Linux][Réseau] Configurer une adresse IP fixe ou statique sur GNU Linux famille Ubuntu
• Category: Machine virtuelle
  • [Ubuntu][Virtual Box][Réseau] Travailler en local sur une IP fixe #2
  • [Machine virtuelle] Accéder à un site hébergé sur une VM depuis une autre VM (Windows XP montée sur VMware Player).
• Category: Magento
  • [Magento 1.x] modifier proprement la meta viewport
  • [Magento 1.x] Starter themes
  • [Magento 1.9] Remplacer les sprites d’affichage Grid et List dans la page catalog-category-view par des icônes issus d’une police
  • [Magento] Changer le nombre de produits par rangée dans les listes produits du thème Rwd
  • [Magento] Charger une ressource externe (cdn) dans l’en-tête de page depuis un fichier xml en utilisant les méthodes setText ou addLinkRel
  • [Magento] Un template de config local.xml standardisé pour débuter une installation
  • [Magento] Mémo Magerun
  • [Magento 1.9] Ajouter un nouvel onglet (tab) sur la fiche produit dans le thème rwd
  • [Magento] Supprimer le wrapper WYSIWYG (classe .std)
  • [Magento] Concepts de base et terminologie
  • [Magento] Préparation Front-End Developer Certification
  • [Magento] Afficher l’ensemble des propriétés d’un objet
  • [Magento] Ajouter un champ Quantité à chaque item dans la page de liste des catégories/produits
  • [Magento] Remplacer un template de page par le biais du fichier local.xml
  • [Magento 1.9] Réinitialiser le mot de passe admin
  • [Magento] Ajouter une CSS custom sans qu’elle soit écrasée par les CSS du thème par défaut
  • [Magento] Méthodes de suppression des caches
  • [Magento] Assigner une page CMS comme page d’accueil par défaut de votre site
  • [Magento][TinyMCE] Customizer les settings du WYSIWYG
  • [Magento] Récupérer l’URL du skin dans un bloc statique
  • [Magento] Insérer un bloc statique créé en backoffice dans un gabarit de page depuis un fichier de layout xml et un fichier de template phtml
  • [Magento] Ajouter ou supprimer proprement des ressources CSS ou JS dans l’en-tête de page à l’aide d’un fichier local.xml
  • [Magento] Inclure un bloc statique ou un template PHTML depuis une page CMS
  • [Magento] Remplacement d’une base de données et modification de l’URL d’un site
  • [Magento] Résolution de problèmes d’install et de config récurrents
  • Category: Admin configuration scope
    • [Magento 1.x] Créer et afficher un bloc statique en front
    • [Magento] Activer/désactiver la compilation des fichiers JS/CSS depuis l’interface d’administration
  • Category: Block template system
    • [Magento 1.x] Affichage conditionnel de bloc avec customer_logged_in customer_logged_out
    • [Magento 1.9] Récupérer la valeur du champ « Title » d’un bloc statique et l’afficher dans un phtml
    • [Magento 1.9] Ajouter une zone dans un gabarit de page et y affecter un bloc PHTML
    • [Magento] Déplacer la fonctionnalité d’inscription à la newsletter sur la page d’accueil du compte client (dashboard)
  • Category: Customization of template files
    • [Magento 1.9] Customizer les templates d’emails
    • [Magento] Récupérer et afficher les propriétés d’un objet (d’un produit, par exemple)
    • [Magento] Remplacer le sélecteur de langue par des drapeaux
    • [Magento] Masquer le lien vers la Homepage dans le fil d’Ariane
  • Category: Customizing look and feel
    • [Magento] Formulaires : anatomie de l’ossature HTML et taxonomie des classes CSS standard
  • Category: Design fallback
    • [Magento 1.9] Un héritage propre des fichiers SASS dans un thème Custom
    • [Magento 1.9] Héritage : définir un thème parent
  • Category: Internationalization
    • [Magento] Ajouter des locales de traduction pour des nouveaux termes dans Magento
  • Category: Javascript creation & Customization
    • [Magento] « Uncaught ReferenceError: jQuery is not defined » au chargement d’une ressource jQuery
  • Category: Locate files / directory structure
    • [Magento 1.9] Changer l’URL d’accès à l’interface d’administration
  • Category: XML layout
• Category: Magento 2
  • [Magento 2] Accéder aux custom attributes d’un produit dans du code JavaScript
  • [Magento 2] Un widget JS toggle on/off accessible WCAG avec les attributs Hidden et Aria-Expanded
  • [Magento 2] Surcharger le markup HTML du template de prix
  • [Magento 2] Etendre ou surcharger des styles less parent, de composants ou de modules dans un thème
  • [Magento 2] Afficher les champs additionnels d’adresse client (street2, street3) dans les pages du compte client et les mails de confirmation de commande
  • [Magento 2] Astuces pour adapter rapidement du code javascript aux standards jQuery UI Widget
  • [Magento 2] Utiliser les layouts XML pour rendre visible la navigation du compte client sur toutes les pages du site
  • [Magento 2] Les bases et patterns de l’utilisation de javascript (AMD, requireJS, widget jQuery, plugin, module, x-magento-init, etc…)
  • [Magento 2] Afficher le formulaire de connexion client dans n’importe quel template PHTML
  • [Magento 2] Utiliser Knockout JS pour ajouter un message dans le minicart lorsque ce dernier est vide
  • [Magento 2] Un module Javascript embarqué via RequireJS pour bloquer le scroll de la page à l’affichage d’un élément en surimpression
  • [Magento 2] Déplacer l’affichage du nombre de produits au panier de minicart.phtml vers un autre template
  • [Magento 2] Modifier le positionnement des messages d’erreur lors de la validation d’un formulaire
  • [Magento 2] Ajouter des polices Google Fonts
  • [Magento 2] Depuis un template PHTML, détecter si la page sur laquelle nous nous trouvons est la homepage, une page produit, une page catégorie
  • [Magento 2] Créer un thème enfant du thème Blank, astuces et bonnes pratiques
  • [Magento 2] Mediaqueries LESS avec les mixins du core
  • [Magento 2] Les fichiers styles-m.css ou styles-l.css ne se génèrent pas dans le cadre d’un thème qui hérite de Blank ou de Luma
  • [Magento 2] Utiliser une Regex et la méthode Trim de jQuery pour affecter une largeur dynamique aux tooltips
  • [Magento 2] Afficher/masquer le bouton « Effacer tous les filtres » dans la liste des catégories/produits
  • [Magento 2] Pour créer un attribut produit custom depuis l’interface d’administration
  • [Magento 2] Etirer de manière homothétique le visuel principal de la fiche produit affiché via Fotorama
  • [Magento 2] Afficher de manière dynamique la base URL d’un store dans un bloc statique, un template PHTML, un layout XML
  • [Magento 2] Changer la valeur de l’attribut Colspan dans les tableaux des commandes du compte client
  • [Magento 2] Ajouter des blocs enfants via les layouts XML et la fonction getChildHtml dans un template PHTML
  • [Magento 2] Etendre un composant JS natif
  • [Magento 2] Utiliser .addMethod() pour remplacer un libellé de message d’erreur de saisie dans un champ de formulaire (via la librairie jQuery Validate)
  • [Magento 2] Récupérer les données d’un client via son customer ID
  • [Magento 2] Déplacer un éléments existant dans un layout XML avec la balise Move
  • [Magento 2] Rajouter des préfixes de civilités sous forme de boutons radio dans le formulaire de création de compte
  • [Magento 2] Modifier les stocks directement depuis la base de données
  • [Magento 2] Erreur Import failed: Invalid Base URL au app:config:import ou au setup:upgrade
  • [Magento 2] Créer un compte administrateur à la main
  • [Magento 2] Eviter la redirection automatique de mon instance locale vers la prod lorsque j’affiche une page dans mon navigateur
  • [Magento 2] Etendre un mixin existant
  • [Magento 2] Authentication required (repo.magento.com) lors d’un composer install
  • [Magento 2] Utilisation de before et after sur les containers dans les layout xml
  • [Magento 2] Ajouter une mise à jour de layout pour une page CMS (custom layout update)
  • [Magento 2] Supprimer le supplément de prix du champ Select pour un produit configurable
  • [Magento 2] Utiliser action method= »setTemplate » pour surcharger un fichier PHTML dans app/code/Vendor/Module plutôt que dans un thème
  • [Magento 2] un assistant qui surveille les changements de code et vide les caches en fonction des types de fichiers modifiés
  • [Magento 2] Utiliser les Mutation Observers de javascript pour détecter les changement dans le DOM suite à une action utilisateur
  • [Magento 2] Corriger l’erreur 1227 (42000) à l’import d’un dump SQL avec la commande db:import
  • [Magento 2] Ajouter un block (une page) au compte client via un layout XML
  • [Magento 2] Afficher un lien vers la fiche produit depuis la quickview en exploitant le localStorage
  • [Magento 2][SEO] Configurer le fichier robots.txt et la Meta robots depuis l’interface d’administration
  • [Magento 2] Mise à jour du prix final dans une fiche produit lorsqu’on vide dynamiquement via javascript une option sous forme de champ texte
  • [Magento 2] Un champ Date de Naissance custom avec validation côté javascript, placeholder et masque de saisie avec le plugin Cleave
  • [Magento 2] Un plugin jQuery custom pour rendre cliquable une zone complète plutôt que le seul lien qu’elle renferme avec x-magento-init et requireJS
  • [Magento 2] Des cases à cocher et des boutons radio sexy dans vos formulaires avec le markup HTML du core
  • [Magento 2] Utiliser l’Argument Attributes et l’Item Class dans un Layout XML pour ajouter une classe spécifique à un élément du menu de navigation du compte client
  • [Magento 2] Ajouter un lien de déconnexion dans le menu du dashboard compte client
  • [Magento 2] Ajouter, déplacer, supprimer des entrées dans le menu de navigation du compte client en sidebar
  • [Magento 2] Comment inclure et utiliser un fichier JS custom placé dans un thème depuis un template PHTML avec data-mage-init
  • [Magento 2] Vérifier qu’un utilisateur client est connecté à son compte et afficher son prénom dans un template PHTML
  • [Magento 2] Les dimensions des images visuels produit
  • [Magento 2] Des images au survol hover dans la liste produit en ajoutant un attribut custom
  • [Magento 2] Appeler un template PHTML depuis une page CMS
  • [Magento 2] Erreur grunt exec « In SourceThemeDeployCommand.php line 179 » à la compilation des thèmes
  • [Magento 2] Ajouter des paramètres de configuration des thèmes de la table core_config_data au fichier config.php
  • [Magento 2] Récupérer la valeur d’un attribut produit dans une page category, product list, product
  • [Magento 2] Login client et création de compte sur la même page
  • [Magento 2] Résolution des messages d’erreur en frontoffice, en admin et en bash
  • [Magento 2] Un menu de navigation drilldown en mobile avec Foundation 6 à partir du Topmenu.php natif
  • [Magento 2] DropdownDialog widget
  • [Magento 2] Récupérer dans un template PHTML des informations sur les différentes boutiques de votre site (ID, code, nom, URL, …)
  • [Magento 2] Paramétrer les styles du theme Venuse (Theme Forest) via des fichiers config.xml plutôt que via l’interface d’administration
  • [Magento 2] Accélérer la régénération de vos pages: quels dossiers ou caches vider, à quel moment et avec quelle ligne de commande bash?
  • [Magento 2] Surcharger un UI Component pour augmenter le temps d’affichage des messages de notification alerte
  • [Magento 2] js-translation.json Localisation de chaînes de caractères récalcitrantes (qui restent en anglais) dans les notifications messages d’alerte
  • [Magento 2] Nombre de produits par rangée via CSS LESS dans les listes de catégories
  • [Magento 2] La configuration de votre site de manière scriptée via le fichier config.php
  • [Magento 2] Email transactionnels – astuces et bonnes pratiques de customisation
  • [Magento 2] Configurer l’envoi de mail par SMTP lorsque vous travaillez avec Docker
  • [Magento 2] Corriger le bug de traduction du message d’ajout au panier
  • [Magento 2] Afficher une liste produits par sous-catégories sur la page principale d’une catégorie
  • [Magento 2] Récupérer le compte des produits possédant un attribut donné
  • [Magento 2] Créer des Swatches (ou échantillons) pour afficher toutes les options et prix d’un produit configurable dans la liste des catégories et des produits
  • [Magento 2] Produit configurable – afficher une fourchette de prix plutôt qu’un prix d’appel dans la liste des catégories/produits
  • [Magento 2] Masquer les décimales pour les prix ronds dans la liste produits
  • [Magento 2] Récupérer les Simple Products associés à un Configurable Product
  • [Magento 2] Créer un Helper pour récupérer sous forme d’objet dans un template PHTML des informations (ID, nom…) sur la catégorie produit en cours
  • [Magento 2] PHP dans les fichiers PHTML
  • [Magento 2] Surcharger override un layout ou un page layout XML
  • [Magento 2] Manipuler le rendu des prix
  • [Magento 2] Afficher les descriptions courte et complète des produits dans la page de liste produits
  • [Magento 2] Afficher un layout différent selon une catégorie spécifique
  • [Magento 2] Exploiter la fonctionnalité CSS critical path avec un fichier LESS (via Grunt)
  • [Magento 2] Rendre accessibles des styles custom dans l’éditeur WYSIWYG TinyMCE
  • [Magento 2] Surcharger un Block ou un Model natif
  • [Magento 2] Utiliser le source model Yesno pour faire apparaître de manière dynamique et sous condition un champ caché dans un widget custom
  • [Magento 2] Corriger les libellés non traduits ou localisés
  • [Magento 2] Afficher des widgets sur n’importe quelle page du site (CMS custom, category, product, …)
  • [Magento 2] Exploiter le widget javascript jQuery natif Modal dans un fichier PHTML en notation déclarative
  • [Magento 2] Astuces d’utilisation et de configuration de TinyMCE
  • [Magento 2] Initiation à l’injection de dépendances en créant un widget custom qui permet l’upload d’une image et l’ajout d’un lien vers une page CMS
  • [Magento 2] Ajouter un sélecteur d’image ou un champ WYSIWYG dans un widget custom
  • [Magento 2] Créer un widget custom et l’utiliser pour afficher un bloc statique dans une catégorie unique du catalogue
  • [Magento 2] Inclure un bloc statique depuis un champ WYSIWYG
  • [Magento 2] Multi-sites: ajouter le code du store en temps que classe CSS de l’élément Body
  • [Magento 2] Créer un Source Model custom
  • [Magento 2] Surcharge d’une classe PHP située dans app/code/Vendor/Module/Model/Config/Source via un namespace spécifique
  • [Magento 2] Astuces, bonnes pratiques de manipulation des layouts XML
  • [Magento 2] Afficher/masquer des fonctionnalités ou des modules depuis les layouts XML ou le fichier app/etc/config.php
  • [Magento 2] Retrouver rapidement des informations comme le store_id, le store code, le website_id, le group_id, le store name
  • [Magento 2] Des Websites ou des Stores multiples avec Docker et nginx
  • [Magento 2] Astuces d’utilisation du thème Supro
  • [Magento 2] Les commandes Magerun du développeur Front-End
  • [Magento 2] Utiliser Grunt pour compiler les assets front-end
  • [Magento 2] Comment inclure et utiliser un fichier JS custom avec requireJS
  • [Magento 2] Modifier le nombre de produits par rangée dans les listes produits
  • [Magento 2] Ajouter le framework Foundation 6 for sites dans un thème et rendre ses widgets javascript disponibles avec RequireJS
  • [Magento 2] Importer les points de rupture CSS LESS pour une exploitation avec javascript jQuery
  • [Magento 2] Exploiter matchMedia pour passer des paramètres différents à un widget javascript en fonction du breakpoint
  • [Magento 2] Utiliser des media queries, points de rupture, en LESS (CSS) et en javascript avec matchMedia
  • [Magento 2] Exploiter le widget javascript jQuery natif Accordion dans le fichier PHTML des filtres produit (page category)
  • [Magento 2] Ajouter et exploiter une librairie CSS tierce
  • [Magento 2] Ajouter et exploiter dans un fichier PHTML un composant javascript issu de Bootstrap 3 par l’intermédiaire de requireJS
  • [Magento 2] Ajouter et exploiter dans un fichier PHTML une fonction jQuery par l’intermédiaire de requireJS
• Category: Magento 2.x
  • [Magento 2] Utiliser le binding Foreach de Knockout JS pour splitter un tableau en autant d’items que le nombre qu’il contient dans un fichier html
  • [Magento 2] Etendre les possibilités de l’éditeur WYSIWYG TinyMCE 4
  • [Magento 2] Astuces et bonnes pratiques
  • [Magento 2.x] Les options du slider Fotorama natif
• Category: MySQL
  • [MySQL] Petit mémo des commandes MySQL utiles
• Category: Performances
  • [Performances] Les Progressive Web Applications (PWAs)
• Category: Photoshop
  • [Photoshop] Exporter ses icônes en SVG
• Category: PHP
  • [Change 3.6.x] Surcharger proprement un fichier .class.php
  • [PHP] Les fondamentaux pour développeurs front-end
  • [RBS Change 3.x] Effectuer une boucle tal:repeat qui rapporte l’ensemble des informations contenues dans une fonction
  • [RBS Change 3.x] Afficher ou masquer des éléments du DOM en fonction d’une condition avec PHPTal
  • [RBS Change 3.x] Utiliser var_dump pour récupérer en front l’ensemble des informations qu’un bloc est capable d’afficher
  • [PHP] Les opérateurs de comparaison et les opérateurs logiques
  • [PHPTAL] Afficher sous condition un tag qui n’est pas fermé avec tal:omit-tag
  • [RBS Change v3.x] Afficher différentes vues d’un bloc en éditant le fichier /lib/blocks/_nom_du_bloc_Action.class.php
• Category: Pimcore
  • [Pimcore] Utiliser le Bundle Webpack Encore de Symfony
• Category: Popcorn
  • [Popcorn] Configurer MPD et mettre à jour sa base de données
• Category: Préparation projet
  • Préconisations supports graphiques pour développement front-end
• Category: Prestashop
  • [Prestashop 1.6] Charger ou surcharger proprement un fichier CSS ou JS se trouvant dans un thème
• Category: RBS Change
  • [Change 3.6.x] Un modèle pour créer des formulaires spés
  • Protégé : [Change 3.x] Bonnes pratiques pour le développement à partir du thème naked-12-cols (branche responsive-modern) #2
  • Protégé : [Change 3.x] Bonnes pratiques pour le développement à partir du thème naked-12-cols (branche responsive-modern)
  • Protégé : [Change 3.x] Quelques notes sur le module Skin (habillage)
  • [RBS Change] Quelques notes sur l’utilisation de l’extension change:media pour afficher des visuels
  • [RBS Change 3.x] Attribuer un ID unique à un élément
  • [Change 3.x] Comment rajouter un fichier javascript dans un module change ?
  • [RBS Change 3.x] Dans un template de menu, ajouter une classe avec valeur incrémentée sur un élément contenu dans une boucle.
  • [Change 3.6.8] Surcharger les icônes par défaut des drapeaux pour le bloc Switchlanguage du module Website
  • [RBS Change] Quelques astuces pour mettre en place des locales dans RBS Change
  • [RBS Change v3.x.x][Module Emailing] Quelques astuces pour créer un gabarit de newsletter
  • [RBS Change v3.5.7][Module Marketing] animation : rajouter une vue supplémentaire
• Category: RBS Cooking
  • [RBS Cooking] Effectuer un dump d’une base de données et récupérer le fichier dans le répertoire du projet sur sa VM
  • [RBS Cooking] Mettre à jour les URLs Git de vos projets
  • [RBS Cooking] Créer un vhost dynamique pour les nuls
  • [RBS Cooking] Création d’un projet vierge pour les nuls
  • [RBS Cooking] Déploiement d’un projet existant pour les nuls
• Category: Responsive Design
  • [Responsive design][SASS] Un tableau responsive en mode No More Tables (version 2017)
• Category: SASS
  • [SASS][BEM] @at-root et ampersand
  • [SASS] Fonctions et mixins pour manipuler les couleurs
  • [SASS] Accéder à un élément contenu dans une map (tableau ou liste de variables)
  • [SASS] Intégrer une variable dans une URL
  • [SASS] Mixin button-reset pour annuler les styles appliqués aux boutons
  • [Bourbon] Astuces d’utilisation de la bibliothèque de mixins SASS
  • [Bootstrap 3] Ajouter un point de rupture supplémentaire à la grille avec la version SASS de Bootstrap 3
  • [SASS] Ressources utiles pour les utilisateurs de SASS et COMPASS
  • [Bootstrap 3][SASS] Changer la valeur de la variable $grid-columns
  • [SASS] Un tableau comparatif responsive en pure HTML/SASS
  • [SASS] Incrémenter une classe et choisir la variable suivante dans une liste avec @each
  • [SASS] [Mixin] Générer des triangles (arrows)
  • [SASS] Typographie responsive avec SASS maps
  • [SASS] [LESS] [Mixin] Générer des chevrons pour une boite type info-bulle
• Category: scss
  • [Webpack Encore] Utiliser la méthode addAliases pour résoudre les problèmes de sous-imports de fichiers sass/scss à l’utilisation de frameworks comme UiKit ou Foundation 6
• Category: SEO
  • [SEO] Obfuscation des liens pour le maillage interne
• Category: SPIP
  • [SPIP] Notes et astuces
• Category: SSH
  • [Ubuntu Server] Créer des alias
  • [SSH] Petit mémo des commandes utiles
  • [grep] Effectuer des recherches en SSH au sein d’une arborescence de fichiers avec la commande Grep
• Category: Twitter Bootstrap
  • [Bootstrap 3] Garder une popover ouverte lorsqu’on survole celle-ci avec la souris
  • [Bootstrap 3 et 4] Composant Collapse, la classe collapsed n’apparaît qu’après un premier affichage/masquage des éléments
  • [javascript] Construire une modale bootstrap 3 à la volée
  • [Bootstrap 3] Conserver plusieurs collapse ou dropdown ouverts simultanément
  • [Bootstrap] Centrer horizontalement des colonnes de la grille dans un design responsive à l’aide de CSS
  • [Bootstrap] Un breakpoint à 480px pour une prise en charge du rendu en orientation paysage sur périphériques mobiles (smartphones).
  • [Bootstrap] Caler sur les limites droite d’une page la partie déroulée d’un menu horizontal lui même aligné à droite
  • [Bootstrap] Créer des notifications en mode fly-over
  • [Bootstrap] Changer l’aspect du pictogramme Caret (instructions LESS dans notre exemple)
  • [Bootstrap] Changer l’aspect (couleurs de fond, de texte et de bordure) d’un bouton dropdown lorsqu’on clique sur tout autre élément dans la page.
  • [Bootstrap] Navbar et dropdown : un menu déroulant qui pousse le contenu au lieu de s’afficher par dessus.
  • [Bootstrap][Dropdown] Menus déroulants multi-niveaux avec Bootstrap 3
• Category: Ubuntu
  • [Ubuntu][Virtual Box][Réseau] Travailler en local sur une IP fixe
  • [Ubuntu] Modifier le hostname après installation
• Category: UIKit v3
  • [UIKit v3] Mettre à jour les options d’un composant
  • [UIkit] Exploiter le composant Toggle pour ajouter une fonctionnalité voir plus/voir moins
  • [Webpack Encore] Intégration d’UIkit v3 dans un projet Symfony pour un bundle à la carte
  • [Webpack Encore] Mes retours de tests d’intégration du code source du framework front-end UIkit v3 sous forme de bundle à la carte dans un projet ou thème
  • [UIKit v3] Boilerplate pour ajouter un composant javascript custom au framework
• Category: Uncategorized
  • [Twig] Utiliser le tag Set et la fonction Include pour récupérer les informations d’un fichier JSON dans un template Twig
  • [Javascript] Récupérer la largeur ou la hauteur d’un élément sans les padding, margin, bordure et scrollbar associés avec clientHeight, offsetHeight et parseFloat
  • [Magento 2] Gérer l’affichage des formulaires avec les mixins LESS de la Magento UI Library
  • [crossbrowsertesting.com] Effectuer des tests dans un environnement local sous Linux (Ubuntu) avec la fonctionnalité Local connection
  • [CSS] Hauteur égale d’éléments à l’intérieur d’un grid item avec CSS Grid Layout
  • [Docker] Faire un dump d’une table spécifique dans une base de données et récupérer le contenu dans un fichier txt hors container
  • [Magento 2] Créer une page monsite.com/customer/account/activate/
  • [crossbrowsertesting.com] Erreur « Invalid Host Header » où comment accéder à un site en localhost
  • [iOS] Prévenir le bug de Double Tap sur iPhones et iPads
  • [jQuery] Alimenter un tableau à partir d’une boucle .each() avec .push() et générer une liste UL LI avec les données stockées dans celui-ci
  • [Serveur] Configuration des en-têtes
  • [Chrome DevTools] Ressources en ligne, astuces, tutoriels
  • Liste des Carousels, Sliders gratuits pour vos projets
  • [jQuery][hoverIntent] Corriger le comportement de l’événement Mouseover lorsqu’on survole plusieurs éléments cibles à la suite
  • [jQuery] Illuminer un élément de menu au scroll dans la page
  • [RBS Change 3.6.x] erreurs et solutions
  • [Gulp] Passer des options pour lancer des tâches spécifiques suivant l’environnement (–dev –prod par exemple) avec yargs et gulp-if
  • [Gulp] Supprimer des fichiers ou dossiers avec le module Del
  • [Atom] Les raccourcis utiles
  • [IcoMoon] Créer une police d’icônes ou de pictogrammes avec IcoMoon, résolution d’erreurs
  • [Magento] Ajouter des couleurs sous forme d’images pour la fonctionnalité Color Swatch du thème RWD
  • [Enquire.js] Astuces d’utilisation de la solution JavaScript de media queries callbacks
  • [Magento] Résolution de problèmes liés à l’affichage d’un thème
  • [RBS Change] Ajouter un nouveau doctype au projet
  • [jQuery] [CSS] Une bordure CSS derrière un titre
  • [Police d’icônes] Correction d’un bug d’affichage sous Firefox
  • [Compatibilité IE] Forcer le dernier moteur de rendu dans Internet Explorer et Chrome Frame
• Category: UX Design
  • [UI/UX Design] Retours d’expérience sur des plugins JavaScript améliorant l’ergonomie des formulaires
  • [UX Design] La veille de l’UX Designer
  • [UX Design] Axure, ressources en lignes, bonnes pratiques
• Category: Vectoriel
  • Résoudre les problèmes d’affichage d’un picto SVG sous Mac et le navigateur Safari
  • [Polices d’icônes] Ressources en ligne, astuces, bonnes pratiques
  • [Adobe Illustrator] Quelques astuces d’utilisation pour préparer une police d’icônes
• Category: Virtualisation
  • [VirtualBox] Plantage partage samba d’un Ubuntu Server sous Windows – Installer les additions invité
  • [Vagrant] Quelques astuces d’utilisation
• Category: Webdesign
  • [Webdesign] Manipuler les couleurs pour créer une charte graphique
• Category: Webmarketing
  • [Webmarketing] Mes bookmarks, ressources en ligne
• Category: Webpack
  • [Webpack Encore] Générer des fichiers HTML à partir de templates Twig
  • [Webpack Encore] Optimiser vos bundles CSS avec PurgeCSS et JS et le tree shaking
  • [Webpack Encore] Utiliser Tailwind CSS 2, PurgeCSS avec Symfony
  • [Webpack Encore] Exploiter la méthode .addRule() et le module Assets Module pour optimiser des fichiers SVG
  • [Webpack Encore] Résoudre les problèmes d’imports et de sous-imports de composants JS à l’utilisation de frameworks comme UiKit ou Foundation 6
• Category: Wordpress
  • [WordPress] Créer un thème enfant
  • [Pastacode] Publier du code source en provenance de Pastebin dans un billet de blog
  • [WordPress] Utiliser des sprites CSS avec le plug-in Quickfinder de WordPress pour obtenir un effet d’images survolées