Tous les articles pour Front-end

  • Modules JavaScript natifs et isomorphisme avec import, export et require

    Isomorphisme

    Si vous êtes développeur web, vous devez savoir que pour que l'utilisateur final puisse afficher une page web sur son navigateur via le protocole HTTP, il faut deux choses : un code client, et un code serveur :

    • Dans son plus simple appareil, le code serveur est délivré par un serveur web comme Apache, nginx ou encore IIS à partir d'un fichier. Dans de nombreux cas, ce n'est pas à partir d'un fichier HTML, mais à partir du résultat créé en analysant du code serveur dans des fichiers PHP, .NET, Python, Ruby, etc. qu'est généré le rendu HTML.

    • Côté client, une fois la page reçue, le HTML sert de base au navigateur pour construire un DOM qui permettra d'afficher le site web. C'est alors le code JavaScript appelé par la page qui permettra de changer le DOM et donc, de faire des interactions à l'écran.

    Le développeur à donc deux travaux, développer un code qui fonctionne côté serveur et développer un autre code qui fonctionne côté client (le serveur web étant là passerelle entre client / serveur), d'où la séparation connu des rôles de développeur frontend (partie cliente) et développeur backend (partie serveur).

    Imaginez que l'on puisse, à partir d'exactement le même code, produire du code côté serveur et côté client ! C'est ce que l'on appelle l'isomorphisme. Un code isomorphique est un code qui peut-être exécuté par le serveur et par le client.

    Nous allons donc utiliser le sujet de l'isomorphisme comme fil conducteur dans cet article pour traiter :

    • de l'import / export de Modules ECMAScript en version 6,
    • du JavaScript côté serveur avec Node.js,
    • des équivalences ECMAScript version 5 pour le require / export,
    • de l'isomorphisme exploitable pour faire du web avec Vanilla JS et Node.js.

  • Comprendre et reproduire les animations de transitions Vue.js en CSS et JavaScript

    En tant que traducteur principal de la documentation officielle française de Vue.js, lors de la traduction de la page Transitions d'entrée, de sortie et de liste, j'ai été bluffé par la simplicité de gestion des animations de transition proposé par Vue.js. J'ai mis un peu de temps à comprendre exactement comment ça pouvait fonctionner sous le capot et je vous propose de faire ce cheminement de compréhension ensemble à travers cet article.

    Cela vous permettra :

    • De reproduire une fonction permettant de réaliser des animations de transition simple.
    • De comprendre comment fonctionne le système d'animation de transition de Vue.js.
    Transitions Vue.js
    Source : https://fr.vuejs.org/

  • Séparations des rôles du HTML / CSS / JavaScript et mise en application

    Cet article fait office de conventions d'architecture d'un site web orienté composant pour la partie cliente, peu importe la technologie d'implémentation finale, de manière à ce que le code soit valide, performant et maintenable par des développeurs front-end, des développeurs back-end ainsi que des pousseurs de contenu. Ces techniques étant en constantes évolution, et les problématiques évoluant au fur et à mesure de mes itérations créatives, cet article est voué à se compléter et changer.

    Contenu, apparence et comportement
    Contenu, apparence et comportement

  • Comment gérer les raccourcis clavier en JavaScript

    Nous allons voir dans cet article comment créer rapidement un système permettant de surveiller si une touche du clavier est enfoncée lors de l'exécution d'une action dans votre navigateur ou mieux, si une série de touche est enfoncée pour autoriser / lancer l'exécution d'une action lors de la pression, par exemple, sur « Ctrl + Alt + E ».

    Ctrl + Alt + E
    Image originale ici

    Et comme toujours, on va devoir jouer avec un peu de JavaScript ! Si vous n'avez pas trop le temps de jouer, le code qui vous intéresse probablement se trouve ici


  • Comment faire du routage strict avec Vue Router et Vue Server Renderer ?

    L'URL www.example.com/foo n'est pas la même URL que www.example.com/foo/. Or, si cela n'est pas gênant dans une application monopage (plus loin SPA pour « Single Page Application »), cela devient critique pour de l'optimisation de moteur de recherche (plus loin SEO pour « Search Engine Optimization ») dès lors que le contenu est généré côté serveur.

    Côté serveur, les routeurs comme celui d'Express possèdent un mode strict pour que l'adresse /foo ne soit pas la même que l'adresse /foo/. Mais qu'en est t-il de Vue Router ? Et surtout, comment faire concorder le routage client et le routage serveur pour que l'hydratation (la prise en main côté client d'un rendu côté serveur) concorde ?

    Je vous le donne en mille : de base, là où Express en mode strict vous renverra une page 200 pour /foo/ et une page 404 pour /foo, Vue Router lui, en mode strict, vous renverra exactement l'inverse !

    Comment dans ce cas utiliser Vue Router et Vue Server Renderer pour du routage strict dont les moteurs de recherche sont si friand pour une SEO à toute épreuve ? La réponse à la fin !

    Cependant, afin que ce billet soit utile également pour ceux n'ayant pas (encore) ce problème et qui souhaitent découvrir par l'exemple comment fonctionne du SSR avec Vue (et de facto, qu'est-ce que c'est réellement), je vais élaborer un code pour vous accompagner dans cette compréhension, pas à pas. Seulement ensuite nous mettrons en évidence notre problème avant de le résoudre.


  • Pourquoi vous ne comprenez rien au JavaScript ?

    Vous avez un pied dans le monde du numérique depuis quelques années, ou vous côtoyez les métiers du web de près ou de loin, et pourtant vous ne comprenez pas totalement encore les problématiques des développeurs Front-end, ou même maintenant des développeurs Full-stack.

    Pourquoi finalement ne peut t-il pas « simplement » y avoir un développeur web comme au bon vieux temps. Quelle est là réelle différence avec un intégrateur HTML/CSS ? Pourquoi le web client n'est t-il plus si abordable pour les développeurs ? Pourquoi coûte t-il si cher à présent ?

    Je vous propose, à partir d'une petite discussion fictive entre, un acteur du numérique qui n'a plus l’œil partout, et un développeur Full-stack sur le feu, de mettre en lumière en quoi le web d'aujourd'hui est « compliqué ».

    Cet article est inspiré et adapté en français de l'article « How it feels to learn JavaScript in 2016 », lui-même inspiré par « It's The Future » que j'ai modifié pour y apporter ma propre expérience. Vous pouvez lire les articles originaux respectivement ici et ici.

    Cet extrait n'est qu'une mise en situation, et tout comme n'importe quelle bibliothèque JavaScript, il ne devrait pas être pris trop au sérieux !

    En espérant que vous y apprendrez des choses !


  • Vue + NodeAtlas : de l'art du SSR ou Rendu Côte Serveur avec JavaScript

    Nous allons voir dans cet article comment faire du rendu côté serveur ou SSR (Server-Side Render) avec le framework JavaScript client MVVM (Modèle-Vue-Vue Modèle) Vue couplé au framework JavaScript serveur MVC(2) (Model View Controller) NodeAtlas !

    Alors ce titre parle peut-être aux habitués des architectures clientes MVVM qui ont des difficultés avec le référencement et semble peut-être barbare pour d'autres. Lançons-nous dans une petite explication histoire de rendre cet article intéressant également pour les néophytes : comprenons le problème et trouvons la solution à travers cette page.

    Quel est le problème traité dans cet article ?

    Le problème avec les frameworks MVVM client est qu'ils construisent le site à partir de rien. Fouillez la source du code de la réponse HTTP de la page courante, celle lue par les indexeurs de contenus ou les navigateurs sans JavaScript ; il n'y a rien. Aussi, si je crée une liste d'actions futures pour la roadmap de ma super App, et que je souhaite pouvoir manipuler aisément (ajout et retrait) ses éléments grâce à un coupleur de données vue-modèle ; le revers de la médaille sera que les informations utilisées pour cette construction proviendront de fichiers JavaScript ou morceaux de HTML qui ne veulent rien dire pour les indexeurs où même les validateurs de page. Vos sites sont donc souvent « SEO merdiques » et « W3C bancales ».

    Quelle solution ?

    Le SSR ou Rendu Côté Serveur. Voyons ça au travers de cette page exemple avec Vue et NodeAtlas !


  • Vue.js vs React vs Angular vs les autres MVVM

    Vue.js est un framework JavaScript client progressif permettant de créer, maintenir et évoluer des interfaces utilisateurs en liant les données utilisées entre la Vue et le Model. C'est une alternative sérieuse à React, Angular et les autres frameworks MVVM (Modèle Vue VueModèle).

    Vue.js

    J'ai eut l'occasion d'essayer Vue.js dans sa version 1 et son extrême simplicité et flexibilité m'a séduite. À l’instar de NodeAtlas, sa puissance vient de ses fonctionnalités intégrables de manière évolutives et versatiles ; on peut tout aussi bien utiliser Vue simplement sur le formulaire d'une page ou à plus grande échelle avec des composants et du routage à travers l'architecture d'un site complet.

    Cependant, là où en version 1, Vue paraissait une alternative séduisante à AngularJS (aka Angular 1) ou Knockout, dans sa version 2 il devient de plus une alternative sérieuse à Angular (aka Angular 2), React et les autres frameworks MVVM tant sur le plan des fonctionnalités que des performances.

    Pour faire simple —si vous débarquez dans le monde des framework JavaScript client MVVM et que vous ne savez pas quoi choisir— vous devriez choisir Vue ! Quoi qu'il arrive, il sera un choix pertinent pour les cas d'utilisation que vous en ferrez.

    Nous allons dans cet article :

    1. rapidement exposer pourquoi vous devriez utiliser Vue en lieu et place de Angular ou React dès maintenant et
    2. lire la traduction des explications approfondies à propos des différences entre Vue et les autres frameworks.

  • Créer et maintenir des maquettes HTML avec NodeAtlas

    NodeAtlas est une application multi-os écrite en Node.js qui va vous permettre de créer, modifier et maintenir tout un ensemble de maquette HTML. Ces maquettes HTML pourront ensuite être validées par le client, et ré-utilisées totalement ou en partie par les développeurs Back-end quelque soit leurs technologies. Ces maquettes HTML pourront également servir de site stand-alone fonctionnant sans serveur ou avec un simple serveur HTTP pour créer des documentations JSDoc ou autre comme pour GitHub par exemple. C'est ce que nous allons voir dans cet article.

    Mais NodeAtlas permet également de faire tourner des sites web complet, performant et rapide tel que le site sur lequel vous être entrain de lire cet article.

    NodeAtlas est designé pour :


  • Version mobile et version desktop : ça n existe pas !

    J'entends tous les jours qu'une « version mobile n'est pas une option », sous entendu que l'on souhaite créer une version de site pour mobile et une version de site pour desktop « en même temps » et derrière la même adresse. J'entends aussi qu'il serait bien de s'occuper d'une « version tablette » pendant qu'on n'y est !

    Pour réaliser cela, quoi de mieux que l'utilisation du Responsive Web Design !

    Jusque là tout va bien me direz-vous ? Pas du tout.... Une « Version Desktop », c'est tactile ? Une « Version Mobile », ça a pas de bande passante ? Et bon sang, c'est quoi une « Version Tablette » ?

    Stop version desktop et mobile !

    Même si dans la théorie tout le monde croit se comprendre —avec des histoires de tailles—, je me sens contraint et forcer de faire du « Gloubi-boulga » quand j'utilise les spécifications imposées proposées par un client ou pire parfois... par un professionnel. Et cela au lieu de faire ce qu'on me demande en premier lieu, du Responsive Web Design.

    La simple évocation de « Mobile vs. Desktop » est une preuve flagrante de l'incompréhension total de la chose. De la même manière que certain pensant utiliser une méthode Agile s'y prennent en réalité à La RACHE ; il est intéressant de s'assurer ici qu'on ne confond pas tout.


  • Coder proprement en JavaScript par l'exemple : upload d'image

    Dans cet article il ne va pas être question d'expliquer l'utilité du point virgule (« semi-colon ») ; ou encore les bienfaits de l'opérateur d'égalité stricte (« strict equality operator ») === mais plutôt de vous démontrer par l'exemple comment produire du code que vous et les autres pourrez relire sans entrer dans les détails si cela n'est pas nécessaire.

    Clean Code *Source : http://fr.slideshare.net/pazscall/clean-code-design-patterns*

    Nous allons tout au long de cet article aborder plusieurs notions comme :

    • La programmation par intentionintentional programming ») ou le fait de rassembler et nommer chaque suite d'instruction dans une fonction pour rendre le code aisé à la relecture.
    • La programmation par fonction de rappelfunction callback ») ou le fait de déléguer à une fonction externe ce qu'il va se passer à la fin d'une suite d'instruction.
    • La programmation par entrée / sortieI/O ») ou le fait que chaque fonction doit clairement définir ce qu'elle attend en entrée (« inputs »), et ce qu'elle renvoit en sortie (« outputs »).
    • La programmation asynchrone ou le fait d'attendre un évènement ou un temps précis sur un tour (« tick ») de la boucle d'évènement (« Event Loop ») avant l'exécution du code.

    C'est parti pour apprendre tout ça à travers un exemple d'upload de fichier.


  • Vanilla JS - Documentation en français

    Vanilla JSVanilla JS

    Vanilla JS est un framework rapide, léger et multi-plateforme pour créer d'incroyables et puissantes applications JavaScript


  • Activer vos effets JavaScript en fonction de vos Media Queries

    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.


  • La propriété CSS3 calc() pour arrêter avec les balises HTML imbriquées inutilement

    Dans de nombreux cas, on utilise des balises superflus pour gérer ;

    • la largeur total d'une grille avec les éléments externes et
    • l'espacement entre chaque balise avec l'élément interne. Parfois même,
    • pour appliquer de la couleur de fond, on utilise une troisième balise !

    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().


  • Bootstrap, lisibilité, propreté, performance, optimisation ; c'est possible !

    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 à :

    • séparer le fond et la forme, pour un gain de lisibilité et de propreté,
    • inclure et générer le strict minimum pour un gain de performance, avec un exemple d'optimisation de CSS 30 fois plus légères !
    Bootstrap et Less
    Bootstrap et Less, themightycribb.com

    Non, je suis sérieux, ce billet n'est pas une blague. C'est cadeau, et c'est pour vous.


  • Icon ou la balise sémantique HTML qui n'existait pas !

    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.

    Balise i en HTML4
    La balise <i> en HTML4, miriamposner.com

    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 !


  • Utiliser la balise Link dans la balise Body

    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 :

    • Côté W3C, la balise <link> telle qu'elle a été créée n'est valide W3C en HTML4, xHTML ou HTML5 uniquement si elle est appelé dans la balise <head>.
    • Côté technique, une propriété CSS est appliquée sur un élément du DOM quand il est rendu sur la page uniquement si elle a été interprétée avant de rencontrer cet élément. Si une feuille CSS est lu en pied de page donc, c'est-à-dire après le rendu d'un élément, il y aura un phénomène de FOUC très dérangeant si la page est demandée depuis un réseau bas débit.

    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> ?


  • Utiliser les Media Queries CSS3 dans l'attribut style

    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 !


  • Ne vous souciez plus de la target dans vos liens

    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.


  • Des sites web Node.js pour débuter en JavaScript serveur avec NodeAtlas

    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 :


  • Utilisation optimisée de Framework CSS comme Bootstrap avec Less

    J'ai déjà abordé le sujet des Frameworks CSS qui surchargeaient le DOM HTML inutilement et allait à l'encontre de la philosophie du W3C (séparation du fond et de la forme) dans un précédent article où j'expliquais pourquoi, par exemple, Bootstrap est une régression pour un développement Front-end de qualité.

    J'ai également expliqué comment reproduire l'équivalent de fonctionnalités utiles dans un Framework en respectant l'approche CSS-driven dans Grille CSS Responsive et Sémantique sans Framework.

    Je vais ici vous démontrer que cette méthode CSS-driven peut non seulement être grandement simplifiée avec l'utilisation des préprocesseurs CSS comme Less, Sass ou Stylus, mais qu'elle permet également d'exploiter les Frameworks tel que Bootstrap de manière propre et conforme à la philosophie de séparation de la sémantique et du design.


  • Éviter les multiples $(document).ready() dans vos pages web

    Une chose qui me gène avec la $(document).ready() de la librairie jQuery, c'est que c'est une magnifique porte ouverte aux mauvaises pratiques JavaScript. Elle empèche les développeurs web en herbe de se pauser les bonnes questions et pire encore, comme j'ai pu le constater récemment, aux développeurs à priori chevronnés d'en faire de même...

    Oui, le $(document).ready() peut être utilisé plus d'une fois dans un ensemble de fichier et oui, il peut être placé n'importe où dans une page HTML mais non, ce n'est absolument pas vous rendre service que de faire cela ! Ce n'est pas parce que l'on peut, que l'on doit.

    Mettre ces déclarations un peu partout rend plus difficile la relecture et le debug du code en empêchant de savoir qui s'exécute avant qui sans regarder l'ordre d'appel des fichiers. Effectivement, si cela semble simple et pratique quand 3 fichiers se battent en duel, cela peut rapidement devenir complexe. De plus, si une exception est levé dans l'un des $(document).ready(), aucun des autres n’exécutera plus rien du tout. Pour finir, le code est ralenti lors de l'appel de plusieurs $(document).ready() contre un seul, ou contre aucun d'ailleurs.

    $(document).ready() ZzzZz
    Don’t let jQuery’s $(document).ready() slow you down

    Dans cet article nous allons voir l'une des dizaines de façon de vous passer de $(document).ready() dans vos pages web. Le maître mot ? Un seul point d'entré pour l'ensemble du code exécuté sur une page. Vous trouverez également un exemple de la méthode décrite dans cet article dans ce repository GitHub.


  • Les Margins se comportent comme des Paddings avec les grilles Bootstrap

    Voilà les petites bases qu'il faut rapidement se mettre en tête à propos de la différence entre les marges externes ou margins et marges internes ou paddings :

    • Les margins d'un élément HTML se superposent avec les margins de leur voisin, avec les margins de leur parents, avec les margins des enfants des voisins, etc. Puisqu'elles se trouvent à l'extérieur des borders, elles ne sont pas affectées par les backgrounds.

    • Les paddings d'un élément HTML s'additionnent ou se cumulent avec les paddings de leur voisins, avec les paddings de leur parents, avec les paddings des enfants des voisins etc. Puisqu'elles se trouvent à l'intérieur de border, elles sont affectées par les backgrounds.

    Deux trois autres chose rapide sont à savoir : comme le fait qu'un élément inline ne gère pas les paddings ou qu'un margin négatif déplace les éléments contrairement au padding négatif qui ne fait rien, etc.

    Mais saviez-vous que : Si les éléments deviennent flottants en continuant de prendre toute la largeur... les marges externes se comportent comme les marges internes !


  • Centrer verticalement n'importe quel élément en quelques lignes CSS

    Une solution rapide et qui fonctionne sur tous les navigateurs à partir de IE9 est le centrage vertical avec la valeur CSS3 translateY de la propriété transform.

    Pour mettre cela en place, trois simples propriétés :

    1. On place l'élément en relatif pour le repositionner par rapport à son élément parent avec position: relative;.

    2. On déplace l'élément de la moitié de la hauteur de l'élément parent avec top: 50%;, la référence de déplacement étant actuellement son bord haut.

    3. On re-centre l'élément non plus à partir de son bord haut mais de son centre vertical avec transform: translateY(-50%);

    Et voilà !


  • Conserver un affichage Desktop sur mobile avec une version Responsive Web Design

    Depuis que le Responsive Web Design a commencé son invasion, beaucoup de site ne possède plus qu'une unique version qui gère :

    • un affichage complet pour écrans larges de type écran d'ordinateur (Desktop) et
    • un affichage léger et partiellement complet pour les écrans de type mobiles/tablettes.

    Cela revient souvent à inhiber des fonctionnements jugés peu utiles par les développeurs ou ergonomiquement trop instables pour être présentés sur les petits appareils et empêche alors :

    • d'afficher la version Desktop sur les mobiles/tablettes ou
    • d'afficher la version Desktop dans une fenêtre de navigateur rétréci.

    Je vous propose, à travers des exemples CSS-Driven, de vous expliquer comment gérer deux versions d'affichage de vos pages avec comme toujours une seule structure HTML sémantique.


  • Valider les formulaires simplement, et sans JavaScript

    S'il y a bien une action redondante et qui nécessite de passer par la case JavaScript, c'est bien la validation des formulaires ! Mais sachez qu'il est possible de les valider sans utiliser une seule ligne de code ! J'avoue, je triche un peu quand je dis ça. En réalité il n'y a rien de magique et il faudra tout de même inclure trois scripts pour réaliser cela, mais il ne sera pas nécessaire que vous écriviez du JavaScript.

    Voyons ici quel sont ces scripts et parcourons les différents cas de figure pour valider des champs vides, vérifier qu'un email est bien formé ou encore qu'une confirmation de mot de passe correspond bien au mot de passe initialement tapé. Par exemple, pour vérifier qu'un champ « Pseudo » est bien remplis et indiquer la place de son message d'erreur, il suffirait de le déclarer dans un formulaire comme ceci :

    <label for="pseudo">Pseudo</label>
    <input type="text" name="pseudo" id="pseudo" placeholder="MachinisteWeb"
           data-rule-required="true"
           data-msg-required="Le champ Pseudo est requis." />
    <span data-valmsg-for="pseudo" data-valmsg-replace="true"></span>
    

    C'est donc parti pour :

    1. Trouver votre bonheur dans l'exemple complet suivant : http://codepen.io/MachinisteWeb/pen/AzJgF/

    2. Ou/Et lire la suite de ce billet pour en apprendre un peu plus sur le jQuery Validation Unobstrusive Plugin.


  • Grille CSS Responsive et Sémantique sans Framework

    Il y a quelque temps, j'expliquais qu'il était difficile d'obtenir un travail Front-end de qualité avec des Frameworks CSS HTML-Driven. Le gros reproche que je fais à ces Frameworks est de prendre le contre pied de l'approche du W3C qui met tout en œuvre avec HTML5 et CSS3 pour complètement effacer toute trace de design dans l'architecture HTML et la rendre structurellement sémantique.

    Un Framework CSS c'est vraiment pratique pour ne pas trop se mouiller et gagner du temps parait-il. On me dit d'ailleurs souvent que les systèmes de Grid c'est bien pratique. Ce que j'en pense pour ma part c'est qu'on ne peut jamais sortir des chemins battu d'un Framework lourd à moins de parfaitement connaître les mécanismes de celui-ci pour le contrer. Et dès lors qu'on est assez aguerrit pour comprendre des mécanismes menant à des « abstractions qui fuient », on est alors assez aguerrit pour s'en passer.

    Sachez que l'on peut facilement se passer de Framework pour gérer une grille Responsive Web Design propre et maintenable en évitant ainsi d'horribles codes comme <div class="header col-xs-12 col-sm-6 col-sm-push-6 text-right-sm bg-info"> tout en restant maître de ce que l'on fait. Cette page CodePen en est un exemple.

    Suivez-moi, je vais vous montrer !


  • Maîtriser les requêtes au chargement d'une page web

    Quand une page web est chargée, les éléments externes à celle-ci sont appelés tout au long de son chargement pour permettre au navigateur d'afficher le résultat visuel final. Cela prend du temps, et certains chargements bloquent le rendu alors que d'autres non. D'autres encore sont ignorés tant qu'une action de la part de l'utilisateur n'a pas été effectuée.

    Pour bien comprendre et manager ses chargements de page, je vous propose de comprendre une liste de comportement au chargement des ressources pour Chrome, Safari, Firefox, IE et Opera.


  • Bootstrap est une régression pour un développement Front-end de qualité

    Pourquoi je n'utilise pas Bootstrap ? Cela peut sembler une « évolution » de nos méthodes de travail front-end, mais gare au loup et attention de ne pas tomber dans un travers que le W3C tente d'enrayer au fur et à mesure des évolutions HTML et CSS.

    Commençons par le commencement. Qu'est-ce que Bootstrap ? Comme pleins d'autres « Bibliothèque » ou « Framework » CSS dans la même veine, Bootstrap est un outil permettant d'augmenter la productivité des développeurs front-end le maîtrisant, dans le but de fournir le plus rapidement possible un rendu visuel ergonomique et si possible responsive.

    Mon problème ne vient pas tant de sa finalité qui est louable, mais bel et bien de la mise en œuvre technique qui permet d'atteindre cette finalité. Pour être concis avant de développer : l'utilisation faites de Bootstrap est une régression pour un travail front-end de qualité.

    Je ne compte persuader personne, et à défaut de convaincre, je vais au moins vous expliquer mon point de vue.


  • Alignement de texte Responsive avec Bootstrap

    J'ai évoqué pourquoi je n'utilisais pas Bootstrap. Cependant, l'un des pré-requis pour un nouveau projet est de l'utilisé aussi j'ai retroussé mes manches pour approfondir la philosophie et j'ai déjà commencé à me casser les dents !

    Aligner un texte à gauche sur version mobile puis à droite sur version desktop est chose aisé en CSS avec les Media Queries. Gérer le fait que deux colonnes côte à côte sur version desktop passe l'une sous l'autre sur version mobile l'est également avec Bootstrap. Pourtant aligner un texte à gauche sur version mobile puis à droite sur version desktop aussi facilement que la gestion des colonnes n'est pas possible...

    Je vais vous présenter un petit pan de code remédiant à cela.


  • Différences entre async et defer en HTML5

    La balise HTML script permet de définir quand le code JavaScript dans votre page est exécuté. Les attributs HTML5 async et defer sont à présent supportés par Firefox, Chrome, Safari et Internet Explorer 10+ (sinon ils sont ignorés) et permettent de modifier le comportement de chargement des scripts. Voici de courtes explications sur les différences de chaque appel.


  • Structurer le JavaScript de son site avec ou sans Framework

    On me demande souvent quelle est la structure JavaScript que j'utilise pour développer mes sites web. C'est une question à laquelle je ne sais jamais si un simple « jQuery » suffit ou si l'on s'attend à m'entendre répondre « Knockout », « AngularJS », « Vue.js », « React » ou encore, « RequireJS » ou je ne sais quelle autre composant/librairie/framework JavaScript Front-end extraordinaire !

    Au delà du fait que l'utilisation de ses ressources précédemment citées dépend du fait que l'on souhaite réaliser un site web ou un outil web ou une application web etc. je finis toujours par expliquer que j'utilise ma propre architecture JavaScript à travers toutes les différentes pages d'un site web et qu'au cas par cas, je charge les JavasSript dont j'ai besoin (parfois il est plus judicieux de charger de manière asynchrone un ckeditor sur l'unique page ou il est utile que de ce le trimbaler partout sur le site !).

    Je vais donc vous livrer à travers cet article une architecture JavaScript pas à pas, page par page. Il existe également une approche plutôt orienté composant que j'aborde ici.

    Afin de la comprendre pas à pas, j'utiliserai comme fil conducteur la réalisation d'un site vitrine. Ma façon de structurer le JavaScript client n'est pas absolue mais elle vous permettra de comprendre la logique derrière certains de mes sites dont vous trouverez les sources sur GitHub (comme pour ce blog) ou même la logique du moteur de site Node.js : NodeAtlas.


  • Bien gérer la localisation des sites en CSS3 et HTML5

    Il y a des solutions simples pour gérer avec une feuille CSS l'affichage de différentes langues. Vous vous êtes peut-être déjà confronté à un problème similaire : votre super menu s'affichant en ligne est parfait dans la langue des Vulcains avec une taille de caractère mais malheureusement ne l'ai plus avec la langue des Na'vis.

    Quand votre site sera déployé pour des localisations différentes, les feuilles CSS ne pourront alors pas être les mêmes et vous allez maintenir autant de fichiers différents que de localisation ? C'est ce que vous ferriez en faisant un très mauvais choix. Arrêtons-nous 5 minutes pour explorer une piste bien pratique pour assurer la maintenance d'une feuille CSS et de ces différentes localisations.


  • Les concepts autour du Responsive Web Design

    Le « Responsive Web Design » comme son nom l’indique est le concept de « Responsive Design » adapté au Web. Il est parfois raccourci par le terme « RWD » ou simplement par « Responsive ».

    Responsive Web Design
    Source : www.tridentdesign.com

    Dans la majorité des cas d’utilisations, il est utilisé comme raccourci pour désigner la version Mobile d’un site web originalement conçu pour un écran d’ordinateur.

    La vérité est que le Responsive Web Design n’est qu’un des nombreux concepts appliqués à un site web pour le rendre « utilisable agréablement » sur mobile tout en sachant qu’il ne se limite pas qu’aux mobiles et qu’il vaut tout aussi bien pour :

    • une tablette,
    • une phablette (terminal intermédiaire se situant entre le smartphone et la tablette),
    • un ordinateur et tous ses types d’écrans (HD, 3D, tactile),
    • une télévision numérique,
    • un tableau de bord de voiture,
    • une console de jeu portable,
    • …et tout appareil capable d’afficher un site web par l’intermédiaire d’un navigateur web.

    En plus du fait que Responsive Web Design ne signifie donc pas obligatoirement « version mobile », il est le porte étendard d’une liste de concept comme l’« Adaptative Web Design ». Difficile de comprendre ce dont on parle réellement quand il est question de Responsive Web Design.


  • Les balises h1 multiples autorisées en HTML5

    C'est suite à plusieurs conversations m'invitant à ne pas utiliser de multiples balises h1 dans mes intégrations HTML (et plus récemment une demande « insistante » sur le fait de ne pas le faire) que je me vois forcé de marcher sur les pas de Raphaël Goetter -qui avait déjà abordé le sujet- pour expliquer pourquoi : en plus d'être tout à fait valide, cette pratique est bénéfique.

    Tout document HTML5 dispose de cloison de contenu (Sectionneur de contenu) que sont article, aside, nav et section. Ces zones de contenu peuvent chacune contenir une balise header et footer (ne cloisonnant pas elles-mêmes le contenu) et de multiple éléments de titrage (Titre en HTML) allant de h1 à h6.

    Bien que l'utilisation de plus d'une balise h1 ai pu rationnellement laisser à débattre (même si techniquement les standards ne l'interdise pas), les recommandations et même l'interdiction d'une telle pratique ne sont plus pertinentes et rationnelles à l'heure du HTML5.


  • Problème de z-index et priorité d'affichage

    Je rencontre souvent des personnes se plaignant de problèmes de z-index et qui les évitent ou se contente de dire que les z-index ça pose problème. Bien souvent le problème vient du fait que le développeur ne s'attend pas à ce que la priorité d'affichage des z-index fonctionnent en cascade dans le DOM. Voyez plutôt l'exemple suivant :


  • Les types en JavaScript : pour tout savoir !

    Mais le JavaScript n'est pas typé ? Mais si, il y en a 13 ! Ah non, il y en 7... Bah il me semble qu'il y a Object, Function, Array, Math, String, Number, Boolean. Et tu fais quoi de RegExp ? Attends, Function c'est pas un type, c'est un sous type mais Null c'est un type... ? Ho là là...

    Si vous faites du jQuery à vos heures ou même pas mal de JavaScript sur vos sites web, il est temps d'apprendre tout ce qu'il y a à savoir sur le typage implicite de JavaScript, car oui : contrairement à ce que certain vous ont dit, JavaScript manipule des éléments typés, on peut même dire que le JavaScript est faiblement typé et dynamiquement typé si vous voulez tout savoir. Les fonctions (et les instances) Object, Function, Array, Date, String, Number, Boolean, RegExp, Error ou encore les objets globaux, Math et JSON : tous sont d'un seul et même type, le type Object. Pourtant String, Number et Boolean sont eux-mêmes un type à par entière en plus des deux petits spéciaux les type Null et Undefined.

    Si vous deviez retenir quelques trucs rapidement à propos du JavaScript et des types ça serait que :

    • Le JavaScript n'a que 6 types : Object, Number, String, Boolean, Null et Undefined.
    • À part le type Object : les 5 autres types sont dit des types primitifs.
    • Les types Null et Undefined sont des types spéciaux.
    • La Function n'est qu'un type Object qui peut être exécuté et instancié avec « new ».
    • Array, Date et RegExp sont des types Object instanciables (Function).
    • Math et JSON sont simplement un type Object (ne s'instancie pas avec « new »).
    • Bien que Number, String et Boolean soient des types primitifs, il existe un équivalent de type Object instanciable (Function) pour chacun d'eux (à ne pas confondre).
    Les 6 types en JavaScript
    Les 6 types en JavaScript

    Je vais dans un premier temps vous proposer la traduction d'un article de Dmitry Baranovskiy —développeur JavaScript expérimenté— qui explique très bien les types en JavaScript. Je lèverai le doute sur le fameux sixième type (Null ou Function). Et je vous fournirai des lignes de code test pour mettre en évidence ce qui a été expliqué.

    Dans cet article les propos entre [ ... ] sont les miens ainsi que ceux qui ne sont pas entre « ... ».

    Pour finir, bien que l'auteur vous encourage à lire les spécifications officielles (pour les initiés), je vous encourage pour ma part à lire JavaScript Eloquent (disponible en français ici).


  • Une alternative au Switch, c'est possible en JavaScript

    Vous connaissez tous l'instruction switch en JavaScript ; c'est une bonne alternative à la suite d'instruction if, else if, else if, else if... else dans le cas de choix multiples. Et si vous vous en débarrassiez pour quelque chose de plus simple concis ?


  • Faire des bordures en image sans la balise Table

    Beaucoup de design demande que les bordures des cadres de contenu soient des images pour avoir des bords aux motifs complexes ou faire des effets d'ombre. Bien qu'il existe des propriétés CSS3 qui gèrent cela à présent, la compatibilité sur tous les navigateurs ne sera possible que si ceci est réalisé avec du CSS standard et du HTML.


  • Comment cibler un id qui contient un point

    En CSS, tout comme avec le librairie JavaScript jQuery, il faut utiliser des sélecteurs pour cibler une balise ou un ensemble de balise :

    • on utilise le sélecteur # si l'on désire accéder à l'élément par la valeur de son attribut id ou,
    • on utilise le sélecteur . si on désire accéder à l'élément par une des valeurs de son attribut class.

    En combinant les deux sélecteurs précédent on peut sélectionner une balise par son attribut id et son attribut class.

    On peut donc cibler la balise HTML suivante :

    <div id="main" class="example"></div>
    

    avec le sélecteur CSS suivant :

    div#main.example { /* ... */ }
    

Lire dans une autre langue