Mois : avril 2017

[Magento 1.x] modifier proprement la meta viewport

Mettre en place les bons attributs de la meta Viewport permet, notamment dans le cadre d’un site Responsive, d’éviter un scroll horizontal en vue Mobile/Smartphone.

Lorsque ce type de bugs se produit, on pense d’abord à vérifier les styles ou à placer une propriété overflow-x: hidden; sur les éléments html, body.

Bien souvent, cet effet de bord se corrige plutôt en mettant en place la balise meta Viewport adéquate au mode d’affichage de son site. Dans Magento 1.x et pour un site Responsive, la meta Viewport se modifie comme suit:

Fichier {mon_projet}\app\design\frontend\{mon_package}\{mon_thème}\layout\page.xml:

[Gulp] Spritesmith

Utilisation de gulp.spritesmith-multi, ATTENTION: je déconseille l’utilisation de ce plugin pour créer plusieurs sprites à partir d’une tâche Gulp unique. Préférer gulp-spritesmith et l’utilisation de gulp-folders.

Ressources en ligne:

Gulp – make one sprite per folder

Source: Gulp – make sprites by folder

Plugins: path, gulp.spritesmith, merge-stream, gulp-folders, imagemin, imagemin-pngquant ATTENTION: dans le sujet StasckOverflow, l’auteur omet le plugin gulp-folders dans la liste des paquets requis.

Créer un sprite bitmap (PNG, JPG) par dossier

Spritesmith : Multiple spritesheets, one css file?

Source: Multiple spritesheets, one css file?

It’s possible to have multiple sprite sheets based on directory structure, but all de CSS go to just one single file?
For example, given this directory structure:

it’s possible to generate two spritesheets icons-spritesheet.png and logos-spritesheet.png, and then all the CSS just to one file, lets say css/sprites.css.

Error: Cannot find module ‘gulp.spritesmith’

Si ce message d’erreur apparaît au lancement de la tâche Gulp, tenter une installation avec la commande suivante et à la racine du dossier qui contient la gulpfile.js :

[Gulp] Supprimer un ensemble de fichiers ayant la même extension avec Del et la méthode .unshift() en omettant certains fichiers en particulier

Problème

J’ai une tâche style:clean qui supprime des fichiers inutiles et ayant l’extension *.css dans un dossier /style. Le plugin Del fonctionne très bien pour ça, mais j’avais besoin de déclarer le scope des fichiers à cibler par la tâche en 2 entités distinctes :

  • Le chemin vers le dossier style/ et le format de fichier à cibler (config.paths.styles.dest + '*.css').
  • Une liste de fichiers à ignorer (config.clean.style.ignore).

Lors de mes tests infructueux, les fichiers ignorés étaient supprimés.

Solution

La méthode .unshift() permet l’insertion d’éléments en début de tableau.

Dans mon fichier gulpconf.json:

Si vous n’avez pas de fichiers à ignorer, laissez le tableau vide comme ceci:

Dans mon gulpfile.js:

Optimiser ce code en passant par une fonction

ATTENTION: ce code ne fonctionne pas. En réalité, si vous avez plusieurs tâches de clean (css, js, etc…), le lancement d’une seule de ces tâches va également faire le travail de toutes les autres …

Exemple: je lance gulp js:clean et les fichiers CSS concernés par la tâche gulp css:clean sont effacés également.

[WordPress] Créer un thème enfant

Le fait de pouvoir créer un thème enfant sous WordPress a déjà été abordé par de nombreux blogueurs. L’information est facilement accessible sur la toile, y-compris en français. Il suffit de taper les mots-clés « wordpress theme enfant » dans Google pour s’en rendre compte.

Pourquoi alors publier un énième billet sur le sujet? Parce que j’ai moi-même récemment cherché à rapidement (à mon sens, un truc aussi simple ne doit pas me faire perdre trois heures de mon temps) mettre en place un thème enfant sous WordPress. Parce qu’au bout du troisième tutoriel passé à copier/coller des lignes de code laissées en exemple qui ne fonctionnaient pas et parce qu’après avoir mis bout-à-bout des informations glanées sur différents forums d’entraide j’ai finalement trouvé la solution à un problème qui ne devrait vraiment pas en être un, j’ai décidé de tout remettre à plat.

En d’autres termes: si vous n’avez jamais mis en place de thème enfant sous WordPress et que vous choisissez de passer par du code plutôt que par un plugin, vous pouvez continuer la lecture de cet article.

Utilité de la création d’un thème enfant sous WordPress

L’un des nombreux avantages à utiliser WordPress reste la force de production de sa communauté. Vous n’avez pas l’âme d’un graphiste? Vous pourrez choisir parmi une multitude de thèmes payants ou gratuits mis à disposition sur de nombreux sites, sur GitHub et pour certains même, directement depuis l’interface d’administration de WordPress.

Dans certains cas, le thème choisi peut ne pas correspondre tout-à-fait à vos attentes et vous allez chercher à agir sur son code source pour en modifier l’affichage, les fonctionnalités, etc… Il faut, à ce moment là, ne pas perdre de vue le fait que le développeur de votre thème peut également le faire évoluer de son côté pour corriger des bugs ou apporter lui aussi de nouvelles fonctionnalités. Vous serez notifié des possibles mises à jour en vous connectant à votre interface d’administration. Si vous avez modifié, de votre côté, les fichiers source du thème et que vous effectuez une mise à jour de ce dernier, vos modifications seront écrasées et vous perdrez le bénéfice de votre travail de personnalisation.

Effectuer vos modifications de code dans un thème enfant va notamment vous permettre:

  1. de bénéficier de toutes les fonctionnalités du thème que vous avez précédemment installé et activé (dit thème parent) sans jamais avoir à le modifier,
  2. d’isoler totalement vos développements spécifiques,
  3. de bénéficier des mises à jour du thème parent sans que celles-ci ne viennent écraser vos modifications et, ainsi, d’en conserver le bénéfice.

A l’exception du fichier functions.php, tous les fichiers surchargés (fichiers aux noms et aux fonctionnalités similaires dans les deux thèmes) dans votre thème enfant, prendront le dessus.

Cas pratique

Dans l’exemple qui va suivre, je choisis de partir du thème parent Wilson que vous pourrez ajouter à WordPress directement depuis l’interface d’administration.

Pour créer le thème enfant, nous allons ajouter un dossier wilson-child à la racine du dossier contenant l’ensemble des thèmes installés sur votre instance WordPress (wp-content/themes/).
Nous allons ensuite, à l’intérieur de ce nouveau dossier, créer 2 fichiers :

wp-content/themes/wilson-child/functions.php :

wp-content/themes/wilson-child/style.css :

  • Theme Name: Le nom de votre thème enfant
  • Theme URI: http://votre-site.com/url-de-votre-theme-enfant/
  • Description: Thème enfant basé sur {le thème parent}
  • Author: John DOE
  • Author URI: http://votre-site.com
  • Template: [le nom du dossier qui contient le thème parent]
  • Version: 1.0.0
  • License: GNU General Public License v2 or later
  • License URI: http://www.gnu.org/licenses/gpl-2.0.html
  • Tags: [les mots clés pour décrire votre thème enfant]
  • Text Domain: [theme-parent-child]

Il est également possible d’ajouter un screenshot…

Pour activer notre thème enfant…

Mmm, ok, mais on ne peut pas faire ça avec un plugin?

[SASS] Intégrer une variable dans une URL

Avec gulp-sass

Nous donnera: @import url("/themes/lorem/style/bootstrap.min.css");.

Avec gulp-ruby-sass

Attention:

Nous donnera: @import url("/themes/lorem/style/bootstrap.min.css");.

[CSS] Ne pas hériter de l’opacité d’un parent avec les Color Operation Functions de LESS ou SASS

…et notamment la fonction fade.

Source SASS: Mixins for semi-transparent colors.

Source LESS (notre exemple ci-dessous) : la doc de LESS à propos des Color Operation Functions, I do not want to inherit the child opacity from the parent in CSS et Modify alpha opacity of LESS variable.

[javascript] Ressources utiles, bonnes pratiques

Ressources pour apprendre (tutos, moocs, …)

En français

En anglais

Méthodologie

Outils de développement

  • Prepack – A tool for making JavaScript code run faster. Prepack is a tool that optimizes JavaScript source code: Computations that can be done at compile-time instead of run-time get eliminated. Prepack replaces the global code of a JavaScript bundle with equivalent code that is a simple sequence of assignments. This gets rid of most intermediate computations and object allocations.