Post de Colibri

Je travaille actuellement sur le futur Style Guide de Webstudio avec l'équipe et la communauté et tu peux participer 👇 Quel est le but ? Proposer à la communauté de designers et développeurs un Style Guide cohérent pour permettre à toutes celles et ceux qui veulent développer leur frontend avec ce magnifique outil (no code) de le faire dans les meilleures conditions avec les meilleures pratiques. ----- Au programme de ce document : - Naming des tokens - Naming des CSS Variables - Naming des Components - Naming et Structure des éléments dans la Navigator Et tous les autres points qui serviront à construire un Style Guide cohérent et pertinent. ----- Pourquoi j'y participe ? - En tant qu'expert sur cet outil qui me passionne depuis des mois, je crois qu'il est important de partager des bonnes pratiques pour construire des frontends de qualité ; - C’est un exercice exigeant qui mérite de bien connaître l'outil et l’écosystème HTML / CSS. C'est donc un bon moyen de se plonger dedans, de progresser et d'anticiper les évolutions à venir pour en être un acteur de premier plan. - C'est un excellent moyen d'échanger avec la communauté et de continuer de la fédérer ! ----- 👉 Pour y participer, c'est très simple, il suffit de participer à la discussion ici : https://lnkd.in/e8s6jj5u ----- 👋 Si tu ne me connais pas, je suis Milan Boisgard, expert Webstudio et passionné de la solution depuis la 1ère heure. Si tu as des projets de créer des sites web / apps avec Webstudio pour tes projets ou tes équipes, on en parle en MP :-)

Draw.io dans VS Code, un véritable game changer.🤩🤩 Vous savez à quel point il peut être fastidieux de devoir constamment naviguer entre votre IDE et un outil tiers en ligne pour créer des diagrammes et schémas. C'est pourquoi l'extension Draw.io pour Visual Studio Code est un véritable game changer ! 🤯 Plus besoin de quitter votre environnement de développement pour créer facilement des schémas de bases de données relationnelles, dessiner des architectural diagrams, des user flows, des wireframes ou tout autre type de diagramme. Tout est désormais centralisé au sein de votre éditeur de code préféré ! 🎉 Avec Draw.io intégré, vous gagnez un temps précieux et optimisez votre flux de travail. Fini les allers-retours incessants entre plusieurs applications ! Créez, modifiez et partagez vos figures directement depuis VS Code. L'efficacité à l'état pur ! 🚀 Alors n'attendez plus et rendez votre expérience de développement encore plus fluide avec Draw.io ! 🙌 Likez, partagez et ajoutez vos astuces dans les commentaires ! L'entraide fait la force de notre communauté. 🧑🤝🧑 #DeveloperTips #ProductivityHacks #VSCodeExtensions #DrawIO #EfficacyAtItsBest

👨🏿💻Figma to Code Challenge Week 1 : Développement d'une landing page pour une plate-forme de services NFT Liens vers les ressources du challenge. Maquette Figma https://lnkd.in/exbjQBHm Un aperçu de mon travail https://lnkd.in/ePC-SQ5u Technologies et Outils utilisés : 🛠️🔧 - Html - Css - Javascript - Git / Github 💡Ce challenge m'a permis de perfectionner mes compétences, d'apprendre de nouvelles pratiques et de rejoindre une communauté de développeurs passionnés. ✨N'hésitez pas à me faire part de vos retours sur ce travail. Merci d'avance et à très vite pour le prochain défi !👋🏿 #FigmaToCodeChallenge #WebDevelopment #FrontEndDeveloper #NFT #LandingPage

🎉 Présentation projet perso : Markdownify ! 🚀 Je suis ravi de partager mon projet, Markdownify, un éditeur Markdown en ligne conçu pour simplifier la création de documents formatés. 👉 Qu'est-ce que Markdownify ? C'est un outil simple et intuitif qui permet : d'écrire en Markdown dans un environnement ergonomique 📝, de visualiser instantanément le rendu formaté en temps réel 👀. L'idée derrière ce projet était de rendre l'écriture en Markdown accessible et agréable, même pour ceux qui ne sont pas familiers avec cette syntaxe. 💡 Travailler sur ce projet m'a permis de renforcer mes compétences en React et TypeScript et de relever le défi de combiner simplicité et performance. Si vous utilisez déjà Markdown, pensez-vous que ce type d'outil peut vous être utile ?

Le Style Guide officiel de la communauté Webstudio arrive et je suis très fier d'y participer et d'aider cette belle communauté ! Hier, j'ai passé une partie de la journée à implémenter le dark mode sur le Style Guide afin que ça soit possible de l'implémenter sur vos projets. Le but de ce Style Guide est de vous donner un point de départ (que vous pouvez personnaliser) pour vos projets web sur Webstudio. Le Style Guide est encore en version bêta, mais va être proposé très prochainement. Lorsque vous démarrez un projet, vous pourrez donc : 1/ Intégrer toutes les variables Open Props à votre projet en 1 clic ; 2/ Démarrer avec un Style Guide professionnel validé par la communauté. Le petit nom de ce Style Guide ? "Craft" 😊 Les points d'améliorations à faire : - Améliorer le design du style guide - Sur le dark mode quand light-dark() sera implémenté, faire les modifications nécessaires - probablement faire le ménage sur Open Props pour ne pas importer toutes les variables (notamment de couleur) - J'ai ajouté quelques variables supplémentaires qui n'étaient pas présents sur Open Props (à documenter) ------ 👋 Salut, je suis Milan Boisgard, expert Webstudio et j'implémente cet outil sur tous tes projets front (LP, site web, web app...). Une question ou un projet ? Mes DM sont ouverts.

Série : KNPHACKATHON TOY PROJECT ! 🎉💻 Deuxième épisode (et pas des moindres) de notre nouvelle série sur les Toy Projects de notre KNPHackathon. 🚀 KNP HOT Tools 🔥 Cette fois-ci, c’est une grande brochette de développeurs qui se sont attelés à un projet interne… Le KNP HOT Tools (l’outil le plus chaud de ta région) ! 🌍💡 L’objectif était de remplacer tous nos outils internes de suivi (exit Excel and CO) par une seule application centrale. 🛠️ L'application est construite avec Next.js et TypeScript, intégrant des actions serveur pour la gestion back-end. Un excellent exercice pour certains afin de bien comprendre et utiliser ce framework si populaire, et une initiation pour d'autres. 🧑💻 Le projet avait été bootstrap en amont par nos PO’s, aka Clément Vétillard  et Antoine GONZALEZ . Tout était donc prêt dès le début pour que l’équipe puisse produire massivement en quelques jours. ⏳💡 Entre Atomic Design System, découverte de Prisma, les problèmes d’autorisation Google pour le déploiement et le droplet, les wireframes, le design, Tailwind… Il y avait beaucoup de matière pour si peu de jours ! 🎨🔧 C’est pourquoi le projet est relancé en interne depuis peu, afin qu’il voie réellement le jour ! 🌱✨ La morale de cette histoire : Next.js, c’est bien. 💡 Pourquoi c’est bien, me diriez-vous ? 🤔 Next.js permet la réalisation d'une application fullstack, un peu comme avec notre Symfony national. Ce framework React nous permet de développer une application dynamique assez légère et rapide à mettre en place. ⚡ La team : 👨🎨 Le designer : Cédric 🎨 Notre team Front : R2, Léna, Léo 👨💻 La team Back : Swanoo, Flo, Tonio 🛠️ La team DevOps : Clément et Manon La stack : Next.js, TypeScript, Prisma, AuthJS, Digital Ocean #KNPHackathon #TechLife #NextJS #TypeScript #DevLife #TeamWork #FullStack #Innovation #KNPHotTools 🔥💻

✨ Démonstration avec Svelte - un compteur interactif avec des animations fluides https://buff.ly/4eGIA5r Hello à tous ! 👋 Aujourd’hui, je voulais partager un petit exemple pour vous donner une idée de ce à quoi ressemble le code en Svelte. Ce projet met en place un compteur interactif avec une animation fluide à chaque incrémentation et décrémentation. 🔍 Ce que cet exemple montre : • Transitions dynamiques : Grâce à l’animation fly et '{#key counter}', chaque intéraction est animée avec fluidité. • État réactif : Les variables counter et flyStep sont gérées de manière réactive avec $state, ce qui simplifie la gestion de l’état dans l’application. Quelles fonctionnalités ou démos aimeriez-vous voir en Svelte ? Je suis curieux de savoir ce qui vous intéresserait le plus ! N’hésitez pas à partager vos idées, questions ou suggestions. 😄 #Svelte #TypeScript #JavaScript #Frontend #WebDevelopment #SvelteKit

Figma to Code Challenge Week 1️⃣ : Création d'une landing page pour une plateforme NFT ! Quoi de mieux pour commencer mon aventure de créateur de contenu qu'un bon vieux challenge ? 😄 Je me suis lancé dans la deuxième édition du Figma to Code Challenge organisé par l'incroyable Taïrou Cissé. Un grand merci à lui pour nous offrir cette opportunité de nous dépasser, de progresser et de rencontrer d'autres passionnés du code. 🙌 Le principe est simple : 1 maquette, 5 jours, quelques litres de café ☕️, et des développeurs prêts à tout pour créer le site le plus stylé avec une codebase impeccable. Fidèle à moi-même, j'ai utilisé ma stack préférée : Next.js, TypeScript, et Tailwind. Pour ce premier défi, on a commencé doucement par un projet assez simple. J'ai bossé sur la reproduction d'une landing page pour une application NFT. Et spoiler : c'était intense, car la réelle difficulté était de rendre tout ça responsive. Mais j’y suis arrivé, ma détermination étant plus forte. 😅 Je vous partage ici les liens vers les ressources du challenge. N'hésitez pas à me donner vos impressions, vos idées d'amélioration et, soyons fous, une note sur 10 ! 📈 - La maquette: https://lnkd.in/ejKbdBuW - Ma prod: https://lnkd.in/ecTTKhEA - Mon code: https://lnkd.in/eDExSTzj Merci d'avoir lu jusqu'ici et à très vite pour le prochain défi ! 👋 #dev #FigmaToCode #webintegration #webdevelopment

🎉 Bonjour LinkedIn ! Ce mois-ci a été riche en projets, et j'ai hâte de vous partager quelques réalisations ! 🚀 👉 Portfolio 3D en cours de création : J'explore actuellement Threlte, une librairie qui fusionne Three.js et Svelte, pour concevoir un portfolio innovant en 3D. Ce projet est l'occasion parfaite de combiner mes compétences techniques avec ma passion pour la musique. En effet, ce portfolio sera également une vitrine pour mes créations musicales et mes démarches artistiques. 🎶✨ 👉 Boilerplate optimisé pour Svelte 5 & SvelteKit 2 : Restez connectés, un second post arrive bientôt pour vous présenter les nouveautés de mon boilerplate fullstack, revisité pour les toutes dernières versions de Svelte et SvelteKit. PS : Le portfolio est encore en phase de conception, donc il n'a pas été optimisé. Les performances peuvent être précaires pour le moment. Merci pour votre indulgence et votre curiosité ! 🙌 Merci de suivre mon parcours, et comme toujours, vos retours sont les bienvenus ! 😊 Demo Live: https://lnkd.in/enhxGEtC #WebDevelopment #3DPortfolio #Threlte #Threejs #Svelte #SvelteKit #FrontendDevelopment #FullstackDevelopment #JavaScript #TypeScript #TechInnovation #CreativeCoding #Boilerplate #WebPerformance #OpenSource #CodingJourney #3DDesign #WebGL #MusicProduction #DigitalArt #TechCommunity #DesignInspiration #WebDesign