[{"_1":2,"_315":-5,"_316":-5},"loaderData",{"_3":4,"_244":245,"_264":265},"root",{"_5":6,"_7":8,"_15":-5,"_16":17,"_197":198,"_215":216,"_217":218,"_231":-5,"_232":233},"isDev",false,"honeypotInputProps",{"_9":10,"_11":12,"_13":14},"nameFieldName","name__confirm","validFromFieldName","from__confirm","encryptedValidFrom","EyUlO3rwddFsFBMbQXs8UcJJOclwvqvihplpKRtDF/fG2q7w3XYEnE8=","toastItem","latestArticles",{"_18":19,"_37":138},"articles",{"_18":20,"_129":130},[21,77,100],{"_22":23,"_24":25,"_26":27,"_28":29,"_30":31,"_32":33,"_34":35,"_36":-5,"_37":38,"_48":49,"_53":54,"_57":58,"_55":56,"_67":68},"published",true,"id","cmayadxmp0004pu2e6tic9ost","title","Quel ordinateur choisir pour coder en 2025 ?","slug","quel-ordinateur-choisir-pour-coder-en-2025-guide-complet-pour-debutants-en-developpement-web","description","Choisir le bon ordinateur est une étape essentielle quand on débute en développement web. Pas besoin d’un matériel ultra-performant, mais il faut un équipement fiable et adapté à vos besoins pour coder efficacement et progresser sans frustration. Dans cet article, je vous aide à choisir l’ordinateur idéal, que vous soyez étudiant, débutant ou en reconversion.","datePublished",["D",1747785600000],"content","## 1. PC, Mac ou Linux : quel système choisir ?\n\n* **PC Windows** : très répandu, souvent moins cher, compatible avec la majorité des logiciels et outils de développement. Idéal pour débuter avec un bon rapport qualité-prix.\n* **Mac** : apprécié des développeurs pour sa stabilité et son environnement Unix natif, pratique pour coder. Plus cher, mais souvent recommandé pour certains types de développement (iOS, macOS).\n* **Linux** : système open-source, très apprécié des développeurs avancés. Moins courant pour les débutants car nécessite un peu plus d’apprentissage.\n\nSi vous débutez, un PC Windows ou un Mac récent suffira largement.\n\n## 2. Les caractéristiques techniques importantes\n\nPour coder confortablement, certaines caractéristiques matérielles sont essentielles :\n\n* **Processeur (CPU)** : privilégiez au minimum un Intel i5 ou équivalent AMD Ryzen 5. Un processeur plus puissant accélère les compilations et exécutions.\n* **Mémoire RAM** : 8 Go est le minimum recommandé. Pour travailler sur plusieurs projets ou machines virtuelles, 16 Go est idéal.\n* **Stockage** : un disque SSD (256 Go ou plus) est essentiel pour la rapidité du système et des logiciels. Évitez les disques durs mécaniques lents.\n* **Écran** : un écran de 14 à 15 pouces avec une bonne résolution (Full HD minimum) est confortable pour coder plusieurs heures. Pour plus de confort, un deuxième écran peut être ajouté.\n* **Clavier et autonomie** : un clavier agréable et une bonne autonomie (au moins 6 heures) sont importants si vous travaillez souvent en déplacement.\n\n## 3. Ordinateurs recommandés pour débuter en développement web\n\nVoici quelques modèles adaptés selon votre budget :\n\n* **Entrée de gamme (moins de 700 €)** : Lenovo IdeaPad, Acer Aspire avec i5, 8 Go RAM, SSD 256 Go.\n* **Milieu de gamme (700–1200 €)** : Dell Inspiron, HP Pavilion, MacBook Air M1 (modèle 2020) pour un bon compromis performance/portabilité.\n* **Haut de gamme (plus de 1200 €)** : MacBook Pro, Dell XPS, Razer Blade, pour les développeurs qui souhaitent investir dans un matériel durable et puissant.\n\n## 4. Pourquoi ne pas prendre un ordinateur trop puissant au départ ?\n\nPour un débutant, investir dans un ordinateur très cher n’est pas toujours nécessaire. L’essentiel est d’avoir une machine fiable qui tourne bien avec les outils de base (VS Code, navigateurs, terminal). Vous pourrez toujours upgrader ou changer plus tard selon vos besoins.\n\n## 5. Accessoires utiles pour coder confortablement\n\n* **Souris ergonomique** : pour éviter les douleurs au poignet.\n* **Support ordinateur portable** : pour une meilleure posture.\n* **Disque dur externe ou clé USB** : pour sauvegarder vos projets.\n* **Casque audio** : idéal pour se concentrer en environnement bruyant.\n\n## Conclusion : faites un choix adapté à vos besoins et à votre budget\n\nChoisir un ordinateur pour coder ne doit pas être un casse-tête. Commencez par un PC ou Mac avec au moins 8 Go de RAM, un processeur i5 ou Ryzen 5, et un SSD rapide. Pensez aussi au confort d’utilisation avec un bon écran et clavier.\n\nPour aller plus loin, retrouvez mes conseils en vidéo sur ma chaîne YouTube[ Virgile Rietsch](https://www.youtube.com/@Virgile-Rietsch) et découvrez mes ressources sur[ Algomax.fr](https://algomax.fr/).","youtubeVideo","categories",[39,42,45],{"_24":40,"_26":41},"cma0ygz000008yk67urmvvgxl","Docker",{"_24":43,"_26":44},"cma0ygyuu0003yk679pggj8v0","NestJS",{"_24":46,"_26":47},"cma0ygyss0001yk67s6tvyf8q","ReactJS","author",{"_24":50,"_51":52},"cma0ygz43000byk6730758t6t","name","Algomax","_count",{"_55":56},"views",3,"readTime",{"_59":60,"_61":62,"_63":64,"_65":66},"text","3 min read","minutes",2.57,"time",154200,"words",514,"featuredImage",{"_69":70,"_71":72,"_73":74,"_75":76},"url","https://algomax-public.s3.eu-west-3.amazonaws.com/45d6e322-e186-4d34-b5ea-c3df39ae91bd.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250626%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250626T235309Z&X-Amz-Expires=3600&X-Amz-Signature=5d65b1e2ec88c6e606fa03622b4ad1a8b8029a6541acac1bffa220d5ebad2c81&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","alt","Quel ordinateur choisir pour coder en 2025 ? Guide complet pour débutants en développement web","width",1200,"height",675,{"_22":23,"_24":78,"_26":79,"_28":80,"_30":81,"_32":82,"_34":83,"_36":-5,"_37":84,"_48":88,"_53":89,"_57":91,"_55":90,"_67":96},"cmaya7b3k0003pu2ew8l9fghm","Comment devenir développeur web : le guide complet pour bien démarrer en 2025","comment-devenir-developpeur-web-:-le-guide-complet-pour-bien-demarrer-en-2025","Découvrez comment devenir développeur web facilement en 2025 grâce à ce guide complet. Matériel, formations, technologies clés, conseils pratiques et astuces pour débuter et réussir dans le développement web.",["D",1747785600000],"## 1. Le matériel et les équipements indispensables pour coder efficacement\n\nPour bien débuter en développement web, un matériel adapté est essentiel. Pas besoin d’ordinateur très puissant, mais certaines caractéristiques facilitent le travail :\n\n* **Un ordinateur avec au moins 8 Go de RAM**, capable de faire tourner un éditeur de code (Visual Studio Code), un navigateur web, et d’autres outils simultanément.\n* **Une connexion internet stable** pour accéder aux ressources en ligne, suivre des tutoriels et tester vos projets sur le web.\n* **Un éditeur de code gratuit et performant**, comme Visual Studio Code, qui offre de nombreuses extensions pour les débutants et les professionnels.\n* **Un navigateur moderne** (Chrome, Firefox, Edge) équipé d’outils de développement pour tester et déboguer vos sites.\n\nPour plus d’informations sur le matériel, consultez notre article détaillé [Quel ordinateur choisir pour coder ?.](https://algomax.fr/blog/quel-ordinateur-choisir-pour-coder-en-2025-guide-complet-pour-debutants-en-developpement-web \"Ordinateur débutant\")\n\n## 2. Les meilleures formations pour apprendre le développement web en 2025\n\nLe développement web peut s’apprendre de plusieurs façons :\n\n* **Formations gratuites en ligne** : plateformes comme FreeCodeCamp, OpenClassrooms ou Codecademy proposent des cours complets pour maîtriser HTML, CSS et JavaScript, sans dépenser un centime.\n* **Formations diplômantes et bootcamps intensifs** : pour ceux qui veulent un apprentissage encadré, des diplômes comme le BTS Services Informatiques ou des bootcamps (Le Wagon, Ironhack) sont de bonnes options pour entrer rapidement sur le marché du travail.\n* **Auto-apprentissage et ressources complémentaires** : ma chaîne YouTube Algomax vous propose des tutoriels pas à pas pour progresser à votre rythme.\n\nN’hésitez pas à combiner plusieurs ressources pour un apprentissage efficace.\n\n## 3. Les technologies incontournables pour débuter en développement web\n\nPour bien débuter, il est important de maîtriser ces technologies de base :\n\n* **HTML** : structure de base des pages web.\n* **CSS** : styles et mise en forme.\n* **JavaScript** : interactivité et dynamisme.\n* **Git et GitHub** : gestion de version et collaboration.\n\nUne fois ces bases acquises, explorez les frameworks modernes comme **React** pour le front-end ou **Node.js** pour le back-end, très demandés par les recruteurs.\n\n## 4. Comment se lancer concrètement : conseils pratiques pour débutants\n\n* **Réalisez vos premiers projets** : créez un portfolio en ligne, un site vitrine, ou une petite application web pour mettre en pratique vos connaissances.\n* **Pratiquez tous les jours** : même 30 minutes par jour peuvent faire une grande différence. La régularité est clé pour progresser rapidement.\n* **Rejoignez des communautés en ligne** : forums, groupes Facebook, serveurs Discord dédiés au développement web sont d’excellents moyens d’échanger et de trouver du soutien.\n* **Cherchez des expériences professionnelles** : stages, missions freelance, ou contributions open source renforceront votre CV et votre expérience.\n\n## 5. Surmonter les difficultés du développement web : astuces et motivation\n\nLe chemin vers le métier de développeur web comporte des obstacles :\n\n* **Comprendre les concepts complexes** : fonctions, objets, API peuvent sembler difficiles, mais avec de la patience et de la pratique, ils deviennent accessibles.\n* **Faire face aux bugs** : les erreurs sont inévitables. Apprenez à utiliser les outils de débogage et à chercher des solutions sur internet.\n* **Maintenir la motivation** : fixez-vous des objectifs réalisables, suivez vos progrès et n’hésitez pas à demander de l’aide. La persévérance est la clé de la réussite.\n\n## Conclusion : lancez-vous dans le développement web dès aujourd’hui !\n\nLe développement web est un métier accessible à tous ceux qui ont la curiosité et la motivation d’apprendre. Avec le bon matériel, des formations adaptées, une pratique régulière, et une bonne dose de patience, vous pouvez rapidement devenir développeur web.\n\nPour continuer votre apprentissage, rendez-vous sur[ Algomax.fr](https://algomax.fr/), où vous trouverez des ressources, des tutoriels, et des conseils pour progresser. N’oubliez pas de vous abonner à ma chaîne YouTube[ Virgile Rietsch](https://www.youtube.com/@Virgile-Rietsch) pour suivre mes vidéos pas à pas.\n\nChaque ligne de code vous rapproche un peu plus de votre objectif : lancez-vous dès maintenant !",[85],{"_24":86,"_26":87},"cma0ygz0z0009yk67nztcrh2s","Terminal",{"_24":50,"_51":52},{"_55":90},2,{"_59":92,"_61":93,"_63":94,"_65":95},"4 min read",3.23,193800,646,{"_69":97,"_71":79,"_73":98,"_75":99},"https://algomax-public.s3.eu-west-3.amazonaws.com/2cf18040-41f4-49e2-8acb-f4657f145f38.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250626%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250626T235309Z&X-Amz-Expires=3600&X-Amz-Signature=7d4a4a20ad61ad176bf5790cf639da7d8346d1e2a8b4b287d6ceb4e3bc8c8a00&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",6000,4001,{"_22":23,"_24":101,"_26":102,"_28":103,"_30":104,"_32":105,"_34":106,"_36":-5,"_37":107,"_48":115,"_53":118,"_57":119,"_55":56,"_67":124},"cma0ygz5s000dyk67f34wo2ts","Les 10 meilleurs hooks avec React Router 7 (anciennement Remix)","les-10-meilleurs-hooks-avec-react-router-7-anciennement-remix","Voici 10 hooks que j'utilise le plus dans mes applications Remix / React Router 7. ",["D",1736640000000],"Dans cet article, je partage avec vous mes **hooks** préférés pour [React Router 7](https://reactrouter.com/) (anciennement [Remix](https://remix.run)), que j’utilise dans quasiment tous mes projets.\n\n## 1. useOptionalUser\n\nC'est le hook que j'utilise le plus. Il permet de récupérer les informations optionnelles d'un utilisateur. Pour le faire fonctionner, il suffit de renvoyer un utilisateur dans le fichier `app/routes/root.tsx` (fichier racine d'une application Remix). Toute donnée chargée dans `root` est présente partout dans l'application (comme un contexte global).\n\n```tsx\nuseOptionalUser.tsx\nimport { useRouteLoaderData } from \"@remix-run/react\";\nimport type { loader } from \"app/root\";\n\nexport const useOptionalUser = () => {\n const data = useRouteLoaderData(\"root\");\n if (data?.user) {\n return data.user;\n }\n return null;\n};\n\nexport function useUser() {\n const maybeUser = useOptionalUser();\n if (!maybeUser) {\n throw new Error(\n \"No user found in root loader, but user is required by useUser. If user is optional, try useOptionalUser instead.\",\n );\n }\n return maybeUser;\n}\n```\n\nComme on utilise le type générique du hook `useRouteLoaderData`, ce hook renvoie une donnée typée. Merci Typescript !\n\n> Notez que l'on exporte également un hook `useUser` qui exploite le hook `useOptionalUser`, mais qui renvoie une erreur en cas d'utilisateur déconnecter. Cela permet de protéger les pages côté client en renvoyant une erreur en cas d'utilisateur non identifié.\n\n## 2. useTailwindScreenSizes\n\nJ'utilise ce hook pour afficher un bandeau indiquant la taille d'écran active de TailwindCSS. Ces dimensions utilises les valeurs par défaut, qu'on retrouve dans la [documentation officielle de TailwindCSS](https://tailwindcss.com/docs/responsive-design) \n\n```tsx\nuseTailwindScreenSizes\nimport React from \"react\";\n\nexport const useTailwindScreenSizes = ({\n initialWidth = 1280,\n}: {\n initialWidth?: number;\n}) => {\n const [currentWidth, setCurrentWidth] = React.useState(initialWidth);\n\n React.useEffect(() => {\n if (typeof window === \"undefined\") return;\n\n const handleScreenResize = () => {\n const width = window.innerWidth;\n setCurrentWidth(width);\n };\n handleScreenResize();\n\n window.addEventListener(\"resize\", handleScreenResize);\n return () => {\n window.removeEventListener(\"resize\", handleScreenResize);\n };\n }, []);\n\n const getResponsive = () => {\n if (currentWidth > 1536) {\n return \"2xl\";\n }\n\n if (currentWidth > 1280) {\n return \"xl\";\n }\n\n if (currentWidth > 1024) {\n return \"lg\";\n }\n\n if (currentWidth > 768) {\n return \"md\";\n }\n if (currentWidth > 640) {\n return \"sm\";\n }\n\n return \"very small\";\n };\n return { currentWidth, getResponsive };\n};\n```\n\nJ'appelle ensuite ce hook dans un composant nommé `DevTool` que je place de manière absolue. Dans le fichier `root` par exemple.\n\n```tsx\nDevtool.tsx\nimport { useIsClient } from \"hooks/useIsClient.tsx\";\nimport { useTailwindScreenSizes } from \"hooks/useTailwindScreenSizes.tsx\";\n\nconst Devtool = ({\n initialScreenWidth = 1280,\n}: {\n initialScreenWidth?: number;\n}) => {\n const { currentWidth, getResponsive } = useTailwindScreenSizes({\n initialWidth: initialScreenWidth,\n });\n\n const isClient = useIsClient();\n if (!isClient) return null;\n return (\n \n {currentWidth}\n {getResponsive()}\n \n );\n};\n\nexport default Devtool;\n```\n\n## 3. useIsClient\n\nCe hook utilise-lui même un hook nommé `useIsClient`, n'affichant rien côté serveur (on affiche ce composant côté client).\n\n```tsx\nuseIsClient.tsx\nimport { useEffect, useState } from \"react\";\n\nexport function useIsClient() {\n const [isClient, setClient] = useState(false);\n\n useEffect(() => {\n setClient(true);\n }, []);\n\n return isClient;\n}\n```\n\n## 4. useGetUserPosition\n\nAvez-vous déjà eu besoin de connaître la position géographique des utilisateurs de votre site ? On parle ici de *latitude* et *longitude*, qui permettent de calculer la distance kilométrique entre deux points. \n\nC'est notamment utile pour géolocaliser l'utilisateur et lui proposer des données locales (c'est utilisé sur [Leboncoin](https://leboncoin.fr), [Airbnb](https://airbnb.com), [Uber](https://uber.com) ... \n\nJ'ai utilisé ce hook pour la recherche d'adresse de [GoodCollect](https://goodcollect.co).\n\n```tsx\nuseGetUserPosition.tsx\nimport { useState } from \"react\";\nimport { useToast } from \"components/shadcn-ui/use-toast.ts\";\n\nexport const useGetUserPosition = ({\n successFn = () => {},\n}: {\n successFn?: ({ lat, lng }: { lat: number; lng: number }) => void;\n}) => {\n const [latLng, setLatLng] = useState<{\n loading: boolean;\n latitude: number | null;\n longitude: number | null;\n canGeoLocate: boolean;\n }>({\n loading: false,\n latitude: null,\n longitude: null,\n canGeoLocate: true,\n });\n\n const { toast } = useToast();\n\n const getUserPosition = () => {\n if (!navigator.geolocation) {\n setLatLng((oldValues) => ({\n ...oldValues,\n canGeoLocate: false,\n }));\n return;\n }\n setLatLng((oldValues) => ({ ...oldValues, loading: true }));\n\n navigator.geolocation.getCurrentPosition(\n (position) => {\n const { latitude, longitude } = position.coords;\n\n setLatLng((oldValues) => ({\n ...oldValues,\n latitude,\n longitude,\n loading: false,\n }));\n\n successFn?.({ lat: latitude, lng: longitude });\n },\n (error) => {\n if (error.PERMISSION_DENIED) {\n toast({\n description:\n \"Votre navigateur n'a pas les permissions pour vous localiser. Vous pouvez l'activer dans les paramètres de votre navigateur.\",\n variant: \"error\",\n });\n } else if (error.TIMEOUT) {\n toast({\n description:\n \"La géolocalisation a pris trop de temps. Veuillez réessayer.\",\n variant: \"error\",\n });\n } else if (error.POSITION_UNAVAILABLE) {\n toast({\n description:\n \"Votre position n'a pas pu être déterminée. Veuillez réessayer.\",\n variant: \"error\",\n });\n } else {\n toast({\n description: \"Une erreur est survenue. Veuillez réessayer.\",\n variant: \"error\",\n });\n }\n setLatLng((oldValues) => ({\n ...oldValues,\n loading: false,\n }));\n },\n {\n timeout: 10_000,\n enableHighAccuracy: true,\n maximumAge: 60_000, // 60 seconds\n },\n );\n };\n return { getUserPosition, latLng };\n};\n```\n\nCe hook renvoie les valeurs suivantes : \n\n- la latitude et longitude\n- est-ce que l'utilisateur a accepté d'être géolocalisé / est-ce qu'il peut être géolicalisé\n- est-ce que la géolocalisation est en cours (booléen *loading*)\n\nPour connaître la position, nous utilisons l'API native `navigator.geolocation.getCurrentPosition`. \n\nCe hook utilise également le hook `useToast` qui est entièrement facultatif, et qui permet d'afficher une alerte en cas d'erreur. Ce hook est fourni avec le composant [toast](https://ui.shadcn.com/docs/components/toast) de la librairie **shadcn/ui**.\n\n## 6. useFileUpload\n\nCe hook permet d'afficher un fichier chargé depuis un *input* de type `file`. Le code est à adadpté à votre cas d'utilisation. Le cas d'utilisation n'accepte que les fichiers images ou de type PDF.\nIl met à disposition plusieurs propriétés pour réinitialiser l'input, afficher le fichier et savoir si c'est une image.\n\n```tsx\nuseFileUpload.tsx\nimport React from \"react\";\n\n// Takes a file path and returns the file name and extension\nconst checkFilenameFormat = ({\n fileName,\n allowedFormats = [\"jpg\", \"jpeg\", \"png\", \"heif\", \"avif\", \"webp\", \"pdf\"],\n}: {\n fileName: string;\n allowedFormats?: string[];\n}) => {\n const fileExtension = fileName.split(\".\").pop() || \"\"; // remove the dot\n\n // Only allow image files\n const isFormatAllowed = allowedFormats.includes(fileExtension);\n const isImage = fileExtension !== \"pdf\";\n return { isImage, isFormatAllowed, fileExtension };\n};\n\nexport const useFileUpload = () => {\n const [fileUpload, setFileUpload] = React.useState(null);\n const [documentPreview, setDocumentPreview] = React.useState(\n null,\n );\n\n interface HtmlFormElement extends HTMLInputElement {\n files: FileList;\n }\n const handleFileUpload = (e: React.ChangeEvent) => {\n const [file] = e.target.files || [];\n if (file) {\n setFileUpload(file);\n } else {\n setFileUpload(null);\n }\n };\n\n const isFileImage = React.useMemo(() => {\n if (!fileUpload) return null;\n const fileFormat = checkFilenameFormat({\n fileName: fileUpload?.name || \"\",\n });\n return fileFormat.isImage;\n }, [fileUpload]);\n\n // This create a preview of the file, as a URL\n React.useEffect(() => {\n if (!fileUpload) return;\n const objectUrl = URL.createObjectURL(fileUpload);\n setDocumentPreview(objectUrl);\n\n return () => URL.revokeObjectURL(objectUrl);\n }, [fileUpload]);\n\n const resetFileUpload = () => {\n setFileUpload(null);\n setDocumentPreview(null);\n };\n\n return {\n isFileImage,\n documentPreview,\n setFileUpload,\n fileUpload,\n handleFileUpload,\n resetFileUpload,\n };\n};\n```\n\nIl suffit de l'utiliser avec input de type \"file\" pour le faire fonctionner.\n\n```tsx\nconst { documentPreview, handleFileUpload, isFileImage, resetFileUpload } =\n useFileUpload();\n \n\n```\n\n## 7. useAddressCombobox\n\nJ'ai découvert ce hook en lisant l'article de [Kent C. Dodds](https://kentcdodds.com/) nommé [Full Stack Components](https://www.epicweb.dev/full-stack-components). \nDedans, il nous explique la notion de composant full-stack : On déclare une route, mais au lieu de renvoyer une vue directement, nous exportons depuis cette route un hook, qui est typé et que nous pouvons ensuite utiliser partout.\n\nParfait pour un *combobox* d'adresse autocomplétée par exemple. Je l'ai adaptée pour utiliser l'API de Google ([Places API](https://developers.google.com/maps/documentation/places/web-service/overview)) et obtenir l'auto-complétion des adresses.\n\nCe hook nécessite de télécharger deux librairies pour fonctionner :\n\n- [Downshift](https://www.downshift-js.com/), une librairie que Kent a lui-même mis en place lors de sa mission à Paypal\n- [spin-delay](https://github.com/smeijer/spin-delay) pour afficher un spinner (suffisamment longtemps lors des petits chargements)\n\n```tsx\nuseAddressCombobox\nimport { useFetcher, useSearchParams } from \"@remix-run/react\";\nimport { useCombobox } from \"downshift\";\nimport { useEffect, useId, useState } from \"react\";\nimport { flushSync } from \"react-dom\";\nimport type { AddressComboboxType } from \"routes/get-address\";\nimport { useSpinDelay } from \"spin-delay\";\n\nexport const useAddressCombobox = ({\n defaultAddress = null,\n defaultPlaceId = null,\n onAddressChange,\n}: {\n defaultAddress?: string | null;\n defaultPlaceId?: string | null;\n onAddressChange?: ({\n address,\n placeId,\n }: {\n address: string;\n placeId: string;\n }) => void;\n}) => {\n const addressFetcher = useFetcher();\n const addressAvailabilityFetcher = useFetcher();\n\n const id = useId();\n const addresses = addressFetcher.data?.addresses ?? [];\n type AddressType = (typeof addresses)[number];\n const [selectedAddress, setSelectedAddress] = useState<\n null | undefined | AddressType\n >({\n address: defaultAddress ?? \"\",\n id: defaultPlaceId ?? \"\",\n });\n // An errored address is an address that was suggested by Google, but that is not associated with a zipcode.\n const [searchParams] = useSearchParams();\n\n const cb = useCombobox({\n id,\n\n onSelectedItemChange: ({ selectedItem }) => {\n setSelectedAddress(selectedItem);\n },\n items: addresses,\n itemToString: (item) => (item ? item.address : \"\"),\n defaultInputValue:\n defaultAddress ??\n searchParams.get(\"address\") ??\n \"\",\n onInputValueChange: (changes) => {\n addressFetcher.submit(\n { search: changes.inputValue ?? \"\" },\n { method: \"get\", action: \"/get-address\" },\n );\n },\n });\n\n const busy = addressFetcher.state !== \"idle\";\n const showSpinner = useSpinDelay(busy, {\n delay: 150,\n minDuration: 500,\n });\n const displayMenu = cb.isOpen && addresses.length > 0;\n\n\n return {\n displayMenu,\n showSpinner,\n selectedAddress,\n cb,\n addressFetcher,\n addresses,\n };\n};\n```\n\n## 8. useDateRanges\n\nPour les applications nécessitant de manipuler des dates, voici un hook permettant de les formatter sous forme de `string`. Elles peuvent ensuite être sauvegardées dans l'URL (sur les sites de réservation par exemple). \n\nNous exploitons dans ce hook la librairie [date-fns](https://date-fns.org) pour formatter la date. \n\n```tsx\nuseDateRanges.tsx\n\nimport {\n parseStringToDate\n} from \"app/shared/dates.ts\";\nimport {\n differenceInDays\n} from \"date-fns\";\nimport React, { useMemo } from \"react\";\nimport { useSearchParams } from \"react-router\";\n\n\nconst getDateDifferenceInDays = ({\n endDate,\n startDate,\n}: {\n endDate: Date;\n startDate: Date;\n}) => {\n // Always add more day, to include the current day\n const dateDifferenceInDays = differenceInDays(endDate, startDate) + 1;\n\n return dateDifferenceInDays;\n};\n\nexport const useDateRanges = ({\n defaultEndDate = null,\n defaultStartDate = null,\n defaultAdditionalDate = null,\n minDate = null,\n}: {\n defaultStartDate?: string | null;\n defaultEndDate?: string | null;\n defaultAdditionalDate?: string | null;\n minDate?: string | null;\n}) => {\n const [searchParams] = useSearchParams();\n\n const startDateParam = searchParams.get(\"startDate\");\n const endDateParam = searchParams.get(\"endDate\");\n\n const minimumDate = new Date(minDate) || new Date()\n\n const [selectedDates, setSelectedDates] = React.useState<{\n startDate: string;\n endDate: string;\n additionalDate?: string;\n }>(() => {\n return {\n startDate: defaultStartDate ?? startDateParam ?? \"\",\n endDate: defaultEndDate ?? endDateParam ?? \"\",\n additionalDate: defaultAdditionalDate ?? \"\",\n };\n });\n\n const isOutated = React.useMemo(() => {\n if (!selectedDates.startDate) return false;\n const startDate = parseStringToDate(selectedDates.startDate);\n\n return startDate < minimumDate;\n }, [selectedDates?.startDate, minimumDate]);\n\n const dateDifferenceInDays = useMemo(() => {\n if (!selectedDates.startDate || !selectedDates.endDate) return 0;\n return getDateDifferenceInDays({\n endDate: parseStringToDate(selectedDates.endDate),\n startDate: parseStringToDate(selectedDates.startDate),\n });\n }, [selectedDates.endDate, selectedDates.startDate]);\n\n return {\n selectedDates,\n setSelectedDates,\n minimumDate,\n isOutated,\n dateDifferenceInDays,\n };\n};\n```\n\n## 9. useLocalStorage\n\nCe hook est très pratique pour sauvegarder des informations dans le [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)\n\n> Le `localStorage` est une base de donnée présente directement dans le navigateur, qui permet par exemple de sauvegarder les informations de l'utilisateur comme son thème, s'il a accepté les cookies, ou toute information utile pour améliorer l'expérience utilisateur.\n\nCette version du hook nécessite de télécharger la librairie [usehooks-ts](https://usehooks-ts.com/). Il existe également des alternatives natives à React.\n\n```sh\nTerminal\nnpm install usehooks-ts\n```\n\n```tsx\nuseLocalStorage.tsx\nimport {\n useCallback,\n useEffect,\n useState,\n type Dispatch,\n type SetStateAction,\n} from \"react\";\n\nimport { useEventCallback, useEventListener } from \"usehooks-ts\";\n\ndeclare global {\n interface WindowEventMap {\n \"local-storage\": CustomEvent;\n }\n}\n\ntype SetValue = Dispatch>;\n\nexport function useLocalStorage(\n key: string,\n initialValue: T,\n): [T, SetValue] {\n // Get from local storage then\n // parse stored json or return initialValue\n const readValue = useCallback((): T => {\n // Prevent build error \"window is undefined\" but keeps working\n if (typeof window === \"undefined\") {\n return initialValue;\n }\n\n try {\n const item = window.localStorage.getItem(key);\n return item ? (parseJSON(item) as T) : initialValue;\n } catch (error) {\n console.warn(`Error reading localStorage key “${key}”:`, error);\n return initialValue;\n }\n }, [initialValue, key]);\n\n // State to store our value\n // Pass initial state function to useState so logic is only executed once\n const [storedValue, setStoredValue] = useState(readValue);\n\n // Return a wrapped version of useState's setter function that ...\n // ... persists the new value to localStorage.\n const setValue: SetValue = useEventCallback((value) => {\n // Prevent build error \"window is undefined\" but keeps working\n if (typeof window === \"undefined\") {\n console.warn(\n `Tried setting localStorage key “${key}” even though environment is not a client`,\n );\n }\n\n try {\n // Allow value to be a function so we have the same API as useState\n const newValue = value instanceof Function ? value(storedValue) : value;\n\n // Save to local storage\n window.localStorage.setItem(key, JSON.stringify(newValue));\n\n // Save state\n setStoredValue(newValue);\n\n // We dispatch a custom event so every useLocalStorage hook are notified\n window.dispatchEvent(new Event(\"local-storage\"));\n } catch (error) {\n console.warn(`Error setting localStorage key “${key}”:`, error);\n }\n });\n\n useEffect(() => {\n setStoredValue(readValue());\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n const handleStorageChange = useCallback(\n (event: StorageEvent | CustomEvent) => {\n if ((event as StorageEvent)?.key && (event as StorageEvent).key !== key) {\n return;\n }\n setStoredValue(readValue());\n },\n [key, readValue],\n );\n\n // this only works for other documents, not the current one\n useEventListener(\"storage\", handleStorageChange);\n\n // this is a custom event, triggered in writeValueToLocalStorage\n // See: useLocalStorage()\n useEventListener(\"local-storage\", handleStorageChange);\n\n return [storedValue, setValue];\n}\n\n// A wrapper for \"JSON.parse()\"\" to support \"undefined\" value\nfunction parseJSON(value: string | null): T | undefined {\n try {\n // @ts-ignore\n return value === \"undefined\" ? undefined : JSON.parse(value ?? \"\");\n } catch {\n return undefined;\n }\n}\n```\n\n## 10. useQueryState\n\nCe hook s'utilise comme [useState](https://react.dev/reference/react/useState), mais va sauvegarder les valeurs comme [paramètres d'URL](https://fr.wikipedia.org/wiki/Cha%C3%AEne_de_requ%C3%AAte).\n\n![Exemple de paramètres d'URL](https://algomax-public.s3.eu-west-3.amazonaws.com/what_are_url_parameters_1cd183d8b2.png)\n\nDans quel cas vas-tu utiliser les `paramètres d'URL` ?\n\n- pour sauvegarder les filtres sur une application de réservation comme [leboncoin](https://www.leboncoin.fr) ou [Airbnb](https://www.airbnb.com).\n- pour la pagination d'un blog (numéro de page sélectionné, limite d'articles affichés).\n- pour sauvegarder la valeur d'une barre de recherche (comme sur [Google](https://www.google.com) par exemple)\n\nPour ce faire, je te présente la librairie [nuqs](https://nuqs.47ng.com), qui vient exploiter les hooks natifs à Remix (comme [useSearchParams](https://api.reactrouter.com/v7/functions/react_router.useSearchParams.html))\n\nL'exemple le plus simple se trouve sur la documentation de [nuqs](https://nuqs.47ng.com/docs/basic-usage)\n\n```tsx\nDemo.tsx\n\nimport { useQueryState } from 'nuqs'\n \nexport function Demo() {\n const [name, setName] = useQueryState('name')\n return (\n <>\n setName(e.target.value)} />\n \n

Hello, {name || 'anonymous visitor'}!

\n \n )\n}\n```\n\nL'avantage de ce hook est sa simplicité d'utilisation. L'auteur de la librairie, [François Best](https://x.com/fortysevenfx) nous propose une **expérience développeur** d'exception. \n\nSes nombreux `parsers` permettent de valider tout type de donnée (full typesafe) :\n\n- `parseAsString` (les paramètres sont des *string* par défaut)\n- `parseAsInteger` pour les entiers\n- `parseAsFloat` pour les chiffres à 2 décimales\n- `parseAsBoolean` pour les booléens\n- `parseAsStringLiteral` pour les *string literals*\n- et bien plus (les dates, les valeurs hexadécimales, les *enums* ...)\n\nLe hook **useQueryState** prend comme premier argument le nom du `paramètre d'URL`. Le deuxième argument est optionel, et peut soit être le `parser`, soit un objet de configuration :\n\n```tsx\nuseQueryState.tsx\nimport { useQueryState, parseAsInteger } from 'nuqs'\n\nconst [search] = useQueryState('search', { defaultValue: '' })\n// ^? string\n \nconst [count] = useQueryState('count', parseAsInteger)\n// ^? number | null -> no default value = nullable\n \nconst [count2] = useQueryState('count', parseAsInteger.withDefault(0))\n// ^? number\n```\n\n> J'ai de nombreux paramètres d'URL différents à gérer, comment faire ?\n\nUtilise le hook [useQueryStates](https://nuqs.47ng.com/docs/batching) (au pluriel), pour gérer un objet de plusieurs `paramètres d'URL`.\n\n```tsx\nimport { useQueryStates, parseAsFloat } from 'nuqs'\n\nconst [{ latitude, longitude }, setCoordinates] = useQueryStates(\n {\n // Use variable names that make sense in your codebase\n latitude: parseAsFloat.withDefault(45.18),\n longitude: parseAsFloat.withDefault(5.72)\n },\n {\n urlKeys: {\n // And remap them to shorter keys in the URL\n latitude: 'lat',\n longitude: 'lng'\n }\n }\n)\n \n// No changes in the setter API, but the keys are remapped to:\n// ?lat=45.18&lng=5.72\nsetCoordinates({\n latitude: 45.18,\n longitude: 5.72\n})\n```\n\nJ'espère que ces hooks vous seront utiles !",[108,111,112],{"_24":109,"_26":110},"cma0ygytr0002yk67fi9yxtr2","React Router 7",{"_24":46,"_26":47},{"_24":113,"_26":114},"cma0ygyr10000yk674psikbwx","Remix",{"_24":116,"_51":117},"cma0ygz2m000ayk67bs6pgohz","Virgile",{"_55":56},{"_59":120,"_61":121,"_63":122,"_65":123},"14 min read",13.04,782400,2608,{"_69":125,"_71":126,"_73":127,"_75":128},"https://algomax-public.s3.eu-west-3.amazonaws.com/402f9750-3c16-4925-bd5c-10fe46e2ace9.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250626%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250626T235309Z&X-Amz-Expires=3600&X-Amz-Signature=3282323d18e7dba5d4160f535d30363261547323d451039423f6ff0294fa7e47&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject","React Router 7 ",1280,720,"pagination",{"_131":132,"_133":56,"_134":135,"_136":137},"page",1,"pageSize","pageCount",11,"total",31,[139,144,151,156,163,168,174,179,184,191],{"_24":140,"_26":141,"_28":142,"_143":-5},"cma0ygyvx0004yk67z5ezcv8p","Application mobile ","application-mobile-","image",{"_24":145,"_26":146,"_28":147,"_143":148},"cma0ygyz00007yk677i1tjff2","NodeJS","nodejs",{"_24":149,"_69":150,"_71":146},"cma239buz0006ykoznafwzvow","https://algomax-public.s3.amazonaws.com/67e309ee-8db1-4816-b4ab-f9962c33d4f1.png",{"_24":40,"_26":41,"_28":152,"_143":153},"docker",{"_24":154,"_69":155,"_71":152},"cma238g0g0002ykozkuyvfu7r","https://algomax-public.s3.amazonaws.com/40436d76-e4c0-43a1-9683-019adf5e9014.png",{"_24":157,"_26":158,"_28":159,"_143":160},"cma0ygywx0005yk67arcm0kw4","Figma","figma",{"_24":161,"_69":162,"_71":158},"cma24o2wh0007ykozlzifidx0","https://algomax-public.s3.amazonaws.com/7019f576-4bb9-4167-b567-c09745898615.png",{"_24":43,"_26":44,"_28":164,"_143":165},"nestjs",{"_24":166,"_69":167,"_71":44},"cma24pvg10008ykozfti5xo0h","https://algomax-public.s3.amazonaws.com/eae71424-33db-4162-8f02-d08a2e20a622.png",{"_24":109,"_26":110,"_28":169,"_143":170},"react-router-7",{"_24":171,"_69":172,"_71":173},"cma24rd2e0009ykozhi6zylip","https://algomax-public.s3.amazonaws.com/512552ae-927c-4a83-9513-d850ff83e574.png","React Router 7 logo",{"_24":46,"_26":47,"_28":175,"_143":176},"reactjs",{"_24":177,"_69":178,"_71":47},"cma24srkf000aykozg11d0dk2","https://algomax-public.s3.amazonaws.com/f10999d5-e739-4bc3-afb4-8211ec7b9f49.webp",{"_24":113,"_26":114,"_28":180,"_143":181},"remix",{"_24":182,"_69":183,"_71":114},"cma24tcao000bykoz44554mdv","https://algomax-public.s3.amazonaws.com/e317a065-d836-4232-8ae5-7de6a9ff5277.png",{"_24":185,"_26":186,"_28":187,"_143":188},"cma0ygyxz0006yk67t7rx9ota","Strapi","strapi",{"_24":189,"_69":190,"_71":187},"cma2394060005ykozjkxqqoh2","https://algomax-public.s3.amazonaws.com/74c12025-c0f3-4778-83cf-5b69765baaa1.png",{"_24":86,"_26":87,"_28":192,"_143":193},"terminal",{"_24":194,"_69":195,"_71":196},"cma238oi20003ykoz7fpuawz5","https://algomax-public.s3.amazonaws.com/2d6946a5-e89f-4536-a021-ab7cfda0cc36.png","Terminal (iterm)","courseBackLinks",[199,203,205,209,212],{"_26":200,"_28":201,"_202":-5},"Développe une application de mise en relation avec Remix.js, NestJS, Typescript, Turborepo","developpe-une-application-de-mise-en-relation-avec-remix-js-nest-js-typescript-turborepo","landingPageUrl",{"_26":110,"_28":169,"_202":204},"/formation-react-router-7",{"_26":206,"_28":207,"_202":208},"Crée ta première app Next.js 15 full-stack avec Prisma et RSC","developper-une-app-next-js-15-full-stack-avec-prisma-et-rsc","/creer-ta-premiere-app-nextjs-15",{"_26":210,"_28":211,"_202":-5},"Créer un site e-commerce moderne avec Remix et Strapi 5","creer-un-site-e-commerce-moderne-avec-remix-et-strapi-5",{"_26":213,"_28":214,"_202":-5},"Développe une app de chat temps réel avec Remix et NestJS","developpe-une-app-de-chat-temps-reel-avec-remix-et-nestjs","chats",{},"env",{"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230},"GOOGLE_CAPTCHA_SITE_KEY","6Lfia0UkAAAAACBikkfHI1VNoRkyUK99pofGRHvD","ALGOMAX_ENV","production","FRONTEND_URL","https://algomax.fr","GTM_ID","GTM-5QP7LX7","GA_ID","G-N1C6D1CR5Z","FB_PIXEL_ID","726790966507971","user","requestInfo",{"_234":235,"_240":241,"_242":243},"hints",{"_236":237,"_238":239},"theme","light","timeZone","UTC","path","/blog","userPrefs",{"_236":237},"routes/_marketing+/_publicLayout",{"_24":246,"_247":248,"_26":110,"_28":169,"_249":250,"_251":252,"_253":250,"_254":255,"_256":257,"_258":259,"_260":261,"_262":6,"_263":-5},"cm7rklwvw000096e6vbtqns1v","accessType","PAID","price",299,"originalPrice",598,"totalSavingsInEuros","totalSavingsInPercentage",50,"endSaleDate",["D",1751328000000],"promoCode","LAUNCH35","pagesRemainingAtCurrentPrice",95,"onboardingCompleted","onboardingData","routes/_marketing+/blog.index",{"_18":266,"_37":293,"_313":314},{"_18":267,"_129":290},[268],{"_22":23,"_24":269,"_26":270,"_28":271,"_30":272,"_32":273,"_34":274,"_36":-5,"_37":275,"_48":278,"_53":279,"_57":281,"_55":280,"_67":286},"cma0yh24n001xyk677p0znizf","Gagnez du temps avec un terminal surpuissant","optimisez-du-temps-avec-un-terminal-personnalise","En tant que développeur, nous passons beaucoup de temps à lancer des commandes de terminal. ZSH propose une correction des syntaxes erronées, un historique des commandes déjà tapées et pleins d'autres petites astuces.",["D",1665100800000],"## Comment configurer un thème zsh de terminal ?\n\nLe temps est une ressource **précieuse**. En tant que développeur, je souhaite être efficace et développer de belles *features* rapidement. J'utilise très souvent mon terminal pour lancer les commandes `git`, mettre à jour mes projets, changer le `php.ini` ...\n\nCes commandes sont très **monotones** et **répétitives**. Je vais vous montrer aujourd'hui comment gagner un peu de temps grâce au thème de terminal **ZSH**.\n\n![Invité de commande (terminal) personnalisé proposant auto-completion, correction de syntaxe][Link](link)(https://algomax-public.s3.eu-west-3.amazonaws.com/starship_terminal_696fc275c1.gif)\n\n## Installer sur Ubuntu\n\n### 1. Installation de ZSH, mise à jour du système\n\n```bash Terminal\nsudo apt-get install zsh powerline fonts-powerline git -y\nsudo apt-get update && sudo apt full-upgrade -y\n```\n\n### 2. Installation de Starship\n\n```bash Terminal\ncurl -sS https://starship.rs/install.sh | sh\n```\n\n### 3. Installation de Oh My Zsh. Il faudra fermer et rouvrir le terminal pour que les modifications soient prises en compte.\n\n```bash Terminal\nsh -c \"$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)\"\n```\n\n### 4. Installation des plugins ZSH\n\n```bash Terminal\ngit clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions\ngit clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-completions\ngit clone https://github.com/zsh-users/zsh-syntax-highlighting ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting\n```\n\n### 5. Configuration de Starship et des plugins ZSH\n\n```bash Terminal\nsudo nano ~/.zshrc\n```\n\nOn va modifier le fichier `~/.zshrc` généré par [Oh My Zsh](https://ohmyz.sh/) et remplacer son contenu par :\n\n```bash Terminal\nexport ZSH=\"$HOME/.oh-my-zsh\"\n\nplugins=(\ngit\nzsh-autosuggestions\nzsh-completions\nzsh-syntax-highlighting\n)\n\nsource $ZSH/oh-my-zsh.sh\n\neval \"$(starship init zsh)\"\n```\n\n### 6. Redémarrer le terminal\n\n```bash Terminal\nsource ~/.zshrc\n```\n\n### 7. Décollage 🚀\n\nVous êtes maintenant parés à utiliser ce terminal **efficace** et **optimisé** !\n\n**N.B** : Vous développez des applications **Javascript** ? N'oubliez pas de réinstaller `npm` ou `nvm` !\n\nVous pouvez retrouver la documentation officielle de `nvm` [ici](https://github.com/nvm-sh/nvm#install--update-script).\n\n## Installer sur Mac\n\n### 1. Installation de [Brew](https://brew.sh/), le package manager macOS\n\n```bash Terminal\n \t/bin/bash -c \"$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)\"\n```\n\n### 2. Installation de [ZSH](https://formulae.brew.sh/formula/zsh)\n\n```bash Terminal\nbrew install zsh\n```\n\n### 3. Installation, de Oh My Zsh\n\n```bash Terminal\nsh -c \"$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)\"\n```\n\n### 4. Installation de Starship\n\n```bash Terminal\ncurl -sS https://starship.rs/install.sh | sh\n```\n\n### 5. Installation des plugins ZSH\n\n```bash Terminal\ngit clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions\ngit clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-completions\ngit clone https://github.com/zsh-users/zsh-syntax-highlighting ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting\n```\n\n### 6. Configuration de Starship et des plugins ZSH\n\n```bash Terminal\nsudo nano ~/.zshrc\n```\n\nOn va modifier le fichier `~/.zshrc` généré par [Oh My Zsh](https://ohmyz.sh/) et remplacer son contenu par :\n\n```bash Terminal\nexport ZSH=\"$HOME/.oh-my-zsh\"\n\nplugins=(\ngit\nzsh-autosuggestions\nzsh-completions\nzsh-syntax-highlighting\n)\n\nsource $ZSH/oh-my-zsh.sh\n\neval \"$(starship init zsh)\"\n```\n\n### 7. Redémarrer le terminal\n\n```bash Terminal\nsource ~/.zshrc\n```\n\n### 8. Décollage 🚀\n\nVous êtes maintenant parés à utiliser ce terminal **efficace** et **optimisé** !\n\n**N.B** : Vous développez des applications **Javascript** ? N'oubliez pas de réinstaller\n`npm` ou `nvm` !\n\nVous pouvez retrouver la documentation officielle de `nvm` [ici](https://github.com/nvm-sh/nvm#install--update-script).\n\n## Guide de l'installation sur Ubuntu avec explications\n\n### 1. Télécharger Powerline\n\nEn premier lieu, nous avons besoin d'installer une police spéciale qui va nous permettre de voir des **icônes** et des **indicateurs** dans le terminal. Commencez par ouvrir votre terminal et entrez la commande suivante.\n\n```bash Terminal\nsudo apt-get install zsh powerline fonts-powerline git curl -y\n```\n\n- [`zsh`](https://doc.ubuntu-fr.org/zsh) est l'interpréteur de commandes (**shell**) que nous allons utiliser\n- [`powerline`](https://github.com/powerline/powerline) est un plugin pour notre terminal. C'est lui qui affiche les icônes de la branche active dans Git, de la version de PHP, etc\n- [`fonts-powerline`](https://github.com/powerline/fonts) est un repository possédant une trentaine de polices de terminal (avec icônes)\n- [`git`](https://git-scm.com/) est un outil de versionning que nous allons utiliser pour installer le thème\n- [`curl`](https://curl.se/) est un outil qui nous permet de télécharger des fichiers depuis le web\n- [`-y`](https://askubuntu.com/a/672893) est un paramètre qui demande à Ubuntu de ne pas nous embêter à confirmer l'installation des paquets.\n\n### 2. Mettre à jour les paquets\n\nNous allons mettre à jour les paquets pour installer leur dernière version. Pour cela, entrez la commande suivante.\n\n```bash Terminal\nsudo apt-get update && sudo apt full-upgrade -y\n```\n\n### 3. Installer Oh My zsh\n\n[Oh My Zsh](https://ohmyz.sh/) est un framework qui va nous aider à configurer notre terminal. Il nous propose plus de **275** plugins et de nombreux thèmes. Pour l'installer, il suffit de lancer la [commande suivante](https://ohmyz.sh/#install) dans le terminal.\n\n```bash Terminal\nsh -c \"$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)\"\n```\n\nAprès l'installation, **ZSH** nous demande si on accepte d'en faire notre terminal par défaut. Après avoir répondu, il nous affiche un beau message de confirmation d'installation. Essayez de fermer votre terminel et de le rouvrir, vous verrez qu'il a bien changé 😄 .\n\n![Invité de commande (terminal) affichant un message de succès de l'installation de Oh My Zsh](https://algomax-public.s3.eu-west-3.amazonaws.com/ohmyzsh_successful_install_ce06ca98a4.jpg)\n\n### 4. Comprendre le fichier de configuration\n\nPassons maintenant à un peu de configuration ! Notre terminal est beau, mais il n'est pas plus pratique pour autant. Nous allons maintenant modifier le fichier de configuration `~/.zshrc`, qui se trouve à la racine de votre dossier utilisateur. Pour l'ouvrir, il suffit de lancer la commande suivante. Je vous conseille d'utiliser `sudo` pour être sûr de pouvoir le sauvegarder.\n\n```bash Terminal\nsudo nano ~/.zshrc\n```\n\nOn se retrouve avec un fichier contenant beaucoup de lignes ! **ZSH** est très configurable, et nous avons beaucoup de lignes commentées en bleu, préfixées par `#`. Ce sont des exemples de syntaxes à titre indicatif pour nous indiquer les possibilités de configuration. Personnellement, je trouve que c'est illisible. J'ai supprimé tous les commentaires pour ne conserver que l'essentiel.\n\n![Configuration du fichier zshrc. Beaucoup de lignes s'y retrouvent et il est simple de s'y perdre](https://algomax-public.s3.eu-west-3.amazonaws.com/zshrc_configuration_63f1d5a8f9.jpg)\n\nVoici les lignes qui restent après nettoyage :\n\n```bash Terminal\nexport ZSH=\"$HOME/.oh-my-zsh\"\nZSH_THEME=\"robbyrussell\"\nplugins=(git)\nsource $ZSH/oh-my-zsh.sh\n```\n\n- La première ligne permet d'exporter une variable d'environnement, contenant le chemin vers la configuration de **ZSH**.\n- La deuxième ligne permet de configurer le thème. Cependant ce n'est pas le thème robbyrussell qui est actif actuellement.\n- La troisième ligne permet de configurer une liste de plugins. C'est la partie qui nous intéresse car nous allons en rajouter trois.\n- La dernière ligne permet de charger la configuration de **ZSH**.\n\nOn sauvegarde la modification d'un fichier édité avec `nano` avec les touches `Ctrl + X`. L'éditeur nous demande si l'on souhaite sauvegarder, et nous répondons par Oui `Y` ou Non `N`, puis `Entrée`. On peut également annuler une modification avec `Ctrl + C`.\n\nMaintenant, nous allons installer le thème `starship` ainsi que quelques plugins et nous pourrons profiter d'un terminal très efficace !\n\n### 5. Installer le thème starship\n\n[Starship](https://starship.rs/) est un thème pour **ZSH** qui propose une **barre de statut** avec des informations sur la branche Git, la version de PHP et plein de trucs sympa ! Nous allons donc l'installer avec la commande suivante.\n\n```bash Terminal\ncurl -sS https://starship.rs/install.sh | sh\n```\n\n**Starship** nous demande de valider l'installation avec `Y` ou `N`. Après avoir répondu, il nous affiche un beau message de confirmation d'installation. Nous allons maintenant configurer notre terminal pour qu'il utilise ce thème.\n\n```bash Terminal\nsudo nano ~/.zshrc\n```\n\nNous rajoutons la ligne `eval \"$(starship init zsh)\"` à la fin du fichier `~/.zshrc`. Regardons à quoi il ressemble :\n\n```bash Terminal\nexport ZSH=\"$HOME/.oh-my-zsh\"\nZSH_THEME=\"robbyrussell\"\nplugins=(git)\nsource $ZSH/oh-my-zsh.sh\n\neval \"$(starship init zsh)\"\n```\n\n### 6. Installer les plugins d'autocomplétion et de correction\n\nPassons donc à la pratique en installant les plugins suivants :\n\n#### zsh-autosuggestions\n\nCe [plugin](https://github.com/zsh-users/zsh-autosuggestions) nous affiche des suggestions de commande en fonction de ce que nous avons déjà tapé. C'est très pratique pour éviter de retaper des commandes déjà saisies. Il suffit d'avoir une suggestion de d'appuyer sur → (flèche de droite) pour saisir la commande.\n\nLa commande suivante permet de l'installer au sein du dossier plugins de notre configuration `oh-my-zsh`.\n\n```bash Terminal\ngit clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions\n```\n\n#### zsh-completions\n\nJe n'ai pas réussi à comprendre le but de ce [plugin](https://github.com/zsh-users/zsh-completions), que je télécharge pourtant à chaque fois que je configure un nouveau terminal. Il permet d'ajouter des complétions de commandes supplémentaires.\n\n```bash Terminal\ngit clone https://github.com/zsh-users/zsh-completions ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-completions\n```\n\n#### zsh-syntax-highlighting\n\nCe [plugin](https://github.com/zsh-users/zsh-syntax-highlighting) permet de colorer nos commandes en fonction de leur syntaxe. Si tu entres une commande erronée, elle sera colorée en rouge. Cela te permet de ne pas l'exécuter et de la corriger avant de la lancer.\n\n![Exemple de coloration de commande en rouge pour une commande erronée, en vert pour une commande valide](https://algomax-public.s3.eu-west-3.amazonaws.com/zsh_syntax_highlighting_7711c8cb0f.jpg)\nInstallons ce dernier plugin et nous serons enfin prêts.\n\n```bash Terminal\ngit clone https://github.com/zsh-users/zsh-syntax-highlighting ${ZSH_CUSTOM:=~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting\n```\n\n#### Modifier la configuration\n\nMaintenant, nous allons ouvrir à nouveau notre fichier de configuration `~/.zshrc` pour lui demander d'exécuter chacun de nos plugins quand il se lance.\n\n```bash Terminal\nsudo nano ~/.zshrc\n```\n\nEt nous y collons le nom des trois nouveaux plugins.\n\n```bash Terminal\nexport ZSH=\"$HOME/.oh-my-zsh\"\nZSH_THEME=\"robbyrussell\"\nplugins=(\ngit\nzsh-autosuggestions\nzsh-completions\nzsh-syntax-highlighting\n)\n\nsource $ZSH/oh-my-zsh.sh\n\neval \"$(starship init zsh)\"\n```\n\nIl suffit à présent de redémarrer le terminal pour que les modifications soient prises en compte.\n\n```bash Terminal\nsource ~/.zshrc\n```\n\n### Conclusion\n\nNous venons de configurer un terminal **surpuissant**. Bonne chance pour vos développements !",[276,277],{"_24":46,"_26":47},{"_24":86,"_26":87},{"_24":116,"_51":117},{"_55":280},118,{"_59":282,"_61":283,"_63":284,"_65":285},"8 min read",7.42,445200,1484,{"_69":287,"_71":270,"_73":288,"_75":289},"https://algomax-public.s3.eu-west-3.amazonaws.com/b5827e0e-b5a6-485d-8fdd-5568a9884e2d.gif?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAVPNRXAVVQGI3HZAS%2F20250626%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20250626T235309Z&X-Amz-Expires=3600&X-Amz-Signature=1f4ae814f64f63408c0f3507d2211c54ad11eb84c875ba2d69c00269c6b6e0aa&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",1526,956,{"_131":291,"_133":292,"_134":291,"_136":137},4,10,[294,295,297,299,301,303,305,307,309,311],{"_24":140,"_26":141,"_28":142,"_143":-5},{"_24":145,"_26":146,"_28":147,"_143":296},{"_24":149,"_69":150,"_71":146},{"_24":40,"_26":41,"_28":152,"_143":298},{"_24":154,"_69":155,"_71":152},{"_24":157,"_26":158,"_28":159,"_143":300},{"_24":161,"_69":162,"_71":158},{"_24":43,"_26":44,"_28":164,"_143":302},{"_24":166,"_69":167,"_71":44},{"_24":109,"_26":110,"_28":169,"_143":304},{"_24":171,"_69":172,"_71":173},{"_24":46,"_26":47,"_28":175,"_143":306},{"_24":177,"_69":178,"_71":47},{"_24":113,"_26":114,"_28":180,"_143":308},{"_24":182,"_69":183,"_71":114},{"_24":185,"_26":186,"_28":187,"_143":310},{"_24":189,"_69":190,"_71":187},{"_24":86,"_26":87,"_28":192,"_143":312},{"_24":194,"_69":195,"_71":196},"href","https://algomax.fr/blog?page=4","actionData","errors"]