Tous les articles pour Ressources

  • 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


  • Et si vous compreniez enfin Git et Github ?

    Si Svn (Subversion) est la version « client-server » d'un système de gestion de version, alors Git en est sans conteste la version « peer-to-peer ».

    Si vous découvrez le système de gestion de version Git et que vous l'utilisez seul et occasionnellement, il existe peut-être encore beaucoup de zones d'ombre pour vous sur son utilisation ainsi que sur la totalité des possibilités offertes. D'ailleurs, êtes-vous réellement sûr de comprendre la portée de ce système de gestion de version distant et distribué ?

    Bien que le contexte de vie soit détruit, les zombis vivent toujours, enfermés, tel des variables dans une fermeture.
    Réseau distribué : xkl.com

    C'était également mon cas. Tout le long de mon amélioration continue de l'utilisation de Git, je vais maintenir cet aide-mémoire. Il abordera :

    • la raison d'être de Git par l'exemple,
    • la description des actions de Git pour un travail sur une branche,
    • la description d'une méthode de travail multi-branche avec Git et
    • le description de Git avec de multiples sources via Github.

    Si vous ne connaissez vraiment pas grand chose à Git n'hésitez pas à lire : Démarrage rapide de GIT et particulièrement :


  • Est-il si null cet undefined ?

    Si vous faites du JavaScript régulièrement —et il est de plus en plus difficile d'y couper si vous êtes développeur web—, vous vous êtes peut-être déjà posé cette question : « Quelle est la différence entre la valeur null et la valeur undefined ? ». Question qu'on ne se pose pas quand on vient d'un autre langage. Null vs Undefined

    Si nous résumons ensemble nous pouvons tomber d'accord sur le fait que :

    • Null et Undefined sont tous les deux des types ne possédant qu'une seule valeur ; les constantes respectives null et undefined.
    • Ils s'utilisent tous les deux pour indiquer « l'absence ».
    • Ils sont tous les deux évalués à false dans un contexte booléen (ex. : dans une condition if, avec l'opérateur binaire d'égalité a == b, avec l'opérateur ternaire conditionnel a ? b : c, etc.).

    En gros, ils servent donc à la même chose non ? Cette réponse ne me convient pas car, même s'il est vrai qu'à chaque première vu les comportements JavaScript semblent « loufoque », l'expérience m'a toujours prouvé que « c'était moi » qui n'avait pas compris correctement le JavaScript. Si les deux types existes, il y a forcément une raison. Voici ce qui en est concrètement dit :

    La valeur undefined appartient au type primitif Undefined et est utilisée quand aucune valeur typée n'a été assignée à une variable.

    La valeur null appartient au type primitif Null et représente l'absence de valeur, la non-existence d'une référence dans une variable.

    La distinction est plus clair ainsi non ? Pas vraiment... On va retrousser nos manches et regarder un peu ce qu'on peut éclaircir. Si vous n'avez pas le temps de suivre l'explication exhaustive et intéressante qui va suivre je vous laisse filer à la conclusion qui répond à cette question. Si par contre vous êtes curieux et/ou avez le temps de comprendre les différences, c'est juste en dessous !


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


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

    Cet article fait office de conventions d'architecture d'un site web orienté composant pour la partie frontale, peu importe la technologie d'implémentation finale, de manière à ce que le code soit valide, performant et maintenable par des Front-end Developers, des Back-end Developers ainsi que des Content Fillers (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.


  • Outil Munchkin : Listez, Mélangez, Classez, Triez et Créez vos Jeux !

    Je suis fan de Munchkin depuis des années maintenant ! Mais j'ai un assez gros problème depuis quelques temps avec le Munchkin : plus les extensions augmentes et plus j'ai des difficultés à pouvoir jouer avec des jeux équilibrés. Vous avez peut-être le même sentiment et si vous vous êtes déjà confronté aux problèmes listés ci-après, cette page peut vous être utile !

    Elle va vous permettre de :


  • Des Easter Eggs sur vos sites avec le Konami Code JavaScript

    Connaissez-vous ce petit code de triche qu'est le Konami Code ? Ce code à entrer dans les jeux vidéos permet de débloquer des options secrètes. Je vous propose de l'implémenter sur vos sites web en JavaScript avec une petite API maison gérant le clavier et le tactile. Suivez le guide !

    Konami Code

    L'API présenté dans cet article lève un événement JavaScript quand vous entrez la célèbre séquence du Konami Code « Haut Haut Bas Bas Gauche Droite Gauche Droite B A » avec votre clavier. Cela marche également avec votre doigt en glissant « Haut Haut Bas Bas Gauche Droite Gauche Droite » puis en faisant « Tap Tap ».


  • JavaScript et callback par nom de paramètre comme dans AngularJS

    Ce qui m'a interpellé la première fois que j'ai pu m'essayer à AngularJS, c'est la possibilité offerte de sélectionner les services que l'on souhaite en les récupérant par leur nom d'argument, et non par leur position d'argument. Ce concept n'existe pas en JavaScript et pourtant le fait est bien là : function ($scope, $http) ou function ($http, $scope) renvoi les bons contenus de variable en fonction de leurs noms et function (scope, $http) vous dit que scope n'existe pas !

    Comment cela est-il possible en JavaScript ? Il est possible de « simuler » un passage par nom d'argument avec un type Object en utilisant ses noms de propriété, mais là, il s'agit bel et bien de différents arguments.

    Voici le petit exercice que je vous propose dans cet article, faire du « Reverse Engineering » sur le mécanisme « caché » permettant aux fonctions de rappel (callback) JavaScript de délivrer leurs arguments par « nom d'argument » en lieu et place du mécanisme natif qui est par « position d'argument ».

    Note : on parle souvent de passage par « nom de paramètre » dans les autres langages. Ici, en réalité, il s'agit plutôt de passage par nom d'argument car cette fonctionnalité est associée aux arguments fournis par la fonction de rappel et non aux paramètres que l'on fourniraient à une fonction. Pour rappel on fournit des arguments en déclarant une fonction, et on passe des paramètres en exécutant une fonction.


  • Gérer les Erreurs et les Exceptions en JavaScript

    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.

    'Erreur ou Exception ?'

    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.


  • Installer n'importe quel module NPM Node.js sous Windows

    Si vous avez déjà tenté d'installer des modules NPM pour Node.js via la commande npm install <package> [options] sous Windows, vous avez probablement déjà eu des soucis d'installation et abandonné l'idée. Peut-être même que vous ne vous êtes pas lancé dans l'aventure Node.js pour ces raisons ? Effectivement, certains modules ont besoin de Python pour s'installer et d'autres de Visual Studio. Il y en à même, plus rare, qui on besoin de GIT.

    Par exemple, NodeAtlas est un module qui nécessite que Python soit installé pour que les fonctions permettant l'optimisation d'images s'installent correctement sous Windows. Socket.io a, lui, besoin de Visual Studio pour être installé sans quoi il ne fonctionnera pas.

    Voici la procédure d'installation des pré-requis nécessaires pour faire fonctionner Node.js et tous ses modules NPM sous Windows ainsi qu'une aide à la résolution de problèmes divers après installation.


  • Conventions HTML et CSS orientés composants

    Je viens de (re)terminer la lecture du Guide CSS Fr et j'ai eu envie d'apporter quelques modifications et ajouts à ces très bons conseils. Cet article va donc en quelque sorte constituer mes conventions en matière de création et maintenance HTML et CSS. Elles sont donc identiques à ce qui est écrit sur Guide CSS Fr à cet article prêt !

    Anatomie d'une règle CSS
    Affreux sélecteur... http://www.puce-et-media.com/

    N'ayant rien à ajouter aux parties autres que « 4. Convention de nommage », je passe directement à mes propres conventions de nommage en vous sensibilisant à l'anatomie d'une page HTML.

    Je finirai néanmoins par pointer du doigt une erreur, sinon la seule, en ce qui concerne la totale inutilité du préfixe .js- destiné à séparer le visuel du fonctionnel.

    Note : Tous les exemples d'inclusion de fragment HTML sont tirés de NodeAtlas mais c'est la même chose avec vos Frameworks préférés.


  • 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.


  • NodeAtlas, le Framework JavaScript MVC(2), SEO et W3C compliant.

    NodeAtlas

    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.


  • É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.


  • 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="Haeresis"
           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/Haeresis/pen/AzJgF/

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


  • 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.


  • 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 ».

    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.