One place for hosting & domains

      Comment

      Comment créer un effet parallaxe avec défilement en pure CSS


      Introduction

      La technologie CSS moderne constitue un outil puissant que vous pouvez utiliser pour créer de nombreuses fonctionnalités d’interface utilisateur (UI) avancées. Auparavant, ces caractéristiques reposaient sur des bibliothèques JavaScript.

      Au cours de ce guide, vous allez configurer quelques lignes de CSS pour créer un effet scrolling parallax sur une page Web. Vous utiliserez des images de placekitten.com comme images de balise d’arrière-plan.

      Une fois que vous aurez fini ce tutoriel, vous aurez une page Web avec un effet parallaxe avec défilement en pure CSS.

      Avertissement : les propriétés expérimentales de CSS utilisées dans cet article ne fonctionnent pas sur tous les navigateurs. Ce projet a été testé et fonctionne sur Chrome. Cette technique ne fonctionne pas correctement avec Firefox, Safari et iOS, en raison de certaines optimisations de ces navigateurs.

      Étape 1 — Création d’un nouveau projet

      Pour cette étape, utilisez la ligne de commande afin de configurer un nouveau dossier de projet et des fichiers. Pour commencer, ouvrez votre terminal et créez un nouveau dossier de projet.

      Saisissez la commande suivante pour créer le dossier de projet :

      Pour cet exercice, appelez le dossier css-parallax. Maintenant, passez dans le dossier css-parallax :

      Ensuite, créez un fichier index.html dans votre dossier css-parallax avec la commande nano suivante :

      Placez l'intégralité du HTML du projet dans ce fichier.

      Au cours de la prochaine étape, vous allez commencer à créer la structure de la page Web.

      Étape 2 — Configuration de la structure de l'application

      Au cours de cette étape, vous allez ajouter le HTML dont vous avez besoin pour créer la structure du projet.

      Ajoutez le code suivant dans votre fichier index.html :

      css-parallax/index.html

      
      <!DOCTYPE html>
      <html lang="en">
        <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <title>CSS Scrolling Parallax</title>
        </head>
        <body></body>
      </html>
      

      Il s'agit de la structure de base de plupart des pages Web qui utilisent HTML.

      Ajoutez le code suivant dans la balise <body> :

      css-parallax/index.html

      
      <body>
      ...
         <main>
            <section class="section parallax bg1">
               <h1>Cute Kitten</h1>
            </section>
            <section class="section static">
               <h1>Boring</h1>
            </section>
            <section class="section parallax bg2">
               <h1>Fluffy Kitten</h1>
            </section>
         </main>
      ...
      </body>
      
      

      Ce code crée trois sections différentes. Deux auront une image en arrière-plan et l'autre aura un arrière-plan statique.

      Au cours des étapes suivantes, vous allez ajouter les styles de chaque section en utilisant les catégories que vous avez ajoutées dans le HTML.

      Étape 3 — Création d'un fichier CSS et ajout du CSS initial

      Au cours de cette étape, vous allez créer un fichier CSS. Ensuite, vous allez ajouter le CSS initial dont vous avez besoin pour formater le site Web et créer l'effet de parallaxe.

      Tout d'abors, créez un fichier styles.css dans votre dossier css-parallax avec la commande nano suivante :

      C'est là que vous allez mettre tout le CSS dont vous avez besoin pour créer l'effet parallaxe avec défilement.

      Ensuite, commencez par la catégorie .wrapper. Ajoutez le code suivant dans votre fichier styles.css :

      css-parallax/styles.css

      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
        perspective: 2px;
      }
      

      La catégorie .wrapper configure les propriétés de perspective et de défilement sur toute la page.

      Pour que l'effet fonctionne, la hauteur de l'habillage doit être configurée sur une valeur fixe. Vous pouvez utiliser l'unité de visualisation vh configurée sur 100 pour obtenir la pleine hauteur de visualisation à l'écran.

      Lorsque vous dimensionnez les images, une barre de défilement horizontale apparaîtra à l'écran. Donc, vous pouvez la désactiver en ajoutant overflow-x: hidden;. La propriété perspective simule la distance de l'unité de visualisation aux pseudo-éléments que vous allez créer et continuer à transformer dans le CSS.

      Au cours de l'étape suivante, vous allez ajouter plus de CSS pour formater votre page Web.

      Étape 4 — Ajout des styles pour la catégorie .section

      Au cours de cette étape, vous allez ajouter des styles à la catégorie .section.

      À l'intérieur de votre fichier styles.css, ajoutez le code suivant en dessous de la catégorie de l'habillage :

      css-parallax/styles.css

      
      .wrapper {
        height: 100vh;
        overflow-x: hidden;
        perspective: 2px;
      }
      .section { 
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      

      La catégorie .section définit les propriétés de taille, d'affichage et de texte des principales sections.

      Configurez la position sur relative pour que l'enfant .parallax::after puisse être exactement positionné par rapport à l'élément parent .section.

      Chaque section dispose d'une view-height(vh) de 100 pour prendre en charge la pleine hauteur de l'unité de visualisation. Vous pouvez modifier et configurer cette valeur comme bon vous semble pour chaque section.

      Enfin, les autres propriétés de CSS permettent de formater et d'ajouter un style au texte dans chaque section. Elles vous permettent de positionner le texte au centre de chaque section et d'ajouter une couleur : white.

      Ensuite, vous allez ajouter un pseudo-élément et le formater pour créer l'effet parallaxe sur deux des sections de votre HTML.

      Étape 5 — Ajout de styles pour la catégorie .parallax

      Au cours de cette étape, vous allez ajouter des styles à la catégorie .parallax.

      Tout d'abord, vous allez ajouter un pseudo-élément dans la catégorie .parallax à formater.

      Remarque : vous pouvez consulter les docs web de MDN pour en savoir plus sur les pseudo-éléments de CSS.

      Ajoutez le code suivant sous la catégorie .section :

      css-parallax/styles.css

      ...
      
      .section {
        position: relative;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        text-shadow: 0 0 5px #000;
      }
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      ...
      

      La catégorie .parallax ajoute un pseudo-élément ::after à l'image d'arrière-plan et procède aux transformations nécessaires pour l'effet parallaxe.

      Le pseudo-élément est le dernier enfant de l'élément ayant la catégorie .parallax.

      La première moitié du code affiche et positionne le pseudo-élément. La propriété transform écarte le pseudo-élément de la caméra sur z-index, puis elle le rééchelonne pour remplir l'unité de visualisation.

      Comme le pseudo-élément se trouve plus loin, il semble se déplacer plus lentement.

      Au cours de la prochaine étape, vous allez ajouter les images de l'arrière plan et le style de l'arrière-plan statique.

      Étape 6 — Ajout des images et de l'arrière-plan pour chaque section

      Au cours de cette étape, vous allez ajouter les dernières propriétés de CSS pour intégrer les images d'arrière-plan et la couleur de fond de la section statique.

      Tout d'abord, ajoutez une couleur de fond unie à la section .static en utilisant le code suivant après la catégorie .parallax::after :

      css-parallax/styles.css

      ...
      
      .parallax::after {
        content: " ";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: translateZ(-1px) scale(1.5);
        background-size: 100%;
        z-index: -1;
      }
      
      .static {
        background: red;
      }
      ...
      

      La catégorie .static ajoute un arrière-plan à la section statique qui n'a pas d'image.

      Les deux sections portant la catégorie .parallax disposent également d'une catégorie supplémentaire qui est différente pour chacune d'elles. Utilisez les classes .bg1 et .bg2 pour ajouter les images d'arrière-plan de chatons.

      Ajoutez le code suivant à la catégorie .static :

      css-parallax/styles.css

      ...
      
      .static {
        background: red;
      }
      .bg1::after {
        background-image: url('https://placekitten.com/g/900/700');
      }
      
      .bg2::after {
        background-image: url('https://placekitten.com/g/800/600');
      }
      
      ...
      

      Les catégories .bg1, .bg2 ajoutent les images d'arrière-plan correspondant à chaque section.

      Les images proviennent du site web placekitten. Il s'agit d'un service qui met à disposition des photos de chatons que vous pouvez utiliser en tant que supports de présentation.

      Maintenant que tout le code de l'effet parallaxe avec défilement est ajouté, vous pouvez le lier à votre fichier styles.css dans votre index.html.

      Étape 7 — Liaison de styles.css et ouverture de index.html dans votre navigateur

      Au cours de cette étape, vous allez lier votre fichier styles.css et ouvrir le projet dans votre navigateur pour voir l'effet parallaxe avec défilement.

      Tout d'abord, ajoutez le code suivant à la balise <head> dans le fichier index.html :

      css-parallax/index.html

       ...
      <head>
        <meta charset="UTF-8" />
        <^>
        <link rel="stylesheet" href="https://www.digitalocean.com/community/tutorials/styles.css" />
        <^>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>CSS Parallax</title>
      </head>
      
      ...
      

      Maintenant, vous pouvez ouvrir votre fichier index.html dans votre navigateur :

      GIF illustrant l'effet parallaxe avec défilement

      C'est fait, vous avez configuré une page web avec un effet de défilement qui fonctionne. Consultez ce référentiel GitHub pour voir le code complet.

      Conclusion

      Grâce à cet article, vous avez configuré un projet avec un fichier index.html et styles.css et vous disposez maintenant d'une page Web fonctionnelle. Vous y avez ajouté la structure de votre page Web et créé les styles des diverses sections du site.

      Vous pouvez éloigner les images ou l'effet parallaxe que vous utilisez pour qu'ils se déplacent plus lentement. Il vous faudra modifier la quantité de pixels sur perspective et les propriétés transform. Si vous ne souhaitez pas que l'image d'arrière-plan défile, utilisez background-attachment: fixed; au lieu de perspective/translate/scale.



      Source link

      Comment générer le rendu de tableaux dans React


      Introduction

      Au cours de cet article, vous allez apprendre à générer le rendu d’un tableau dans React et aborder les meilleures pratiques à utiliser pour générer le rendu de différents éléments dans des composants.

      L’un des avantages d’un langage web moderne comme JavaScript, c’est qu’il vous permet d’automatiser rapidement la génération de blocs HTML.

      En utilisant comme une sorte de boucle sur un tableau ou un objet, il vous suffira d’écrire le HTML une seule fois pour chaque élément. Mieux vaut appliquer les futures modifications qu’une seule fois dès maintenant.

      Rendu de plusieurs éléments

      Pour afficher plusieurs éléments JSX dans React, vous pouvez boucler un tableau en utilisant la méthode .map() et renvoyer un seul élément.

      Ci-dessous, vous parcourez le tableau reptiles et retournez un élément li pour chaque article du tableau. Vous pouvez utiliser cette méthode pour afficher un seul élément pour chaque article du tableau :

      function ReptileListItems() {
        const reptiles = ["alligator", "snake", "lizard"];
      
        return reptiles.map((reptile) => <li>{reptile}</li>);
      }
      

      La sortie finale ressemblera à ceci :

      Output

      - alligator - snake - lizard

      Dans l’exemple suivant, vous allez voir les raisons pour lesquelles vous souhaitez ajouter une key unique à une liste d’éléments rendue sous forme d’un tableau.

      Rendu d’un ensemble d’éléments dans un composant

      Dans cet exemple, vous parcourez un tableau et créez une série de composants d’articles de liste comme dans l’exemple précédent.

      Pour commencer, mettez à jour le code pour utiliser le composant <ol> afin de conserver les articles <li>. Le composant <ol> créera une liste des articles classée :

      function ReptileList() {
        const reptiles = ["alligator", "snake", "lizard"];
      
        return (
          <ol>
            {reptiles.map((reptile) => (
              <li>{reptile}</li>
            ))}
          </ol>
        );
      }
      

      Cependant, si vous regardez la console, vous verrez un avertissement signalant que chaque enfant qui se trouve dans un tableau ou un itérateur doit avoir une clé unique.

      Avertissement dans la console

      L’avertissement apparaît car vous devez ajouter une key à chaque fois que vous tentez d’afficher une collection dans un composant.

      Sous React, la key unique sert à déterminer sur quels composants d’une collection un rendu doit être régénéré. En ajoutant une key unique, React n’a pas à régénérer le rendu de l’ensemble du composant à chaque mise à jour.

      Au cours de cette étape, vous allez générer le rendu de plusieurs éléments dans un composant et ajoutez une key unique. Mettez à jour le code pour inclure une key sur les éléments de la liste afin de stopper l’avertissement :

      function ReptileList() {
        const reptiles = ['alligator', 'snake', 'lizard'];
      
        return (
          <ol>
            {reptiles.map(reptile => (
              <li key={reptile}>{reptile}</li>
            ))}
          </ol>
        );
      }
      
      

      Maintenant que vous avez ajouté une key, l’avertissement n’apparaîtra plus dans la console.

      Dans l’exemple suivant, vous allez découvrir de quelle manière générer le rendu des éléments adjacents sans aucune erreur de syntaxe habituelle.

      Rendu des éléments adjacents

      En JSX, pour générer le rendu de plusieurs éléments d’un composant, vous devez les englober dans un habillage.

      Dans cet exemple, vous devez tout d’abord renvoyer une liste des éléments qui n’ont pas été parcourus par un tableau :

      function ReptileListItems() {
        return (
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
        );
      }
      

      Vous verrez apparaître une erreur persistante dans la console :

      Erreur persistante de React sur des éléments JSX adjacents

      Pour corriger cette erreur, il vous faut envelopper le bloc des éléments li dans un habillage. Lorsqu’il s’agit d’une liste, vous pouvez les envelopper dans un élément ol ou ul :

      function ReptileListItems() {
        return (
        <ol>
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
        </ol>
        );
      }
      

      Maintenant, les éléments <li> adjacents sont enveloppés dans une balise fermée, <ol>, et l’erreur a disparu.

      Dans la section suivante, vous allez générer le rendu d’une liste dans un habillage en utilisant un composant fragment.

      Rendu des éléments adjacents avec React.fragment

      Avant React v16.2, vous pouviez habiller un bloc de composants dans un élément <div>. Cela générait une application pleine de divs, souvent appelée “div soup”.

      Pour résoudre ce problème, React a lancé un nouveau composant connu sous le nom de composant fragment :

      Pour générer le rendu d’une liste à l’intérieur d’une balise close tout en évitant d’utiliser une div, utilisez plutôt React.Fragment :

      function ReptileListItems() {
        return (
        <React.Fragment>
           <li>alligator</li>
           <li>snake</li>
           <li>lizard</li>
        </React.Fragment>
        );
      }
      

      Le code rendu comprendra uniquement les éléments li et le composant React.Fragment n’apparaîtra pas dans le code.

      Rendu d'éléments JSX à l'intérieur d'un habillage React.Fragment

      Notez également que vous n’avez pas besoin d’ajouter une clé avec React.fragment.

      Vous remarquerez qu’il est plus fastidieux d’écrire React.fragment que d’ajouter un <div>. Heureusement, l’équipe React a développé une syntaxe plus courte pour représenter ce composant. Vous pouvez utiliser <> </> à la place de <React.Fragment></React.Fragment> :

      function ReptileListItems() {
        return (
       <>
          <li>alligator</li>
          <li>snake</li>
          <li>lizard</li>
       </>
        );
      }
      

      Conclusion

      Cet article vous a permis de découvrir des méthodes de générer le rendu de tableaux dans une application React.

      Lorsque vous générez le rendu d’un élément dans un autre composant, vous devez utiliser une key unique et envelopper vos éléments dans un élément d’habillage.

      En fonction de votre cas d’utilisation, vous pouvez créer des listes simples habillées dans un composant fragment qui n’a pas besoin de clé.

      Pour en savoir plus sur les meilleures pratiques de React, suivez la série complète Comment coder dans React.js mise à votre disposition sur DigitalOcean.



      Source link

      Comment créer un nouvel utilisateur et octroyer des autorisations dans MySQL


      Introduction

      MySQL est un logiciel de gestion de base de données open-source qui aide les utilisateurs à stocker, organiser et récupérer des données. Un vaste éventail d’options est disponible pour octroyer les autorisations adaptées à des utilisateurs spécifiques dans les tables et les bases de données. Ce tutoriel vous donnera un bref aperçu de quelques-unes des nombreuses options disponibles.

      Qu’est-ce que Highlights signifie ?

      Au cours de ce tutoriel, toutes les lignes que l’utilisateur devra saisir ou personnaliser seront highlighted (mises en surbrillance) ! Le reste devra essentiellement être saisi via du copier-coller.

      Dans la partie 1 du tutoriel MySQL, nous avons procédé à des modifications dans MySQL en tant que root user avec un accès complet à toutes les bases de données. Cependant, dans les cas où vous auriez besoin de configurer des restrictions supplémentaires , il existe des moyens de créer des utilisateurs avec des autorisations personnalisées.

      Commençons par créer un nouvel utilisateur dans le shell MySQL :

      • CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'password';

      Remarque : lorsque nous ajouterons des utilisateurs dans le shell MySQL au cours de ce tutoriel, nous indiquerons que l’hôte de l’utilisateur est localhost et non l’adresse IP du serveur. localhost est un nom d’hôte qui signifie « cet ordinateur ». MySQL traite tout particulièrement ce nom d’hôte spécifique : lorsqu’un utilisateur avec cet hôte se connecte sur MySQL, il tentera de se connecter au serveur local en utilisant un fichier de socket Unix. Par conséquent, de manière générale, vous pouvez utiliser localhost si vous prévoyez de vous connecter à votre serveur en SSH ou exécuter le client mysql local pour vous connecter au serveur MySQL local.

      À ce stade, newuser n’a aucune autorisation et ne peut rien faire sur les bases de données. En effet, même si newuser tente de se connecter (avec le mot de passe password), il ne pourra pas atteindre le shell MySQL.

      Par conséquent, la première chose à faire consiste à donner accès à l’utilisateur aux informations dont il a besoin.

      • GRANT ALL PRIVILEGES ON * . * TO 'newuser'@'localhost';

      Les astérisques de cette commande renvoient à la base de données et à la table (respectivement) auxquelles ils peuvent accéder. Cette commande spécifique permet à l’utilisateur de lire, modifier, exécuter et effectuer toutes tâches sur l’intégralité des bases de données et des tables.

      Notez que, dans cet exemple, nous accordons à newuser un total accès root à tout ce qui se trouve dans notre base de données. Bien que cela soit utile pour expliquer certains concepts MySQL, il se peut que cette méthode soit impraticable sur la plupart des cas d’utilisation et expose votre base de données à d’importants risques de sécurité.

      Une fois que vous en aurez fini avec les autorisations que vous souhaitez configurer pour vos nouveaux utilisateurs, veillez à toujours recharger tous les privilèges.

      Maintenant, vos modifications ont pris effet.

      Voici une courte liste des autres autorisations possibles couramment utilisées que vous pouvez octroyer aux utilisateurs.

      • ALL PRIVILEGES : comme nous l'avons vu précédemment, cela donne à l'utilisateur de MySQL un total accès à une base de données désignée (ou un accès global à l'ensemble du système si aucune base de données n'est sélectionnée)
      • CREATE : permet de créer de nouvelles tables ou bases de données
      • DROP :permet de supprimer des tables ou des bases de données
      • DELETE : permet de supprimer des lignes des tables
      • INSERT : permet d'insérer des lignes dans les tables
      • SELECT :permet d'utiliser la commande SELECT pour lire des bases de données
      • UPDATE : permet de mettre à jour les lignes d'une table
      • GRANT OPTION : permet d'accorder ou de supprimer les privilèges des autres utilisateurs

      Pour donner une autorisation à un utilisateur spécifique, vous pouvez utiliser le framework suivant :

      • GRANT type_of_permission ON database_name.table_name TO 'username'@'localhost';

      Si vous souhaitez lui donner accès à l'une des bases de données ou des tables, veillez à bien remplacer le nom de la base de données ou de la table par un astérisque (*).

      À chaque fois que vous mettez à jour ou modifiez une autorisation, veillez à bien utiliser la commande Flush Privileges.

      Pour révoquer une autorisation, la structure est pratiquement identique à celle de l'octroi d'autorisation :

      • REVOKE type_of_permission ON database_name.table_name FROM 'username'@'localhost';

      Notez que, lorsque vous révoquez des autorisations, vous devez utiliser la syntaxe FROM à la place du TO que nous avons utilisé pour accorder des autorisations.

      Vous pouvez contrôler les autorisations actuellement octroyées à un utilisateur en exécutant la commande suivante :

      • SHOW GRANTS FOR 'username'@'localhost';

      De la même manière que vous pouvez supprimer des bases de données avec DROP, vous pouvez utiliser DROP pour supprimer complètement un utilisateur :

      • DROP USER 'username'@'localhost';

      Pour tester votre nouvel utilisateur, déconnectez-vous en saisissant :

      et reconnectez-vous en utilisant la commande suivante dans le terminal :

      Conclusion

      Une fois ce tutoriel terminé, vous devriez avoir une meilleure idée sur la manière d'ajouter de nouveaux utilisateurs et de leur octroyer différentes autorisations dans une base de données MySQL. De là, vous pouvez continuer d'explorer et d'expérimenter les différents paramètres d'autorisation qui existent pour votre base de données ou en apprendre plus sur certaines configurations MySQL de niveau supérieur.

      Pour de plus amples informations sur les bases de MySQL, nous vous encourageons à consulter les tutoriels suivants :



      Source link