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

🚀 Libérez la magie de l'animation de votre site avec AOS ! 🌌🔮 Je suis ravi de partager avec vous une astuce qui transformera l'expérience utilisateur de votre site : AOS - Animate On Scroll. ✨✨ Qu'est-ce que AOS ? AOS est une bibliothèque JavaScript légère et open source qui permet d'ajouter des animations fluides aux éléments au fur et à mesure qu'ils entrent dans le champ de vision de vos visiteurs. 🚀 Pourquoi l'utiliser sur votre site ? 🌍✨ Captivez vos visiteurs et faites de votre site une expérience inoubliable ! 🌌 Comment l'intégrer ? Rendez-vous sur GitHub pour télécharger le code source. Suivez le guide simple d'installation pour intégrer AOS. Personnalisez les animations selon vos préférences ! Les avantages : 🚀 Facile à intégrer : AOS s'adapte à tous les niveaux de compétence. 🎨 Personnalisable : Ajoutez votre touche personnelle aux animations. 🌌 Open Source : Contribuez à la communauté astro en partageant vos améliorations sur GitHub ! #WebDevelopment #AstroWebsite #AOS #OpenSource

Hello 📢 les amoureux du Code 👨💻 , Aujourd'hui nous sommes 𝗠𝗮𝗿𝗱𝗶 𝗧𝗲𝗰𝗵𝗻𝗼 nous partons encore à la découverte 🚶♂️ d'une nouvelle Techno. Découvrez Svelte, le framework réactif qui fait souffler un vent d'innovation sur le monde du développement web ! 𝗠𝗮𝗿𝗱𝗶 𝗧𝗲𝗰𝗵𝗻𝗼 c'est : 📌 𝗗𝗲́𝗳𝗶𝗻𝗶𝗿 𝗹𝗮 𝗧𝗲𝗰𝗵𝗻𝗼 📌 𝗟'𝗵𝗶𝘀𝘁𝗼𝗿𝗶𝗾𝘂𝗲 𝗱𝗲 𝗹𝗮 𝗧𝗲𝗰𝗵𝗻𝗼 📌 𝗟𝗲𝘀 𝗮𝘃𝗮𝗻𝘁𝗮𝗴𝗲𝘀 𝗱𝗲 𝗹𝗮 𝗧𝗲𝗰𝗵𝗻𝗼 📌 𝗟𝗲𝘀 𝗹𝗶𝗺𝗶𝘁𝗲𝘀 𝗱𝗲 𝗹𝗮 𝗧𝗲𝗰𝗵𝗻𝗼 📌 𝗟𝗲 𝗰𝗮𝗱𝗿𝗲 𝗱'𝘂𝘁𝗶𝗹𝗶𝘀𝗮𝘁𝗶𝗼𝗻 𝗱𝗲 𝗹𝗮 𝗧𝗲𝗰𝗵𝗻𝗼 Alors prêt 🤗 à découvrir Svelte, alors découvre le dans ces slides 👇 #Svelte #JavaScript #WebDevelopment #Innovation #Reactivity

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.

👨🏿💻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

Figma-to-code-challenge Week3 done 👍 Après s'être attaqués aux maquettes d'une seule page, nous avons cette fois-ci pris en main une maquette de plusieurs pages, trois ou quatre pour être précis. Pour cela, nous avons formé des binômes parmi les participants pour leur apprendre à collaborer ensemble sur un projet GitHub et à expérimenter le travail d'équipe. Comme à mon habitude, je me suis également prêté à l'exercice. Voici le résultat de mon travail : Lien démo: https://lnkd.in/eRuMN4VH Lien Github: https://lnkd.in/eb8aez8T J'ai hâte de connaître vos impressions sur mon travail 🤗. #FigmaToCodeChallenge #FrontEndDevelopment #CodeNewbie #DevCommunity

Salut les gars ! J'ai décidé aussi de participer au FigmaToCodeChallenge  😁. Je suis ravi de partager avec vous ma réalisation de cette semaine. J'ai relevé le défi de transformer une maquette Figma en une landing page. Ce fut une très belle expérience qui m'a permis de mettre en pratique mes compétences en développement front-end avec le framework Nuxt. J'ai également rencontrer quelques challenges comme le positionnement de certains éléments ! N'hésitez pas à visiter la démo et le code source : 👁️ Démo : https://lnkd.in/eYyCVH_x ▶️ Code GitHub : https://lnkd.in/emwkSKtM Je suis impatient de poursuivre ce challenge et de continuer à apprendre et à améliorer mes compétences en développement front-end. N'oubliez pas de suivre le hashtag. #FigmaToCodeChallenge pour découvrir les réalisations des autres participants ! #FigmaToCodeChallengeWeek1 #FigmaToCodeChallenge #FrontEndDevelopment #CodeNewbie

🚀 Nouvelle version de SandFalling : Plus fluide, plus rapide ! 💻✨ Bonjour à tous ! Je suis ravi de partager avec vous la dernière mise à jour de SandFalling ! 🌟 Cette nouvelle version représente un pas en avant dans mon parcours d'apprentissage en programmation web. 💡 En travaillant sur ce projet, j'ai exploré de nouveaux concepts, comme la manipulation de tableaux en 2D, qui m'ont permis d'améliorer considérablement la fluidité du jeu et d'augmenter la taille du canvas de 600 à 900 px. Ces ajustements ont donné à SandFalling une sensation de fluidité et de réactivité accrues, offrant ainsi une expérience plus immersive pour les joueurs. 🔥 Les cubes tombent maintenant avec une fluidité remarquable, créant une sensation de mouvement naturel et dynamique. De plus, j'ai pris la décision d'héberger SandFalling sur Netlify pour rendre le jeu encore plus accessible à tous. 👇 Cliquez sur le lien ci-dessous pour découvrir la nouvelle version de SandFalling : https://lnkd.in/ewyWVAtb J'espère que vous apprécierez ces améliorations autant que j'ai apprécié les explorer et les implémenter. N'hésitez pas à partager vos retours et vos idées pour continuer à faire évoluer ce projet ensemble ! #WebDev #CodeCreativity #JSProjects #CreativeCoding #InteractiveDesign #WebAnimation #FrontEndDev #OpenSourceProject #LearningToCode #HTML5Canvas #TechJourney #CodingCommunity #CodeLearning #ProgrammingProgress #WebDesignInspiration #DigitalArt #CodeArt #JavaScriptDevelopment #DevCommunity #NetlifyHosting

Hello 📢 les amoureux du code 👨💻 👩💻 , aujourd'hui nous sommes 𝗠𝗮𝗿𝗱𝗶 𝗧𝗲𝗰𝗵𝗻𝗼, nous partons encore à la découverte d'une nouvelle Techno. Découvrez Solid.js, le framework réactif qui va redéfinir vos attentes en matière de performances et de réactivité. Pour ceux qui ne connaissent pas, 𝗠𝗮𝗿𝗱𝗶 𝗧𝗲𝗰𝗵𝗻𝗼 c'est 👉 : 📌 𝗗𝗲́𝗳𝗶𝗻𝗶𝗿 𝗹𝗮 𝗧𝗲𝗰𝗵𝗻𝗼 📌 𝗟'𝗵𝗶𝘀𝘁𝗼𝗿𝗶𝗾𝘂𝗲 𝗱𝗲 𝗹𝗮 𝗧𝗲𝗰𝗵𝗻𝗼 📌 𝗟𝗲𝘀 𝗮𝘃𝗮𝗻𝘁𝗮𝗴𝗲𝘀 𝗱𝗲 𝗹𝗮 𝗧𝗲𝗰𝗵𝗻𝗼 📌 𝗟𝗲𝘀 𝗹𝗶𝗺𝗶𝘁𝗲𝘀 𝗱𝗲 𝗹𝗮 𝗧𝗲𝗰𝗵𝗻𝗼 📌 𝗟𝗲 𝗰𝗮𝗱𝗿𝗲 𝗱'𝘂𝘁𝗶𝗹𝗶𝘀𝗮𝘁𝗶𝗼𝗻 𝗱𝗲 𝗹𝗮 𝗧𝗲𝗰𝗵𝗻𝗼 Alors prêt 🤗 à découvrir Solid.js, découvre le dans ces slides 👇 #SolidJS #JavaScript #WebDevelopment #Innovation #Reactivity