Frontend_Dev_Environment_Basic

Table des matières

• About
• Installing

Apropos

Angular et React sont couramment utilisés pour le développement en Frontend, mais pour des POC (Proof Of Concept), il n'est pas nécessaire de les utiliser, cela permet d'éviter la complexité. L'idée est de maintenir la simplicité et de réutiliser cette approche pour d'autres projets.

1.0 Installation

• Créer une archive git (git-repo) pour le projet. Ajouter les fichiers ReadMe et .gitignore.

• Créer un fichier index.html

  En suivant ces étapes, vous disposerez d'un point de départ pour tester votre idée

• Initialiser npm >> npm init dans votre projet

• Installer lite-server >> npm install -save-dev lite-server

• Ajouter le fichier de configuration de lite-server >> bs-config.json

#Inside bs-config.json
    {
        "port": 3000,
        "files" : "./src/**/*.{js, html, css}",
        "server" : {
            "baseDir": ["./", "./src" ]
        }
    }

• Mettre à jour le script >> npm update

• Ajouter le main dans le fichier package.json

# Inside package.json...
  "main": "index.html",

• Et ajoutez une script dans le fichier package.json de votre projet :

# Inside package.json...
  "scripts": {
    "start": "npm run lite",
    "lite" : "lite-server",
    "dev": "lite-server",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

• Pour lancer le server >> npm start

• Sercer local http://localhost:3000

• Pour la documentation >> NPM LITE-SERVER

2.0 Dependance

2.1 Framework CSS

npm install - save bulma-start

• Bulma est un framework CSS gratuit et open source basé sur Flexbox et construit avec Sass. Il est 100% réactif, entièrement modulaire et disponible gratuitement.



• NPM - Bulma
• CDN - Bulma

2.2 Bibliothèques JavaScript

npm install - save jquery

• jQuery est une bibliothèque JavaScript rapide, petite et riche en fonctionnalités.



• NPM - Jquery
• CDN - Jquery

2.3 Iconic Awesome

npm install - save font-awesome

• Font Awesome est une suite complète de 675 icônes pictographiques pour des graphiques vectoriels



• NPM - Font Awesome
• CDN - Font Awesome

2.4 Fonts

Google Fonts

• Ce paquet vous permet d'utiliser la famille de polices de Google Fonts dans votre application.



• CDN - @fontsource/roboto (Minor)

  https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/index.min.css



• CDN - @fontsource/open-sans (Minor)

  https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/index.min.css



• CDN - @fontsource/montserrat(Minor)

  https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/700.min.css

2.4.0 Fails de Sécurités pour le Content Delivery Network, CDN

SRI - Subresource Integrity

Le SRI est une nouvelle spécification du W3C qui permet aux développeurs web de s'assurer que les ressources hébergées sur des serveurs tiers n'ont pas été altérées. L'utilisation de la SRI est recommandée comme meilleure pratique lorsque des bibliothèques sont chargées à partir d'une source tierce.

Exemple

<link   rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@fontsource/[email protected]/700.min.css"
        integrity="sha384-8jo1WzZMb0o3J9j5EvaMPXX4P8/bPEfDKutqmqwP5vt7N+GDrNYs8qY2FIb/PRGk"
        crossorigin="anonymous">

• SRI - W3C Recommendation 23 June 2016
• SRI - Hash Generator

2.4.1 Google Fonts

Pourquoi l'utilisation de Google Fonts pourrait-elle violer les obligations du RGPD ?

Le problème avec Google Fonts est que si un propriétaire d'un site web décide d'intégrer les polices d'une façon dynamique sur son site web, l'adresse IP de chaque visiteur du site sera transmise aux serveurs de Google.

Or, les adresses IP des internautes représentent des données à caractère personnel car elles indiquent la provenance et la destination des données et permettent ainsi d'identifier une personne réelle. Par conséquent, la collecte et le stockage par Google d'adresses IP ne devrait être possible qu'après avoir recueilli le consentement préalable des utilisateurs. Cela peut donc s'avérer très problématique, si le site web concerné n'informe pas les visiteurs du traitement de leurs données personnelles par Google et ne leur demande pas leur consentement au préalable.