Forem: Landry Bitege

Overcoming the challenges of backend development : My experience and application for the HNG internship

Landry Bitege — Sat, 29 Jun 2024 17:31:16 +0000

Introduction

Hello everyone! My name is Landry Bitege, and I'm a backend developer with a passion for designing robust, scalable software solutions. Today, I'd like to share my recent journey in solving complex backend development problems and explain why I'm excited to join the HNG internship.

My background and motivation for the HNG internship

A year ago, I began my journey into backend development, discovering the impact of technology in solving real-world challenges. Since then, I've gained experience working on a variety of projects, from website development to the creation of sophisticated web applications.

Recently, I was faced with a project requiring the creation of a REST API for a web application using Next.js, a significant transition from Express.js. This experience enabled me to discover new possibilities while confronting some unprecedented technical challenges. Despite difficulties linked to limited documentation, I managed to develop a complete and secure REST API, even if some problems persisted. Fortunately, platforms like Stack Overflow were invaluable at times like these.

Through my experiences, I've come to understand that solving complex problems and designing effective solutions gives me great satisfaction. It was this passion that prompted me to apply for the HNG internship. I was particularly attracted by the program's reputation for offering cutting-edge training and quality mentoring to promising backend developers.

Learnings and expectations for the HNG internship

This challenge has enabled me to deepen my skills in application architecture and complex problem solving, while strengthening my ability to collaborate with teams with varied skills (all using Next.js, but in different contexts). It was a particularly rewarding experience.

I'm convinced that the HNG internship will enable me to take my skills to the next level and prepare me for a successful career as a seasoned backend developer. I look forward to participating in the internship's intensive training programs, benefiting from the experience of seasoned mentors and contributing to innovative projects alongside other talented developers.

Learn more about the HNG internship

If you'd like to find out more about the HNG internship program, please visit the following websites:

Call to action

I am convinced that my experience, passion for backend development and commitment to learning make me an ideal candidate for the HNG internship. I'm looking forward to taking on new challenges, contributing to meaningful projects and joining the dynamic community of HNG developers.

In the near future, I intend to write about extending this fascinating API library with Next.js, in order to share this rewarding experience with others.

Thanks and see you soon 😀!

Mon aventure en tant que stagiaire chez Kali Academy : Une immersion dans l'open source

Landry Bitege — Fri, 14 Jun 2024 06:42:49 +0000

Je m'appelle Landry Bitege et je suis étudiant en développement web et mobile à Kadea Academy/Goma. Au cours de ma formation, une opportunité exceptionnelle s'est présentée : un stage professionnel de trois mois avec Kali Academy, une organisation dédiée à l'open source. Attiré par le développement logiciel, mais sans expérience préalable dans l'open source, j'ai décidé de relever le défi et de postuler. À ma grande joie, j'ai été accepté, rejoignant une équipe de dix stagiaires prêts à plonger dans cet univers fascinant.

Ce stage, qui s'est déroulé du 11 mars au 11 juin, au sein des installations de GO INNOVATION, situées sur le Boulevard Kanya Mulanga à Goma, Nord-Kivu, avait pour objectif de nous initier aux pratiques de l'open source et de nous permettre de contribuer à des projets concrets. Ce fut bien plus qu'une simple introduction : une véritable aventure enrichissante, tant sur le plan professionnel que personnel.

Le déroulement de mon stage

Le premier mois : La Fondation

Le premier mois de notre stage était axé sur l'établissement de bases solides. Nous avons suivi un programme structuré pour devenir des "vrais" hackers, comprenant l'apprentissage en public, l'utilisation du système Linux, et la maîtrise de la ligne de commande (CLI). Nous avons également révisé Git et GitHub, des outils essentiels pour tout développeur open source. Un des moments forts de cette période fut la lecture du livre "Roads and Bridges: The Unseen Labor Behind Our Digital Infrastructure", qui nous a profondément éclairés sur l'importance et la philosophie de l'open source.

Le deuxième mois : Spécialisation Wikimedia

Le deuxième mois nous a plongés dans l'univers fascinant de Wikimedia. Nous avons eu une introduction rapide à Wikipedia et Wikidata, et avons appris à personnaliser Wikipedia en modifiant les thèmes, gadgets, et fonctionnalités bêta. Nous avons approfondi nos compétences en Wikicode et l'édition avancée, en travaillant sur des modèles et des templates. Nous avons également appris à créer et utiliser des outils des Wikidata comme les API REST de wikidata et les SPARQL. Ce mois était crucial pour comprendre comment contribuer efficacement à des projets Wikimedia et devenir des experts Mediawiki.

Le troisième mois : Projets de Fin de Stage

Pour le dernier mois, nous avons été divisés en deux groupes pour travailler sur des projets de fin de stage. J'ai eu l'opportunité de participer à un projet passionnant nommé "Wiki Data Query AI". Ce logiciel open source est conçu pour aider les utilisateurs à effectuer des requêtes sur Wikidata query sans avoir besoin de connaître le langage SPARQL. Travailler sur ce projet m'a permis d'appliquer toutes les compétences acquises durant les deux premiers mois et de contribuer à un outil véritablement innovant.

Impact et Réflexion

Ce stage chez Kali Academy a été une expérience transformative. J'ai non seulement acquis des compétences techniques précieuses mais aussi une meilleure compréhension de l'importance de l'open source. La collaboration avec mes collègues stagiaires et nos mentors m'a également aidé à développer des compétences interpersonnelles essentielles, telles que le travail en équipe et la communication efficace.

Conclusion

Je tiens à remercier particulièrement mes mentors et collègues pour leur soutien et leurs conseils tout au long de cette aventure. À ceux qui envisagent de suivre ce chemin, je recommande de s'immerger pleinement dans l'expérience, de ne pas hésiter à poser des questions et de toujours chercher à apprendre et à contribuer.

En somme, ce stage a été une expérience inestimable qui a profondément marqué mon parcours personnel et professionnel. J'en ressors enrichi et prêt à relever de nouveaux défis.

Meilleures pratiques pour créer une application Express.js

Landry Bitege — Thu, 13 Jun 2024 14:07:54 +0000

Partie 2 : Meilleures pratiques et fonctionnalités avancées pour créer une application Express.js

Introduction

Pour la 1ère partie, je vous invite à visité l'article où j'ai parler de l'introduction d'express et ses concepts fondamentaux.

Si c'est déjà fait, ici on va voir des notion un peu avancer.

Dans le monde du développement web, il existe une multitude de bibliothèques et de frameworks disponibles pour résoudre une variété de problèmes. Bien que nous abordions certaines des options populaires dans cet article, l'objectif n'est pas de vous prescrire des solutions spécifiques, mais de vous montrer les bonnes pratiques et les concepts qui peuvent être appliqués avec différentes technologies selon vos préférences et vos besoins. Que vous choisissiez Mongoose ou un autre ODM, Passport.js ou une autre solution d'authentification, l'important est de comprendre comment intégrer et utiliser efficacement ces outils pour créer des applications Express.js robustes et évolutives. Explorons maintenant comment structurer et améliorer vos applications Express.js.

1. Structurer une application Express.js de manière organisée et évolutive

Architecture MVC (Model-View-Controller)

Modèles : Les modèles définissent les schémas de données et les interactions avec la base de données. Utilisez Mongoose pour MongoDB, par exemple.

JavaScript

// models/User.js
const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
    name: String,
    email: String,
    password: String,
});

const User = mongoose.model('User', userSchema);
module.exports = User;

Vues : Les vues gèrent les templates et le rendu des pages. Utilisez un moteur de templates comme EJS.

HTML

<!-- views/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Home</title>
</head>
<body>
    <h1>Welcome, <%= user.name %></h1>
</body>
</html>

Contrôleurs : Les contrôleurs contiennent la logique des routes et des actions de l'application.

JavaScript

// controllers/userController.js
const User = require('../models/User');

exports.getUser = async (req, res) => {
    const user = await User.findById(req.params.id);
    res.render('index', { user });
};

Organisation des fichiers et dossiers

Organisez vos fichiers et dossiers de manière structurée pour maintenir la clarté et la facilité de maintenance.

myapp/
├── config/
│   └── config.js
├── controllers/
│   └── userController.js
├── middlewares/
│   └── auth.js
├── models/
│   └── User.js
├── routes/
│   └── userRoutes.js
├── views/
│   └── index.ejs
├── app.js
└── package.json

Utilisation d'un outil de scaffolding

Utilisez des générateurs comme Yeoman pour créer la structure de base de l'application.

Shell

npm install -g yo generator-express
yo express

2. Utiliser des modules et des bibliothèques tierces pour étendre les fonctionnalités d'Express

Mongoose pour MongoDB

Mongoose est un ODM (Object Data Modeling) pour MongoDB et Node.js.

JavaScript

// app.js
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost:27017/myapp', { useNewUrlParser: true, useUnifiedTopology: true });

Passport.js pour l'authentification

Passport.js permet d'implémenter facilement des stratégies d'authentification.

JavaScript

// config/passport.js
const passport = require('passport');
const LocalStrategy = require('passport-local').Strategy;
const User = require('../models/User');

passport.use(new LocalStrategy(
  async (username, password, done) => {
    const user = await User.findOne({ username });
    if (!user) {
      return done(null, false, { message: 'Incorrect username.' });
    }
    if (!user.validPassword(password)) {
      return done(null, false, { message: 'Incorrect password.' });
    }
    return done(null, user);
  }
));

Socket.io pour les communications en temps réel

Socket.io ajoute des fonctionnalités de WebSockets pour les applications en temps réel.

JavaScript

// app.js
const http = require('http');
const socketIo = require('socket.io');
const server = http.createServer(app);
const io = socketIo(server);

io.on('connection', (socket) => {
    console.log('a user connected');
    socket.on('disconnect', () => {
        console.log('user disconnected');
    });
});

server.listen(3000, () => {
    console.log('listening on *:3000');
});

Helmet pour la sécurité

Helmet aide à sécuriser l'application en configurant divers en-têtes HTTP.

JavaScript

// app.js
const helmet = require('helmet');
app.use(helmet());

Morgan pour la journalisation

Morgan est un middleware de journalisation des requêtes HTTP.

JavaScript

// app.js
const morgan = require('morgan');
app.use(morgan('combined'));

3. Gérer la sécurité des applications Express.js

Protection contre les attaques courantes

Injection SQL : Utilisez des ORM/ODM sécurisés et des requêtes paramétrées.

JavaScript

// Using Mongoose to avoid SQL injection
const user = await User.findOne({ username: req.body.username });

Cross-Site Scripting (XSS) : Échappez les données de l'utilisateur et utilisez des bibliothèques comme [xss-clean](https://www.npmjs.com/package/xss-clean).

JavaScript

const xss = require('xss-clean');
app.use(xss());

Cross-Site Request Forgery (CSRF) : Utilisez des tokens CSRF pour protéger les formulaires.

JavaScript

const csrf = require('csurf');
const csrfProtection = csrf({ cookie: true });
app.use(csrfProtection);

// In your route
app.get('/form', (req, res) => {
    res.render('send', { csrfToken: req.csrfToken() });
});

Mise à jour des dépendances

Utilisez npm audit et nsp pour vérifier et corriger les vulnérabilités.

Shell

npm audit

Configurer HTTPS

Utilisez Let's Encrypt pour obtenir des certificats SSL/TLS gratuits.

JavaScript

const fs = require('fs');
const https = require('https');
const options = {
    key: fs.readFileSync('/path/to/key.pem'),
    cert: fs.readFileSync('/path/to/cert.pem')
};

https.createServer(options, app).listen(443);

4. Déployer et mettre à l'échelle une application Express.js

Héberger sur des plateformes cloud

Des plateformes comme Render, AWS, Heroku, et DigitalOcean facilitent le déploiement.

Shell

# Exemple de déploiement sur Heroku
heroku create
git push heroku master

Utilisation de Docker

Conteneurisez l'application pour un déploiement portable et reproductible.

# Dockerfile
FROM node:14
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "app.js"]

Load balancing et scaling

Configurez un load balancer pour répartir le trafic et utilisez des outils comme PM2 pour gérer les processus Node.js.

Shell

# PM2
npm install pm2 -g
pm2 start app.js -i max

5. Bonnes pratiques pour le développement avec Express.js

Tests unitaires et d'intégration

Utilisez Mocha, Chai et Supertest pour écrire et exécuter des tests.

JavaScript

// test/user.test.js
const request = require('supertest');
const app = require('../app');

describe('GET /user', () => {
    it('responds with json', (done) => {
        request(app)
            .get('/user')
            .set('Accept', 'application/json')
            .expect('Content-Type', /json/)
            .expect(200, done);
    });
});

Documentation

Utilisez des outils comme Swagger pour documenter les API.

JavaScript

const swaggerUi = require('swagger-ui-express');
const swaggerDocument = require('./swagger.json');

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));

Optimisation des performances

Mise en cache avec Redis ou Memcached :

JavaScript

const redis = require('redis');
const client = redis.createClient();

app.get('/data', (req, res) => {
    client.get('data', (err, data) => {
        if (data) {
            res.send(data);
        } else {
            // Fetch data from database
            const newData = fetchDataFromDatabase();
            client.setex('data', 3600, newData);
            res.send(newData);
        }
    });
});

Optimiser les requêtes à la base de données :

Assurez-vous que vos requêtes sont optimisées et utilisez des index là où c'est nécessaire.

Utiliser des middlewares de compression comme [compression](https://www.npmjs.com/package/express-compression) :

JavaScript

const compression = require('compression');
app.use(compression());

Conclusion

En suivant ces bonnes pratiques et en utilisant des fonctionnalités avancées, vous pouvez créer des applications Express.js robustes, sécurisées et évolutives. La structuration de votre code, l'utilisation de modules tiers, la gestion de la sécurité, le déploiement efficace et les tests rigoureux sont essentiels pour développer des applications performantes et maintenables. Continuez à explorer et à intégrer ces pratiques dans vos projets pour améliorer constamment la qualité de vos applications.

Voici quelques ressources supplémentaires qui pourraient vous aidez à continuer votre apprentissage :

La documentation officielle d'Express.js sur les bonne pratiques de la securité en production
Tutoriels et articles sur Express.js :
Livres sur Express.js :
- "Learning Express" de Carlos Rios
- "Building Node.js Applications" de Ryan Tozier et Ashish Goel
Rejoignez la communauté Express.js : Participez à des forums et des groupes en ligne pour poser des questions, partager vos expériences et apprendre des autres développeurs.
Construisez vos propres applications : La meilleure façon d'apprendre est de mettre la main à la pâte. Commencez par créer des applications simples et progressez vers des projets plus complexes.

N'oubliez jamais que l'apprentissage est un processus continu. Restez curieux, explorez et créez, et vous deviendrez un maître du développement d'applications Express.js !

Meilleures pratiques pour créer une application Express.js

Landry Bitege — Tue, 11 Jun 2024 15:24:49 +0000

Partie 1 : Introduction et concepts fondamentaux

1.1 Introduction à Express.js

Express.js est un framework d'application web populaire pour Node.js, construit sur le serveur HTTP natif de Node. Il offre un ensemble minimaliste et flexible d'outils puissants pour développer des applications web robustes et évolutives

💡Imaginez que vous souhaitez créer un site web simple qui affiche la date et l'heure actuelles. Sans un framework comme Express.js, vous devrez écrire du code complexe pour gérer les requêtes HTTP, analyser les données de la requête, formater la date et l'heure, et générer la réponse HTML.

Avec Express.js, le processus devient beaucoup plus simple. Vous pouvez définir des routes pour différentes URL, gérer les requêtes et les réponses de manière concise, et utiliser des modèles de vues pour générer du contenu HTML dynamique.

Voici un exemple simplifié de code Express.js pour afficher la date et l'heure actuelles :

JavaScript

const express = require('express');
const app = express();

app.get('/', (req, res) => {
  const date = new Date();
  const formattedDate = date.toLocaleString();
  res.send(`<h1>La date et l'heure actuelles sont : ${formattedDate}</h1>`);
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

Explication du code :

const express = require('express'); : Importe le module Express.js dans votre code.
const app = express(); : Crée une instance de l'application Express.
app.get('/', (req, res) => { ... }); : Définit une route pour la méthode HTTP GET sur l'URL /. Les paramètres req et res représentent respectivement la requête entrante et la réponse à envoyer.
const date = new Date(); : Crée un objet Date représentant la date et l'heure actuelles.
const formattedDate = date.toLocaleString(); : Formate la date et l'heure au format local actuel.
res.send(<h1>La date et l'heure actuelles sont : ${formattedDate}</h1>); : Envoie une réponse HTML contenant la date et l'heure formatées.
app.listen(3000, () => { ... }); : Démarre le serveur Express sur le port 3000.

Avantages d'Express.js

Léger et flexible : Son noyau minimaliste permet une personnalisation et une extension faciles.
Rapide et performant : Il tire parti de l'architecture asynchrone et événementielle de Node.js pour une performance optimale.
Largement adopté : Une communauté importante et une vaste collection de modules tiers disponibles.
Facilité d'utilisation : Syntaxe simple et intuitive pour la création d'applications web.

Bien que Express.js soit le framework d'application web populaire pour Node.js, il n'est pas le seul choix disponible. D'autres frameworks pour Node.js :

Koa : Un framework minimaliste et performant inspiré d'Express.js.
Hapi : Un framework robuste et structuré avec un accent sur la validation et la sécurité.
Nest.js : Un framework orienté objet et évolutif basé sur l'architecture TypeScript.
Restify : Un framework API RESTful léger et rapide.

Cependant, Express.js se distingue comme le choix le plus populaire et le plus largement adopté pour plusieurs raisons :

Communauté vaste et active : Express.js bénéficie d'une communauté de développeurs importante et active, ce qui signifie qu'il y a une abondance de ressources disponibles, des tutoriels aux bibliothèques tierces.
Documentation complète et facile à comprendre : La documentation officielle d'Express.js est claire, complète et facile à suivre, même pour les débutants.
Facilité d'utilisation : Express.js offre une syntaxe simple et intuitive qui rend le démarrage rapide et facile, même pour les développeurs JavaScript novices.
Flexibilité et extensibilité : Son noyau minimaliste permet une personnalisation et une extension faciles pour répondre aux besoins spécifiques de votre application.
Performance éprouvée : Express.js est connu pour ses performances élevées et sa capacité à gérer des applications web complexes et à fort trafic.
Large éventail de bibliothèques tierces : Un vaste écosystème de bibliothèques tierces est disponible pour étendre les fonctionnalités d'Express.js et simplifier le développement d'applications.

Bien que d'autres frameworks Node.js existent, Express.js, pour ces raisons cité précédemment, se distingue. Ce qui en fait le choix privilégié pour de nombreux développeurs d'applications web Node.js.

En résumé, Express.js simplifie considérablement le développement d'applications web Node.js en offrant un ensemble d'outils puissants et flexibles.

2. Installation et configuration de base d'Express.js

Pour commencer avec Express.js, vous devez d'abord installer Node.js sur votre système. Vous pouvez le télécharger depuis le site officiel

Une fois Node.js installé, suivez ces étapes pour installer et configurer Express.js :

Créez un répertoire pour votre projet : Ouvrez votre terminal ou votre invite de commande et créez un nouveau répertoire pour votre projet Express.js. Par exemple, vous pouvez utiliser la commande suivante :

Shell

mkdir my-express-app
cd my-express-app

Initialiser le projet Node.js : Accédez au répertoire de votre projet et exécutez la commande suivante pour initialiser un projet Node.js :

Shell

npm init

Cela créera un fichier package.json qui contient des informations de base sur votre projet.

Installez Express.js : Exécutez la commande suivante pour installer Express.js en tant que dépendance de votre projet :

Shell

npm install express

Cela télécharge et installe le package Express.js dans votre répertoire de projet.

Création d'un fichier JavaScript principal

Créez un fichier JavaScript pour votre application Express. Vous pouvez le nommer comme vous le souhaitez, mais un nom courant est app.js. Ce fichier contiendra le code principal de votre application.

Importation d'Express.js

Au début de votre fichier app.js, importez le module Express.js en utilisant la syntaxe suivante :

JavaScript

const express = require('express');

Cela donne à votre code JavaScript l'accès aux fonctionnalités d'Express.js.

Création d'une instance d'application Express

Créez une instance de l'application Express en appelant la fonction express():

JavaScript

const app = express();

L'objet app représente votre application Express et vous permet d'utiliser ses diverses méthodes pour définir des routes, gérer des requêtes et des réponses, et configurer le serveur.

Définition des routes et des gestionnaires de route

Utilisez les méthodes d'Express.js pour définir des routes pour différentes URL et associer des fonctions de gestionnaire de route à ces routes. Les fonctions de gestionnaire de route seront appelées lorsque des requêtes HTTP correspondantes arrivent.

Par exemple, pour définir une route pour la racine de votre site Web (/) et afficher un message de bienvenue, vous pouvez utiliser le code suivant :

JavaScript

app.get('/', (req, res) => {
  res.send('Bienvenue sur mon application Express.js !');
});

Dans cet exemple, la méthode app.get() définit une route pour la méthode HTTP GET sur l'URL /. La fonction de gestionnaire de route reçoit deux arguments : req (la requête entrante) et res (la réponse à envoyer). La fonction envoie ensuite une réponse HTML simple contenant le message "Bienvenue sur mon application Express.js !".

Vous pouvez définir des routes pour d'autres URL et utiliser les fonctions de gestionnaire de route pour traiter les requêtes et générer des réponses appropriées. Par exemple, vous pouvez créer une route pour afficher une page À propos de votre application, une route pour traiter un formulaire de contact, ou une route pour accéder à une API RESTful.

Démarrage du serveur Express

Enfin, démarrez le serveur Express en appelant la méthode listen() et en spécifiant un port. L'application écoutera les requêtes HTTP sur ce port.

JavaScript

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

Dans cet exemple, le serveur écoute sur le port 3000. Cela signifie que vous pouvez accéder à votre application à l'adresse http://localhost:3000 dans votre navigateur web.

**Enregistrez votre fichier app.js et exécutez la commande suivante dans votre terminal :

Shell

node app.js

Cela lancera le serveur Express et vous devriez pouvoir voir votre message de bienvenue dans votre navigateur web.

🎉 Félicitations ! Vous avez créé et exécuté votre première application Express.js.

En suivant ces étapes, vous aurez installé et configuré Express.js de base et serez prêt à commencer à créer des applications web Node.js.

N'oubliez pas que ce n'est qu'un point de départ. Vous pouvez étendre votre application en définissant plus de routes, en créant des modèles de vues pour générer du contenu HTML dynamique, en utilisant des middleware pour traiter et intercepter les requêtes et les réponses, et en gérant des bases de données pour stocker et récupérer des données.

1.3. Concepts fondamentaux d'Express.js

Comprendre les concepts fondamentaux d'Express.js peut sembler intimidant au début, surtout pour les débutants. Mais ne vous inquiétez pas !

Je vais vous expliquer ces concepts de manière simple et concrète, en utilisant des exemples quotidiens que vous comprendrez facilement.

Imaginons que vous construisez une cabane dans les bois. Pour que vos amis puissent vous rendre visite, vous devez créer des chemins et des points de repère clairs. De même, pour créer une application web organisée et facile à utiliser, vous devez structurer les requêtes et les réponses à l'aide des concepts fondamentaux d'Express.js.

1. Routage : Le plan de votre cabane

Le routage est comme la carte de votre application web. Il définit les différentes URL que les utilisateurs peuvent visiter et détermine quelle partie de votre code doit gérer chaque requête.

Imaginez que chaque pièce de votre cabane est une route.

/ (la page d'accueil) : Mène à l'entrée principale, où les utilisateurs ont une vue d'ensemble de votre cabane.
/salon : Guide les utilisateurs vers le salon confortable, où ils peuvent se détendre et discuter.
/cuisine : Conduit à la cuisine accueillante, où ils peuvent préparer de délicieux repas.
/chambres : Mène aux chambres douillettes, où ils peuvent se reposer après une journée d'exploration.

Dans Express.js, vous définissez des routes à l'aide de méthodes HTTP (GET, POST, PUT, DELETE) et d'URL.

app.get('/', (req, res) => { ... }); : Gère les requêtes GET vers la page d'accueil (/).
app.post('/salon', (req, res) => { ... }); : Traite les requêtes POST envoyées au salon (/salon).

2. Requêtes et réponses : Les conversations avec vos amis

Lorsque vos amis visitent votre cabane, ils vous font des demandes (requêtes) et vous leur répondez (réponses). De même, les requêtes et réponses sont la base de la communication entre les utilisateurs et votre application web.

Imaginez que vos amis:

Font des demandes :
- Demander un verre d'eau (requête GET).
- Partager une histoire amusante (requête POST).
- Demander l'emplacement des toilettes (requête GET).
Reçoivent des réponses :
- Vous leur offrez un verre d'eau frais (réponse).
- Vous riez à leur histoire et racontez la vôtre (réponse).
- Vous les guidez vers les toilettes (réponse).

**En Express.js, l'objet req représente la requête entrante et l'objet res représente la réponse à envoyer.

req contient des informations sur la demande, telles que l'URL, les en-têtes, le corps et les paramètres.
res vous permet d'envoyer des réponses, y compris le code d'état, les en-têtes et le corps.

**Par exemple, pour envoyer une réponse HTML simple à la page d'accueil (/), vous pouvez utiliser :

JavaScript

app.get('/', (req, res) => {
  res.send('<h1>Bienvenue dans ma cabane !</h1>');
});

3. Middleware : Les règles de votre cabane

Le middleware agit comme les règles de votre cabane pour garantir une expérience fluide et sécurisée pour vos amis.

Imaginez que vous avez des règles :

Enlever les chaussures avant d'entrer : Un middleware peut vérifier si les utilisateurs ont envoyé un jeton d'authentification valide.
Se laver les mains avant de manger : Un middleware peut désinfecter les données entrées par les utilisateurs pour éviter les injections de code malveillant.
Respecter le silence après 22 heures : Un middleware peut limiter l'accès à certaines pages pendant la nuit.

En Express.js, vous pouvez créer des fonctions middleware personnalisées pour effectuer des tâches avant que les gestionnaires de route ne soient appelés.

JavaScript

app.use((req, res, next) => {
  // Vérifier si l'utilisateur est authentifié
  if (!req.isAuthenticated) {
    res.redirect('/login');
    return;
  }
  next();
});

4. Modèles de vues : La décoration de votre cabane

Imaginez que vous souhaitez rendre votre cabane plus accueillante en ajoutant des meubles, des décorations et des touches personnalisées. C'est là que les modèles de vues entrent en jeu. Ils vous permettent de générer du contenu HTML dynamique et personnalisé pour chaque requête.

Reprenons l'exemple de la cabane :

Meubles : Au lieu d'envoyer du HTML brut en tant que réponse, vous pouvez utiliser un moteur de templating pour générer du HTML dynamique en fonction des données.
Décorations : Vous pouvez inclure des images, des CSS et des polices de caractères pour rendre votre page plus attrayante.
Touches personnalisées : Vous pouvez personnaliser le contenu en fonction de l'utilisateur ou de la requête, comme afficher le nom de l'utilisateur connecté ou des messages d'erreur personnalisés.

En Express.js, vous pouvez utiliser divers moteurs de templating populaires, tels que EJS, Pug et Handlebars.

**Par exemple, avec EJS, vous pouvez créer un fichier index.ejs pour votre page d'accueil et l'afficher dans votre gestionnaire de route :

JavaScript

app.get('/', (req, res) => {
  const name = req.user ? req.user.name : 'Invité';
  res.render('index', { name });
});

**Le fichier index.ejs peut ressembler à ceci :

HTML

<h1>Bienvenue, <%= name %> !</h1>

<p>Bienvenue dans ma cabane. Installez-vous confortablement et profitez de votre séjour !</p>

**Express.js rend le modèle EJS et fusionne les données fournies (l'objet { name }) dans le template pour générer le HTML final envoyé à l'utilisateur.

En résumé, ces concepts fondamentaux d'Express.js vous permettra de créer des applications web structurées, dynamiques et évolutives.

N'oubliez pas que ces concepts ne sont que la base. Au fur et à mesure que vous développez des applications plus complexes, vous découvrirez des fonctionnalités avancées d'Express.js telles que la gestion des sessions, la validation des formulaires, la gestion des erreurs et la prise en charge des WebSockets.

1.4. Gestion des erreurs : Gérer les imprévus dans votre cabane

Imaginez que vous organisez une fête dans votre cabane dans les bois. Vous avez tout planifié, il est inévitable que des imprévus se produisent. Un invité peut renverser un verre, la musique peut s'arrêter ou la nourriture peut manquer une panne de courant ou un invité qui se blesse. De même, dans les applications web, des erreurs peuvent survenir, telles que des requêtes malformées, des ressources introuvables ou des erreurs internes du serveur.

C'est là que la gestion des erreurs d'Express.js entre en jeu. Elle vous fournit des outils pour gérer ces erreurs de manière gracieuse et informative, garantissant ainsi une expérience utilisateur fluide même en cas de problème.

1. Comprendre les erreurs

Les erreurs peuvent survenir à différents niveaux de votre application

Voici quelques exemples d'erreurs courantes dans les applications web :

Erreurs de routage : L'utilisateur essaie d'accéder à une URL qui n'existe pas.
Erreurs de base de données : Un problème se produit lors de l'accès ou de la modification de données dans une base de données.
Erreurs d'authentification : L'utilisateur essaie d'accéder à une ressource protégée sans autorisation.
Erreurs de validation : L'utilisateur fournit des données incorrectes ou incomplètes dans un formulaire.
Erreurs internes du serveur : Un problème inattendu se produit du côté serveur.

2. Middleware d'erreur

Express.js fournit un moyen simple et efficace de gérer les erreurs à l'aide de son middleware d'erreur intégré.

Voici un exemple de code pour gérer une erreur de routage :

JavaScript

app.use((err, req, res, next) => {
  if (err.status === 404) {
    res.status(404).send('<h1>Page introuvable !</h1>');
  } else {
    console.error(err.stack);
    res.status(500).send('<h1>Erreur interne du serveur.</h1>');
  }
});

Ce middleware intercepte toutes les erreurs non gérées et les traite en fonction du code d'état d'erreur :

Si le code d'état est 404 (Not Found): Il envoie une page d'erreur 404 conviviale à l'utilisateur.
Sinon : Il enregistre l'erreur dans la console et envoie une page d'erreur 500 générique à l'utilisateur.

**Vous pouvez également utiliser des packages tiers comme express-error-handler pour une gestion des erreurs plus avancée.

3. Gestion des erreurs spécifiques

Vous pouvez également créer des gestionnaires d'erreurs spécifiques pour différents types d'erreurs. Par exemple, vous pouvez créer un gestionnaire d'erreur pour les ressources introuvables (code d'état 404) et un autre pour les erreurs de validation des formulaires.

JavaScript

app.get('/ressource/:id', (req, res, next) => {
  try {
    // Rechercher la ressource par ID
    const resource = findResourceById(req.params.id);
    if (!resource) {
      throw new Error('Ressource introuvable');
    }
    res.json(resource);
  } catch (err) {
    next(err); // Transmettre l'erreur au middleware d'erreur
  }
});

4. Messages d'erreur clairs et utiles

Lorsqu'une erreur se produit, il est important de fournir à l'utilisateur un message d'erreur clair et utile. Cela permet à l'utilisateur de comprendre ce qui s'est passé et de savoir comment y remédier.

5. Journalisation des erreurs

Il est également important de journaliser les erreurs pour pouvoir les suivre et les déboguer ultérieurement. Vous pouvez utiliser des bibliothèques de journalisation telles que console.error ou des services de journalisation tiers.

En résumé, la gestion des erreurs est un aspect crucial de toute application web robuste. En utilisant les fonctionnalités de gestion des erreurs d'Express.js, vous pouvez garantir que votre application reste stable et résiliente face aux imprévus, offrant ainsi une meilleure expérience utilisateur.

N'oubliez pas que la gestion des erreurs est un sujet vaste et qu'il existe de nombreuses techniques et pratiques avancées que vous pouvez explorer au fur et à mesure que vos applications se complexifient.

Conclusion

Félicitations ! Vous avez franchi une étape importante dans la création d'applications web performantes avec Express.js. Vous avez compris les concepts fondamentaux tels que le routage, les requêtes et réponses, le middleware et les modèles de vues, et vous avez appris à gérer les erreurs de manière efficace.

N'oubliez pas que ce n'est que le début de votre aventure Express.js. De nombreuses fonctionnalités puissantes et des pratiques de développement vous attendent pour créer des applications web dynamiques, évolutives et sécurisées.

Voici quelques ressources supplémentaires qui pourraient vous aidez à continuer votre apprentissage :

La documentation officielle d'Express.js
Tutoriels et articles sur Express.js :
Livres sur Express.js :
- "Learning Express" de Carlos Rios
- "Building Node.js Applications" de Ryan Tozier et Ashish Goel
Rejoignez la communauté Express.js : Participez à des forums et des groupes en ligne pour poser des questions, partager vos expériences et apprendre des autres développeurs.
Construisez vos propres applications : La meilleure façon d'apprendre est de mettre la main à la pâte. Commencez par créer des applications simples et progressez vers des projets plus complexes.

N'oubliez jamais que l'apprentissage est un processus continu. Restez curieux, explorez et créez, et vous deviendrez un maître du développement d'applications Express.js !

Pour la suite, je vous invite à lire la deuxième partie qui parle des “Meilleures pratiques et fonctionnalités avancées d’Express.js”

Comment CodinGame facilite l'apprentissage d'un langage de programmation

Landry Bitege — Sun, 14 Apr 2024 14:46:17 +0000

CodinGame est une plateforme en ligne innovante qui permet aux développeurs de tous niveaux d'améliorer leurs compétences en programmation de manière ludique et interactive. En proposant une variété de jeux de codage, CodinGame transforme l'apprentissage d'un langage de programmation en une expérience engageante et stimulante.

Elle prend en charge plus de 25 langages de programmation populaires, tels que Python, JavaScript, C#, PHP, Swift, et bien d'autres.

CodinGame: Un terrain de jeu pour apprendre à coder

CodinGame n'est pas seulement une plateforme d'apprentissage, c'est un univers ludique qui transforme l'apprentissage du code en une aventure captivante. Imaginez des jeux vidéo où la réussite dépend de votre capacité à écrire du code efficace.

C'est exactement ce que propose CodinGame, avec une panoplie de défis et d'activités qui stimulent votre esprit et aiguisent vos compétences en programmation.

Pourquoi CodinGame est-il si efficace ?

Apprendre par la pratique

L'un des principaux avantages de CodinGame est sa capacité à rendre l'apprentissage amusant. Au lieu de suivre des cours théoriques fastidieux, les utilisateurs peuvent se plonger directement dans des défis de programmation amusants et stimulants. Ils peuvent choisir parmi une variété de jeux de codage qui les mettent au défi de résoudre des problèmes en utilisant le langage de programmation de leur choix. Cela permet aux utilisateurs d'apprendre et de pratiquer un langage de programmation tout en s'amusant et de voir les résultats concrets de leur code. Cela permet aux utilisateurs de voir immédiatement comment le code qu'ils écrivent affecte le résultat, ce qui peut aider à renforcer l'apprentissage et à améliorer la compréhension.

CodinGame offre une expérience pratique inégalée. Les utilisateurs sont immergés dans des scénarios de codage réalistes où ils doivent écrire et exécuter du code pour progresser.

Environnement de codage interactif

CodinGame dispose d'un environnement de codage interactif où vous pouvez écrire, tester et déboguer votre code. Cet environnement fournit une rétroaction en temps réel, vous permettant de voir immédiatement les résultats de votre code. Cela peut être particulièrement utile pour comprendre comment différentes structures de code affectent le comportement de votre programme.

Des défis sur mesure

Que vous soyez novice ou programmeur chevronné, CodinGame a des défis qui vous correspondent. Les débutants peuvent commencer par des défis simples qui les familiarisent avec les concepts de base de la programmation, tandis que les programmeurs plus expérimentés peuvent relever des défis plus complexes qui mettent à l'épreuve leurs compétences. Chacun trouve son niveau de challenge idéal.

CodinGame propose une variété de jeux de codage qui couvrent un large éventail de sujets et de niveaux de difficulté. Par exemple, il y a des jeux qui vous mettent au défi de résoudre des énigmes de logique, de créer des algorithmes complexes, ou même de concevoir des stratégies pour des jeux de stratégie en temps réel. Chaque jeu est conçu pour vous aider à apprendre et à maîtriser différents aspects d'un langage de programmation.

Le jeu comme moteur

CodinGame n'est pas un énième manuel scolaire. L'un des aspects les plus attrayants de CodinGame est son utilisation du jeu pour rendre l'apprentissage du codage amusant et engageant, ce qui le rend divertissant. Les défis se présentent sous forme de jeux captivants qui vous motivent à progresser et à repousser vos limites. Le plaisir d'apprendre se conjugue à la satisfaction de réussir des missions stimulantes, c’est pourquoi la plateforme propose un système de classement qui permet aux utilisateurs de se comparer aux autres et de suivre leurs progrès.

Développez vos compétences de résolution de problèmes

En codant pour relever les défis de CodinGame, vous aiguisez vos capacités d'analyse et de résolution de problèmes. Vous apprenez à décomposer des problèmes complexes en étapes gérables, à concevoir des solutions algorithmiques efficaces et à les implémenter avec précision.

Apprenez en collaborant

CodinGame encourage le travail en équipe. Vous pouvez partager vos solutions avec d'autres apprentis, recevoir des commentaires constructifs, discuter de stratégies et identifier les points d'amélioration dans votre code. C'est une excellente façon de progresser plus rapidement en identifiant les erreurs dans son propre code et d'apprendre des autres.

CodinGame, plus qu'une plateforme, une communauté

Au-delà des défis et des jeux, CodinGame offre une communauté vibrante de passionnés de programmation qui peuvent offrir du soutien et des conseils. Vous pouvez interagir avec d'autres apprenants, participer à des discussions, partager vos astuces et vos réussites. Cette communauté de soutien est un atout précieux pour votre apprentissage et votre motivation.

Ils organisent régulièrement des compétitions de codage où vous pouvez mettre vos compétences à l'épreuve contre d'autres développeurs. Ces compétitions peuvent être une excellente occasion d'apprendre de nouvelles techniques et stratégies de programmation. De plus, CodinGame dispose d'un système de classement qui vous permet de suivre vos progrès et de vous comparer à d'autres développeurs.

Ressources d'apprentissage

En plus, CodinGame propose également une variété de ressources d'apprentissage, y compris des tutoriels, des articles de blog, et des forums de discussion. Ces ressources peuvent vous aider à approfondir votre compréhension d'un langage de programmation et à apprendre de nouvelles techniques et meilleures pratiques.

CodinGame est-il fait pour vous ?

Que vous soyez un débutant curieux de découvrir le monde du codage ou un programmeur expérimenté désireux de perfectionner vos compétences, CodinGame a quelque chose à vous offrir. Sa plateforme ludique et stimulante vous permettra d'apprendre à coder de manière efficace et agréable, tout en développant vos compétences de résolution de problèmes et votre esprit d'équipe.

Alors, n'attendez plus, plongez dans l'univers captivant de CodinGame et transformez l'apprentissage du code en une aventure passionnante!

Conclusion

En résumé, CodinGame est un outil précieux pour quiconque souhaite apprendre un langage de programmation ou améliorer ses compétences en programmation.

En combinant l'apprentissage avec le jeu, en offrant un apprentissage pratique et en ayant une communauté de soutien, ce qui permet même aux utilisateurs de progresser à leur rythme. CodinGame peut rendre l'apprentissage d'un langage de programmation plus accessible et plus agréable. Que vous soyez un débutant complet ou un développeur expérimenté cherchant à apprendre un nouveau langage, CodinGame a quelque chose à offrir à tout le monde.

J'espère que cela vous donne une meilleure idée de la façon dont CodinGame peut faciliter l'apprentissage d'un langage de programmation.

Si vous êtes développeur, CodinGame est une plateforme que je vous recommande vivement.

Les Architectures 32 bits et 64 bits

Landry Bitege — Wed, 03 Apr 2024 14:23:14 +0000

Lorsque l'on parle d'ordinateurs, on rencontre souvent les termes "32 bits" et "64 bits", en particulier lorsqu’il s’agit de systèmes d’exploitation et de processeurs. Mais que signifient-ils exactement et quelle est la différence entre les deux ? Cet article vise à clarifier ces notions et à vous aider à comprendre les implications de chaque architecture.

Définition:

" Le terme 32 bits ou 64 bits fait référence à la taille du mot de données que l'unité centrale de traitement (CPU) d'un ordinateur peut traiter en une seule fois. Plus le nombre de bits est élevé, plus la quantité de données que la CPU peut traiter simultanément est importante. "

- Un bit :

Un bit est l’unité de base de l’information en informatique et en théorie de l’information. représentant un état binaire de 0 ou de 1. Un ensemble de huit bits forme un octet, qui est l’unité de base pour mesurer la quantité de données.

- Architecture 32 bits :

Un système 32 bits utilise des adresses de données qui sont 32 bits de longueur. Cela signiﬁe qu’il peut adresser jusqu’à 2³² emplacements de mémoire, soit 4 gigaoctets (Go) de RAM. Les systèmes d’exploitation 32 bits sont donc limités à 4 Go de mémoire vive, ce qui peut être un inconvénient pour les applications gourmandes en mémoire.

- Architecture 64 bits :

En comparaison, un système 64 bits utilise des adresses de 64 bits, ce qui lui permet d’accéder à (2⁶⁴) emplacements de mémoire. Cela représente une quantité théoriquement possible de 16 exaoctets (Eo) de RAM, bien au-delà de ce dont les applications et les systèmes actuels ont besoin. Cela permet aux systèmes d’exploitation et aux applications de fonctionner avec des performances améliorées, en particulier pour les tâches qui nécessitent de grandes quantités de mémoire, comme le montage vidéo, les jeux et les simulations scientiﬁques.

Différences:

- Taille de la mémoire:

32 bits : comme on vient de le voir, les systèmes 32 bits sont limités à adresser 4 Go de mémoire vive(RAM), car ils utilisent des adresses de 32 bits. Cela signiﬁe qu’ils peuvent théoriquement accéder à (2³²) adresses diﬀérentes, soit environ 4 milliards, ce qui équivaut à 4 Go.
64 bits : Les systèmes 64 bits, en revanche, peuvent théoriquement adresser jusqu’à (2⁶⁴) adresses soit 18,4 milliards de Go de RAM, ce qui permet une capacité de mémoire bien supérieure, atteignant 16 exaoctets (Eo).

Cependant, les systèmes d’exploitation et le matériel actuel ne supportent pas une telle quantité de mémoire en pratique.

- Performances:

32 bits : Les applications conçues pour les systèmes 32 bits peuvent fonctionner sur des systèmes 64 bits grâce à la compatibilité descendante. Cependant, elles ne pourront pas tirer parti de la performance améliorée oﬀerte par les systèmes 64 bits, le mode (x86) est parfois utilisé pour assurer la compatibilité avec des logiciels plus anciens qui ne fonctionnent pas en mode x64
64 bits : Les applications 64 bits sont conçues pour utiliser les capacités étendues des processeurs 64 bits, ce qui leur permet d’être plus rapides et plus eﬀicaces, en particulier pour les tâches gourmandes en mémoire et en calcul.

Les ordinateurs 64 bits sont généralement plus performants que les ordinateurs 32 bits, surtout pour les tâches gourmandes en mémoire. Mais les applications 64 bits peuvent exploiter plus de cœurs de processeur et de RAM que les applications 32 bits.

- Compatibilité:

32 bits : Un système d’exploitation 32 bits ne peut pas exécuter des applications 64 bits car il ne peut pas fournir l’environnement nécessaire pour les instructions 64 bits.
64 bits : Un système d’exploitation 64 bits peut exécuter des applications 32 bits et 64 bits. Les applications 32 bits s’exécutent en mode de compatibilité sur un système 64 bits.

Les processeurs 64 bits sont généralement compatibles avec les applications 32 bits, mais l’inverse n’est pas vrai.
En outre, les systèmes 64 bits peuvent gérer des opérations plus complexes et plus rapides, ce qui les rend plus performants que leurs homologues 32 bits.

Quel système choisir ?

Le choix entre un système 32 bits et 64 bits dépend de vos besoins:

Pour une utilisation basique:
Si vous utilisez votre ordinateur pour des tâches simples comme la navigation internet, la bureautique et le visionnage de films, un système 32 bits est généralement suffisant.
Pour une utilisation plus exigeante:
Si vous utilisez votre ordinateur pour des tâches gourmandes en mémoire comme le montage vidéo, les jeux vidéo ou la programmation, un système 64 bits est fortement recommandé.

Remarques:

Les architectures 32 bits et 64 bits présentent chacune des avantages et des inconvénients. La meilleure option pour vous dépend de vos besoins et de l'utilisation que vous faites de votre ordinateur.
Vous pouvez vérifier si votre ordinateur est un système 32 bits ou 64 bits en consultant les propriétés du système.
La plupart des ordinateurs modernes sont des systèmes 64 bits.

Conclusion:

En résumé, la principale diﬀérence entre les architectures 32 bits et 64 bits réside dans la quantité de mémoire qu’ils peuvent utiliser et dans la performance, le choix entre les deux dépend de vos besoins en performance et en mémoire.

Pour les utilisateurs ayant besoin de gérer de grandes quantités de mémoire et d’exécuter des applications exigeantes, un système 64 bits est préférable.

Pour les tâches quotidiennes et les anciens logiciels, un système 32 bits peut suffire. Avec l’évolution constante de la technologie et des besoins en mémoire des applications modernes, les systèmes 64 bits sont devenus la norme pour les nouveaux ordinateurs.

Informations complémentaires:

Les unité de mesure en css

Landry Bitege — Thu, 20 Jul 2023 10:26:11 +0000

Bonjour,

Aujourd’hui on va parler des unités en css.
Comme nous le savons déjà, le CSS est un langage de style qui nous aide à styliser des pages HTML.

Et aujourd’hui je viens vous parler des unités en css pour que vous compreniez un peu leur utilités et usage sur nos site web.

Les unités CSS sont utilisées pour spécifier la taille, la longueur ou la position des éléments sur une page Web. Il existe de nombreux types d’unités CSS, ils sont donc regroupés en 2 selon leur comportement sur nos appareils chacun avec ses propres avantages et inconvénients.

Alors nous allons faire le point là dessus pour bien comprendre leurs utilité

Les unités absolues

Il existe des unités en CSS qui ne sont influencées par aucun autre élément ou conteneur. On les appelle des unités absolues, elles sont généralement utilisées pour donner une longueur, par exemple un padding, une hauteur de bloc, la taille des caractères, etc.

on distingue plusieurs comme :

Les pixels (px)
Les pouces (in)
Les centimètres (cm) et les millimètres (mm)
Les picas (pc)
Les points (pt)

Les pixels (px): il est le plus utilisé de tous, il est absolu, ce qui signifie qu’il a une taille fixe quelle que soit la taille de l’écran. Cela les rend idéales pour spécifier la taille exacte d’un élément, telle que la largeur d’une image ou la hauteur d’une zone de texte. Cependant, le pixel peut également être problématiques si vous souhaitez que votre site Web soit réactif

Pour mieux comprendre le pixel, prenais une image dans votre ordinateur ou votre téléphone et zoomer jusqu'à voir les petits carreaux monocouleur qui former l’image. ce sont les pixels

Les pouces (in): sont une unité de mesure physique basée sur les dimensions physiques de l'écran ou du support d'affichage. Par exemple, si nous définissons la largeur d'un élément à 2 pouces, celui-ci aura une largeur équivalente à 2 pouces sur le support d'affichage.

Pour la conversion 1 in = 96px, il est donc absolue aussi et il a les même avantages et inconvénient que le pixel

C’est pourquoi vous entendriez pour un écran on le dimensionne en pouce

Les centimètres (cm) et les millimètres (mm) **: communément appelés les mesures de la longueur, ce sont des unités absolues.
par conversion, _1 cm = 10 mm = 37,8 px**_.

Les points (pt): Les points sont couramment utilisés pour les tailles de police lorsqu'on imprime une page pour ceux qui utilise le logiciel de text comme (Office, WordPad, Docs, …)

Aussi en CSS, il nous aide a donné aussi a changé la police a nos mots sur notre site

La plupart du temps, vous n’utiliserez que le pixel ou le point, mais il est bon de comprendre la relation entre ces unités de mesure.

Retenez donc que 1 in = 96 px, 1 cm = 37,8 px et 1 mm = 3,78 px.

Pour illustrer les unités absolues, prenons un exemple concret. Admettons le code CSS suivant :

.element {
        width : 100px ;
        height : 100px ;
    }

Cela signifie que l’élément aura la même dimension (100 x 100 pixels), quelle que soit la taille de l’écran.

Les unités relatives

À l’opposé des unités absolues, il existe des unités qui font varier la taille d’un élément en fonction de la taille de la police ou de l’élément parent.

Les unités relatives au texte

Ces unités dites relatives au texte sont de plus en plus utilisées pour harmoniser les éléments de votre site pour ajouter le design. On retrouve :

Le Em est une unité relative, ce qui signifie que sa taille est basée sur la taille de police de l’élément parent. Cela les rend idéales pour spécifier la taille du texte, car elles augmentent ou diminuent au fur et à mesure que la taille de police de l’élément parent change.

Les Ems sont également un bon choix pour créer des mises en page réactives, car ils s'ajustent automatiquement à la taille de l’écran.

Par défaut, 1 em = 16 px si aucune taille de police n’est définie.

Les rems est une unité relative basée sur la taille de police de l’élément racine. Cela en fait un bon choix pour créer des mises en page à la fois réactives et évolutives. En d’autres termes, elle dépend du font-size défini par défaut.

Les rems sont également plus à l’épreuve du temps que les pixels, car ils ne sont pas affectés par les modifications de la taille de police par défaut du navigateur .html

Parmi ces unités relatives au texte, vous serez amené à utiliser le em. Cette unité de mesure permet de garder un texte lisible. Autre avantage, si vous souhaitez modifier la taille de votre police d’écriture, vos éléments enfants s'ajustent automatiquement.

Pour illustrer les unités relatives au texte, prenons un exemple concret. considérons que le conteneur .box contient le conteneur .element et le code CSS suivant :

.box{
    font size : 20px
}
.element {
        font size : 2em
    }

Cela signifie que l’élément aura (20px * 2) = 40px. si alors on changer la valeur de .box la mesure de .element se changera automatiquement

Les unités relatives au viewport

Qu'est-ce qu'une zone d'affichage (viewport) ?

Une zone d'affichage (aussi appelée viewport en anglais) représente la zone actuellement visible sur l'appareil. Pour un navigateur web, la zone d'affichage correspond généralement à la fenêtre du navigateur sans les éléments d'interface du navigateur (barre de menu, etc.). Bref, sur le Web, la zone d'affichage correspond la plupart du temps à la région à l'intérieur de la fenêtre dans laquelle vous consultez un site ou une application.

D’autres unités en CSS permettent aux éléments de s’adapter à la taille du viewport, c’est-à-dire à la taille de la fenêtre du navigateur.

Ces unités relatives au viewport sont essentielles pour mettre en place un design responsive.

on retrouve :

La hauteur du viewport (vh)
La largeur du viewport (vw)
Le viewport minimum (vmin)
Le viewport maximum (vmax)

Les unités vh et vw

Les unités vh et vw sont similaires, à la seule différence qu’elles dépendent respectivement de la hauteur et de la largeur de la fenêtre de navigation.

Retenez que 1 vh = 1 % de la hauteur du viewport et que 1 vw = 1 % de la largeur du viewport.

L’unité de mesure vh est généralement utilisée pour permettre à un élément de s’adapter à la hauteur totale de la fenêtre :

Les unités vmin et vmax

Ces deux unités de mesure en CSS fonctionnent selon le même principe.
Avec le vmin, c’est la dimension minimale du viewport qui est prise en compte.

Par exemple, si ce dernier est de 1000px de haut par 800px de large, les éléments ayant une unité vmin s’adapteront en fonction de la largeur de la fenêtre.

Avec le vmax, les éléments s’adaptent en fonction de la dimension maximale du viewport. Selon l’exemple précédent, 1 vmax = 10 px.

Pour illustrer les unités relatives au texte, prenons un exemple concret. prenons ce code CSS suivant :

.box{
    width : 100vw;
    height : 100vh;
}

Cela signifie que le box aura s'élargir sur tout l’espace visible sur l'écran et cela se fera sur tout support. donc le box va s’adapter a tout les écrans

Les autres unités relatives

Les unités en pourcentage (%)

Les pourcentages sont une unité relative, ce qui signifie que leur taille est basée sur la taille de l’élément parent. Cela les rend idéales pour spécifier la taille des éléments les uns par rapport aux autres, comme la largeur d’une barre latérale par rapport à la largeur de la zone de contenu principale. Les pourcentages sont également un bon choix pour créer des mises en page réactives, car ils s'ajustent automatiquement à la taille de l’écran.

Les fractions en css (fr)

L'unité fr, seulement disponible avec le système grid. C’est la contraction de fraction. C’est une unité relative qui repose sur une fraction de l’espace disponible. Et toute la magie entre en scène quand on mixe les tailles fixes de type px et les tailles relatives de type fr

Cette unité peut être utilisée pour dimensionner la largeur des colonnes ou la hauteur des lignes d'une grille. C'est une unité relative à la place restante. Les éléments dimensionnés en fr se répartissent la place restante en fonction de leur nombre de fr.

En conclusion, les unités de mesure CSS sont une partie importante du développement Web et offrent une flexibilité et une adaptabilité dans la conception des mises en page de nos sites web.
Que vous utilisez les pixels, les ems, les rems, les pourcentages, les pouces ou d'autres unités de longueur, il est important de comprendre les différences entre ces unités et de choisir celle qui convient le mieux à votre contexte de développement pour créer des sites Web à la fois visuellement attrayants et réactifs.