Monthaoût 2018

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

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

[Webmarketing] Mes bookmarks, ressources en ligne

  • 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

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 »


  • 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

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

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

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.

[javaScript] boucler dans un tableau

Source: How to loop through array in jQuery?

javaScript

jQuery

ES5

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

Source: Prevent jQuery events from firing multiple times

Le problème

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

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)

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

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:

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

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑