Articles de la catégorie Développement Web
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.
| <script> | - | - | - | - | - |
|---|---|---|---|---|---|
| Analyse HTML | Chargement... | Exécution JS | Analyse HTML | ||
| - | - | - | - | - | |
| <script defer> | - | - | - | - | - |
| Analyse HTML | Analyse + Chargement... | Analyse HTML | Exécution JS | ||
| - | - | - | - | - | |
| <script async> | - | - | - | - | - |
| Analyse HTML | Analyse + Chargement... | Exécution JS | Analyse HTML | ||
| - | - | - | - | - | |
- Chargement...
- Exécution JS
- Analyse HTML
Structurer le JavaScript d'un site 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 « MooTools », « jQuery UI », « Backbone », « Knockout », « AngularJs » 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.
Je vais donc vous livrer à travers cet article l'architecture JavaScript que j'ai adopté. 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 mes différents sites dont vous trouverrez les sources sur GitHub ou même du moteur NodeAtlas.
Les bonnes pratiques JavaScript selon Google
Cet article est une adaptation du Google JavaScript Style Guide en FR. Je n'applique pas nécessairement moi-même toutes les bonnes pratiques listées ci-dessous mais si vous ne vous êtes jamais posé la question : « Comment maintenir un code gardant l'équilibre entre lisibilité et performance avec mon équipe ou les personnes susceptibles de relire mon code » cet article peut s'avérer intéressant. Si vous avez déjà vos pratiques : c'est peut-être l'occasion (comme pour moi) d'en revoir certaines.
Gérer plusieurs langues en HTML5 et CSS3
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.
Node.js : le guide pour convaincre son Boss
On parle souvent de la grande vélocité de Node.js et de son brillant avenir. Mais il n'est pas toujours judicieux de l'utiliser. Pour certains cas d'utilisations, c'est le meilleur choix à faire (application web temps réel). Pour d'autres cas, ça le deviendra mais c'est encore un peu tôt (CMS web). Et pour d'autre il ne sera jamais réellement adapté (intelligence artificielle). Voici l'adaptation française d'un article de Felix Geisendörfer, contributeur Node.js. Il nous explique de manière pragmatique comment raisonnablement et rationnellement il est possible d'utiliser Node.js pour son business.
« Maintenant que vous êtes au point sur l'utilisation de Node.js, il est temps de convaincre votre boss. Enfin peut-être. J'ai eu l'occasion de conseiller différente entreprise sur la question : Node.js est la bonne technologie ? Et parfois, la réponse est tout simplement non.
Ce guide est ma collection opiniâtre des conseils pour ceux d'entre vous qui veulent savoir si Node.js fait sens pour leur entreprise, et si oui, comment convaincre la direction.
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 ».
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’au mobile 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 (sectioning content) 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 (heading) 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.
CSS et sémantique d'une Intégration HTML
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 plein d'autre « Librairie » 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 belle et bien de la mise en oeuvre technique qui permet d'atteindre cette finalité. Pour être concis avant de développer : 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.
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 :
Classes, héritage, encapsulation vs Prototype en JS
Posons le décors, le JavaScript ne possède nativement : ni classe, ni héritage, ni encapsulation... et alors ? C'est probablement le langage le plus incompris, car je vous assure que JavaScript est un puissant langage orienté objet et qu'il permet :
- la création de nouveaux contextes d'exécution autonomes instanciés (new) avec un constructeur, des propriétés et des méthodes personnelles internes (this...) à partir d'un gabarit de construction (classe),
- de dupliquer les propriétés/méthodes dans un autre gabarit (héritage) pour ajouter ou modifier des comportements (polymorphisme) le tout depuis différents endroits dans le code (partielle et virtuelle),
- de limiter l'accès aux propriétés/méthodes au contexte d'exécution (encapsulation privée) ou les promouvoirs (encapsulation publique)...
avec effectivement d'autres mots clés et mécanismes que ceux dont vous avez l'habitude, et nottament grâce au Prototypage.
En ce qui concerne ceux qui ont déjà un bon pied dans le JavaScript, même si jusqu'à présent vous n'avez jamais réellement vu l'intérêt de créer des structures avancées (l'équivalent de classes) pour un développement côté client, il est indéniable que côté serveur (en Node.js par exemple) cela est nécessaire. Et si vous êtes plus d'un développeur Front-end sur vos sites : ça s'avère nécessaire également. Bien qu'en utilisant des bibliothèques JavaScript comme Prototype ou Mootools vous puissiez assez facilement créer des classes, je vais vous apprendre ici à comprendre la roue, vous en créer une sans l'utilisation du prototypage très simplement et cerise sur le gâteau : de jouer avec vos classes en les remplissant/appelant de la même manière qu'en jQuery !
Pour finir nous verrons en quoi le prototypage peut vous simplifier la vie et en quoi donc JavaScript n'a finalement besoin d'aucune classe, d'aucun héritage et d'aucune encapsulation.
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. Les fonctions (et les instances) Object, Function, Array, Date, String, Number, Boolean, RegExp, Error ou encore les objets Globale, Date ou JSON : tous sont d'un seul et même type, le type Object. Pourtant String, Number et Boolean sont eux-même 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.
- A 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) tandis que Math est simplement un type Object.
- 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).
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).
Utiliser jQuery avec Node.js sous Windows
Utiliser jQuery pour du développement côté serveur serait vraiment formidable ! C'est possible avec Node.js. Nous y sommes enfin, l'une des parties très intéressante qui peut justifier l'utilisation de Node.js à la place de vos développements PHP et Cie. C'est le moment de travailler de la même façon côté client et côté serveur sur vos processus de contrôle (vos Contrôleurs en MVC) et donc de développer vos sites avec un unique langage de programmation : JavaScript. Cependant, sous Windows, il y a une petite difficulté en plus liée aux modules développés en code natif que nous allons surmonter ! C'est parti pour manipuler le DOM côté Back-end !
Une Callback pour vos fonctions JS asynchrones
Vous est-il arrivé d'utiliser une fonction JavaScript en maudissant son concepteur parce qu'il avait oublié un détail important... vous permettre de faire quelque chose après l'exécution de son code ! Ça m'arrive trop souvent ces derniers temps et ça ne serait pas non plus la fin du monde si les concepteurs n'avaient pas en plus eu la bonne idée de ne fournir que la version minifiée de leur développement ! Merci pour le partage « Dude » ;)
Je vais vous raconter une histoire.
Serveur web et application web en JavaScript
L'idée ne vous a peut-être jamais effleuré l'esprit, mais sachez qu'il est tout à fait possible de se passer d'Apache et remplacer les PHP, JAVA, C#... par du JavaScript pour faire un site web. Je vous vois faire la grimace dans le fond, mais développer votre propre serveur web en JavaScript est un jeu d'enfant. Tout ceci est réalisable grâce à l'exécuteur de script Node.js et ses modules !
Développer en JavaScript côté serveur avec Node.js
N'avez-vous jamais rêvé d'utiliser jQuery dans vos traitements serveur ? N'avez-vous jamais cherché un équivalent pour PHP ou C# dans l'espoir de manipuler aisément les templates HTML de vos cher moteurs de template avant envoie côté client ? Êtes-vous tombé amoureux de JavaScript ? Ce langage étrange qui semble basique, mais qui est finalement objet, sans type mais finalement typé, procédurale mais finalement événementiel, mono-thread mais finalement multi-traitement asynchrone...
Et si vous réalisiez vos développements Back-end en JavaScript ? C'est possible avec Node.js !
jQuery 2.0 ne supporte plus IE6, IE7 et IE8
Alors que certains s'en réjouissent et que d'autres le craignent, le support des vieux navigateurs tel que Internet Explorer 6, Internet Explorer 7 et Internet Explorer 8 est terminé pour jQuery...
...et cela dès aujourd'hui puisque jQuery 2.0 est arrivé. Alignons quelques faits pour aider à juger l'utilité de la chose.
La navigation interne dans une page web
La navigation interne à une page web d'un site consiste à utiliser une ancre et y faire référence pour forcer l'affichage du navigateur sur la zone en question. Penchons nous d'abord sur l'utilisation « légacy* » de ce mécanisme et ensuite sur les améliorations ergonomiques envisageables avec du JavaScript (et du jQuery).
* tel qu'il fonctionne de manière standard depuis sa création.
L'attribut HTML5 lang et la pseudo-class CSS3 :lang()
Savez-vous qu'en HTML5, l'attribut lang (équivalent xHTML de xml:lang) peut être placé dans n'importe quelles balises de la page. Il définit alors dans quelle langue doit être interprétée la portion de code dans cette balise et ses enfants. Cet attribut fonctionne de paire avec la pseudo-class :lang() que l'on retrouve en CSS3. Nous allons mettre en avant ces deux amis le temps d'un article et le temps de comprendre à quel point ils s'entendent bien.
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 ?
L'animation et le survol souris avec CSS3 ou jQuery
Les ergonomes s'accordent à dire qu'un des moyens pour informer l'utilisateur qu'il peut interagir avec un élément est de changer son apparence au survol de la souris. On peut réaliser cela rapidement en CSS avec plus ou moins d'effets et de complexité ou utiliser JavaScript pour faire quelque chose de plus poussé. Il va être question ici d'étudier une autre possibilité du survol de la souris qui consiste en l'apparition et l'animation d'éléments autres que l'objet survolé. En outre cet article va vous présenter la manière de gérer des menus contextuels en passant par jQuery et même CSS3.
Tester la compatibilité IE7, IE8 et IE9 avec IE10
Internet Explorer 10, la dernière version d'Internet Explorer à l'heure où j'écris ce billet, est le navigateur par défaut des systèmes d'exploitations Windows 8 et Windows Phone 8 (dans sa version mobile). Cependant, depuis le 26 février 2013, IE10 est également disponible sur Windows 7 ce qui m'amène à cet article puisque j'ai enfin décidé de l'installer. Jetons un œil à cette version et surtout à la possibilité formidable de tester les anciennes versions d'IE dans IE10.
Jeu du Taquin en jQuery sur vos sites !
Vous connaissez probablement ce jeu ou l'on mélange une image composée de 4 fois 4 carrés dans le seul but de la remettre en ordre une fois celle-ci mélangée. Il peut s'agir de la reconstituer de mémoire ou à partir d'un modèle. Ce jeu c'est le Taquin et je vous le propose sous la forme d'un plugin jQuery pour votre site.
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 { /* ... */ }