[ { "publicated": false, "intro": "Aujourd'hui je me suis posé cette question : \"c'est quoi une illustration Bige ?\"\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": "
\n
\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
\n
\n
\n\n
\n\n### Recherche #1 :\n>\n> Sur cette illustration, on vois un couple hétéro blanc 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
\n
\n
\n\n
\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
\n
\n
\n
\n
\n
\n
\n
\n\n# [ 😅 En cours d'écriture... ]\n
\n
", "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": "
\n
\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
\n
\n\n
\n
\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
\n\ntélécharger les emojis\n
\n
\n
\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": "
\n
\n\nAvant tout BIGUP YUBI, 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 DINGUE !\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\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Aspect RatioPourcentage largeur/hauteur
1:1100%
16:956.25%
4:375%
3:266.66%
8:562.5%
\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\n\n
\n \n
\n\n\n```\n\n
\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
\n
\n
", "id": "9M0Iq3Q98VNQpHod0TVG", "words": [] }, { "markdown": "
\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 26.557°\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
\n
\n\n\nEBOY OFFICIAL WEBSITE\n
", "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": "
\n
\n\n## Liens pratiques du projet :\n\n> le package WordLab sur NPM :
\n[PACKAGE NPM WORDLAB](https://www.npmjs.com/package/@landscape/wordlab)\n\n```\nnpm i @landscape/wordlab --save\n```\n\n> Le repo GIT de WordLab
\n[GITHUB WORDLAB](https://github.com/simondelamarre/WordLab)\n\n
\n
\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(Et je ne veux pas payer sinon ce serait trop facile :-D )\n\nSi je devais résumer WordLab en une phrase ce serait :\n> \"Un réseau de vectrices qui vous veut du bien.\"\n
\n
\n\n### [TODO : create and embed image here]\n
\n
\n\n## Le texte, «la base !»\n
\n\n
\n
\n\n
\n\n
\n\n
\n
\n\n> WordLab 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, (BIGUP YUBY !) 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 deux «T» hors Mathieu ça existe avec un seul «T» et probablement sans «h» (Matieu) pour les papas qui ont merdé à l’état civil 🤪\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 \"Salpette\" Syllab va simplement trouver la sonorité la plus proche qui 99% du temps serra \"Salopette\" 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
\n
\n
\n\n
\n\n
\n\n
\n
\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 C’est simple et efficace ! \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 :\nThe weighted nearest neighbour classifier\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. Logique Billy !\n\n
\n
\n
\n\n
\n\n
\n\n
\n
\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\nMais on va pas s’arrêter en si bon chemin !\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Élémentaire mon cher Billy !\n\n
\n
\n
\n\n
\n\n
\n\n
\n
\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": "
\n
\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.
\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.
\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), nous avions du WIFI (probablement pas partout mais...) dans les établissements cibles à savoir :\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
\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 connaître l'emplacement d'un objet dans un espace confiné comme un EHPAD.\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> 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, l'installation étant jugée beaucoup trop coûteuse pour la proposer aux établissements les moins friqués (et cibler les établissements les plus riches n'était pas notre objectif).\n\n> La détection de chutes avec une Kinect, c'est pareil, 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à (je fais appel aux tréfonds de ta mémoire en cours de 5ème si t'es pas belge avec ton prof de Math mon Billy !)\n
\n\n
\n
\n\n## [ARTICLE EN ATTENTE D'ÉCRITURE...]\n\n> S'il y a un like ou un commentaire, promis je termine cet article...\n
\n
", "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
\n\n## [ EN COURS D'ÉCRITURE... ]\n
\n
\n
\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
\n
\n\n
\n
\n\n
\n
\n\n\n \n \n \n \n \n \n \n \n \n \n \n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NomTypeImageVidéoAutreFormuleStockageLimitAudienceCompatibleAPI
Firebase StorageCloud✔≠✔Freemium1Go1GB/jour 10GB/mois❌✔✔
Google Cloud StorageCloud✔≠✔Freemium5 Go❌✔✔
DropBoxCloud✔≠✔Freemium2Go1GB/jour 10GB/mois❌❌✔
Google DriveCloud✔≠✔Freemium 15 GB1GB/jour 10GB/mois❌❌❌
One DriveCloud✔✔✔Freemium5 GB1GB/jour 10GB/mois❌✔✔
Amazon StorageCloud✔✔✔Payant+/_ ∞+/- ∞❌✔✔
pCloudCloud✔✔✔Freemium∞∞❌❌✔
FacebookRS✔✔❌Free∞∞✔+/-+/-
PinterestRS✔+/-❌Free∞∞✔✔✔
BehanceRS✔❌❌Free∞∞✔✔❌
DribbbleRS✔✔❌Free∞∞✔✔✔
YoutubeRS❌✔❌Free∞∞✔+/-+/-
DailymotionRS❌✔❌Free∞∞✔+/-+/-
VideasRS❌✔❌Freemium10 Go75 GB / month✔+/-+/-
VimeoRS❌✔❌❌6$/month5 Go/semaine∞✔+/-+/-
SproutRS❌✔❌❌$24.99/month5 Go/semaine∞❌+/-+/-
WistiaRS❌✔❌Freemium❌3 vidéos max∞❌+/-✔
BrighcoveCloud❌✔❌❌??$∞∞❌+/-✔
\n
\n
\n\n
\n
\n\n
\n\n
\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
\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> Donc pourquoi Pinterest :\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
\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
\n
\n", "tags": [ "cloud", "stockage", "médias", "image", "video" ], "category": "integration", "id": "MAHH4lF9qk6lgVD7xYIX", "words": [] }, { "markdown": "\n
\n
\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
\n
\n
\n
\n
\n\n# [ 🤓 En cours d'écriture...]\n
\n
", "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": "[ FAKE NEWS ]\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 population encore plus abrutie et stupide que les personnages du film Prometheus qui mettait en scène des personnages totalement crétins et prenant tous des décisions ridicules, profondément grotesques et avec un raisonnement proche du néant absolu.\n\nCeci n'est qu'un article test extrait du GORAFI, histoire d'avoir un peu de texte et de pouvoir travailler sur WordLab...", "publication": "2020-03-21", "short_description": "[FAKE NEWS]\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 population encore plus abrutie et stupide que les personnages du film Prometheus qui mettait... ", "author": { "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92" }, "label": "La population de tout un pays réussit le record d’être encore plus stupide que les perso", "url": "la-population-de-tout-un-pays-reussit-le-record-detre-encore-plus-stupide-que-les-perso", "picture": "https://i.pinimg.com/564x/54/92/6d/54926d63a29125910d0b642a984c8500.jpg", "markdown": "", "id": "O0yboV87svY9RjRu4nAo", "words": [] }, { "category": "intégration", "tags": [ "Bige", " brick", " premier article" ], "intro": "Salut Billy,\nAujourd'hui j'ai écris quelques services et posé les formulaires pour écrire du contenu sur Bige, donc je test en écrivant ce petit texte...\n\nLa petite spécificité c'est que les articles sont un mix entre du markdown (parce que j'aime beaucoup ce langage) et de l'html5 (pour palier des besoins spécifiques et mieux gérer le responsive etc).\n\nPas grand chose à raconter ici, je mettrais à jour cet article pour pointer vers les différentes composantes de la gestion des articles et de l'API lorsque les autres contenus auront avancés...\n\nDonc reviens par ici plus tard, on va parler de plein de trucs sympa...\n", "publication": "2020-03-21", "short_description": "Un article pour tester l'API article de Bige, je viens de créer les services pour la gestion d'articles donc ceci n'est pas vraiment un article mais plutôt un test d'écriture depuis l'API. 2jours pour écrire l'interface et l'API ça vaut bien un petit ...", "author": { "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92" }, "label": "Poser une première brique (...) pas évident Billy", "url": "poser-une-premiere-brique--pas-evident-billy", "picture": "https://i.pinimg.com/564x/7c/fb/19/7cfb191e095c598b444bf01a2a2be122.jpg", "markdown": "", "id": "PJ2Lmyibja5oXtRm01kf", "words": [] }, { "markdown": "", "category": "divers", "tags": [ "covid19", "try", "die" ], "intro": "Le Covid-19 meurt à 60°C. Ça veut dire que le responsable de tout ce merdier n’a même pas pris la peine de faire cuire son pangolin (dans ce cas-là c’est un gros degueulasse) ou alors que c’est un adepte de la cuisson basse température (et dans ce cas c’est un sacré gourmet).\n", "publication": "2020-04-04", "publicated": false, "short_description": "Le Covid-19 meurt à 60°C. Ça veut dire que le responsable de tout ce merdier n’a même pas pris la peine de faire cuire son pangolin (dans ce cas-là c’est un gros degueulasse) ou alors que c’est un adepte de la cuisson basse température (et dans ce ...\n", "author": { "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92" }, "label": "question de cuisson covid19", "url": "question-de-cuisson-covid19", "picture": "en attente", "id": "Yl8XLifUmVNXQ4QKbNOi", "words": [] }, { "intro": "Salut Billy,\nDans cet article on va parler d'animation d'émojis sur mesure pour la boîte à réaction de Bige.\nParce qu'un émoji vaut parfois mieux qu'un long commentaire, je me suis amusé à animer quelques émojis de façon à ce que tu puisses cliquer dessus et me livrer ton émotion si jamais un des articles t'en procure évidement (ce qui n'est pas gagné...)\n\nDonc, c'est un second article sur le sujet, le premier étant basé sur le design de ces Emojis pour Bige.\n\nIci on va s'attarder sur les animations, comment c'est fait et comment passer d'Illustrator vers After Effect pour obtenir des SVG animés digne de ce nom et prêt à l'emplois pour du cross plateforme avec BodyMovin et Lottie la librairie d'animation de AirBNB.", "publication": "2020-03-31", "short_description": "En bas des articles, j'avais commencé par intégrer un Rating avec des étoiles ou des coeurs puis je me suis dit que c'était triste du coup j'ai fait une boîte à réaction :-)\nLe but de cet article c'est de te parler de la conception des animations...", "author": { "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92" }, "url": "les-animations-emotionnelles-pour-la-reactive-box-de-bige", "label": "Les animations émotionnelles pour la Reactive Box de Bige", "picture": "https://i.pinimg.com/564x/bf/dc/61/bfdc61b263724682fae60d0dba96da17.jpg", "markdown": "", "category": "motion", "tags": [ "emojis", " animation", " lottie", " airBNB", " bodyMovin" ], "id": "eD4UE2ejqBodQtBQGXPP", "words": [] }, { "category": "design", "tags": [ "graphisme", " logo", " bige" ], "intro": "dlscndskjqcn sjc sjqnc onsd cqnsdmcodsqjlncmsdnqcmlnsd clm sdnclmn", "publication": "2020-03-21", "short_description": "dqcsdcjsdqc sd qcibsqdpi chbsqicb sdi bcisd hbc isdbq cibcj", "author": { "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92" }, "url": "conception-du-logo-pourquoi-ce-logo-bige-la-reponse-ici", "label": "Conception du logo, pourquoi ce logo Bige? la réponse ici...", "picture": "https://i.pinimg.com/564x/bf/27/34/bf2734351279043d12efcb01ad1c504a.jpg", "markdown": "
\n\n## Avant propos\n\ndsqcsdc sc qcsdcsd\n
\n\n\n
\n\n\n\n> Né en 1982 ;-)\n
\n
\n\n> scscsqcsdc sdc. sqcs\n\n
\n\n
\n
\n\n
\n\n## [ EN COURS D'ÉCRITURE ... ]\n
", "id": "nXQIuoZ5nN0aRihEfRFW", "words": [] }, { "author": { "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92" }, "label": "To parse in Array or to parse as object that is the question?", "url": "to-parse-in-array-or-to-parse-as-object-that-is-the-question", "picture": "a venir", "markdown": "", "category": "integration", "tags": [ "array", "object", "javascript" ], "intro": "je travaille sur WordLab et le dilemme en deux points c'est :\n- To parse in Array or to parse as object that is the question?", "publication": "2020-04-02", "publicated": false, "short_description": "je travaille sur WordLab et le dilemme en deux points c'est :\n- To parse in Array or to parse as object that is the question?", "id": "pcdKaIQaRmZZEGaFmhAg", "words": [] }, { "markdown": "
\n
\n\n## Allons-y gaiement !\n\n> On va commencer par la loop native simple en javascript, rien de fou seulement il faut savoir à quel moment utiliser quel type de loop...\n\n### le for() tout simple\n\n```\n// on a un tableau et on souhaite écrire chaque entrée dans la console\nconst myArray = [\"bonjour\", \"hello\", \"Nirao\", \"Holà\", \"Sabaidi Mayé\", \"Apa Kabar\"]\n\nfor (var i=0; i {\n console.log(entry);\n});\n// bonjour\n// hello\n// Nirao\n// Holà\n// Sawat di Khrap\n// Apa Kabar\n```\n\n### La différence entre for et forEach\n\n> les différences sont longues à lister mais voici les principales différences de façon très simple:\n- le contexte :\n - le for s'exécute dans le même contexte que son parent donc : this = son parent\n - le forEach crée un nouveau contexte donc : this = lui même\n- la perf\n - contrairement à ce que beaucoup pensent le for est moins coûteux qu'un forEach pour la simple et bonne raison qu'il n'écrit pas de nouveau contexte e mémoire.\n- le reste est dans le nom :\n - le for indique pour la longueur.\n - le forEach indique pour chaque élément.\n\n\n### Le for in\n\n> L'objet For ne prend pas toujours une variable incrémentale en paramètre par exemple :\n\n```\nconst myArray = [\"bonjour\", \"hello\", \"Nirao\", \"Holà\", \"Sabaidi Mayé\", \"Apa Kabar\"];\n\nfor (let item in myArray) { console.log(`${item} - ${myArray[item]}`); }\n// 0 - bonjour\n// 1 - hello\n// 2 - Nirao\n// ... - etc\n```\n\n> Tu vas me dire aucun interêt et tu as peut-être raison car cet exemple est basé sur un Array de type String.\n> Seulement si tu fais un for in sur un gros volume, tu verras que c'est moins couteux en mémoire qu'un for qui incrémente une variable publique comme dans le premier exemple.\n> D'autant que dans cet exemple, j'ai utilisé un \"let\" plutôt qu'un var et nous en parlerons plus bas dans l'article (...)\n> L'autre interêt du for in c'est d'itérer sur un type Objet plutôt qu'un Array donc si tu écris par exemple :\n\n```\nconst myObject = {fr:\"bonjour\", en:\"hello\", ch:\"Nirao\"}\n\nfor(let item in myObject) {\n console.log(item, \" => \", myObject[item]);\n}\n// fr => bonjour\n// en => hello\n// ch => Nirao\n```\n\n> Intéressant non ? donc le for in sait itérer sur des Array et / ou des objets et de façon pas trop crados....\n\n
\n\n
\n\n> Rien de fou me diras tu ! Et si j'ai mis cet exemple c'est uniquement pour l'exemple suivant car comme tu le sais il y a une tripotée de façons d'arriver aux mêmes objectifs seulement il en existe certaines qui sont plus propres que d'autres selon le contexte dans ton applicatif donc voici un autre moyen d'arriver au même résultat avec un forEach sur un type Objet.\n\n```\nconst myObject = {fr:\"bonjour\", en:\"hello\", ch:\"Nirao\"}\n\nObject.keys(myObject).forEach(item => {\n console.log(`${item} => ${myObject[item]}`);\n});\n// fr => bonjour\n// en => hello\n// ch => Nirao\n```\n\n> You got two choices AND the result feel to be the same one so...\n> Exactement le même résultat exception faite que tu viens de créer un nouvel objet dans ton garbage collector donc c'est moins bien car plus coûteux en mémoire... \n\n### Un dernier exemple de for juste pour la forme\n\n> Toujours bon à savoir, dans les exemples précédents nous avons fait des boucles sur des tableaux et des objets, et que se passe-t-il si on fait un for sur un type String ?\n\n```\nconst myString = \"Bonjour\"\n\nfor (let item in myString) {\n console.log(item);\n}\n\n// B\n// o\n// n\n// j\n// o\n// u\n// r\n```\n\n> Donc le for s'applique aussi bien sur un type String, il va simplement itérer sur chaque caractères au lieu d'une clé d'objet ou de l'entrée d'un tableau (intéressant ? pas trop j'avoue ça dépend de ton niveau...)\n\n### Conclusion de la première partie \n\n> Moins tu crée de contextes et plus tu optimise l'écriture de variables et au plus ton code sera légé lors de son exécution donc ton client sera plus content et l'objectif d'un front c'est que ton utilisateur soit heureux, ceci dit c'est pas valable partout seulement et globalement un \"for\" ça coûte moins cher qu'un \"forEach\" et un \"let\" moins cher qu'un \"var\", ok ok je ne te l'ai pas dit mais le \"let\" n'es qu'une inclusion dans un objet et n'aura pas d'occurence en dehors de son parent contrairement au \"var\" qui va traîner dans ta mémoire vive et donc ton \"garbage collector\" de façon récurrente. (c'est un autre sujet donc ZAAAAAP, on parlera notamment de request animation frame dans un autre article... )\n\n
\n\n
\n\n## Trier des objets (c'est facile Billy!)\n\n> Ce que j'ai souvent trouvé dans des projets, ce sont des filtres appliqués dans des loops donc dans ce deuxième volet, nous allons nous intéresser au \"filter\" et à l'objet \"map\" d'ecmascript depuis sa version 4, qui bien souvent vont t'économiser des loops inutiles.\nNote bien billy qu'il n'y a rien de neuf dans ce que j'écris, ce ne sont que des notions qui existent depuis bien trop longtemps et que trop peux de dev. appliquent\n\n### Les filtres\n\n> Prenons un cas précis, tu as un objet qui comprend plusieurs utilisateurs avec leur âge et tu souhaites récupérer un objet en sortie qui ne contient que les utilisateurs ayant 18 ans tout rond.\n\n#### Voici ce que j'ai trop souvent vu et ce qu'il ne faut pas faire :\n
\n\n```\nconst users = [{name:\"Simon\", age:38}, {name:\"Pierre\", age:18}, {name:\"Charles\", age:18}];\nvar 18yearOld = [];\nfor (var i=0; iseulement c'est cracra...\nDonc voici comment obtenir le même résultat de façon propre avec le proto \"filter\" de l'objet \"Array\" :\n\n```\nlet users = [{name:\"Simon\", age:38}, {name:\"Pierre\", age:18}, {name:\"Charles\", age:18}]\n .filter(item => item.age === 18);\n\nconsole.log(users);\n// [{name:\"Pierre\", age:18}, {name:\"Charles\", age:18}]\n```\n\nTu vois c'est tout de même plus élégant, plus rapide à écrire et bien moins coûteux en mémoire !\nÉlémentaire mon cher Billy !\n\nBon les filtres on va y revenir plus tard sur des cas un chouïa plus avancés, pour le moment c'est suffisant pour ne plus jamais écrire un for pour appliquer un filtre on est d'accord ?\n\n### L'objet Map, avant de parler d'Array.map\n\n> Pourquoi mapper des objets ?\n> On va prendre un cas concret, ton client t'as refilé un json un peu bancale et au lieu d'écrire des clés => valeur, il t'as refilé un gros tableau avec des clés => valeurs comprises dans des sous-tableaux sauf que tu voudrais simplement un Json pour pouvoir récupérer les valeurs avec un point...\n\n```\nlet maMap = [['key1', 'value1'], ['key2', 'value2']]\n\n// Nous allons utiliser l'objet Map pour en faire un JSON de sortie clé => valeur\nmaMap = new Map(maMap)\nconsole.log(maMap);\n// {\"key1\" => \"value1\", \"key2\" => \"value2\"}\n\n// pour récupérer ta valeur d'entrée en array c'est possible :\nconsole.log([...maMap])\n// [['key1', 'value1'], ['key2', 'value2']]\n\n// Avec Map, tu peux récupérer les clés mappées en Objet\nconsole.log(maMap.keys());\n// {\"key1\", \"key2\"}\n\n// Sinon tu peux simplement récupérer les clés mappées en tableau\nconsole.log(Array.from(maMap.keys()))\n// [\"key1\", \"key2\"]\n\n// Et surtout tu peux demander la valeur de chaque clés simplement comme ça :\nconsole.log(maMap.get(Array.from(maMap.keys()[0]);\n// value1\n\n// Et également mettre à jour la valeur d'un clé\nmaMap.set(Array.from(maMap.keys()[0], \"Test de mise à jour\");\nconsole.log(maMap.get(Array.from(maMap.keys()[0]);\n// Test de mise à jour\n```\n
\n\n\n\n#### Et ouais mon Billy, elle même le sait !\n
\n\n
\n\n> Tu l'auras compris, si tu devais faire des Loop pour parser tout ça ce serait super cracra et interminable d'autant que ta mémoire vive en prendrait un gros coup dans la tronche...\n\n> Pour finir avec l'Objet Map et c'est généralement pour ça que je l'utilise c'est pour sa faculté à savoir merger des tableaux par exemple :\n\n```\nlet numbers = new Map([\n [1, 'one'],\n [2, 'two'],\n [3, 'three'],\n])\n\nlet numeros = new Map([\n [1, 'uno'],\n [2, 'dos']\n])\n\n// dans le cas du merge c'est la dernière entrée qui gagne...\nlet merged = new Map([...numbers, ...numeros, [1, 'un']])\n\nconsole.log(merged.get(1)) // un\nconsole.log(merged.get(2)) // dos\nconsole.log(merged.get(3)) // three\n```\n\nEt ça, je sais pas toi mon Billy mais moi je commence à trouver ça cool !\n\n### Parlons des Array.map \n\n> C'est franchement différent de l'objet map, ici on se rapproche plutôt du \"filter\" sauf qu'évidement le cas d'usage n'est pas le même s'il permet d'arriver parfois au même résultat !\n> \"Same Same but different\", je sais pas pourquoi le Thaïlandais disent toujours ça mais je trouvais ça rigolo...\n> Donc pour expliquer L'Array.map on va imaginer que tu dois calculer un Double sur un long array, donc tu pourrais faire un for et multiplier par deux en parcourant tout tes objets ou alors tu peux mapper ton tableau comme suit :\n\n```\nlet userAges = [{name:\"Simon\", age:12},{name:\"Pierre\", age:13}];\nuserAges = userAges.map(item => { \n item.age = item.age*2; return item; \n});\nconsole.log(user... (10024 total length)", "category": "integration", "tags": [ "array", " loop", " javascript" ], "publicated": false, "publication": "2020-03-10", "intro": "Durant des années, j'ai croisé une multitude de profils allant des plus NOOBS (qui a l'envie de savoir), aux plus confirmés (qui ne testent plus rien et utilisent toujours les mêmes méthodes sans jamais arriver aux mêmes fins...) bref, je n'ai pas la science infuse et sur cette page, je vais vous partager les basiques de basiques car bien qu'il existe des librairies comme underscore ou lodash, c'est bien aussi de savoir faire sans...\n\nL'idée c'est pas de donner des leçons, c'est simplement de retrouver facilement les basiques qu'un front-end devrait savoir et appliquer ( La Bige... )\n\nDonc on va parler de tableaux, d'objets et de comment les filtrer de façon propre et élégante ( en js pardon... ) car qui n'a jamais souhaité que son langage favori puisse trier, filtrer ou encore réunir selon ses propres besoins et de façon native ?\n\nEt qui n'a jamais émis l'hypothèse que ce soit possible sans charger des libs ultra lourdes ?\n\nAussi, qui ne s'est jamais demandé comment faire simplement avec juste un peu de savoir ?", "short_description": "Durant des années, j'ai croisé une multitude de profils allant des plus noobs (qui a envie de savoir), aux plus confirmés (qui ne test plus rien et utilise toujours les mêmes méthodes sans jamais arriver aux mêmes fins...) bref, je n'ai pas la science(...)", "author": { "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92", "name": "simon delamarre" }, "label": "BULLSHIT array loop en javascript, les basiques du savoir pour arrêter...", "url": "bullshit-array-loop-en-javascript-les-basiques-du-savoir-pour-arreter", "picture": "https://i.pinimg.com/originals/09/28/a0/0928a022b62fa1d58c83dd920fc1f113.jpg", "id": "pyf1PxA4Jv5DKbXYKpTk", "words": [] }, { "short_description": "Comme tout à chacun, tu t'es déjà dit \"Je publierais bien un package sur YARN ou NPM\", seulement t'as tapé une recherche du style \"publish public npm package\" et tu es tombé dans les tréfonds d'une documentation qui est certes super bien foutue mais qu...", "author": { "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92" }, "label": "Écrire et publier ton premier package sur NPM, c'est EASY!", "url": "ecrire-et-publier-ton-premier-package-sur-npm-cest-easy", "picture": "https://i.pinimg.com/564x/91/90/bf/9190bfe4b3a9fd0c93d335099d64ce64.jpg", "markdown": "
\n
\n\n## Les pré-requis :\n - Avoir un compte sur NPM (easy !)\n - Avoir un compte Git ( ici ce sera Github mais je ne suis pas sectaire... )\n - Savoir écrire une classe étendue (jusqu'ici tout va bien j'espère!)\n - Savoir utiliser Babel et Webpack (parce que tu vas l'écrire en ES6 vu que t'es un Bonhomme mon Billy ;-)\n\n### Step #1 : \n\n> Pour commencer dis toi bien que t'es sur un nouveau projet et que comme chacun de tes projets (du moins j'espère) tu vas créer un repository tout beau tout neuf, donc rends toi sur ta plateforme favorite et crée ton repo, \"LA BASE\"\n\n> Et pas trop vite chaque chose en son temps...\n> On va initialiser ton repo juste après le petit check de la Step #2\n\n### Step #2 (oui je parle beaucoup, c'est pour avoir des mots pour le SEO...)\n\n> Aujourd'hui tu vas publier sur NPM, je pourrais faire la même chose sur l'ensemble des packages manager existants dans tous les langages seulement faut bien commencer quelque part donc on va pousser ton projet javascript sur NPM pour et ce sera déjà bien pour aujourd'hui.\n\n> Si t'as pas de compte NPM, t'attends quoi Billy ?\n> - Rends-toi sur [NPM](https://www.npmjs.com/) et hop SIGNIN !\n> - Logiquement c'est ton premier paquet donc dans ton onglet package tu as une jolie page blanche...\n> - Si tu as ton compte validé, dis toi que le plus difficile est fait !\n\n### Step #3 : LETS GO !\n\n> Pour l'exemple on va faire un truc super utile qui consiste à contrôler cette question :\n
\n> \"Est-ce que c'est l'heure de l'apéro ?\" \n\n> Et oui Billy, je sais que les journées sont longues pendant le COVID19 seulement tu vas pas te mettre à picoler dès le matin !\n\n> Donc en attendant le retour des After Work avec tes geekos de collègues et ton pote le collègue de bureau farceur (si ce n'est pas toi...), voilà comment organiser ton projet NPM dans le bon ordre :\n\n#### initialize ton repo GIT en local\n\n\n```\ntouch README.md\necho \"# c'est quand que c'est l'apero\" > README.md\ngit init\ngit remote add origin \"adresse_te_ton_repo\"\ngit add README.md\ngit push -u origin master\n```\n\n\n> Bon ça c'est au cas ou tu saurais pas Giter mais bon (...), je te fais confiance si tu veux écrire un package tu dois déjà tout savoir sur la création de repository GIT...\n\n#### Initialise ton package NPM\n\n> Pour bien commencer crée ton package NPM, en une ligne de commande tu vas obtenir un fichier nommé package.json dans lequel il y aura tout ce dont NPM a besoin pour publier ton paquet qui est devenu super important puisqu'il dit : \"c'est quand l'apéro\".\n\n> Quand t'as créé ton compte NPM Billy, tu as choisi un username...\n> Fais appel au tréfonds de ta mémoire court terme car c'est maintenant que tu vas en avoir besoin...\n\n```\nnpm init --scope=@ton-nom-d-utiliisateur-sur-npm\n```\n\n```\npackage name: (@ton_pseudo/github) cestquandlapero\nversion: (1.0.0) [ENTER] (ui rien ne sert de dire 0.0.1 la version beta c'est 1.0.0)\ndescription: c'est quand que c'est bientôt l'heure de l'apero ?\nentry point: (index.js) /lib/index.js\ntest command: npm run test\ngit repository: https://adresse_te_ton_repo_sur_ton_git_prefere\nkeywords: apero,quand,heure,bientôt\nauthor: ton petit nom mon billy\nlicense: MIT\n``` \n\n> Petite parenthèse sur pourquoi MIT ou ISC, en gros ton package mon Billy il va être public dans cet exemple et libre par la même occasion donc sauf exception et si tu es en train de révolutionner l'avenir de l'humanité tu met MIT, c'est pour dire au reste du monde qu'ils ont aussi le droit de savoir \"c'est quand que c'est bientôt l'apéro ?\"...\nPS : Pour moi ce sera pas avant d'avoir fini cet article donc hophophop on se dépêche...\n\n> Après avoir répondu à ces questions, tu dois trouver à la racine de ton projet un package.json qui ressemble à ça :\n\n```\n{\n \"name\": \"@ton_pseudo/Nom_de_ton_package\",\n \"version\": \"1.0.0\",\n \"description\": \"La description que tu as entrée\",\n \"main\": \"dist/cestquandlapero.js\",\n \"directories\": {\n \"lib\": \"lib\",\n \"test\": \"test\",\n \"bin\": \"bin\"\n },\n \"scripts\": {\n \"test\": \"npm run test\",\n \"build\": \"npm run build\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"git+https://github.com/tonpseudo/nomdetonrepository.git\"\n },\n \"keywords\": [\n \"KEYWORD1\",\n \"KEYWORD2\"\n ],\n \"author\": \"Ton petit nom\",\n \"license\": \"ISC\",\n \"bugs\": {\n \"url\": \"https://github.com/tonpseudogithub/nomdetonrepo/issues\"\n },\n \"homepage\": \"https://github.com/tonpseudogithub/nomdetonrepo#readme\",\n \"devDependencies\": {\n \"@babel/core\": \"^7.6.0\",\n \"babel-loader\": \"^8.0.6\",\n \"webpack-cli\": \"^3.3.8\"\n }\n}\n```\n\nA cet instant et pour les tests je te suggère de modifier ce package.json en remplaçant la commande de test :\n\n```\n// remplacer :\n{\"test\": \"npm run test\"}\n// par la ligne suivante :\n{\"test\": \"node --experimental-modules test/\"}\n```\n\n> L'idée c'est que pour tes test et ton debug le script s'exécutera avec Webpack en mode expérimental, ça t'évitera bien des soucis inutiles (...)\n\n#### LETS GO TO CODE !\n\n> Avant tout voici l'arborescence souhaitée et attendue :\n\n```\n-- NOM_DE_TON_REPO_LOCAL\n |- /lib\n |---- CestQuandLapero.class.js\n |- /test\n |---- index.mjs\n |- /bin\n |---- CestQuandLapero.build.js\n |- README.md\n |- pachage.json\n |- pachage-lock.json\n |- .babelrc\n |- .npmignore ou .gitignore\n```\n\n> Petite remarque, l'extension de ton script de test est bien \".mjs\" et non \".js\" c'est le script qui sera exécuté en mode expérimental avec WebPack pour tester ton plugin en local dans cet exemple ( aussi parce que j'ai la flemme de t'expliquer comment faire des tests unitaires et t'en aura pas besoin mon Billy, sinon j'utilise CHAI pour l'ES6 mais y'en a d'autres... ).\n\n##### installation des dépendance pour ton dev\n\n> OK on a pas besoin de dépendances pour le projet mais uniquement pour ton dev voici le minimum requis pour te simplifier la vie :\n\n```javascript\nnpm i @babel/core babel-loader webpack-cli --save-dev\n```\n\n##### Écriture de ta classe\n\n> Tout cet article consiste en l'exploitation de cette classe qui va dire au monde entier : \"c'est quand que c'est bientôt l'heure de l'apéro\" donc c'est ici que ça se joue Billy :\n\n\n```\n\"use strict\";\nimport Messages from \"./messages\" // dans cette dépendance on va trouver tes messages pour savoir si c'est l'heure de l'apéro...\nclass CestQuandLapero { // tu met le nom que tu veux seulement met des caps à chaque mot...\n constructor(hour, _Observer) {\n this.hour = (hour) ? hour : new Date.getTime();\n this._Observer = _Observer // un observer qui va te servir à envoyer les MAJ à ton code\n this.status = \"bah, je sais pas moi !\" // un status par default\n }\n // Getters -> pour interroger la classe\n get cestQuand() {\n return this.status;\n }\n // Setters -> les modifier des paramètres dans ton instance de classe\n set apero(hour) {\n this.hour = hour;\n }\n // Methods -> les fonctions qui sont le coeur de ton plugin...\n aperoStatus() {\n /** \n * ici on va checker l'heure pour savoir si c'est bientôt l'apéro ou pas\n * Le paquet sera publié pour plus de détails sur la classe en question\n * Ici on ne vas pas commenter ce code simplement expliquer comment publier\n **/\n return this.status;\n }\n}\n```\n\n\n## Tester ton package\n\n> Logiquement pour les tests tu devrais les écrire avec CHAI par exemple, ici on va faire simple parce que notre classe est vraiment très simple et n'embarque pas d'API complexe.\n\n> Donc nous allons simplement écrire un .js qui va charger la Lib puis lui demander si c'est l'apéro (ou pas) :\n> Ce fichier test c'est celui que tu as indiqué entant que commande de test dans ton package.json, si tu ne l'as pas changé ce devrait être /test/index.mjs\n\n\n```\n\"use-strict\"\nimport apero from \"../dist/cestQuandLapero.class\"\n\nconst Apero = new apero.CestQuandLapero(\n new Date.getTime(),\n function(e) {\n console.log(\"Réception d'un évènement depuis apéro => \", e);\n }\n);\n\n// Pour tricher quand c'est pas l'heure tu peux la modifier avec le setter\nApero.set('hour', new Date.getTime() + (2*60*60*1000));\n\n// Et si tu as envie de savoir à l'instant si c'est l'heure tu appelle la method :\nconsole.log(Apero.aperoStatus());\n// Qui en l'état ne retourne que => \"bah, je sais pas moi !\"\n```\n\n\n## Publier ton package\n\n> Maintenant que tu as écris ta classe et qu'elle est testée, tu n'as plus qu'à publier.\n- pense à push sur ton repo git avant\n- pense aussi à incrémenter le numéro de version dans le package.json\n- puis tape cette commande toute simple pour publier :\n\n
\n\n```\n$ npm publish --access public\n```\n\n> That's ALL !\n> Maintenant le monde entier pourra savoir si c'est l'heure de l'apéro !\n
\n\n\n", "category": "technology", "tags": [ "NPM", " package", " get started" ], "publicated": false, "intro": "Salut Billy,\nAujourd'hui t'as l'air décidé à publier un package sur NPM !\nEt je t'encourage à le faire évidement donc on va regarder ensemble comment organiser ton projet pour bien débuter.\n\nSi tu suis la recette à la lettre dans 10 minutes t'auras écris ton package et il sera prêt à l'emploi directement dans ton projet en cours donc un peu d'attention s'il te plaît !\n\nPasse à la cafét. pose ton mug tout chaud à proximité de ton clavier en faisant bien attention de ne pas le renverser et avant tout n'oublies pas de verrouiller ta machine si tu ne veux pas que ton collègue de bureau farceur ne mette ses mains dans ton agenda (...)\n\nJ'imagine que le plus dur est fait et que tu as déjà une idée, j'espère juste que tu n'as pas déjà passé trois jours à pisser du code avant de t'être dit :\n\"Merde, j'ai besoin de ce code dans un autre projet et si je copie colle mon code d'un projet à l'autre je vais devenir ZINZIN !\"\n\nEt comme à priori c'est ton premier paquet on va l'écrire en JS et pas en TS, parce que j'ai pas envie de m'en mettre une couche et hop : \"C'est parti !\"", "publication": "2020-03-27", "id": "siu9qUqeSHEF7IGRgt4M", "words": [] }, { "intro": "c'est quoi KANBAN\net c'est quoi SCRUM\n\non va en parler", "publication": "2020-04-02", "publicated": false, "short_description": "c'est quoi KANBAN\net c'est quoi SCRUM\n\non va en parler", "author": { "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92", "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx" }, "label": "KANBAN - une des méthodes du SCRUM", "url": "kanban---une-des-methodes-du-scrum", "picture": "adefinir", "markdown": "", "category": "uiux", "tags": [ "UX", "KANBAN", "SCRUM" ], "id": "vOPzw7adOtNeTJkxUtuw", "words": [] }, { "intro": "L'écriture d'un design system, ça peut prendre des plombes et on a toujours peur de demain quand on le crée du coup et comme personne n'arrive jamais à se mettre d'équerre sur les principes de base, généralement on en fait pas et après c'est le drame plus personne ne sait comment ou encore moins quoi faire...\n\nDans cet article, nous allons parler de Design System parce que j'ai souvent vécu des projets ou tout est parti d'une bonne intention puis des stagiaires se sont mis à répondre à des demandes sans être orientés et ont créé des éléments graphiques s'éloignants de plus en plus de la source du concept ou produit. L'écriture d'un design system est un bon moyen de palier ce problème, il consiste à en définir le fonctionnement...\n\n", "publication": "2020-03-21", "short_description": "Dans cet article, nous allons parler de Design System, j'ai souvent vécu des projets ou tout est parti d'une bonne intention puis des stagiaires se sont mis à répondre à des demandes sans être orientés et ont créé des éléments s'éloignants de plus en...", "author": { "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92" }, "label": "Un Design System pour bige, recherche graphique et traitement de style", "url": "un-design-system-pour-bige-recherche-graphique-et-traitement-de-style", "picture": "https://i.pinimg.com/564x/96/eb/eb/96ebeb05c08fc1eb9e67b021ff83f935.jpg", "markdown": "
\n
\n\n## C'est quoi un design système ?\n\n> Pour ceux qui n'ont jamais travaillé de design système ça s’apparente à une bibliothèque de composants et de principes de conception généralement visuels documentés et permettant aux designer de concevoir tout en. s'assurant de toujours parler le même langage. \n\n> Dans le numérique, cette bibliothèque est une sorte de référentiel définissant les principes en terme d'interface et d'expérience utilisateur son objectif étant notamment de faciliter le travail des équipes et de réduire la « dette design » et la « dette technique ». Il en résulte généralement un écosystème cohérent et donc une meilleure expérience pour ses utilisateurs.\n\n> Un design système c'est aussi l'image de ton projet/produit au travers du regard de tes utilisateurs il doit permettre en un clin d'oeil de reconnaître ou du moins classer ton activité dans le lexique imaginaire commun.\n\n> Par exemple dans l'univers de l'automobile, si je te parle d'une double calandre en aile d'abeilles tu devrais penser BMW et si je te parle d'un insigne circulaire qui sort du capot (...)\n> Ces signes distinctifs sont plus que de l'image de marque, ce sont des composantes d'un design système propre à ces marques et produits les ayant fait entrer dans le champs lexical et l'esprit commun.\n\n## Le besoin pour Bige.\n\n> Évidement Bige ce n'est qu'un petit projet de blog perso donc tu dois te demander pourquoi s'en mettre une couche avec un design système ?\n> Voici une liste de réponses à cette question :\n- Créer des visuels pour chaque articles ce serait ingérable\n- L'intégration c'est faite sans réflexion donc pour le gain de temps encore une fois\n- C'est le produit d'une matinée pour le moment. \n - Et depuis il m'a permis de décliner une dizaine de visuels en moins de 5 minutes chacun.\n - Donc encore pour gagner du temps\n\n
\n\n#### Avant de te lancer tête baissée sur ton éditeur graphique favori, poses-toi quelques questions !\n\n> Avant de me lancer, j'ai pris un petit instant pour savoir ce que je souhaite que les utilisateurs ressentent au travers des aspérités graphiques de ce Design Système Bige.\n\n> Bige s'adresse à un publique assez largeur néanmoins avec un dénominateur commun, l'objectif est de toucher des francophones dans un premier temps qui logiquement sont issus de métiers du numérique au sens large, il seront à fort potentiel des débutant et/ou des entreprises cherchant à en savoir plus sur mon profil qui n'est pas si atypique et qui pourtant nécessite certains détails concernant un savoir en développement web mobile et/ou cross plateforme, en recherche et développement ainsi qu'en design graphique, animation planification et gestion de projet.\n\n> Ce design system doit donc respirer la technologie tout en la rendant accessible au plus grand monde !\n\n> Less is More : Son graphisme se veut extrêmement simple et déclinable au moindre effort.\n\n> Le champs lexical attendu est : Technologie, Graphisme, Design, Atypique, Excentrique, Naïf, Accessible, Simple, Enfantin, Stable, Farniente, Mirò, Picasso, Contemporain (...)\n\n## Les couleurs\n\n> Avec ce champs lexical, la réflexion autour de la couleur s'est faite assez naturellement, la simplicité voudrait un minimum de couleurs et qu'elles soient proche du primaire pour le côté enfantin mais également en guise de clin d'oeil au travail de Mirò, La première source étant les deux infinis, depuis l'infiniment petit fragment de morceau de code à l'infiniment grand des espaces vide des constellations et projections de couleurs destinées à créer le lien et l'attention escomptée l'un de l'autre. Ces expressions graphiques se doivent d'être comme des hiéroglyphes ou encore des géométrie schématique très diverse. Celle-ci est en effet formée de points courbes, lignes droites, volumes oblongs ou massifs, cercles, carrés, etc. Les éléments qui forment ce langage, dans lequel nous devons accorder un intérêt identique pour le plus petit, l'invisible et les grands espaces visuels.\n\n> « Un brin d’herbe est aussi gracieux qu’un arbre ou une montagne ». Mirò\n\n#### Voici les couleurs choisies pour exprimer ceci :\n\n
\n
\n
\n
\n
Bleu Electrique
\n
L'épicentre des sujets tournent autour de la science du numérique, c'est donc la couleur de l'électricité qui est centre d'intérêt, elle se doit forte et présente sans devoir occuper beaucoup d'espace. Elle doit-être omniprésente sans prendre le dessus sur les composantes de lecture. Un bleu simplement identitaire.
\n
\n
\n
\n
\n
\n
Bleu stylo
\n
\"La fonction\"
Ce second bleu plus fort que le premier a pour fonction d'exprimer les concepts, il est l'écriture et peux prendre tout type de formes dans l'objectif de s'auto-suffire à la comprehension visuelle d'un concept quel qu'il soit.
\n
\n
\n
\n
\n
\n
Jaune Postit
\n
\"L'un des ingrédients du quotidien et pour les KANBAN du SCRUM et pour tout à chacun la prise de note, le postit c'est que tu es en train de lire en ce moment, des prises de notes sur les travaux et sur Bige. Dans les illustration comme dans la réalité, le Postit sera utilisé comme support d'écriture et d'assistance à la lecture.
\n
\n
\n
\n
\n
\n
Rouge Action
\n
Le rouge la couleur du sang mais aussi de l'action ! Le rouge ce sera également un clin d'oeil à Picasso et à ses taureaux. Il sera utilisé pour indiquer des masses puissantes aux endroits précis ou se déroulent les actions. Il tire légèrement sur une tonalité Fraise et pourquoi ? Parce que c'est bon, foutez moi tranquille !
\n
\n
\n
\n
\n
\n
Bleu de Maintien
\n
Ce n'est autre qu'un dérivé de notre bleu électrique descendu au maximum, il a pour objectif d'aider à la lecture sur la répartitions des masses, sa lisibilité est extrêmement faible, il sert de maintien à la structure, c'est un peu le ciment.
\n
\n
\n
\n
\n
\n
Bleu de Soutien
\n
Un demi ton supplémentaire pour indiquer des surfaces n'ayant pas pour autre objectif d'être lues, le soutiens c'est juste plus qu'un maintiens, il se lit superposé à son dernier et ne jure pas avec nos 4 ingrédients principaux.
\n
\n
\n
\n\n## Grid system\n\n> Avant de foncer tête baissée dans l'exploration de territoires d'expression, il fallait travailler sur la forme, comme dit plus haut l'un des principaux objectifs de ce design système est le gain de temps, donc pas question de passer des plombes à se masturber sur un pixel, un angle etc.\n\n> Pour cela, je commence généralement par un système de grille qui défini exactement les formes, leur tailles et leur justification dans l'espace. Voici la grille de Bige expliquée, juste pour infos Billy, si tu te lance pense au format, on va en reparler après et de préférence pense toujours à travaillé dans un multiple de 8 au carré...\n
\n
\n\n
\n
\n
\n\n
\n
\n \n
\n
\n
\n\n### Quelques explications :
\n[#1] C'est une découpe en 16 blocks de notre grille de 256p\n[#2] Cette subdivision en tangente va nous permettre de définir les fond perdus, si tu ne le sais pas tes icônes ne doivent jamais occuper 100% de l'espace pour plusieurs bonnes raisons liées à la typographie (...)\n[#3] On trace un cercle de 256 lui aussi et on en déduit l'espace perdu ici mathématiquement, c'est 38 pixel.\n[#4] L'attraction ou la déduction du point d'impulsion, ton regard doit toujours accrocher ce point et ne pas se détourner avant d'en avoir compris son sens...\n[#5] elle est spécifique à Bige, son idée c'est de placer les formes pures et logiques du design system.\n[#6] un rappel des bords perdus\n[#7] le carré parfait pour toutes tailles d'icônes\n[#8] le centre d'intérêt\n[#9] l'isocèle parfait\n[#10] la répartition magique des formes dans l'espace occupe 37.2% le matin de surface soit la température de ton corps hors COVID19, quand tu vas bien !\n[#11] confirmation du concept\n
\n\n
\n
\n\n
\n
\n\n\n\n
\n
\n\n> Le design Système Bige c'est quatre formes pour les quatre ingrédients et les quatre principales ... (10024 total length)", "category": "uiux", "tags": [ "design", "system", "graphisme" ], "id": "vj6OXpG6WLQnR6uPOlSc", "words": [] }, { "author": { "name": "simon delamarre", "avatar": "https://lh3.googleusercontent.com/a-/AOh14GiVBIBh-OcI59MJFyakSpxEB6qq_w51G0F4blQx", "id": "yb6jqdCJaBYIgKW4tGrtdI5RVB92" }, "url": "des-scopes-cryptes-pour-alimenter-un-classificateur-de-contenus-oh-yeah-", "label": "Des scopes cryptés pour alimenter un classificateur de contenus, OH YEAH !", "picture": "https://i.pinimg.com/564x/75/e1/d4/75e1d40032e69f55898044293875fa43.jpg", "markdown": "", "category": "technology", "tags": [ "scopes", " jwt", " RGPD" ], "publicated": false, "intro": "[ Article en cours d'écriture... ]\nPerso, savoir que tu joue au Bingo et que ton grand père fait du kite surf, je m'en passe volontiers dans mon quotidien !\n\nComme la vie privée nous a pété les mirettes depuis 2018 (enfin pour ceux qui l'ont appliqué), je me suis dit \"elle est ou la faille ?\" \n\nEn fait ce n'est absolument pas une faille puisque tes données restent simplement chez toi Billy !\n\nEn fait l'objectif de cet article c'est de démontrer que nous pouvons crypter des clés que les humains comme toi ne savent pas lire et qui pourtant vont permettre à des machines d'être plus proches de toi.\n\nAvant même ta première connexion la quasi totalité des sites internet commencent à cumuler différents facteurs destinés à constituer ton profil. Ensuite ces facteurs sont envoyés aux serveurs sur lesquels un tas d'ingénieurs talentueux s'occupent d'écrire des algorithmes destinés à comprendre au mieux les usages.\n\nN'y vois aucun mal car en réalité tout ce beau monde se fiche éperdument de qui tu es, de ce que tu manges ou de tes goûts vestimentaires...\n\nTout ce qu'ils essayent de faire, c'est améliorer leurs services pour te simplifier la vie.", "publication": "2020-03-15", "short_description": "Perso, savoir que tu joue au Bingo et que ton grand père fait du kitesurf, je m'en passe volontiers ! Comme la vie privée nous a pété les mirettes depuis 2018 (enfin pour ceux qui l'ont appliqué), je me suis dit \"elle est ou la faille ?\", donc je v (...)", "id": "wDYoYzza2gKAhITgBuyx", "words": [] } ]