@landscape/wordlab

[ { "publicated": false, "intro": "Aujourd'hui je me suis posé cette question : <b>\"c'est quoi une illustration Bige ?\"</b>\n\nAutrement dit, selon l'impulsion souhaitée lors de l'écriture de la charte graphique à savoir définir un univers fédérateur et accessible, proche des utilisateurs d'un point de vu ethnologique, comment je fais pour rendre ça possible visuellement ?\n\nCe sujet je pourrais en parler pendant des heures donc je vais essayer d'être concis et je dois bien avouer que j'ai une flemme incommensurable déjà en commençant à écrire donc si tu préfère prendre un café avec moi pour en parler, ça me va !\n\nDonc voici une première recherche, ce n'est pas une fin en sois seulement ça me permet de mieux pressentir ce que sera ce site demain...", "publication": "2020-03-21", "short_description": "Aujourd'hui je me suis posé cette question : \"c'est quoi une illustration Bige ?\"\nAutrement dit, selon l'impulsion souhaitée lors de l'écriture de la charte graphique à savoir définir un univers fédérateur, accessible et proche des utilisateurs...", "author": { "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92" }, "url": "recherche-graphique-des-illustrations-pour-bige", "label": "Recherche graphique, des illustrations pour Bige?", "picture": "https://i.pinimg.com/564x/09/50/27/095027fd6487b77ceee888491ab364d7.jpg", "markdown": "<div class=\"container\">\n<div class=\"article_content\">\n\n## Les humains / Bige.\n\n> Dans mes objectifs, je dois créer de l’empathie dans une approche design qui respire la technologie tout en la rendant simple et accessible à tous. C’est pour cette raison que je vais avoir besoin d’illustrer à moindre coût. Forcément rien de mieux que la photo pour créer l’empathie et il est difficile de faire en sorte que chacun s’y retrouve donc voici la première approche.\n\n### Jeu des 7 différences :\n<div class=\"row\">\n<div class=\"col col-sm-12 col-md-6\">\n<div style=\"text-align:center; width:100%;\">\n<img src=\"https://i.pinimg.com/originals/58/8f/40/588f408050d87849a27bd69ab2787f6f.jpg\" width=\"100%\" style=\"max-width:550px; left:0; right:0; margin:auto\"/>\n</div>\n\n### Recherche #1 :\n>\n> Sur cette illustration, on vois <b>un couple hétéro blanc</b> saluant à une amie blanche rentrant chez elle à vélo après le dernier apéro juste avant la quarantaine du COVID 19 probablement en Irlande si on prend compte de leur couleur de cheveux ;-)\n\nl’équilibre et l’approche n’est pas si mauvaise pour un premier jet et je me dis «en 4 couleurs comment intégrer une approche plus hétérogène dans cette circonstance sans casser le rythme ?\"\n\n</div>\n<div class=\"col col-sm-12 col-md-6\">\n<div style=\"text-align:center\">\n<img src=\"https://i.pinimg.com/564x/45/e0/68/45e0687de639d71cb6affc37c43a27fc.jpg\" width=\"100%\" style=\"max-width:550px; left:0; right:0; margin:auto\"/>\n</div>\n\n### Recherche #2 :\n>\n> Un couple hétérogène résident probablement en ville compte tenu du graffiti présent sur leur domicile, saluant des amies l’une créant l’empathie en prenant le temps de saluer ses hôtes, à potentiel gay puisque roulant en tandem l’une étant de façon subjective et à fort potentiel la soeur de notre hôte ce qui crée un lien familial et renforce le réalisme de cette scènette.\n\nL’équilibre des masse n’est pas rompu pour autant et j’en profite pour intégrer les masses de soutiens comme le point bleu sous le visage de notre pilote de tandem.\n</div>\n</div>\n<div style=\"text-align:center; width:100%;\">\n</div>\n</div>\n</div>\n<div class=\"slice_up\">\n<div style=\"text-align:center;\">\n\n# [ 😅 En cours d'écriture... ]\n</div>\n</div>", "category": "design", "tags": [ "illustration", " charte graphique", " création" ], "id": "5fIkxkhwHQorp5aiUINL", "words": [] }, { "category": "technology", "tags": [ "emojis", " json", " db", " emotions", " categories" ], "publicated": false, "intro": "Salut Billy,\nL'an dernier, je travaillais sur une fabrique à histoire pour enfant et j'avais besoin de poser quelques questions aux utilisateurs pour récupérer les composantes des histoires... Du coup je me suis intéressé de plus près aux chatbots et à la classification de textes et plus spécifiquement d'émotions.\n\nQuoi de mieux en réponse lorsqu'on détecte une émotion que de retourner un Emoji ?\n\nC'est ce qu'il se passe généralement lorsque tu chat avec des amis et nous n'allons pas énumérer les raisons pour lesquelles l'emoji est entré dans le langage commun seulement te partager un JSON qui était une constituante de ce projet et qui contient l'ensemble des emojis répertoriés par catégories d'émotions.", "publication": "2020-03-31", "short_description": "L'an dernier, je travaillais sur une fabrique à histoire pour enfant et j'avais besoin de poser quelques questions aux utilisateurs pour récupérer les composantes des histoires... Du coup je me suis intéressé de plus près aux chatbots et à la classifica...", "author": { "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92" }, "label": "Les emojis groupés par catégories pour ton chatbot", "url": "les-emojis-groupes-par-categories-pour-ton-chatbot", "picture": "https://i.pinimg.com/originals/70/e0/16/70e016beef9bb89df61c088c0e1871ad.jpg", "markdown": "<div class=\"container\">\n<div class=\"article_content\">\n\n## Que vas tu trouver dans ce document ?\n\n> Ce fichier est malheureusement en anglais pour le moment ce qui est fort dommage car j'aimerais beaucoup que les RNN et traitements de textes Français dans le machine learning puisse évoluer...\n\n> voici sa structure dans les grandes lignes :\n</div>\n</div>\n\n<div class=\"slice_up stylo\">\n<div class=\"container\">\n\n```\n{\n\t\"tag\": \"Smileys & Emotion (face-smiling)\",\n \"patterns\": [\"1F600\", \"😀\", \"😀\", \"grinning face\", \"1F603\", \"😃\", \"😃\", \"grinning face with big eyes\", \"1F604\", \"😄\", \"😄\", \"grinning face with smiling eyes\", \"1F601\", \"😁\", \"😁\", \"beaming face with smiling eyes\", \"1F606\", \"😆\", \"😆\", \"grinning squinting face\", \"1F605\", \"😅\", \"😅\", \"grinning face with sweat\", \"1F923\", \"🤣\", \"🤣\", \"rolling on the floor laughing\", \"1F602\", \"😂\", \"😂\", \"face with tears of joy\", \"1F642\", \"🙂\", \"🙂\", \"slightly smiling face\", \"1F643\", \"🙃\", \"🙃\", \"upside-down face\", \"1F609\", \"😉\", \"😉\", \"winking face\", \"1F60A\", \"😊\", \"😊\", \"smiling face with smiling eyes\", \"1F607\", \"😇\", \"😇\", \"smiling face with halo\"\n ],\n\t\"responses\": []\n}\n```\n\n\n<div style=\"text-align:center;\">\n\n<a href=\"https://firebasestorage.googleapis.com/v0/b/bige-start.appspot.com/o/emojisgrouped.json?alt=media&token=61c5d30a-d9b7-496b-b957-41679c40f9f6\" class=\"v-btn v-btn--contained theme--light v-size--default primary\">télécharger les emojis</a>\n</div>\n</div>\n</div>\n\n", "id": "6PxcrB2QZEqq8m5MtG7A", "words": [] }, { "intro": "En stylesheet on est capable de faire un tas de choses qui sont trop souvent remplacées par plus de html ou du javascript souvent pas très propre et ajouté à la dernière minute car la sheet du site n'est pas accessible, pas documentée ou simplement parce qu'on ne connais pas bien les pseudo-classes et pseudo-éléments offerts par CSS3.\n\nDans cet article, on va commencer par les lister avec une description rapide puis nous allons en observer certains plus ou moins connus du moins mal exploités.", "publication": "2020-04-02", "short_description": "Les pseudos ont une réelle utilité dans le web contemporain, dans cet article on va en parler un peu et observer leur cas d'usage. Nous allons aussi reparler des pseudo-class car si j'ai bien lu le stylesheet de certains sites internet d'anciens...", "author": { "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92" }, "label": "Des tips CSS3 sur les pseudo-elements pour être au top", "url": "des-tips-css3-sur-les-pseudo-elements-pour-etre-au-top", "picture": "enattente", "markdown": "", "category": "integration", "tags": [ "css", "pseudo", "class", "elements", " pseudo-element" ], "id": "94P93y4fb8bOzlQpbIYy", "words": [] }, { "category": "integration", "tags": [ "pixel ratio", " vidéo", " stylesheet", " SCSS", " CSS" ], "intro": "Hello Billy,\nDans cet article on va parler d'intégration CSS et de SASS ou SCSS plus exactement et on va observer une formule magique pour intégrer des contenus vidéos en préservant leur ratio en pixel sur des interfaces responsive.\n(et c'est cool parce qu'il y a des mots clés sympa dans ce début de texte :-)\n\nEntre 2015 et 2020, j'ai travaillé avec des vidéastes et j'ai souvent constaté leur déception lorsque leurs superbes vidéos se retrouvaient intégrées sur des sites e-commerce.\n\nGénéralement sur ce type de site vieillissant, les intégrateurs n'ont pas pensé à l'intégration de vidéos et plus spécifiquement sur les fiches produits.\n\nDu coup lorsque les marques leur demande de mettre un player en place, ils se retrouvent avec des stylesheet créées spécifiquement pour les formats photos des sites en question.\n\nEt ils ont des photos dans un format précis qui n'est certainement pas un format propre au pixel ratio d'un support vidéo et ils tentent de faire entrer un rectangle dans un carré ce qui crée des trucs pas super sexy avec des bandes perdues de toute part etc.\n\nDonc mon Billy on va regarder comment on préserve l'aspect au pixel ratio en CSS dans ce mini article.", "publication": "2020-03-31", "short_description": "Ces quatre dernières années, je les aies partagées avec YUBI c'est un collègue qui est devenu un pote et son Job consiste à concevoir et réaliser des vidéos de qualité. Son souci c'est que les intégrateurs de sites internet ne savent jamais...", "author": { "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92" }, "label": "Respecter le pixel Ratio ça peut paraître anodin et ça ne l'est pas tant", "url": "respecter-le-pixel-ratio-ca-peut-paraitre-anodin-et-ca-ne-lest-pas-tant", "picture": "https://i.pinimg.com/originals/26/b0/31/26b031af670d661be6d89c32758df290.jpg", "markdown": "<div class=\"container\">\n<div class=\"article_content\">\n\nAvant tout <b>BIGUP YUBI,</b> parce que c'était bien cool de travailler avec toi et cette idée pour faire un article rapide vient de toi !\n(Si tu passes par ici pose un petit commentaire ça me fera plaisir !)\n\nDonc pour en revenir au sujet pour préserver un pixel ratio c'est en réalité super simple.\n\nPrenons pour exemple une vidéo dans un format classique 16:9, l'idée de ce format est simple généralement les contenus vidéos sont dédiés aux écrans (si je ne dis pas de conneries... ) et ces écrans sont généralement conçus pour afficher ce format à l'horizontal ou vertical peu importe.\n\nAvant la création du 16:9 nous avions du 4:3 et le principe est exactement le même donc peu importe le format que tu souhaites préserver, la réponse dans cet article sera toujours valable mon Billy.\n\nDu 16:9eme c'est un ratio et il s'écrit de pas mal de façon différentes surtout depuis l'apparition du 4K et 5K etc. seulement la base est toujours la même donc rien ne sert de se prendre la tête avec les formats dérivés en pixels ce qui nous intéresse ici c'est le ratio et uniquement le ratio.\n\nDonc un des formats génériques sur les internets c'est le 1080p et ça veut dire que la majorité des contenus vidéos optimisés mesurent en pixel 1920x1080.\n\nPour préserver le ratio 1920x1080 nous allons devoir faire un peu de mathématiques alors accroche toi car voici la formule à appliquer :\n\n```javascript\n(1080/1920)*100 = (9/16)*100 = (2160/3840)*100 = 56,25\n// c'est fou non ?\n```\n\nDonc problème du 19:9 résolu, la hauteur fera toujours 56,25% de la largeur <b>DINGUE !</b>\nQuand je pense au nombre d'intégrateurs qui n'ont jamais opéré se calcul en intégrant une vidéo...\n\nMaintenant qu'on connais le ratio en 16:9, listons les principaux formats histoire d'en faire un stylesheet qui va répondre à tes besoins...\n\n<table>\n<tr>\n<th>Aspect Ratio</th>\n<th>Pourcentage largeur/hauteur</th>\n</tr>\n<tr>\n<td>1:1</td>\n<td>100%</td>\n</tr>\n<tr>\n<td>16:9</td>\n<td>56.25%</td>\n</tr>\n<tr>\n<td>4:3</td>\n<td>75%</td>\n</tr>\n<tr>\n<td>3:2</td>\n<td>66.66%</td>\n</tr>\n<tr>\n<td>8:5</td>\n<td>62.5%</td>\n</tr>\n</table>\n\n## Version pure CSS pour préserver l'aspect ratio\n\n> En CSS3 nous n'avons pas la capacité de faire des calculs du moins ce n'est pas compatible avec l'ensemble des web browser (merci microsoft d'avoir maintenu IE aussi longtemps, mes félicitations)\n\n> Du coup pour pas nous casser la binette ce que l'on fait c'est que l'on applique un padding-bottom sur un élément relatif et ça donne ça :\n\n```\n.ratio_16_9 {\n position:relative;\n width:100%;\n padding-bottom:56.25%;\n}\n```\n\n> Ici nous allons travailler en SASS ou SCSS car c'est bien plus lisible et plus simple à maintenir donc en SCSS ça donne ça :\n\n```\n.ratio {\n width:100%;\n position:relative;\n padding-bottom:100%;\n\n .\\16_9 {\n padding-bottom:56.25%;\n }\n .\\4_3 {\n padding-bottom:75%;\n }\n .\\3_2 {\n padding-bottom:66.66%;\n }\n .\\8_5 {\n padding-bottom: 62.5%;\n }\n iframe {\n position:relative;\n width:100%;\n height:100%;\n }\n}\n```\n\n### Ya plus qu'à\n\n> Ici nous répondons à des besoins vidéo donc je vais mettre une iframe dans l'exemple car rares sont les site qui hébergent leur propre player ne serais-ce que pour des questions d'audience...\n\n```\n<html>\n<body>\n <div class=\"ratio 16_9\">\n <iframe src=\"adresse_du_player\"></iframe>\n </div>\n</body>\n</html>\n```\n\n<div style=\"text-align:center;\">\n\n## That's All\n\n> Plus aucune raison de se récolter d'énormes bandes autour de vos vidéos après ça, simple et efficace pour un premier article rapide d'intégration sur Bige !\n</div>\n</div>\n</div>", "id": "9M0Iq3Q98VNQpHod0TVG", "words": [] }, { "markdown": "<div class=\"container\">\n\n## Le bon degrés °\n\n> En réalité c'est ULTRA simple, le bon degrés à appliquer dans une Illustration isométrique c'est <b>26.557°</b>\n\n### Pourquoi ?\n\n> Et bien billy, si tu cherche à créer des lignes droites en Pixel Art tu n'auras pas un milliard de possibilités :\n - l'horizontale \n - la verticale\n - la diagonale 45° \n - et l'angle qui nous intéresse ici 26.557° la tangente de deux pixels.\n\n\n> Donc en résumé si tu respecte cet angle, tes illustrations isométriques n'en seront que plus jolies car alignées au pixel et comprise dans le sens commun.\n\n> THAT'S ALL !\n\n> Pour le plaisir de tes mirettes voici le site de EBOY :\n\n</div>\n<div class=\"container\" style=\"text-align:center\">\n<img src=\"http://hello.eboy.com/eboy/wp-content/uploads/2015/09/SFCUTCOVER-01t-2x.png\" style=\"max-width:100%\" />\n\n<a href=\"http://hello.eboy.com/eboy/\" target=\"_blank\">EBOY OFFICIAL WEBSITE</a>\n</div>", "tags": [ "illustration", " isométrie", " 3D", " graphisme" ], "category": "design", "intro": "Bonjour mon Billy,\nTout à l'heure je suis encore tombé sur des illustrations isométriques qui n'étaient pas correctes, donc j'ai décidé de te pondre un petit article pour décrire en un seul principe ce qui fait qu'une illustration isométrique est correcte ou non.\n\nEn réalité ça me permet surtout de pondre un postit facile histoire de mettre un peu de contenu sur Bige.\n\nC'est super simple et ça remonte au tout début du numérique avec la création des matrices de pixel.\n\nBeaucoup d'illustrateurs dont celui qui est la référence pour son travail de folie à savoir Eboy ont travaillé l'isométrie au travers du Pixel Art et ce sont à eux que nous devons un minimum de respect en travaillant selon le bon degrés, celui qui dans le sens commun fait qu'une illustration isométrique est bonne ou non.", "publication": "2020-03-21", "short_description": "Au début des années 2000, j'ai conçu beaucoup de projets avec des illustrations isométriques.\nÀ l'époque nous n'avions pas accès à la 3D aussi facilement que de nos jours et encore moins de WebGL qui n'est toujours pas parfait...", "author": { "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92" }, "url": "lisometrie-au-dixieme-de-degres-tes-pret-a-connaitre-le-secret-billy-", "label": "L'isométrie au dixième de degrés t'es prêt à connaître le secret Billy ?", "picture": "https://i.pinimg.com/564x/6a/a3/97/6aa39770c4ba10c67fca9d59e37e293a.jpg", "id": "9kxh2rbVcOtlrOPSerWz", "words": [] }, { "markdown": "<div class=\"container\">\n<div class=\"article_content\">\n\n## Liens pratiques du projet :\n\n> le package <b>WordLab sur NPM</b> :<br/>\n[PACKAGE NPM WORDLAB](https://www.npmjs.com/package/@landscape/wordlab)\n\n```\nnpm i @landscape/wordlab --save\n```\n\n> Le repo <b>GIT de WordLab</b><br/>\n[GITHUB WORDLAB](https://github.com/simondelamarre/WordLab)\n\n<div class=\"row\">\n<div class=\"col col-sm-12 col-md-6\">\n\n## Les RNN & KNN en js.\n\n> L’an dernier j’ai fait pas mal de recherches sur le langage naturel et je me suis amusé à entraîner des classificateurs de texte, mon objectif c’était d’explorer le champs des possibles avec du Pytorch, NLTK, Word2vec, Tensorflow (TLDR; j’en passe et je ferais un article pour partager des recherches sur les RNN)\n\nLe bilan de cette recherche de classificateur de textes Français, c’est que ça fonctionne très bien seulement il est assez compliqué de convertir les modèles entrainés dans des formats exploitables en front-end et multiplier les appels réseau n’était pas mon objectif et mes tests avec TFJS n'étaient pas concluant.\n\nDu coup j’ai ouvertement mis à l’écart l’idée des réseaux neuronaux convulsif récurrents pour me recentrer sur le besoin du projet Bige :\nLe but du jeu est de pouvoir répondre le plus rapidement possible à un nombre de requête croissante tout en interrogeant le moins possible Firestore et en diminuant de façon drastique le nombre de requêtes sur Functions (l’api Firebase) car c’est soumis à des quotas qui sont inférieurs aux attentes.\n<b>(Et je ne veux pas payer sinon ce serait trop facile :-D )</b>\n\nSi je devais résumer WordLab en une phrase ce serait :\n> <b>\"Un réseau de vectrices qui vous veut du bien.\"</b>\n</div>\n<div class=\"col col-sm-12 col-md-6\">\n\n### [TODO : create and embed image here]\n</div>\n</div>\n\n## Le texte, «la base !»\n<br/>\n\n</div>\n</div>\n\n<div class=\"slice_up\" style=\"text-align:center;\">\n<img src=\"https://i.pinimg.com/564x/55/ea/a8/55eaa8a63a58f4370ce2c19206e83f12.jpg\" style=\"max-width:100%\" width=\"650\"/>\n</div>\n\n<div class=\"container\">\n<div class=\"article_content\">\n\n> <b>WordLab</b> est découpé en plusieurs blocks l'un d'entre eux étant essentiel car il s'occupe de découper les mots en Syllabes et une fois les syllabes découpées elles sont cryptées par sonorité et ordre d'importance par l'ajout de coefficients dans les clés. l'image ci-dessus explique son fonctionnement dans les grandes lignes.\n\n> En 2016, avec collègue Matthieu, <b>(BIGUP YUBY !)</b> j'ai travaillé sur un moteur de recherche syllabique pour un projet de recherche par prénoms. Notre souci c'est qu'on avait une base d'environ 1500 prénoms avec parfois jusque 4 orthographes correctes et réussir à renseigner toutes les orthographes en base n'aurait pas palier les fautes de frappes.\n> Donc je m’étais creusé la tête et pour reparler de Matthieu, son prénom prend vraiment <b>deux «T»</b> hors <b>Mathieu</b> ça existe avec <b>un seul «T»</b> et probablement <b>sans «h» (Matieu) pour les papas qui ont merdé à l’état civil 🤪</b>\n\n> L'un des principaux avantages de ce cryptage sous forme de syllabes c'est de savoir grouper les mots par sonorité, par exemple si un utilisateur fait une faute de frappe et rentre le mot <b>\"Salpette\"</b> Syllab va simplement trouver la sonorité la plus proche qui <b>99% du temps serra \"Salopette\"</b> Pratique !\n\n### Les mots clés\n\n> Une fois cryptés, les mots sont classés par genre, NC, NP, VERB, PRON, ADV, INTJ et de la on en déduit les mots clés (ceux jugés importants pour des recherches par thématique ou déduire des similitudes dans les différents textes.)\n\nL’idée c’est de leur appliquer des poids selon leur degrés d’importance dans les différents textes,\nEn clair chaque fois qu'on compte la présence d’un mot dans un texte on lui inclémente un total et après avoir itéré les mots présents dans le texte on leur applique un facteur relatif à leur importance, les facteurs sont incrémentent ou décrémentent et c’est volontaire car juste après on va parler de la toxicité (dans un autre article, si j'arrive déjà à en écrire un en entier un jour) des mots et on verra comment l’intégrer avec des négations, des doubles négations et autres insultes et éléments toxiques.\n\nDu coup nous obtenons des tokens permettant d’associer les mots entre eux de façon syllabique de différents types avec des facteur poids selon leur contexte et autre ordre d'importance.\n\n<br/>\n</div>\n</div>\n\n<div class=\"slice_up\" style=\"text-align:center;\">\n<img src=\"https://i.pinimg.com/564x/82/be/a1/82bea1f49fa76bd3a5ede1c20f492bcd.jpg\" width=\"650\" style=\"max-width:100%;\"/>\n</div>\n\n<div class=\"container\">\n<div class=\"article_content\">\n\n### Les vectrices de mots clés.\n\n> Maintenant que nous savons parser du texte, on va charger toute la DB d’articles dans un gros JSON qui serait beaucoup trop lourd à envoyer au client et on va itérer chaque article selon 1 ou plusieurs indexes.\n\nDans notre cas on traite des articles et pour les répartir équitablement dans l’espace il nous faut définir au moins une statique donc nous allons nous servir de leurs catégories que nous allons répartir dans l’espace selon différents facteurs à savoir : \n- Le nombre d’articles contenus dans la catégorie comme étant un facteur d’influence sur l’importance offerte à la catégorie par le rédactionnel.\n- Son ordre, l’ordonnancement des différentes catégories aura une réelle influence sur les résultats et il t’offre la possibilité d’avoir un impact sur les résultats du moteur contrairement a un KNN classique qui sera toujours une boite noire pour toi humain.\n- le Scale, pour simplifier les calculs, plus la DB est grande et plus les indexes sont nombreux et plus il est important d'étendre la taille des vecteurs dans le but de minimiser leur superposition.\n\n### les vecteurs\n\n> Pour commencer WordLab va définir la taille de l’espace selon le scale en disposant un vecteur 3D autour de la circonférence du scale et dans l’ordre d’index demandé.\n\nEnsuite, WordLab va s’occuper de répartir l’ensemble des mots dans l’espace depuis l’origine et selon l’attraction qu’ils ont relativement aux catégories. On itère et on réitère pour chaque article ou texte.\nDe cette étape en ressort des vecteurs de mots plus ou moins distants de nos indexes.\n\nChaque mot va donc se déplacer par influence avec les catégories et autres indexes tout en enregistrant ses déplacements.\n\n### les itérations \n\n> Ensuite on passe aux articles en les plaçants simplement par latérations selon la positions des mots clés qu'ils contiennent et naturellement les articles vont se remettre dans leur catégorie initiale. \n<b> C’est simple et efficace ! </b>\n\n## Trouver le voisin !\n\n> Maintenant que chaque mots et articles ont trouvé leur place, nous allons chercher l'article voisin.\n\n> Pour cela nous allons opérer par trilatération avec une partie de l'algorithme KNN (K-nearest neighbors algorythm) Si on jette un oeil au Wiki de KNN, on y trouve une formule particulièrement intéressante :\n<b>The weighted nearest neighbour classifier</b>\n\n> Ce que fait WordLab c'est qu'il parse les requêtes de la même façon que les mots clés de nos articles, puis il observe les mots existants dans la base et récupère leur position sur trois axes.\n\n> Après avoir obtenu ces positions, WordLab applique les formules de bi - tri- quadri - (...) - latération et en déduit l'épicentre de la recherche en cours puis nous appliquons cette jolie formule issue de KNN pour retourner les articles par distance depuis cet épicentre. <b>Logique Billy !</b>\n\n<br/>\n</div>\n</div>\n\n<div class=\"slice_up\" style=\"text-align:center;\">\n<img src=\"https://i.pinimg.com/564x/c9/71/39/c9713951cb261d9b7be289e1c87b257a.jpg\" width=\"650\" style=\"max-width:100%;\"/>\n</div>\n\n<div class=\"container\">\n<div class=\"article_content\">\n\n## Le truc cool !\n\n> Maintenant on sais trouver un article sans avoir à faire de requête API et c’est déjà sympa, ça fonctionne sans connexion internet et ça aussi c’est pas mal, le model est super léger, pour ordre d’idée avec 495 mots et 12 articles repartis dans 5 catégories le model prêt à l’emploi pèse 4Ko.\n\n<b>Mais on va pas s’arrêter en si bon chemin !</b>\nEt on va y ajouter une fonctionnalité plutôt sympa pour ton site internet.\n\n### L'utilisateur\n\n> Pour faire court, avec WordLab tu peux créer et monter des instances du moteur directement sur ton client et le faire évoluer à ta guise, donc admettons qu'un utilisateur visite ton site internet, WordLab va simplement placer un nouveau vecteur 3D a l'origine donc (0,0,0).\n\n> Puis ton utilisateur va commencer à naviguer et passer d'une page à l'autre selon ses centres d'intérêts envers tes contenus et WordLab va se charger de déplacer ce vecteur dans une nouvelle direction et à chaque interaction.\n\n> Cette position est en suite stockée sur ton client et lors de sa prochaine visite, WordLab va directement filtrer les contenus selon les centres d\"'intérêts de ton utilisateur...\n\n<b>Élémentaire mon cher Billy !</b>\n\n<br/>\n</div>\n</div>\n\n<div class=\"slice_up\" style=\"text-align:center;\">\n<img src=\"https://i.pinimg.com/564x/60/5b/b7/605bb7091debea4cf8bd74d4bc80893a.jpg\" width=\"650\" style=\"max-width:100%;\"/>\n</div>\n\n<div class=\"container\">\n<div class=\"article_content\">\n\n## Cas d’usage des indexes multiples\n\n> Imagine que tu implémente WordLab sur un site e-commerce qui vendrait des vêtements.\n- Tu pourrais faire des traitements serveur lourds et coûteux pour proposer le bon produit au bon client sur ta HP, dans tes newsletter ou autres notifications.\n- On le sais tous avec de gros volumes de données tes traitements ne seront jamais en temps réel, tu vas t’emmerder à croiser des tickets, un historique du panier et je ne sais quels inputs pour que par je ne sais quelle sorcellerie tu finisses par retrouver un produit à peu près cohérent pour ton client...\n- Avec WordLab les utilisateurs se positionnent eux même face à leur propre demande\n- Du coup plus de traitements lourds sur tes serveurs, la logique de WordLab va simplement s'occuper de retourner des articles en ... (10024 total length)", "category": "technology", "tags": [ "données", " vecteurs", " 3D", " moteur de recherche", " classificateur" ], "publicated": false, "intro": "Hello Billy,\ndans cet article on va parler de WordLab, une base de données conçue pour créer des moteurs de recherches avancés qui s’exécute aussi bien côté serveur que côté client.\n\nAu départ, j'ai écris WordLab uniquement dans le but de palier les quotas de Firebase et le manque de souplesse de Firestore qui ne sait pas faire d'agrégations avancées.\n\nPour y palier j’ai commencé par mettre en cache les requêtes sauf que Firestore c’est pas Redis et je me suis dit que ce serait tout de même plus pertinent d’en faire un RNN ou KNN.\n\nSeulement j'aimerais que Bige puisse s’installer facilement et sans dépendances et le back est en Nodejs donc je n'ai pas particulièrement envie de tout ré-écrire en Python.\n\nLe deuxième soucis des RNN c'est que les apprentissages demandent beaucoup de ressources et du GPU pour que ça fonctionne vite et bien.\n\nHors le GPU c'est ce qui coûte le plus cher sur le cloud et j'ai pas le budget sinon je n'aurais pas choisi Firebase...", "publication": "2020-03-21", "short_description": "En avançant sur Bige, je me suis posé beaucoup de questions, quelle techno, pourquoi la choisir, qui l'utilise, pour combien de temps...\nDans cet article j'introduit WordLab, la première base de donnée côté client qui évolue dans un contexte privé ...", "author": { "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92" }, "label": "WordLab, la base de donnée vectorielle crée spécialement pour Bige!", "url": "wordlab-la-base-de-donnee-vectorielle-cree-specialement-pour-bige", "picture": "https://i.pinimg.com/originals/b5/9c/63/b59c63e6aa260be30873eefc0d785c05.jpg", "id": "E9FegGEQ3QkGsEQoOS1z", "words": [] }, { "intro": "Analyser des spectres RSSI BlueTooth et/ou WIFI, par forcément évident...\nDans cet article on va voir comment exercer des latérations pour en déduire la position d'un objet connecté à partir de données statiques .\n\nDonc on va parler d'un truc ancien et stable mon Billy, on va faire appel à ta mémoire interne et au savoir que ton prof de math a désespérément tenté de t'inculquer du côté de tes 12 piges....\n\nOn va aussi occulter tout ça pour en revenir à l'interêt de l'objet dans ton espace personnel mon Billy.\n\nEt c'est PARTI !", "publication": "2020-03-29", "short_description": "Analyser des spectres RSSI BlueTooth ou WIFI, par forcément évident...\nDans cet article on va voir comment trilatérer pour déduire la position d'un objet connecté à partir de données statiques.", "author": { "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92" }, "label": "La trilatération de spectres lissée avec Kalman", "url": "la-trilateration-de-spectres-lissee-avec-kalman", "picture": "https://drive.google.com/open?id=1lj87mnWI5QwhWKnRI1WytcMl9gc9N2Dn", "markdown": "<div class=\"container\">\n<div class=\"article_content\">\n\n## Tout commence en 2009 (du moins pour moi...)\n\n> je travaillais sur un projet qui avait pour but de localiser des retraités dans un EHPAD.<br/>\n> Comme beaucoup de projets celui-ci n'a jamais vu le jour, seulement 11 ans plus tard j'avais envie de le remettre sur la table.<br/>\n> À l'époque nos vieux n'étaient déjà pas les même qu'aujourd'hui et la technologie était beaucoup plus coûteuse...\n\n> En bref mon objectif était de savoir ou se trouve ta mamie dans un établissement pour personnes à mobilité réduite car oui réduit ça ne veut pas dire sans mobilité et aussi les assistants dans ce type d'établissement sont souvent sous l'eau, fatigués et on ne peu pas leur en vouloir car passer une seule journée avec ces petits vieux il faut bien reconnaître que c'est pire qu'une journée avec tes sales gosses et encore bien pire qu'une journée avec ton collègue de bureau farceur.\n\n## La première idée\n\n> Ma première idée pour ce projet était de fournir un équipement à moindre coût aux établissements donc j'ai observé les infrastructures existantes et déjà à l'époque (et que cela ne vous choque), <b>nous avions du WIFI</b> (probablement pas partout mais...) <b>dans les établissements cibles à savoir :</b>\n\n - un établissement de Luxe du côté du Touquet\n - un second établissement acceptable proche de Lille (Haubourdin).\n - un troisième établissement plutôt défavorisé du côté de Lille encore (Tourcoing).\n\n<br/>\n\n> Et à cette époque certains géants (que je ne souhaite pas citer ici...) proposaient déjà des bracelets connectés (oui je n'étais pas encore totalement fou à cette époque et je n'envisageais pas de créer le hardware...) du coup ces bracelets bien que totalement inutiles pour le public cible pouvaient répondre à nos besoins, à savoir <b>connaître l'emplacement d'un objet dans un espace confiné comme un EHPAD.</b>\n\n> En discutant avec les premiers intéressés, (à savoir : le personnel et BIGUP à ALEXIS d'Haubourdin...) et à l'époque nous avions décidé de jeter cette option à la poubelle, la raison principale étant que les personnes âgées refusaient de porter un bracelet et que même s'ile le portaient, l'hygiène n'était pas au rendez-vous.\n\n> <b>Ce projet s'est terminé par des installations de Kinect pour détecter les chutes et autres pertes de conscience uniquement dans les couloirs d'un seul EHPAD,</b> l'installation étant jugée beaucoup trop coûteuse pour la proposer aux établissements les moins friqués <b>(et cibler les établissements les plus riches n'était pas notre objectif).</b>\n\n> <b>La détection de chutes avec une Kinect, c'est pareil,</b> c'est un calcul de latérations sur un objet physique stable.\n\n## Revenons en à nos moutons BILLY !\n\n> Si t'as pas eu trop de fuites depuis le Bahus, tu dois te souvenir de :\n```\n\nA2 = B2 + C2 + 2BCcosA\nB2 = A2 + C2 + 2ACcosB\nC2 = A2 + B2 + 2ABcosc\n```\n```\nRSSI=−10nlog10(dd0)+A0(1)\n```\n> Donc les latérales et autres latérations viennent simplement de là <b>(je fais appel aux tréfonds de ta mémoire en cours de 5ème</b> si t'es pas belge <b>avec ton prof de Math mon Billy !)</b>\n<div style=\"text-align:center;\">\n<img src=\"https://media.giphy.com/media/3o6ZsY3APZOTZOqa5O/giphy.gif\" style=\"max-width=550px\"/>\n</div>\n<div style=\"text-align:center;\">\n\n## [ARTICLE EN ATTENTE D'ÉCRITURE...]\n\n> S'il y a un like ou un commentaire, promis je termine cet article...\n</div>\n</div>", "category": "technology", "tags": [ "trilateration", " maths", " easy" ], "id": "IotHDdQgTqNxR3j4R540", "words": [] }, { "author": { "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92" }, "label": "le développement est-il une thérapie?", "url": "le-developpement-est-il-une-therapie", "picture": "avenir", "markdown": "", "category": "divers", "tags": [ "thérapie", "development" ], "intro": "dcsdvdfsv fdsvfd sv dfsv fdsv fd s v dfv dfvdfsv", "publication": "2020-04-04", "publicated": false, "short_description": "la cuisine comme le dev est une thérapie", "id": "JjkeUe0ASc3RbfuVzfga", "words": [] }, { "intro": "Salut {{Billy}} !\nAujourd'hui on va se poser la question suivante : \"ou héberger les médias ?\"\n\nÇa peut paraître anodin seulement qui ne s'est pas déjà posé la question en observant la facture de son hébergeur...\n\nAujourd'hui il existe une tonne de façon d'héberger des médias et plus particulièrement des images et vidéos la quasi totalité des réseaux sociaux en faisant partis...\n\nEn travaillant sur Bige, j'ai souhaité utiliser ce que me proposait Firebase et son Storage seulement dans sa version gratuite, le stockage est très limité et les quotas en lecture sont extrêmement faibles.\n[ARTICLE EN COURS D'ECRITURE]", "publication": "2020-03-23", "short_description": "Aujourd'hui je me suis posé la question \"le stockage c'est important mais c'est ou ?\"\nUne question que tout blogger (et pas seulement) a dû se poser un jour et voici le raisonnement de cette question : - J'ai un nom de domaine et un registar - J'ai u...", "author": { "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92", "name": "simon delamarre" }, "label": "Où Stocker des images, pourquoi et comment ?", "url": "ou-stocker-des-images-pourquoi-et-comment-", "picture": "https://i.pinimg.com/originals/83/b5/ff/83b5ff5d873baed516c7e6a69be2dd65.jpg", "markdown": "\n<div class=\"slice_up stylo\">\n\n## [ EN COURS D'ÉCRITURE... ]\n</div>\n<div class=\"container\">\n<div class=\"article_content\">\n\n## Liste des opportunités\n\n> Comme tu le sais lorsque tu héberge une image du un réseau social ou un cloud publique, tu peux très facilement t'en servir pour faire du display sur ton site ou application.\n\n> Et encore une fois, j'ai vraiment pas envie de débourser l'argent que je n'ai pas pour héberger des médias alors qu'il y a de grande chances pour que je n'ai aucune audience avec Bige.\n\nVoici une liste non-exhaustive des moyens qui nous sont offert pour héberger des médias :\n</div>\n</div>\n\n<div class=\"slice_down postit negative\">\n<div class=\"container\">\n\n<div class=\"v-card\">\n<div class=\"v-data-table__wrapper\">\n<table class=\"elevation-12\" style=\"background-color:white;\">\n<tr>\n <th>Nom</th>\n <th>Type</th>\n <th>Image</th>\n <th>Vidéo</th>\n <th>Autre</th>\n <th>Formule</th>\n <th>Stockage</th>\n <th>Limit</th>\n <th>Audience</th>\n <th>Compatible</th>\n <th>API</th>\n</tr>\n<tr class=\"light\">\n<td>Firebase Storage</td>\n<td>Cloud</td>\n<td>✔</td>\n<td>≠</td>\n<td>✔</td>\n<td>Freemium</td>\n<td>1Go</td>\n<td>1GB/jour 10GB/mois</td>\n<td>❌</td>\n<td>✔</td>\n<td>✔</td>\n</tr>\n\n\n\n\n<tr class=\"light\">\n<td>Google Cloud Storage</td>\n<td>Cloud</td>\n<td>✔</td>\n<td>≠</td>\n<td>✔</td>\n<td>Freemium</td>\n<td>5 Go</td>\n<td></td>\n<td>❌</td>\n<td>✔</td>\n<td>✔</td>\n</tr>\n\n\n<tr>\n<td>DropBox</td>\n<td>Cloud</td>\n<td>✔</td>\n<td>≠</td>\n<td>✔</td>\n<td>Freemium</td>\n<td>2Go</td>\n<td>1GB/jour 10GB/mois</td>\n<td>❌</td>\n<td>❌</td>\n<td>✔</td>\n</tr>\n\n\n<tr>\n<td>Google Drive</td>\n<td>Cloud</td>\n<td>✔</td>\n<td>≠</td>\n<td>✔</td>\n<td>Freemium</td>\n<td> 15 GB</td>\n<td>1GB/jour 10GB/mois</td>\n<td>❌</td>\n<td>❌</td>\n<td>❌</td>\n</tr>\n\n<tr>\n<td>One Drive</td>\n<td>Cloud</td>\n<td>✔</td>\n<td>✔</td>\n<td>✔</td>\n<td>Freemium</td>\n<td>5 GB</td>\n<td>1GB/jour 10GB/mois</td>\n<td>❌</td>\n<td>✔</td>\n<td>✔</td>\n</tr>\n\n\n<tr>\n<td>Amazon Storage</td>\n<td>Cloud</td>\n<td>✔</td>\n<td>✔</td>\n<td>✔</td>\n<td>Payant</td>\n<td>+/_ ∞</td>\n<td>+/- ∞</td>\n<td>❌</td>\n<td>✔</td>\n<td>✔</td>\n</tr>\n\n<tr>\n<td>pCloud</td>\n<td>Cloud</td>\n<td>✔</td>\n<td>✔</td>\n<td>✔</td>\n<td>Freemium</td>\n<td>∞</td>\n<td>∞</td>\n<td>❌</td>\n<td>❌</td>\n<td>✔</td>\n</tr>\n\n<tr>\n<td>Facebook</td>\n<td>RS</td>\n<td>✔</td>\n<td>✔</td>\n<td>❌</td>\n<td>Free</td>\n<td>∞</td>\n<td>∞</td>\n<td>✔</td>\n<td>+/-</td>\n<td>+/-</td>\n</tr>\n\n<tr class=\"light\">\n<td>Pinterest</td>\n<td>RS</td>\n<td>✔</td>\n<td>+/-</td>\n<td>❌</td>\n<td>Free</td>\n<td>∞</td>\n<td>∞</td>\n<td>✔</td>\n<td>✔</td>\n<td>✔</td>\n</tr>\n\n<tr class=\"light\">\n<td>Behance</td>\n<td>RS</td>\n<td>✔</td>\n<td>❌</td>\n<td>❌</td>\n<td>Free</td>\n<td>∞</td>\n<td>∞</td>\n<td>✔</td>\n<td>✔</td>\n<td>❌</td>\n</tr>\n\n\n<tr class=\"light\">\n<td>Dribbble</td>\n<td>RS</td>\n<td>✔</td>\n<td>✔</td>\n<td>❌</td>\n<td>Free</td>\n<td>∞</td>\n<td>∞</td>\n<td>✔</td>\n<td>✔</td>\n<td>✔</td>\n</tr>\n\n\n<tr class=\"light\">\n<td>Youtube</td>\n<td>RS</td>\n<td>❌</td>\n<td>✔</td>\n<td>❌</td>\n<td>Free</td>\n<td>∞</td>\n<td>∞</td>\n<td>✔</td>\n<td>+/-</td>\n<td>+/-</td>\n</tr>\n\n\n\n<tr>\n<td>Dailymotion</td>\n<td>RS</td>\n<td>❌</td>\n<td>✔</td>\n<td>❌</td>\n<td>Free</td>\n<td>∞</td>\n<td>∞</td>\n<td>✔</td>\n<td>+/-</td>\n<td>+/-</td>\n</tr>\n\n\n<tr class=\"light\">\n<td>Videas</td>\n<td>RS</td>\n<td>❌</td>\n<td>✔</td>\n<td>❌</td>\n<td>Freemium</td>\n<td>10 Go</td>\n<td>75 GB / month</td>\n<td>✔</td>\n<td>+/-</td>\n<td>+/-</td>\n</tr>\n\n\n<tr>\n<td>Vimeo</td>\n<td>RS</td>\n<td>❌</td>\n<td>✔</td>\n<td>❌</td>\n<td>❌6$/month</td>\n<td>5 Go/semaine</td>\n<td>∞</td>\n<td>✔</td>\n<td>+/-</td>\n<td>+/-</td>\n</tr>\n\n\n\n\n<tr>\n<td>Sprout</td>\n<td>RS</td>\n<td>❌</td>\n<td>✔</td>\n<td>❌</td>\n<td>❌$24.99/month</td>\n<td>5 Go/semaine</td>\n<td>∞</td>\n<td>❌</td>\n<td>+/-</td>\n<td>+/-</td>\n</tr>\n\n\n\n\n<tr>\n<td>Wistia</td>\n<td>RS</td>\n<td>❌</td>\n<td>✔</td>\n<td>❌</td>\n<td>Freemium</td>\n<td>❌3 vidéos max</td>\n<td>∞</td>\n<td>❌</td>\n<td>+/-</td>\n<td>✔</td>\n</tr>\n\n\n\n<tr>\n<td>Brighcove</td>\n<td>Cloud</td>\n<td>❌</td>\n<td>✔</td>\n<td>❌</td>\n<td>❌??$</td>\n<td>∞</td>\n<td>∞</td>\n<td>❌</td>\n<td>+/-</td>\n<td>✔</td>\n</tr>\n\n</table>\n</div>\n</div>\n\n</div>\n</div>\n\n<div class=\"container\">\n\n<div class=\"article_content\">\n\n## Comment choisir ?\n\n> Je ne vais pas commencer à définir les spécificités de chacune de ces alternatives car ce serait bien trop long et bien que je manque cruellement de mots clés pour mon SEO, je n'ai franchement pas envie d'y passer la journée ce qui explique pourquoi je me suis arrêté à cette micro liste...\n\n> Dans mes besoins, il y a des visuels sur lesquels je vais souhaiter communiquer d'autres qui ne seront que support pour illustrer des idées, ces typologies de médias n'ont donc logiquement pas vocation a être hébergés au même endroit.\n\n## Les choix pour Bige et pourquoi.\n\n### les images\n\n> Pour les images et dans le but de ne pas me retrouver à gérer des médias qui traînent a 50 endroits différents j'ai fait mon bench et j'en ai sélectionné 2 :\n\n#### Pinterest : \n<br/>\n> Pour commencer, j'aime beaucoup Pinterest bien que je ne l'utilise que très rarement. \n> Premièrement parce que je pense qu'ils ont su ré-inventer les grilles et que depuis tant d'année ils n'ont pas fait marche arrière c'est donc une réelle réussite.\n> Deuxièmement il y a quelques années j'utilisais ICEBERG qui était similaire en beaucoup de points à Pinterest mais dans un objectif purement professionnel et Pinterest a racheté ICEBERG pour intégrer le meilleur de ses fonctionnalités.\n\n> <b>Donc pourquoi Pinterest :</b>\n- C'est gratuit donc ça colle à mon budget de 0€\n- Ça ne peut qu'améliorer l'audience rendant publique les visuels.\n\n<br/>\n\n#### DropBox :\n\n> Bien que critiqué pour certains principes de vie privée, DropBox a le mérite d'avoir une version gratuite ou vraiment pas cher ainsi qu'une API plutôt bien faite ce qui permet de synchroniser les médias de façon très simple.\n> DropBox va de ce fait me servir à héberger de petites images qui accompagnent des articles et qui n'ont pas vocation à se trouver sur des RS.\n\n#### Behance\n\n> Je ne vais pas y réchapper et je compte bien me servir de Bige pour enfin alimenter un compte sur Behance, déjà parce que j'ai besoin de manger, secondo ça crée de l'audience et tertio, c'est la plateforme qui me semble le plus à même à stocker des recherches d'interface donc pour l'UI ce sera Behance.\n\n### Les vidéos\n\n> Côté vidéo, je dois bien reconnaître que le choix est plus compliqué car nous avons un besoin d'audience auquel YouTube s'annonce être le plus à même de répondre et un souci d'open sourcing ainsi que l'envie de communiquer sur des projets locaux dans ce cas, VIDEAS qui n'est autre qu'une startup hébergée sur Euratechnologie se trouve être un choix plus que pertinent.\n\n#### Videas\n\n> Je vais donc, dès que j'aurais pondu une vidéo puisqu'au moment ou j'écris je n'ai strictement aucun contenus tester Videas pour ces deux raisons: \n- Encourager l'initiative.\n- Tester leur solution tout simplement en gratuit.\n\n### Ce qui n'est ni image ni vidéo\n\n> Dans les médias, il y a aussi un ensemble d'autres typologies de fichiers, PDF, JSON, et je ne vais pas en faire la liste simplement te donner un exemple...\n> Hier je voulais faire un article sur la charte UI de Bige et pour rendre ça pratique, je voulais héberger un fichier XD qui contient la librairie des différents éléments graphiques et d'interface, donc la question : ou le mettre ?\n\n#### Firebase Storage\n\n> Ces dépendances qui ne peuvent se mettre sur des RS, seront donc stockés sur le Storage de Firebase, je considère que ces documents seront assez rare et donc ne dépasseront pas les quotas de la version gratuite.\n\n## Conclusion\n\n> héberger gratuitement c'est possible seulement il ne s'agit pas de tout mettre n'importe ou donc en résumé :\n- Pinterest pour les illustrations à partager\n- DropBox pour les visuels uniquement présent sur le site\n- Behance pour les écrans qui traitent d'interface utilisateur\n- Videas pour les médias vidéo (tutos etc).\n- Firebase Storage pour les documents et dépendances aux articles (PDF, XD, JSONS ...)\n\n> le bon côté de cet article super inutile c'est qu'il contient pas mal de mots clés.\n</div>\n</div>\n", "tags": [ "cloud", "stockage", "médias", "image", "video" ], "category": "integration", "id": "MAHH4lF9qk6lgVD7xYIX", "words": [] }, { "markdown": "\n<div class=\"container\">\n<div class=\"article_content\">\n\n## Why ?\n\n> Avant-tout j'écris cet article aussi parce que je suis en train de me faire un éditeur de contenu WISIWYG, au départ je m'étais dit que le markdown me suffirait et un simple textarea pour faire toute la mise en forme d'un article aussi court soit-il, ce n'est franchement pas agréable...\n\n>Et il faut bien le reconnaître, je manque cruellement de contenus alors c'est un peu gratuit 😌\n</div>\n</div>\n</div>\n<div class=\"slice_up\">\n<div class=\"text-align:center;\">\n\n# [ 🤓 En cours d'écriture...]\n</div>\n</div>", "category": "integration", "tags": [ "css", "pseudo", "class", "elements", " pseudo-element" ], "publicated": false, "intro": "En stylesheet on est capable de faire un tas de choses qui sont trop souvent remplacées par plus de html ou du javascript souvent pas très propre et ajouté à la dernière minute car la sheet du site n'est pas accessible, pas documentée ou simplement parce qu'on ne connais pas bien les pseudo-classes et pseudo-éléments offerts par CSS3.\n\nDans cet article, on va commencer par les lister avec une description rapide puis nous allons en observer certains plus ou moins connus du moins mal exploités.", "publication": "2020-04-02", "short_description": "Les pseudos ont une réelle utilité dans le web contemporain, dans cet article on va en parler un peu et observer leur cas d'usage. Nous allons aussi reparler des pseudo-class car si j'ai bien lu le stylesheet de certains sites internet d'anciens...", "author": { "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92", "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx" }, "label": "Des tips pour être au top sur les pseudo-elements !", "url": "des-tips-pour-etre-au-top-sur-les-pseudo-elements-", "picture": "enattente", "id": "NBU4GeOuyvAwfqOdwVAb", "words": [] }, { "author": { "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92", "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx" }, "label": "where in object key value as boolean", "url": "where-in-object-key-value-as-boolean", "picture": "a venir", "markdown": "", "category": "integration", "tags": [ "array", "object", "key", "value", "javascipt" ], "intro": "Positit sur comment savoir de la façon la plus simple possible si un tableau d'objet contient une clé ayant une valeur...", "publication": "2020-04-02", "publicated": false, "short_description": "Positit sur comment savoir de la façon la plus simple possible si un tableau d'objet contient une clé ayant une valeur...", "id": "NY7xxmE537GwuR8de5oh", "words": [] }, { "tags": [ "Montparnasse", " Gorafi" ], "category": "divers", "intro": "<b>[ FAKE NEWS ]</b>\nMontparnasse – Selon le Guinness Book des Records qui validé l’exploit il y a quelques minutes, c’est officiel : la France compte dans son lot une pop