Le Blog

Le blog laboratoire de F.L.D. Studio
0

LINKS - 03-2017

https://gibbok.github.io/animatelo/

https://dollarshaveclub.github.io/scrolldir/

https://github.com/developit/unfetch

http://scrollanim.kissui.io/

https://dixonandmoe.com/rellax/

http://t-scroll.com/  (ne fonctionne pas sous IE10, CSS compliqué)

https://css-tricks.com/fun-viewport-units/

https://medium.freecodecamp.com/how-to-get-the-most-out-of-the-javascript-console-b57ca9db3e6d

https://una.im/local-css-vars/

https://hackernoon.com/11-things-i-learned-reading-the-flexbox-spec-5f0c799c776b

https://css-tricks.com/making-animations-wait/

https://css-tricks.com/lets-look-50-interesting-css-properties-values/

https://github.com/hsnaydd/moveTo

https://www.appcues.com/blog/73-tooltip-plugins-made-with-jquery-css-javascript-or-more/

http://iterare.surge.sh/index.html

https://bttn.surge.sh/

https://twitter.com/hashtag/webdev?src=hash

https://joshuajohnson.co.uk/Choices/

http://maxlab.fr/javascript/comprendre-et-maitriser-npm-introduction/

http://cssicon.space/?utm_source=codropscollective#/icon/relieved-solid

https://www.webcomponents.org/

https://w3c.github.io/aria-practices/examples/landmarks/HTML5.html

https://jets.js.org/

https://sachinchoolur.github.io/lightgallery.js/

http://simpleslider.bitlabs.nl/

https://kilianvalkhof.com/2017/design/sloped-edges-with-consistent-angle-in-css/

http://tawian.io/text-spinners/

Commentaires: Pas de commentaires

0

Images et performances

performance

La performance web est une préocupation récurante et complexe. Plus le contenu est riche plus elle se dégrade. L'idée est donc de diminuer le contenu en se passant du superflu pour fournir au plus vite une information pertinante.

Le cas le plus classique concerne l'affichage des images. Qu'elles soient optimisées ou compressées elles conservent la plupart du temps un poids conséquant. Si elles sont d'ordre purement décoratif on est tenté alors de ne pas les afficher.

Le cas le plus classique est celui de l'image de fond du body d'une page. En général il s'agit d'une image de grande taille dont le poids atteind facilement ou même dépasse les 200Ko. Sur un petit écran elle ne se voit pas, voir elle géne la lecture. Comment s'en passer ?

La première idée est d'utiliser les médias query pour la masquer. Exemple :

body{ background: url(../dossier/mon-image.jpg) no-repeat center top #abc; } 

@media all and (max-width: 320px ) { 
 body{
    background:none; 
    background-color:#abc; 
 } 
}

Visuellement ça fonctionne, lorsque la taille maximalle de l'écran est de 320px l'image de fond du body n'est pas affichée. Le problème c'est que le navigateur va quand même la télécharger !!! Le bénéfice sur les performances est donc nul. 

Image de fond de site

Ma solution : utiliser du JavaScript pour modifier les attributs CSS de l'élément body de la page.

JavaScript dispose d'une instruction très utile pour tester la largeur de l'écran et déclencher des événements, il s'agit de : window.matchMedia ( supporté par presque tous les navigateurs sauf IE8,IE9, source http://caniuse.com/#feat=matchmedia )

Son utilisation est assez simple dans la mesure ou les paramètres qui lui sont passés sont des instructions CSS, les mêmes que celles des média queries. Pour illustrer son utilisation je vais utiliser ici un pattern assez sophistiqué qui permet de charger plusieurs points de bascules (breakpoints) et en fonction de leur vérification (vrai/faux) modifier les éléments DOM de la page. On peut ainsi l'utiliser pour déplacer des div dans la page (réorganiser les blocs si on utilise pas flexbox) ou réaliser toute sortes d'opérations lorsque la taille de l'écran convient.

L'idée est donc de ne pas afficher l'image de fond du body de la page lorsque la largeur de l'écran maximale est de 320px ce qui revient à dire, ne pas afficher l'image de fond si on navigue avec un smartphone.

// Liste de window.matchMedia() dans un tableau
var ar_mqTests = [
 window.matchMedia('(max-width: 980px)')
],
nbrMqTest = ar_mqTests.length;
 // Fonction de test de tous les medias queries
 function f_testMediaQuery(ar_mqTest){
  if ( ar_mqTests[0].matches ) { // width: 980px media match ?
    document.body.style.background = "#000"; };
  }else{
    document.body.style.background = "url(images/fond.jpg) no-repeat center fixed #111";
    document.body.style.backgroundSize = "cover";
  } 
// Parcours du tableau
for (var i=0; i<nbrMqTest; i++){
 f_testMediaQuery(ar_mqTests[i]) // Executé au chargement de la page
 ar_mqTests[i].addListener(f_testMediaQuery) // Gestionnaire événement qui se déclenche lorsque une des conditions media querie est vérifiée et qui lance le test
}

En utilisant ce code est en inspectant l'onglet réseau de la page on constate que l'image de fond n'est pas chargée sur un écran dont la taille maximale est de 320px. Le css doit rester neutre avec juste un background-color.

Image dans un background

Si l'image à afficher se trouve dans un background ont peut facilement utiliser une autre technique entièrement basée sur du balisage HTML et du CSS pour ne pas l'afficher celon la taille de l'écran.

Exemple

Dans le balisage HTML on utilise une classe parent par dessus l'élément à afficher. Ce wrapper englobe une div vide.

<div id="parent-image">
 <div>
 </div>
</div>

Dans la feuille de style on défini un media querie qui s'applique sur la classe parent

#parent-image div{
 width:200px;
 height;100px;
 background-image:url('monimage.jpg');
}

@media all and (max-width: 320px ) {  
 .parent-image{    
 display:none;  } 
}

et le tour est joué. L'image ne s'affiche pas mais surtout elle n'est pas téléchargée.

Cette technique est expliquée dans la vidéo du Paris Web 2014  ( 30eme minutes ) : https://www.paris-web.fr/2014/conferences/responsive-web-design-clever-tips-and-techniques.php

Catégories: Développement WEB, Performance Web

Commentaires: Pas de commentaires

0

Documentation

DevWeb

Développer c'est avant tout être documenté.  Pour cela il existe les sites officiels mais aussi des agrégateurs qui permettent de consulter différentes informations à partir d'un seul point d'entré.

CSS

HTML

javaScript

Divers

Catégories: Développement WEB

Commentaires: Pas de commentaires