• Introduction
• Avant de commencer : nettoyage recommandé
• Dans PowerShell
• Créer un fichier de configuration SSH
• Coté VS Code

Introduction

Git ne permet pas de gérer plusieurs comptes GitHub nativement, car il utilise une seule configuration par défaut.

Avant de commencer : nettoyage recommandé

Supprimer les identifiants GitHub enregistrés évite les conflits et garantit une configuration multi-comptes propre et efficace.

Effacer les identifiants GitHub (sans terminal)

1. Menu Démarrer
2. Panneau de configuration
3. Comptes d’utilisateurs
4. Gestionnaire d’identifiants
5. onglet Information d'identification windows
6. Trouve les entrées liées à GitHub (ex : git:https://github.com) et clique sur Supprimer

Dans PowerShell

Utiliser PowerShell en mode administrateur

1. Ferme PowerShell s’il est déjà ouvert
2. Clique sur le bouton Démarrer et tape PowerShell
3. Clique droit sur Windows PowerShell puis sélectionne "Exécuter en tant qu’administrateur"

Générer une clé SSH

ssh-keygen -t ed25519

La réponse suivante s’affiche

Enter file in which to save the key (C:\Users\pierr\.ssh\id_ed25519):

Copier le contenu entre parenthèses en personnalisant la chaîne de caractères après id_
Exemple : C:\Users\pierr\.ssh\id_pro

La réponse suivante s’affiche

Enter passphrase (empty for no passphrase):

laisse vide

Enter same passphrase again:

deux fois

La réponse suivante s’affiche

Your identification has been saved in C:\Users\pierr\.ssh\id_pro

Service SSH Agent

Activer le service

1. Appuie sur Windows + R, tape services.msc et valide
2. Cherche OpenSSH Authentication Agent.
3. Clique droit puis "Propriétés"
4. Change le Type de démarrage en Manuel ou Automatique
5. Clique sur Appliquer
6. Clique Démarrer
7. Clique OK

Démarrer le service

Démarre le service et le configure pour qu’il puisse être lancé à la demande:

Get-Service ssh-agent | Set-Service -StartupType Manual
Start-Service ssh-agent

vérifier que le service est bien lancé

Get-Service ssh-agent

Ajouter la clé SSH

Toujours dans PowerShell :

ssh-add C:\Users\pierr\.ssh\id_pro

Pour vérifier que la clé est bien chargée :

ssh-add -l

Tester la configuration

ssh -T github-pro

Créer un fichier de configuration SSH

Dans C:\Users\pierr\.ssh\, ajoute un fichier config sans extension

# pro github account
Host github-pro
HostName github.com
User git
PreferredAuthentications publickey
IdentityFile C:\Users\pierr\.ssh\id_pro

# perso github account
Host github-perso
HostName github.com
User git
PreferredAuthentications publickey
IdentityFile C:\Users\pierr\.ssh\id_perso

• Host: alias que tu utiliseras dans tes commandes Git ou SSH
• IdentityFilechemin vers ta clé privée
• Usergénéralement git pour GitHub

Coté VS Code

Configurer le compte Git pour chaque projet

Dans le terminal intégré de VS Code (dans le dossier de chaque projet), tu peux définir l’utilisateur Git spécifique :

git config user.name "NomUtilisateurGitHub"
git config user.email "email@github.com"

Ces réglages ne s’appliquent qu’au dépôt actuel grâce à l’option locale (--local est implicite si tu ne mets rien).

Ajouter la clé publique à GitHub

1. Copie le contenu de la clé publique, dans PowerShell :

   cat ~/.ssh/id_pro.pub

2. puis sur GitHub

   1. GitHub
   2. Settings
   3. SSH and GPG keys
   4. New SSH key
   5. Donne un nom
   6. Colle la clé
   7. clique sur Add SSH key

Modifier l’URL du remote

Si tu veux que le projet utilise une clé SSH spécifique (via ton fichier ~/.ssh/config), il faut modifier l’URL du dépôt distant :

git remote set-url origin git@github-pro:utilisateur/repo.git

Tu peux vérifier l’URL actuelle avec :

git remote -v

Configurer l’identité Git locale

Dans le dossier du projet, configure le nom et l’email associés au bon compte :

git config user.name "TonNomGitHub"
git config user.email "ton_email@exemple.com"

Ces réglages sont locaux au projet, donc ils n’affecteront pas tes autres dépôts.

Vérifie que ça fonctionne avec

git config user.name
git config user.email

Pusher sur GitHub via le terminal

Une fois les comptes et clés SSH configurés, le code doit être envoyé via le terminal avec git push

Résumé des tâches réalisées et du temps investi

• Co-conception à 4 mains sur des feuilles A3 avec des feutres de couleur - 1h
• Configuration des outils de travail : complexité liée à la gestion de plusieurs comptes GitHub sur Windows. Mise en place technique et rédaction du tutoriel Gérer plusieurs comptes GitHub avec des clés SSH - 6h

Introduction

L'élément HTML <datalist> contient un ensemble d'éléments <option> qui représentent les valeurs possibles pour d'autres contrôles.
Nativement accessible, plus besoin de librairie JavaScript pour faire une liste de suggestions si vous êtes prêt à faire une croix sur la personnalisation graphique.
J'ajoute un petit script pour les lecteurs d'écran afin de faciliter son usage.

Code

<label for="ice-cream-choice">Choose a flavor:</label>
<input 
       list="ice-cream-flavors" 
       id="ice-cream-choice" 
       name="ice-cream-choice" 
       autocomplete="off"
       />
<p id="suggestions-help" role="status" aria-live="polite" class="visually-hidden"></p>

<datalist id="ice-cream-flavors">
  <option value="Chocolate"></option>
  <option value="Chocolate White"></option>
  <option value="Dark Chocolate"></option>
  <option value="Coconut"></option>
  <option value="Mint"></option>
  <option value="Strawberry"></option>
  <option value="Vanilla"></option>
</datalist>

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

const inputField = document.getElementById("ice-cream-choice");
const datalist = document.getElementById("ice-cream-flavors");
const help = document.getElementById("suggestions-help");

function hasCommonSubstring(str1, str2) {
  return str1.includes(str2) || str2.includes(str1);
}

inputField.addEventListener("input", () => {
  let value = inputField.value;
  let options = datalist.options;
  let suggestionsCount  = 0;

  for (let i = 0; i < options.length; i++) {
    if (
      hasCommonSubstring(value.toLowerCase(), options[i].value.toLowerCase())
    ) {
      suggestionsCount++;
    }
  }
  if (suggestionsCount > 0 && suggestionsCount < options.length ) {
    help.textContent=`There are ${suggestionsCount} suggestions. Use the up and down arrows to browse.`;
  }
});

Rendu

Projet de calendrier décentralisé pour la gestion d'une résidence familiale

• Pas d'inscription : seule la personne ajoutée par l'admin on l'accès à l'outil
• Le mot de passe créé par l'utilisateur est sécurisé et indéchiffrable
• Les utilisateurs sont regroupés par famille
• L'ajout d'une demande de séjour se fait par famille, un mail de notification est envoyé
• Un membre donne son accord au nom de sa famille
• Les séjours en attendent de validation sont en gris sur le calendrier et passe en vert quand tout le monde est ok

Sources : https://github.com/pierretl/allegretto

UI Design

Version 2 — 17/01/2024

• Ajout du parcours mot de passe oublié
• Redesign du site
• Refonte UX de l'interface
• Amélioration de l'affichage sur mobbile
• Affiche la liste uniquement si le séjour concerne la famille de l'utilisateur
• Personnalise la couleur de la date du jour
• Les séjours dons la date de départ est passé s'affiche sur un fond gris

Version 1 — 22/009/2022

• Pas d'inscription : seule la personne ajoutée par l'admin on l'accès à l'outil
• Le mot de passe créé par l'utilisateur est sécurisé et indéchiffrable
• Les utilisateurs sont regroupés par famille
• L'ajout d'une demande de séjour se fait par famille, un mail de notification est envoyé
• Un membre donne son accord au nom de sa famille
• Les séjours en attendent de validation sont en gris sur le calendrier et passe en vert quand tout le monde est ok

1. Vérifier que vous avez Node.js

   node -v

   puis de npm avec

   npm -v

   Sinon télécharger et installer Node.js

2. Installer gulp

   npm install gulp-cli -g

   gulp -v pour connaitre la version installer

3. Initialiser un nouveau projet

   npm init -y

   Un fichier package.json

   est créer

4. Installation de ce qui est nécessaire

   npm install --save-dev gulp gulp-sass browser-sync gulp-autoprefixer gulp-clean-css gulp-sourcemaps gulp-mode gulp-concat gulp-rename gulp-uglify

5. Créer le fichier gulpfile.js à la racine du projet

   const gulp =  require('gulp');
   const sass = require('gulp-sass')(require('sass'));
   const prefix = require('gulp-autoprefixer');
   const minify = require('gulp-clean-css');
   const sourcemaps = require('gulp-sourcemaps');
   const mode = require('gulp-mode')();
   const browserSync = require('browser-sync').create();
   const concat = require('gulp-concat');
   const rename = require('gulp-rename');
   const uglify = require('gulp-uglify');
   
   
   // compilation des styles CSS
   function styles(){
       // Emplacement des fichiers .scss
       return gulp.src('./_scss/style.scss')
       // Source map
           .pipe(mode.development( sourcemaps.init() ))
       // Passer ces fichiers au compilateur + si erreur affiche les log
           .pipe(sass().on('error', sass.logError))
       // Préfixer automatiquement les propriétés nécessaire
           .pipe(prefix('last 2 versions'))
       // Minifier
           .pipe(minify())
       // Source map
           .pipe(mode.development( sourcemaps.write() ))
       // Emplacement du fichier .css généré
           .pipe(gulp.dest('./style/'))
       // changements de flux pour tous les navigateurs
           .pipe(mode.development( browserSync.stream() ));
   }
   
   // compilation des scripts JavaScript
   function scriptJs(){
       return gulp.src('./js/*.js')
           .pipe(concat('script.js'))
           .pipe(rename({suffix: '.min'}))
           .pipe(uglify())
           .pipe(gulp.dest('./'))
           .pipe(mode.development( browserSync.stream() ));
   }
   
   // watch
   function watch() {
       browserSync.init({
           server: {
               baseDir: './'
           }
       });
       gulp.watch('./_scss/**/*.scss', styles);
       gulp.watch('./*.html').on('change', browserSync.reload);
       gulp.watch('./js/**/*.js', scriptJs);
   }
   
   // Compilation des styles pour la prod
   function buildScss(){
       // Emplacement des fichiers .scss
       return gulp.src('./_scss/style.scss')
       // Passer ces fichiers au compilateur + si erreur affiche les log
           .pipe(sass().on('error', sass.logError))
       // Préfixer automatiquement les propriétés nécessaire
           .pipe(prefix('last 2 versions'))
       // Minifier
           .pipe(minify())
       // Emplacement du fichier .css généré
           .pipe(gulp.dest('./style/'));
   }
   
   
   exports.watch = watch;
   exports.build = gulp.series(buildScss, scriptJs);

6. gulp build pour la production
   gulp watch pour la dev

• CSS
• JavaScript
• Démonstration
  • Basculer en mode sombre
  • Mode sombre par défaut

CSS

1. Utiliser les propriétés personnalisées (custom properties en anglais) pour gérer vos couleurs
   Donné un nom fonctionnel ou plus simplement numérote vos couleurs !

   body {
       background:var(--color1);
       color:var(--color2);
   }

2. Créer le thème par défaut dans :root

   Mode clair par défaut

   :root {
       --color1:white;
       --color2:black;
       --color3:#F2F2F2;
   }

   Mode sombre par défaut

   :root {
       --color1:#222;
       --color2:#FFF;
       --color3:#555;
   }

3. Définissez le jeu de couleurs du navigateur avec la propriété color-scheme ;

   Lorsqu'un utilisateur sélectionne un de ces jeux de couleurs, le système d'exploitation fait des ajustements à l'interface utilisateur. Cela comprend les contrôles de formulaires, les barres de défilement et les valeurs utilisées par le système de couleurs CSS.

   Mode clair par défaut

   :root {
       --color1:white;
       --color2:black;
       --color3:#F2F2F2;
       color-scheme: only light;
   }

   La valeur only sert à désactiver le remplacement de couleur du mode nuit du moteur de rendu Blink

   Mode sombre par défaut

   :root {
       --color1:#222;
       --color2:#FFF;
       --color3:#555;
       color-scheme: dark;
   
   }

4. Créé le thème équivalent pour l'autre mode

   Mode clair par défaut

   .dark {
       --color1:#222;
       --color2:#FFF;
       --color3:#555;
       color-scheme: dark;
   }

   Mode sombre par défaut

   .light {
       --color1:white;
       --color2:black;
       --color3:#F2F2F2;
       color-scheme: only light;
   }

JavaScript

1. let root = document.querySelector(":root");

2. Détecter la préférence de l'utilisateur

   Mode clair par défaut

   if (
       window.matchMedia &&
       window.matchMedia("(prefers-color-scheme: dark)").matches
   ) {
       root.classList.toggle("dark");
   }

   Mode sombre par défaut

   Comme dans la grande majorité des cas, le thème clair n'est pas demandé (car par défaut), je conserve le thème sombre du site

3. Détecter le changement de préférence utilisateur

   Mode clair par défaut

   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
       if(e.matches) {
           root.classList.add("dark");
       } else {
           root.classList.remove("dark");
       }
   });

   Mode sombre par défaut

   Pas de détection non plus

4. Basculer de mode à tout instant en une action

   Mode clair par défaut

   document.querySelector("button").addEventListener("click", () => {
       event.preventDefault();
       root.classList.toggle("dark");
   });

   Mode sombre par défaut

   document.querySelector("button").addEventListener("click", () => {
       event.preventDefault();
       root.classList.toggle("light");
   });

5. Je recommande de sauvegarder dans le localStorage tout changement de mode afin de pouvoir le configurer lors de la prochaine visite

Démonstration

Basculer en mode sombre

Mode sombre par défaut

Seuls les liens des extensions Firefox sont répertoriés parce que ce navigateur fait partie des environnements de test officiels à la différence de Chrome.

• Motif de conception — ajouté le 1 juin 2023

  Décrit structure, rôles et propriétés et comportement d’un composant JavaScript(widget).

  ARIA authoring practices

• HeadingsMap

  Génère la structure des titres et affichent les erreurs de niveau

  Addons Firefox

• WCAG Contrast checker

  Vérifie la conformité des niveaux de contraste de la combinaison des couleurs d'avant-plan et d'arrière-plan sur la base des exigences des WCAG 2.1.

  Addons Firefox

• Stylus

  Appliquez des styles personnalisés sur un site, gestionnaire de style

  • Addons Firefox
  • Style d'audit (.json 62ko)

• color.review

  Un outil moderne pour explorer et trouver des couleurs accessibles.

  https://color.review/

• Web Developer

  Ajoute divers outils de développement web au navigateur.

  Addons Firefox

• NVDA

  Un lecteur d'écran libre et gratuit pour Microsoft

  • https://www.nvda-fr.org/
  • Liste des raccourcis clavier NVDA (.pdf 443ko)

• A11y audit bookmarklets

  Une collection de marque page javascript axés sur l'accessibilité

  https://a11y-tools.com/bookmarklets/

• Validateur W3C

  Le service de validation de balises HTML

  • https://validator.w3.org/
  • Marque page javascript : Validateur

    Faites-le glisser dans votre barre d'outils ou cliquez avec le bouton droit de la souris et ajoutez-les à vos favoris. Vous pouvez ensuite les exécuter quand vous en avez envie.

• Introduction
• Un nom mémotechnique
• Principe de conception de l'architecture
  • Arborescence
  • Bonne pratique
  • Convention de nommage
• Quelques mauvaises expériences
  • Mauvaises traductions
  • Imbrication sur des composants complexes

Introduction

La modèle BUSE est un ensemble de principe de conception, de regle d'usage et d'organisation afin de mettre en place du code SCSS maintenable.
L'ensemble de ses règles n'est pas immuable et doit être adapté à vos besoins.
Les cas fondateurs du modèle

Un nom mémotechnique

• Base : Function, mixin, variable, reset
• Utilitaire : Les éléments de base réutilisable et partageable
• Structure : Les squelettes responsive sans le contenu
• Element : Spécificité d'un usage
• Satellite : Les bibliothèques externes et leurs surcharges

Principe de conception de l'architecture

• Avoir une arborescence simple et compréhensible par tous
• Appliquer des règles de nomenclature et les respecter
• Décider de tout cela avec son équipe, les impliquer

Arborescence

_sass
    1-Base
    2-Utilitaire
    3-Structure
    4-Element
    5-Satellite
    style.scss

Les dossiers principaux

L'ensemble des fichiers SCSS doit être regroupé et classé dans des répertoires
Préfixé chaque dossier par une numérotation afin de les faire apparaitre dans un ordre logique : du plus abstrait au plus spécifique

Chacun de ses répertoires possède un fichier index nommé __index.scss
Le double undersore permet que le fichier se retrouve toujours en haut de l'arborescence.

_sass
    2-Utilitaire
        __index.scss
        _block.scss
        _bouton.scss
        _espacement.scss
        _flex.scss
        _text.scss
        _z-index.scss

L'index sert de fichier d'intermédiaire pour importer tous les fichiers ou les index des sous-dossiers à la racine de ce répertoire.
Les imports sont classés par ordre alphabétique où par besoin quand c'est nécessaire
Utiliser des sous-dossiers dès lors que deux fichiers ou plus aborde le même thème

@import 'block';
@import 'bouton';
@import 'espacement';
@import 'flex';
@import 'text';
@import 'z-index';

@import 'breakpoint';
@import 'couleur';
@import 'taille';

@import 'font';
@import 'base';
@import 'z-index';

@import 'Variable/_index';
@import 'Function/_index';
@import 'Mixin/_index';

@import 'couleur';
@import 'focus';
@import 'font';
@import 'base';

La langue

Le français ou la langue maternelle de l'équipe :

• On évite tous problèmes de mauvaises traductions
• Le franglais est conseillé pour les mots francisés (pourriel par exemple) et pour des termes techniques (responsive, flex etc...)
• Un jargon métier est difficilement traduisible
• En cas de rachat, ça leur fera les pieds !
• Si votre équipe est internationale on utilisera l'anglais, imposés quelque court de rafraichissement à vos équipes !

Fichier a la racine

La feuille de style qui comporte tous les imports nécessaires, style.scss

@import '1-Base/_index';
@import '2-Utilitaire/_index';
@import '3-Structure/_index';
@import '4-Element/_index';
@import '5-Satellite/_index';

Au même niveau, l'on peux ajouter des feuille spécifique, qui importerait tous les styles de texte et lien/bouton pour les appliques dans un éditeur WYSIWYG par exemple

Bonne pratique

Établir des règles

Que l'on travaille seul où a plusieurs, il est essentiel d'établir des règles sans exception, pour ne pas à avoir à faire du cas par cas et a complexifié votre projet.
Des règles sur la nomenclature de fichier, de dossier, de nom de classe, de type de sélecteur, de norme d'indentation et de tous ce qui vous semble utile, de chose que vous avait pu rencontrer par le passé et que vous ne souhaitez pas revoir !
Idéalement il faut mettre tous ça par écrit, sur un page de votre style guide

Bannir les imbrications

Même si les imbrications peuvent faciliter la vie et que cette fonctionnalité est en working draft coté CSS, voir CSS Nesting Module
Son abus ou son utilisation pour des composants complexes est inapproprié.
Pour avoir une règle simple, mieux vaut l'interdire !

Établir une convention de Nommage

Utilisé une méthodologie existante ou faite en une a votre image : convention de nommage de BUSES

Découpage en dossier

À partir de deux fichiers traitant du même thème on, crée un sous-dossier avec un index

CSS réinitialisation

On n'utilise pas de CSS reset tout fait, on créé son propre fichier en fonction de son besoin.
Beaucoup de réinitialisations ne sont plus à jour ou peuvent ajouter des contraintes

Convention de nommage

Un savant mélange de BEM et de OOCSS afin de gommer les imperfections

• On n'utilise pas les imbrications
• On n'utilise pas les id
• On n'utilise pas de !important
• On n'utilise pas les classes de style pour cibler un élément en JavaScript
• On préfixe par js__ les classe pour le JavaScript
• On travail en utilitaire
• On utilise des sélecteurs à un seul niveau, __ pour un sous-élément

  .bouton { ... }
  .bouton__forme { ... }
  .bouton__icon { ... }
  <button class="bouton">
      <span class="bouton__forme">
          <img src="bouton__icon" alt="">
      </span>
  </button>

• Les modificateurs d'un élément sont préfixé v-- (v pour variation)
  

  .bouton { ... }
  .bouton.v--actif { ... }
  <button class="bouton v--actif"></button>

• On ne déclare que ce que l'on utilise
  Pas de fonction pour généré tout l'espacement possible en toutes les tailles, direction, point de rupture
• On utilise les initiles des propriété et valeur pour faires les utilitaires des espacement, du flexbox et cssgrid
  .mt-2 pour marin-top de taille 2
  .df pour display:flex
.ji-c pour justify-items: center;

Quelques mauvaises expériences

Mauvaises traductions

Je comptais ajouter un nouveau composant réutilisable pour géré les cadre, lorsque je découvrir qu'il en existait déjà un mais il était nommé card. Hors cadre en anglais c'est frame
Je pense qu'il y a confusion entre le sous-élément carte qui reprend une partie des propriétés d'un cadre.

Imbrication sur des composants complexes

En voulant changer la couleur de soulignement d'un lien actif sur un mega menu responsif, je suis tomber sur un fichier faisant plus de 300 lignes de code imbriqué, écris en BEM.
Des &__item il y en avait des dizaines sans compter tous les états actif, hover, focus...
Impossible de faire une simple recherche Ctrl + F