Une étape bien trop souvent oubliée lors de la réalisation de scripts JavaScript est la gestion des erreurs. On se contente de colmater les problèmes à l'aide de try/catch quand ceux-ci sont remontés par l'interpréteur et... et c'est tout.
Voici les 3 principaux patterns a utilisés pour gérer vos erreurs JavaScript dans les navigateurs ou dans Node.js et pour ceux qui ont le temps, un petit topo sur la différence entre Erreur et Exception.
Vanilla JS est un framework rapide, léger et multi-plateforme pour créer d'incroyables et puissantes applications JavaScript
Je viens de voir un code allembiqué permettant de maintenir la hauteur de deux <div> côte à côte. Problème ? Ces éléments ne sont pas côte à côte en version mobile mais l'un sous l'autre : et maintenir la hauteur dans ce cas là ne sert à rien. La semaine d'avant, j'ai vu un code avec une cascade de if permettant d'ouvrir une vidéo dans une popup sur PC et d'ouvrir un lien Youtube sur mobile. Bien évidemment, les petits écrans PC ouvraient une popup alors qu'il aurait été intéressant qu'ils ouvrent aussi un lien. Je vous fais l'impasse sur les comportements au redimensionnement de la fenêtre.
Bref, lançons-nous dans un petit exercice pour permettre un code JavaScript Responsive Web Design, sans se soucier de l'appareil qui l’exécute.
Dans de nombreux cas, on utilise des balises superflus pour gérer ;
C'est notamment le cas avec le framework CSS Bootstrap qui se fait vieux. Si vous vous ventez de ne plus suporter IE8 parce qu’il à fait son temps, alors il est également temps d'arrêter d'utiliser des balises inutiles !
Voici un exemple d'ancienne pratique et son équivalence avec la propriété CSS3 calc().
On me dit souvent que je n'aime pas Bootstrap, et pour cause. Je pense que c'est une regression pour un travail front-end de qualité. En réalité, ce n'est pas le framework le fautif mais la façon dont il est utilisé. Les exemples de mauvaises utilisations sont légions sur le Net et les mauvaises intégrations HTML courent les rues.
Suis-je donc entrain de dire qu'il y a une bonne et une mauvaise façon d'utiliser Bootstrap ? C'est exactement ce que je suis entrain de dire, et je vais vous expliquer à travers ce billet le cheminement qui va vous conduire à :
Non, je suis sérieux, ce billet n'est pas une blague. C'est cadeau, et c'est pour vous.
Lors des reviews d'intégration HTML à partir de valeurs fournis dans un PSD, on m'a fait remarquer que « les tailles de polices n'étaient pas bonnes » car elles étaient en rem et non en px. Aujourd'hui pire, on me somme de remplacer tous les rem par des px. C'est tout, c'est comme ça. Peut-être parce que l'on a peur que la conversion rem en px ne soit pas juste ou peut-être simplement parce qu'on ne sait pas bien à quoi sert le rem.
Sans entrer dans des détails techniques poussés, je vais vous expliquer pourquoi j'utilise rem.
Je vous laisse également une petite démo temps réel plus bas dans l'article
Allez, n'ayons pas peur, ce rem, il ne va pas nous manger !
Je l'ai encore croisée au détour d'un code ! J'y ai prêté attention pour la première fois sur le Framework CSS Semantic-UI car j'ai vu dans la source qu'il était impossible d'afficher une icône avec ce Framework sans utiliser la balise qui n'existe pas : la balise Icon !
Je vous la présente sans plus de suspense avec cet exemple : <i class="icon settings"></i>. Son rendu est une icône, représentant par exemple ici de quoi modifier les paramètres. Il n'y a pas de doute, l'intention première est d'afficher une icône, non pas avec la balise <img> estimée réservée à de l'affichage de contenu pure (au contraire d'une décoration), mais en remplacement de <span> qui, lui, est trop neutre.
Quoi de mieux qu'une balise qui est inline, courte, dont la seule lettre représente le début du mot « icon » et qui passe même la validation W3C ? Je vous présente la balise <i> qui a vu le jour grâce à HTML4 et signifiait « le contenu affiché est italique » et qui tenterait de faire son coming-back en tant que nouvelle icône derrière le dos du W3C !
Mais ça me pause un problème. Parlons en de cette fausse-vrai balise !
Aussi étrange que cela puisse paraître sachez qu'une adresse Gmail n'est pas « dot sensitive » c'est-à-dire sensible aux points...
Mais quelle mouche a piqué Google ?!
Par convention, on a toujours utilisé la balise <link> dans la balise <head>. Cette balise est utilisée —entre autre— pour permettre aux navigateurs de lire et d'appliquer les instructions CSS depuis une feuille CSS.
Par convention dis-je ? Pas réellement car :
Exemple : Ainsi le code suivant est valide :
<head> ... <link rel="stylesheet" type="text/css" href="example/css.css" media="screen" /> ... </head>
mais
Exemple : le code suivant est invalide :
<body> ... <link rel="stylesheet" type="text/css" href="example/css.css" media="screen" /> ... </body>
Cependant, puisque l'affichage du contenu de la page est mis en attente tant que les fichiers href des <link> ne sont pas téléchargés et analysés par le navigateur, cela participe à ralentir l'affichage du contenu des pages aux yeux de l'utilisateur ce qui mène parfois les outils comme PageSpeed ou GTmetrix a demander de placer les feuilles CSS très lourdes après l'analyse du DOM.
Mais puisque cela n'est pas valide, comment faire pour placer la balise <link> en pied de balise <body> ?
Autant vous annoncer la mauvaise nouvelle tout de suite, il n'est pas possible d'utiliser les Media Queries dans l'attribut des balises HTML style. Ainsi le code suivant ne fonctionnera pas...
<div>
<img
src="image/que/je/veux/decaller/seulement/quand/elle/flotte.png"
style="@media(min-width: 768px){float:left margin:-4px 16px 8px -24px;}">
<p>J'aimerai faire flotter à gauche l'image ci-dessus uniquement sur
les grands écrans. Comme les valeurs de `margin` sont ajustées uniquement
aux propriétés de cette image (-4px 16px 8px -24px), il n'existe pas de
classe HTML-driven comme créer un `.float-left` (à l'avance) qui répondrait
exactement à mon besoin.</p>
</div>
...c'est comme ça !
Dans ce cas, comment faire pour gérer des propriétés CSS ponctuellement en utilisant les Media Queries ? Cela est très utile pour le remplissage de contenu pour ajuster des images ou encore manager des background-image.
La solution n'est pas l'attribut style des balises HTML mais la balise <style> elle même !
Pour les personnes en charge de l'édition de contenu, remplir des liens est souvent source de problème car, là où la page des termes et conditions avaient toujours été une page interne au site, la voilà devenu un fichier PDF ou une page plus globale hébergée sur un autre site web ; ce qui demande l'ouverture d'un nouvel onglet pour s'afficher. Et le pire dans tout cela, c'est que c'est juste pour la version du site en Vulcain ! Il va donc falloir laisser ces mêmes personnes gérer eux-mêmes la propriété target ou...
...utiliser un script intelligent qui va ajouter les target="_blank" là ou ils sont nécessaires !
Cela est également très pratique quand on rédige ses pages en Markdown.
NodeAtlas est un framework JavaScript MVC(2) côté serveur vous permettant de créer des sites évolutifs, performants et conformes au W3C. C'est-à-dire qu'il permet de faire tourner des sites multilingues indexables ou de créer des maquettes HTML passant la validation W3C uniquement avec des vues mais également de créer de gros sites et apps web orientés composants et / ou orientés services en respectant les nouveaux standards avec son système de point d'ancrage.
Je vous propose de créer vos propres sites Node.js armés pour un rendu de qualité côté client et avec très peu de JavaScript. Vous pourrez ensuite, petit à petit et à votre rythme, vous plonger dans la partie Back-end JavaScript offerte par Node.js. Tout ceci est possible grâce au module npm (node.js package manager) NodeAtlas.
NodeAtlas est un Framework JavaScript côté serveur orienté Front-end, c'est-à-dire qu'il permet de faire tourner des sites multilingues complets uniquement avec les parties Vue et Route d'activées le reste étant fait par le framework. Bien évidemment, en activant la partie Contrôleur et Modèle vous prendrez la main sur le JavaScript serveur et vous pourrez créer de grands sites de qualités avec tout ce que l'on est en droit d'attendre : compte utilisateur, envoi de message, chat en direct... ou de solides applications web couplées à des Frameworks Javascript Frontaux comme Vue ou même simplement du code maison ! Mais commençons par le commencement.
Sachez que le blog sur lequel vous lisez cet article est fait avec NodeAtlas (obtenir les sources), ce qui lui permet de respecter facilement les standards HTML/CSS et de fournir sans efforts de hautes performances.
NodeAtlas est designé pour :
Lire dans une autre langue