Post de studiov2

This time, I tackled the mapping of classifications to IFC classes within Archicad's IFC translators. Although I still have a Claude subscription, I decided to try Perplexity for this task. Until now, I knew Perplexity mainly as an AI internet browser, praised for its source citation. So I was intrigued when I heard it could handle scripting quite well. And boy, does it deliver! It handled the Python script brilliantly! 🤓 If I had to highlight one minus and one plus: 👎 The downside is file upload limitations. It only takes PDF and TXT. Fortunately, that's not an issue for me since XML is essentially TXT... 👍 Two things surprised me. First, the speed. Unlike ChatGPT or Claude, which write code line by line, Perplexity just goes "blink" and the entire script appears in all its glory. Second advantage: somehow, I couldn't hit any limits in the free version. It handled everything I needed this time. For comparison, Chat GPT-4 (free version), which I was using simultaneously, also handled it well but needed a 24-hour break after a few prompts. Additionally, I was intrigued by Perplexity's newly announced Spaces for project collaboration. I've been experimenting a lot with Google's NotebookLM (which I'll cover in my ardit video next Wednesday), and Spaces looks very similar but with an added collaboration layer. We'll see once I get to try it on a real project with a team (meanwhile, I recommend checking it out). But back to Archicad. I used two strategies for the IFC translator scripts. First was building upon what I wrote about here last week - extending the XLSX table with IFC information for mapping individual classes. This proved somewhat complicated, so I eventually went with the tried-and-tested per partes approach. I fed Perplexity XML exported from existing IFC translators and had it generate XLSX. Within three prompts, it was exactly in the format I wanted. Then I used an inverse prompt in the same chat, having it generate a Python script to create XML based on the XLSX it already knew. It works. 😎 I might try GitHub soon. Stay tuned! 🤔 ...Right after I return from my Romanian mountains adventure (hopefully without any bear encounters)... 🧸😀 #ai #perplexity #archicad #ifc #ardit

🗂️ Astuce Nuxt.js : Optimisez l'organisation de vos composants ! 🚀 Aujourd'hui, je souhaite partager une approche efficace pour structurer les projets Nuxt.js, en mettant l'accent sur l'organisation des composants et des layouts. Une bonne structure peut grandement améliorer la maintenabilité et la lisibilité de vos projets. Voici quelques techniques particulièrement utiles : 1️⃣ Organisation des composants : Créez des sous-dossiers thématiques dans 'components/' : • ui/ pour les boutons, cartes, modales... • forms/ pour les formulaires spécifiques • etc. 2️⃣ Utilisation des layouts : Placez les layouts dans le dossier 'layouts/' 3️⃣ Profitez de l'auto-import de Nuxt : Nuxt importe automatiquement les composants et layouts. Fini les imports manuels fastidieux ! 4️⃣ Utilisez un nommage intuitif : Le composant 'components/ui/Button.vue' devient <UiButton /> dans vos templates. 💡 Astuce bonus : Pour les composants spécifiques à une page, créez un sous-dossier du même nom que la page dans 'components/'. Cette approche permet de : ✅ Garder des projets organisés, même quand ils grandissent ✅ Retrouver facilement mes composants ✅ Collaborer plus efficacement en équipe Plus d'infos sur la documentation Nuxt.js

block-size et inline-size 💪💪 Les propriétés CSS block-size et inline-size permettent de définir les dimensions d'un élément en fonction de la disposition de son contenu dans le flux d'écriture (ou direction d'écriture, comme horizontal ou vertical). Ces dimensions sont logiques, ce qui signifie qu'elles s'adaptent automatiquement au mode d'écriture configuré pour votre page ou conteneur. 1. inline-size Dimension parallèle au flux en ligne (ligne de texte ou direction d'écriture). Correspond : À la largeur pour un flux d'écriture horizontal (comme l'anglais ou le français en LTR). À la hauteur pour un flux d'écriture vertical (comme le japonais en TTB - top-to-bottom). Exemple : .element { inline-size: 200px; } Dans un contexte où le mode d'écriture est : Horizontal (gauche à droite, par défaut) : inline-size contrôle la largeur. Vertical (haut en bas) : inline-size contrôle la hauteur. 2. block-size Dimension parallèle au flux de bloc (direction dans laquelle les blocs se succèdent). Correspond : À la hauteur pour un flux horizontal. À la largeur pour un flux vertical. Exemple : .element { block-size: 100px; } Dans un contexte où le mode d'écriture est : Horizontal (par défaut) : block-size contrôle la hauteur. Vertical : block-size contrôle la largeur. Flux d'écriture et son influence Les flux d'écriture sont définis par la propriété writing-mode, qui détermine comment le texte est agencé dans un conteneur. Exemple concret avec writing-mode .container { writing-mode: vertical-rl; /* Texte vertical de droite à gauche */ } .box { inline-size: 150px; /* Contrôle la hauteur dans ce flux */ block-size: 300px; /* Contrôle la largeur dans ce flux */ } Dans ce cas, inline-size définit la hauteur et block-size la largeur, car le flux est vertical. Pourquoi utiliser block-size et inline-size ? Flexibilité : Ces propriétés s'adaptent automatiquement à la direction du texte. Code plus propre : Moins de conditions spécifiques pour différents modes d'écriture. Multilinguisme : Parfait pour des projets prenant en charge des langues utilisant différentes orientations textuelles (ex. : anglais vs japonais). Quand préférer width et height ? 🧐🧐🧐🧐 Pour des interfaces simples où le flux d'écriture ne change jamais. Quand vous voulez un contrôle explicite sur la largeur et la hauteur. Résumé block-size et inline-size sont des alternatives logiques et modernes à height et width, optimisées pour les mises en page flexibles et multilingues. 👍👍

All this Javascript is just there to put HTML in someones browser. Semantics matter.

💡 Bien écrire son fichier README 📃 Salut à tous, j’espère que vous allez bien. La semaine dernière, faute de temps, je n'ai malheureusement pas pu partager mon post avec vous. Cependant, je tiens à me rattraper en vous promettant deux publications cette semaine. Je vous tiendrai informés. Aujourd'hui, j'aimerais aborder un sujet important : le fichier #README. En tant que #développeurs, nous avons tous été confrontés à la rédaction de ce document au moins une fois, et l'erreur fréquente est de le laisser incomplet. Mais qu'est-ce qu'un fichier README exactement 🤔? Pour rappel, c'est la première chose que l'on découvre lorsqu'on parcourt un dépôt #Git. Celui qui le lit doit pouvoir comprendre l'objectif du projet, les langages utilisés, voir les fonctionnalités et consulter des liens et instructions supplémentaires qui pourraient ne pas tenir dans le fichier lui-même. De plus, des captures d'écran montrant l'exécution du projet sont indispensables. Il est crucial que ce fichier soit bien rédigé et renseigné, car le lecteur peut être votre client, un #recruteur, ou même un futur employeur. Le #README de votre projet doit répondre au "quoi", "pourquoi", et "comment" du projet. À quoi ressemble la structure d'un README ? Pour vous donner une idée, voici comment vous pouvez organiser votre fichier : 1. Description du projet : Cette partie doit expliquer les motivations et objectifs du projet. Vous devez répondre aux questions : qu'est-ce que ce projet ? Pourquoi est-il développé ?     2. Stack technique : Détailler les langages, librairies et #frameworks utilisés, ainsi que tout recours à des #APIs publiques. 3. Interface utilisateur : Inclure des captures d'écran montrant l'interface du projet en cours d'exécution. Vous avez le choix entre différents formats d'images (PNG, GIF, etc.). 4. Les fonctionnalités : Enumérer les différentes fonctionnalités du projet. 5. Comment exécuter le projet : Détailler les commandes nécessaires pour lancer l'application en local. Les instructions doivent être claires afin que l'utilisateur n'ait pas besoin d'aide supplémentaire. Enfin, vous avez la possibilité de styliser votre fichier pour le rendre plus présentable. Pour cela, utilisez le langage de balisage #Markdown (.md), un outil simple et efficace. Si vous souhaitez en savoir plus sur les syntaxes, consultez cette doc 💡 : https://lnkd.in/e4uuybGj Voilà pour cette semaine ! J'espère que ces conseils vous ont été utiles. N'hésitez pas à partager vos retours et suggestions dans les commentaires. Bonne semaine à tous ! #MyLinkedinWeeklyChallenge #52PostsLinkedin2024

In Ancient Greece, Histiaeus used to send messages by writing on the bald scalp of his most trusted servant and sending him on his way once his hair had regrown. The idea was to hide the existence of a secret message. Steganography is the technique of hiding data within an ordinary file, image, video, or audio. In the past few days, I have been working on building a platform where you can hide a secret message behind the pixels of an image. Every photo or image is a collection of many small pixels. Each of these pixels is defined by an RGB value, which determines the color of each pixel. Collectively, these pixels construct the image visible to the human eye. An RGB value is a 24-bit binary value (8 bits each for Red, Green, and Blue). If the Least Significant Bit (LSB) of this value is modified, the change is so minimal that it is imperceptible to the human eye. This fact is exploited in some steganographic techniques. I used this fact to my advantage by replacing the LSB of the Blue component of RGB with a message bit. The purpose of steganography techniques is to hide the mere existence of a message, and often the data is encrypted before applying steganographic algorithms. You can check out my implementation of steganography Trojan Pixel:- https://lnkd.in/ga4FYGH6 Tech Stack: Node.js, JWT (npm package for low-level programming of images), Express.js, React.js, Tailwind CSS That's all from my side, a 101 on how to talk about banned stuff in your college, xd.

# pattern-recognition This project demonstrates the implementation of a real-time pattern recognition system using pure JavaScript, HTML, and CSS. The system applies minimum distance classification and clustering techniques to classify and group data points based on their proximity to predefined centroids. Designed for both supervised and unsupervised learning scenarios, the project serves as a simplified but practical example of how pattern recognition works in real-world applications. --- Core Objectives Implement pattern recognition techniques using only core web technologies (no external libraries or frameworks). Provide an interactive visualization to help users understand the concepts of classification and clustering. Showcase the feasibility of developing advanced algorithms on resource-constrained devices, such as a mobile phone. --- Key Features 1. Interactive Point Classification: Users can click on a canvas to add data points. The system classifies these points into categories based on their distance to predefined centroids. 2. Dynamic Clustering: The project includes an unsupervised learning approach where data points are grouped into clusters. 3. Real-Time Visualization: Using the HTML Canvas API, the project visualizes the classification and clustering results dynamically. 4. Lightweight Implementation: No dependencies on heavy libraries like TensorFlow or OpenCV. Fully written in JavaScript for computational logic, with a responsive design using CSS. --- Applications This project can serve as a foundation for: Educational Demonstrations: Teaching pattern recognition concepts interactively. Real-Time Decision Making: Simulating data classification in applications like object tracking, data clustering, or anomaly detection. Mobile-First Development: Highlighting how advanced projects can be developed using basic resources. --- This lightweight, interactive system emphasizes simplicity, accessibility, and the practical application of pattern recognition algorithms in web development. It’s a perfect demonstration of how complex concepts can be made approachable and engaging through creative coding! --- site link👇 https://lnkd.in/gtVtcZwv

la structure pour réaliser une application webGIS

I have been reading "Practical Object Oriented Design" by Sandi Metz. '𝘛𝘩𝘪𝘴 𝘣𝘰𝘰𝘬 𝘪𝘴 𝘢𝘣𝘰𝘶𝘵 𝘥𝘦𝘴𝘪𝘨𝘯𝘪𝘯𝘨 𝘰𝘣𝘫𝘦𝘤𝘵 𝘰𝘳𝘪𝘦𝘯𝘵𝘦𝘥 𝘴𝘰𝘧𝘵𝘸𝘢𝘳𝘦, 𝘢𝘯𝘥 𝘩𝘰𝘸 𝘪𝘵 𝘷𝘪𝘦𝘸𝘴 𝘵𝘩𝘦 𝘸𝘰𝘳𝘭𝘥 𝘢𝘴 𝘢 𝘴𝘦𝘳𝘪𝘦𝘴 𝘰𝘧 𝘴𝘱𝘰𝘯𝘵𝘢𝘯𝘦𝘰𝘶𝘴 𝘪𝘯𝘵𝘦𝘳𝘢𝘤𝘵𝘪𝘰𝘯𝘴 𝘣𝘦𝘵𝘸𝘦𝘦𝘯 𝘰𝘣𝘫𝘦𝘤𝘵𝘴.' From now onwards, I would like to share some insights from the book. What is design? Design is an art. Every software application is a collection of code. The way you place or arrange the code is design. Thus, design is the art of arranging code. The Problem Design Solves You don't need design for an application that will never change. However, in practical life, applications are bound to change. Whether it be a new feature, a bug fix or a change in requirements. '𝘊𝘩𝘢𝘯𝘨𝘦 𝘪𝘴 𝘶𝘯𝘢𝘷𝘰𝘪𝘥𝘢𝘣𝘭𝘦. 𝘐𝘵 𝘪𝘴 𝘶𝘣𝘪𝘲𝘶𝘪𝘵𝘰𝘶𝘴, 𝘰𝘮𝘯𝘪𝘱𝘳𝘦𝘴𝘦𝘯𝘵 𝘢𝘯𝘥 𝘪𝘯𝘦𝘷𝘪𝘵𝘢𝘣𝘭𝘦.' Easy to change applications are easy to work with, applications that resist change are not. Object Oriented Design '𝘖𝘣𝘫𝘦𝘤𝘵 𝘰𝘳𝘪𝘦𝘯𝘵𝘦𝘥 𝘢𝘱𝘱𝘭𝘪𝘤𝘢𝘵𝘪𝘰𝘯𝘴 𝘢𝘳𝘦 𝘮𝘢𝘥𝘦 𝘶𝘱 𝘰𝘧 𝘱𝘢𝘳𝘵𝘴 𝘵𝘩𝘢𝘵 𝘪𝘯𝘵𝘦𝘳𝘢𝘤𝘵 𝘵𝘰 𝘱𝘳𝘰𝘥𝘶𝘤𝘦 𝘵𝘩𝘦 𝘣𝘦𝘩𝘢𝘷𝘪𝘰𝘶𝘳 𝘰𝘧 𝘵𝘩𝘦 𝘸𝘩𝘰𝘭𝘦.' The parts are called 𝐨𝐛𝐣𝐞𝐜𝐭𝐬. The interaction between the parts (objects) is done through 𝐦𝐞𝐬𝐬𝐚𝐠𝐞𝐬 that they pass to eachother. For a message to be passed, the sender needs to know something about the receiver. This creates 𝐝𝐞𝐩𝐞𝐧𝐝𝐞𝐧𝐜𝐢𝐞𝐬 between the two objects. '𝘖𝘣𝘫𝘦𝘤𝘵-𝘰𝘳𝘪𝘦𝘯𝘵𝘦𝘥 𝘥𝘦𝘴𝘪𝘨𝘯 𝘪𝘴 𝘢𝘣𝘰𝘶𝘵 𝒎𝒂𝒏𝒂𝒈𝒊𝒏𝒈 𝒅𝒆𝒑𝒆𝒏𝒅𝒆𝒏𝒄𝒊𝒆𝒔. 𝘐𝘵 𝘪𝘴 𝘢 𝘴𝘦𝘵 𝘰𝘧 𝘤𝘰𝘥𝘪𝘯𝘨 𝘵𝘦𝘤𝘩𝘯𝘪𝘲𝘶𝘦𝘴 𝘵𝘩𝘢𝘵 𝘢𝘳𝘳𝘢𝘯𝘨𝘦 𝘥𝘦𝘱𝘦𝘯𝘥𝘦𝘯𝘤𝘪𝘦𝘴 𝘴𝘶𝘤𝘩 𝘵𝘩𝘢𝘵 𝘰𝘣𝘫𝘦𝘤𝘵𝘴 𝘤𝘢𝘯 𝘵𝘰𝘭𝘦𝘳𝘢𝘵𝘦 𝘤𝘩𝘢𝘯𝘨𝘦.' #PracticalObjectOrientedDesign #SoftwareDevelopment #AzlanRasool

Un Concept Clé pour la clean Architecture !