Importation et importation par composante

Lors du dernier cours, certains ont pu remarquer que dans la balise script de notre fichier HTML, il se trouvait un attribut type="module". Cet attribut indique que le script est un module JavaScript, ce qui nous permet d'utiliser les fonctionnalités d'importation et d'exportation de modules dans notre code.

Qu'est-ce que c'est?

Il s'agit de la syntaxe ESM (ECMAScript Modules) qui est une norme pour l'importation et l'exportation de modules en JavaScript. Cette syntaxe nous permet de diviser notre code en plusieurs fichiers, ce qui facilite la maintenance et la réutilisation du code. Avec les modules, nous pouvons importer des fonctions, des objets ou des classes à partir d'autres fichiers/modules.

Voici la syntaxe de base :

// Exportation d'une fonction dans un fichier moduleA.js
export function maFonction() {
  console.log("Hello, World!");
}   

// Importation de la fonction dans un autre fichier moduleB.js
import { maFonction } from './moduleA.js';
maFonction(); // Affiche "Hello, World!"

• Les mots-clés import et export sont utilisé pour soit importer ou exporter un module, une fonction ou une classe d'un fichier vers un autre.
• Lors de l'importation, nous allons devoir spécifier le nom du fichier à partir duquel nous voulons importer le code. Également, nous allons devoir spécifier le nom de la fonction, de l'objet ou de la classe que nous voulons importer. C'est ce qui se trouve dans les {}.

Information ❗

Est-ce que vous avez déjà vu un import a quelle part? Il s'agit effectivement de la manière dont on doit importer Bootstrap. Jusqu'à présent, nous avons toujours importé tous les modules, mais sachez que l'on peut seulement importer ceux dont on a de besoins.

Attention ⚠

Si vous importez votre JavaScript avec type="module", les fonctions que vous déclarez à l'intérieur de ce fichier ne sont pas disponibles dans le HTML.

On ne pourra pas utilisé le onclick dans le HTML.

Si l'on doit absolument utiliser la fonction dans le HTML, il faut ajouter la fonction dans l'objet window comme cela :

function afficherPatates(){
    console.log('J\'ai deux patates');
}

window.afficherPatates = afficherPatates;

Importation par composante

Voici ce que a fait comme import jusqu’à maintenant :

import * as bootstrap from 'bootstrap';

Ce qui signifie que l'on importe tout Bootstrap. C'est bien, mais pas optimisé. Si l'on sait que l'on a besoin que de quelques composants précis de Bootstrap.

Voici comment faire une importation par composante :

import { Alert } from 'bootstrap'

Ce qui signifie que l'on importe seulement le composant Alert de Bootstrap.

Ce n'est pas obligatoire, mais il est important de le garder en tête!

Extension "Qualité de vie"

Il existe plusieurs outils externes afin de nous faciliter la vie lors du développement. Parmi ceux-ci, on retrouve des extensions pour notre éditeur de code qui nous permettent d'automatiser certaines tâches et d'améliorer la qualité de notre code.

ESLint

ESLint est un outil de linting pour JavaScript qui analyse votre code à la recherche de problèmes potentiels et de violations de style. Il peut être configuré pour appliquer des règles spécifiques à votre projet, ce qui aide à maintenir une base de code cohérente et de haute qualité.

Installation et configuration (NPM)

Pour installer, ESLint, vous pouvez utiliser npm (Node Package Manager) avec la commande suivante  dans votre dossier de projet, a la racine:

npm

npm install --save-dev eslint eslint-plugin-import eslint-plugin-jsdoc

Les 3 packages installés ici sont :

• eslint : Le package principal d'ESLint qui contient le moteur de linting.
• eslint-plugin-import : Un plugin ESLint qui fournit des règles pour vérifier les importations de modules dans votre code JavaScript.
• eslint-plugin-jsdoc : Un plugin ESLint qui permet d'ajouter des règles par rapport à la documentation des classes et des fonctions.

Truc 💡

--save-dev indique que ESLint est une dépendance de développement, ce qui signifie qu'il n'est pas nécessaire pour exécuter l'application en production, mais uniquement pour le développement.

Il est également important d'installer eslint de manière globale afin de pouvoir l'utiliser dans votre terminal pour analyser votre code. Cela va également permettre à votre éditeur de code de pouvoir utiliser eslint. Pour ce faire, utilisez la commande suivante :

npm

npm install -g eslint

Ensuite, nous devons initialiser ESLint dans notre projet pour créer un fichier de configuration. Vous pouvez le faire en exécutant la commande suivante :

npm

npm init @eslint/config@latest

Le terminal vous demandera d'installer le package create-config. Ensuite, il vous posera quelques questions pour configurer ESLint selon vos besoins. Voici les questions typiques que vous pourriez rencontrer :

@eslint/create-config: v1.11.0

√ What do you want to lint? · javascript
√ How would you like to use ESLint? · problems
√ What type of modules does your project use? · esm
√ Which framework does your project use? · none
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
i The config that you've selected requires the following dependencies:

eslint, @eslint/js, globals
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · npm

Dans l'ordre, nous voulons :

• Linter du JavaScript
• Utiliser ESLint pour signaler les problèmes et la syntaxe dans le code
• Utiliser les modules JavaScript (ESM) pour l'importation et l'exportation de code
• Ne pas utiliser de framework spécifique pour le projet
• Ne pas utiliser TypeScript pour le projet
• Exécuter le code à la fois dans le navigateur
• Installer les dépendances nécessaires pour la configuration sélectionnée. Il faudra choisir NPM pour le package manager.

À la suite de l'installation des packages, un fichier de configuration ESLint eslint.config.js sera créé à la racine de votre projet. Vous pouvez personnaliser ce fichier pour ajouter des règles spécifiques à votre projet ou pour ajuster les règles recommandées par ESLint.

Assurez-vous d'ajouter les 2 éléments suivants à votre fichier de configuration ESLint :

• import jsdoc from 'eslint-plugin-jsdoc'; en haut du fichier après l'importation de globals

• js.configs.recommended,
  jsdoc.configs['flat/recommended'],
  {
    rules: {
      'indent': [
        'error',
        2
      ],
      'linebreak-style': [
        'error',
        'windows'
      ],
      'quotes': [
        'error',
        'single', 
        { 'avoidEscape': true }
      ],
      'semi': [
        'error',
        'always'
      ],
      'camelcase': 'error',
      'no-unused-vars': 'warn',
      'jsdoc/require-returns-type': 'off',
      'jsdoc/require-description': 'warn'
    },
    ignores: ['package.json', 'eslint.config.mjs', 'vite.config.js']
  }

Vous devez coller ce code à la suite de la ligne { files: ["**/*.{js,mjs,cjs}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: globals.browser } },. Cela à ajouter des configurations supplémentaires pour le linter.

Utilisation

Pour analyser votre code avec ESLint, nous allons commencer par ajouter ces scripts dans le package.json :

"scripts": {
//..
"lint": "eslint src/",
"lint:fix": "eslint src/ --fix",
//...
},

Ensuite, nous pourrons exécuter la commande suivante dans notre terminal :

npm

npm run lint

// OU

npm run lint:fix

Truc 💡

Dans certain cas, comme lors que je vous ai fait importer Bootstrap dans le fichier JavaScript, le linter va vous donnez une erreur, car la variable n'est pas utilisée. Afin de contourner le problème, on peut utiliser :

/*eslint no-unused-vars: ["off"]*/
import * as bootstrap from 'bootstrap';

Cela va empêcher le linter de signaler une erreur pour les variables non utilisées dans ce fichier. Cependant, il est important de noter que cela peut masquer d'autres erreurs potentielles, donc utilisez cette approche avec précaution et uniquement lorsque vous êtes sûr que les variables non utilisées ne posent pas de problème dans votre code.

La commande fix permet de fixer automatiquement les erreurs évidentes comme les points-virgules manquants ou l'indentation incorrecte. Essayez d'exécuter la commande npm run lint pour voir les erreurs signalées par ESLint dans votre code. Il se peut que vous ayez quelques erreurs de mentionner. C'est normal, l'utilisation d'un linter est un outil intéressant afin de nous aider à corriger les erreurs dans notre code et à maintenir une base de code propre et cohérente.

JSDoc

JSDoc est un outil de documentation pour JavaScript qui permet de générer une documentation à partir de commentaires dans votre code. En utilisant JSDoc, vous pouvez ajouter des annotations à vos fonctions, classes et autres éléments de votre code pour fournir des informations sur leur utilisation, leurs paramètres et leurs valeurs de retour.

Voici un exemple de comment utiliser JSDoc pour documenter une fonction :

/**
 * Calcule la somme de deux nombres.
 * @param {number} a - Le premier nombre.
 * @param {number} b - Le deuxième nombre.
 * @returns {number} La somme de a et b.
 */
function addition(a, b) {
  return a + b;
}

Voici la syntaxe de base pour les annotations JSDoc :

• Une description de la fonction ou de la classe doit être placée au début du commentaire, avant les annotations. Cette description doit être concise et informative, expliquant ce que fait la fonction ou la classe.
• @param {type} name - description : Utilisé pour documenter les paramètres d'une fonction. type est le type de données du paramètre, name est le nom du paramètre, et description est une brève description de ce que fait le paramètre.
• @returns {type} description : Utilisé pour documenter la valeur de retour d'une fonction. type est le type de données de la valeur de retour, et description est une brève description de ce que la fonction retourne.
• @throws {type} description : Utilisé pour documenter les exceptions que la fonction peut lancer. À utiliser si on utilise un try catch dans notre fonction.

Principe de "Responsive Design" et Accessibilité

Responsive === Adaptatif

Un site web est dit "responsive" ou "adaptatif" lorsqu'il est conçu pour s'adapter à différentes tailles d'écran et à différents appareils. Cela signifie que le site web doit être facilement lisible et utilisable sur des écrans de différentes tailles, tels que les ordinateurs, les tablettes et les cellulaires.

Voici quelques concepts clés du responsive design, expliqué en détail.

Viewport

Le viewport est la zone visible d'une page web sur un appareil. Il est important de définir le viewport dans votre fichier HTML pour que votre site web puisse s'adapter correctement à différentes tailles d'écran. Vous pouvez le faire en ajoutant la balise suivante dans la section <head> de votre fichier HTML :

<meta name="viewport" content="width=device-width, initial-scale=1">

Voici une règle CSS pour les images afin de s'assurer que la taille ne dépasse jamais la largeur de l'écran :

img, embed,
object, video {
    max-width: 100%;
}

En voici une autre afin de s'assurer que les boutons soient facilement cliquables sur les petits écrans :

button {
    min-width: 48px;
    min-height: 48px;
}

Information ❗

De façons générales, il est intéressant de commencer a développer notre interface en pensant d'abord a la version mobile. En effet, cela nous permet de nous concentrer sur les éléments essentiels de notre interface et de nous assurer que notre site web est facilement utilisable sur les petits écrans. Ensuite, nous pouvons ajouter des styles supplémentaires pour les écrans plus grands afin d'améliorer l'expérience utilisateur sur ces appareils.

Media Queries CSS

Les media queries CSS sont des règles conditionnelles qui permettent d'appliquer des styles spécifiques en fonction de la taille de l'écran ou d'autres caractéristiques de l'appareil. Elles sont utilisées pour créer des designs responsives en adaptant la mise en page et les styles en fonction des différentes tailles d'écran.

Information ❗

C'est ce que boostrap utilise pour gérer le responsive design.

Syntaxe de base d'une media query CSS :

@media screen and (min-width:500px) {
    body {
        ...
    }
}

Dans la condition entre les parenthèses, on peut également spécifier des conditions comme max-width par exemple.

Point de rupture

Un point de rupture (breakpoint) est une largeur d'écran spécifique à laquelle la mise en page d'un site web change pour s'adapter à la taille de l'écran. Les points de rupture sont utilisés pour définir des styles différents pour les différentes tailles d'écran, ce qui permet de créer des designs responsives.

À titre de référence, voici les points de rupture apr défaut avec Bootstrap :

Information ❗

Même avec Bootstrap, les media query seront utile pour personnaliser au besoin le comportement de votre site web. Par exemple, si vous voulez que certains éléments soient affichés ou cachés à certaines tailles d'écran, vous pouvez utiliser des media query pour gérer cela.

Truc 💡

Il est possible à l'aide des outils de debogage du navigateur de simuler différentes tailles d'écran pour tester le comportement de votre site web sur différents appareils. Cela vous permet de vous assurer que votre site web est bien responsive et qu'il s'adapte correctement à différentes tailles d'écran.

Accessibilité

Définition d'accessibilité

Principe selon lequel un site Web doit être consultable et utilisable en tout temps par les personnes ayant des handicaps physiques ou mentaux, des capacités diminuées liées au vieillissement ou des limitations dues à la maladie, et par toutes les personnes pour lesquelles l'accès au Web présente des obstacles.

Grand Dictionnaire Terminologique du Québec

Principes de conception accessible

Référence

Ci-dessous, vous trouverez une liste de certains principes clés de la conception accessible. La plupart des principes d'accessibilité peuvent être mis en œuvre très facilement et n'affecteront pas l'apparence globale de votre site Web.

Fournir un texte alternatif approprié

Le texte alternatif fournit une alternative textuelle au contenu non textuel dans les pages Web. Il est particulièrement utile pour les personnes qui sont aveugles et s'appuient sur un lecteur d'écran pour leur lire le contenu.

Fournir une structure de document appropriée

Les headings (h1,h2, ...), listes (ul, ol) et autres éléments structurels fournissent une signification et une structure aux pages Web (HTML5 : header, sections, footer). Ils peuvent également faciliter la navigation par clavier dans la page.

Fournir des en-têtes pour les tableaux de données

Les tableaux sont utilisés en ligne pour la mise en page et pour organiser les données. Les tableaux qui sont utilisés pour organiser des données tabulaires doivent avoir des en-têtes de table appropriés (l'élément <th>). Les cellules de données devraient être associées à leurs en-têtes appropriés, ce qui permet aux utilisateurs des lecteurs d'écran de naviguer et de comprendre le tableau de données. (HTML5: theader, tbody, tfoot)

Assurez-vous que les utilisateurs peuvent remplir et soumettre tous les formulaires

Assurez-vous que chaque élément de formulaire (champ de texte, case à cocher, liste déroulante, etc.) possède une étiquette à l'aide de l'élément <label> et assurez-vous que l'étiquette est associée au bon élément de formulaire. Assurez-vous également que l'utilisateur peut soumettre le formulaire et récupérer toutes les erreurs, telles que l'erreur de remplir tous les champs requis.

Assurez-vous que les liens ont un sens du contexte

Chaque lien devrait avoir du sens si le texte du lien est lu seul. Les utilisateurs des lecteurs d'écran peuvent choisir de lire uniquement les liens sur une page Web. Certaines phrases comme "cliquer ici" et "plus" doivent être évitées.

Sous-titres et/ou fournir des transcriptions pour les médias

Les vidéos et l'audio en direct doivent comporter des sous-titres et une transcription. Avec l'audio archivé, une transcription peut être suffisante.

Assurez-vous de l'accessibilité du contenu non HTML (PDF, docx, pptx, Adobe Flash)

En plus de tous les autres principes énumérés ici, les documents PDF et autres contenus non HTML doivent être aussi accessibles que possible. Si vous ne pouvez pas le rendre accessible, envisagez d'utiliser HTML à la place ou, à tout le moins, de fournir une alternative accessible. Les documents PDF devraient également inclure une série de tags pour le rendre plus accessible. Un fichier PDF tagué ne change pas l'apparence du PDF, mais il est presque toujours plus accessible à une personne utilisant un lecteur d'écran.

Autoriser les utilisateurs à ignorer les éléments répétitifs sur la page

Vous devriez fournir une méthode qui permet aux utilisateurs de sauter la navigation ou d'autres éléments qui se répètent sur chaque page. Ceci est généralement accompli en fournissant un lien (caché ou non) «Passer au contenu principal» ou «Passer la navigation» en haut de la page qui passe au contenu principal de la page.

Ne comptez pas sur la couleur seule pour transmettre le sens

L'utilisation de la couleur peut améliorer la compréhension, mais n'utilisez pas la couleur seule pour transmettre l'information. Cette information peut ne pas être disponible pour une personne qui est daltonienne et ne sera pas disponible pour l'affichage des utilisateurs des lecteurs.

Assurez-vous que le contenu est clairement écrit et facile à lire

Il existe plusieurs façons de rendre votre contenu plus facile à comprendre. Écrivez clairement, utilisez des polices claires et utilisez des headings et des listes de manière appropriée. Utiliser des couleurs ayant un bon contraste entre elles. (http://webaim.org/resources/contrastchecker/)

Créer du JavaScript accessible

Assurez-vous que les gestionnaires d'événements JavaScript sont indépendants de l'appareil (c.-à-d. ils ne nécessitent pas l'utilisation d'une souris) et assurez-vous que votre page ne dépend pas de JavaScript pour fonctionner.

Conception par les standards

Le code HTML et CSS respectant les standards améliore l'accessibilité en permettant au code d'être plus flexible et robuste.

Outils autovérification

• Outils de vérifications automatiques de l'accessibilité de votre site web
  • http://wave.webaim.org/
  • Extension Chrome
    • https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh
  • Extension Firefox
    • https://addons.mozilla.org/en-US/firefox/addon/wave-accessibility-tool/
  • Extension Edge
    • https://microsoftedge.microsoft.com/addons/detail/wave-evaluation-tool/khapceneeednkiopkkbgkibbdoajpkoj
• Extension VS Code :
  • https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter&ssr=false#overview

Dans le cours, nous allons utiliser l'extension wave evaluation tool pour votre navigateur préféré.

Exercice de vérification de l'accessibilité

Nous allons reprendre l'exercice du dernier cours (page de connexion) et nous allons utiliser l'extension wave evaluation tool pour vérifier l'accessibilité de notre page.

Quel est le constat qu'il est possible de faire?

Attention ⚠

Pour vos travaux, il ne devrait pas y avoir d'erreur standard ou de contraste. Assurez-vous de valider!