Mois : août 2018

[CSS print] Imprimer des couleurs de fond avec SVG et du texte en couleur

29/08/2018 / admin

Imprimer des couleurs de fond avec SVG

Source: Printing background colors with CSS and SVG

Browser support

Works on all modern desktop browsers (tested in Edge 14–16, Firefox 58–60, Chrome 61–63, Safari 11)
Not tested on mobile browsers
Does not work in IE11

<header class="grid-x grid-padding-x page-header">
  <div class="large-12 cell page-header-content">
    <h1>Titre principal</h1>
  </div>
</header>

<h1>Titre principal</h1>

</div>

</header>

// https://fvsch.com/css-print-background/
.page-header {
  position: relative;
}
.page-header > * {
  position: relative;
  z-index: 2;
}
.page-header::before {
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  /*
    In the URL, change the background to your own color.
    Warning: the `#` character must be escaped as %23,
    for example: `background:%23FFFF00` (yellow).
  */
  // content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='background:YOUR_COLOR_HERE' />");
  content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='background:%23FFFF00' />");
}

.page-header {
    color: #fff;
    // background: #000;
    border-bottom: 30px solid tomato;
}

// https://fvsch.com/css-print-background/

.page-header {

position: relative;

}

.page-header > * {

position: relative;

z-index: 2;

}

.page-header::before {

position: absolute;

z-index: 1;

top: 0;

bottom: 0;

left: 0;

right: 0;

overflow: hidden;

In the URL, change the background to your own color.

Warning: the `#` character must be escaped as %23,

for example: `background:%23FFFF00` (yellow).

// content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='background:YOUR_COLOR_HERE' />");

content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' style='background:%23FFFF00' />");

}

.page-header {

color: #fff;

// background: #000;

border-bottom: 30px solid tomato;

}

Imprimer du texte en couleur

Attention: testé uniquement sous Chrome! Appliquer -webkit-print-color-adjust: exact; sur l’élément body et cibler avec précision l’élément à imprimer en couleur (ne fonctionnera pas sur des enfants, si la couleur est déclarée sur un élément parent) tout en ajoutant !important.

body {
  -webkit-print-color-adjust: exact;
}

@media print {
  .page-header h1 {
    color: $white !important;
  }
}

body {

-webkit-print-color-adjust: exact;

}

@media print {

.page-header h1 {

color: $white !important;

}

[Webmarketing] Mes bookmarks, ressources en ligne

22/08/2018 / admin

Think with Google – une mine d’informations sur les habitudes en ligne des internautes, de la navigation à leurs achats, en passant par leur fréquentation des réseaux sociaux.

Paramétrer Google Analytics

Présentation de Google Analytics

1.4 Configurer des vues à l’aide de filtres

Filtres Google Analytics de base LunaMetrics – In Google Analytics, Filters are used by Views to segment the data into smaller groups. Filters can be used to include only specific subsets of traffic, exclude unwanted data, or to search and replace certain pieces of information.
Guide LunaMetrics des expressions régulières (PDF)

Interface Google Analytics

2.5 Comment configurer des tableaux de bord et des raccourcis

Tableaux de bord de la Galerie de solutions – Dans la Galerie de solutions, vous trouverez des tableaux de bord gratuits conçus par la communauté Google Analytics, que vous pouvez ajouter à une vue Google Analytics.

Suivi standard des campagnes et des conversions

4.1 Mesurer les campagnes personnalisées

4.3 Mesurer les objectifs commerciaux à l’aide des rapports « Objectifs »

Modèles d’objectifs dans la galerie de solutions

Glossaire du marketing numérique (fourni par Google)

Comment définir une stratégie webmarketing – Savoir où aller : définir vos objectifs, Définir la stratégie à mettre en place, Estimer le ROI (Hubspot a eu la bonne idée de réaliser un benchmark de plus de 7 000 entreprises et d’étudier les résultats observés pour chacune d’elle en fonction des stratégies webmarketing déployées. Ce rapport vous donnera notamment des infos intéressantes sur les impacts d’une stratégie de contenu et de social media, en B2B comme en B2C, et dans les PME comme dans les grands groupes !), Mesurer le ROI réel.
10 objectifs marketing à connaître pour booster votre stratégie digitale – Augmenter votre trafic, Améliorer l’image de marque (e-réputation), Augmenter le taux de conversion de votre site Internet, Augmenter votre liste de contacts (leads), Augmenter votre nombre de prospects qualifiés, Augmenter les ventes, Fidéliser les internautes et construire une communauté, Atteindre les influenceurs et les bloggers, Augmenter l’engagement des internautes, Impliquer vos employés.

A/B testing

Comment faire un test A/B avec Google Analytics et doubler l’efficacité de votre site !

[CSS] Un élément sticky en position: fixed; dans une iFrame sous iOS/iPhone

20/08/2018 / admin

Source: https://github.com/PierBover/ios-iframe-fix.

Code source de la solution en full CSS: ios-iframe-fix-master.

[CSS] Petits soucis à l’utilisation des propriétés Column

06/08/2018 / admin

Source: Some problems just never go away… especially where CSS3 multi-columns are concerned. Une alternative aux colonnes CSS3 avec le plugin jQuery Columnizer.

Problème: le contenu ne se répartit pas automatiquement de façon homogène lorsqu’on utilise les règles column-count et column-gap. Tenter les 2 fixes ci-dessous, sinon utiliser le plugin jQuery Columnizer.

.columns {
  -moz-column-count: 3;
  -webkit-column-count: 3;
  column-count: 3;
  -moz-column-gap: 3em;
  -webkit-column-gap: 3em;
  column-gap: 3em;
}

/* Fix for unbalanced top alignment in Chrome */
.columns > * {
  -webkit-column-break-inside: avoid;
  column-break-inside: avoid;
}

.columns {

-moz-column-count: 3;

-webkit-column-count: 3;

column-count: 3;

-moz-column-gap: 3em;

-webkit-column-gap: 3em;

column-gap: 3em;

}

/* Fix for unbalanced top alignment in Chrome */

.columns > * {

-webkit-column-break-inside: avoid;

column-break-inside: avoid;

}

/* New fix for Safari */
.columns > * {
  display: inline-block;
  width: 100%;
}

/* New fix for Safari */

.columns > * {

display: inline-block;

width: 100%;

}

[javaScript] boucler dans un tableau

06/08/2018 / admin

Source: How to loop through array in jQuery?

javaScript

var i;
for (i = 0; i < substr.length; ++i) {
    // do something with `substr[i]`
}

var i;

for (i = 0; i < substr.length; ++i) {

// do something with `substr[i]`

}

jQuery

jQuery.each(substr, function(index, item) {
    // do something with `item` (or `this` is also `item` if you like)
});

jQuery.each(substr, function(index, item) {

// do something with `item` (or `this` is also `item` if you like)

});

ES5

substr.forEach(function(item) {
    // do something with `item`
});

substr.forEach(function(item) {

// do something with `item`

});

[jQuery] Empêcher un événement de s’exécuter à de multiples reprises avec les méthodes On et Off (entre autres)

02/08/2018 / admin

Source: Prevent jQuery events from firing multiple times

Le problème

 $('a', '#cdDropdown').on('click', cachedMenu);

1	$('a', '#cdDropdown').on('click', cachedMenu);

Avec cette déclaration, la fonction cachedMenu à exécuter au clic sur un lien enfants de #cdDropdown dans le DOM était exécutée plusieurs fois (6 fois) à chacun de mes clics. La multiplication des exécutions était exponentielle car en m’amusant à cliquer environ 12 à 15 fois sur des liens, la console de debug a loggué pas moins de 11045 exécutions de ma fonction!!!

La solution

 $('a', '#cdDropdown').off('click', cachedMenu).on('click', cachedMenu);

1	$('a', '#cdDropdown').off('click', cachedMenu).on('click', cachedMenu);

Avant d’activer un événement avec la méthode jQuery .on(), il faut tout simplement le désactiver avec la méthode .off().

[javaScript] Mettre en cache un sous-niveau de navigation pour éviter un crash du navigateur sous iOS (iPhone)

02/08/2018 / admin

Inspiration pour ce code:

Je pars d’un menu dont la structure HTML est la suivante (une liste imbriquée simple) : https://jsfiddle.net/xpvt214o/513005/.

<ul class="level0">
  <li>level0
    <ul class="level1">
      <li>level1
        <ul class="level2">
          <li>level2</li>
          <li>level2</li>
          <li>level2</li>
          [...]
        </ul>
      </li>
  </li>
</ul>

<li>level0

<li>level1

<li>level2</li>

[...]

</ul>

</li>

</ul>

Sous iPhone, le menu a visiblement trop d’entrées. En tout cas lorsqu’on l’affiche, le navigateur Safari crashe et recharge la page. J’ai remarqué au cours de mes tests qu’en supprimant le dernier sous-niveau d’arborescence (.level2 dans mon exemple), le navigateur ne crashait plus. J’ai donc mis en place un système de cache du dernier sous-niveau d’arborescence de mon menu.

Ce système consiste à mettre en cache dans un tableau javaScript array et à l’aide des méthodes .push() et .detach() (jQuery) tous les derniers sous-niveaux d’arborescence. Ils ne sont, de cette manière, plus présents dans le DOM lorsqu’on ouvre le menu qui se trouve ainsi beaucoup plus léger à manipuler.

A l’activation d’un sous-menu mis en cache, on le fait ré-apparaître dans le DOM en le sortant du tableau. On fait le lien entre la rubrique activée et la sous-rubrique correspondante via un système d’IDs:

// Mise en cache du niveau 2 (crash iOS)
var $cdDropdown = $('#cdDropdown');
$cdDropdown.find('.level2').each(function(){
    cachedMenuEntries.push($(this).detach());
});

$cdDropdown.on('DOMSubtreeModified', function(e) {
    if (e.target.innerHTML.length > 0) {
        $('a', '#cdDropdown').off('click', cachedMenu).on('click', cachedMenu);
    }
});
// end: Mise en cache du niveau 2 (crash iOS)

// Mise en cache du niveau 2 (crash iOS)

var $cdDropdown = $('#cdDropdown');

$cdDropdown.find('.level2').each(function(){

cachedMenuEntries.push($(this).detach());

});

$cdDropdown.on('DOMSubtreeModified', function(e) {

if (e.target.innerHTML.length > 0) {

$('a', '#cdDropdown').off('click', cachedMenu).on('click', cachedMenu);

}

});

// end: Mise en cache du niveau 2 (crash iOS)

function goBack(e) {
    var eClosestUl = e.closest('ul');
    if(eClosestUl.hasClass('level2')){
        eClosestUl.parent('.has-children').parent('ul').removeClass('move-out');
        eClosestUl.remove();
    }
    else{
        eClosestUl.addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out');
    }
}

function cachedMenu(e) {
    var element = $(e.currentTarget);
    if(!element.closest('li').hasClass('go-back') && element.closest('ul').hasClass('level1')) {
        var getEntryID = element.closest('li').attr('id');
        matchValue = getEntryID.split('li-')[1];
        $(cachedMenuEntries[searchStringInArray(matchValue, cachedMenuEntries)])
            .removeClass('is-hidden')
            .insertAfter(element);
    }
    if(element.closest('li').hasClass('go-back')) {
        goBack(element);
    }
}

function searchStringInArray (str, strArray) {
    for (var j=0; j<strArray.length; j++) {
        if (strArray[j].context.id == 'ul-'+str) return j;
    }
    return -1;
}

function goBack(e) {

var eClosestUl = e.closest('ul');

if(eClosestUl.hasClass('level2')){

eClosestUl.parent('.has-children').parent('ul').removeClass('move-out');

eClosestUl.remove();

}

else{

eClosestUl.addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out');

}

function cachedMenu(e) {

var element = $(e.currentTarget);

if(!element.closest('li').hasClass('go-back') && element.closest('ul').hasClass('level1')) {

var getEntryID = element.closest('li').attr('id');

matchValue = getEntryID.split('li-')[1];

$(cachedMenuEntries[searchStringInArray(matchValue, cachedMenuEntries)])

.removeClass('is-hidden')

.insertAfter(element);

}

if(element.closest('li').hasClass('go-back')) {

goBack(element);

}

function searchStringInArray (str, strArray) {

for (var j=0; j<strArray.length; j++) {

if (strArray[j].context.id == 'ul-'+str) return j;

}

return -1;

}

On invoque la fonction searchStringInArray pour rechercher dans l’intégralité des entrées du tableau cachedMenuEntries l’information [*].context.id qui va matcher avec l’ID de la rubrique que nous venons d’activer:

Axes d’amélioration

Utiliser un tableau clé/valeur (key/value)

D’autres pistes si vous avez des crashes iOS

Les crashes peuvent provenir de transitions CSS mal paramétrées; CSS GPU Animation: Doing It Right.

Articles récents

Catégories

Archives

Méta