29 résultats trouvés pour la recherche « vue »

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


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

  • Mais pourquoi devrais-je abandonner jQuery pour Angular, React... ou Vue.js !?

    J'ai longtemps utilisé jQuery. Puis Vanilla JS comme on appelle si élégamment le JavaScript implémenté nativement. Je surveillais d'un œil les Knockout et compagnie sans jamais réellement m'y investir. Ce fut également le cas avec AngularJS, tellement super-héroïque et sur toutes les lèvres ! Du MVVM paraissait t-il. Un nom barbare à se retaper alors que je terminais tout juste de comprendre en profondeur les tenants et aboutissants d'une architecture MVC(2). Non merci.

    jQuery vs. Vue
    jQuery vs. Vue

    Autant vous le dire : pour ma part je ne jurais que par la séparation des rôles. Je ne voulais pas retourner à du HTML mélangeant de la structure et du comportement, avec des attributs invalides W3C et un code source à chialer. Ça m'a bien conforté dans l'idée que jQuery ou Vanilla JS restaient des valeurs sûr !

    Mais voilà. J'ai fini par investiguer ce AngularJS, à force de le voir passer. Il s'est avéré que les principaux défauts que je lui trouvais pouvaient se régler avec un peu de rigueur. OK ? Mais à quoi bon tant d'efforts pour utiliser l'outil à la mode, là où jQuery à toujours fait le job ?

    Même si j'ai partiellement compris l'utilité d'un tel changement grâce à mes études de surface sur Aurelia, React puis Angular, il semble que j'ai trouvé la réponse définitive à la bonne raison d'abandonner jQuery grâce à l'étude de Vue.js. Et en une simple après midi de lecture ! Je ne jure plus que par cette bibliothèque à présent !

    Pour faire simple : jQuery pilote par le DOM, là où Vue pilote par les données ! Et ça, ça change tout.


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

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


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


  • 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 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 front-end (partie cliente) et développeur back-end (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.

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

  • ES3, Chap 4. — La chaîne des portées en JavaScript

    Ce billet fait partie de la collection ES3 dans le détail et en constitue le Chapitre 4.

    Tout comme l'Animus, la chaîne des portées nous permet de savoir de quel ancêtre nous vient une caractéristique !
    Tout comme l'Animus, la chaîne des portées nous permet de savoir de quel ancêtre nous vient une caractéristique !

    Ce chapitre est dédié, encore une fois, à un mécanisme lié aux contextes d'exécution : j'ai nommé la chaîne des portées.


  • Cas pratique : corriger rapidement une régression HTML ou CSS avec Git

    Les tests de régression d'interfaces sont souvent les plus difficiles à repérer car ils nécessitent l'intervention de l'œil humain et ne peuvent pas être automatisés par des tests unitaires aussi simplement que du code logique. Il faut donc refaire une passe de vérification sur les pages où la CSS et la structure HTML ont changé pour voir si tout est en ordre et cela, dans toutes les tailles d'affichage.

    Autant vous dire qu'en fonction du budget, ce travail n'est pas fait à chaque fois que le code est acté (« commit ») dans Git et qu'il arrive qu'une « régression visuelle » soit repérée quelques temps après qu'elle se soit glissée dans le projet.

    Plus sournois, si la vérification n'est pas faites à tous les coups, les regressions visuelles qui n'empèchent pas la navigation mettent souvent longtemps à être signalées car personne n'est « bloqué ».

    Site web exemple
    Site web exemple

    Nous allons donc voir à travers un exemple comment réparer rapidement une régression HTML ou CSS avec l'utilisation du système de version Git et la plateforme GitHub.

    Note : si vous avez la moindre question à propos de la procédure exposée ci-après, n'hésitez pas à laisser un commentaire. Si vous souhaitez revenir avec un peu plus de bagage à propos du fonctionnement de Git, n'hésitez pas à lire cet article pour enfin comprendre Git et GitHub !


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


  • ES3, Chap 6. — Les fermetures en JavaScript

    Ce billet fait partie de la collection ES3 dans le détail et en constitue le Chapitre 6.

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

    Dans cet article nous allons parler d'un des sujets le plus souvent questionné en JavaScript : les fermetures (« closures »).


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


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


  • 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 { /* ... */ }
    

  • ES3, Chap 9. — La stratégie d'évaluation en JavaScript

    Ce billet fait partie de la collection ES3 dans le détail et en constitue le Chapitre 9.

    La magie du processus produit t-elle des copies d'objets ou de multiples références au même objet initial ?
    La magie du processus produit t-elle des copies d'objets ou de multiples références au même objet initial ?

    Dans cet article, nous allons étudier la stratégie de passage de paramètres (aussi appelé la stratégie de passage des arguments) via des fonctions JavaScript.


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


  • Un dé pour les gouverner tous ! Le d120 ultime !

    Si je vous parle de dés, immédiatement vous imaginez un petit cube à 6 faces numérotées de 1 à 6 : c'est ce que l'on appel un d6 dans le jargon des jeux de rôle. Mais le d6 n'est pas le seul, et surtout, le d6 plus performant en terme de hasard.

    C'est pourquoi je souhaite vous présenter le seul dé capable de remplacer des dés comme les d4, d6, d8, d10, d12 et d20 et j'en passe tout en étant le plus équilibré qu'il soit possible de l'être : j'ai nommé le d120 !

    Le dé ultime, le d120 !
    d120 de The Dice Lab

    Je vous propose de découvrir dans cet article :

    • pourquoi le d120 est appelé le dé ultime,
    • comment le d120 peut être à lui seul utiliser pour faire office de d1 jusqu'au d119 en passant bien entendu par le symbolique d100 des jeux de rôle,
    • les tables de correspondance associées des dés multiples de 120 et
    • les outils pour aligner votre d120 sur vos statistiques ou aligner vos statistiques sur votre d120.

    On finira bien entendu par le moyen de vous procurrer le d120 !

    Si vous êtes développeur front-end et que vous cherchez des exemple d'utilisation de Vue.js à la volée (comme on utiliserait simplement jQuery), je peux vous conseiller de jeter un œil au code source de cet article derrière ce CodePen : https://codepen.io/Haeresis/pen/qGQLvp


  • Utiliser AngularJS en respectant les recommandations W3C et SEO

    AngularJS est un régale pour toute création d'Application Web de petite et moyenne taille. J'entends par là, des ensembles d'interfaces web ou l'utilisateur est sollicité à participer au remplissage de contenu par l'intermédiaire de champs, listes, boutons, etc.

    AngularJS

    Le principe est le suivant : sortir le contenu utile du HTML pour le ranger dans un scope JavaScript afin de le manipuler plus aisément et parsemer le HTML de référence à ce scope de contenu. L'avantage est que le contenu a sa propre vie, et n'est plus figé dans le HTML et surtout toute mise à jour de contenu dans le JavaScript entraîne sa mise à jour dans le HTML, bien pratique.

    Le revers de la médaille est que la source HTML mangée par les moteurs de recherche pour le référencement ne ressemble plus qu'à un ensemble de variables, et les balises et attributs HTML rencontrés font pâlir n'importe quel validateur W3C.

    C'est parti pour un tutoriel vous expliquant comment contenter le W3C pour pouvoir correctement implémenter vos recommandations SEO avec AngularJS.


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


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


  • Enfin apprendre et comprendre le JavaScript !

    ES7 est déjà dans nos chaumières et, en plus d'être « à peu près au point » avec ES5, vous n'avez toujours pas digéré ES6 !

    Quelle est concrètement la différence entre TypeScript et JavaScript ?
    Quelle est concrètement la différence entre TypeScript et JavaScript ?

    Il va être temps de nous y pencher de plus près sur ce blog pour aborder la suite de l'aventure JavaScript sereinement. Cet article à pour but, de vous en apprendre plus sur les versions ES3 et ES5 de JavaScript dites « Vanilla JavaScript » tout en les comparant à des équivalences ES6 dites « Harmony JavaScript ». Cela nous permettra de comprendre en quoi ces améliorations peuvent nous aider au quotidien.

    Nous allons éplucher les fonctionnalités dans un ordre logique d'apprentissage et explorer les mécaniques sous-jacentes. Nous allons même nous permettre, en amont, de réviser un peu les bases. Ça risque d'être long alors, de la même manière que cet article va être publié en plusieurs mise à jour, n'hésitez pas à le lire en plusieurs fois !


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


  • ES3, Chap 5. — Les fonctions en JavaScript

    Ce billet fait partie de la collection ES3 dans le détail et en constitue le Chapitre 5.

    Déclaration et Expression partagent un même monde mais sont totalement différent !
    Déclaration et Expression partagent un même monde mais sont totalement différent !

    Dans cet article nous allons parler de l'un des objets principal en JavaScript – les fonctions.


  • ES3, Chap 8. — Les constructeurs et les prototypes en JavaScript

    Ce billet fait partie de la collection ES3 dans le détail et en constitue le Chapitre 8.

    Chaque couche est reliée à la précédente si bien que chaque entité obtient les caractéristiques de la précédente.
    Chaque couche est reliée à la précédente si bien que chaque entité obtient les caractéristiques de la précédente.

    Cet article va traiter de deux points importants de l'implémentation de la programmation orientée objet du point de vue de JavaScript, les fonctions constructeurs et la chaîne des prototypes.


  • 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


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

    J'ai créé ce petit outil qui va vous permettre de gérer votre jeu Munchkin ainsi que ses extensions plus facilement !
    Source : http://www.regledujeu.fr/

    Elle va vous permettre de :


Lire dans une autre langue