1. Configuration de l'environnement

Configuration de l'environnement de travail pour le développement web

1. Configuration de l'environnement de travail

Le nuage / cloud

OneDrive, DropBox, Google Drive, iCloud...

Très pratique pour rendre disponibles des documents de travail sur plusieurs postes ou entre plusieurs personnes.

Avez-vous installé OneDrive ?

Sinon suivez ce lien : https://www.microsoft.com/fr-ca/microsoft-365/onedrive/download

Il vous permet de disposer d'un TeraOctet sur le nuage MicroSoft…

Attention à la synchronisation

Notez cependant que sur un grand volume de données, particulièrement avec des projets Web qui comportent une multitude de fichiers, la synchronisation entre le nuage et les postes de travail peut boguer et faire perdre beaucoup de temps.

Il est donc indispensable d'automatiser aussi vos sauvegardes sur un disque dur local.

Automatiser les sauvegardes

  • Sur Mac : utiliser Time Machine avec un disque dur dédié
  • Sur Windows : AOMEI Backupper ou quelque chose de semblable

Développer localement

C'est à dire sur le disque dur de l'ordinateur, PAS dans le nuage !

Sur Mac :

  • Créer à la racine du dossier de l'utilisateur (icône de maison), un dossier Sites
  • Ce dossier se retrouvera donc au même niveau que les dossiers Documents et Images

Sur Windows :

  • Faire de même mais placer ce dossier dans Documents

Créer maintenant un dossier integration2 (pas d'accent sur le é) dans le dossier Sites.

Les dossiers des exercices, travaux pratiques et projets seront placés dans le dossier integration2.

Éditeurs de code et EDI (Environnement de développement intégré)

Visual Studio Code est un excellent éditeur de code mais ce n'est pas un EDI.

Extensions à installer dans VSCode :

  • French Language Pack for Visual Studio
  • Live Preview
  • Live Server
  • GitLens, Git supercharged
  • Markdown Preview Enhanced
  • Prettier - Code formatter
  • ESLint
  • Live Share

Chrome : Le navigateur que nous privilégions pour le développement est Chrome.

Bien sûr il est recommandé d'avoir au moins un autre navigateur pour faire des tests : Edge sur Windows, Safari ou Firefox sur Mac. Et n'oublions pas les navigateurs de vos cellulaires qui seront mis à contribution pour bien vérifier le développement sur mobile.

Web Developer de Chris Pederick

Cette extension est un indispensable pour nous développeurs Front-End.

Lien : https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=fr

GoFullPage - Full Page Screen Capture (pour Chrome) :

  • Permet de faire des captures d'écran complètes de pages web
  • Utile pour documenter les résultats de validation

Intelligence artificielle et nouveaux outils

Les IA comme ChatGPT, Claude et GitHub Copilot ne sont pas interdits toutefois, il y a une mise en garde à leur sujet :

  • Ils ne sont pas recommandés pour un codeur novice car ils inhibent le développement de la pensée
  • Il y a un danger de trop faire confiance à ces outils. Il faut être en mesure de comprendre et valider les suggestions
  • Il est encouragé de les utiliser pour approfondir un sujet, mais faites attention de demander les sources dans votre requête et de ne pas tout accepter par défaut !