Comment créer un clone de Wordle en 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

JavaScript Uppercase – Comment mettre une chaîne en majuscules en JS avec .toUpperCase

Lorsque vous travaillez avec des chaînes de caractères en JavaScript, vous pouvez effectuer différentes opérations sur celles-ci. Les opérations que vous pouvez effectuer sur les chaînes de caractères incluent la capitalisation, la conversion en minuscules, l’ajout de symboles dans les mots, et bien d’autres encore. Dans cet article, je vais vous montrer comment convertir une chaîne de caractères en lettres majuscules avec la méthode .toUpperCase(). Syntaxe de base de la méthode .toUpperCase() Pour utiliser la méthode .toUpperCase(), affectez la chaîne de caractères que vous souhaitez mettre en majuscules à une variable, puis ajoutez .toUpperCase() à cette variable. Comment mettre une chaîne en majuscules avec la méthode .toUpperCase() Comme nous l’avons déjà dit, vous pouvez assigner une chaîne de caractères à une variable, puis utiliser la méthode .toUpperCase() pour la mettre en majuscule const name = « freeCodeCamp » ; const uppercase = name.toUpperCase() ; console.log(uppercase) ; // Sortie : FREECODECAMP Vous pouvez également écrire une fonction et y inclure la méthode .toUpperCase(), afin que le paramètre indiqué soit mis en majuscule lorsque la fonction est appelée. function changeToUpperCase(founder) { return founder.toUpperCase() ; } // appel de la fonction const result = changeToUpperCase(« Quincy Larson ») ; // impression du résultat sur la console console.log(résultat) ; // Sortie : QUINCY LARSON Dans le script ci-dessus : J’ai défini une fonction nommée changeToUpperCase avec un placeholder de founder avec l’instruction de retour dans la fonction, j’ai dit à la fonction que ce que je veux qu’elle fasse, c’est changer en majuscules tous les paramètres que je spécifie lorsque je l’appelle J’ai ensuite assigné l’appel de fonction – changeToUpperCase à une variable nommée resultat à l’aide de cette variable, j’ai pu imprimer le résultat de la fonction sur la console Conclusion Vous pouvez utiliser la méthode .toUpperCase(), connue sous le nom de String.prototype.toUpperCase(), lorsque vous devez mettre les chaînes en majuscules dans vos projets JavaScript. Si vous trouvez cet article utile, veuillez le partager avec vos amis et votre famille.

Les meilleurs plugins Webstorm pour un codage efficace

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.

10 React Interview Questions You Should Know in 2022

Feel confident about your React knowledge? Put it to the test! I have selected all of the major questions you should know as a React developer in 2022, whether you are interviewing for a hired position or not. These questions cover everything from the core concepts of React to a practical understanding of when you should use certain features. To get the best results out of this guide, make sure to try to answer each question yourself before looking at the answers. Let’s get started! Want the #1 resource to become a hired React developer? Become a React pro in 4-5 weeks with the React Bootcamp. 1. What is React? Why Use It? React is a JavaScript library, not a framework. We use React because it gives us all the power of JavaScript, but with built-in features that improve the way we build and think about building applications. It gives us a way to easily create user interfaces with tools like JSX It gives us components to easily share parts of our user interface (UI), which static HTML itself cannot do It allows us to create reusable behavior across any of our components with React hooks React takes care of updating our UI when our data changes, without the need to update the DOM manually ourselves Extra Credit: There are frameworks in React that give you everything you need to build an app (with little to no third-party libraries), like Next.js and Gatsby. React was created for building single-page apps in particular, but you can make everything from static sites to mobile apps with the same React concepts. 2. What is JSX? JSX is a way of building React user interfaces that uses the simple syntax of HTML, but adds the functionality and dynamic nature of JavaScript. In short, it is HTML + JavaScript for structuring our React apps. Though JSX looks like HTML, under the hood it is actually JavaScript function calls. If you write a div in JSX, it’s actually the equivalent of calling React.createElement(). We can build our user interfaces by manually calling React.createElement, but as we add more elements, it becomes harder and harder to read the structure we have built. The browser cannot understand JSX itself, so we often use a JavaScript compiler called Babel to convert what looks like HTML into JavaScript function calls that the browser can understand. 3. How do you pass data to React components? There are 2 main ways of passing data to React components: Props Context API Props are data passed from a component’s immediate parent. Props are declared on the child component, can be named anything, and can accept any valid value. function Blog() { const post = { title: « My Blog Post! » }; return ; } Props are consumed within the child component. Props are always available within the child as properties on an object. function BlogPost(props) { return {props.post.title} } Since props are plain object properties, they can be destructured for more immediate access. function BlogPost({ post }) { return {post.title} } Context is data passed from a context provider to any component that consumes the context. Context allows us to access data anywhere in our app (if the provider is passed around the entire component tree), without using props. Context data is passed down on the value prop using the Context.Provider component. It can be consumed using the Context.Consumer component or the useContext hook. import { createContext, useContext } from ‘react’; const PostContext = createContext() function App() { const post = { title: « My Blog Post! » }; return ( ); } function Blog() { return } function BlogPost() { const post = useContext(PostContext) return {post.title} } 4. What is the difference between state and props? States are values we can read and update in our React components. Props are values that are passed to React components and are read only (they should not be updated). You can think of props as being similar to arguments for a function that exist outside of our components, while state are values that change over time, but exist and are declared inside our components. State and props are similar in that changes to them cause the components in which they exist to re-render. 5. What are React Fragments used for? React fragments are a special feature in React that let you write group children elements or components without creating an actual node in the DOM. The fragment syntax looks like an empty set of tags <> or are tags labeled React.Fragment. In simpler terms, sometimes we need to put multiple React elements under a single parent, but we don’t want to use a generic HTML element like a div. If you are writing a table, for example, this would be invalid HTML: function Table() { return ( ); } function Columns() { return ( Column 1 Column 2 ); } We could avoid this problem by using a fragment instead of a div element in our Columns component. function Columns() { return ( <> Column 1 Column 2 ); } Another reason for choosing a fragment is that sometimes adding an additional HTML element may change the way our CSS styles are applied. 6. Why do we need keys for React lists? Keys are a unique value that we must pass to the key prop when we are using the .map() function to loop over an element or a component. If we are mapping over an element, it would look like this: posts.map(post => {post.title} ) Or like this if we are mapping over a component: posts.map(post => {post.title} ) And in both case, we need to add a key that is a unique value, otherwise React will warn us. Why? Because keys tell React which element or component is which in a list. Otherwise, if we were to try to change items in this list by inserting more or editing them in some way, React wouldn’t know the order to put them in. This is because React … Lire la suite

The React Cheatsheet for 2022

Do you want to get up to speed with React as quickly as possible? I’ve put together a super helpful cheatsheet to give you a complete overview of all of the React concepts you need to know in 2022. Let’s get started! Table of Contents React Elements React elements are written just like regular HTML elements. You can write any valid HTML element in React. My Header My paragraph> My button We write React elements using a feature called JSX. However, because JSX is really just JavaScript functions (and not HTML), the syntax is a bit different. Unlike HTML, single-tag elements (like the img element), must be self-closing. They must end in a forward slash /: React Element Attributes Additionally, JSX requires a different syntax for its attributes. Since JSX is really JavaScript and JavaScript uses a camelcase naming convention (that is, “camelCase”), attributes are written differently than HTML. The most common example is the class attribute, which we write as className. React Element Styles To apply inline styles, instead of using double quotes (“”), we use two sets of curly braces. Inline styles are not written as plain strings, but as properties on objects: My header React Fragments React also gives us an element called a fragment. React requires that all returned elements be returned within a single “parent” component. For example, we can’t return two sibling elements, like an h1 and a paragraph from a component: // this syntax is invalid function MyComponent() { return ( My header My paragraph ); } If we don’t want to wrap our elements in a container element like a div, we can use a fragment: // valid syntax function MyComponent() { return ( <> My header My paragraph ); } We can write fragments in a regular or shorthand syntax: or <>. React Components We can organized groups of elements into React components. A basic function component is written similarly to a regular JavaScript function with a couple of differences. Component names must start with a capital letter (that is, MyComponent, instead of myComponent) Components, unlike JavaScript functions, must return JSX. Here is the basic syntax of a React function component: function App() { return ( Hello world! ); } React Props React components can accept data passed to them called props. Props are passed from the parent component to a child component. Here we are passing a prop name from App to the User component. function App() { return } function User(props) { return Hello, {props.name} ; // Hello, John Doe! } Props is an object, so we can select the name prop within User to get its value. To embed any dynamic value (that is, a variable or expression) within JSX, you must wrap it in curly braces. Since we are only using the name property on the props object, we can make our code simpler with object destructuring: function App() { return } function User({ name }) { return Hello, {name}! ; // Hello, John Doe! } Any JavaScript value can be passed as a prop, including other elements and components. React Children Props Props can also be passed by placing data between the opening and closing tags of a component. Props that are passed this way are placed on the children property. function App() { return ( Hello, John Doe! ); } function User({ children }) { return children; // Hello, John Doe! } React Conditionals React components and elements can be conditionally displayed. One approach is to create a separate return with an if-statement. function App() { const isAuthUser = useAuth(); if (isAuthUser) { // if our user is authenticated, let them use the app return ; } // if user is not authenticated, show a different screen return ; } If you want to write a conditional within a return statement, however, you must use a conditional that resolves to a value. To use the ternary operator, wrap the entire conditional in curly braces. function App() { const isAuthUser = useAuth(); return ( <> My App {isAuthUser ? : } ) } React Lists Lists of React components can be output using the .map() function. .map() allows us to loop over arrays of data and output JSX. Here we are outputting a list of soccer players using the SoccerPlayer component. function SoccerPlayers() { const players = [« Messi », « Ronaldo », « Laspada »]; return ( {players.map((playerName) => ( ))} ); } Whenever you are looping over an array of data, you must include the key prop on the element or component over which you are looping. Additionally, this key prop must be given a unique value, not just an element index. In the example above, we are using a value which we know to be unique, which is the playerName. React Context React context allows us to pass data to our component tree without using props. The problem with props is that sometimes we pass them through components that don’t need to receive them. This problem is called props drilling. Here is a oversimplified example of passing props through a Body component that doesn’t need it: function App() { return ( ); } function Body({ name }) { return ( ); } function Greeting({ name }) { return Welcome, {name} ; } Before using Context, its best to see if our components can be better organized to avoid passing props through components that don’t need it. To use Context, we use the createContext function from React. We can call it with an initial value to be put on context. The created context includes a Provider and a Consumer property, which are each components. We wrap the Provider around the component tree that we want to pass the given value down. Next, we place the Consumer in the component we want to consume the value. import { createContext } from ‘react’; const NameContext = createContext( »); function App() { return ( ); } function Body() { return ; } function Greeting() { return ( {name => Welcome, {name} } ); … Lire la suite

What is PostCSS? How to Use Plugins to Automate CSS Tasks

PostCSS is a Node.js tool that transforms your styles using JavaScript plugins. It generates more downloads per week on NPM than other CSS preprocessors like Sass, Less, and Stylus combined. PostCSS download trends comparing to other CSS preprocessors In this article we will discuss: What is PostCSS? PostCSS features and advantages Some popular PostCSS plugins How to setup PostCSS configurations PostCSS is a JavaScript tool that transforms your CSS code into an abstract syntax tree (AST) and then provides an API (application programming interface) for analyzing and modifying it using JavaScript plugins. PostCSS provides a large ecosystem of plugins to perform different functionalities like linting, minifying, inserting vendor prefixes, and many other things. Despite its name, it is neither a post-processor nor a pre-processor, it is just a transpiler that turns a special PostCSS plugin syntax into a Vanilla CSS. You can think of it as the Babel tool for CSS. You can use PostCSS in conjunction with existing preprocessors like Sass, Less, and Stylus. Or you can use it as an alternative to all of them since it has all the required functionalities to be used alone. You may have already been using PostCSS without knowing it. It’s used in the popular Autoprefixer plugin which is used to automatically prepend vendor prefixes to CSS properties that require them. PostCSS is also used by other technologies like Vite and Next.js, as well as the CSS framework TailwindCSS which is a PostCSS plugin. PostCSS is fully customizable so you can use only the plugins and features you need for your application. It also produces fast build times compared with other preprocessors. Different build times for different CSS preprocessors comparing to PostCSS If you want, you can write your own custom plugins. And you can use it with regular CSS as well as alongside other preprocessors like Sass. PostCSS is all about plugins (on its own, it is simply an API). It has an ecosystem of 356 plugins (as of writing this article). Each plugin was created for a specific task. You can navigate through the plugins using the plugin directory on the official PostCSS GitHub page, or using this searchable catalog of PostCSS plugins. Before starting with the code, I highly recommend that you follow these steps: Download or fork the following postcss-tutorial repository to your machine and try to follow along. (Make sure to read the README.md file.) Install the PostCSS Language Support plugin if you are using the Visual Studio Code editor, so your editor can recognize any new syntax and stop giving you errors (skip this step if you are using other code editors). PostCSS Import One of the basic and most important plugins to use is postcss-import. It lets us import CSS files into other files. To check how to use this plugin go to src/style.css in the postcss-tutorial repository. @import ‘./components/comp1.css’; @import ‘./components/comp2.css’; You can see that it is very similar to the way that we use the @import method in Sass. Note: postcss-import is different than the import rule in native CSS. You should avoid the import rule in native CSS, since it can prevent stylesheets from being downloaded concurrently which affects the loading speed and performance. The browser has to wait for every imported file to be loaded instead of being able to load all the CSS files at once. This is one of the most popular PostCSS plugins. You use it to parse and add vendor prefixes like -webkit, -moz, and -ms to CSS rules using values from the Can I Use website. We use the Can I Use website to see which browsers support a CSS feature with their versions. This helps us determine whether we need to add a prefix or not. Autoprefixer uses Browserslist, so you can specify the browsers you want to target in your project with queries. We can configure our Browserslist in the package.json file using a “browserslist” key: « browserslist »: [ « defaults » ] The defaults query above is a short version of: > 0.5% browsers that have at least 0.5% global usage. last 2 versions the last 2 versions for each browser, Firefox ESR the latest Firefox Extended Support Release., not dead browsers that received official support or updates for the last 24 months. Or we can use a .browserslistrc file in the root directory, and inside it we type our configurations. defaults To test this plugin, we have added some CSS rules that need some prefixes in the src/components/comp2.css file: label { user-select: none; } ::selection { color: white; background: blue; } ::placeholder { color: gray; } Based on our previous « browserslist » settings, the final output will be: label { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } ::-moz-selection { color: white; background: blue; } ::selection { color: white; background: blue; } ::-moz-placeholder { color: gray; } :-ms-input-placeholder { color: gray; } ::placeholder { color: gray; } This plugin enables us to use modern CSS (like nesting and custom media queries) in our code, by converting it to Vanilla CSS which can be understood by browsers. It has a stage option which determines which CSS features to polyfill based upon their stability in the process of becoming implemented as a web standard. The stage can be 0 (experimental) to 4 (stable), or false. Stage 2 is the default. For nesting, we need to use stage 1. module.exports = { plugins: [ require(‘postcss-preset-env’)({ stage: 1 }) ], } Also, the preset-env plugin includes by default the Autoprefixer plugin and the browsers option will be passed to it automatically. In the src/components/comp1.css we have used the nesting feature pretty similarly to what we have in the Sass preprocessor: article { background: purple; & .title { font-size: 6rem; } & li { list-style-type: none; } } Since nesting is not supported in today’s CSS, we need to convert the code above so that web browsers can understand it. The following code is the final result: article { background: purple } article .title { font-size: 6rem; } article … Lire la suite

Scope et Closures en JavaScript – Expliqué avec des exemples

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

Comment créer votre propre extension Google Chrome

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 !

Comment utiliser le chaînage optionnel en JavaScript

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 !

Tendances à suivre en matière de développement du front-end en 2022

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