Le Blog

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

jQuery or not jQuery

Vanilla JS

jQuery ou Vanilla JS

jQuery c'est formidable ! Du JavaScript cross browser, des instructions intuitives, le chainage permettant une écriture concise (do more, write less), la quantité de plugin impressionante autour de la librairie ( la liste officielle ) ... la somme des atouts est bien supérieur à l'inconvenient de son poids.

La plupart du temps l'usage de jQuery est incontournable surtout pour utiliser des plugins type slider que l'on retrouve dans de nombreux sites Internet.

Ceci dit il est n'est parfois pas raisonnable de l'utiliser pour réaliser de petites opérations la ou le JavaScript natif reste et restera toujours plus rapide. Si on peux se passer de jQuery, il FAUT se passer de jQuery.

No jQuery

Quelques sites pour nous aider :

La bible : https://developer.mozilla.org/en-US/docs/Web/JavaScript

Les bases (Français) : http://jean.yard.pagesperso-orange.fr/sitelycee/cours/js/_Js.html

En français : https://github.com/oneuijs/You-Dont-Need-jQuery/blob/master/README-fr.md issu de https://github.com/shaundunne/you-dont-need

Un tip par jour : https://github.com/loverajoel/jstips

Un article de fond : http://gomakethings.com/ditching-jquery/

Un article très demistificateur sur les fonctions anonymes auto-appelantes : http://sametmax.com/la-fonction-anonyme-appelee-immediatement-en-javascript-function/

Un site avec beaucoup d'Angular mais pas que, de haut niveau : http://toddmotto.com/

Exemple : http://toddmotto.com/what-function-window-document-undefined-iife-really-means/

Pattern de déclaration  : http://callmenick.com/post/instantiation-patterns-in-javascript

voir aussi : http://www.ryanatkinson.io/javascript-instantiation-patterns/

Programmation objet en JS : http://callmenick.com/post/javascript-objects-building-javascript-component-part-1

ES6 pour les humain : https://github.com/metagrover/ES6-for-humans

Charger son JS : https://css-tricks.com/case-study-boosting-front-end-performance/?utm_source=codropscollective

With jQuery

Si vraiment on ne peux faire autrement ou parce que jQuery est déjà dans le projet alors autant l'utiliser :

Si la problématique est de cibler plusieurs navigateurs est que l'on n'utilise jQuery que pour la puissance et la simplicité de ses sélecteurs, on peut aussi utiliser sizzle.js qui est le moteur de sélecteur CSS de jQuery et qui peut être executé de façon autonome. Sinon tester zepto.

Commentaires: Pas de commentaires

0

SVG en Background

Tout est dit dans le titre. Cette fois on utilise une image au format SVG à partir du CSS. On emploi la propriété background pour afficher et positionner l'image .svg. Celle-ci peut être externe (donc cacheable) ou embarquée (non cacheable). A noter que IE (11 inclu) ne reconnait pas le svg in-line dans une propriété CSS background-image.

See the Pen SVG Background by Du Marais (@DjF) on CodePen.

Si on à la 'main' sur le svg il est possible de le styliser avec cette méthode en utilisant les attributs de présentations spécifiques aux SVG à l'intérieur même de la définition du svg.

On peux même le rendre respondif. Dans le cas d'une image utilisée avec la propriété background du CSS  utiliser la technique du Padding Hack comme expliqué dans cette article :  http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/

Exemple en ligne :  http://tympanus.net/Tutorials/ResponsiveSVGs/index5.html

    .responsif{   width: 25%;   height:0;
    
          /* padding-top: (svg-height / svg-width) * width-value; */
    
    
          /* ( ( 1024 / 1024 ) x (25/100) ) x 100 */
    
      padding-top:25%;   background: url(http://www.alsacreations.com/xmedia/tuto/svg/kiwi.svg);   background-size: cover;  
    background-repeat: no-repeat;   background-color:red; }

Pour du svg in-line responsif voir : https://la-cascade.io/rendre-svg-responsif/

Les images SVG affichées en background à l'aide du CSS  permettent un balisage HTML plus léger. Néanmoins elles ne peuvent pas être animées, redimenssionnées  ou stylisées sur des statuts (ex:hover). Déclarées in-ligne elles ne peuvent pas être mise en cache, ce qui est le cas si on utilise des images externes. Cette technique convient bien à l'affichage de logos ou d'élements décoratifs que l'on retrouve sur plusieurs pages d'un site (voit toutes !) .

Les attributs de la méthode background sont très complets et permettent de  dimenssionner l'image et de la positionner. Il est aussi tout à fait possible aussi d'utiliser la même technique de découpage / affichage des images à partir d'un sprite au format .SVG comme on le ferait dans un sprite avec un format bitmap (.PNG ou .JPG ) Dans ce cas, personnellement je préfére la technique de la map-sprite qui permet de s'affranchir du repère des positions de l'image dans le sprite et qui est aussi une méthode qui favorise l'accéssibilité.

Commentaires: Pas de commentaires

0

Composants SVG

Le concept

Concevoir des composants réutilisables construit en utilisant les techniques décritent dans le post précédant :

  • Construction des éléments en utilisant des unitées de mesure relationnelles. L'unitée REM pour le parent et qui se base sur la taille de la police de la page. L'unitée EM pour les enfants pour leur permettre de s'adapter à la taille de son parent.
  • Utilisation d'illustrations au format .svg définies dans une map-sprite In-Line embarquée dans la page HTML.

Ces deux techniques permettent par exemple de concevoir un bouton 'Envoyer' que l'on utilisera dans un formulaire et qui pourra être personnalisé via le CSS sans avoir à utiliser des images différentes pour gérer les couleurs ou de de trop  modifier le CSS pour l'adpater au design du site.

Exemple de composants 1

  • Bouton : Envoyer
  • Lien : Nous appeller

Un exemple sur CodePen

See the Pen Composant HTML by Du Marais ( @DjF ) on CodePen .

Le bouton 'Envoyer' sera facilement réutilisable sans modifier le code HTML. Si on souhaite changer l'image, on utilisera simplement une autre map-sprite.svg avec le même identificatif d' id. Pour le styliser, couleur, fond, bordure, effets déclanché par les statuts Hover,Active ou Focus on pourra le faire via le CSS.

Le lien Téléphone qui utilise la balise href="tel" permettant à un utilisateur de smartphone de composer le numéro en cliquant sur le lien posséde les même possibilités. On modifira aussi le numéro à composer dans le balisage HTML.

Exemple de composants 2

  • Lien : lire la suite
  • Lien : Retour
  • Bouton : Envoyer

See the Pen Icones cachés by Du Marais (@DjF) on CodePen.

On reprend le même principe avec du style CSS pour masquer et afficher l'icone qui accompagne le bouton et en le revelant sur le hover soit du lien, soit du bouton.

SVG inline

Pour rappel l'utilisation de la map-sprite est préférée ici à la définition du SVG dans le CSS car elle permet une plus grande modularité. Il est possible via des techniques coté serveur (PHP) de concevoir un système qui charge ou non les ressources svg necessaires à la page. 

L'image SVG embarquée  permet d'économiser des requêtes DNS. Elle convient bien à l'affichage d'éléments qui ne sont pas necessairement affichés sur toutes les pages d'un site et ils peuvent être stylisés et animés en CSS. Ses incovénients sont la taille de la page qui augmente et l'impossibilité de mettre les images en cache. Si on souhaite mettre les images dans le cache et conserver des pages HTML moins lourdes on utilisera des images .svg externes.

Voir les articles : 

Catégories: Développement WEB, svg

Commentaires: Pas de commentaires