avril 2017 – devfrontend.info

Monthavril 2017

[Magento 1.x] modifier proprement la meta viewport

25/04/2017 / admin

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:

<!-- Sets viewport meta tag using text block -->
<block type="core/text" name="head.viewport">
    <action method="setText"><text><![CDATA[<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />]]>&#10;</text></action>
</block>

</block>

[Gulp] Spritesmith

24/04/2017 / admin

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:

https://stefanimhoff.de/2014/gulp-tutorial-10-generating-sprites/ – avec notamment la gestion des :hover
Tuto intéressant pour aller plus loin avec gulp-spritesmith: CSS Sprite Management with Gulp, Part 2.

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.

gulp.task(
    'sprites', folders(path.src.sprites, function (folder) {
        // Generate our spritesheet
       var spriteData = gulp.src(npmpath.join(path.src.sprites, folder, '*.png'))
           .pipe(spritesmith({
                imgName: 'sprite_' + folder + '.png',
                cssName: 'sprite_' + folder + '.scss'
            }));

        // Pipe image stream through image optimizer and onto disk
        var imgStream = spriteData.img
            .pipe(imagemin({
                progressive: true,
                interlaced: true,
                optimizationLevel: 7,
                svgoPlugins: [{removeViewBox: false}, {removeUselessStrokeAndFill: false}],
                use: [pngquant({quality: '65-80', speed: 4})]
            }))
            .pipe(gulp.dest(path.build.sprites))
            .pipe(notify({message: 'SPRITE IMG task complete', onLast: true}));
        // Pipe CSS stream through CSS optimizer and onto disk
        var cssStream = spriteData.css
            .pipe(gulp.dest(path.src.sassFolder + 'module/sprites'))
            .pipe(notify({message: 'SPRITE SCSS task complete', onLast: true}));

        // Return a merged stream to handle both `end` events
        return merge(imgStream, cssStream);

}));

gulp.task(

'sprites', folders(path.src.sprites, function (folder) {

// Generate our spritesheet

var spriteData = gulp.src(npmpath.join(path.src.sprites, folder, '*.png'))

.pipe(spritesmith({

imgName: 'sprite_' + folder + '.png',

cssName: 'sprite_' + folder + '.scss'

}));

// Pipe image stream through image optimizer and onto disk

var imgStream = spriteData.img

.pipe(imagemin({

progressive: true,

interlaced: true,

optimizationLevel: 7,

svgoPlugins: [{removeViewBox: false}, {removeUselessStrokeAndFill: false}],

use: [pngquant({quality: '65-80', speed: 4})]

}))

.pipe(gulp.dest(path.build.sprites))

.pipe(notify({message: 'SPRITE IMG task complete', onLast: true}));

// Pipe CSS stream through CSS optimizer and onto disk

var cssStream = spriteData.css

.pipe(gulp.dest(path.src.sassFolder + 'module/sprites'))

.pipe(notify({message: 'SPRITE SCSS task complete', onLast: true}));

// Return a merged stream to handle both `end` events

return merge(imgStream, cssStream);

}));

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

function spriteData(folder, format){
  return gulp.src(path.join(config.paths.images.sprites.src, folder, '*'+format))
    .pipe(plugins.changed(config.paths.images.dest))
    .pipe(plugins.imagemin())
    .pipe(plugins.spritesmith({
      cssName: config.plugins.spritesmith.cssName + folder + '.' + config.plugins.spritesmith.cssFormat,
      imgName: config.plugins.spritesmith.imgName + folder + format,
      imgPath: config.plugins.spritesmith.imgPath + folder + format,
      cssVarMap: function (sprite) {
        sprite.name = config.plugins.spritesmith.classPrefix + sprite.name;
      }
    }));
}

gulp.task('bitmap:sprite', plugins.folders(config.paths.images.sprites.src, function (folder) {
  var spriteDataPng = spriteData(folder,'.png');
  var spriteDataJpg = spriteData(folder,'.jpg');
  var imgStreamPng = spriteDataPng.img
    .pipe(gulp.dest(config.paths.images.dest));
  var cssStreamPng = spriteDataPng.css
    .pipe(gulp.dest(config.paths.styles.src));
  var imgStreamJpg = spriteDataJpg.img
    .pipe(gulp.dest(config.paths.images.dest));
  var cssStreamJpg = spriteDataJpg.css
    .pipe(gulp.dest(config.paths.styles.src));
  return merge(imgStreamPng, cssStreamPng, imgStreamJpg, cssStreamJpg);
}));

function spriteData(folder, format){

return gulp.src(path.join(config.paths.images.sprites.src, folder, '*'+format))

.pipe(plugins.changed(config.paths.images.dest))

.pipe(plugins.imagemin())

.pipe(plugins.spritesmith({

cssName: config.plugins.spritesmith.cssName + folder + '.' + config.plugins.spritesmith.cssFormat,

imgName: config.plugins.spritesmith.imgName + folder + format,

imgPath: config.plugins.spritesmith.imgPath + folder + format,

cssVarMap: function (sprite) {

sprite.name = config.plugins.spritesmith.classPrefix + sprite.name;

}

}));

}

gulp.task('bitmap:sprite', plugins.folders(config.paths.images.sprites.src, function (folder) {

var spriteDataPng = spriteData(folder,'.png');

var spriteDataJpg = spriteData(folder,'.jpg');

var imgStreamPng = spriteDataPng.img

.pipe(gulp.dest(config.paths.images.dest));

var cssStreamPng = spriteDataPng.css

.pipe(gulp.dest(config.paths.styles.src));

var imgStreamJpg = spriteDataJpg.img

.pipe(gulp.dest(config.paths.images.dest));

var cssStreamJpg = spriteDataJpg.css

.pipe(gulp.dest(config.paths.styles.src));

return merge(imgStreamPng, cssStreamPng, imgStreamJpg, cssStreamJpg);

}));

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:

sprites/
    icons/
        icon1.png
        icon2.png
    logos/
        logo1.png
        logo2.png

sprites/

icons/

icon1.png

icon2.png

logos/

logo1.png

logo2.png

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.

// Load in our dependencies
var gulp = require('gulp');
var concat = require('gulp-concat');
var merge = require('merge-stream');
var spritesmith = require('gulp.spritesmith');

// Define our gulp task
gulp.task('sprite', function () {
  // Generate our spritesheets
  var iconSpriteData = gulp.src('icons/*.png').pipe(spritesmith({
    imgName: 'icons.png',
    cssName: 'icons.css'
  }));
  var logoSpriteData = gulp.src('logos/*.png').pipe(spritesmith({
    imgName: 'logos.png',
    cssName: 'logos.css'
  }));

  // Output our images
  var iconImgStream = iconSpriteData.img.pipe(gulp.dest('path/to/image/folder/'));
  var logoImgStream = logoSpriteData.img.pipe(gulp.dest('path/to/image/folder/'));

  // Concatenate our CSS streams
  var cssStream = merge(iconSpriteData.css, logoSpriteData.css)
    .pipe(concat('main.css'))
    .pipe(gulp.dest('path/to/css/folder/'));

  // Return a merged stream to handle all our `end` events
  return merge(iconImgStream, logoImgStream, cssStream);
});

// Load in our dependencies

var gulp = require('gulp');

var concat = require('gulp-concat');

var merge = require('merge-stream');

var spritesmith = require('gulp.spritesmith');

// Define our gulp task

gulp.task('sprite', function () {

// Generate our spritesheets

var iconSpriteData = gulp.src('icons/*.png').pipe(spritesmith({

imgName: 'icons.png',

cssName: 'icons.css'

}));

var logoSpriteData = gulp.src('logos/*.png').pipe(spritesmith({

imgName: 'logos.png',

cssName: 'logos.css'

}));

// Output our images

var iconImgStream = iconSpriteData.img.pipe(gulp.dest('path/to/image/folder/'));

var logoImgStream = logoSpriteData.img.pipe(gulp.dest('path/to/image/folder/'));

// Concatenate our CSS streams

var cssStream = merge(iconSpriteData.css, logoSpriteData.css)

.pipe(concat('main.css'))

.pipe(gulp.dest('path/to/css/folder/'));

// Return a merged stream to handle all our `end` events

return merge(iconImgStream, logoImgStream, cssStream);

});

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 :

$ sudo npm install gulp.spritesmith --save-dev

1	$ sudo npm install gulp.spritesmith --save-dev

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

21/04/2017 / admin

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:

{
  "paths": {
    "styles": {
        "src": "src/style/",
        "dest": "style/"
    }
  },
  "clean": {
    "style": {
      "ignore": ["!style/layout.css", "!style/layout.xul.all.css", "!style/skin-variables.css", "!style/skin.css"]
    }
  }
}

{

"paths": {

"styles": {

"src": "src/style/",

"dest": "style/"

}

"clean": {

"style": {

"ignore": ["!style/layout.css", "!style/layout.xul.all.css", "!style/skin-variables.css", "!style/skin.css"]

}

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

{
  "clean": {
    "style": {
      "ignore": []
    }
  }
}

{

"clean": {

"style": {

"ignore": []

}

Dans mon gulpfile.js:

gulp.task('style:clean', function(){
  var arr = config.clean.style.ignore;
  arr.unshift(config.paths.styles.dest + '*.css');
  del.sync(arr);
});

gulp.task('style:clean', function(){

var arr = config.clean.style.ignore;

arr.unshift(config.paths.styles.dest + '*.css');

del.sync(arr);

});

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.

function gulpClean(type, format){ var arr = eval("config.clean."+type+".ignore"); arr.unshift(eval("config.paths."+type+"s.dest + '*."+format+"'")); del.sync(arr); } gulp.task('style:clean', gulpClean('style', 'css'));

1
2
3
4
5
6
7

function gulpClean(type, format){
  var arr = eval("config.clean."+type+".ignore");
  arr.unshift(eval("config.paths."+type+"s.dest + '*."+format+"'"));
  del.sync(arr);
}

gulp.task('style:clean', gulpClean('style', 'css'));

[WordPress] Créer un thème enfant

19/04/2017 / admin

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:

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,

d’isoler totalement vos développements spécifiques,

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 :

<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); }

1
2
3
4
5

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

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

/* Theme Name: Wilson Child Theme URI: https://{mon-site.com}/themes/wilson-child/ Description: Child theme based on Wilson Author: John DOE Author URI: - Template: wilson Version: 1.0.0 Tags: tag0, tag1, tag2 Text Domain: wilson-child */

1
2
3
4
5
6
7
8
9
10
11

/*
Theme Name:   Wilson Child
Theme URI:    https://{mon-site.com}/themes/wilson-child/
Description:  Child theme based on Wilson
Author:       John DOE
Author URI:   -
Template:     wilson
Version:      1.0.0
Tags:         tag0, tag1, tag2
Text Domain:  wilson-child
*/

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?

[CSS] Grid: ressources en ligne, bonnes pratiques et astuces

12/04/2017 / admin

GRID GARDEN – A game for learning CSS grid layout

[SASS] Intégrer une variable dans une URL

12/04/2017 / admin

Avec gulp-sass

$toto: lorem; @import url('/themes/#{$toto}/style/bootstrap.min.css');

1
2

$toto: lorem;
@import url('/themes/#{$toto}/style/bootstrap.min.css');

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

Avec gulp-ruby-sass

Attention:

$toto: lorem; @import url('/themes/' + $toto + '/style/bootstrap.min.css');

1
2

$toto: lorem;
@import url('/themes/' + $toto + '/style/bootstrap.min.css');

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

[Magento 2] Astuces et bonnes pratiques

11/04/2017 / admin

Magento 2 Frontools – Set of front-end tools for Magento 2 based on Gulp.js

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

05/04/2017 / admin

…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.

@veil-color: mix(@brand-tertiary, @text-color, 40%, 60%); .rating{ background: fade(@veil-color,10%); }

1
2
3
4
5

@veil-color: mix(@brand-tertiary, @text-color, 40%, 60%);

.rating{
  background: fade(@veil-color,10%);
}

[javascript] Ressources utiles, bonnes pratiques

03/04/2017 / admin

Ressources pour apprendre (tutos, moocs, …)

En français

Module pattern en JavaScript sur https://zestedesavoir.com

En anglais

http://jstherightway.org/

Méthodologie

Learning JavaScript Design Patterns – A book by Addy Osmani – Volume 1.7.0. Version PDF.

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.

devfrontend.info

Le bloc-notes professionnel d'un développeur front-end senior

Articles récents

Catégories

Archives

Méta

Monthavril 2017

[Magento 1.x] modifier proprement la meta viewport

[Gulp] Spritesmith

Ressources en ligne:

Gulp – make one sprite per folder

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

Spritesmith : Multiple spritesheets, one css file?

Error: Cannot find module ‘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

Problème

Solution

Optimiser ce code en passant par une fonction

[WordPress] Créer un thème enfant

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

Cas pratique

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

[CSS] Grid: ressources en ligne, bonnes pratiques et astuces

[SASS] Intégrer une variable dans une URL

Avec gulp-sass

Avec gulp-ruby-sass

[Magento 2] Astuces et bonnes pratiques

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

[javascript] Ressources utiles, bonnes pratiques

Ressources pour apprendre (tutos, moocs, …)

En français

En anglais

Méthodologie

Outils de développement