JavaScript

Dans cet article, vous allez recréer le jeu de devinette Wordle. Cet article couvre la logique de base du jeu mais n’implémente pas le partage de vos résultats. L’article ne couvre pas non plus la fonctionnalité qui génère les statistiques du jeu. Ce tutoriel est destiné aux développeurs frontaux débutants qui souhaitent créer un projet JavaScript amusant et simple. Conditions préalables Ce tutoriel suppose une compréhension de base de.. : Comment construire le clone de Wordle Voici les étapes à suivre pour créer le clone de Wordle : Configuration du projet Création du plateau de jeu Création du clavier à l’écran Accepter les entrées de l’utilisateur Ajout de notifications Faire en sorte que le clavier à l’écran génère des entrées Ajout d’une animation Configuration du projet Avant de construire le jeu, vous devez mettre en place certains composants. Tout d’abord, vous devez créer un dossier pour tout le code source de notre clone. Appelez ce dossier « build ». Après avoir fait cela, configurez votre serveur de développement. Serveur réel Vous allez utiliser un serveur de développement appelé live-server. Cette étape est facultative, mais elle vous évite de devoir recharger la page après chaque modification du code source. Installez live-server en tapant ce qui suit dans votre terminal : npm install live-server HTML Setup Dans le build, créez un fichier HTML et nommez-le index.html. Mettez le code suivant dans ce fichier : Clone de Wordle Le code HTML crée un en-tête pour notre jeu et crée le conteneur pour le plateau de jeu. Vous allez utiliser une bibliothèque JavaScript appelée Toastr pour les notifications dans le jeu et une bibliothèque CSS appelée Animate.css pour les animations du plateau. Pour les inclure dans votre projet, ajoutez les liens suivants à l’en-tête de votre fichier index.html. Ces liens récupèreront les CSS pour Animate.css et Toastr. Placez le code suivant dans index.html, juste avant la balise de fermeture body : Ce code récupérera le JavaScript de Toastr et de jQuery (car Toastr en dépend). Configuration du JavaScript Votre JavaScript sera placé dans un fichier appelé script.js. Créez script.js, et placez-le dans build. Placez ce code en haut de script.js : importez { WORDS } de « ./words.js » ; const NUMBER_OF_GUESSES = 6 ; let guessesRemaining = NUMBER_OF_GUESSES ; let currentGuess = [] ; let nextLetter = 0 ; let rightGuessString = MOTS[Math.floor(Math.random() * MOTS.length)] console.log(rightGuessString) Cet extrait de code initialise les variables globales que nous utiliserons pour notre jeu et choisit un mot aléatoire dans le tableau WORDS comme bonne réponse pour ce tour. Nous enregistrons également la bonne réponse dans la console, afin de déboguer notre code si nécessaire. La liste des mots autorisés que nous utiliserons sera codée en dur et stockée dans un tableau dans le fichier words.js. Créez words.js, dans build, et copiez le JavaScript de ce lien dans ce fichier. Words.js devrait ressembler à ceci : à quoi devrait ressembler words.js Configuration du CSS Nommez votre fichier CSS style.css. Style.css doit également être placé dans build. h1 { text-align : center ; } La seule configuration CSS dont nous avons besoin est un peu de code pour centrer le texte de notre en-tête Mise en place de l’ensemble Enfin, liez script.js en tant que module dans votre index.html, puis liez style.css. À ce stade, votre index.html devrait ressembler à ceci : Clone de Wordle et votre structure de fichiers devrait ressembler à ceci : capture d’écran de l’arborescence des fichiers Démarrez live-server en tapant ceci dans votre console : construction du serveur en direct C’est tout pour la configuration. Comment créer le plateau de jeu Vous allez créer le plateau de jeu en écrivant une fonction JavaScript. Appelons cette fonction initBoard. Ajoutez ce code à votre fichier script.js : function initBoard() { let board = document.getElementById(« game-board ») ; for (let i = 0 ; i < NUMBER_OF_GUESSES ; i++) { let row = document.createElement(« div ») row.className = « letter-row » (rangée de lettres) for (let j = 0 ; j < 5 ; j++) { let box = document.createElement(« div ») box.className = « boîte aux lettres » row.appendChild(box) } board.appendChild(row) } } initBoard() Que fait ce code ? initBoard crée une ligne pour chaque réponse donnée à l’utilisateur et crée 5 cases pour chaque ligne. Il y a une case pour chaque lettre de la réponse, et la fonction les rend toutes enfants de la ligne. initBoard ajoute ensuite chaque ligne au conteneur du tableau. Chaque ligne reçoit la classe letter-row, et chaque boîte reçoit la classe letter-box. Ensuite, vous allez styliser le tableau à l’aide de CSS. Placez le code suivant dans votre fichier style.css : #game-board { display : flex ; align-items : center ; flex-direction : column ; } .letter-box { border : 2px solid gray ; border-radius : 3px ; margin : 2px ; font-size : 2.5rem ; font-weight : 700 ; hauteur : 3rem ; width : 3rem ; display : flex ; justify-content : center ; align-items : center ; text-transform : uppercase ; } .filled-box { border : 2px solid black ; } .letter-row { affichage : flex ; } Ce CSS fait plusieurs choses : centre les rangées du tableau horizontalement et verticalement définit une hauteur, une largeur et une bordure pour chaque case du tableau crée un aspect distinct pour une case remplie d’une lettre A ce stade, lorsque vous chargez le fichier index.html dans votre navigateur, il devrait ressembler à ceci : capture d’écran du jeu Comment créer le clavier à l’écran La façon la plus simple de créer le clavier est d’utiliser le HTML. Ajoutez ce code à votre index.html, après le div du plateau de jeu : q w e r t y u i o p a s d f g h j k l Del z x c v b n m Entrez Maintenant, donnez du style au balisage en ajoutant ce CSS à la fin de style.css : #keyboard-cont { margin : 1rem 0 ; display : flex ; flex-direction : column ; align-items : center ; } #keyboard-cont div { display … Lire la suite

En tant que développeur de logiciels, j’utilise une variété de plugins qui me facilitent la vie lorsqu’il s’agit d’éviter les erreurs et de coder plus efficacement. Si ces techniques d’économie de temps et d’efforts peuvent sembler négligeables en tant que telles, lorsqu’elles sont cumulées, elles peuvent vraiment faire la différence. Dans cet article, je vais partager avec vous mes plugins WebStorm préférés pour les développeurs JavaScript et les raisons pour lesquelles je les utilise. Rainbow Brackets Parce que qui n’a jamais passé du temps à essayer de comprendre quelles parenthèses sont les unes des autres ? Lorsque je travaille sur des projets JavaScript, j’imbrique souvent les parenthèses les unes dans les autres, ce qui donne quelque chose qui ressemble à ceci : Pas de crochets arc-en-ciel Il devient très difficile de suivre la portée de certaines fonctions, surtout lorsque vous voulez en supprimer. Avec les parenthèses arc-en-ciel, vous pouvez voir visuellement ce qui se passe dans votre code, lorsqu’il s’agit de délimiter la portée des fonctions. En fait, les crochets arc-en-ciel ne fonctionnent pas seulement avec les crochets, mais aussi avec les parenthèses, ce qui permet de repérer facilement des éléments comme le mapping dans les projets React. Des crochets arc-en-ciel ! En savoir plus sur les parenthèses arc-en-ciel ici. Tabnine Tabine est mon plugin préféré depuis un certain temps maintenant. J’aime l’utiliser pour sa complétion de texte précise qui m’a littéralement prédit des lignes entières de code que je peux choisir d’accepter d’une simple pression de touche. Tabnine prédisant des extraits de code en fonction de mes habitudes de codage Il y parvient grâce à ses algorithmes de codage prédictif pilotés par l’IA. Lorsqu’il est activé, Tabnine apprend en fait de vos habitudes de codage et des projets sur lesquels vous travaillez, de sorte qu’il peut prédire avec précision ce que vous allez taper ensuite. J’utilise actuellement Tabnine avec mon IDE Webstorm pour les projets JavaScript. Mais il est également disponible dans plus de 30 langues et pour 21 IDE et éditeurs de code. Pour en savoir plus ici. CSV C’est un outil intéressant si vous travaillez avec des fichiers CSV. Le plugin CSV traite le CSV, ou « valeurs séparées par des virgules », comme son propre langage dans les IDE de JetBrains. Cela signifie qu’il a sa propre définition syntaxique, ses éléments de langage structurés et les types de fichiers associés, tels que .csv, .tsv et .psv. Ce plugin nous permet de le traiter comme n’importe quel autre code dans l’éditeur, les erreurs étant mises en évidence pour nous. Voici une liste complète du support que vous obtiendrez : Détection des fichiers CSV/TSV/PSV éditeur de tableaux flexible éditeur de texte personnalisable coloration des colonnes personnalisable commentaire de ligne personnalisable validation syntaxique mise en évidence de la syntaxe (personnalisable) mise en forme du contenu (personnalisable) contrôles rapides intentions (Alt+Entrée), par exemple Citation/Décitation (tout), Décalage de colonne gauche/droite vue de la structure (mise en page de l’en-tête et des entrées) prise en charge de ‘,’, ‘;’, ‘:’, ‘|’ et ‘↹’ comme séparateur de valeur prédéfini support pour les séparateurs de valeurs librement définis support des commentaires de ligne (# par défaut, personnalisable) mise en évidence des valeurs des colonnes actives mise en évidence du séparateur de tabulation (↹) A quoi ressemble un fichier .csv lorsqu’il est ouvert dans Webstorm, avec le plugin CSV. En savoir plus sur CSV ici. Il existe aussi le CSV arc-en-ciel, si vous voulez ajouter un peu de couleur à votre vie ! Manipulation de chaînes de caractères Le plugin String Manipulation vous permet de formater instantanément des chaînes de caractères avec une variété d’options intégrées. Ainsi, par exemple, si vous voulez changer un groupe de chaînes surlignées en camelCase, vous pouvez le faire instantanément. Mais ce n’est que la partie émergée de l’iceberg. Vous pouvez trier les chaînes de caractères, les filtrer ou même les trier en fonction de la casse ! Cet outil est un énorme gain de temps lorsqu’il s’agit de mettre de l’ordre dans le code. Avant la manipulation des chaînes Après la manipulation des chaînes de caractères ! Si soigné et ordonné en un clic ! La liste des fonctionnalités est trop longue, alors au lieu de la coller ici, vous pouvez la consulter sur le site web ici. Prettier De tous les plugins mentionnés, Prettier est celui que j’utilise depuis le plus longtemps, et j’oublie parfois qu’il fait partie intégrante de mes activités quotidiennes en tant que développeur. Prettier prend votre code tel que vous l’avez écrit, et fournit une standardisation et une cohérence. En fait, si tout le monde utilisait Prettier, alors tout notre code suivrait exactement les mêmes directives – hourra pour la cohérence ! Il le fait en n’offrant pas des tas et des tas d’options à l’utilisateur comme ESLint. Si vous le voulez vraiment, vous pouvez le changer, mais cela irait à l’encontre de son objectif. Avant plus joli Ici vous pouvez voir Prettier au travail. Il a pris du code et a fait en sorte que toutes les lignes de code aient une longueur inférieure à 60 caractères. Si une ligne dépasse cette limite, elle est placée sur une nouvelle ligne séparée. Il ajoute également des points-virgules si vous le souhaitez, et s’assure que tous les guillemets sont cohérents. Après Prettier Voilà, c’est beaucoup plus « joli » ! (geddit ?) Prettier est en fait déjà fourni avec WebStorm, donc vous n’avez même pas besoin de l’installer pour l’utiliser.

Vous avez peut-être déjà rencontré ou écrit du code similaire à celui-ci en écrivant du JavaScript : function sayWord(word) { return () => console.log(word) ; } const sayHello = sayWord(« hello ») ; sayHello() ; // « bonjour » Ce code est intéressant pour plusieurs raisons. Premièrement, nous pouvons accéder à word dans la fonction renvoyée par sayWord. Deuxièmement, nous avons accès à la valeur de wordlorsque nous appelons sayHello – même si nous appelons sayHello là où nous n’avons pas accès à word. Dans cet article, nous allons découvrir les notions de scope et de closures, qui permettent ce comportement. Présentation de Scope en JavaScript La portée est le premier élément qui nous aidera à comprendre l’exemple précédent. La portée d’une variable est la partie du programme dans laquelle elle est disponible pour être utilisée. Les variables JavaScript ont une portée lexicale, ce qui signifie que nous pouvons déterminer la portée d’une variable à partir de l’endroit où elle est déclarée dans le code source. (Ce n’est pas tout à fait vrai : les variables var n’ont pas de portée lexicale, mais nous en parlerons bientôt) Prenons l’exemple suivant : if (true) { const foo = « foo » ; console.log(foo) ; // « foo » } L’instruction if introduit une portée de bloc en utilisant une instruction de bloc. Nous disons que foo a une portée de bloc dans l’instruction if. Cela signifie qu’on ne peut y accéder qu’à l’intérieur de ce bloc. Si nous essayons d’accéder à foo en dehors du bloc, nous obtenons une ReferenceError car il est hors de portée : if (true) { const foo = « foo » ; console.log(foo) ; // « foo » } console.log(foo) ; // Erreur de référence non attrapée : foo n’est pas défini Les instructions de bloc sous d’autres formes, telles que les boucles for et while, créent également une portée pour les variables de bloc. Par exemple, foo a une portée dans le corps d’une fonction ci-dessous : function sayFoo() { const foo = « foo » ; console.log(foo) ; } sayFoo() ; // « foo » console.log(foo) ; // Erreur de référence non attrapée : foo n’est pas défini Portées et fonctions imbriquées JavaScript autorise les blocs imbriqués et donc les portées imbriquées. Les portées imbriquées créent un arbre de portée ou une chaîne de portée. Considérez le code ci-dessous, qui imbrique plusieurs instructions de bloc : if (true) { const foo = « foo » ; console.log(foo) ; // « foo » if (true) { const bar = « bar » ; console.log(foo) ; // « foo » if (true) { console.log(foo, bar) ; // « foo bar } } } JavaScript nous permet également d’imbriquer des fonctions : function foo(bar) { function baz() { console.log(bar) ; } baz() ; } foo(« bar ») ; // « bar » Comme prévu, nous pouvons accéder aux variables depuis leur portée directe (la portée où elles sont déclarées). Nous pouvons également accéder aux variables à partir de leurs portées internes (les portées qui s’imbriquent dans leur portée directe). En d’autres termes, nous pouvons accéder aux variables à partir de la portée dans laquelle elles sont déclarées et à partir de chaque portée interne. Avant d’aller plus loin, nous devons clarifier la différence de comportement entre les types de déclaration de variables. Portée de let, const et var en JavaScript Nous pouvons créer des variables à l’aide des déclarations let, const et var. Pour let et const, la portée des blocs fonctionne comme expliqué ci-dessus. Cependant, var se comporte différemment. let et const let et const créent des variables à portée de bloc. Lorsqu’elles sont déclarées dans un bloc, elles ne sont accessibles que dans ce bloc. Ce comportement a été démontré dans nos exemples précédents : if (true) { const foo = « foo » ; console.log(foo) ; // « foo » } console.log(foo) ; // Uncaught ReferenceError : foo n’est pas défini var Les variables créées avec var sont limitées à la fonction la plus proche ou à la portée globale (dont nous parlerons bientôt). Elles n’ont pas de portée de bloc : function foo() { if (true) { var foo = « foo » ; } console.log(foo) ; } foo() ; // « foo » var peut créer des situations confuses, et cette information n’est incluse que par souci d’exhaustivité. Il est préférable d’utiliser let et const lorsque cela est possible. Le reste de cet article ne concerne que les variables let et const. Si vous souhaitez savoir comment var se comporte dans l’exemple ci-dessus, vous devriez consulter mon article sur le hissage. Portée globale et portée des modules en JavaScript En plus de la portée des blocs, les variables peuvent avoir une portée globale ou modulaire. Dans un navigateur Web, la portée globale se situe au niveau supérieur d’un script. Il s’agit de la racine de l’arbre de portée que nous avons décrit précédemment, et elle contient toutes les autres portées. Ainsi, la création d’une variable dans la portée globale la rend accessible dans toutes les portées : Chaque module possède également sa propre portée. Les variables déclarées au niveau du module ne sont disponibles que dans ce module – elles ne sont pas globales : Les fermetures en JavaScript Maintenant que nous comprenons la portée, revenons à l’exemple que nous avons vu dans l’introduction : function sayWord(word) { return () => console.log(word) ; } const sayHello = sayWord(« hello ») ; sayHello() ; // « bonjour » Rappelez-vous qu’il y avait deux points intéressants dans cet exemple : La fonction retournée par sayWord peut accéder au paramètre word La fonction renvoyée conserve la valeur de word lorsque sayHello est appelée en dehors de la portée de word Le premier point peut être expliqué par la portée lexicale : la fonction retournée peut accéder à word car il existe dans sa portée externe. Le second point est dû aux fermetures : Une fermeture est une fonction combinée avec des références aux variables définies à l’extérieur de celle-ci. Les fermetures maintiennent les références aux variables, ce qui permet aux fonctions d’accéder aux variables en dehors de leur portée. Elles « enferment » la fonction et les variables dans son environnement. Exemples de fermetures en JavaScript Vous … Lire la suite

Si vous êtes un utilisateur de Google Chrome, vous avez probablement utilisé des extensions dans le navigateur. Vous êtes-vous déjà demandé comment en créer une vous-même ? Dans cet article, je vais vous montrer comment vous pouvez créer une extension Chrome à partir de zéro. Qu’est-ce qu’une extension Chrome ? Une extension Chrome est un programme qui est installé dans le navigateur Chrome et qui améliore les fonctionnalités du navigateur. Vous pouvez en créer une facilement en utilisant des technologies Web comme HTML, CSS et JavaScript. La création d’une extension Chrome est similaire à celle d’une application Web, mais elle nécessite un fichier manifest.json que nous aborderons dans la dernière section de cet article. À quoi ressemblera notre extension Chrome ? Dernier rapport de Covid sur l’extension de UK-Chrome Comme vous pouvez le voir, l’extension chrome ci-dessus affiche les dernières données sur le coronavirus (COVID-19) au Royaume-Uni. Nous allons voir comment créer cette extension dans cet article de blog. Nous utiliserons ici l’API https://api.coronavirus.data.gov.uk/v1/data pour récupérer les données. Par souci de simplicité, nous n’afficherons que le dernier enregistrement. Le code source complet de ce projet se trouve sur GitHub. Comment créer une extension Chrome Tout d’abord, nous devons créer un dossier vide dans lequel nous ajouterons nos fichiers HTML, CSS et JavaScript. À l’intérieur du dossier, créons un fichier index.html avec ce code HTML passe-partout : Maintenant, ajoutons un lien vers le CDN de Bootstrap dans la balise head. Nous utiliserons ici le cadre Bootstrap pour ne pas avoir à écrire de CSS supplémentaire dans cet exemple. Dans la démo, nous avons vu que les enregistrements sont affichés sous forme de tableau. Nous devons donc maintenant travailler à la création d’un tableau. Dernier rapport Covid – Royaume-Uni Date Pays Confirmé Décès Le code ci-dessus crée un tableau d’une largeur de 450px. Il existe quatre rubriques différentes dans un tableau : Date, Pays, Confirmé, et Décès. Ici, vous pouvez voir que des ID différents ont été attribués à chaque donnée de tableau td. Nous utiliserons la valeur de ces ID en JavaScript pour mettre à jour les données du tableau. De plus, ici, nous avons chargé le JavaScript à la fin, après avoir chargé tout le contenu HTML. Maintenant, puisque la table a été affichée, nous devons travailler sur l’écriture du JavaScript afin de récupérer les données de l’API. Créons un fichier script.js et ajoutons le code suivant : async function fetchData() { const res=await fetch (« https://api.coronavirus.data.gov.uk/v1/data ») ; const record=await res.json() ; document.getElementById(« date »).innerHTML=record.data[0].date ; document.getElementById(« areaName »).innerHTML=record.data[0].areaName ; document.getElementById(« latestBy »).innerHTML=record.data[0].latestBy ; document.getElementById(« deathNew »).innerHTML=record.data[0].deathNew ; } fetchData() ; Maintenant, décomposons le code ci-dessus : Nous utilisons ici la fonction asynchrone appelée fetchData. Les données sont récupérées à partir de l’API https://api.coronavirus.data.gov.uk/v1/data. Les données JSON sont stockées dans une variable appelée record. Le contenu HTML de td avec les ids date, areaName, latestBy et deathNew est mis à jour par les valeurs correspondantes de l’API. Si nous vérifions le navigateur, nous pourrons voir le résultat suivant. Dernier rapport Covid du Royaume-Uni – Aperçu du navigateur Les données sont récupérées depuis l’API et sont mises à jour dès que les données de l’API changent. Fichier Manifest.json Comme nous l’avons vu précédemment, la création d’une extension Chrome est similaire à la création de toute application Web. La seule différence est que l’extension Chrome nécessite un fichier manifest.json dans lequel nous conservons toutes les configurations. Le fichier manifest.json contient toutes les informations nécessaires à la création de l’extension Chrome. C’est le premier fichier que l’extension vérifie et tout est chargé à partir de ce fichier unique. Maintenant, créons un fichier manifest.json dans le dossier racine et ajoutons le code suivant : { « name » : « Covid-19 Stats UK », « version » : « 1.0.0 », « description » : « Dernières données covidées du Royaume-Uni », « manifest_version » : 3, « author » : « Sampurna Chapagain », « action »:{ « default_popup » : « index.html », « default_title » : « Dernier rapport Covid » } }Manifest.json Notre fichier manifest.json contient la valeur des champs nom, version, description, manifest_version (3 dans ce cas, qui est la dernière version du manifeste), auteur et action. Dans le champ action, il y a la valeur de default_popup qui contient le chemin vers le fichier HTML qui est index.html dans cet exemple. Vous pouvez jeter un coup d’oeil ici pour voir toutes les configurations d’un fichier manifest.json. Maintenant, puisque nous avons également ajouté le fichier manifest.json, nous sommes prêts à ajouter ce projet comme une extension dans notre navigateur Chrome. Pour cela, nous devons aller à Select More Tools et ensuite choisir Extensions dans le menu du navigateur comme le montre l’image ci-dessous : Naviguer vers les extensions dans Chrome Après avoir choisi Extensions, cela redirige vers la page des extensions dans Chrome. Assurez-vous d’activer le mode Développeur ici. Une fois que c’est fait, vous devez cliquer sur le bouton Load unpacked qui nous permettra de charger notre projet dans le magasin d’extensions de Chrome. Maintenant, l’extension est disponible dans notre magasin d’extension Chrome. Vous pouvez également épingler l’extension dans le navigateur comme indiqué dans le gif ci-dessous : Épingler l’extension au navigateur Cette extension fonctionne uniquement dans votre navigateur. Si vous souhaitez la publier sur le Chrome Web Store, vous pouvez suivre ce lien. Conclusion Si vous avez quelques connaissances en HTML, CSS et JavaScript, vous pouvez facilement créer des extensions pour Chrome. J’espère qu’après avoir lu cet article de blog, vous créerez des extensions sympas. Bon codage !

Le chaînage optionnel est un moyen sûr et concis d’effectuer des contrôles d’accès pour les propriétés d’objets imbriqués. L’opérateur de chaînage optionnel ?. prend la référence à sa gauche et vérifie si elle est indéfinie ou nulle. Si la référence est l’une de ces valeurs nulles, les contrôles s’arrêtent et renvoient undefined. Sinon, la chaîne des contrôles d’accès continuera sur le chemin heureux jusqu’à la valeur finale. // Un objet person vide avec des informations de localisation optionnelles manquantes const person = {} // Ce qui suit équivaut à undefined au lieu d’une erreur const currentAddress = person.location ?.address Le chaînage optionnel a été introduit dans l’ES2020. Selon le TC39, il est actuellement au stade 4 du processus de proposition et est prêt à être inclus dans la norme ECMAScript finale. Cela signifie que vous pouvez l’utiliser, mais notez que les anciens navigateurs peuvent encore exiger l’utilisation de polyfill. Le chaînage facultatif est une fonctionnalité utile qui peut vous aider à écrire un code plus propre. Voyons maintenant comment l’utiliser. Syntaxe du chaînage facultatif Dans cet article, je vais surtout vous expliquer comment accéder aux propriétés des objets. Mais vous pouvez également utiliser le chaînage optionnel pour contrôler les fonctions. Voici tous les cas d’utilisation du chaînage optionnel : obj ?.prop // Accès optionnel à une propriété statique obj ?.[expr] // accès facultatif à une propriété dynamique func ?.(…args) // appel facultatif de fonction ou de méthode Source : MDN Web Docs Exemple : const value = obj ?.propOne ?.propTwo ?.propThree ?.lastProp ; Dans l’extrait de code ci-dessus, nous vérifions si obj est nul ou indéfini, puis propOne, puis propTwo, et ainsi de suite. Le chaînage optionnel porte bien son nom. Dans la chaîne d’accès aux propriétés de l’objet, nous pouvons vérifier que chaque valeur n’est pas indéfinie ou nulle. Cette vérification peut être extrêmement utile pour accéder à des valeurs d’objets profondément imbriquées. Il s’agit d’une fonctionnalité très attendue qui vous évite d’avoir à effectuer de nombreuses vérifications de nullité. Cela signifie également que vous n’avez pas besoin d’utiliser des variables temporaires pour stocker les valeurs vérifiées, par exemple : const neighborhood = city.nashville && city.nashvile.eastnashville ; Ici, nous pouvons vérifier que nashville est une propriété de city avant de tenter d’accéder à la propriété inner neighborhood de eastnashville. Nous pouvons convertir l’exemple ci-dessus pour utiliser le chaînage optionnel, comme suit : const neighborhood = city ?.nashville ?.eastnashville ; Le chaînage optionnel simplifie cette expression. Gestion des erreurs avec le chaînage facultatif Le chaînage facultatif est particulièrement utile lorsque vous travaillez avec des données d’API. Si vous n’êtes pas sûr de l’existence d’une propriété facultative, vous pouvez faire appel au chaînage facultatif. Un mot d’avertissement N’utilisez pas le chaînage optionnel à chaque occasion. Cela pourrait avoir pour conséquence de faire taire les erreurs en ayant un potentiel indéfini retourné à de nombreux endroits. Il est également important de se rappeler que la vérification s’arrêtera et « court-circuitera » au moment où elle rencontrera une valeur nulle. Pensez-y pour les propriétés suivantes de la chaîne et ce qui se passera si elles ne peuvent être atteintes. Il est préférable d’utiliser cette vérification lorsque vous savez qu’un élément peut ne pas avoir de valeur, comme une propriété facultative. Si une valeur requise est assortie d’un contrôle nullish, elle peut être réduite au silence par le renvoi de la valeur undefined au lieu de renvoyer une erreur pour signaler ce problème. Chaînage optionnel + Nullish Coalescing Le chaînage optionnel se combine bien avec le coalesçage nullish ? ? pour fournir des valeurs de repli. const data = obj ?.prop ? ? « chaîne de repli » ; const data = obj ?.prop ?.func() ? ? fallbackFunc() ; Si l’élément à gauche de ? ? est nul, l’élément à droite sera retourné. Nous savons que si un contrôle ?. correspond à une valeur nulle dans la chaîne, il retournera undefined. Nous pouvons donc utiliser notre coalescence nullish pour répondre au résultat indéfini et définir une valeur de repli explicite. const meal = menu.breakfast ?.waffles ? ? « Aucune gaufre trouvée » Conclusion Le chaînage optionnel est une fonctionnalité récente et pratique de JavaScript qui vous permet de vérifier l’absence de valeurs nulles lors de l’accès aux valeurs des propriétés. Vous pouvez également l’utiliser avec l’opérateur ? J’espère que cet article a permis de présenter ou de clarifier le chaînage optionnel. Bon codage !

Le développement frontal n’a pas toujours eu le respect qu’il mérite par rapport au développement dorsal. De nombreux ingénieurs avaient l’habitude de regarder JavaScript de haut. Mais les temps ont changé. Les applications Web connaissent une croissance rapide, principalement grâce au développement d’outils open-source. Cette évolution nous a éloignés de jQuery et a fait que presque toutes les entreprises technologiques utilisent les derniers JavaScript et outils comme Eslint, Babel et Webpack. Aujourd’hui, le front-end évolue à une vitesse telle qu’il est difficile de le suivre. Ce billet a pour but de rattraper les orientations de ce domaine de développement en 2022. Peut-être trouverez-vous quelque chose pour vous dans ces tendances. Svelte gagne en popularité Svelte est un outil relativement nouveau qui, en théorie, a démarré beaucoup trop tard pour avoir une chance contre React, Vue et Angular. Mais il gagne régulièrement en popularité à un rythme sans précédent. En 2021, les utilisateurs de StackOverflow l’ont annoncé comme le framework front-end le plus aimé. Mais Svelte est bien plus que cela. C’est un compilateur qui construit un front-end optimisé. Svelte n’est pas importé dans l’application comme d’autres frameworks populaires. Au contraire, le code écrit en Svelte est compilé en pur JavaScript. Cela permet à Svelte de gagner en termes de vitesse par rapport à des frameworks tels que React ou Vue. L’utilisation du framework Svelte est très simple. Voici un exemple d’utilisation de state + forms : L’utilisation du framework est très simple. Voici un exemple d’utilisation de state + forms. {a} + {b} = {a + b} Aussi simple que cela ! Remarquez trois choses ici : Les formulaires sont gérés de manière simple et élégante, comme au bon vieux temps, avant les frameworks SPA. Il n’est pas nécessaire d’attacher des props onChange aux entrées. Le balisage et la logique vivent côte à côte, encapsulant la logique et une couche visible. L’état est facile à gérer. Pas étonnant que le framework gagne en popularité dans la communauté. Ce n’est qu’une question de temps avant que de nouvelles plateformes populaires soient créées en Svelte. React, Vue et Angular sont là pour rester J’ai commencé mon aventure avec le front-end juste avant la première d’Angular 2, il y a environ six ans. Je ne compte plus le nombre de fois où j’ai lu depuis lors que Vue, React ou Angular était en train de mourir. La vérité s’est pourtant révélée bien différente. Chacun de ces trois frameworks a gagné en popularité depuis sa création. Voici le graphique(Source : Npm Trends). Il convient d’ajouter que toute chute soudaine sur le graphique est due au mois de décembre. Tendances des téléchargements Angular, React et Vue Jetez un coup d’œil au graphique ci-dessus. Remarquez qu’Angular a vu sa popularité multipliée par plus de dix. React et Vue ont connu une croissance encore plus rapide. Ces trois frameworks prennent en charge à peu près les mêmes cas d’utilisation. Cela signifie que, quel que soit le framework que vous choisissez, vous pouvez vous attendre à ce qu’il soit utilisé et soutenu pendant des années. Il est intéressant de noter que React n’a pas connu de changements significatifs en 2021. Pourtant, le rythme de son adaptation est stupéfiant. C’est probablement en raison de l’écosystème qui entoure la technologie. React dispose de la plus grande sélection de bibliothèques et de frameworks de support. Deux exemples qui méritent d’être mentionnés sont Next et Gatsby. Ce dernier est l’un des auteurs de la tendance Next. Les frameworks doivent prendre en charge les pages statiques et dynamiques Établissons ce que sont les pages statiques et dynamiques en termes pratiques. Les pages dynamiques récupèrent et traitent le contenu lorsque l’utilisateur les ouvre. Les pages statiques sont prédéfinies au moment de la construction. Elles deviennent des fichiers séparés, générés sur le disque. Elles peuvent avoir le même aspect que les pages dynamiques, mais le navigateur de l’utilisateur a moins de travail à faire. Si vous avez une boutique, vous pouvez avoir une seule page de produit dynamique, ou des milliers de pages de produit statiques, une pour chaque produit. Les pages statiques sont donc plus performantes pour les utilisateurs, mais leur construction est beaucoup plus longue. L’abandon des pages statiques a été motivé par la popularisation des frameworks d’applications monopages (SPA) de type React et Vue. Ces derniers leur ont également rendu la faveur. Le contenu dynamique que les SPA génèrent généralement est beaucoup plus lent qu’un contenu prêt à être affiché écrit en HTML. La différence est particulièrement importante lorsque la page va chercher des données sur le serveur. Une page dynamique doit généralement télécharger et traiter ces données. Cela a donné naissance aux pages statiques dans les SPA. Gatsby s’est attaqué à ce problème en créant un cadre et une infrastructure pour les pages statiques dans React. Un site web comme un blog, un portfolio, ou même une plateforme de cours comme freeCodeCamp sera beaucoup plus rapide en statique. Même le rendu côté serveur, comme c’est généralement le cas avec Next.js, ne garantit pas une meilleure vitesse(Source : Sidney Alcantara). L’accent mis sur le temps de la première peinture contentful donne lieu à un grand nombre de solutions pour générer des pages statiques dans d’autres frameworks, comme Vue ou Svelte. D’un autre côté, les pages statiques sont difficiles à faire évoluer pour des millions de pages. Si vous construisez une application avec beaucoup de contenu dynamique, comme des profils d’utilisateurs, il est probablement préférable d’utiliser des pages dynamiques. Les deux façons de gérer le contenu sont appelées à durer. Les plates-formes transforment les développeurs individuels en départements informatiques entiers Ces dernières années ont vu l’apparition d’une multitude de plateformes qui accélèrent le développement frontal. C’est énorme, car cela permet aux petites équipes d’avancer rapidement. Vous pouvez facilement mettre en œuvre la vidéo en utilisant Twilio ou Agora.io. Vous pouvez ajouter l’authentification en un rien de temps en utilisant Firebase, Amazon Cognito ou Okta (Okta a également acquis Auth0). Le déploiement automatique et global du code frontal est un sujet particulièrement intéressant. … Lire la suite

Lorsque vous écrivez une application JavaScript Vanilla, vous n’êtes pas obligé d’héberger tout le code que vous utilisez sur votre propre site. Les bibliothèques JavaScript les plus populaires sont disponibles à partir d’un réseau public de diffusion de contenu (CDN). Cela peut simplifier le déploiement de l’application et la mise à jour des dépendances. En fait, si vous avez suivi un tutoriel JavaScript pour une bibliothèque, vous avez probablement déjà utilisé un CDN public, mais vous ne le savez peut-être pas. Qu’est-ce qu’un CDN ? Un CDN est un réseau de diffusion de contenu. Il s’agit de services d’hébergement de fichiers pour de multiples versions de bibliothèques communes. Ils sont généralement très performants et proposent des fichiers mis en cache en fonction de l’emplacement, de sorte que, où que se trouvent vos utilisateurs, ils reçoivent les fichiers à partir d’emplacements géographiques proches d’eux. Votre application peut ainsi être plus rapide que si vous hébergez vous-même les fichiers. Les CDN présentent également l’avantage que si vous utilisez des bibliothèques communes à plusieurs sites, vos utilisateurs peuvent déjà avoir le fichier en cache dans leur navigateur. Cela accélère votre site car le navigateur n’a pas besoin de télécharger à nouveau la bibliothèque. Par exemple, JQuery dispose d’un CDN JQuery officiel. Si la plupart des applications JQuery importent la bibliothèque JQuery à partir de ce CDN, les utilisateurs sont plus susceptibles d’avoir déjà JQuery dans leur cache. cDNpilotés par npm Toutes les bibliothèques ne disposent pas de leur propre CDN. La plupart des bibliothèques se déploient sur npmjs.com et comptent sur le programmeur pour ajouter la bibliothèque à son projet via npm au moment de la construction. npm télécharge la bibliothèque depuis un CDN et l’ajoute au projet localement. Il n’est pas nécessaire d’utiliser npm et des processus de construction JavaScript pour profiter de l’écosystème npm. Nous pouvons utiliser un « CDN piloté par npm » comme hôte pour les bibliothèques, sans avoir à utiliser npm. Un « CDN piloté par npm » est un CDN qui héberge le code de distribution des bibliothèques qui se déploient sur npm. Par exemple, AG Grid, dont j’ai fait la démonstration dans mon article« Comment convertir un tableau HTML statique en une grille de données JavaScript dynamique« , se déploie sur npm mais ne dispose pas de son propre CDN. Au lieu de cela, les programmeurs peuvent ajouter une référence directe à AG Grid à partir d’un CDN comme unpkg.com. les CDNpilotés par npm surveillent les versions distribuées via npm, et hébergent les versions sur leur propre site. Dans le code source de mon précédent post du freeCodeCamp, j’ai utilisé le CDN unpkg.com pour importer AG Grid dans mon code en utilisant un élément de script. Comme pour tout code que nous copions et collons, il est important de comprendre ce qu’il fait afin de pouvoir gérer les problèmes éventuels. Quels sont les CDN disponibles ? Je n’ai jamais utilisé que trois CDN : Ce sont tous des sites professionnels et bien gérés. Et la principale raison pour laquelle j’en ai choisi un plutôt qu’un autre est que le tutoriel que j’ai suivi pour la première fois pour une bibliothèque utilisait ce CDN particulier dans le code. Savoir que plusieurs CDN sont disponibles est utile car : une version particulière d’une bibliothèque que vous voulez utiliser peut ne pas se trouver sur tous les CDN si un CDN commence à avoir des problèmes, vous pouvez modifier votre code pour en utiliser un autre certaines bibliothèques peuvent être plus populaires sur un CDN que sur un autre et vous pouvez vouloir utiliser le CDN le plus populaire pour augmenter les chances que le code de la bibliothèque JavaScript soit mis en cache sur le navigateur de vos utilisateurs. les CDN denpm distribuent plus que du JavaScript Les CDN distribuent plus que du JavaScript. Par exemple, AG Grid déploie des fichiers CSS ainsi que du JavaScript. Ceux-ci seraient référencés à partir du CDN de manière normale en utilisant des éléments de lien. Par exemple, AG Grid utilise deux feuilles de style. La feuille de style structurelle fournit le CSS qui mettra en page les données sous forme de grille. La feuille de style de thème fournit l’esthétique visuelle de la grille. Ces deux fichiers CSS sont également déployés sur npmjs.com et peuvent être inclus dans notre projet depuis un CDN. Comment (et pourquoi) contrôler la version de la bibliothèque Dans mon outil d’édition de tableaux open source, j’utilise trois bibliothèques : AG Grid, PapaParse et Faker. Faker a récemment connu un problème avec une version récente déployée sur npm. Ainsi, si mon code avait utilisé par défaut la dernière version, mon application aurait échoué. Heureusement, j’avais importé une version spécifique de Faker depuis unpkg. Comme vous pouvez le voir dans l’URL src ci-dessous, j’ai inclus la version 5.5.3: Il y a un certain nombre d’avantages à contrôler la version : vous aurez testé votre application sur une version spécifique. Si vous déployez en production et laissez la version changer à chaque nouvelle version, votre application risque de présenter progressivement des bogues ou des incompatibilités au fil du temps, car vous n’avez pas testé votre application sur la nouvelle version de la bibliothèque. lors de l’utilisation de plusieurs versions de bibliothèques, les versions futures peuvent entrer en conflit les unes avec les autres, provoquant à nouveau l’échec de votre application en production et peut-être sans que vous vous en rendiez compte. J’importe les trois bibliothèques que j’utilise à des versions spécifiques : Cela me permet de contrôler les tests et je suis plus sûr que tout bogue dans l’application sera le résultat de mon codage, plutôt que d’une mise à jour d’une bibliothèque utilisée dans le projet. Les différents CDN peuvent avoir une syntaxe différente pour contrôler les numéros de version. Mais vous pourrez voir le format à utiliser en recherchant la bibliothèque sur le CDN et en suivant la documentation fournie par chaque CDN. Voici les listes d’AG Grid sur chacun des sites CDN : Si vous suivez les liens pour les paquets … Lire la suite

Dans ce tutoriel, nous allons parler de la fonction parseInt en JavaScript. Cette fonction analyse (décompose) une chaîne de caractères et renvoie un nombre entier ou NaN (Not a Number). Comment fonctionne la fonction parseInt L’objectif principal de la fonction parseInt est d’extraire un nombre d’une chaîne de caractères. La valeur retournée devient alors un nombre réel. Voici la syntaxe : parseInt(chaîne de caractères) Considérez l’exemple ci-dessous : const myNumber = ‘3’ ; console.log(2 + monNombre) ; // renvoie 23 Dans l’exemple ci-dessus, 3 est une chaîne de caractères et non un nombre réel. Lorsque nous ajoutons 2 à la chaîne de caractères, nous obtenons 23, car nous ne faisons qu’ajouter 2 à une chaîne de caractères qui n’a que la forme d’un nombre. Avec la fonction parseInt, nous pouvons extraire 3 de la chaîne et le transformer en un nombre réel. Voici un exemple : const myNumber = ‘3’ ; console.log(2 + parseInt(myNumber)) ; // renvoie 5 Maintenant la fonction a extrait 3 de la chaîne et l’a converti en un nombre réel. De ‘3’ à 3. Rappelez-vous que nous avons dit que la fonction parseInt peut renvoyer soit un nombre entier, soit une valeur NaN. Dans quel cas pouvons-nous obtenir une valeur NaN? Cela se produit lorsque du texte précède un nombre dans une chaîne de caractères. Quelque chose comme « age is 50 » renverra une valeur NaN parce que la fonction parseInt ne regarde que la première valeur de la chaîne. Si la valeur n’est pas un nombre, NaN est renvoyé. Ici : const age = ‘age is 50′ ; console.log(parseInt(age)) ; // renvoie NaN Réorganisons la chaîne de caractères et voyons ce qui se passe. const age = ’50 est l’âge’ ; console.log(parseInt(age)) ; // renvoie 50 Maintenant, la première valeur de la chaîne est un nombre et ce nombre nous est renvoyé. Notez que la fonction parseInt ignore les valeurs flottantes. Si l’âge ci-dessus était 50,05, elle renverrait toujours 50 et ignorerait .05. De la même manière, si nous avions une chaîne de caractères comme celle-ci : « 50 100 150 200 », nous n’obtiendrions que 50. Ceci est dû au fait que la fonction parseInt ne tente d’extraire que la première valeur d’une chaîne. Et si la chaîne avait ses valeurs écrites ensemble comme ceci : ’50istheage’, 50 serait toujours renvoyé. Le paramètre redix La fonction parseInt accepte un deuxième paramètre appelé redix. Ce paramètre spécifie le système numérique à utiliser. Si le redix est omis, 10 est pris comme valeur par défaut. Voici la syntaxe : parseInt(chaîne de caractères, radix) Il s’agit généralement d’un nombre entier compris entre 2 et 36. Si la valeur du redix est inférieure à 2 ou supérieure à 36 alors NaN est retourné. Si nous devions spécifier un redix de 12, cela implique que le nombre dans la chaîne doit être analysé de la valeur duodécimale du nombre à sa valeur décimale. Voici un exemple rapide : console.log(parseInt(« 50 », 12)) ; // renvoie 60 Nous obtenons 12 en retour car la valeur duodécimale de 50 en base 10 (décimale) est 60. Conclusion Dans ce tutoriel, nous avons appris à utiliser la fonction parseInt pour extraire des nombres de chaînes de caractères. Nous avons également vu comment utiliser le paramètre redix pour spécifier le système numérique à utiliser lors de la conversion du nombre entier retourné. Merci de votre lecture !