, la gestion de l'état est essentielle, et deux 

Bien qu'ils aient des fonctionnalités similaires, il est important de savoir quand utiliser l'un plutôt que l'autre.

 est idéal pour gérer des données simples, comme des types primitifs tels que des chaînes de caractères, des nombres ou des booléens. 

Si tu as un état peu complexe à gérer, comme l'activation ou la désactivation d'une fonctionnalité, 

Si tu travailles sur un formulaire basique, tu pourrais avoir quelque chose comme ça :

Ici, l'état est simple et chaque variable est facile à suivre, ce qui rend 

Dès que l'état devient plus complexe, par exemple si tu dois gérer des objets ou des tableaux  

 est particulièrement utile pour gérer des 

 peuvent modifier différentes parties de l'objet.

, l'état est mis à jour via une fonction de réduction (

) qui décide comment l'état doit changer en fonction de l'action. Cela permet de structurer la gestion des modifications d'état, surtout lorsqu'il y a plusieurs transitions possibles.

Imaginons que tu gères un panier d'achats dans ton application :

const initialState = { items: [], total: 0 };

        items: [...state.items, action.payload],

        total: state.total + action.payload.price,

        items: state.items.filter(item => item.id !== action.payload.id),

        total: state.total - action.payload.price,

const [cartState, dispatch] = useReducer(cartReducer, initialState);

Dans ce scénario, tu gères plusieurs actions qui modifient l'état (ajouter ou retirer des articles), et 

 permet de garder le code organisé et extensible.

Il peut être utile de voir le choix entre 

, parfait pour des cas d'utilisation simples et des types primitifs (par exemple, un booléen ou un nombre).

 est mieux adapté aux objets complexes, avec plusieurs propriétés et actions à gérer.

Il n'y a pas de règle stricte qui te dit exactement quand basculer de l'un à l'autre. 

Parfois, même pour un objet avec plusieurs propriétés, 

D'autres fois, quand il y a beaucoup d'actions à gérer, 

 permet de structurer la logique de manière plus propre.

 Dès que l'état devient complexe ou que plusieurs variables doivent être mises à jour en même temps, 

 peut rendre le code plus difficile à maintenir. Tu pourrais te retrouver avec beaucoup de duplications ou des 

 est qu'il demande plus de travail au départ. Tu dois écrire un reducer et gérer les différentes actions, ce qui peut sembler fastidieux. 

Mais une fois configuré, il rend la gestion de l'état plus facile et évolutive.

Le bon choix dépend toujours de la complexité de l'état et de ce que tu cherches à accomplir. 

L'important est de garder ton code aussi lisible et facile à maintenir que possible.

Quand choisir entre useReducer et useState ?

Créez une nouvelle version d'un tableau 

 à travers quelques exercices en utilisant 

Notre objectif n°1 est de déclarer une constante 

.
Cette constante doit contenir un tableau ne contenant que les titres des ouvrages présents dans 

 (sans modifier le tableau initial).
Ici 


Notre objectif n°2 est de déclarer une constante 

Cette constante doit contenir un tableau contenant uniquement les ouvrages présents dans 

 (sans modifier le tableau initial).

Ici 


Notre objectif n°3 est de déclarer une constante 

 contenu dans tous les ouvrages présents dans 


Notre objectif n°4 est de déclarer une constante 

Cette constante doit contenir tous les ouvrages présents dans 

 suivante (sans modifier le tableau initial).

Créer une nouvelle version d’un tableau Javascript

, vous pouvez effectivement faire presque n'importe quoi avec vos données, même accéder à des propriétés qui pourraient ne pas exister. 

C'est risqué, car cela peut conduire à des 

L'avantage est que cela oblige à vérifier le type ou l'existence d'une propriété avant de l'utiliser, ce qui rend le code plus sûr et plus robuste.

 pour vous-même et pour les autres développeurs.

Pourquoi éviter l'utilisation de ANY en Typescript ?

Dans cet exemple, nous voyons comment obtenir des utilisateurs spécifiques de manière 

Chaque appel à getUser retourne une promesse, ce qui permet au programme de continuer son exécution pendant que la requête est en cours. 

 résolue, la promesse est remplie avec les données de l'utilisateur.

Cette approche asynchrone est essentielle pour gérer efficacement les opérations qui prennent du temps, comme les 

, sans bloquer l'exécution du programme.


Définir un ordre d’exécution entre nos traitements 

 avec la méthode .all()
Le délai est celui du traitement le plus long
S'il y a un échec alors on passe dans le 

 pour gérer un loader par exemple
Le bloc 

 permet d'exécuter un code quel que soit le résultat de la promesse, assurant ainsi la gestion des ressources, même en cas d'erreur ou de succès de la promesse. 
Cela garantit une exécution cohérente du code, améliorant la fiabilité et la maintenabilité de l'application.

L’ Asynchrone en JavaScript

La manipulation de données est une tâche fréquente et cruciale. Que vous travailliez sur une application web, une application mobile ou tout autre projet, vous vous retrouverez souvent à devoir traiter des données pour les rendre utilisables.

Dans cet article, nous allons explorer comment les méthodes 

 peuvent être combinées pour réaliser des traitements avancés sur les données.


Pour illustrer cela, un exemple concret basé sur un tableau de données brutes:


Le même résultat avec une syntaxe plus courte:

Combiner Map, Filter et Reduce pour les Traitements avancés en Javascript

Foreach est très utile pour parcourir un tableau rapidement, sans attendre de résultat en retour.

⚠️ Toutefois, il est important de noter qu'il ne convient pas d'utiliser des opérations asynchrones, car les promesses ne pourront pas être récupérées dans ce contexte ⚠️

Parcourir simplement un tableau de nombre:

Parcourir simplement un tableau de string:

La méthode ForEach en Typescript

Conseils MacBook : Comment utiliser la reconnaissance vocale pour dicter sous macOS ?

La fonction de reconnaissance vocale sur macOS s'avère être un outil pratique pour la dictée. En plus de la saisie de texte, il est possible d'insérer des signes de ponctuation et des éléments de mise en forme, tels que des sauts de ligne et des symboles spéciaux, en énonçant simplement les commandes. 
Bien que cette fonctionnalité ait connu des problèmes par le passé, entraînant une saisie moins fluide, 

 a considérablement amélioré son fonctionnement au fil du temps, la rendant ainsi très utile. 
Si vous souhaitez faire une pause par rapport à l'utilisation du clavier, il est certainement recommandé d'explorer cette option. 
Cet outil se révèle particulièrement pratique lorsque vous avez besoin de travailler en mode mains libres ou de prendre rapidement une note avant qu'elle ne soit oubliée. 
Cependant, il est important de noter que malgré les améliorations, la reconnaissance vocale n'est pas encore parfaite et semble fonctionner de manière plus efficace lorsque vous parlez lentement et accentuez davantage les mots.

1) Cliquez sur l'icône Apple dans le coin supérieur gauche.

2) Dans le menu qui s'ouvre, sélectionnez Préférences Système.

4) Sélectionner la source qui va lancer l’écoute de la dictée.
Personelement, je choisis le raccourcis double clique sur la touche 

Pour finir faisons un test sur un document 

Cette fonctionnalité va nous permettre de gagner un maximum de temps, d'ailleurs, cette phrase vient d'être écrite via ma voix.

Pour 

 la fonctionnalité, c'est très simple, je fais un 

. Pour l'arrêter, il me suffit de re cliquer à nouveau deux fois sur la touche control.

Reconnaissance vocale pour dicter sous macOS

Comment regrouper plusieurs commit git ?

⚠️ Avant de commencer si vous n’êtes pas sur de vous créer une copie de votre branche actuelle 


Pour fusionner plusieurs commits Git en un seul, il faut utiliser la commande 

 (pour "interactive rebase")

1 - Ouvrez votre terminal et assurez-vous que vous êtes dans la branche où vous souhaitez fusionner les commits

2 - Utilisez la commande 

 pour voir l'historique des commits et notez les identifiants (hash) des commits que vous souhaitez fusionner. 
Les commits apparaissent dans l'ordre inverse, du plus récent au plus ancien

3 - Exécutez la commande 

, où "n" est le nombre de commits que vous souhaitez fusionner
Par exemple, si vous voulez fusionner les trois derniers commits, utilisez 



4 - Git ouvrira un éditeur de texte avec une liste de ces commits :

5- Modifiez le mot-clé "pick" en "squash" (ou simplement "s") pour les commits que vous souhaitez fusionner dans le commit précédent
Par exemple :


6 - Enregistrez et fermez l'éditeur de texte

7 - Un second prompt va s’ouvrir, où Git vous permettra de rédiger un message de fusion pour le nouveau commit résultant de la fusion. 
Vous pouvez conserver le message existant ou en créer un nouveau. Enregistrez et fermez l'éditeur de texte.

8 - Vérifiez votre historique de commits à l'aide de 

 pour vous assurer que les commits ont été fusionnés correctement.

9 - Vous pouvez pousser les modifications vers le dépôt distant avec 

 si nécessaire.

⚠️ Attention si les commits sont déjà présent sur votre repo distant (gitHub par exemple) lancer la commande 

Comment fusionner plusieurs commit git en un seul ?

Comprendre la différence entre Git et GitHub

Lorsque vous vous lancez dans le monde du développement de logiciels, deux termes qui reviendront souvent dans vos discussions sont 

. Ces deux outils sont essentiels pour la gestion de versions de 

, mais ils sont distincts l'un de l'autre.



Git : Le système de contrôle de version

 est un système de contrôle de version distribué.
C'est un 

 qui permet de suivre les modifications apportées à votre code source au fil du temps. Chaque fois que vous apportez des modifications à votre code, 

 enregistre ces modifications dans un historique. Cela permet de revenir en arrière à n'importe quel moment pour voir comment le code a évolué.

Voici quelques points clés à propos de 

 fonctionne sur votre ordinateur. Vous pouvez créer un référentiel Git (ou "

") sur votre machine pour gérer votre code.

 que vous apportez à votre code, ce qui vous permet de suivre l'évolution de votre projet.

 pour travailler sur des fonctionnalités ou des correctifs isolés. Cela facilite la collaboration avec d'autres développeurs.

 : Vous créez des "commits" pour enregistrer vos modifications. Ces 

 sont accompagnés de messages qui expliquent ce que vous avez fait.

 : Git ne dispose pas d'une fonctionnalité de collaboration en ligne intégrée. Cela signifie que vous ne pouvez pas partager facilement votre code avec d'autres développeurs via Git seul.

, en revanche, est une plateforme en ligne basée sur 

. Il ajoute des fonctionnalités de collaboration, de partage et de suivi à l'outil de contrôle de version 

 vous permet d'héberger vos référentiels 

 en ligne. Cela signifie que vous pouvez accéder à votre code à partir de n'importe quel ordinateur avec une connexion Internet.

 : Vous pouvez inviter d'autres développeurs à travailler sur votre projet en utilisant GitHub. Ils peuvent créer des "pull requests" pour suggérer des modifications à votre code.

 : GitHub inclut un système de suivi des problèmes pour gérer les bogues, les demandes de fonctionnalités et d'autres tâches liées au projet.

 : Vous pouvez créer des pages web pour documenter votre projet et partager des informations avec d'autres utilisateurs.

 : GitHub offre des outils d'intégration continue qui vous permettent de tester automatiquement votre code à chaque modification.




 est un système de contrôle de version local qui vous permet de gérer l'historique de votre code, tandis que 

 est une plateforme en ligne construite autour de 

, offrant des fonctionnalités de collaboration, d'hébergement et de suivi. Pour travailler avec 

, vous utilisez toujours Git en tant qu'outil sous-jacent pour gérer les versions de votre code.




 vous aide à suivre les versions de votre code, tandis que 

 facilite la collaboration avec d'autres développeurs et l'accès à votre code depuis n'importe où.

La différence entre Git et GitHub

.
Imaginez une poupée russe, où chaque poupée est une version plus petite de la précédente, se nichant parfaitement à l'intérieur. 
De la même manière, la récursivité est une 

 qui s'appelle elle-même pour résoudre un 

. 
Bien que cela puisse sembler mystérieux au premier abord, cette technique puissante nous permet de décomposer des tâches complexes en de plus petites itérations.
Personnellement je vois ca comme une 

boucle.

On va y aller pas à pas...

Un Exemple Simple en JavaScript :

 Imaginez que vous voulez dire "Hi" un nombre infini de fois, mais en comptant à chaque fois.

problème ici est que l'exemple utilisé entraîne un dépassement de 

 s'appelle elle-même à plusieurs reprises sans atteindre un 

, ce qui finit par épuiser la pile d'appels du programme.



 représente la limite sur ma machine pour le nombre total d'appels récursifs.



Un exemple qui reprend les précédents avec des commentaires et explications:

 est définie. Elle a trois rôles clés :

 a dépassé la limite souhaitée (10). Si c'est le cas, la récursion s'arrête.

Elle affiche le message "Hi " suivi de la valeur actuelle de 

Enfin, elle appelle à nouveau la fonction 

 pour démarrer une nouvelle itération (appel récursif).

Le processus de récursion est lancé en appelant la fonction 

 s'appelle elle-même répétitivement jusqu'à ce que 

 dépasse la limite de 10. 
À chaque itération, elle affiche "Hi" suivi du numéro d'itération, ce qui donne l'impression de compter les salutations. 
La récursion s'arrête lorsque 

 devient supérieur à 10, empêchant ainsi un débordement de pile.



La Récursivité en JavaScript

TypeScript est un langage de programmation basé sur 

 intégrés dans TypeScript, et ils jouent un rôle essentiel dans la déclaration des 

: Le type "number" représente les valeurs 

: Le type "string" représente une séquence de caractères. 

: Le type "boolean" représente les valeurs booléennes "

 de valeurs du même type. 
Vous pouvez le déclarer de deux manières différentes :

 donnée. Cela peut être pratique lorsque vous n'avez pas encore déterminé le 

 de la variable ou lorsque vous travaillez avec du code 

 existant. Cependant, l'utilisation excessive de "

. 
N'hésitez pas à expérimenter avec ces types dans vos projets 

Les Core Types en TypeScript

 ou simplement passionné par les nouvelles tendances du web, le 

 est un sujet que vous ne pouvez pas ignorer.

Traditionnellement, les sites web étaient principalement construits en utilisant le rendu côté 

. Cela signifiait que le serveur web générait entièrement le contenu 

 de l'utilisateur. Cependant, avec l'avènement des 

 et interactives, cette approche a montré ses limites en termes de performance et d'expérience utilisateur.

 est une alternative innovante qui consiste à transférer la responsabilité du rendu du contenu 

 de l'utilisateur. Au lieu de recevoir une 

 qui s'exécute localement et qui se charge de récupérer les données nécessaires auprès du 

, les interactions deviennent plus fluides et rapides. L'utilisateur peut 

 dans l'application sans avoir à recharger la page à chaque interaction, ce qui offre une expérience plus proche des 

 est chargée initialement, le navigateur peut effectuer des mises à jour partielles du contenu sans avoir besoin de 

. Cela réduit la charge sur le serveur, les temps de 

 réutilisables, facilitant ainsi la maintenance et le développement. Les 

 peuvent se concentrer sur des parties spécifiques de l'application sans interférer avec le reste du 

 Le CSR peut être couplé avec des techniques de pré-rendu (pre-rendering) pour améliorer le référencement des moteurs de recherche. Cela permet d'obtenir un meilleur classement dans les résultats de recherche, malgré le rendu côté client.

 avant que le contenu ne s'affiche pour la première fois, en particulier sur les connexions 

 lentes ou les appareils moins puissants.

 Bien que les techniques de pré-rendu puissent aider le référencement, le 

 peut nécessiter une gestion complexe de l'état de l'application car certaines parties de l'interface peuvent être générées 

Il existe plusieurs technologies et frameworks qui peuvent être utilisés pour mettre en œuvre le Client-Side Rendering:



Voici une liste des principales technologies populaires utilisées pour le CSR :

 les plus populaires pour construire des interfaces utilisateur interactives et réactives en utilisant le 

, offrant des fonctionnalités étendues pour le développement d'applications web complexes.

 populaire pour la création d'interfaces utilisateur réactives et dynamiques avec une approche basée sur les composants.

 qui facilite la création d'applications web ambitieuses en utilisant le CSR et en mettant l'accent sur les conventions de développement.

 qui se distingue en transformant le code écrit en composants en code JavaScript optimisé pendant le processus de 

, ce qui permet d'obtenir des performances améliorées pour le CSR.

 Bien qu'il ne soit pas aussi populaire qu'auparavant, Backbone.js est un 

 léger qui prend en charge le CSR en fournissant une structure pour organiser le code.

 et offre des fonctionnalités similaires tout en étant plus petite en taille.

 complet qui prend en charge le CSR et offre une 

 pour le développement d'applications évolutives.

, rapide et simple pour le développement de interfaces utilisateur avec le 

 riche en fonctionnalités qui prend en charge le 

Ces technologies offrent des approches différentes pour le CSR, et le choix dépend souvent des préférences de

, des besoins du projet, des performances recherchées et de la courbe d'apprentissage associée. 
Quelle que soit la technologie choisie, elles permettent toutes de créer des applications web modernes et interactives qui offrent une expérience utilisateur 

Comprendre le CSR (Client-Side Rendering)

JavaScript (JS) et TypeScript sont deux langages de programmation largement utilisés pour le développement web.


Bien qu'ils partagent une syntaxe similaire, ils présentent des différences importantes en termes de type de données et de gestion des erreurs. Dans cet article, nous allons explorer les concepts de typage statique et dynamique avec 

 
JavaScript est un langage à typage dynamique, ce qui signifie que les variables peuvent changer de type au cours de l'exécution du programme. Vous pouvez attribuer n'importe quel 

 sans définir son type à l'avance. 
Par exemple:

Cette flexibilité peut être pratique, mais elle peut aussi entraîner des 

 qui introduit le typage statique. Cela signifie que les types des 

 doivent être déclarés explicitement et ne peuvent pas changer après leur initialisation. 

, permettant ainsi de détecter les erreurs de type dès la phase de 

. 
Reprenons l'exemple précédent en TypeScript:

Mes Projets

🚧 Work in Progress... 🚧