https://algomax.fr/blog/ces-6-nouveautes-vont-te-plaire-tailwind-v4-million-lint-payload-cms-tanstack-remix https://i.ytimg.com/vi/y-hptYWZUyI/maxresdefault.jpg Ces 6 nouveautés vont te plaire ! Tailwind v4, Million Lint, Payload CMS, Tanstack, Remix ... Beaucoup d'annonces ont été faites cette semaine, et plein d'outils intéressants vont être mis à jour. Par exemple la version 4 de Tailwind CSS qui est très attendue, avec son nouveau parser très rapide Lightning CSS (qui utilise Rust). Million Lint est une nouvelle extension qui va te permettre d'optimiser ton code React. Elle est en bêta et déjà disponible ! Payload CMS propose une version 3, entièrement intégrée à NextJS. Cela nous évite d'avoir à instantier un nouveau projet, uniquement pour faire un CMS. (tu l'utilises comme un plugin NextJS, côté front). Shadcn-UI nous propose plusieurs nouveaux composants ! TanStack Start est le framework de Tanner Linsley, auteur de React-Query et de plein d'autres librairies. J'ai hâte de tester son framework full-typesafe. Et enfin, Remix travaille activement sur une version des React Server Components ! 00:00:00 TailwindCSS v4 00:01:17 Million Lint 00:03:08 Payload CMS v3 00:04:44 Shadcn-UI nouveaux composants 00:05:20 TanStack Start (nouveau framework React) 00:05:55 Remix React Server Components (soon) --- Autres contenus Déploie tes projets Javascript sur un VPS https://youtu.be/SfTfRPAR50c Développe 2X plus vite avec cette stack Remix https://www.youtube.com/watch?v=yv96ar6XNnU&list=PL2TfCPpDwZVTQr3Ox9KT0Ex2D-QajUyhM&index=1 BiomeJS, l'outil qui optimise ton code https://youtu.be/Ln3rpyhVpZs --- Contenu Remix Comment héberger des fichiers avec Remix ? https://youtu.be/c7nLBwfg_K8 Comment valider un formulaire full-typesafe ? https://youtu.be/_-ZOGj80TMw Comment fonctionne le routing ? https://youtu.be/TOMMXhgUQfI Contenus exclusifs : https://dub.sh/algomax Newsletter : https://algomax.fr/newsletter --- Nos réseaux Twitter : https://link.algomax.fr/twitter LinkedIn : https://link.algomax.fr/linkedin YouTube : https://link.algomax.fr/youtube Instagram : https://link.algomax.fr/insta Facebook : https://link.algomax.fr/fb https://www.youtube.com/watch?v=y-hptYWZUyI https://www.youtube.com/embed/y-hptYWZUyI 2024-03-07T07:58:43.000Z yes no no web mobile tv https://algomax.fr/blog/heberge-des-fichiers-avec-remix https://i.ytimg.com/vi/c7nLBwfg_K8/maxresdefault.jpg Comment héberger des fichiers avec Remix | Guide Comment implémenter l'hébergement de fichiers avec le framework Remix ? On implémente ensemble un formulaire 'POST' permettant de choisir une image, une vidéo ou tout type de fichier. Ensuite, nous validons le formulaire côté serveur en récupérant le formData. On utilise deux upload handler de Remix : unstable_createFileUploadHandler (sauvegarder le fichier sur disque) et unstable_createMemoryUploadHandler (sauvegarder le fichier dans la mémoire). Nous utilisons également Zod et Conform pour valider les données et gérer les erreurs. Enfin, nous utilisons les librairies natives 'path' et 'fs' pour servir le fichier. On utilise aussi la librairie 'mime' pour récupérer le 'mimetype' du fichier sélectionné. 00:00:26 Nouveau projet Remix 00:01:08 Implémentation du formulaire 00:04:10 Ajouter un upload handler 00:05:07 unstable_parseMultipartFormData 00:05:27 unstable_createFileUploadHandler 00:06:37 unstable_createMemoryUploadHandler 00:07:34 Validation avec Zod 00:08:42 Gestion des erreurs avec Conform 00:09:52 Consulter les fichiers hébergés 00:11:43 Utilisation des librairies path et fs 00:13:27 Servir tout type de fichier (mimetype) --- Autres contenus Déploie tes projets Javascript sur un VPS https://youtu.be/SfTfRPAR50c Développe 2X plus vite avec cette stack Remix https://www.youtube.com/watch?v=yv96ar6XNnU&list=PL2TfCPpDwZVTQr3Ox9KT0Ex2D-QajUyhM&index=1 BiomeJS, l'outil qui optimise ton code https://youtu.be/Ln3rpyhVpZs --- Contenu Remix Comment valider un formulaire full-typesafe ? https://youtu.be/_-ZOGj80TMw Comment fonctionne le routing ? https://youtu.be/TOMMXhgUQfI Contenus exclusifs : https://dub.sh/algomax Newsletter : https://algomax.fr/newsletter --- Nos réseaux Twitter : https://link.algomax.fr/twitter LinkedIn : https://link.algomax.fr/linkedin YouTube : https://link.algomax.fr/youtube Instagram : https://link.algomax.fr/insta Facebook : https://link.algomax.fr/fb https://www.youtube.com/watch?v=c7nLBwfg_K8 https://www.youtube.com/embed/c7nLBwfg_K8 2024-02-21T07:49:51.000Z yes no no web mobile tv https://algomax.fr/blog/les-6-routes-a-connaitre-avec-le-framework-remix-framework-react https://i.ytimg.com/vi/TOMMXhgUQfI/maxresdefault.jpg Routing avec le framework Remix : Guide complet Remix est un framework de React qui permet de développer des applications web full-stack. Son routing est très puissant. Il suffit de créer un fichier dans le dossier routes pour créer une route API ou une vue. Remix permet aussi de faire du Rendu Côté Serveur (SSR). 00:00:00 Introduction 00:02:03 Installation du projet 00:02:48 Analyse du projet Remix 00:05:11 1/ Route basique 00:12:22 2/ Route dynamique 00:18:30 3/ Route imbriquée 00:22:46 4/ Route Layout 00:26:05 5/ Route ressource (JSON, PDF, image...) 00:30:08 Route 404 00:31:09 Bonus : Extension Remix Forge --- Autres contenus Déploie tes projets Javascript sur un VPS https://youtu.be/SfTfRPAR50c Développe 2X plus vite avec cette stack Remix https://www.youtube.com/watch?v=yv96ar6XNnU&list=PL2TfCPpDwZVTQr3Ox9KT0Ex2D-QajUyhM&index=1 BiomeJS, l'outil qui optimise ton code https://youtu.be/Ln3rpyhVpZs --- Contenu Remix Comment héberger des fichiers avec Remix ? https://youtu.be/c7nLBwfg_K8 Comment valider un formulaire full-typesafe ? https://youtu.be/_-ZOGj80TMw Contenus exclusifs : https://dub.sh/algomax Newsletter : https://algomax.fr/newsletter --- Nos réseaux Twitter : https://link.algomax.fr/twitter LinkedIn : https://link.algomax.fr/linkedin YouTube : https://link.algomax.fr/youtube Instagram : https://link.algomax.fr/insta Facebook : https://link.algomax.fr/fb https://www.youtube.com/watch?v=TOMMXhgUQfI https://www.youtube.com/embed/TOMMXhgUQfI 2024-02-08T11:46:02.000Z yes no no web mobile tv https://algomax.fr/blog/les-10-meilleurs-hooks-avec-react-router-7-anciennement-remix https://i.ytimg.com/vi/0q0qmWJyTzA/maxresdefault.jpg Migre ton app Remix vers React Router 7 ! React Router 7 est la nouvelle version du framework @Remix-Run . À partir de maintenant et jusqu'à nouvel ordre, la librairie @Remix-Run ne sera plus maintenue, en faveur de React Router. Découvre comment mettre ton projet à jour dans cette vidéo. Qu'as-tu à gagner ? Beaucoup de nouvelles fonctionnalités : routes typées, RSCs, streaming et optimisations diverses... Nous attendons l'arrivée de React 19, et de Vite 6 pour bénéficier d'une expérience développeur exceptionnelle. Documentation officielle : https://reactrouter.com/home Guide de migration Remix : https://reactrouter.com/upgrading/remix --- Deals -10% sur l'abonnement mensuel Strapi Cloud avec le code ALGOMAX : https://dub.sh/strapi-deal -10% aux VPS Hostinger (lien affilié) : https://www.hostinger.fr/algomax (12 mois d'engagement min) ou avec le code ALGOMAX --- Formation Remix & NestJS Support écrit : https://algomax.fr/formations/developpe-une-application-de-mise-en-relation-avec-remix-js-nest-js-typescript-turborepo Partie 1 : https://www.youtube.com/watch?v=yv96ar6XNnU&list=PL2TfCPpDwZVTQr3Ox9KT0Ex2D-QajUyhM&index=1 --- Autres contenus Déploie tes projets Javascript sur un VPS https://youtu.be/SfTfRPAR50c Développe 2X plus vite avec cette stack Remix https://www.youtube.com/watch?v=yv96ar6XNnU&list=PL2TfCPpDwZVTQr3Ox9KT0Ex2D-QajUyhM&index=1 BiomeJS, l'outil qui optimise ton code https://youtu.be/Ln3rpyhVpZs --- Contenu Remix Comment héberger des fichiers avec Remix ? https://youtu.be/c7nLBwfg_K8 Comment valider un formulaire full-typesafe ? https://youtu.be/_-ZOGj80TMw Comment fonctionne le routing ? https://youtu.be/TOMMXhgUQfI Contenus exclusifs : https://algomax.fr Newsletter : https://algomax.fr/newsletter --- Nos réseaux Twitter : https://link.algomax.fr/twitter LinkedIn : https://link.algomax.fr/linkedin YouTube : https://link.algomax.fr/youtube Instagram : https://link.algomax.fr/insta Facebook : https://link.algomax.fr/fb https://www.youtube.com/watch?v=0q0qmWJyTzA https://www.youtube.com/embed/0q0qmWJyTzA 2024-12-10T16:04:17.000Z yes no no web mobile tv https://algomax.fr/blog/comment-configurer-un-monorepo-avec-remix-nest-js-et-turborepo https://i.ytimg.com/vi/yv96ar6XNnU/maxresdefault.jpg Développe 2X plus VITE ! Remix, NestJS, Typescript, Turborepo | Formation Remix NestJS 2024 Profitez de -10% aux VPS Hostinger grâce à notre lien affilié : https://www.hostinger.fr/algomax (12 mois d'engagement min) ou utilisez le code promo ALGOMAX En 4 ans de développement, je n'ai pas encore trouvé une stack qui me plaît. Il y a toujours un élément qui manque (une fonctionnalité, ou une limitation technique). En tant que développeur fullstack, je souhaite bénéficier du meilleur des deux mondes. Je souhaite utiliser une technologie : - simple à utiliser - qui me permet d'implémenter une fonctionnalité rapidement - qui me permet d'avoir un contrôle total sur la logique, front comme back Remix répond à mes attentes. C'est un framework frontend qui me permet d'utiliser Javascript et React pour créer des sites web performants et ergonomiques. Ce framework est full-stack, signifiant que tu n'as pas besoin de configurer un serveur pour ajouter une logique backend. Tu peux appeler une base de donnée, intégrer l'authentification, et plein d'autres fonctionnalités. Cependant, il n'a pas suffisamment de maturité. Il manque plein de features, comme les middleware (qui sont très utiles pour ne pas recopier la même logique de protection des routes) J'utilisais donc NestJS comme serveur séparé jusqu'à présent. Ce framework Node.JS m'a permi d'utiliser Javascript pour configurer une base de donnée, des routes et toute ma logique métier. Ensuite, j'appelle chaque route dans Remix. Mais c'est sujet à beaucoup d'erreurs d'inattention, ou de perte de synchronisation. J'informe Remix des réponses API de NestJS en déclarant un schéma Zod, qui peut être erroné, et générer des erreurs. Je perd donc pas mal de temps à : - déclarer des schémas Zod - réparer des bugs, erreurs d'inattention - déclarer des méthodes pour appeler mes routes MAIS c'est terminé ! J'ai découvert une stack qui me permet d'intégrer ce serveur NestJS avec Remix. Cela remplace le serveur de Remix (celui qui faisait les appels à NestJS) par le serveur NestJS, directement. Voici les avantages : - aucune duplication de code - aucun schéma zod - https://www.youtube.com/watch?v=yv96ar6XNnU https://www.youtube.com/embed/yv96ar6XNnU 2024-03-25T07:51:03.000Z yes no no web mobile tv https://algomax.fr/blog/comment-gerer-les-erreurs-avec-remix-error-boundary https://i.ytimg.com/vi/ZcOywCf4shU/maxresdefault.jpg Comment gérer les erreurs avec Remix ? Avoir des erreurs Javascript ne fait jamais plaisir. Surtout quand elles sont en prod, et que tes clients les découvrent. Tu perds de la crédibilité. Pour sauver l'honneur, il existe un composant magique nommé ErrorBoundary. (similaire à la librairie React, tu peux l'utiliser peu importe le framework) Dans ce guide, je vais te montrer comment tu peux afficher un composant d'erreur personnalisé en 5 minutes, pour protéger toutes les pages de ton application. 00:00:00 Afficher le composant ErrorBoundary 00:08:49 Gérer les erreurs 404 + bonus 00:12:38 Gérer les erreurs globales --- Formation Remix & NestJS Support écrit : https://dub.sh/remix-plus-nestjs Partie 1 : https://www.youtube.com/watch?v=yv96ar6XNnU&list=PL2TfCPpDwZVTQr3Ox9KT0Ex2D-QajUyhM&index=1 Partie 2 : https://www.youtube.com/watch?v=KCMFcHTYf9o&list=PL2TfCPpDwZVTQr3Ox9KT0Ex2D-QajUyhM&index=2 Partie 3 : https://www.youtube.com/watch?v=GWfZewdFx4o&list=PL2TfCPpDwZVTQr3Ox9KT0Ex2D-QajUyhM&index=3 Partie 4 : https://www.youtube.com/watch?v=SyuXRIbECEY&list=PL2TfCPpDwZVTQr3Ox9KT0Ex2D-QajUyhM&index=4 Partie 5 : https://www.youtube.com/watch?v=k6KrmuVgvec&list=PL2TfCPpDwZVTQr3Ox9KT0Ex2D-QajUyhM&index=5 --- Autres contenus Déploie tes projets Javascript sur un VPS https://youtu.be/SfTfRPAR50c Développe 2X plus vite avec cette stack Remix https://www.youtube.com/watch?v=yv96ar6XNnU&list=PL2TfCPpDwZVTQr3Ox9KT0Ex2D-QajUyhM&index=1 BiomeJS, l'outil qui optimise ton code https://youtu.be/Ln3rpyhVpZs --- Contenu Remix Comment héberger des fichiers avec Remix ? https://youtu.be/c7nLBwfg_K8 Comment valider un formulaire full-typesafe ? https://youtu.be/_-ZOGj80TMw Comment fonctionne le routing ? https://youtu.be/TOMMXhgUQfI Cette stack utilise les technologies suivantes : - Remix https://remix.run - React https://react.dev - NestJS https://nestjs.com - Turborepo https://turbo.build - TailwindCSS https://tailwindcss.com - ShadcnUI https://ui.shadcn.com - Prisma ORM https://www.prisma.io - Typescript https://www.typescriptlang.org - Github Actions https://git https://www.youtube.com/watch?v=ZcOywCf4shU https://www.youtube.com/embed/ZcOywCf4shU 2024-04-29T16:20:16.000Z yes no no web mobile tv https://algomax.fr/blog/remplace-eslint-et-prettier-avec-biome-js-un-outil-d-analyse-de-code-tres-rapide https://i.ytimg.com/vi/Ln3rpyhVpZs/maxresdefault.jpg Cet outil AMÉLIORE la qualité de ton code ! (adieu Eslint ) Découvre l'outil d'analyse de code BiomeJS, qui va détecter les erreurs dans ton code très rapidement. Il est développé en Rust, et va remplacer les outils Prettier et Eslint, te permettant d'utiliser un seul fichier de configuration simplifié. Prettier et Eslint sont téléchargés plus de 33 millions de fois par semaine sur NPM. Ce sont la référence des outils d'analyse de code. Alors pourquoi changer ? Parce que BiomeJS est plus simple à configurer. Si tu veux ajouter une règle spéciale dans une configuration Eslint, tu vas devoir télécharger un plugin, et l'ajouter dans le fichier au bon endroit. C'est pas déconnant d'avoir une application web avec 8 plugins Eslint. BiomeJS change la donne. Une seule configuration, une seule dépendance, et une seule extension. Beaucoup plus rapide. Découvre les suggestions que BiomeJS me fait pour améliorer le code d'un de mes projets dans cette vidéo. BiomeJS https://biomejs.dev Documentation https://biomejs.dev/guides/getting-started L'article de blog https://www.simondepelchin.be/articles/replace-eslint-prettier-with-biome 00:00:00 Introduction 00:01:17 Configuration 00:07:42 Test des fonctionnalités 00:11:53 Découverte de la documentation --- Autres contenus Déploie tes projets Javascript sur un VPS https://youtu.be/SfTfRPAR50c Développe 2X plus vite avec cette stack Remix https://www.youtube.com/watch?v=yv96ar6XNnU&list=PL2TfCPpDwZVTQr3Ox9KT0Ex2D-QajUyhM&index=1 BiomeJS, l'outil qui optimise ton code https://youtu.be/Ln3rpyhVpZs --- Contenu Remix Comment héberger des fichiers avec Remix ? https://youtu.be/c7nLBwfg_K8 Comment valider un formulaire full-typesafe ? https://youtu.be/_-ZOGj80TMw Comment fonctionne le routing ? https://youtu.be/TOMMXhgUQfI Abonne-toi à la newsletter : https://algomax.fr/newsletter Contenus exclusifs : https://dub.sh/algomax --- Nos réseaux Twitter : https://link.algomax.fr/twitter LinkedIn : https://link.algomax.fr/linkedin YouTube : https://link.algomax.fr/youtube Instagram : https://link.algomax.fr/insta Facebook : https://lin https://www.youtube.com/watch?v=Ln3rpyhVpZs https://www.youtube.com/embed/Ln3rpyhVpZs 2024-03-29T07:45:05.000Z yes no no web mobile tv https://algomax.fr/blog/creer-une-application-saas-le-guide-pratique-pour-fondateurs https://i.ytimg.com/vi/uMKhYFjKeqU/maxresdefault.jpg Apprends à créer ton SaaS de A à Z avec Remix et NestJS (9h30 de formation complète) 🎁 Tente de gagner la formation React Router 7 (-65) → https://dripl.ink/7cAtR 🚀 Apprends à créer une application SaaS complète avec Remix, NestJS et Docker. Pendant plus de 9 h 30, je te montre pas à pas comment j’ai construit une vraie app fullstack moderne, avec authentification, base de données, déploiement Docker et CI/CD. 🧭 Dans cette vidéo tu verras : - Comment configurer un monorepo Remix + NestJS - La mise en place de Docker, CI/CD et déploiement sur VPS - L’intégration de Tailwind, Shadcn-UI et Prisma - La création d’une authentification complète avec Redis et Passport.js - Comment connecter une base de données PostgreSQL avec Prisma - Et la construction d’un SaaS complet, du front à la prod Code source: https://github.com/varkoff/remix-nestjs-monorepo/ 💸 Deals et Bonus 🎁 –65 % avec le code REMIXJAM https://dripl.ink/7cAtR 🖥️ –10 % sur Hostinger VPS → https://dripl.ink/MYAq1 0:00 Introduction 1:18 Configuration du projet 2:16 Génération du projet NestJS 3:04 Remix Controller 6:55 Configuration du projet Remix 13:51 Configuration du monorepo 23:10 Lancer Remix depuis NestJS 25:12 Configurer Typescript et Eslint 31:10 Création d'une route Remix 32:45 Remix Service 33:45 Typer NestJS dans Remix 36:48 Déclarer les modules dans Remix 41:38 Configuration Turborepo 56:46 Héberger le code sur Github 1:02:36 Création de l'image Docker (Dockerfile) 1:12:18 .dockerignore 1:13:10 Docker build et corrections 1:15:56 docker-compose.yml 1:17:21 Dockerhub 1:17:54 Github Actions 1:25:01 Le projet tourne en local (dans Docker) 1:25:26 On teste la CI/CD 1:26:36 Configuration du Serveur VPS 1:37:51 Configuration du DNS (nom de domaine) 1:39:56 On corrige un problème de permissions 1:43:04 TailwindCSS 1:52:29 Intégration de la maquette Figma 1:56:04 Shadcn-UI 2:04:54 Layout Remix 2:08:54 Ajout du Footer 2:14:54 Démarrer le projet (auth) 2:15:51 Passport.js 2:37:11 Express-session 2:39:33 Connecter Redis 2:59:31 Logique de connexion 3:03:47 Création de la route login dans Remix 3:07:07 Installer body-parser 3:08 https://www.youtube.com/watch?v=uMKhYFjKeqU https://www.youtube.com/embed/uMKhYFjKeqU 2025-10-21T16:41:10.000Z yes no no web mobile tv