[ { "content": "", "description": "…", "date": 1701160329, "image": "https://i.ytimg.com/vi/6m2XOgJwOJA/maxresdefault.jpg", "_tags": ["video"], "title": "Things You Don't Know About JavaScript in 2023 with CHRISTOPHE PORTENEUVE — SmashingConf Freiburg 23", "url": "/fr/video/things-you-dont-know-about-javascript-in-2023-with-christophe-porteneuve-smashingconf-freiburg-23/", "locale": "fr", "readingTime": "52:58" }, { "content": "4 jours pour apprendre à faire du web front moderne avec une productivité au top : ES2015+, React, Redux avec Redux Toolkit, TDD avec Jest, React Testing Library, React fast-refresh‚offline first, web notifications… et de la Progressive Web App !\n\nOn t'apprend les bonnes pratiques pour créer du code rigoureux et des applications maintenables et pérennes.\n\nLes dates des sessions et demandes de devis sont disponibles sur la page du programme : https://delicious-insights.com/fr/formations/react-pwa/", "description": "4 jours pour apprendre à faire du web front moderne avec une productivité au top : ES2015+, React, Redux avec Redux Toolkit, TDD…", "date": 1695197353, "image": "https://i.ytimg.com/vi/cMSFTttKvYA/maxresdefault.jpg", "_tags": ["react","pwa","redux","redux toolkit","progressive web app","jest","react testing library","offline first","typescript","video"], "title": "React PWA : la meilleure formation pour être efficace avec React", "url": "/fr/video/react-pwa-la-meilleure-formation-pour-etre-efficace-avec-react/", "locale": "fr", "readingTime": "1:40" }, { "content": "Sais-tu vraiment ce que fais un \"git pull\" et pourquoi c'est mieux de le faire en mode rebase ?\n\nGit gère notre travail local sur une branche et son équivalent distant sur une autre branche dont le nom est précédé du nom du dépôt distant. Par exemple : \"origin\".\n\nJusqu'à Git 2.38, le pull récupérait le travail de la branche distante et appliquait par défaut notre travail local en fusionnant notre branche locale dans la branche distante.\n\nC'est rarement ce qu'on veut. En général on considère que distant et local représentent la même branche et par conséquent que ça devrait rester \"en ligne droite\". C'est que propose le pull en mode rebase : on considère que la branche distante est source de vérité et on vient appliquer notre travail par-dessus ! \n\nEt voilà le travail ! \n\nLe truc chouette, c'est qu'on peut configurer tout ça une fois pour toute en faisant un \"git config --global pull.rebase merges\".", "description": "Sais-tu vraiment ce que fais un \"git pull\" et pourquoi c'est mieux de le faire en mode rebase ?\n\nGit gère notre travail local su…", "date": 1694343606, "image": "https://i.ytimg.com/vi/6OojYKfWAKY/maxresdefault.jpg", "_tags": ["git pull","git pull rebase","pull merge","video"], "title": "Ce RÉGLAGE GIT qui va CHANGER TA VIE", "url": "/fr/video/ce-reglage-git-qui-va-changer-ta-vie/", "locale": "fr", "readingTime": "0:56" }, { "content": "Tu pensais avoir créé une branche `dev` depuis `main` et tu as créé plusieurs commits avant de te rendre compte que tu étais toujours sur `main` et que ta branche n'avait pas été créée ? \n\nPas de problème ! \n\n- Il te suffit de créer ta branche à l'emplacement actuel en faisant un `git branch dev`, \n- puis de ramener la branche `main` à l’emplacement voulu X commits en arrière en faisant un `git reset --soft main~X` \n- et en te repositionnant sur ta branche `dev` avec un `git switch dev`. ", "description": "Tu pensais avoir créé une branche `dev` depuis `main` et tu as créé plusieurs commits avant de te rendre compte que tu étais tou…", "date": 1694257216, "image": "https://i.ytimg.com/vi/HWhFUBh9_Gs/maxresdefault.jpg", "_tags": ["git reset","git branch","video"], "title": "T'as OUBLIÉ DE BRANCHER avec Git ? ZÉRO. SOUCI.", "url": "/fr/video/tas-oublie-de-brancher-avec-git-zero-souci/", "locale": "fr", "readingTime": "0:39" }, { "content": "Défaire un rebase c'est simple comme bonjour !\n\nMême si on rejoue 100 commits, HEAD aura peut être subit autant de déplacements, mais l'étiquette de la branche, elle, ne sera déplacée qu'une seule fois à la fin de l'opération. Ça veut donc dire que pour annuler le rebase, on a juste à la ramener à son emplacement précédent.\n\nSi tu connais le reflog, tu dois savoir que cet emplacement c'est \"le-nom-de-ta-branche@{1}\". Et pour ramener une référence à une autre position, on a la commande reset (ici avec l'option `--keep`).\n\nIl suffit alors de faire, depuis la branche qui a bougé, un `git reset --keep le-nom-de-ta-branche@{1}` et le tour est joué !", "description": "Défaire un rebase c'est simple comme bonjour !\n\nMême si on rejoue 100 commits, HEAD aura peut être subit autant de déplacements,…", "date": 1694170824, "image": "https://i.ytimg.com/vi/KbsUgXxRQ-Y/maxresdefault.jpg", "_tags": ["git rebase","annuler un rebase","video"], "title": "ANNULER UN REBASE avec Git", "url": "/fr/video/annuler-un-rebase-avec-git/", "locale": "fr", "readingTime": "0:49" }, { "content": "Lorsqu’on lance un rebase en mode interactif, Git nous ouvre la liste des commits du plus ancien en haut au plus récent en bas dans un fichier textuel qu'on va pouvoir éditer pour renseigner les actions à mener sur chacun des commits.\n\nOn peut à peu près tout faire : déplacer, éditer, renommer, regrouper, supprimer des commits, et même plus encore si on veut rebaser des fusions…", "description": "Lorsqu’on lance un rebase en mode interactif, Git nous ouvre la liste des commits du plus ancien en haut au plus récent en bas d…", "date": 1694084414, "image": "https://i.ytimg.com/vi/KeCmrjoO1N8/maxresdefault.jpg", "_tags": ["git rebase","rebase interactif","video"], "title": "Git et la MAGIE du rebase interactif", "url": "/fr/video/git-et-la-magie-du-rebase-interactif/", "locale": "fr", "readingTime": "0:35" }, { "content": "Très souvent on utilise rebase pour modifier des commits sur notre branche actuelle. Pour ça on part du commit qui précède le premier commit à modifier et on lance un rebase en mode interactif. C'est comme tirer une branche vierge depuis cet emplacement sur laquelle on va appliquer les commits comme on veut.", "description": "Très souvent on utilise rebase pour modifier des commits sur notre branche actuelle. Pour ça on part du commit qui précède le pr…", "date": 1693998047, "image": "https://i.ytimg.com/vi/sisbYR9W96k/maxresdefault.jpg", "_tags": ["git rebase","rebase interactif","video"], "title": "Git rebase pour NETTOYER UNE BRANCHE", "url": "/fr/video/git-rebase-pour-nettoyer-une-branche/", "locale": "fr", "readingTime": "0:29" }, { "content": "Quand on rebase une branche, voici comment Git découpe l'opération :\n\n- Il analyse l'intervalle à rejouer.\n- Il détache HEAD sur la nouvelle base.\n- Il rejoue les commits les uns après les autres, avec d'éventuels conflits à arbitrer au fil de l'eau, et sans rejouer les commits dont les contenus serait déjà présents dans la nouvelle base.\n- Il finit en déplaçant l'étiquette de la branche rebasée sur le dernier commit rejoué et en il lui réattache HEAD ", "description": "Quand on rebase une branche, voici comment Git découpe l'opération :\n\n- Il analyse l'intervalle à rejouer.\n- Il détache HEAD sur…", "date": 1693911641, "image": "https://i.ytimg.com/vi/pkYa8BjPmCo/maxresdefault.jpg", "_tags": ["git rebase","étapes rebase","video"], "title": "Les étapes du rebase en Git", "url": "/fr/video/les-etapes-du-rebase-en-git/", "locale": "fr", "readingTime": "0:31" }, { "content": "Il arrive fréquemment qu'on ait besoin de mettre à jour une branche sur une autre. Par exemple, si j'ai une branche `main` qui a reçu une évolution dont j'ai besoin pour continuer ma branche `dev`, je vais vouloir faire comme une translation. C'est ce à quoi sert la commande rebase. Je peux alors faire un simple `git rebase main dev` et le tour est joué.\n\nOn pourrait faire ça en fusionnant le contenu de `main` dans `dev`, mais franchement, ça serait dégueu et nuirait à la lisibilité de l'historique !", "description": "Il arrive fréquemment qu'on ait besoin de mettre à jour une branche sur une autre. Par exemple, si j'ai une branche `main` qui a…", "date": 1693825241, "image": "https://i.ytimg.com/vi/vUhrINofUA0/maxresdefault.jpg", "_tags": ["git rebase","git mettre à jour","video"], "title": "Mettre à jour une branche avec Git rebase", "url": "/fr/video/mettre-a-jour-une-branche-avec-git-rebase/", "locale": "fr", "readingTime": "0:29" }, { "content": "Quand on fusionné une branche `dev` dans une branche `main` en fast-forward, on a fait avancer `main` en pointant l’étiquette de la branche vers le dernier commit de `dev`.\n\nAnnuler cette fusion signifie donc revenir à la position précédente de `main`. Dans le reflog, il s'agit de la syntaxe `main@{1}`. On peut alors faire un `git reset --keep main@{1}` et le tour est joué !", "description": "Quand on fusionné une branche `dev` dans une branche `main` en fast-forward, on a fait avancer `main` en pointant l’étiquette de…", "date": 1693738817, "image": "https://i.ytimg.com/vi/Vgo0vR-rmBE/maxresdefault.jpg", "_tags": ["git merge","git fast forward","annuler une fusion en fast-forward","git reset","video"], "title": "Annuler une fusion en \"fast forward\" avec Git", "url": "/fr/video/annuler-une-fusion-en-fast-forward-avec-git/", "locale": "fr", "readingTime": "0:37" }, { "content": "Quand on a fusionné une branche `dev` dans une branche `main`, on a fait avancer `main` en faisant pointer l’étiquette de la branche vers le commit de fusion (celui qui pointe vers les 2 commits pour regrouper les historiques).\n\nSi on y regarde bien, pour revenir à la situation d'avant la fusion, il suffit de revenir à la position précédente de `main`. Si tu connais le reflog, tu sais qu'il s'agit de la syntaxe main@{1}`. Il suffit alors d'associer ça avec la commande reset et la bonne option, à savoir `--keep`, donc `git reset --keep main@{1}` et le tour est joué !\n\nLe commit de fusion est alors déréférencé et sera purgé par le garbage-collector !", "description": "Quand on a fusionné une branche `dev` dans une branche `main`, on a fait avancer `main` en faisant pointer l’étiquette de la bra…", "date": 1693652423, "image": "https://i.ytimg.com/vi/bkt4IZn83yY/maxresdefault.jpg", "_tags": ["git merge","git fusion","annuler une fusion","annuler un merge","video"], "title": "ANNULER UNE FUSION classique en Git", "url": "/fr/video/annuler-une-fusion-classique-en-git/", "locale": "fr", "readingTime": "0:41" }, { "content": "La fusion en fast-forward ou \"avance rapide\" c'est le comportement par défaut de Git, sauf si on le configure autrement, et qui vise à aplanir l'historique dès qu'il le peut. \n\nÇa marche donc seulement lorsqu'on a des branches sans divergence, ou dit autrement, une branche dont les commits sont construits en ligne directe depuis le dernier commit d'une autre.\n\nLe résultat est que la branche qui reçoit la fusion va simplement opérer un déplacement de son étiquette qui référencera alors le dernier commit de la seconde branche. \n\nOn a alors pas de bosse dans l'historique et on a pas moyen d'identifier les commits réalisés sur la branche qu'on vient d'intégrer.", "description": "La fusion en fast-forward ou \"avance rapide\" c'est le comportement par défaut de Git, sauf si on le configure autrement, et qui …", "date": 1693566019, "image": "https://i.ytimg.com/vi/UEvjD5KcCcE/maxresdefault.jpg", "_tags": ["git","git fusion","git fast forward","fusion en fast forward","video"], "title": "Les fusions en \"fast forward\" avec Git", "url": "/fr/video/les-fusions-en-fast-forward-avec-git/", "locale": "fr", "readingTime": "0:34" }, { "content": "Quand on a fusionné une branche `dev` dans une branche `main`, on a fait avancer `main` en faisant pointer l’étiquette de la branche vers le commit de fusion (celui qui pointe vers les 2 commits pour regrouper les historiques).\n\nSi on y regarde bien, pour revenir à la situation d'avant la fusion, il suffit de revenir à la position précédente de `main`. Si tu connais le reflog, tu sais qu'il s'agit de la syntaxe main@{1}`. Il suffit alors d'associer ça avec la commande reset et la bonne option, à savoir `--keep`, donc `git reset --keep main@{1}` et le tour est joué !\n\nLe commit de fusion est alors déréférencé et sera purgé par le garbage-collector !", "description": "Quand on a fusionné une branche `dev` dans une branche `main`, on a fait avancer `main` en faisant pointer l’étiquette de la bra…", "date": 1693479636, "image": "https://i.ytimg.com/vi/i9Ax1XF37Wo/maxresdefault.jpg", "_tags": ["git","git merge","fusion git","video"], "title": "Les fusions classiques avec Git", "url": "/fr/video/les-fusions-classiques-avec-git/", "locale": "fr", "readingTime": "0:33" }, { "content": "Git nous permet de défaire, d'annuler et même de refaire des commits. Par exemple si j'ai fait un commit dont je ne veux plus, il suffit que je fasse pointer l'étiquette de ma branche un cran en arrière dans l'historique. Si je veux le refaire, je n'ai qu'à le faire pointer à nouveau sur la référence d'après. Pour ça, on utilise la commande `reset`.\n\nCette commande propose 5 modes selon l'incidence qu'on veut avoir sur les contenus qu'on défait…", "description": "Git nous permet de défaire, d'annuler et même de refaire des commits. Par exemple si j'ai fait un commit dont je ne veux plus, i…", "date": 1693393245, "image": "https://i.ytimg.com/vi/uEfvzPc4D7c/maxresdefault.jpg", "_tags": ["git reset","video"], "title": "DÉFAIRE et REFAIRE des COMMITS avec Git", "url": "/fr/video/defaire-et-refaire-des-commits-avec-git/", "locale": "fr", "readingTime": "0:33" }, { "content": "Le reflog c'est comme ton tracé GPS pour aller d'un point A à un point B. Pas le tracé optimal, non, le tracé tout foiré où tu as fait 3 fois le tour des ronds points, pris les mauvaises routes, tout ça tout ça…Ce reflog, il est local, et il te permet de revenir sur de mauvaises manip' que tu aurais faites, de retrouver des commits perdus…", "description": "Le reflog c'est comme ton tracé GPS pour aller d'un point A à un point B. Pas le tracé optimal, non, le tracé tout foiré où tu a…", "date": 1693306808, "image": "https://i.ytimg.com/vi/EEViwo5cF_g/maxresdefault.jpg", "_tags": ["git","git reflog","reflog","video"], "title": "Le reflog Git", "url": "/fr/video/le-reflog-git/", "locale": "fr", "readingTime": "0:20" }, { "content": "Puisqu'avec Git on manipule essentiellement des références et qu'on ne supprime rien, il faut un mécanisme pour faire du nettoyage des objets \"non référencés\". \n\nIl s'agit du garbage collector. Ça tourne quand on utilise des commandes modifiant l'historique (commit, merge, rebase, push, pull, reset…) et ça supprime les objets qui ont passé un certain délais sans utilisation ou référence. Ce délais, c'est environ 1 mois et c'est configurable.\n\nÇa veut dire qu'on a tout le temps de récupérer d'éventuels commits perdus suite à de mauvaises manip. Et pour ça, on a le reflog…", "description": "Puisqu'avec Git on manipule essentiellement des références et qu'on ne supprime rien, il faut un mécanisme pour faire du nettoya…", "date": 1693220441, "image": "https://i.ytimg.com/vi/pGjhgpQ_o00/maxresdefault.jpg", "_tags": ["git","git garbage collector","video"], "title": "Nettoyage dans Git avec le garbage collector", "url": "/fr/video/nettoyage-dans-git-avec-le-garbage-collector/", "locale": "fr", "readingTime": "0:32" }, { "content": "Quand on crée une branche dans un projet Git, on crée en fait une étiquette, un pointeur sur un commit donné. Ça implique donc qu'on joue non pas avec des commits mais avec des références vers des commits. \n\nCe qu'on désigne généralement comme une branche dans l'historique est en fait la succession des références de commits depuis le commit pointé par notre étiquette.\n\nCréer un commit sur une branche consiste à créer un commit en haut de la chaîne des commits et à faire pointer l'étiquette de branche dessus.\n\nSupprimer une branche consiste à retirer la référence dans l'historique. Si cette étiquette était la seule à pointer sur ces commits, ils seront déréférencés, pas supprimés. La suppression effective, c'est le travail du garbage collector.", "description": "Quand on crée une branche dans un projet Git, on crée en fait une étiquette, un pointeur sur un commit donné. Ça implique donc q…", "date": 1693134042, "image": "https://i.ytimg.com/vi/zkdB8wLbyyA/maxresdefault.jpg", "_tags": ["git","git branches","video"], "title": "Les BRANCHES Git sont des ÉTIQUETTES !", "url": "/fr/video/les-branches-git-sont-des-etiquettes/", "locale": "fr", "readingTime": "0:30" }, { "content": "On voit souvent dans les docs des schémas Git montrant des commits avec les flèches vers le bas quand l'axe du temps va vers le haut. C'est tout à fait normal ! Git gère l'historique et les branches sous forme de chaînes de commits. \n\nL'identité de chaque est constituée, entre autres, sur l'identité de son ou ses commits parents. Les flèches montrent donc cette relation de dépendance, ce chaînage, ou, comme certains se plaisent à dire, cette blockchain.\n\nCe mécanisme est hyper astucieux pour tout un tas de raison et fait que lorsqu'on travaille avec Git, on manipule essentiellement des références.", "description": "On voit souvent dans les docs des schémas Git montrant des commits avec les flèches vers le bas quand l'axe du temps va vers le …", "date": 1693047635, "image": "https://i.ytimg.com/vi/eIKjcZ3fYis/maxresdefault.jpg", "_tags": ["git","git chaînage","chaîne des commits","video"], "title": "Git et le chaînage des commits", "url": "/fr/video/git-et-le-chainage-des-commits/", "locale": "fr", "readingTime": "0:24" }, { "content": "Git est géré comme un système de fichiers. Nos fichiers ajoutés sont stockés sous forme de blobs, sorte de photos des contenus. Les répertoires sont représentés par des trees qui listent les blobs et d'éventuels autres trees. Et pour finir, un commit représente l'état du projet à un instant T et référence un objet tree racine, d'éventuels autres commits et stocke les informations utiles qu'on appelle les métadonnées, à savoir l'auteur du commit, la date, l'heure et le message.", "description": "Git est géré comme un système de fichiers. Nos fichiers ajoutés sont stockés sous forme de blobs, sorte de photos des contenus. …", "date": 1692961201, "image": "https://i.ytimg.com/vi/0EGLUinEBAg/maxresdefault.jpg", "_tags": ["git","objets git","git tree","git commit","git blob","video"], "title": "Y'a QUOI dans un dépôt Git ?!", "url": "/fr/video/ya-quoi-dans-un-depot-git/", "locale": "fr", "readingTime": "0:30" }, { "content": "Git possède 3 zones principales et 2 zones secondaires. Les principales sont celles qu'on utilise le plus souvent pour créer nos commits et notre historique local.\n\n- On a la copie de travail dans laquelle on édite nos modifications, ajout, suppressions.\n- Puis on a le stage ou l'index, qui est une zone tampon qui nous permet de préparer finement nos commits.\n- Et enfin on a le dépôt local qui stocke nos commits et notre historique local.\n\nLa 4e zone est le dépôt distant qui sert au partage et à la sauvegarde.\n\nLa 5e est le stash, ou la remise en français, et permet de mettre du travail de côté lorsqu'on a des choses plus pressentes à faire.", "description": "Git possède 3 zones principales et 2 zones secondaires. Les principales sont celles qu'on utilise le plus souvent pour créer nos…", "date": 1692874809, "image": "https://i.ytimg.com/vi/ENZSc-aY-rc/maxresdefault.jpg", "_tags": ["git","git zones","video"], "title": "Les 5 zones Git", "url": "/fr/video/les-5-zones-git/", "locale": "fr", "readingTime": "0:43" }, { "content": "Git Total c’est 21 heures de formation sur 3 jours ou 5 demi-journées avec un super formateur trop sympa 🙂.\n\nOn t'apprend a être à l’aise et efficace avec l’outil et son écosystème, que tu sois débutant·e ou utilisateur·rice avancé·e.\n\nTu profites d'un support riche avec plus de 250 slides, des schémas animés, des quizzes, plein d'exercices et des ressources supplémentaires.\n\nOn te montre les bonnes pratiques, les cas concrets de problèmes que tu peux rencontrer et les solutions pour y remédier, mais aussi les astuces pour améliorer et automatiser la qualité de tes projets et gagner en sérénité.\n\nEt comme tu peux avoir des questions plus tard après la formation, on te donne accès à un forum dédié (discord).\n\nAlors, tu attends quoi pour venir te former ?\n\nLe programme et nos prochaines dates sont dispos sur https://delicious-insights.com/fr/formations/git-total/.\n\nTu peux aussi nous demander un devis pour une formation intra ou sur-mesure !", "description": "Git Total c’est 21 heures de formation sur 3 jours ou 5 demi-journées avec un super formateur trop sympa 🙂.\n\nOn t'apprend a êtr…", "date": 1692693910, "image": "https://i.ytimg.com/vi/8UowcV6UmAM/maxresdefault.jpg", "_tags": ["formation git","git total","git","video"], "title": "Git Total, la formation Git de référence", "url": "/fr/video/git-total-la-formation-git-de-reference/", "locale": "fr", "readingTime": "0:57" }, { "content": "Adieu les idées reçues et modèles mentaux pourris : après le détail pour les fonctions non fléchées, voici celui des fonctions fléchées.\n\nEncore plus simple, encore plus court.\n\nMaintenant vous savez.\n\nPour explorer ça à fond : https://www.youtube.com/watch?v=KtqBIzYvJXQ&list=PLPoAfTkDs_Jad8tGdMkixD1r7lMjpRstB&index=9", "description": "Adieu les idées reçues et modèles mentaux pourris : après le détail pour les fonctions non fléchées, voici celui des fonctions f…", "date": 1688126504, "image": "https://i.ytimg.com/vi/C_kr3okAu1c/maxresdefault.jpg", "_tags": ["js","ecmascript","protip","this","arrow-functions","functions","scope","closure","portée","video"], "title": "LA VÉRITÉ sur le THIS dans les FONCTIONS FLÉCHÉES en JS !", "url": "/fr/video/js-la-verite-sur-le-this-dans-les-fonctions-flechees-en-js/", "locale": "fr", "readingTime": "0:56" }, { "content": "Une minute pour comprendre comment marche par défaut \"this\" en JS dans les fonctions non fléchées (y'a un autre short pour le cas des fonctions fléchées).\n\nAdieu les approximations et les modèles foireux : la vérité tient en une courte phrase !\n\nPour explorer ça beaucoup plus en détail : https://www.youtube.com/watch?v=KtqBIzYvJXQ&list=PLPoAfTkDs_Jad8tGdMkixD1r7lMjpRstB&index=9", "description": "Une minute pour comprendre comment marche par défaut \"this\" en JS dans les fonctions non fléchées (y'a un autre short pour le ca…", "date": 1688126276, "image": "https://i.ytimg.com/vi/8-8xK3HRLRc/maxresdefault.jpg", "_tags": ["js","ecmascript","this","binding","portée","scope","closure","video"], "title": "ENFIN COMPRENDRE le this en JS !!!", "url": "/fr/video/js-enfin-comprendre-le-this-en-js/", "locale": "fr", "readingTime": "0:58" }, { "content": "for-in ou for-of ? Object.keys() ou Object.entries() ? Le point en moins d'une minute.", "description": "for-in ou for-of ? Object.keys() ou Object.entries() ? Le point en moins d'une minute.…", "date": 1688126116, "image": "https://i.ytimg.com/vi/Gy7TPNgeFNc/maxresdefault.jpg", "_tags": ["js","short","protip","ecmascript","api","video"], "title": "JS : top astuce pour manipuler les paires clé-valeur d'un objet !", "url": "/fr/video/js-top-astuce-pour-manipuler-les-paires-cle-valeur-dun-objet/", "locale": "fr", "readingTime": "0:59" }, { "content": "Une minute pour découvrir la puissance de Intl.DisplayNames, une API trop mal connue.\n\nhttps://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DisplayNames", "description": "Une minute pour découvrir la puissance de Intl.DisplayNames, une API trop mal connue.\n\nhttps://developer.mozilla.org/fr/docs/Web…", "date": 1688126065, "image": "https://i.ytimg.com/vi/ShCRgvVKljk/maxresdefault.jpg", "_tags": ["js","ecmascript","intl","displaynames","i18n","l10n","video"], "title": "JS : l'astuce de fou pour des listes de noms internationalisés !", "url": "/fr/video/js-lastuce-de-fou-pour-des-listes-de-noms-internationalises/", "locale": "fr", "readingTime": "1:00" }, { "content": "Pourquoi préférer une déclaration la plupart du temps ? Une minute pour comprendre les intérêts du hoisting.", "description": "Pourquoi préférer une déclaration la plupart du temps ? Une minute pour comprendre les intérêts du hoisting.…", "date": 1688125960, "image": "https://i.ytimg.com/vi/qB2_Fx1TBIc/maxresdefault.jpg", "_tags": ["js","ecmascript","protip","function","hoisting","video"], "title": "JS : déclarations ou expressions de fonctions ?", "url": "/fr/video/js-declarations-ou-expressions-de-fonctions/", "locale": "fr", "readingTime": "0:56" }, { "content": "On avait vu dans l'épisode précédent comment reporter les commits d'une branche vers une autre sur un même projet à l'aide du cherry-picking. Voyons désormais comment reporter des commits vers un autre projet.\n\nPour l'article, c'est par ici : https://delicious-insights.com/fr/articles-et-tutos/git-patch/\n\nTu veux en savoir plus sur le cherry-picking ? C'est par ici : https://delicious-insights.com/fr/articles-et-tutos/git-cherry-pick/\n\nN'hésite pas à nous poser tes questions en commentaires.", "description": "On avait vu dans l'épisode précédent comment reporter les commits d'une branche vers une autre sur un même projet à l'aide du ch…", "date": 1686669609, "image": "https://i.ytimg.com/vi/djYa8QKgC-E/maxresdefault.jpg", "_tags": ["git","format-patch","git am","git apply","tuto git","apprendre git","patches","git patches","video"], "title": "Reporter des commits d'un projet vers un autre avec Git", "url": "/fr/video/reporter-des-commits-dun-projet-vers-un-autre-avec-git/", "locale": "fr", "readingTime": "13:010" }, { "content": "Ça fait un moment qu'on réfléchit à un format qui nous permette de dispenser des formations à un maximum de gens, surtout celles et ceux qui n'ont pas la chance de pouvoir libérer facilement du temps ou qui n'ont qu'un tout petit budget.\n\nOn a donc décidé de créer les workshops : 1 jour de formation sur un sujet thématique au tout petit prix de 249€ TTC et 100% en ligne !\n\nOn traite de l'essentiel d'un sujet, sa quintessence, en alternant explications, exercices et quizzes. Pour faciliter les échanges et permettre à chacun·e de participer comme il ou elle le souhaite, on animera toujours à deux les workshops. L'un en frontal, déroulant le fil de la formation. L'autre en appui, gérant les besoins principalement à travers le chat (serveur discord).\n\nTout le détail et les inscriptions aux workshops sont disponibles sur notre site : https://delicious-insights.com/fr/workshops/\n\nOn a hâte de vous montrer tout ça 😁 !", "description": "Ça fait un moment qu'on réfléchit à un format qui nous permette de dispenser des formations à un maximum de gens, surtout celles…", "date": 1686580716, "image": "https://i.ytimg.com/vi/a8eejS-ffKo/maxresdefault.jpg", "_tags": ["workshop","git masterclass","js masterclass","video"], "title": "Vous allez KIFFER ce nouveau format !", "url": "/fr/video/vous-allez-kiffer-ce-nouveau-format/", "locale": "fr", "readingTime": "4:52" }, { "content": "Christophe Porteneuve.\nToi aussi, avoue-le : ton code fait n'importe quoi avec les promesses. Du mélange des genres entre async/await et des chaînes de .then(), des return await qui n'ont pas lieu d'être, des fonctions async sans await, des map() sur du async qui ne font pas ce que tu crois, un manque flagrant de parallélisation quand ce serait pourtant bien utile, une méconnaissance de for await, et j'en passe.\nLes promesses et async/await, c'est un peu comme jQuery, PHP, et puis JS en général : tout le monde en fait sans l'avoir vraiment appris sérieusement, et ça donne souvent un sacré foutoir.\nMais plus maintenant. Parce que dans ce talk, Christophe va te donner le bon modèle mental et toutes les clés pour faire ça au cordeau, concis, propre, performant et tout.", "description": "Christophe Porteneuve.\nToi aussi, avoue-le : ton code fait n'importe quoi avec les promesses. Du mélange des genres entre async/…", "date": 1685435966, "image": "https://i.ytimg.com/vi/Pz2cL01bmwQ/maxresdefault.jpg", "_tags": ["developpement","development","gdg","video"], "title": "[DEVFEST Lille 2023] - L'asynchrone en JS sans le cringe", "url": "/fr/video/devfest-lille-2023-lasynchrone-en-js-sans-le-cringe/", "locale": "fr", "readingTime": "46:17" }, { "content": "Le cherry-picking c'est génial pour reporter un correctif ou une fonctionnalité d'un endroit à un autre en un rien de temps.\n\nAttention cependant à bien préparer le terrain pour éviter les problèmes.\n\nPour l'article, c'est par ici : https://delicious-insights.com/fr/articles-et-tutos/git-cherry-pick/\n\nN'hésite pas à nous poser tes questions en commentaires.", "description": "Le cherry-picking c'est génial pour reporter un correctif ou une fonctionnalité d'un endroit à un autre en un rien de temps.\n\nAt…", "date": 1684252185, "image": "https://i.ytimg.com/vi/_7Q0D_Y50LM/maxresdefault.jpg", "_tags": ["git","cherry-pick","tutoriel git","formation git","apprendre git","video"], "title": "\"git cherry-pick\", ou comment copier-coller des commits", "url": "/fr/video/git-cherry-pick-ou-comment-copier-coller-des-commits/", "locale": "fr", "readingTime": "6:59" }, { "content": "Il est rare qu'on souhaite versionner tous les fichiers d’un projet Git. Par exemple on voudra éviter d'embarquer les fichiers liés au système d’exploitation, les fichiers techniques liés à un éditeur / EDI, de fichiers sensibles (clés de sécurité, configuration, etc.) ou simplement les fichiers générés localement (logs, fichiers temporaires, etc.).\n\nGit dispose d’un mécanisme pour les ignorer. Un fichier ignoré ne pourra pas être ajouté au projet et n’apparaîtra pas parmi les fichiers listés par Git.\n\nMaxime t'explique ici comment procéder, la syntaxe, mais aussi comment ignorer des fichiers déjà versionnés et, à l'inverse, comment ajouter des fichiers ignorés.\n\nTu peux retrouver toutes ces informations ainsi que des exemples dans notre article 🖊️ : https://delicious-insights.com/fr/articles-et-tutos/git-ignore/\n\nDécouvre également notre protip sur gitignore.io pour générer facilement ton fichier .gitignore contextuel à ton projet : https://delicious-insights.com/fr/articles-et-tutos/git-protip-gitignore-io/\n\nL'outil \"filter-repo\" pour réécrire l'historique est disponible ici : https://github.com/newren/git-filter-repo\n\nN'hésite pas à nous poser tes questions en commentaires.", "description": "Il est rare qu'on souhaite versionner tous les fichiers d’un projet Git. Par exemple on voudra éviter d'embarquer les fichiers l…", "date": 1681806943, "image": "https://i.ytimg.com/vi/gkzBzBomYyI/maxresdefault.jpg", "_tags": ["git","gitignore","git ignore","tutoriel","apprendre git","video"], "title": "Ignorer des fichiers avec Git", "url": "/fr/video/ignorer-des-fichiers-avec-git/", "locale": "fr", "readingTime": "13:18" }, { "content": "Et si tu t’épargnais la rédaction parfois laborieuse de ton \".gitignore\" en profitant de gabarits existants ? Découvre dans cette vidéo les solutions existantes qui te feront gagner du temps !\n\nRetrouve tout le détail dans notre article 🖊️ : https://delicious-insights.com/fr/articles-et-tutos/git-protip-gitignore-io/\n\nTu peux aussi consulter notre tutoriel qui décrit comment ignorer des fichiers avec Git : https://delicious-insights.com/fr/articles-et-tutos/git-ignore/\n\nEt bien évidemment, tu peux utiliser le fabuleux https://www.gitignore.io/ 😁", "description": "Et si tu t’épargnais la rédaction parfois laborieuse de ton \".gitignore\" en profitant de gabarits existants ? Découvre dans cett…", "date": 1681806531, "image": "https://i.ytimg.com/vi/dYhMUq6joBU/maxresdefault.jpg", "_tags": ["git","git protip","filter-repo","gitignore","git ignore","gitignore.io","apprendre git","video"], "title": "Protip Git #17 : des gabarits faciles pour le \".gitignore\"", "url": "/fr/video/protip-git-17-des-gabarits-faciles-pour-le-gitignore/", "locale": "fr", "readingTime": "2:54" }, { "content": "Tu crois savoir trier des données en JS ? Entre les pièges intrinsèques de `sort()` et les merveilles que nous fournit l'API `Intl`, tu vas comprendre que même tes tris SGBD côté serveur ne sont plus à la hauteur !\n\nTout le détail est dans notre article \"pépite JS\" de mai 2020 : https://delicious-insights.com/fr/articles-et-tutos/js-tri-tableaux/\n\nToute la série des pépites JS : https://delicious-insights.com/fr/articles-et-tutos/js-nuggets/", "description": "Tu crois savoir trier des données en JS ? Entre les pièges intrinsèques de `sort()` et les merveilles que nous fournit l'API `In…", "date": 1680501607, "image": "https://i.ytimg.com/vi/QJZtlfm8FMA/maxresdefault.jpg", "_tags": ["js","array","sort","reverse","tosorted","intl","collator","ignorepunctuation","trier","tri","video"], "title": "Protip JS #10 : Trier proprement un tableau de données", "url": "/fr/video/js-protip-js-10-trier-proprement-un-tableau-de-donnees/", "locale": "fr", "readingTime": "11:41" }, { "content": "Retirer les doublons d'un tableau, c'est un besoin fréquent en JS comme ailleurs, et on a tendance à aller chercher Lodash et ses méthodes `uniq()` pour ça, mais est-ce vraiment nécessaire ?\n\nTout le détail est dans notre article \"pépite JS\" de mai 2020 : https://delicious-insights.com/fr/articles-et-tutos/js-retrait-doublons/\n\nToute la série des pépites JS : https://delicious-insights.com/fr/articles-et-tutos/js-nuggets/", "description": "Retirer les doublons d'un tableau, c'est un besoin fréquent en JS comme ailleurs, et on a tendance à aller chercher Lodash et se…", "date": 1680156005, "image": "https://i.ytimg.com/vi/HZT-kDRrVeQ/maxresdefault.jpg", "_tags": ["js","array","tableau","set","doublons","uniq","lodash","video"], "title": "Protip JS #9 : Dédoublonner efficacement un tableau", "url": "/fr/video/js-protip-js-9-dedoublonner-efficacement-un-tableau/", "locale": "fr", "readingTime": "5:59" }, { "content": "Je vois régulièrement ces temps-ci des gens copier/coller ce petit bout de code pour produire un tableau de N copies d'une même valeur :\n\n```js\nArray.from({ length: 10 }).fill(42)\n// [42, 42, 42, 42, 42, 42, 42, 42, 42, 42]\n```\n\nC'est **inutilement verbeux** pour le coup, mais ça ne veut pas dire que `from()` est inutile, loin de là ! Comment bien choisir‚ alors ?", "description": "Je vois régulièrement ces temps-ci des gens copier/coller ce petit bout de code pour produire un tableau de N copies d'une même …", "date": 1679658140, "image": "https://i.ytimg.com/vi/PlOuAnF1tjI/maxresdefault.jpg", "_tags": ["js","array","array.from","array.fill","tableau","video"], "title": "Protip JS #8 : Array.from() vs. Array.fill()", "url": "/fr/video/js-protip-array-from-fill/", "locale": "fr", "readingTime": "6:45" }, { "content": "Notre gabarit de configuration est disponible ici 👉 https://gist.github.com/tdd/470582 👈\n\nSavoir configurer Git, c’est super ! Ça permet de préciser des comportements, des aliases, de renseigner nos outils préférés pour travailler avec Git, de personnaliser jusqu’aux couleurs d’affichage des commandes dans le terminal… Mais la configuration, c’est aussi un truc contraignant, parce que le comportement de base n’est pas forcément optimal, parce que ça implique de créer les fichiers de configuration, de répliquer la même configuration sur chaque machine, et parce qu’on n'est pas forcément au courant des choses qu’on peut optimiser !\n\nN'hésite pas à nous poser tes questions en commentaires.", "description": "Notre gabarit de configuration est disponible ici 👉 https://gist.github.com/tdd/470582 👈\n\nSavoir configurer Git, c’est super !…", "date": 1679583794, "image": "https://i.ytimg.com/vi/jiI67QNrD-o/maxresdefault.jpg", "_tags": ["git","tuto git","configuration git","configurer git","video"], "title": "Comment configurer Git ?", "url": "/fr/video/git-config-part-2/", "locale": "fr", "readingTime": "9:50" }, { "content": "Suite à de nombreuses évolutions importantes, votre programme ne fonctionne plus. Pourtant vous savez quand il fonctionnait. C'est donc qu'une bug a dû s'immiscer quelque part dans vos commits.\n\nEt si, plutôt que de vous lancer en mode spéléo dans le code à la recherche du problème vous pouviez détecter le commit à l'origine du bug ?\n\nC'est là le rôle de la commande \"bisect\" : débusquer rapidement l'origine d'un bug. Et qui sait, si vous aviez pris soin de réaliser des commits atomiques sur votre projet, peut-être qu'un \"git revert\" du commit incriminé remettra directement votre projet d'aplomb !\n\nNote pour les personnes tatillonnes : oui, Rust et Go ne sont pas des langages de script 😉.\n\nL'historique de commit a été généré à l'aide de https://whatthecommit.com/. Pour les auteurs de l'historique de démonstration, vous saurez probablement retrouver les références 😁.", "description": "Suite à de nombreuses évolutions importantes, votre programme ne fonctionne plus. Pourtant vous savez quand il fonctionnait. C'e…", "date": 1678210406, "image": "https://i.ytimg.com/vi/fj2-1v1T_CA/maxresdefault.jpg", "_tags": ["tuto git","git bisect","git bug","video"], "title": "Git bisect : débusquer rapidement l'origine d'un bug", "url": "/fr/video/git-bisect/", "locale": "fr", "readingTime": "11:30" }, { "content": "On est en 2023, et les promesses comme `async` / `await` sont désormais bien ancrées. Et pourtant, on utilise toujours ces bons vieux `setTimeout()` et `setInterval()`… Basés callbacks. Un reliquat du passé, bien sûr, alors on n'a pas le choix… Ou alors si ?!", "description": "On est en 2023, et les promesses comme `async` / `await` sont désormais bien ancrées. Et pourtant, on utilise toujours ces bons …", "date": 1675932195, "image": "https://i.ytimg.com/vi/hdstoqxpqA4/maxresdefault.jpg", "_tags": ["js","nodejs","timers","promesses","promises","itérables","async","asynchrone","settimeout","setinterval","flux","eventemitter","video"], "title": "Protip JS #7 : timers et promesses", "url": "/fr/video/js-protip-timers-promises/", "locale": "fr", "readingTime": "10:16" }, { "content": "Que tu sois dans le terminal ou dans ton éditeur, lorsque tu dois gérer de nombreux fichiers conflictuels suite à une fusion qui a mal tourné, c’est parfois pénible ! Tu dois ouvrir les fichiers les uns après les autres, puis tu dois valider tes arbitrages en ajoutant les fichiers au stage. Autant dire que, outre le fait que tu n’y prends pas plaisir, c’est long et tu risques d’oublier d’ajouter certains fichiers au stage si tu n’es pas vigilant·e.\n\nIdéalement on aimerait que ces fichiers soient ouverts à la chaîne par Git, et qu’une fois notre arbitrage terminé (fichier modifié, enregistré et fermé), il soit automatiquement validé / ajouté au stage.\n\nDevine quoi ? Git propose cette fonctionnalité ! Il s’agit de la commande \"mergetool\".", "description": "Que tu sois dans le terminal ou dans ton éditeur, lorsque tu dois gérer de nombreux fichiers conflictuels suite à une fusion qui…", "date": 1675666812, "image": "https://i.ytimg.com/vi/c_DsjKd0UMI/maxresdefault.jpg", "_tags": ["mergetool","git","protip","bonne pratique","fusions","conflits","video"], "title": "Protip Git #16 : gérer les conflits à la chaîne avec mergetool", "url": "/fr/video/git-mergetool/", "locale": "fr", "readingTime": "5:26" }, { "content": "Si tu utilises la ligne de commande, tu as forcément remarqué qu’à la première tentative de push d’une branche locale Git ne fait rien (mais le fait bien) et t'affiche un message te suggérant de faire explicitement un \"git push --set-upstream origin nom-de-branche\". C’est pour que tu indiques vers quel dépôt distant tu veux envoyer le travail de ta branche (oui, tu peux avoir plusieurs remotes), et au passage pour que Git mette en place un suivi (tracking) automatique (ce qui te permettra par la suite de ne faire que du git pull et git push sans option depuis ta branche).\n\nC’est contraignant, surtout que 99% du temps on n'a qu’un dépôt distant où envoyer notre travail.\n\nQue dirais-tu de pouvoir gérer automatiquement la création de ta branche sur le remote avec un simple git push ?\n\nC’est ce que propose l’option de configuration \"push.autoSetupRemote\" sortie dans Git 2.38 (fin 2022). Tu peux la renseigner au global dans ta configuration :\n\n\"git config --global push.autoSetupRemote true\"", "description": "Si tu utilises la ligne de commande, tu as forcément remarqué qu’à la première tentative de push d’une branche locale Git ne fai…", "date": 1675062016, "image": "https://i.ytimg.com/vi/w92DSFhdIJk/maxresdefault.jpg", "_tags": ["bonne pratique git","protip git","autosetupremote","auto setup remote","git push","formation git","tutoriel git","video"], "title": "Protip Git #15 : renseigner automatiquement la synchro au push", "url": "/fr/video/git-push-auto-setup-remote/", "locale": "fr", "readingTime": "3:40" }, { "content": "Ah, le forçage de push ou l'écrasement de l’historique distant par notre historique local, voilà un sujet qui crée beaucoup d’agitation !\n\nLe tumulte qu’il génère est souvent lié à une compréhension partielle du potentiel de la commande push. Cette même compréhension partielle est imputable à une mauvaise approche de conception / nommage des options. Il se trouve en effet que l’option de forçage la plus dangereuse se trouve être aussi la plus facile à saisir 🤦‍♂️ : la fameuse option --force.\n\nHistoire d’enfoncer le couteau, la plupart des éditeurs, probablement en raison du fait que leurs devs n’ont pas été fichus de lire la doc’ en entier, proposent une option unique de forçage qui est le --force ! 🤦‍♂️🤦‍♂️\n\nPourtant, il existe une option dont le but est de garantir qu’on n’écrase pas un historique qui n’aurait pas été récupéré au préalable depuis le distant : --force-with-lease.\n\nOn vous explique tout ça dans ce 14e protip Git.", "description": "Ah, le forçage de push ou l'écrasement de l’historique distant par notre historique local, voilà un sujet qui crée beaucoup d’ag…", "date": 1674457205, "image": "https://i.ytimg.com/vi/8lU5VR0dQJw/maxresdefault.jpg", "_tags": ["protip","git","push","--force","--force-with-lease","tutoriel","bonne pratique git push","apprendre git push","video"], "title": "Protip Git #14 : forcer gentiment le push", "url": "/fr/video/git-push-with-lease/", "locale": "fr", "readingTime": "4:58" }, { "content": "Tu utilises encore une bibliothèque pour aplanir des tableaux ? C'est natif depuis ES2019, avec quelques bonus en prime !", "description": "Tu utilises encore une bibliothèque pour aplanir des tableaux ? C'est natif depuis ES2019, avec quelques bonus en prime !…", "date": 1671725068, "image": "https://i.ytimg.com/vi/12vf2GwKHN4/maxresdefault.jpg", "_tags": ["protip","js","es","ecmascript","es2019","array","flat","flatmap","video"], "title": "Protip JS #6 : flat et flatMap", "url": "/fr/video/js-protip-array-flat-flatmap/", "locale": "fr", "readingTime": "7:56" }, { "content": "On a vu dans nos épisodes précédents qu’on pouvait produire des commits atomiques en ajoutant parfois de manière chirurgicale les contenus (parties de fichiers modifiés par exemple).\n\nNous avions également évoqué comment visualiser les fichiers et leurs états, notamment les fichiers ajoutés / prêts à être commités, dans le protip sur la coloration du git status. Mais nous n’avons pas vu comment visualiser les contenus des modifications qu’on s’apprête à commiter.\n\nL’important ici n’est pas tant la commande que la mise en place d’une (bonne) habitude : vérifier avant de valider. ", "description": "On a vu dans nos épisodes précédents qu’on pouvait produire des commits atomiques en ajoutant parfois de manière chirurgicale le…", "date": 1671468438, "image": "https://i.ytimg.com/vi/KNlCO0rmQjM/maxresdefault.jpg", "_tags": ["video"], "title": "Protip Git #13 : vérifier avant de commiter", "url": "/fr/video/git-diff-staged/", "locale": "fr", "readingTime": "2:17" }, { "content": "Si comme moi tu souffres du syndrome des doigts en mousse™ ou que tu tapes au clavier avec des moufles 🥊 (restrictions énergétiques obligent 😅), alors tu ne pourras qu’apprécier cette option de configuration qui te propose de corriger des commandes à la volée.\n\nTu peux aussi consulter la section \"help.autocorrect\" du manuel de la configuration Git : https://git-scm.com/docs/git-config#Documentation/git-config.txt-helpautoCorrect", "description": "Si comme moi tu souffres du syndrome des doigts en mousse™ ou que tu tapes au clavier avec des moufles 🥊 (restrictions énergéti…", "date": 1670828407, "image": "https://i.ytimg.com/vi/QhshfLdgWxE/maxresdefault.jpg", "_tags": ["tuto git","tutoriel git","apprendre git","formation git","protip git","git autocorrect","video"], "title": "Protip Git #12 : autocorriger les commandes mal tapées", "url": "/fr/video/git-autocorrect/", "locale": "fr", "readingTime": "4:04" }, { "content": "Web Notifications, c'est l'API web largement prise en charge qui nous permet, dans nos applis web, d'utiliser le centre de notifications natif de l'appareil (sur iOS, OSX, Android, Windows, etc.).\n\nDu moment que notre appli web est ouverte quelque part dans un navigateur lancé, et que l'utilisateur·trice nous y a autorisé, on peut donc lui notifier des trucs, avec pas mal d'embellissements et de fonctions avancées en prime !\n\nDémo live : https://demo-notifs.netlify.app (développée et déployée pendant le live)\n\nChapitrage :\n\n- 00:00 Lancement / attente\n- 06:00 Démarrage\n- 09:00 API de base et globale `Notification`\n- 10:45 Demander la permission de notifier\n- 20:52 Corps de contenu (body)\n- 22:20 Icône (icon)\n- 23:55 Image bannière (image)\n- 25:00 Propriétés de l'objet Notification\n- 27:02 Notifs silencieuses (silent)\n- 29:18 Exigence d'interaction utilisateur (requireInteraction)\n- 34:36 Réagir aux clics sur les notifications\n- 36:16 Remplacement de notifications (tag)\n- 41:10 Boutons personnalisés (actions)\n- 59:45 Mise en place de la démo en ligne sur Netlify\n- 1:20:40 Réponses à la volée dans la notification (type, placeholder et reply)\n- 1:25:04 Tentatives infructueuses de recours aux vibrations\n- 1:35:37 Résumé\n- 1:42:27 Conclusion\n\nCertes, certaines plates-formes prennent en charge moins de trucs que d'autres (*tousse* iOS), mais on peut la jouer amélioration progressive, en utilisant le noyau commun pour les trucs essentiels, et en ajoutant du confort lorsque c'est disponible : images bannières, vibration personnalisée, boutons custom, champs de saisie à la volée, badges et icônes, et j'en passe !\n\nClique-moi donc ce petit bouton de rappel, et ne rate pas le fun en direct !", "description": "Web Notifications, c'est l'API web largement prise en charge qui nous permet, dans nos applis web, d'utiliser le centre de notif…", "date": 1670381495, "image": "https://i.ytimg.com/vi/9ClmzauHnXo/maxresdefault.jpg", "_tags": ["live","livestream","hackathon","notifications","web notifications","notification center","android","ios","windows","video"], "title": "LIVE · Christophe fait des Web Notifications", "url": "/fr/video/live-christophe-fait-des-web-notifications/", "locale": "fr", "readingTime": "1:43:56" }, { "content": "Utiliser Git dans le terminal sans avoir une invite de commande / un prompt adapté, c’est un peu comme mettre des chaussettes avec des tongues en hiver, c’est moche et c’est sous-optimal !\n\nLe souci avec les terminaux, c’est qu’il en existe plein ! Comment alors trouver une solution adaptée à chacun ? On avait écrit il y a un bail un article décrivant comment configurer un prompt Git à la mano. Cette méthode est toujours efficace et offre le bénéfice du minimalisme. Par contre pour le design, c’est pas ouf !\n\nEt puis Oh My Posh est apparu dans nos radars ! Bien plus évoluée, plus facile à installer et à configurer, traitant d’un très large spectre de technos (voir la partie \"Segments\" de la doc).\n\nOn te présente tout ça dans cet épisode d'introduction.\n\nLe site officiel de Oh My Posh : https://ohmyposh.dev/", "description": "Utiliser Git dans le terminal sans avoir une invite de commande / un prompt adapté, c’est un peu comme mettre des chaussettes av…", "date": 1670234345, "image": "https://i.ytimg.com/vi/1Azb859E-_I/maxresdefault.jpg", "_tags": ["git","ohmyposh","prompt","shell","powershell","tuto","protip","video"], "title": "Protip Git #11 : \"Oh My Posh\", prompt esthétique et configurable", "url": "/fr/video/git-oh-my-posh/", "locale": "fr", "readingTime": "5:38" }, { "content": "Ah, les branches dans Git… Combien de fois ai-je vu des branches « traîner » chez mes clients, jamais supprimées car simplement mal analysées… Et cette « astuce » plus que douteuse qui consiste, quand le nom de la branche qu’on souhaite créer existe déjà, à ajouter un suffixe numérique 🤦.\n\nIl est donc temps de faire les choses bien ! En plus, ça ne demande pas franchement beaucoup d’efforts. Il faut surtout savoir déterminer les branches existantes, leur rapport éventuel avec une branche distante (tracking), et leur état vis-à-vis de cette dernière (nouveaux commits locaux ou distants, branche distante supprimée).\n\nDis bonjour à `git branch -avv` !", "description": "Ah, les branches dans Git… Combien de fois ai-je vu des branches « traîner » chez mes clients, jamais supprimées car simplement …", "date": 1669618810, "image": "https://i.ytimg.com/vi/IlJ0pgOICgE/maxresdefault.jpg", "_tags": ["protip","protips","git","branch","avv","tutoriel","video"], "title": "Protip Git #10 : lister efficacement les branches", "url": "/fr/video/git-branch-avv/", "locale": "fr", "readingTime": "4:08" }, { "content": "Connais-tu le raccourci VSCode pour afficher et masquer facilement la barre de navigation latérale ? Le souci est que quand on édite des fichiers au format markdown ce raccourci est redéfini par VSCode pour nous permettre la mise en gras. Histoire de garder le comportement attendu, on t'encourage à redéfinir cet alias en \"Ctrl + Shift + b\".", "description": "Connais-tu le raccourci VSCode pour afficher et masquer facilement la barre de navigation latérale ? Le souci est que quand on é…", "date": 1669014030, "image": "https://i.ytimg.com/vi/rX0TDonQevY/maxresdefault.jpg", "_tags": ["tutoriel","vscode","sidebar","protips","protip","video"], "title": "Protip VSCode #2 : basculer la sidebar même depuis du Markdown", "url": "/fr/video/vscode-protip-toggle-sidebar/", "locale": "fr", "readingTime": "1:40" }, { "content": "Lundi 3 octobre 2022 est sortie la version 2.38 de Git avec deux nouveautés notables, la première étant une nouvelle option de rebase, --update-refs, l'autre étant l'intégration d'un nouvel outil pour faciliter la gestion de dépôts massifs, j'ai nommé Scalar ! On t'explique tout ça !\n\nL'article sur le blog GitHub : https://github.blog/2022-10-03-highlights-from-git-2-38/", "description": "Lundi 3 octobre 2022 est sortie la version 2.38 de Git avec deux nouveautés notables, la première étant une nouvelle option de r…", "date": 1667199602, "image": "https://i.ytimg.com/vi/73cTjutSYJQ/maxresdefault.jpg", "_tags": ["git","tuto","nouveautés","2.38","video"], "title": "Quoi de neuf dans Git 2.38 ?", "url": "/fr/video/git-2-38/", "locale": "fr", "readingTime": "3:17" }, { "content": "Voyons comment formater des **distances temporelles** (exprimées en quantité et unité) de façon élégante !", "description": "Voyons comment formater des **distances temporelles** (exprimées en quantité et unité) de façon élégante !…", "date": 1666936828, "image": "https://i.ytimg.com/vi/yDWvmuX-7fc/maxresdefault.jpg", "_tags": ["js","protip","date","intl","datetimeformat","formatage","video"], "title": "Protip JS #5 : Formater des distances temporelles", "url": "/fr/video/js-protip-distances-temporelles/", "locale": "fr", "readingTime": "4:17" }, { "content": "Voyons comment formater des **intervalles** de dates et d'heures de façon élégante !", "description": "Voyons comment formater des **intervalles** de dates et d'heures de façon élégante !…", "date": 1666850411, "image": "https://i.ytimg.com/vi/V-IvQYdhG0c/maxresdefault.jpg", "_tags": ["js","protip","date","intl","datetimeformat","formatage","video"], "title": "Protip JS #4 : Formater des intervalles de dates", "url": "/fr/video/js-protip-intervalles-dates/", "locale": "fr", "readingTime": "4:39" }, { "content": "Ah, **les joies du formatage** de dates (et d'heures)… Bien sûr, on peut faire un format unique, numérique, et dire qu'on a fini. Ça peut passer (surtout pour des formats techniques), mais ce n'est pas idéal, et même **franchement pas propre** lorsqu'on s'adresse à des humains, avec leurs cultures et les usages de formatage de celles-ci.\n\nAprès tout, si un site américain t’affiche 08/12/2022, s'agit-il du 12 août ou du 8 décembre ? Sans savoir quelle approche il retient pour la prise en compte de ta _locale_, on n'a aucune certitude !\n\nVoyons ensemble quelles options on a pour **faire ça bien sans surcharger le JS de notre appli**.", "description": "Ah, **les joies du formatage** de dates (et d'heures)… Bien sûr, on peut faire un format unique, numérique, et dire qu'on a fini…", "date": 1666764010, "image": "https://i.ytimg.com/vi/XOzJtq8S5aQ/maxresdefault.jpg", "_tags": ["js","protip","date","intl","datetimeformat","formatage","video"], "title": "Protip JS #3 : Formater une date/heure selon les usages locaux", "url": "/fr/video/js-protip-formater-dates/", "locale": "fr", "readingTime": "7:54" }, { "content": "Tout comme il m’arrive d’oublier des fichiers dans un commit, il m’arrive également de mal rédiger des messages de commit et de m’en apercevoir plus tard (avec quelques commits effectués entre temps). Ce que j'oublie probablement le plus souvent, c'est lier le ticket traité par le commit.\n\nPLUS tard, pas TROP tard !\n\nNe me dis pas que tu penses « Tant pis, j’irai dans l’interface le renseigner à la main ! » ou que tu laisses tomber ! C’est peut-être parce que tu ne connais pas le rebase interactif, ou que tu en as peur 😨. Franchement, tu ne devrais pas, avec un peu d’apprentissage cette commande s’avère être une alliée plus que précieuse !\n\nMis à part cette histoire de rebase, sais-tu qu’on a la possibilité de créer un commit qui exprime cette intention de changer le message ? Je parie que non ! Heureusement, je suis là 😁. Je te présente la commande git commit --fixup reword:ref-du-commit-à-corriger. Alors oui, cette syntaxe n’est pas facile à retenir. Mais on s’en moque, on va se faire un bel alias aux airs d’incantation magique 🔮.", "description": "Tout comme il m’arrive d’oublier des fichiers dans un commit, il m’arrive également de mal rédiger des messages de commit et de …", "date": 1666591217, "image": "https://i.ytimg.com/vi/xJT4A7tJn40/maxresdefault.jpg", "_tags": ["git","protip","reword","renommer","video"], "title": "Protip Git #9 : renommer rapidement un vieux commit", "url": "/fr/video/git-protip-autoreword/", "locale": "fr", "readingTime": "4:40" }, { "content": "WebAuthn, c'est l'API web largement prise en charge qui nous permet, dans nos applis web, de tirer parti des clés de sécurité \"natives\", qu'elles soient intégrées à l'appareil (Windows Hello, Touch ID, empreinte digitale Android, etc.) ou multi-plateformes (YubiKeys et équivalents en USB / NFC / BLE, etc.).\n\nOubliez les mots de passe ! Oubliez même les identifiants, si vous le souhaitez ! Et faites du passwordless ou du 2FA ultra-pratique, vraiment sécurisé, sans exiger de vos utilisateurs une mémoire d'éléphant ou un gestionnaire de mot de passe !\n\nChristophe avait envie depuis longtemps de se plonger là-dedans, alors venez découvrir avec lui la techno, ses docs, ses tutos, et le voir se l'approprier pour pondre de zéro une archi fullstack exploitant ça sur laptops et mobiles, en 100% JS ! Et grâce au chat en direct, vous pourrez lui poser plein de questions, l'aider, le débloquer, papoter, toussa toussa !\n\n**Merci aux 27 personnes venues, dont 6 qui sont restées jusqu'au bout !** 😘😘😘", "description": "WebAuthn, c'est l'API web largement prise en charge qui nous permet, dans nos applis web, de tirer parti des clés de sécurité \"n…", "date": 1666407781, "image": "https://i.ytimg.com/vi/OTWaDvhp_W4/maxresdefault.jpg", "_tags": ["live","livestream","hackathon","webauthn","fido","u2f","2fa","yubikey","windowshello","authentication","faceid","touchid","nfc","ble","video"], "title": "LIVE · Christophe découvre et code du WebAuthn", "url": "/fr/video/live-christophe-decouvre-et-code-du-webauthn/", "locale": "fr", "readingTime": "2:47:55" }, { "content": "Yes, okay, ES2015 rules, and ES2017-2022 bring about a lot of cool things, but a ton of cool stuff is expected to land in the next few years, too… and we can play with it already! Christophe takes you through a whirlwind tour of the upcoming features he’s most excited about, due to become official in 2023, 2024… or 2025 ;-)\n\n\nChristophe Porteneuve\nChristophe has been a professional web dev since 1995 (with side tracks in Delphi and Java lands), was a Core team member for Prototype.js and script.aculo.us back in the day, spoke at numerous conferences worldwide and now focuses on crafting top-notch training on all things Git and JS, with a focus on Node, React and PWA-related stuff through his company, Delicious Insights, that also ran NodeSchool Paris. He lives near Paris with his wife Élodie and sons Maxence and Elliott.\n\n\nNordic.js is a single track conference with talks by internationally renowned speakers and rising stars in the JavaScript community. Read more at http://nordicjs.com/.\n\nThanks to this years sponsors:\n\nVonage - https://vonage.dev/Nordicjs2022 \nMongoDB - https://www.mongodb.com\nFunnel - https://funnel.io\nConfetti - https://confetti.events/\nUtopia Music - https://utopiamusic.com\nStoryblok - https://www.storyblok.com\n\n\nBryntum - Futurice - Columbia Road - Schibsted", "description": "Yes, okay, ES2015 rules, and ES2017-2022 bring about a lot of cool things, but a ton of cool stuff is expected to land in the ne…", "date": 1666269420, "image": "https://i.ytimg.com/vi/FaQA0qU5e6o/maxresdefault.jpg", "_tags": ["javascript (programming language)","live","software (industry)","js","web development","programming","node.js","react","deno","video"], "title": "Nordic.js 2022 • Christophe Porteneuve - So, what’s new in ES2025?", "url": "/fr/video/js-nordicjs-2022-christophe-porteneuve-so-whats-new-in-es2025/", "locale": "fr", "readingTime": "31:00" }, { "content": "Il est très fréquent qu'on aie besoin d'aller récupérer un ou plusieurs éléments à la fin d'un tableau ou d’une `String`. Historiquement, c'était un peu la _lose_, mais les choses ont changé !\n\n- Le talk de Christophe en anglais sur les proxies ES (Fronteers 2019) : https://vimeo.com/364362111\n- La doc MDN FR sur les proxies ES : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Proxy", "description": "Il est très fréquent qu'on aie besoin d'aller récupérer un ou plusieurs éléments à la fin d'un tableau ou d’une `String`. Histor…", "date": 1666159215, "image": "https://i.ytimg.com/vi/rF2rkkXAZdA/maxresdefault.jpg", "_tags": ["protip","js","array","iterable","at","video"], "title": "Protip JS #2 : Récupérer les derniers éléments d’un tableau", "url": "/fr/video/js-protip-last-items/", "locale": "fr", "readingTime": "5:40" }, { "content": "Combien de fois as-tu oublié d'ajouter un fichier pour découvrir ton erreur plus tard, après quelques commits ?\n\nMon objectif est de te permettre de faire ça le plus rapidement possible, que ça devienne un reflexe !\n\nTu connais peut-être déjà l'option git commit --fixup (ou --squash) qui crée un commit dont l’intitulé signale qu’il corrige un autre commit ? Grâce à ça, si tu lances un rebase interactif, il viendra automatiquement placer l’application du commit en fixup sous la ligne du commit à corriger 😎 !", "description": "Combien de fois as-tu oublié d'ajouter un fichier pour découvrir ton erreur plus tard, après quelques commits ?\n\nMon objectif es…", "date": 1666002534, "image": "https://i.ytimg.com/vi/bcq-jcBOjQ4/maxresdefault.jpg", "_tags": ["git","protip","fixup","autofixup","video"], "title": "Protip Git #8 : ajouter en un clin d’œil des modifs oubliées à un vieux commit", "url": "/fr/video/git-protip-autofixup/", "locale": "fr", "readingTime": "4:20" }, { "content": "Par pitié 🙏, ne me dis pas que tu utilises `git blame` ! Cette commande, outre l’intention que souligne son nom, ne t’apportera pas l’information utile attendue, pire, elle risque de t’amener sur des faux-positifs et tu risques alors d’aller chahuter un·e collègue à tort (ce qui est doublement mal 😡).", "description": "Par pitié 🙏, ne me dis pas que tu utilises `git blame` ! Cette commande, outre l’intention que souligne son nom, ne t’apportera…", "date": 1665382501, "image": "https://i.ytimg.com/vi/Izr759gf_3M/maxresdefault.jpg", "_tags": ["git","protip","video"], "title": "Protip Git #7 : blame, oui mais non !", "url": "/fr/video/git-protip-blame/", "locale": "fr", "readingTime": "4:35" }, { "content": "N’as-tu jamais souhaité lister seulement les évolutions au sein d’une fonction ? Ça serait génial, on pourrait alors mieux déterminer l’origine d’un bug ou avoir une vision fine du travail réalisé au fil de l’eau.\n\nC'est à cela que l'option \"-L\" du log va nous servir. ", "description": "N’as-tu jamais souhaité lister seulement les évolutions au sein d’une fonction ? Ça serait génial, on pourrait alors mieux déter…", "date": 1665381600, "image": "https://i.ytimg.com/vi/1rBfFvu9f0Y/maxresdefault.jpg", "_tags": ["git","protip","video"], "title": "Protip Git #6 : suivre les évolutions d'une fonction avec \"log -L\"", "url": "/fr/video/git-protip-log-function/", "locale": "fr", "readingTime": "3:35" }, { "content": "Si comme moi tu utilises Git essentiellement dans le terminal, alors tu utilises très souvent la commande \"git status\". Ce qui me gêne dans l’affichage proposé par défaut, c’est que le choix des couleurs est identique pour les fichiers modifiés, les fichiers créés et les fichiers conflictuels. De base on trouve une différence entre les fichiers indexés/stagés en vert, et les fichiers non indexés en rouge (qu’ils soient modifiés ou non suivis).\n\nC’est là qu’intervient ma configuration personnalisée. Je précise la couleur du texte et du fond selon le statut des fichiers. J’ai opté pour :\n\n- Noir sur fond jaune pour les fichiers non suivis (notamment ceux fraîchement créés) ;\n( Magenta pour les fichiers ayant des conflits.\n\nJe pousse même avec une mise en forme italique pour les fichiers en conflit.\n\n$ git config --global color.status.untracked 'black yellow'\n$ git config --global color.status.unmerged 'magenta italic'", "description": "Si comme moi tu utilises Git essentiellement dans le terminal, alors tu utilises très souvent la commande \"git status\". Ce qui m…", "date": 1664748005, "image": "https://i.ytimg.com/vi/C6gy3k_Fgxs/maxresdefault.jpg", "_tags": ["git","protips","protip","video"], "title": "Protip Git #5 : personnaliser la couleur des statuts", "url": "/fr/video/git-protip-colored-status/", "locale": "fr", "readingTime": "3:53" }, { "content": "Mettre à jour ses dépendances npm, c'est une bonne pratique, c'est de l'hygiène de base pour ta codebase, et tu devrais le faire régulièrement.\n\nSauf que npm update et npm install n'ont pas une DX de fou… On veut y voir clair rapidement sur le distingo prod/dev, les catégories patch/minor/major, et surtout, *on ne veut pas taper les commandes, noms de modules et versions à la main !*\n\nVoici donc mon outil tiers préféré pour ça : npm-check. Un vrai bonheur !", "description": "Mettre à jour ses dépendances npm, c'est une bonne pratique, c'est de l'hygiène de base pour ta codebase, et tu devrais le faire…", "date": 1664344801, "image": "https://i.ytimg.com/vi/ac3nMWnkNPM/maxresdefault.jpg", "_tags": ["protip","js","npm","npm-check","outil","outillage","dependances","video"], "title": "Protip JS #1 : npm-check", "url": "/fr/video/js-protip-npm-check/", "locale": "fr", "readingTime": "4:29" }, { "content": "Ah, les fautes d’inattention, les oublis et autres messages mal rédigés… Toutes ces situations où on a créé un commit pour s’apercevoir dans la foulée qu’on a foiré !\n\nHeureusement l’option --amend de la commande commit est là pour nous sauver 😮‍💨 !\n\nConceptuellement, Git fera pour nous un pas en arrière puis un pas en avant. Il va revenir à l’état d’avant validation, donc avec nos fichiers stagés (équivalent de git reset --soft HEAD~1), et revalidera automatiquement avec tous les fichiers stagés (dont les nouveaux, si on avait ajouté au stage avant de lancer le --amend). En gros, il va annuler notre commit et en créer un nouveau à la place, nous permettant des modifications intermédiaires :\n\n- ajout/retrait de fichiers ;\n- mise à jour des méta-données (généralement le message de commit).\n\nOn l'utilise classiquement dans les 2 cas suivants :\n\n- l'oubli d'un fichier dans le commit ;\n- le message du commit mal rédigé.\n\nVoyons tout cela ensemble.\n\nSi tu veux tout savoir sur la commande \"reset\", nous avons un cours vidéo dédié : https://cours-video.delicious-insights.com/git-undo", "description": "Ah, les fautes d’inattention, les oublis et autres messages mal rédigés… Toutes ces situations où on a créé un commit pour s’ape…", "date": 1664172022, "image": "https://i.ytimg.com/vi/shUl0YSpM2g/maxresdefault.jpg", "_tags": ["git","protip","protips","video"], "title": "Protip Git #4 : réparer le dernier commit avec “--amend”", "url": "/fr/video/git-protip-amend/", "locale": "fr", "readingTime": "4:59" }, { "content": "Qu’on écrive du code ou de la documentation, on rencontre très souvent le besoin de dupliquer des lignes (généralement pour les modifier) ou de les déplacer (seules ou par bloc).\n\nOn adore pour ça les raccourcis de VSCode qui nous permettent de faire ça à la vitesse de l’éclair ⚡ !", "description": "Qu’on écrive du code ou de la documentation, on rencontre très souvent le besoin de dupliquer des lignes (généralement pour les …", "date": 1663567207, "image": "https://i.ytimg.com/vi/YnQg8zHISi8/maxresdefault.jpg", "_tags": ["protip","vscode","video"], "title": "Protip VSCode #1 : déplacer, dupliquer des lignes", "url": "/fr/video/vscode-protip-copy-move-lines/", "locale": "fr", "readingTime": "2:09" }, { "content": "Lorsqu’on déplace HEAD ou des têtes de branches (donc lorsqu’on crée des commits, change de branche, fusionne des branches, rebase une branche, annule des commits…), Git enregistre la position précédente de HEAD et de la tête de branche active éventuelle. Ces positions sont enregistrées dans les reflogs.\n\n\nJ’aime à dire que le reflog est notre parcours réel, alors que le log est le tracé GPS « idéal ». Tu peux aussi voir ça comme le Petit Poucet qui marque son chemin avec des cailloux 🪨🪨🪨.\n\n\nGrâce aux reflogs et à des notations particulières (ce qu’on appelle les syntaxes de révisions), on peut accéder à la position de la branche précédente en appelant \"@{-1}\" ou sa version raccourcie \"-\".\n\n\nSi je suis sur une branche \"main\" et que je souhaite retourner sur la branche \"dev\" sur laquelle j'étais juste avant, je peux faire un \"git switch -\". Si je relance cette commande, je retournerai sur la branche \"main\".\n\n\nCette notation trouve son équivalence dans les terminaux shell avec la commande \"cd -\" qui permet de revenir au répertoire précédent.", "description": "Lorsqu’on déplace HEAD ou des têtes de branches (donc lorsqu’on crée des commits, change de branche, fusionne des branches, reba…", "date": 1662962400, "image": "https://i.ytimg.com/vi/-O-yprxaFVw/maxresdefault.jpg", "_tags": ["git","protip","video"], "title": "Protip Git #3 : dernière branche active avec “-”", "url": "/fr/video/protip-git-3-derniere-branche-active-avec/", "locale": "fr", "readingTime": "2:37" }, { "content": "Le log, c’est cet outil Git qui nous affiche l’historique des commits. On en a généralement besoin pour :\n\n- afficher les derniers commits créés, histoire de savoir où on en est dans notre travail ;\n- visualiser les branches en cours et leurs évolutions respectives.\n\nLe souci, c’est que le log « classique » n’est pas très reluisant. On a pas de base l’information des branches, pas de graphe, on ne sait pas où on se situe exactement. Bref, ça n’est pas optimal pour ce qu’on souhaite en faire.\n\nHeureusement on a tout plein d'options proposées par Git, et avec un alias bien fait, on obtient des résultats encore meilleurs que la plupart des outils graphiques.", "description": "Le log, c’est cet outil Git qui nous affiche l’historique des commits. On en a généralement besoin pour :\n\n- afficher les dernie…", "date": 1662357621, "image": "https://i.ytimg.com/vi/qytXQU4mF8Q/maxresdefault.jpg", "_tags": ["git","protip","bonne pratique git log","apprendre git log","video"], "title": "Protip Git #2 : un log graphique qui déboîte", "url": "/fr/video/git-protip-lg/", "locale": "fr", "readingTime": "4:32" }, { "content": "Le diff classique fourni par Git nous donne tout un tas d’informations dont une partie n’est pas essentielle et a tendance à polluer l’affichage dans le terminal. Les points gênants sont principalement l’absence de démarcation claire entre fichiers et les modifications sur une ligne dont la différence est affichée sous forme de deux lignes (suppression/ajout), on peine alors à distinguer les éléments modifiés sur la ligne concernée (rappelle-toi le jeu des 7 différences).\n\nOn a regardé du côté des options de la commande diff et de la configuration, mais rien n’était pleinement satisfaisant. On a alors cherché un outil tiers qui nous facilite la vie dans le terminal, qui soit facile à installer et utiliser. C’est là qu’on a découvert diff-so-fancy.\n\nhttps://github.com/so-fancy/diff-so-fancy", "description": "Le diff classique fourni par Git nous donne tout un tas d’informations dont une partie n’est pas essentielle et a tendance à pol…", "date": 1661947225, "image": "https://i.ytimg.com/vi/gmpNTnrTyuE/maxresdefault.jpg", "_tags": ["git","protip","video"], "title": "Protip Git #1 : un diff sympa et efficace dans le terminal", "url": "/fr/video/protip-git-1-un-diff-sympa-et-efficace-dans-le-terminal/", "locale": "fr", "readingTime": "2:51" }, { "content": "On se lance dans une série fil rouge avec des protips JS, Git, VSCode et bien d'autres. \n\nL'idée est de vous partager nos astuces du quotidien, celles qui font gagner du temps, celles qui nous facilitent le travail, celles qui nous éclatent 😁\n\nLes vidéos ne devraient pas dépasser 5 minutes (on fera au mieux 😉).\nOn vous invite à nous partager vos idées de sujets et vos retours d'expérience.\n\nBonne visualisation 🙂", "description": "On se lance dans une série fil rouge avec des protips JS, Git, VSCode et bien d'autres. \n\nL'idée est de vous partager nos astuce…", "date": 1661945401, "image": "https://i.ytimg.com/vi/4xaaeKeLLCQ/maxresdefault.jpg", "_tags": ["git","js","vscode","video"], "title": "Protips Delicious Insights : nouvelle série fil rouge", "url": "/fr/video/js-protips-delicious-insights-nouvelle-serie-fil-rouge/", "locale": "fr", "readingTime": "0:36" }, { "content": "Les submodules permettent d’assembler différents projets au sein d’un projet conteneur. On peut voir ça à l’inverse comme la capacité de séparer les briques d’un projet monolithique pour permettre leur ré-emploi par ailleurs (principe du plugin).\n\nIls demandent cependant une maîtrise par l'ensemble des participants aux projets et posent des contraintes qui font que se prend souvent les pieds dans le tapis… Mais il y a des alternatives : gestionnaires de dépendances liés aux langages employés, les subtrees ou encore la grande nouveauté de Git 2.25, le sparse-checkout !\n\nCette vidéo fait partie de notre série sur le glossaire Git : https://delicious-insights.com/fr/articles/glossaire-git/.\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/git-glossary-submodules/", "description": "Les submodules permettent d’assembler différents projets au sein d’un projet conteneur. On peut voir ça à l’inverse comme la cap…", "date": 1659938421, "image": "https://i.ytimg.com/vi/eef50nn8Pes/maxresdefault.jpg", "_tags": ["git","submodules","subtrees","sparse-checkout","sous-modules","video"], "title": "Le glossaire Git (11/11) : assemblez vos projets avec les sous-modules", "url": "/fr/video/le-glossaire-git-1111-assemblez-vos-projets-avec-les-sous-modules/", "locale": "fr", "readingTime": "14:42" }, { "content": "Voici ENFIN la quatorzième et dernière vidéo de notre série « JS idiomatique », qui traite de plein de sujets pour faire du JS moderne, post-2015, concis, expressif, lisible et tout et tout 😁\n\nOn termine avec du très lourd, un vaste sujet pour une vidéo qui totalise presque 1 heure (nouveau record) : les modules ECMAScript, ou ES Modules, ou ESM, c'est-à-dire la gestion native des modules en JavaScript !\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/js-es-modules/\n\nLa liste des sujets de la série : https://delicious-insights.com/fr/articles/js-idiomatique/\n\nLes liens évoqués dans la vidéo :\n\n- Le blog de Josh Comeau : https://www.joshwcomeau.com/\n- Son extraordinaire cours vidéo \"CSS for JS Devs\" : https://www.joshwcomeau.com/\n- Son article sur la structuration de codebase React et le pattern de ré-export intéressant qu'il utilise : https://www.joshwcomeau.com/react/file-structure/\n- Les import assertions : https://github.com/tc39/proposal-import-assertions#readme\n- Les JSON modules : https://github.com/tc39/proposal-json-modules#readme\n- Les import maps : https://github.com/WICG/import-maps#readme\n- Les Node conditional exports : https://nodejs.org/api/packages.html#conditional-exports", "description": "Voici ENFIN la quatorzième et dernière vidéo de notre série « JS idiomatique », qui traite de plein de sujets pour faire du JS m…", "date": 1658473204, "image": "https://i.ytimg.com/vi/5hfLiLtOuzY/maxresdefault.jpg", "_tags": ["js","esm","ecmascript","modules","video"], "title": "JS idiomatique : ES Modules (ESM)", "url": "/fr/video/js-idiomatique-es-modules-esm/", "locale": "fr", "readingTime": "56:45" }, { "content": "Le comportement des tags s'apparente à celui des branches à un détail prêt : les tags n'évoluent pas avec l'historique ! Ils servent à marquer un endroit fixe de l'historique. Son usage le plus courant est le marquage des versions logicielles. \n\nCette vidéo fait partie de notre série sur le glossaire Git : https://delicious-insights.com/fr/articles/glossaire-git/.\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/git-rebase-c-est-quoi/", "description": "Le comportement des tags s'apparente à celui des branches à un détail prêt : les tags n'évoluent pas avec l'historique ! Ils ser…", "date": 1657534987, "image": "https://i.ytimg.com/vi/9OsPakahlOg/maxresdefault.jpg", "_tags": ["git","video"], "title": "Le glossaire Git (10/11) : les tags, identifier les points d'historique", "url": "/fr/video/le-glossaire-git-1011-les-tags-identifier-les-points-dhistorique/", "locale": "fr", "readingTime": "6:04" }, { "content": "L'architecture distribuée de Git offre de très nombreux avantages. Qu'il s'agisse de la performance par le travail essentiellement local, de la non dépendance systématique au réseau, de la redondance des données sur les différentes machines participant au projet… on a tout pour travailler le plus efficacement et le plus sereinement possible.\n\nCette vidéo fait partie de notre série sur le glossaire Git : https://delicious-insights.com/fr/articles/glossaire-git/.\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/git-depot-distant-et-local/", "description": "L'architecture distribuée de Git offre de très nombreux avantages. Qu'il s'agisse de la performance par le travail essentielleme…", "date": 1656916206, "image": "https://i.ytimg.com/vi/eF1P00-yu2I/maxresdefault.jpg", "_tags": ["git","video"], "title": "Le glossaire Git (9/11) : dépôt distant vs. dépôt local", "url": "/fr/video/le-glossaire-git-911-depot-distant-vs-depot-local/", "locale": "fr", "readingTime": "6:26" }, { "content": "La notion de rebase en Git est incontournable. Que tu décides ou non d’utiliser cette fonctionnalité (et je peux t’assurer que tu voudras l’utiliser), il te faut savoir les actions qu’elle te permet de réaliser pour décider en pleine conscience.\n\nCette vidéo fait partie de notre série sur le glossaire Git : https://delicious-insights.com/fr/articles/glossaire-git/.\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/git-rebase-c-est-quoi/", "description": "La notion de rebase en Git est incontournable. Que tu décides ou non d’utiliser cette fonctionnalité (et je peux t’assurer que t…", "date": 1656484200, "image": "https://i.ytimg.com/vi/5iPU51gJcCY/maxresdefault.jpg", "_tags": ["git","video"], "title": "Le glossaire Git (8/11) : rebase le couper/coller de l'historique", "url": "/fr/video/le-glossaire-git-811-rebase-le-coupercoller-de-lhistorique/", "locale": "fr", "readingTime": "8:52" }, { "content": "La notion de fusion et de conflit n’est pas propre à Git. Il s’agit cependant bien d’éléments clés de son vocabulaire avec quelques spécificités. Revoyons ensemble rapidement ces bases et découvrons ce que Git nous apporte en complément.\n\nCette vidéo fait partie de notre série sur le glossaire Git : https://delicious-insights.com/fr/articles/glossaire-git/.\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/fusions-et-conflits/", "description": "La notion de fusion et de conflit n’est pas propre à Git. Il s’agit cependant bien d’éléments clés de son vocabulaire avec quelq…", "date": 1655704857, "image": "https://i.ytimg.com/vi/3WClAPrRJ80/maxresdefault.jpg", "_tags": ["git","video"], "title": "Le glossaire Git (7/11) : fusions et conflits", "url": "/fr/video/le-glossaire-git-711-fusions-et-conflits/", "locale": "fr", "readingTime": "10:20" }, { "content": "La qualité des commits est souvent prise à la légère, voire négligée. Pourtant la création de commits dits « atomiques » bénéficie grandement aux projets et à leurs participants. Je t’explique ici ce qu’on entend par « atomique » et quels sont les bénéfices ?\n\nCette vidéo fait partie de notre série sur le glossaire Git : https://delicious-insights.com/fr/articles/glossaire-git/.\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/commit-atomique/", "description": "La qualité des commits est souvent prise à la légère, voire négligée. Pourtant la création de commits dits « atomiques » bénéfic…", "date": 1655100012, "image": "https://i.ytimg.com/vi/bvJ9YKZus7w/maxresdefault.jpg", "_tags": ["git","video"], "title": "Le glossaire Git (6/11) : des commits atomiques ⚛️", "url": "/fr/video/le-glossaire-git-611-des-commits-atomiques/", "locale": "fr", "readingTime": "5:09" }, { "content": "Voici la treizième vidéo de notre série « JS idiomatique », qui traite de plein de sujets pour faire du JS moderne, post-2015, concis, expressif, lisible et tout et tout 😁\n\n Aujourd’hui on fait le point sur une petite syntaxe fort sympathique, mais dont l'arrivée en JS a connu de nombreux obstacles : les séparateurs numériques, une évolution chère à mon cœur 💖\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/js-separateurs-numeriques/\n\nLa liste des sujets de la série : https://delicious-insights.com/fr/articles/js-idiomatique/", "description": "Voici la treizième vidéo de notre série « JS idiomatique », qui traite de plein de sujets pour faire du JS moderne, post-2015, c…", "date": 1654671604, "image": "https://i.ytimg.com/vi/8xq296t6bh4/maxresdefault.jpg", "_tags": ["js","es2021","video"], "title": "JS idiomatique : Séparateurs numériques", "url": "/fr/video/js-idiomatique-separateurs-numeriques/", "locale": "fr", "readingTime": "12:30" }, { "content": "Tu viens de l’univers SVN ou équivalent et tu as peur de faire des branches ? Ou tu découvres seulement la gestion de versions et tu souhaites apprendre comment gérer tes branches avec Git ? Cette vidéo est faite pour toi !\n\nJe t’explique ici ce que sont les branches, la facilité avec laquelle on peut les manipuler, et pourquoi on peut les créer et les supprimer sans crainte.\n\nCette vidéo fait partie de notre série sur le glossaire Git : https://delicious-insights.com/fr/articles/glossaire-git/.\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/git-branches/", "description": "Tu viens de l’univers SVN ou équivalent et tu as peur de faire des branches ? Ou tu découvres seulement la gestion de versions e…", "date": 1654494300, "image": "https://i.ytimg.com/vi/bfaRbHzgBlU/maxresdefault.jpg", "_tags": ["git","video"], "title": "Le glossaire Git (5/11) : les branches, de simples étiquettes", "url": "/fr/video/le-glossaire-git-511-les-branches-de-simples-etiquettes/", "locale": "fr", "readingTime": "9:46" }, { "content": "Voici la douzième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis, expressif, lisible et tout et tout 😁\n\n Aujourd’hui on continue sur les opérateurs récents avec les **opérateurs d'affectation logique**, qui permettent de simplifier certaines expressions courantes.\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/js-affectation-logique/\n\nLa liste des sujets de la série : https://delicious-insights.com/fr/articles/js-idiomatique/\n\nLes liens mentionnés dans la vidéo :\n\n- Les classes en ES2015+ : https://www.youtube.com/watch?v=iamjfPsNc2U&list=PLPoAfTkDs_Jad8tGdMkixD1r7lMjpRstB&index=3\n- Les valeurs par défaut en ES2015 : https://www.youtube.com/watch?v=2cKVlDPg6wc&list=PLPoAfTkDs_Jad8tGdMkixD1r7lMjpRstB&index=6\n- Optional chaining et Nullish coalescing : https://www.youtube.com/watch?v=3Qsq1nXBYBA&list=PLPoAfTkDs_Jad8tGdMkixD1r7lMjpRstB&index=11", "description": "Voici la douzième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis,…", "date": 1654066809, "image": "https://i.ytimg.com/vi/bWjbkeNHVCI/maxresdefault.jpg", "_tags": ["js","tutoriel","es2021","video"], "title": "JS idiomatique : Opérateurs d'affectation logique", "url": "/fr/video/js-idiomatique-operateurs-daffectation-logique/", "locale": "fr", "readingTime": "10:22" }, { "content": "Comment savoir où nous sommes dans notre historique Git ? Sur quelle branche ? Dans quel état de notre projet ? C’est le rôle de HEAD : je ne vais nulle part sans ma tête ! Laisse-moi t’expliquer ce fondamental de Git.\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/git-head/", "description": "Comment savoir où nous sommes dans notre historique Git ? Sur quelle branche ? Dans quel état de notre projet ? C’est le rôle de…", "date": 1653889502, "image": "https://i.ytimg.com/vi/lxZV5pgvZh4/maxresdefault.jpg", "_tags": ["git","video"], "title": "Le glossaire Git (4/11) : HEAD, où ai-je la tête ?", "url": "/fr/video/le-glossaire-git-411-head-ou-ai-je-la-tete/", "locale": "fr", "readingTime": "6:23" }, { "content": "Voici enfin la onzième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis, expressif, lisible et tout et tout 😁\n\n Aujourd’hui on se penche sur une série d’opérateurs arrivés avec ES2020, qui simplifient considérablement notre code : ceux du _Optional Chaining_ et du _Nullish Coalescing_. Tu vas voir, ça change la vie !\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/js-optional-chaining-nullish-coalescing/\n\nLa liste des sujets de la série : https://delicious-insights.com/fr/articles/js-idiomatique/\n\nLes liens mentionnés dans la vidéo :", "description": "Voici enfin la onzième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, co…", "date": 1653461101, "image": "https://i.ytimg.com/vi/3Qsq1nXBYBA/maxresdefault.jpg", "_tags": ["js","es2020","tutoriel","tuto","video"], "title": "JS idiomatique : Optional Chaining et Nullish Coalescing", "url": "/fr/video/js-valeurs-par-defaut/", "locale": "fr", "readingTime": "21:32" }, { "content": "Git traite des fichiers, des répertoires et leurs évolutions lors de la vie d’un projet. Sa conception est calquée sur ce principe : nos fichiers sont représentés par des fichiers blobs, nos répertoires par des fichiers trees, et un instantané / une version du projet par un fichier commit. Voyons ensemble comment tout ça est structuré.\n\nCette vidéo fait partie de notre série sur le glossaire Git : https://delicious-insights.com/fr/articles/glossaire-git/.\n\nCe épisode ne décrit pas le détail des objets 😿. Mais ne sois pas triste, si tu veux creuser ce sujet tu peux aller voir du côté de notre épisode décrivant l’anatomie d’un commit : https://delicious-insights.com/fr/articles/git-commit-detail/\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/objets-et-references-git/", "description": "Git traite des fichiers, des répertoires et leurs évolutions lors de la vie d’un projet. Sa conception est calquée sur ce princi…", "date": 1653285608, "image": "https://i.ytimg.com/vi/HrWA2kO3cQs/maxresdefault.jpg", "_tags": ["git","video"], "title": "Le glossaire Git (3/11) : objets et cascade de références", "url": "/fr/video/le-glossaire-git-311-objets-et-cascade-de-references/", "locale": "fr", "readingTime": "4:33" }, { "content": "Sais-tu que Git possède 141 commandes ? Sais-tu aussi que parmi ces commandes on distingue entre les commandes utiles à l'utilisateur·rice (porcelaine) et celles de plus bas niveau, plutôt utiles aux scripts (plomberie) ?\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/porcelaine-et-plomberie-git/", "description": "Sais-tu que Git possède 141 commandes ? Sais-tu aussi que parmi ces commandes on distingue entre les commandes utiles à l'utilis…", "date": 1652679045, "image": "https://i.ytimg.com/vi/6gtyk-N97rg/maxresdefault.jpg", "_tags": ["git","video"], "title": "Le glossaire Git (2/11) : porcelaine et plomberie, typologie et rôles des commandes", "url": "/fr/video/le-glossaire-git-211-porcelaine-et-plomberie-typologie-et-roles-des-commandes/", "locale": "fr", "readingTime": "3:24" }, { "content": "Comment apprendre Git sans connaître son vocabulaire ? Dans cette série sur le glossaire Git je t’explique les termes incontournables, pour que tu parles Git et que Git te parle !\n\nL’article associé est disponible ici : https://delicious-insights.com/fr/articles/glossaire-git/\nLa playlist YouTube dédiée : https://www.youtube.com/playlist?list=PLPoAfTkDs_JZ_DDl5MReG67N1tF9s0Z3i", "description": "Comment apprendre Git sans connaître son vocabulaire ? Dans cette série sur le glossaire Git je t’explique les termes incontourn…", "date": 1652441423, "image": "https://i.ytimg.com/vi/y8-c0jMDxq8/hqdefault.jpg", "_tags": ["git","video"], "title": "Nouvelle série : le glossaire Git", "url": "/fr/video/nouvelle-serie-le-glossaire-git/", "locale": "fr", "readingTime": "3:43" }, { "content": "Voici la dixième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis, expressif, lisible et tout et tout 😁\n\nOn fait suite à la vidéo de la semaine dernière sur le _binding_ et le _this_ en JavaScript pour parler en détail des *fonctions fléchées*, apparues en ES2015. Leur syntaxe est bien connue, elles sont assez populaires, pourtant leur comportement réel est souvent mal compris, ce qui peut donner lieu à des soucis opérationnels ou, à tout le moins, à une utilisation inadaptée.\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/js-fonctions-flechees/\n\nLa liste des sujets de la série : https://delicious-insights.com/fr/articles/js-idiomatique/\n\nLes liens mentionnés dans la vidéo :\n\n- Inférence de nommage des fonctions anonymes : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/name#inf%C3%A9rence_des_noms_de_fonction\n- Étiquettes d'instruction et court-circuits profonds de boucles : https://delicious-insights.com/fr/articles/js-labels/\n- GitHub Copilot : https://copilot.github.com/\n- Notre cours vidéo d'1h30 : \"JavaScript: this is it!\" ➡ https://cours-video.delicious-insights.com/javascript-this-is-it", "description": "Voici la dixième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis, …", "date": 1647244808, "image": "https://i.ytimg.com/vi/ZwRvM3sdCe8/maxresdefault.jpg", "_tags": ["js","es6","es2015","video"], "title": "JS idiomatique : Fonctions fléchées", "url": "/fr/video/js-idiomatique-fonctions-flechees/", "locale": "fr", "readingTime": "27:03" }, { "content": "Voici la neuvième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis, expressif, lisible et tout et tout 😁\n\nAujourd'hui c'est du lourd, puisqu'on va régler la question du *`this` en JavaScript*. Enfin presque, parce qu'on parlera des fonctions fléchées la prochaine fois, mais on va traiter disons… 95% du sujet aujourd'hui ! Si on revient à l'essentiel, le comportement fondamental de `this` en JavaScript *se résume à une phrase* (courte) ! La prochaine fois que tu verras une personne soi-disant senior en JS se perdre dans des pseudo cas particuliers, tu pourras remettre ça au clair en un rien de temps, tu verras.\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/js-binding-this/\n\nLa liste des sujets de la série : https://delicious-insights.com/fr/articles/js-idiomatique/\n\nLes liens mentionnés dans la vidéo :\n\n- globalThis : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/globalThis\n- Proposition d'application partielle en JavaScript : https://github.com/tc39/proposal-partial-application\n- Function#call : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/call\n- Function#apply : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/apply\n- Function#bind : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Function/bind\n- Notre cours vidéo d'1h30 : \"JavaScript: this is it!\" ➡ https://cours-video.delicious-insights.com/javascript-this-is-it", "description": "Voici la neuvième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis,…", "date": 1646640011, "image": "https://i.ytimg.com/vi/KtqBIzYvJXQ/maxresdefault.jpg", "_tags": ["js","binding","this","video"], "title": "JS idiomatique : Binding et this en JavaScript", "url": "/fr/video/js-idiomatique-binding-et-this-en-javascript/", "locale": "fr", "readingTime": "29:43" }, { "content": "Voici la huitième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis, expressif, lisible et tout et tout 😁\n\nTous les langages de programmation ont une notion de portée ; et la plupart des langages impératifs ou orientés objets l'implémentent de façon similaire. Mais JavaScript a — comme souvent — quelques spécificités importantes, sans compter qu'ES2015 a ajouté de nouveaux comportements. Voyons ça en détail, pour comprendre en quoi `var` est à bannir, pourquoi `function` est parfois plus pratique que les fonctions fléchées, et d'autres choses encore !\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/js-portee-hoisting/\n\nLa liste des sujets de la série : https://delicious-insights.com/fr/articles/js-idiomatique/\n\nLes liens mentionnés dans la vidéo :\n\n- La boucle for-of : s'il ne devait en rester qu'une… : https://delicious-insights.com/fr/articles/js-for-of/\n- `const` is the new `var` : https://delicious-insights.com/fr/articles/const-is-the-new-var/", "description": "Voici la huitième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis,…", "date": 1646035227, "image": "https://i.ytimg.com/vi/iHVoHvgn08k/maxresdefault.jpg", "_tags": ["js","es6","es2015","hoisting","portee","scope","video"], "title": "JS idiomatique : Portée, hoisting et mots-clés déclaratifs", "url": "/fr/video/js-idiomatique-portee-hoisting-et-mots-cles-declaratifs/", "locale": "fr", "readingTime": "27:47" }, { "content": "Voici la septième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis, expressif, lisible et tout et tout 😁\n\nOn parle aujourd’hui des Template Literals, anciennement nommés Template Strings.\n\nJavaScript aura attendu 2015 pour pouvoir enfin interpoler des contenus facilement dans ses chaînes de caractères littérales, mais comme souvent avec JS, ça valait le coup d’attendre ! Car on ne s'est pas contentés de fournir la même fonctionnalité que dans les autres langages qui avaient déjà quelque chose de similaire : on a fait beaucoup plus !\n\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/js-template-literals/\n\nLa liste des sujets de la série : https://delicious-insights.com/fr/articles/js-idiomatique/\n\nLes liens mentionnés dans la vidéo :\n\n- Enfin maîtriser les expressions rationnelles : https://delicious-insights.com/fr/articles/enfin-maitriser-les-expressions-rationnelles/\n- dentist : https://github.com/paperhive/dentist#readme\n- common-tags : https://github.com/zspecza/common-tags#readme\n- ECMAScript Quotes Transformer : https://marketplace.visualstudio.com/items?itemName=vilicvane.es-quotes", "description": "Voici la septième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis,…", "date": 1645430456, "image": "https://i.ytimg.com/vi/k2I_-0My-H8/maxresdefault.jpg", "_tags": ["js","es6","es2015","video"], "title": "JS idiomatique : Template literals", "url": "/fr/video/js-idiomatique-template-literals/", "locale": "fr", "readingTime": "33:51" }, { "content": "Voici la sixième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis, expressif, lisible et tout et tout 😁\n\nVoici la fin de la « Sainte Trinité » ! Après la déstructuration et le rest/spread, voici enfin les valeurs par défaut !\n\nLes valeurs par défaut existent dans la plupart des langages, et souvent bien avant que JavaScript les ajoute en 2015. Mais ça valait le coup d'attendre : les possibilités de la version JavaScript sont parfois plus avancées que dans les autres langages.\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/js-valeurs-par-defaut/\n\nLa liste des sujets de la série : https://delicious-insights.com/fr/articles/js-idiomatique/\n\nLes liens mentionnés dans la vidéo :\n\n- 19 pépites de JavaScript : https://delicious-insights.com/fr/articles/js-nuggets/\n- Définir proprement des paramètres nommés optionnels : https://delicious-insights.com/fr/articles/js-parametres-nommes-optionnels/\n- Intl.DateTimeFormat : https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat", "description": "Voici la sixième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis, …", "date": 1644998401, "image": "https://i.ytimg.com/vi/2cKVlDPg6wc/maxresdefault.jpg", "_tags": ["js","es6","es2015","video"], "title": "JS idiomatique : Valeurs par défaut", "url": "/fr/video/js-idiomatique-valeurs-par-defaut/", "locale": "fr", "readingTime": "21:12" }, { "content": "Voici la cinquième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis, expressif, lisible et tout et tout 😁\n\nDans notre vidéo précédente, on attaquait ce que j’aime appeler la « Sainte Trinité » : la déstructuration, le _rest/spread, et les valeurs par défaut. Dans celle-ci, on va donc traiter du deuxième compère, et notre prochaine vidéo de la série s'occupera du dernier larron.\n\nSi beaucoup de gens ont vite « adopté » le rest/spread tel qu'on le trouve dans ES2015 (c'est-à-dire sur itérables uniquement), il est facile de ne pas en percevoir toutes les subtilités, et puis on fait trop souvent l'impasse sur l'extension apparue avec ES2018, qui permet de les appliquer sur des objets génériques aussi, un vrai bonheur pour faire de l'immutabilité pas cher. Voyons tout ça ensemble.\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/js-rest-spread/\n\nLa liste des sujets de la série : https://delicious-insights.com/fr/articles/js-idiomatique/", "description": "Voici la cinquième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis…", "date": 1644822012, "image": "https://i.ytimg.com/vi/NwKcV4ORhto/maxresdefault.jpg", "_tags": ["js","rest","spread","video"], "title": "JS idiomatique : Rest et Spread", "url": "/fr/video/js-idiomatique-rest-et-spread/", "locale": "fr", "readingTime": "21:35" }, { "content": "Git 2.34 (novembre 2021) et Git 2.35 (janvier 2022) nous apportent quelques nouveautés sympathiques, et comme toujours, des améliorations de performance. Je t’ai préparé une petite sélection des trucs que j’ai trouvés cool 🤩.\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/git-2-34-35/", "description": "Git 2.34 (novembre 2021) et Git 2.35 (janvier 2022) nous apportent quelques nouveautés sympathiques, et comme toujours, des amél…", "date": 1644390002, "image": "https://i.ytimg.com/vi/BKquA3esXX8/maxresdefault.jpg", "_tags": ["git","nouveautés","video"], "title": "Quoi de neuf dans Git 2.34 et 2.35 ?", "url": "/fr/video/quoi-de-neuf-dans-git-234-et-235/", "locale": "fr", "readingTime": "9:02" }, { "content": "Voici la quatrième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis, expressif, lisible et tout et tout 😁\n\nES2015 (longtemps appelé « ES6 ») nous a apporté énormément de choses, dont ce que j'aime appeler la « Sainte Trinité » : la déstructuration, le rest/spread, et les valeurs par défaut. Nous allons les voir chacun dans sa propre vidéo.\n\nLa déstructuration a ceci de particulier qu'elle met le plus de temps à vraiment « percoler » dans nos p'tites cellules grises, de façon à être utilisée à son PLEIN POTENTIEL dans notre code. C'est souvent au fil des mois, voire des ans, à force de repasser sur son code, qu'on finit par en tirer pleinement parti. C'est aussi une syntaxe parfois un peu déroutante. Dans cette vidéo, nous allons l'explorer en profondeur, et essayer de te donner les billes pour exploiter au mieux son potentiel.\n\nN'hésite pas à lire l'article associé : https://delicious-insights.com/fr/articles/js-destructuration/\n\nLa liste des sujets de la série : https://delicious-insights.com/fr/articles/js-idiomatique/\n\nLiens évoqués dans la vidéo :", "description": "Voici la quatrième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis…", "date": 1643788837, "image": "https://i.ytimg.com/vi/Rq_2XKRdOuw/maxresdefault.jpg", "_tags": ["js","déstructuration","es2015","es6","video"], "title": "JS idiomatique : la déstructuration", "url": "/fr/video/js-idiomatique-la-destructuration/", "locale": "fr", "readingTime": "17:49" }, { "content": "Et si on prenait l’élément constituant de base Git, le commit, et qu’on le décortiquait pour découvrir son anatomie ? Je vous propose dans cet article d’autopsier un commit pour comprendre tout un tas d’autres mécanismes qui en découlent ! À vos scalpels !\n\nN'hésitez pas à lire l'article associé : https://delicious-insights.com/fr/articles/git-commit-detail/\n\nL’outil diff-so-fancy que j’utilise : https://github.com/so-fancy/diff-so-fancy", "description": "Et si on prenait l’élément constituant de base Git, le commit, et qu’on le décortiquait pour découvrir son anatomie ? Je vous pr…", "date": 1643179501, "image": "https://i.ytimg.com/vi/5wc-MFuI81I/maxresdefault.jpg", "_tags": ["git","video"], "title": "Anatomie d‘un commit", "url": "/fr/video/anatomie-dun-commit/", "locale": "fr", "readingTime": "29:010" }, { "content": "Voici la troisième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis, expressif, lisible et tout et tout 😁\n\nSans doute la plus longue, avec 42mn tout pile, c'est un véritable cours gratuit qui explore en détail les classes en JS traditionnel, en ES2015, et même les nouveautés d'ES2022 !\n\nVous avez une fonctionnalité chérie ? Vous avez appris des trucs ? Vous attendez impatiemment une fonctionnalité encore sur le feu ? Dites-nous tout dans les commentaires !\n\nN'hésitez pas à lire l'article associé : https://delicious-insights.com/fr/articles/js-classes/\n\nLa liste des sujets de la série : https://delicious-insights.com/fr/articles/js-idiomatique/\n\nLiens évoqués dans la vidéo :\n\n- Naissance de JS / Java : https://delicious-insights.com/fr/articles/javascript-n-a-rien-a-voir-avec-java/\n- Le mode strict de JS : https://delicious-insights.com/fr/articles/es5-strict/", "description": "Voici la troisième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis…", "date": 1642374029, "image": "https://i.ytimg.com/vi/iamjfPsNc2U/maxresdefault.jpg", "_tags": ["js","es2015","es6","classes","es2022","video"], "title": "JS idiomatique : les classes", "url": "/fr/video/js-idiomatique-les-classes/", "locale": "fr", "readingTime": "42:00" }, { "content": "Lorsqu’on débute avec Git, une des premières commandes qu’on utilise est `git add`. Elle est essentielle à une bonne utilisation de Git puisqu’elle nous permet de préparer nos commits. Elle n’est pourtant jamais vraiment apprise, ce qui est regrettable car elle nous offre des options très pratiques !\n\nN'hésitez pas à lire l'article associé : https://delicious-insights.com/fr/articles/git-add/", "description": "Lorsqu’on débute avec Git, une des premières commandes qu’on utilise est `git add`. Elle est essentielle à une bonne utilisation…", "date": 1641970807, "image": "https://i.ytimg.com/vi/APSwkf9wsyg/maxresdefault.jpg", "_tags": ["git","video"], "title": "Préparez vos commits comme un chef avec Git add", "url": "/fr/video/preparez-vos-commits-comme-un-chef-avec-git-add/", "locale": "fr", "readingTime": "16:54" }, { "content": "Il est fondamental de bien comprendre les zones pour saisir l’essence de Git. Il y a 5 zones :\n\n- working directory (copie de travail)\n- stage (connu également sous les noms d’index, staging area, caching area)\n- local repository (dépôt local, parfois appelé .git directory)\n- remote repository (dépôt distant)\n- stash (remise)\n\nParmi ces zones, les 3 principales (celles qu’on utilise tout le temps) sont le working directory, le stage et le local repository. \n\nLa cheatsheet interactive est disponible ici : http://ndpsoftware.com/git-cheatsheet.html \n\nN'hésitez pas à lire l'article associé : https://delicious-insights.com/fr/articles/git-zones/", "description": "Il est fondamental de bien comprendre les zones pour saisir l’essence de Git. Il y a 5 zones :\n\n- working directory (copie de tr…", "date": 1641538827, "image": "https://i.ytimg.com/vi/zS0asJkduTg/maxresdefault.jpg", "_tags": ["git","video"], "title": "Le glossaire Git (1/11) : comprendre les zones et états", "url": "/fr/video/le-glossaire-git-111-comprendre-les-zones-et-etats/", "locale": "fr", "readingTime": "13:23" }, { "content": "Voici la première vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis, expressif, lisible et tout et tout 😁\n\nOn commence par deux notations concises d'ES0215 : les propriétés concises et les méthodes concises.\n\nN'hésitez pas à lire l'article associé : https://delicious-insights.com/fr/articles/js-proprietes-et-methodes-concises/\n\nLa liste des sujets de la série : https://delicious-insights.com/fr/articles/js-idiomatique/", "description": "Voici la première vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis,…", "date": 1640246409, "image": "https://i.ytimg.com/vi/V2KGvZ9faPQ/maxresdefault.jpg", "_tags": ["js","es2015","es6","shorthands","video"], "title": "JS idiomatique : propriétés concises", "url": "/fr/video/js-idiomatique-proprietes-concises/", "locale": "fr", "readingTime": "5:14" }, { "content": "Deuxième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis, expressif, lisible et tout et tout 😁\n\nAprès les propriétés concises et les méthodes concises dans la précédente, voici les noms de propriétés calculés ! On voit la syntaxe elle-même, et on explore divers contextes d'utilisation, de plus en plus avancés, pour insister sur son universalité.\n\nN'hésitez pas à lire l'article associé : https://delicious-insights.com/fr/articles/js-noms-de-proprietes-calcules/\n\nLa liste des sujets de la série : https://delicious-insights.com/fr/articles/js-idiomatique/", "description": "Deuxième vidéo de notre série « JS idiomatique », qui va traiter 14 sujets pour faire du JS moderne, post-2015, concis, expressi…", "date": 1640246401, "image": "https://i.ytimg.com/vi/33MVR0cnxCs/maxresdefault.jpg", "_tags": ["js","es2015","es6","properties","video"], "title": "JS idiomatique : noms de propriétés calculés", "url": "/fr/video/js-idiomatique-noms-de-proprietes-calcules/", "locale": "fr", "readingTime": "9:25" }, { "content": "Lorsqu’on travaille sur un projet, on se retrouve occasionnellement à devoir jongler entre des branches pour répondre à une urgence ou gérer des versions différentes du projet fonctionnant dans des contextes différents (build des ressources, des dépendances…).\n\nC’est à cet effet que nous pouvons utiliser Git worktree : pour nous permettre de travailler sereinement sur différents aspects de notre projet dans des répertoires séparés.\n\nN'hésitez pas à lire l'article associé : https://delicious-insights.com/fr/articles/git-worktree/", "description": "Lorsqu’on travaille sur un projet, on se retrouve occasionnellement à devoir jongler entre des branches pour répondre à une urge…", "date": 1636097405, "image": "https://i.ytimg.com/vi/w2AKL23p-8M/maxresdefault.jpg", "_tags": ["git","worktree","video"], "title": "Dédoublez-vous avec Git worktree", "url": "/fr/video/dedoublez-vous-avec-git-worktree/", "locale": "fr", "readingTime": "10:03" }, { "content": "Urgence en production, vous devez abandonner ce que vous faites pour dépanner un bug critique au plus vite ! Heureusement vous utilisez Git sur votre projet et le stash (la \"remise\") vous permet de mettre votre de travail en cours de côté pour régler l’urgence.", "description": "Urgence en production, vous devez abandonner ce que vous faites pour dépanner un bug critique au plus vite ! Heureusement vous u…", "date": 1636097402, "image": "https://i.ytimg.com/vi/YXqKG2Tc-Pg/maxresdefault.jpg", "_tags": ["git","stash","video"], "title": "Mettre du travail de côté avec Git stash", "url": "/fr/video/git-stash/", "locale": "fr", "readingTime": "12:14" }, { "content": "La simulation des appels réseau dans nos tests est un sujet récurrent. La mise en place des mocks est souvent perçue comme difficile. Pourtant il existe des solutions rapides à mettre en place et pérennes.\n\nOn vous présente dans cette vidéo notre solution préférée pour mocker nos appels API dans nos tests : MSW (Mock Service Worker).\n\nL'argument ultime qui va vous faire adhérer : vous pouvez utiliser les mêmes mocks avec Jest, Storybook et en développement.\n\nN'hésitez pas à lire l'article associé : https://delicious-insights.com/fr/articles/jest-msw/\n\nLiens utiles :\n\nMSW : https://mswjs.io/\nJest : https://jestjs.io/fr/\nLe projet de démonstration : https://github.com/deliciousinsights/msw-jest-storybook", "description": "La simulation des appels réseau dans nos tests est un sujet récurrent. La mise en place des mocks est souvent perçue comme diffi…", "date": 1631514605, "image": "https://i.ytimg.com/vi/JkApE4ubGOg/maxresdefault.jpg", "_tags": ["js","msw","mock service worker","jest","video"], "title": "Simulez vos appels réseau pour vos tests Jest avec MSW", "url": "/fr/video/js-simulez-vos-appels-reseau-pour-vos-tests-jest-avec-msw/", "locale": "fr", "readingTime": "30:41" }, { "content": "Vous aimez Storybook pour vos développements ou l'exposition de vos bibliothèques de composants mais vous peinez dès qu'il s'agit de fournir des jeux de données simulés pour vos composants qui consomment des données depuis des API ? C'est probablement parce que vous ne connaissez pas MSW (Mock Service Worker) ! \n\nOn vous montre dans cette vidéo à quel point MSW est un allié précieux pour mettre en place des jeux de données simulées avec un minimum d'effort et un maximum de pérennité.\n\nN'hésitez pas à lire l'article associé : https://delicious-insights.com/fr/articles/storybook-msw/ \n…ou encore notre article décrivant comment mettre en place MSW avec vos tests Jest : https://delicious-insights.com/fr/articles/jest-msw/\n\nLiens utiles :\n\nMSW : https://mswjs.io/\nStorybook : https://storybook.js.org/\nLe projet de démonstration : https://github.com/deliciousinsights/msw-jest-storybook", "description": "Vous aimez Storybook pour vos développements ou l'exposition de vos bibliothèques de composants mais vous peinez dès qu'il s'agi…", "date": 1631514604, "image": "https://i.ytimg.com/vi/_-mcQGBfZ54/maxresdefault.jpg", "_tags": ["msw","mock service worker","storybook","js","mock","simulation api","video"], "title": "Simulez vos appels réseau dans Storybook avec MSW", "url": "/fr/video/js-simulez-vos-appels-reseau-dans-storybook-avec-msw/", "locale": "fr", "readingTime": "30:31" }, { "content": "Qui n'est pas parfois tête en l'air et oublie de retirer un log ou une restriction dans son code et qui ne devrait pas être partagé ? Comment faire alors pour que nos commits n'embarquent pas des ajouts et modifications qu'il ne faudrait pas ?\n\nPour ça, on a le hooks Git de pre-commit. Il nous permet de réaliser des tâches juste avant que le commit ne soit terminé et donc de stopper le commit s'il faut. On ajoute à ça husky pour faciliter le partage et la mise en place des hooks dans notre projet. \n\nReste alors à lancer notre analyse des contenus en pre-commit. Sauf que ça n'est pas évident d'analyser uniquement les nouveautés qu'on s'apprête à commiter (suite à un \"git add ...\"). On va donc utiliser un outil spécialement fait pour ça, git-precommit-checks, qui va analyser le contenu de nos ajouts et modifications selon les règles qu'on lui aura fourni, et nous permettre de choisir si on souhaite arrêter ou non le commit lorsqu'un texte recherché apparaît.\n\nCette vidéo vous explique comment mettre tout ça en place facilement sur vos projets pour que vous n'ayez plus à y penser.\n\nVous pouvez également consulter toutes ces informations dans notre article sur le même sujet : https://delicious-insights.com/fr/articles/git-hooks-et-validation-de-contenus.\n\nLiens utiles :\n\nhusky : https://github.com/typicode/husky\ngit-precommit-checks : https://mbrehin.github.io/git-precommit-checks/", "description": "Qui n'est pas parfois tête en l'air et oublie de retirer un log ou une restriction dans son code et qui ne devrait pas être part…", "date": 1630909820, "image": "https://i.ytimg.com/vi/y-ZFrkQbjSc/maxresdefault.jpg", "_tags": ["git","hooks","husky","pre-commit","git-precommit-checks","video"], "title": "Les hooks Git (3/5) : sauvez vos commits grâce aux hooks Git, husky et git-precommit-checks", "url": "/fr/video/les-hooks-git-35-sauvez-vos-commits-grace-aux-hooks-git-husky-et-git-precommit-checks/", "locale": "fr", "readingTime": "14:12" }, { "content": "La mise en place et le partage des hooks s'avèrent souvent difficiles au sein des équipes. Heureusement, husky vient simplifier tout ça !\n\nLa documentation officielle de husky : https://github.com/typicode/husky\n\nNotre article sur le même sujet : https://delicious-insights.com/fr/articles/git-hooks-et-husky/\n\nComprendre les hooks : https://delicious-insights.com/fr/articles/git-hooks/", "description": "La mise en place et le partage des hooks s'avèrent souvent difficiles au sein des équipes. Heureusement, husky vient simplifier …", "date": 1630909818, "image": "https://i.ytimg.com/vi/z413go1R55s/maxresdefault.jpg", "_tags": ["git","husky","video"], "title": "Les hooks Git (1/5) : partage facile des hooks avec Husky", "url": "/fr/video/les-hooks-git-15-partage-facile-des-hooks-avec-husky/", "locale": "fr", "readingTime": "11:32" }, { "content": "La qualité d'un historique Git et donc des messages de commits qui le composent offre de nombreux avantages à vos projet, qu'il s'agisse de lisibilité du log facilitant la compréhension des évolutions du projet ou d'automatisations découlant du respect de règles de nommage des commits strictes.\n\nComment alors faire en sorte que les messages de commits des participant·e·s à un projet respectent un format déterminé ? Des formats conventionnels existent-ils et comment choisir ?\n\nCette vidéo vous apportera de nombreuses réponses à ces questions et vous découvrirez comment automatiser la mise en œuvre de commits de qualité.\n\nDécouvrez également notre article sur le sujet : https://delicious-insights.com/fr/articles/git-hooks-et-commitlint.\n\nLiens utiles : \n\nConvention de nommage des commits : https://www.conventionalcommits.org/fr/\ncommitlint : https://commitlint.js.org/\nhusky : https://github.com/typicode/husky", "description": "La qualité d'un historique Git et donc des messages de commits qui le composent offre de nombreux avantages à vos projet, qu'il …", "date": 1630909809, "image": "https://i.ytimg.com/vi/w_LRr_sVrz4/maxresdefault.jpg", "_tags": ["git","hooks","automatisation","commit","qualité","commitlint","husky","conventional-commit","video"], "title": "Les hooks Git (4/5) : améliorez vos messages de commits avec les hooks Git, husky et commitlint", "url": "/fr/video/les-hooks-git-45-ameliorez-vos-messages-de-commits-avec-les-hooks-git-husky-et-commitlint/", "locale": "fr", "readingTime": "22:26" }, { "content": "Parmi les participant·e·s à un projet, il est fréquent que chacun·e ait ses petites habitudes et ses outils. Comment alors faire en sorte que le \"coding style\" et le formatage des fichiers soit uniforme ?\n\nDès lors qu'un outil et une norme ont été définis pour uniformiser, il ne reste plus qu'à garantir que ce formatage soit correctement appliqué par tou·te·s. C'est là qu'interviennent lint-staged et les hooks Git : lint-staged permet d'exécuter vos outils de formatage et d'analyse syntaxiques sur les fichiers demandés (ceux \"stagés\"/prêts à être commités) et le hook Git de pre-commit s'assure que cela se fasse bien au moment du commit. \n\nAjoutez à ça husky pour garantir la bonne installation des hooks pour tout le monde, et vous pouvez travailler sans plus jamais vous demander si quelqu'un n'a pas formaté comme il faut !\n\nVous pouvez également consulter toutes ces informations dans notre article sur le même sujet : https://delicious-insights.com/fr/articles/git-hooks-et-lint-staged.", "description": "Parmi les participant·e·s à un projet, il est fréquent que chacun·e ait ses petites habitudes et ses outils. Comment alors faire…", "date": 1630909802, "image": "https://i.ytimg.com/vi/OiJU_RFxCuo/maxresdefault.jpg", "_tags": ["git","hooks","lint-staged","husky","pre-commit","video"], "title": "Les hooks Git (2/5) : du code bien formaté sans effort avec les hooks Git et lint-staged", "url": "/fr/video/les-hooks-git-25-du-code-bien-formate-sans-effort-avec-les-hooks-git-et-lint-staged/", "locale": "fr", "readingTime": "12:34" }, { "content": "Bien qu'il n'existe pas de convention officielle de nommage des branches, il est fréquent que des règles soient mises en œuvre dans vos projets Git. Même s'il n'existe pas de mécanisme de validation des noms de branches propre à Git, on peut mettre en place des outils qui s'en chargeront.\n\nReste à savoir quand exécuter ces validations, quels outils utiliser, et comment les mettre en place facilement pour qu'ils soient utilisés sans effort par les membres d'une équipe.\n\nVous pouvez consulter tout le détail de cette mise en œuvre dans notre article sur le même sujet : https://delicious-insights.com/fr/articles/git-hooks-validation-des-noms-de-branches.", "description": "Bien qu'il n'existe pas de convention officielle de nommage des branches, il est fréquent que des règles soient mises en œuvre d…", "date": 1630909802, "image": "https://i.ytimg.com/vi/1ZzZrKmpa3I/maxresdefault.jpg", "_tags": ["git","hooks","husky","validate-branch-name","branch","video"], "title": "Les hooks Git (5/5) : normez vos branches avec les hooks Git, husky et validate-branch-name", "url": "/fr/video/les-hooks-git-55-normez-vos-branches-avec-les-hooks-git-husky-et-validate-branch-name/", "locale": "fr", "readingTime": "9:21" }, { "content": "Astuces d'utilisation des commandes, options utiles, les “must have” en configuration, le rebase sans peur et sans peine… toute ces petites choses qui feront que votre utilisation de Git serait plus agréable et efficace !\n\n--\n\nAprès avoir peiné 5 ans dans un environnement Java/Subversion dans le consulting et la banque/finance, Maxime se tourne vers des technologies bien plus agréables : Ruby, Rails, JS et Git. S’en suit un passage en agence, en tant qu’ingénieur R&D, chef de projet, puis directeur technique pour la conception et la mise en œuvre d’une solution e-commerce. Il rejoint finalement Christophe Porteneuve en 2015 chez Delicious Insights où il travaille au développement de SaaS B2B et participe aux formations Git et JS qui font référence.", "description": "Astuces d'utilisation des commandes, options utiles, les “must have” en configuration, le rebase sans peur et sans peine… toute …", "date": 1587938407, "image": "https://i.ytimg.com/vi/OgVQDtEf0w8/maxresdefault.jpg", "_tags": ["flutter","dart","flutter paris","google","meetup","git","versionning","cvs","subversion","github","gitlab","bitbucket","video"], "title": "Git Pro Tips - Maîtrisez Git comme un pro !", "url": "/fr/video/git-pro-tips-maitrisez-git-comme-un-pro/", "locale": "fr", "readingTime": "1:28:15" }, { "content": "Cette présentation est tirée d’un évènement qui nous est très cher : ParisWeb. Vous trouverez toutes les infos qui vont bien ici : https://www.paris-web.fr/\n\n\nLe contenu de cette vidéo décrit le fonctionnement de la commande \"git reset\" et les principaux cas d’utilisations qu'on peut en faire.\n\n\nVous découvrirez par exemple que \"git reset --hard\" est rarement la meilleure option et qu'il est préférable d’utiliser \"git reset --keep\" à la place.\n\n\n\nOn peut voir ça comme une introduction à notre cours vidéo payant \"Git undo\" : https://cours-video.delicious-insights.com/git-undo\n\n\nSur ce, bonne visualisation !", "description": "Cette présentation est tirée d’un évènement qui nous est très cher : ParisWeb. Vous trouverez toutes les infos qui vont bien ici…", "date": 1583396915, "image": "https://i.ytimg.com/vi/EgNTvj-z2Gc/maxresdefault.jpg", "_tags": ["git","video"], "title": "Git reset : rien ne se perd, tout se transforme", "url": "/fr/video/git-reset-rien-ne-se-perd-tout-se-transforme/", "locale": "fr", "readingTime": "26:27" }, { "content": "\"Alors oui, OK, ES2015 ça déchire, et ES2017–2019 ont amené plein de trucs cool (notamment autour de async/await), mais il y en a encore davantage qui débarque dans les toutes prochaines années, et on peut le plus souvent déjà jouer avec !Christophe vous emmène faire un tour de manège à travers les prochaines fonctionnalités qu’il aime le plus et qui deviendront officielles bientôt… ou peut-être plus tard \"\n\n+ d'infos : www.blendwebmix.com", "description": "\"Alors oui, OK, ES2015 ça déchire, et ES2017–2019 ont amené plein de trucs cool (notamment autour de async/await), mais il y e…", "date": 1575630057, "image": "https://i.ytimg.com/vi/L2Ul--lVML4/hqdefault.jpg", "_tags": ["conférence","web","blend","mix","developpement","video"], "title": "\"Alors, quoi de neuf en ES2022 ?\" - Christophe Porteneuve", "url": "/fr/video/alors-quoi-de-neuf-en-es2022-christophe-porteneuve/", "locale": "fr", "readingTime": "1:07:34" }, { "content": "Pas de révolution dans cette nouvelle version, mais quelques petites choses utiles, entre optis de performance, nouveau hook et l’activation automatique de certaines nouvelles fonctionnalités de Git…\n\nSi tu ne connais pas les hooks : https://delicious-insights.com/fr/articles/git-hooks/ \nSi tu ne comprends pas les fusions, que tu ne sais pas ce qu’est un fast-forward :\n- notre article \"merge vs rebase\" : https://delicious-insights.com/fr/articles/bien-utiliser-git-merge-et-rebase/ \n- le cours vidéo équivalent : https://cours-video.delicious-insights.com/git-merge-vs-rebase \nNotre configuration Git aux petits ognons : https://gist.github.com/tdd/470582\n\nL’annonce par GitHub : https://github.blog/2019-11-03-highlights-from-git-2-24/\nLa charte de contribution : https://www.contributor-covenant.org/\nL’outil \"filter-repo\" : https://github.com/newren/git-filter-repo\nLa doc’ détaillée des \"feature macros\" https://git-scm.com/docs/git-config#Documentation/git-config.txt-feature", "description": "Pas de révolution dans cette nouvelle version, mais quelques petites choses utiles, entre optis de performance, nouveau hook et …", "date": 1573209197, "image": "https://i.ytimg.com/vi/JYaKJcRosbg/maxresdefault.jpg", "_tags": ["git","video"], "title": "Quoi de neuf dans Git 2 24 ?", "url": "/fr/video/quoi-de-neuf-dans-git-2-24/", "locale": "fr", "readingTime": "3:59" }, { "content": "2 nouvelles commandes de porcelaine sont apparues avec la version 2.23 de Git. C’est tellement rare que ça mérite qu’on en parle !\n\ngit switch et git restore, pour clarifier les actions qu’elles mènent en remplacement de checkout et reset.", "description": "2 nouvelles commandes de porcelaine sont apparues avec la version 2.23 de Git. C’est tellement rare que ça mérite qu’on en parle…", "date": 1572385009, "image": "https://i.ytimg.com/vi/GWC7TWC3s0s/maxresdefault.jpg", "_tags": ["git","video"], "title": "Quoi de neuf dans Git 2.23 ?", "url": "/fr/video/quoi-de-neuf-dans-git-223/", "locale": "fr", "readingTime": "10:08" }, { "content": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nVoyons un peu ce qui se passe d'un point de vue plus technique, en analysant l'évolution des fichiers dans notre répertoire projet.\n\nJe vais donc afficher dans le terminal à gauche les commandes et contenus de certains fichiers, et à droite nous verrons l’évolution de notre arborescence du sous-répertoire .git quand il sera créé.\n\nJe commence par initialiser un dépôt vide. On voit alors à droite qu'un sous-répertoire .git/ a été créé et tout un tas de fichiers et répertoire déjà présents. Regardons ce qu'il contient en nous concentrons sur les aspects que nous avons déjà vu. Étant donné que le sous-ensemble qui correspond aux hooks ne nous intéresse pas pour ce cours, je vais le supprimer pour qu’il ne gêne pas l’affichage à droite. \n\nOn retrouve en premier lieu un fichier HEAD : si on l'ouvre on voit qu'il ne contient qu'une ligne qui indique une référence refs: refs/heads/master, d'ailleurs on trouve le répertoire correspondant refs/heads/ mais sans le fichier master, et refs/tags.\n\nLe répertoire objects/ fera office de base de données car c'est ici qu'on stockera les fichiers représentant l'historique, donc ceux issus de nos photos et de nos commits.\n\nNous créons ensuite un fichier et vérifions que rien n'a changé dans notre sous répertoire .git/. L'ajout de ce fichier à l‘index nous montre des évolutions au sein du répertoire.git/objects/.\n\nLes répertoires sont découpés par les deux premiers caractères en raison d'une contrainte liée au système de fichiers NTFS qui limite le nombre de fichiers dans un répertoire. La clé du fichier est donc constituée des deux premiers caractères et des caractères restants.\n\nVoyons ce que contient le fichier dans ce sous-répertoire. Si on l'ouvre avec un éditeur il est illisible car il a été compressé via zlib. On va donc analyser avec une commande de plomberie : git cat-file avec les options -t pour obtenir le type et -p pour lire le contenu. On voit donc que le fichier créé est un blob et que son contenu correspond bien à celui que nous avions créé.\n\nOn constate aussi la création d'un fichier index à la racine du répertoire .git et qui est donc notre fameux index. Son contenu est également est illisible sans Git. On va donc utiliser la commande de plomberie git ls-files pour nous montrer ce qu'il représente, et on voit qu'il contient une référence unique vers notre fichier.\n\nOn procède ensuite au commit et voyons qu'on a une nouvelle référence dans refs/heads/ et qui s'appelle master. Si on ouvre ce fichier on voit que ce fichier ne contient qu'une ligne, un identifiant SHA-1 de 40 caractères. D'ailleurs on retrouve cet identifiant dans notre sous répertoire .git/objects/.\n\nMaintenant si on regarde ce fichier dans le détail avec git cat-file, on voit que c’est un bien un objet commit, et qu’il contient une référence vers un objet de type tree créé pour l’occasion. Et si on analyse ce fichier tree, on y trouve une référence vers le blob de notre fichier créé initialement.\n\nCréons à présent une nouvelle branche dev et faisons pointer HEAD dessus pour la faire évoluer avec la commande git checkout -b dev. \n\nSi on vérifie dans le répertoire .git/refs on voit que le fichier .git/refs/heads/dev a bien été créé et qu'il contient bien la même référence que notre branche master actuelle (logique, elles pointe pour l'instant vers le même emplacement dans notre historique puisque HEAD pointe sur master). De même on peut vérifier que le fichier HEAD contient désormais une référence vers dev: ref: refs/heads/dev.\n\nSi on modifie notre fichier et qu'on crée un nouveau commit sur cette branche dev on constate que le fichier .git/refs/heads/dev contient une nouvelle référence. Celle-ci est notre nouvel objet commit qui lui même pointe vers un nouveau tree racine qui à son tour référence le nouveau blob qui représente la photo de notre fichier modifié.\n\nEn résumé la création d'un commit modifiant notre fichier initial a créé un nouveau blob, un nouveau tree référençant ce blob, et un commit référençant ce tree.\n\nMaintenant si je viens créer un nouveau fichier fichier-2, que je l’ajoute à l’index et que je créé un nouveau commit, si je regarde le contenu de ce nouveau commit avec la commande git show, on voit qu’il ajoute bien le fichier-2. \n\nSi on regarde le détail de cet objet commit dans notre base de données Git avec la commande git cat-file -p, on voit qu’il pointe bien vers un nouveau tree. On regarde alors le contenu de ce nouveau tree et on voit qu’il contient 2 références : une vers fichier, et une vers fichier-2. \n…", "description": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nVoyons un peu …", "date": 1571931332, "image": "https://i.ytimg.com/vi/xw4H3WF8FkM/maxresdefault.jpg", "_tags": ["git","video"], "title": "Démonstration dans le terminal (15/15)", "url": "/fr/video/demonstration-dans-le-terminal-1515/", "locale": "fr", "readingTime": "7:28" }, { "content": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nGit est ce qu'on appelle un système de fichiers adressables par contenu. Ça veut dire que c'est le contenu qui définit l'identité d'un objet.\n\nGit utilise à cet effet une fonction de hachage nommé s-h-a-1 (prononce \"chawouane\", pour Secured Hash Algorithm) qui va produire une clé unique de 160 bits, soit 40 caractères hexadécimaux, pour représenter un contenu donné. Note que SHA-1 n'est plus considéré comme sécurisé depuis 2005 et que Git est en train de migrer vers SHA-2.\n\nCette clé est également appelée \"empreinte numérique\" ou \"somme de contrôle\".\n\nDans le dépôt Git, les noms des fichiers pour les 4 types d'objets utilisent directement la clé.\n\nIdentité d'un blob\n\nPour un blob, l’identité est basée sur le contenu du fichier lui-même.\n\nPrenons l'exemple d'un fichier dans mon répertoire courant de travail.\nLorsque je l’ajoute à ma base données Git, j’obtiens un blob dont le nom est l'identité résultante du hachage du contenu, donc des lignes du fichier. \n\nSi ensuite je prends ces mêmes lignes de contenu, et que je les copie à l'identique dans un autre fichier dans un sous-répertoire du projet par exemple, puis que j’ajoute ce même fichier à la base de données Git, Git exploitera alors le blob déjà en place puisque le contenu est strictement identique pour les deux fichiers.\n\nSi par contre je venais à modifier le contenu de l'un des fichiers et que je l'ajoutais à nouveau à la base de données Git, j'obtiendrais alors un nouveau blob pour ce fichier, l'empreinte étant différente et inconnue jusqu'ici.\n\nIdentité d'un tree\n\nOn part de cet exemple pour comprendre la construction de l’identité d’un objet tree. On va dire que nos fichiers déjà créés sont les fichiers A et B et qu’il ont déjà été ajoutés à l’index.\n\nSi je réalise le commit, Git va alors créer et ajouter les objets trees à la base de données.\n\nJe constate que 2 objets trees on été créé pour représenter respectivement le répertoire racine du projet et le sous-répertoire.\nSi j’analyse l'objet tree du répertoire racine, je constate qu'il contient une référence vers le tree du sous-répertoire et une référence vers le blob du fichier A. Il ne traite donc que de ce qu'il contient directement, et ce sont ces objets qui définissent son identité.\nAinsi, lorsque j’analyse le tree du sous-répertoire, je constate bien qu'il contient uniquement une référence vers le blob du fichier B.\n\nIdentité d'un commit\n\nMon schéma précédent n'était pas tout à fait complet. En effet, la création d'un commit entraîne sa représentation dans la base de données Git.\n\nSi je regarde ce que contient cet objet commit dans le détail, j’y vois l’objet tree représentant le niveau racine du projet, d'éventuels commits parents, puis le reste des méta-données, à savoir l'auteur du commit, son commiteur, les horodatages, et enfin le message saisi par l'utilisateur.\n\nUne fois de plus, c'est l'ensemble des ces éléments qui viennent définir l'identité du commit. Par conséquent toute modification de date, message, tree etc. donnera lieu à un autre commit en remplacement.\n\nVu que le ou les commits parents figurent également dans le fichier, ils impactent l'empreinte et donc l'identité : c'est pourquoi on dit que le SHA-1 d'un commit représente non seulement son contenu mais tout son historique, et que « déplacer » un commit dans le graphe de l'historique en altère l'identité.", "description": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nGit est ce qu'…", "date": 1571928808, "image": "https://i.ytimg.com/vi/9Dcdp7-WvkA/maxresdefault.jpg", "_tags": ["git","video"], "title": "Des identités définies par les contenus (14/15)", "url": "/fr/video/des-identites-definies-par-les-contenus-1415/", "locale": "fr", "readingTime": "3:01" }, { "content": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nOn l'a évoqué brièvement dans la partie décrivant le cycle de vie des fichiers : l'ajout à l'index stocke des photos des fichiers.\n\nMais qu'est-ce que ça signifie exactement ?\n\nImagine que tu travailles à la rédaction d'un journal, et que ton dépôt local stocke les photos pour la prochaine publication. Un commit contiendrait alors les photos d'un article.\n\nJe vais te raconter tout ça sous forme d’une petite histoire, en espérant que ça facilite ta compréhension.\n\nJe te présente Camille, photographe stagiaire ; elle est chargée de photographier les fichiers que tu lui demandes pour ton article. Attention, double moyen mnémotechnique pour retenir son rôle : elle est en stage ou “stage” avec l’accent anglais, et elle appuie avec son index pour prendre les photos… Tu as vu comme je redouble de créativité pour t’aider à comprendre… Allez, je reviens au rôle de Camille : elle liste sur son tableau les photos que tu choisis de garder pour la publication du journal.\n\nD'ailleurs voici un premier fichier à photographier. \n\nOn demande donc à Camille de prendre une photo. Elle s'exécute et son appareil lui donne une capture du fichier et lui fournit une référence pour cette photo (rappelle-toi, notre histoire de SHA-1). \n\nElle place alors la photo optimisée dans le journal en préparation. Puis elle inscrit sur son tableau la référence de la photo, son nom initial et son emplacement. \n\nArrive ensuite un second fichier qu'on souhaite aussi dans notre article. Camille le photographie donc et inscrit sa référence dans la liste.\n\nLes actions menées par Camille sont donc ce que réalise notre index Git. Il prend les photos qu'on lui demande et les stocke temporairement dans l'attente de la réalisation d'un commit.", "description": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nOn l'a évoqué …", "date": 1571928724, "image": "https://i.ytimg.com/vi/jlrKunfuaYE/maxresdefault.jpg", "_tags": ["git","video"], "title": "L'index / Le \"stage\" : souriez vous êtes photographié·e 😀 (13/15)", "url": "/fr/video/lindex-le-stage-souriez-vous-etes-photographiee-1315/", "locale": "fr", "readingTime": "1:36" }, { "content": "On vient de le voir avec l'index, nos manipulations Git aboutissent à des fichiers aux noms abscons et difficilement mémorisables. \n\nOui, j’ai dit « abscons », c’est pour me donner un air intelligent. Ça fait son effet, non ?\n\nBref, il existe des mécanismes pour référencer avec des noms plus simples ces fichiers aux noms étranges.\n\nOn trouve plusieurs mécanismes pour gérer ces références et qui sont complémentaires :\n\nComme on l'a vu l'index s'occupe de lister les références d'objets en préparation d'un (+) commit qui à son tour reprend ces références et pointe vers un ou plusieurs commit parents. Un historique est donc la représentation des relations entre les commits. Le « HEAD » désigne le commit courant, celui servant de base à notre travail local, ou en clair, celui duquel partirait le prochain commit. Cette désignation est souvent indirecte, c-à-d qu'elle désigne une branche qui elle-même pointe sur un commit. Grosso modo toute manipulation ou déplacement dans notre historique représente un déplacement de HEAD ou de l’étiquette de branche qu’il pointe, donc un changement de référence.\n\nOn avait parlé plus tôt des branches. Et il se trouve que je ne t’avais pas tout dit. Une branche est en réalité une simple étiquette nommée qui pointe vers le dernier commit en date de l'historique qu'elle désigne. On parle parfois aussi de tête de branche pour faciliter notre compréhension. Du coup la branche en elle-même est la lecture qu’on fait des références de commits successifs jusqu’à l’étiquette.\n\nUn tag est comme une branche, à savoir une simple étiquette nommée, à la différence près qu'un tag a pour vocation de toujours désigner le même emplacement ou commit, contrairement à une branche qui évoluera. Il existe aussi des tags annotés, qui contiennent quelques méta-données supplémentaires.\n\nAllez, je te montre tout ça avec un joli schéma animé.\n\nAssemblage des références\n\nSi on repart de nos objets, voici comment s'enchaînent les références dans la construction d'un historique Git.\n\nOn a donc les blobs qui représentent des fichiers. Viennent ensuite les trees, qui représentent nos répertoires et référencent d'autres trees et blobs. Chaque commit référencera un objet tree représentant la racine du projet. \n\nOn s'attaque ensuite à la création de l'historique des commits. Celui-ci débute par la mise en place d'une première branche nommée par défaut « master ». Celle-ci est automatiquement créée avec notre premier commit. Il s'agit d'une simple étiquette qui référence le commit. On trouve également une autre référence essentielle à Git, « HEAD », qui a pour rôle de nous indiquer notre emplacement actuel dans l'historique. Dans l'immédiat elle pointe sur la branche « master ». On enchaîne ensuite les commits qui vont créer notre historique, chaque commit référençant son parent.\n\nSi on vient créer une branche « dev », on voit qu'on crée en fait un autre pointeur vers l'emplacement référencé par HEAD. Note qu'on a créé l'étiquette mais pas fait pointer HEAD dessus : elle n'est donc pas la branche active. Allez, faisons ça : demandons à HEAD de référencer la branche « dev » de manière à pouvoir la faire évoluer.\n\nAjoutons ensuite des commits. On fait ensuite repointer HEAD sur « master » pour qu'elle puisse à son tour évoluer en recevant le travail effectué sur la branche « dev ». Lorsqu'on effectue la fusion on se retrouve avec un commit ayant deux références parentes. Nous pouvons créer un tag pour marquer la version de notre projet suite à cette fusion de travail. \n\nEnsuite si on créé un nouveau commit sur « master », on voit que le tag conserve bien sa référence intacte alors que « master » pointe vers la référence du nouveau commit.\n\nEnfin, notre branche « dev » étant fusionnée, nous pouvons décider de la supprimer. Ça nécessite juste la suppression de la référence dans le dépôt, et ne vient en aucun cas supprimer les commits qu'elle contenait.", "description": "On vient de le voir avec l'index, nos manipulations Git aboutissent à des fichiers aux noms abscons et difficilement mémorisable…", "date": 1571928699, "image": "https://i.ytimg.com/vi/dwuf-SDFS1o/maxresdefault.jpg", "_tags": ["git","video"], "title": "Des fichiers et des références (12/15)", "url": "/fr/video/des-fichiers-et-des-references-1215/", "locale": "fr", "readingTime": "3:21" }, { "content": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nPour bien comprendre les commandes de Git, il est souvent utile de comprendre ses mécanismes internes. Dans cette partie, je vais te montrer que, malgré sa complexité apparente avec toutes ses commandes et ses options, le fonctionnement interne de Git est simple.\n\nLinus Torvalds, l'inventeur de Git, est parti d'un constat simple : on gère des fichiers et répertoires, donc autant les représenter comme un système de fichiers. \n\nUn dépôt Git contient ainsi 4 types d'objets principaux. Au plus bas niveau, les fichiers sont représentés par des objets appelés \"blobs\", un terme usuel en informatique qui signifie Binary Large OBjects. Chaque répertoire est représenté par un objet \"tree\", et décrit les blobs et autres trees qu'il contient. Viennent ensuite les objets de niveau supérieur, à savoir les commits et les tags, qui représentent le graphe d’historique et les méta-données, c'est-à-dire les informations descriptives : le message, la date, l'auteur, le commiteur etc. On parle aussi d'objets commit-ish et tree-ish.\n\nCommit-ish désigne tout ce qui se rapporte directement ou indirectement à un commit, on ne s’y attendait pas. On trouve donc les commits et les tags.\n\nEt un tree-ish concerne tout ce qui se rapporte à, attention suspens, un objet de type tree, c'est-à-dire les trees eux-même et les commit-ish.", "description": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nPour bien comp…", "date": 1571928044, "image": "https://i.ytimg.com/vi/zh2F5bd-A_E/maxresdefault.jpg", "_tags": ["git","video"], "title": "Des fichiers représentés par… des fichiers (11/15)", "url": "/fr/video/des-fichiers-representes-par-des-fichiers-1115/", "locale": "fr", "readingTime": "1:12" }, { "content": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nJusque là nous avons parlé essentiellement de travail local. Même si 99% du travail avec Git se fait localement, il est important que tu comprennes la manière dont s’effectue le partage.\n\nLe partage du travail via un serveur distant est facile. Ça consiste à transmettre et récupérer les nouvelles références entre le dépôt local et le dépôt distant.\n\nPour illustrer ça, on va voir les interactions entre 2 collègues, Anna et Elliott, et le partage via un dépôt distant commun qu'on appellera par convention \"origin\". On suppose ici qu'ils collaborent à une même branche au lieu de travailler sur des sujets distincts, et donc sur des branches distinctes.\n\nAnna réalise un commit qu'elle partage en l'envoyant sur le serveur. Elliott a besoin de ce travail et le récupère donc sur sa machine depuis le serveur. Il effectue à son tour 2 commits. Puis il les partage. Pendant ce temps, Anna a continué de travailler et a produit un nouveau commit. Avant de pouvoir le partager elle va devoir récupérer les évolutions d'Elliott. Elle pourra alors partager son dernier commit, et ainsi de suite…", "description": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nJusque là nous…", "date": 1571927994, "image": "https://i.ytimg.com/vi/1MQh2QdsrrY/maxresdefault.jpg", "_tags": ["git","video"], "title": "Partager : synchronisations avec le dépôt distant (10/15)", "url": "/fr/video/partager-synchronisations-avec-le-depot-distant-1015/", "locale": "fr", "readingTime": "1:01" }, { "content": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nLa remise est une zone précieuse pour mettre un travail de côté sans avoir à commiter.\nImagine que tu sois en train de réaliser une tâche avec des modifications en cours sur les fichiers A, B et C et 2 nouveaux fichiers, D et E.\n\nLe travail était déjà avancé et tu as commencé à préparer l'index en vue d'un premier commit. Tu y a ajouté les fichiers A, C et E. À ce stade, ni l'index, ni la copie de travail ne sont prêt pour valider le commit.\n\nEt là, c'est le drame : ton chef vient te forcer la main pour un travail soit disant urgent sur ce même projet, et comme c'est le chef, il a raison… ou plutôt tu n’as pas trop le choix.\n\nTu dois donc mettre de côté tout ton travail en cours pour repartir avec une copie propre du dernier état de ton dépôt. Si tu corriges un bogue de production par exemple, tu devras te remettre dans le même état que la version de production. Tu va donc placer tout ton travail dans la remise, y compris les fichiers non suivis, ne serait-ce que pour éviter de les commiter par erreur avec le travail urgent.\n\nTu peux à présent traiter l'urgence et donc effectuer les mises à jour attendues et les valider pour pouvoir les partager (et si besoin livrer le correctif en production).\n\nUne fois l'urgence traitée, tu peux reprendre ton travail en le récupérant de la remise pour le remettre dans la copie de travail, et si possible dans l'index. Tu peux alors continuer comme si de rien n'était.", "description": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nLa remise est …", "date": 1571927960, "image": "https://i.ytimg.com/vi/Db8FoRAx87U/maxresdefault.jpg", "_tags": ["git","video"], "title": "Mettre de côté un travail en cours (et le reprendre plus tard) (9/15)", "url": "/fr/video/mettre-de-cote-un-travail-en-cours-et-le-reprendre-plus-tard-915/", "locale": "fr", "readingTime": "1:14" }, { "content": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nSi tu veux bien comprendre les opérations que tu réalises avec Git, tu dois comprendre les étapes par lesquelles transitent tes fichiers pour gérer tes versions, et par conséquent tu dois connaître une partie de l’architecture de Git, à commencer par les zones.\n\nJe sais, c’est terrible, il faut que tu apprennes l’outil si tu veux travailler finement et intelligemment, et lire la doc’, bah c’est chiant ! Heureusement que je suis là pour t’expliquer tout ça !😄\n\nComme je te le disais, Git propose une gestion très fine du cycle de vie des fichiers. Tu trouveras peut être ça plus compliqué que dans des outils comme Subversion, avec plus d'opérations à réaliser tout ça, tout ça. Mais en vrai, tu peux faire aussi peu d’opérations en Git ce qui te produira un historique tout aussi moisi. \n\nQuoi qu’il en soit, l'objectif de Git, c’est d'élargir le potentiel que présentaient ces outils et de te permettre d'effectuer aussi bien des opérations chirurgicales que des opérations classiques, et tant qu’à faire, le plus rapidement possible.\n\nLes zones de Git vont te servir à ça, c’est-à-dire à construire tes commits et préparer, puis partager ton historique. Selon les zones que tu utilises, l’état des fichiers change pour passer d'un état de création à un état validé, enregistré dans Git.\n\n5 zones\n\nIl existe 5 zones en tout qu’on découpe virtuellement en fonction de leur fréquence d’utilisation, ce qui va également me faciliter leur explication. \n\nLes 3 zones que je qualifie de « principales » sont :\n \nla copie de travail ;\nl’index, dont le nom a varié dans le temps et qu’on retrouve parfois sous les noms de stage, staging area ou encore cache ;\nenfin, le dépôt local ou local repository en anglais.\n\nOn a déjà vu ce qu’est la copie de travail, c’est l’endroit où tu réalises ton travail.\n\nL’index est une zone tampon qui va te servir à affiner ton prototype de commit jusqu’à sa validation. Il est hyper précieux, car c’est grâce à lui que tu peux choisir les fichiers ou parties de fichiers que tu souhaites intégrer dans ton prochain commit.\n\nLe dépôt local est en quelque sorte ta base de données locale puisqu’il stocke les commits et les autres informations qui sont utiles à ta gestion de versions.\n\nTu l’as certainement compris : ces 3 zones « principales » sont celles que tu utilises tout le temps puisque c’est à travers elles que tu construis ton historique. \n\nOn utilise plus occasionnellement les 2 autres zones. On y trouve \nle stash, qu'on apelle aussi « remise » en français, et qui te permet de mettre de côté un travail que tu aurais commencé pour en réaliser un autre, souvent plus urgent ;\nenfin on a le dépôt distant, qui te sert à partager ton historique de commits ou à le synchroniser avec d’éventuels membres d’une équipe. La synchronisation s’effectue donc entre ton dépôt local et un dépôt distant.\n\nOn va commencer par voir dans le détail ces 3 zones principales avec les étapes de construction d'un historique.\n\nLes étapes d'un commit à travers les zones\n\nOn commence avec les étapes de création d’un commit à travers notre copie de travail, notre index et jusqu’à notre dépôt local.\n\nUn commit stocke des informations liées à des fichiers qui sont créés, modifiés ou supprimés. \n\nPour préparer un commit tu commences donc dans ta copie de travail, par exemple ici tu créés et tu mets à jour les fichiers « A », « B » et « C ». Tu prévois de tous les intégrer dans ton commit. Tu les ajoutes donc à l’index, ce qui prépare ce qu'on appelle des instantanés, des sortes de photos des fichiers. Tu te rends alors compte que les fichiers B et C traitent en fait d’autres sujets que « A », et comme tu veux créer des commits qui ont du sens, tu décides de les retirer de l'index. Tu modifies « C », ce qui est représenté par par le « C’ » à l'écran. Et vu qu'il traite maintenant du même sujet que A, tu le rajoutes à l’index. Le travail à l'air satisfaisant, tu valides donc et crées le commit.\n\nSi jamais le commit mérite d’autres mises à jour, il faudra que tu le défasses en gardant le travail qu'il contenait, donc en revenant soit à l’état des fichiers indexés, soit à l’état de la copie de travail. Dans les 2 cas, tu oublies le commit sans perdre ton travail avec l'optique de créer un autre commit à la place.\nEnfin, tu peux aussi vouloir simplement oublier tout le travail représenté par le commit, ce qui veut dire défaire ton travail dans les 3 zones.\n\nNote que j’ai bien parlé d’oublier le commit. J'insiste là-dessus car Git ne supprime pas immédiatement les objets dans sa base de données, il ne fait que les déréférencer, mais ça, on reparlera plus tard.\n\n…", "description": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nSi tu veux bie…", "date": 1571927949, "image": "https://i.ytimg.com/vi/VFvu83YaAow/maxresdefault.jpg", "_tags": ["git","video"], "title": "Zones et cycle de vie des fichiers (8/15)", "url": "/fr/video/zones-et-cycle-de-vie-des-fichiers-815/", "locale": "fr", "readingTime": "6:14" }, { "content": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nBon jusque là rien de bien fou, je t’ai raconté des généralités sur des choses qui te paraissent peut être évidentes. Après, ça ne fait jamais de mal de prendre du recul et de repenser à nos attentes quand il s’agit d’utiliser des outils.\n\nIl est temps que je rentre un peu plus dans le vif du sujet, en parlant justement de Git et de ce qu’il nous apporte d’utile.\n\nAvec Git et les outils évolués de gestion de versions on se retrouve confronté à autre chose que 3 actions classiques en mode « commit, pull, push ». Ça implique donc, en plus de l’architecture, de connaître le vocabulaire propre à l’outil. C’est un peu comme quand tu codes, si tu n’apprends pas le langage, ne t’attends pas à faire des miracles, même si certains trucs comme WinDev et WebDev te promettent le contraire.\n\nAlors je ne vais pas te faire le tour du glossaire global de Git, d'ailleurs tu as la commande git help glossary pour ça, mais je vais te donner les mots clés qui devraient t’être utiles pour comprendre ce qui se passe.\n\nUn peu de vocabulaire…\n\nAllez, on attaque avec le premier terme : la copie de travail, ou “working directory” en anglais. Celui-la n’est pas le plus dur. J’imagine que tu as compris qu’il s’agit de l’état actuel sur le disque des dossiers et fichiers, donc ton espace de travail au sein du projet.\n\nEn face, tu as le dépôt. C’est grosso-modo la destination de ton travail dans Git et qui gèrera l’ensemble de tes versions pour un même projet, localement ou sur un serveur.\n\nDans cette copie de travail, lorsque tu fais une série de modifications sur des fichiers et que tu souhaites les enregistrer dans Git, tu créés alors une version, ou révision, qu’on appelle aussi plus couramment un commit. \n\nIl s’agit donc d’une soumission unique, idéalement thématique et atomique et pour laquelle Git créera un identifiant unique, le SHA-1, dont on reparlera un peu plus tard.\n\nQuand tu as réalisé plusieurs commits, tu te retrouves avec une succession de versions qui représente l’historique de ton projet, autrement appelé le log.\n\nEt pour marquer l’emplacement duquel Git doit partir pour créer une nouvelle version, il utilise une référence nommée HEAD. C’est généralement le dernier commit en date dans l’historique de référence actuel. \n\nTu peux voir ça comme ton véhicule sur un trajet à parcourir, car HEAD avancera toujours avec toi. Donc dans Git, HEAD marque l’emplacement où tu te situes, c’est-à-dire qu’il fait directement ou indirectement référence à un commit. Le terme est plutôt bien choisi, car on ne va nulle part sans sa tête… ou alors pas très loin avant que tout s’arrête…\n\nPour isoler un ensemble de commits sur un thème ou simplement pour travailler plus facilement en équipe, on utilise les branches. \n\nLa branche de référence dans un dépôt, c’est la branche master, avec un « m » minuscule. C’est aussi celle qui est créée par défaut par Git. \n\nAprès, on peut faire ce qu’on veut avec les branches, les créer depuis où on veut, avec la profondeur qu’on veut, et sans contrainte.\n\nEnfin, quand tu as terminé un travail isolé et que tu souhaites le mêler à un sur-ensemble, tu vas devoir fusionner les branches concernées, ou faire un merge, en terminologie Git.\n\nÇa va donc venir réconcilier des travaux de plusieurs branches pour te fournir un résultat consolidé.\n\nVoilà pour la base du vocabulaire utile à Git. On verra d’autres termes utiles au fil de l’eau, car pour certains j’ai besoin de plus de contexte pour que tu comprennes bien. Allez, il est temps que je te montre le fonctionnement de Git, à commencer par son architecture.", "description": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nBon jusque là …", "date": 1571927808, "image": "https://i.ytimg.com/vi/Gxno5ELE2b0/hqdefault.jpg", "_tags": ["git","video"], "title": "Do you speak Git? (7/15)", "url": "/fr/video/do-you-speak-git-715/", "locale": "fr", "readingTime": "2:59" }, { "content": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nAvant même de rentrer dans la technique, les commandes et tout ça, je te fais une petite leçon d’histoire qui te servira à enrichir ta culture personnelle, pour briller soirée, ou pas, mais surtout pour que tu comprennes les raisons de la genèse de Git et son cheminement jusqu’à aujourd'hui. Bref, des généralités dont tu retiendras ce que tu voudras.\n\nDéjà, il faut que tu saches que Git n’est pas tout récent puisqu’il a été créé en 2005 par un monsieur dont tu as peut être déjà entendu parler, Linus Torvalds. Alors pourquoi a-t-il créé de nulle part un outil de gestion de versions ? Et bien il se trouve qu’à l’époque il travaillait sur un petit projet open source peu connu nommé Linux et qui utilisait un système de gestion de versions propriétaire, mais mis à disposition gratuitement, BitKeeper.\n\nLà il s’est passé un mic-mac politco-commercial avec des histoires de reverse-engineering de l’outil, blablabla. Bref, du jour au lendemain BitKeeper ferme la porte et là, c’est le drame… Du coup, Mr Torvalds, il regarde les trucs dispos sur le marché, sauf que rien ne le satisfait, et d’ailleurs BitKeeper n’était pas non plus idéal… et donc, il remonte ses manches, et sort un premier proto avec un objectif simple : à terme, ça doit pouvoir tout faire, et ça doit fonctionner comme un système de fichiers, puisque ça traite des fichiers.\n\nVu que Mr Torvalds, malgré son décalage sociale, il fait souvent cadeau de son travail, il décide de rendre Git open source, tout ça sous une licence GPL dans sa version 2.\nTrès vite, c’est-à-dire en juillet 2005, Linus Torvalds abandonne la maintenance et le développement et il les délègue a Junio Hamano. Donc, quand on y pense, le plus gros des remerciements devrait aller à cet autre monsieur 😁.\n\nCôté stabilité de l’outil et version, sa première version stable, la 1.0.0, a été livrée en décembre 2005. C’est un peu inception là, un outil de gestion de version qui a des versions. D’ailleurs, le code source de Git est géré avec… Git !\n \nJe dois aussi te préciser une chose essentielle, la prononciation : Git se prononce donc « guitt », et non pas « Gîte ». Sache également qu’il ne s’agit pas d’un acronyme, mais bien d’un terme anglais qui signifie « crétin ». Tu te rappelles, je t’ai dit que Linus Torvalds est « décalé socialement », eh bah là, on est dedans… Il a justifié son choix en disant, je cite : « je ne suis qu'un sale égocentrique, donc j'appelle tous mes projets d'après ma propre personne. D'abord Linux, puis Git. ».\n\nEnfin, Git doit en bonne partie sa notoriété non pas au noyau Linux ni à son créateur, mais à la plateforme d'hébergement de code source GitHub, que malheureusement beaucoup de gens ne dissocient pas de Git.\n\nVoilà pour la petite histoire, parlons un peu de Git et des outils graphiques…", "description": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nAvant même de …", "date": 1571927769, "image": "https://i.ytimg.com/vi/uj9-1ObWwtk/hqdefault.jpg", "_tags": ["git","video"], "title": "C’est l’histoire d'un système de gestion de versions… (6/15)", "url": "/fr/video/cest-lhistoire-dun-systeme-de-gestion-de-versions-615/", "locale": "fr", "readingTime": "4:46" }, { "content": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nJe te montre maintenant avec quelques animations la manière dont les outils de gestion de versions ont évolués dans le temps, pour que tu comprennes les inconvénients de certains, et surtout les avantages des nouveaux. Et quand je dis nouveau, c’est parce que Git n’est pas seul, il y en a d’autre comme Mercurial par exemple.\n\nAu départ on faisait de bonnes vieilles sauvegardes locales à la mano, dans des répertoires horodatés, éventuellement compressés quand on était sérieux.\n\nC’est là que les premiers systèmes de gestion de versions sont arrivés, comme CVS, ClearCase, Subversion, en nous proposant de déporter nos sauvegardes et de permettre un partage plus facile.\n\nCette approche avait un tout petit défaut, ça nécessitait une connexion réseau pour travailler avec le dépôt central. Quand je dis « tout petit », je suis ironique, parce que ça veut dire que quand il n’y a plus de réseau, on ne peux plus travailler avec l’équipe. Donc ça chiffre vite. Perso, j’ai éprouvé ça en entreprise, et, au-delà de la perte d’argent que ça représente pour la boite, le fait d’avoir une pause obligatoire à durée indéterminée pour toute l’équipe, c’est pas folichon !\n\nDu coup c’est en partant de ce constat que les systèmes distribués ont été créés. Leur but est de nous libérer de la contrainte du réseau, mais pas que, puisqu’ils nous libèrent aussi de la contrainte du serveur en intégrant localement les versions. En gros, on se retrouve avec l’intégralité des versions du projets sur les différentes machines de l’équipe, ce qui fait qu’on peut tout à fait travailler si le serveur central tombe, ou en remonter un vite fait, même s’il ne faisait pas l’objet de sauvegardes régulières. \n\nLà encore j’ai un retour d’expérience à te faire puisque j’ai vécu le crash d’un serveur SVN, et vu qu’il n'était pas sauvegardé, impossible de recréer l’historique du projet, on est reparti d’un historique démarrant au jour du crash.\n\nSi je rentre plus dans le détail, voici en quoi les systèmes de gestion de versions distribués sont mieux que les autres. \n\nPour commencer, on a plus de criticité du serveur, et donc on a plus la nécessité d’y être connectés à tout instant. Ce qui veut dire que si le serveur brûle, tout le monde peut continuer de travailler localement, et on pourrait même travailler de machine à machine. Bon en vrai, si le serveur brûle, je pense que tu as d’autres priorités que de continuer à bosser sur ton projet, comme… sauver ta vie, ou éteindre le début d’incendie par exemple… bon après, c’est toi qui vois !\n\nOn peut aussi facilement remonter un serveur puisque l’intégralité des versions est conservée sur les différentes machines, donc on ne perd rien.\n\nEnfin, on est tranquille si le réseau tombe puisque l’essentiel des opérations (c’est-à-dire toutes sauf le partage) se fait localement. Donc si le réseau de l’entreprise tombe : tu peux travailler de manière isolée sur ta machine et tu te synchroniseras quand le réseau sera revenu.\n\nIl y a encore d’autres avantages qui découlent de cette architecture, à commencer par la rapidité des opérations liées à l’historique (commit, log, reset, etc.) puisqu’elles s’effectuent localement ! Note enfin que tout ce qui est produit localement n’a pas l’obligation d’être partagé. Tu peux donc effectuer du travail « privé » sans gêner tes collaborateurs et sans avoir besoin des droits de commit.", "description": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nJe te montre m…", "date": 1571927699, "image": "https://i.ytimg.com/vi/JeZtQSkQcWY/maxresdefault.jpg", "_tags": ["git","video"], "title": "Évolution des systèmes de gestion de versions (5/15)", "url": "/fr/video/evolution-des-systemes-de-gestion-de-versions-515/", "locale": "fr", "readingTime": "2:38" }, { "content": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nJe reviens sur ce que j’ai dit précédemment. J’ai dit que Git effectue des sauvegardes des projets. Prends cependant garde à ne pas considérer cet outil principalement comme un système de sauvegarde, sinon tu risques d'impacter la qualité de ton historique et de prendre de mauvaises habitudes par exemple en pushant systématiquement après un commit, ou en créant des commits pas finis parce, quand tu pars le soir, tu as peur de perdre ton travail en cours.\n\nQuand tu produits des commits « foireux », ton historique devient difficile à analyser et à exploiter, sans parler du temps que tu perds à faire des « pushes » trop fréquents et qui entraineront immanquablement des conflits plus nombreux.\n\nGarde donc bien à l’esprit que le but ultime est de fluidifier ta gestion de projet.\n\nSi tu as besoin de faire de la sauvegarde, tu as probablement besoin de gérer plus que tes projets Git, et pour ça, tu trouve pléthore d’outils qui font ça en tâche de fond. Par exemple chez Delicious Insights on utilise Backblaze.\n\nEn résumé, les bases d’une bonne gestion de projet avec un outil de gestion de version tel que Git passent par la création de commits qui ont du sens et un partage, donc des « pushes », uniquement quand c’est nécessaire. Bon après ça c’est un idéal qu’on souhaite atteindre, mais Git sait qu’on reste humain, c’est pour ça qu’il a plein de choses sympas pour nous aider, même quand on est mauvais 😝.", "description": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nJe reviens sur…", "date": 1571927673, "image": "https://i.ytimg.com/vi/ntW-5zMke1o/maxresdefault.jpg", "_tags": ["git","video"], "title": "Gérer des sauvegardes : oui mais attention ! (4/15)", "url": "/fr/video/gerer-des-sauvegardes-oui-mais-attention-415/", "locale": "fr", "readingTime": "1:06" }, { "content": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nEst-ce que tu ne t'es jamais demandé ce que tu attends réellement lorsque tu cherches à gérer tes versions de fichiers dans un projet ? \n\nLà, je te parle de la philosophie des systèmes de gestion de versions, ou plus exactement de ce qu’on attend en tant qu’utilisateurs et utilisatrices.\n\nLa première chose que je souhaite faire, c’est pouvoir consulter des copies historiques de mon travail pour voir les évolutions que j’ai mené depuis une version donnée, ce qui me permet de comparer.\n\nDu coup, indirectement ça gère la sauvegarde de mes fichiers à travers les versions successives du projet. Je peux alors exploiter une version antérieure si jamais la version actuelle ne me satisfait pas ou plus.\n\nSi je ne suis pas contraint à travailler de manière linéaire, c’est-à-dire si je ne suis pas obligé de créer une version après une autre et que je peux plutôt créer une en parallèle d’une autre, je peux alors expérimenter des choses, passer d'une idée à une autre, sans pour autant perdre mon travail ou m’emmêler les pinceaux.\n\nTout ça c’est bien quand je travaille seul. Après, quand on travaille à plusieurs, on s’attend à plus, car on va vouloir partager et collaborer de la manière la plus efficace possible. Donc si on peut éviter de se soucier de qui a partagé en premier, ou de savoir si quelqu’un est en train d’éditer un fichier qu'on souhaite modifier, on gagne du temps et de la sérénité. Par exemple si je partage une nouvelle version d’un fichier et qu’après ça un des collègue dont l’historique projet n’était pas à jour publie aussi une version modifiée, ça ne serait pas bienvenu s’il écrasait mon travail.\n\nDu coup il faudrait pouvoir faciliter la mise en commun et éviter les fusions manuelles des fichiers édités par plusieurs personnes en simultané. Typiquement, si ma collègue a édité l’entête d’un document et moi le pied de page, ça devrait rouler tout seul sans que j’ai à intervenir pour assembler nos travaux à la mano. Et dans le cas où les modifs seraient au même endroit, et bien soit moi, soit ma collègue pourrait faire l’arbitrage à la main.", "description": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nEst-ce que tu …", "date": 1571927595, "image": "https://i.ytimg.com/vi/1DU63btykM8/maxresdefault.jpg", "_tags": ["git","video"], "title": "Pourquoi gérer des versions ? (3/15)", "url": "/fr/video/pourquoi-gerer-des-versions-315/", "locale": "fr", "readingTime": "1:38" }, { "content": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nAvant de voir ce qu’est Git et ce qu’il fait, je dois t’expliquer ce qu’il ne fait pas, et par conséquent ce que tu ne verras pas dans ce cours. \n\nMais ne sois pas déçu à l’avance, on a d’autres cours qui traitent peut être déjà des sujets qui t’intéressent, et si ce n’est pas le cas, peut être que nous les créerons un jour prochain, et si t’es sympa, bien évidemment…\n\nGit n'est pas un « serveur »\n\nPour commencer, Git n’est pas un serveur, il n’embarque pas de serveur. Il nous permet éventuellement de créer ce qu’on appelle un “bare repository” ou « dépôt nu » et qui nous permet de définir une destination pour notre partage et qui ne posséderai pas de copie de travail. C’est donc fait pour qu’on ne puisse pas travailler dedans. \n\nJe ne te parlerai donc pas de GitHub, GitLab, BitBucket, ni d’aucune autre solution d’hébergement Git, car c’est au-delà des concepts et il y a tellement à dire que ça mérite un cours dédié.\n\nGit n’impose aucune règle\n\nTu dois aussi comprendre un point crucial de Git : il n’impose aucune règle. Ce que je veux dire par là et que tu dois bien retenir, c’est que Git te permet de faire tout ce que tu veux de tes versions. Il a été conçu pour ne créer aucune barrière. Ça veut dire que si tu veux, tu peux changer tout ton historique de commits, faire disparaître certaines parties, en ajouter ou en déplacer d’autres. \n\nJe te rassure quand même, il a en plus des mécanismes que te permettent de revenir en arrière en cas d’erreur ou face à une mauvaise intention. Ça veut dire que le mec rageux qui a voulu supprimer l’historique du projet en quittant la boite a fait un tir à blanc, car le projet pourra être reconstruit depuis les versions des différents postes utilisateurs. \n\nSache aussi que Git n’impose aucune organisation du travail formelle, et c’est tant mieux, ça évite de se limiter à un type de cycle de de vie de projet. Donc si tu es « hype » et que bosses avec une méthodologie type Agile, voire Scrum, il n’est pas dit que tu appliques ta méthodologie à la lettre, et il n’est pas non plus dit que tu en changes plus tard, ce qui fait que tu sera plutôt content de ne pas être contraint et de pouvoir changer ton organisation dans ta gestion de versions.\n\nAlors, quand je dis qu’il n’y a aucune contrainte, il faut relativiser, hein ! Parce que Git a ses commandes, sa syntaxe, son comportement nominal. Mais on peut quand même tuner tout ça depuis la configuration pour plein de petites choses, donc là aussi, Git est permissif.\n\nGit ne valide pas tes contenus\n\nPour finir avec ce que Git ne fait pas pour toi, il ne fait pas de validation des contenus que tu versionnes à commencer par les messages de tes commits. Ça signifie que tu peux y mettre le texte que tu veux, comme tu veux. Tu peux même y mettre des emojis si ça te branche.\n\nEn réalité, tu peux mettre en place des systèmes de validation, que ce soit une assistance au moment de la saisie, comme Git commitizen, ou après la saisie pour vérifier le message avec des outils comme commitlint. En gros, tu peux déclencher ce que tu veux autour de la création de ton commit avec ce qu’on appelle les hooks Git.\n\nTu n’as également aucune contrainte sur les types de fichiers que tu versionnes. Tu peux aussi bien mettre du texte, que des images, des vidéos, des binaires… Par contre tu dois savoir que seuls les fichiers non binaires seront optimisés par Git. \n\nLà aussi c’est à moitié vrai, Git n’impose aucune contrainte, mais tu peux en créer toi même, que ce soit à l’aide du fichier .gitignore ou encore une fois des hooks, pour prévenir de l’ajout de fichiers non désirés.\n\nEt pour finir, tout comme Git n’intègre pas de serveur à proprement parler, il n’intègre pas non plus de système d’intégration continue. Mais là encore, tu peux venir toi-même intégrer ça à l’aide des hooks.\n\nDonc si on résume tout ça, Git ne nous contraint à rien, mais il nous donne quand même la possibilité de venir définir nous-même nos contraintes au sein d’un projet. Comme quoi le truc a été bien pensé !", "description": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nAvant de voir …", "date": 1571927562, "image": "https://i.ytimg.com/vi/G6y_doAkGgA/maxresdefault.jpg", "_tags": ["git","video"], "title": "Ce que Git ne fait pas (2/15)", "url": "/fr/video/ce-que-git-ne-fait-pas-215/", "locale": "fr", "readingTime": "3:04" }, { "content": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nSalut à toi et bienvenue dans ce cours vidéo sur les concepts clés de Git !\n\nJ’imagine que tu es là parce que tu sais que pour bien comprendre Git, tu dois commencer par en comprendre les rouages, et tu fais bien !\n\nAlors, que vas-tu découvrir dans ce cours ?\n\nOn va voir pas mal de choses à vrai dire.\n\nPour commencer je vais te parler de ce que Git ne fait pas, pour que tu comprennes son rôle et ses limites.\n\nEnsuite on prendre un peu de recul sur la gestion de version pour réfléchir à ce qu’on attend, nous les utilisateurs et utilisatrices de Git.\n\nJe te montrerai aussi comment ont évolués les systèmes de gestions de versions avec le temps et en quoi Git se démarque des autres, donc ce qui fait sa force et pourquoi lui plutôt qu’un autre.\n\nAprès ça, je t'aiderai à parfaire ta culture personnelle en te racontant l’histoire de Git, mais pas trop non plus. Tu devrais par la même occasion apprendre une partie du vocabulaire utile qui t’aidera à mieux comprendre Git quand il te parle.\n\nEt d’ailleurs, pour comprendre Git, je t’expliquerai son architecture, les parties que tu utiliseras au quotidien, et la manière dont il construit ton historique de versions.\n\nOn finira en beauté avec un coup d’œil sous le capot et je te ferai une sorte d’abstraction technique avec des jolis schémas et une démo dans le terminal pour te montrer comment cet construction d’historique est gérée en interne.\n\nQuand tu auras compris tout ça, tu sauras que Git n’est pas mystique et que la magie que tu y voyais n’était en fait qu’une absence de compréhension des concepts de base.", "description": "Playlist « Les concepts clés de Git » : https://www.youtube.com/playlist?list=PLPoAfTkDs_JbMPY-BXzud0aMhKKhcstRc\n\nSalut à toi et…", "date": 1571927466, "image": "https://i.ytimg.com/vi/v2qenbXaarM/maxresdefault.jpg", "_tags": ["git","video"], "title": "Que contient ce cours ? (1/15)", "url": "/fr/video/que-contient-ce-cours-115/", "locale": "fr", "readingTime": "1:21" }, { "content": "Il existe bien des façons de transmettre la connaissance, notamment la connaissance technique : cours traditionnel, formation professionnelle, screencast, atelier, présentation en conférence… Quel format pour quel objectifs ? Christophe en compare rapidement les forces et faiblesses, parle de leurs pertinences et liste quelques meilleures pratiques à garder à l’esprit.\n\nIntervenant : Christophe Porteneuve : https://github.com/tdd\nPage du meetup : https://www.meetup.com/fr-FR/HumanTalks-Paris/events/264551188/\nRéalisation vidéo : www.vitaamedia.com", "description": "Il existe bien des façons de transmettre la connaissance, notamment la connaissance technique : cours traditionnel, formation pr…", "date": 1569579724, "image": "https://i.ytimg.com/vi/Gc06ZrTuH5w/maxresdefault.jpg", "_tags": ["humantalks","concept","format","transmission","youtube","youtuber","video","presentiel","conference","bloging","blog","medium","screncast","livestream","live streaming","meetup","webinar","talks","atelier","workshop","twitch","livre","book","support","email","forum","tweet","multi-modale"], "title": "Présentiel, vidéo, conférence, article… quel format pour transmettre ? par Christophe Porteneuve", "url": "/fr/video/presentiel-video-conference-article-quel-format-pour-transmettre-par-christophe-porteneuve/", "locale": "fr", "readingTime": "16:47" }, { "content": "Talk de Christophe Porteneuve :\n\n--\nLes callbacks, c'est bien, mais ça pose vite des soucis, car les anti-patterns sont nombreux et les usages avancés vite difficiles à maintenir.\n\nLes promesses corrigent pratiquement tous ces soucis (et ceux qu'elles ne corrigent pas, les Observables arrivent…), mais même si elles sont assez faciles à apprivoiser, le code obtenu reste, de toutes façons, moins immédiatement lisible et maintenable que du bon vieux code séquentiel et bloquant.\n\nLa syntaxe async / await—officielle depuis ES2017, native depuis v8 5.5 (donc Node 7.6, 21/02/2017), et transpilée par Babel depuis des lustres—nous permet d'avoir le beurre et l'argent du beurre : le code est asynchrone, composable, non bloquant… et parfaitement lisible. On récupère les primitives de base : conditions, boucles, try…catch… Mais attention, ça ne remplace pas les promesses : bien au contraire, c'est intimement basé dessus ! Et du coup, le danger serait de rechercher/remplacer du code bloquant bêtement, sans tirer parti des possibilités de parallélisation, etc.\n\nQui plus est, pas mal d'extensions d'usage sont possibles, au-delà des seules promesses « classiques ».\n\nDans cette présentation, Christophe essaiera en 20 minutes de faire le tour du sujet, de bien vous faire saisir l'essence et la puissance de ce nouveau mécanisme, de vous dire où tout ça va, et de vous donner envie, surtout, de l'utiliser partout !", "description": "Talk de Christophe Porteneuve :\n\n--\nLes callbacks, c'est bien, mais ça pose vite des soucis, car les anti-patterns sont nombreux…", "date": 1539869268, "image": "https://i.ytimg.com/vi/2P9fbuNEM5w/maxresdefault.jpg", "_tags": ["nodejs","evaneos","conférence","node","video"], "title": "Chapitre 04 / Conférence 08 @ Evaneos - Deep dive dans async/await", "url": "/fr/video/chapitre-04-conference-08-evaneos-deep-dive-dans-asyncawait/", "locale": "fr", "readingTime": "34:42" }, { "content": "CHRISTOPHE PORTENEUVE - FOUNDER & CTO @DELICIOUS INSIGHTS\n\nDepuis sa sortie en 2009, Node.js a émergé doucement… jusqu’à conquérir franchement le monde des gros sites « enterprise » à partir de 2014, au point qu’il est aujourd’hui devenu incontournable. Node.js, c’est pratiquement tout le Fortune 500, nombre des plus gros services en ligne, mais pas seulement : c’est aussi au cœur de la pratique web front, au cœur de la révolution des applications multi-plateformes : desktop, mobile, consoles, robotique, aérospatiale, IoT…\n\nNode.js est aussi l’écosystème et la communauté qui connaissent les plus fortes croissances annuelles, et ce depuis plusieurs années continues, avec des chiffres hallucinants.\n\nCette présentation vise à réveiller celles et ceux qui n’ont pas encore Node.js fermement au centre de leur radar technique, et à élargir la perception qu’en ont les autres, laquelle se limite souvent à « serveurs web + npm ».\n\nAlways bet on JS.\n\n—————————\nThe Web2day festival is 3 intensive and festive days dedicated to digital trends and innovations.\nIt’s a unique opportunity to meet with European startups, investors, media, influencers, big corporates in an exceptional setting and a relaxed atmosphere.\n \n\nEn savoir plus sur le Web2day et réservez vos places pour la prochaine édition : \nhttp://www.web2day.co\n\nLe Web2day est un événement organisé par La Cantine :\nhttp://www.atlantic2.org\n\nCrédit vidéo : Réalisation, Motion design & Scénographie : Mstream\nhttp://www.mstream.fr\nMusique Originale by Jasper Louise \nhttp://www.jasperlouise.com\nEnregistré à Stereolux\nhttp://www.stereolux.org", "description": "CHRISTOPHE PORTENEUVE - FOUNDER & CTO @DELICIOUS INSIGHTS\n\nDepuis sa sortie en 2009, Node.js a émergé doucement… jusqu’à conquér…", "date": 1498639765, "image": "https://i.ytimg.com/vi/IwpBluLjynI/maxresdefault.jpg", "_tags": ["node.js","node","partout","js","web2day","video"], "title": "Node.js partout - Cristophe Porteneuve - WEB2DAY 2017", "url": "/fr/video/js-nodejs-partout-cristophe-porteneuve-web2day-2017/", "locale": "fr", "readingTime": "30:44" }, { "content": "Filmed at http://2016.dotjs.io on December 5th in Paris. More talks on http://thedotpost.com\n\nBabel is amazing, and we all use it to get the latest language goodies now, but we tend to use an all-or-nothing, sledgehammer approach to it. In this talk Christophe shows how to tweak your Babel settings to tailor its level of code transformation to the native support your runtimes offer.", "description": "Filmed at http://2016.dotjs.io on December 5th in Paris. More talks on http://thedotpost.com\n\nBabel is amazing, and we all use i…", "date": 1484909332, "image": "https://i.ytimg.com/vi/fb_1cqg8TKc/hqdefault.jpg", "_tags": ["video"], "title": "dotJS 2016 - Christophe Porteneuve - Tuning Babel to your runtimes", "url": "/fr/video/dotjs-2016-christophe-porteneuve-tuning-babel-to-your-runtimes/", "locale": "fr", "readingTime": "17:51" }, { "content": "Enregistrement du Delicious Meetup #1 le 24/11/2016 chez Delicious Insights.\n\nLiens\n\n• Slides : http://www.slideshare.net/Alexandre-Strzelewicz/meetup-pm2-deliciousinsights\n• PM2 : http://pm2.keymetrics.io/\n• Keymetrics : https://keymetrics.io/\n• Delicious Meetups : https://www.meetup.com/fr-FR/delicious-meetups/\n• Delicious Insights : http://delicious-insights.com/\n• Formation Node.js : http://delicious-insights.com/fr/formations/node-js/\n\n© 2016 Delicious Insights & Keymetrics", "description": "Enregistrement du Delicious Meetup #1 le 24/11/2016 chez Delicious Insights.\n\nLiens\n\n• Slides : http://www.slideshare.net/Alexan…", "date": 1480489450, "image": "https://i.ytimg.com/vi/E_dDmyKB-ZY/maxresdefault.jpg", "_tags": ["video"], "title": "PM2 et Keymetrics dans l’univers Node", "url": "/fr/video/pm2-et-keymetrics-dans-lunivers-node/", "locale": "fr", "readingTime": "39:31" }, { "content": "ES6 / ES2015 n'est pas un truc \"pour plus tard\", c'est parfaitement utilisable dès maintenant, et même depuis début 2015, justement ! En natif ou via transpiling, dans les navigateurs ou dans Node, ça offre énormément de nouvelles possibilités géniales. Et même ES5 / ES2016 est largement exploitable aujourd'hui.\n\nAu programme :\n\nRappels sur ES3, ES5, ES6 et ES7\nPrises en charge native / Babel, outillage\nPetits conforts : affectation déstructurée, rest, spread, fonctions fléchées\nContrôle de portée : let et const\nSyntaxe de classes familière\nModules\nAsynchrone : promesses, générateurs, async/await\nProxies et métaprogrammation\nDécorateurs", "description": "ES6 / ES2015 n'est pas un truc \"pour plus tard\", c'est parfaitement utilisable dès maintenant, et même depuis début 2015, justem…", "date": 1462798704, "image": "https://i.ytimg.com/vi/KJzlllc7Jq8/maxresdefault.jpg", "_tags": ["devoxxfr16","video"], "title": "ES6+ maintenant ! (Christophe Porteneuve)", "url": "/fr/video/es6-maintenant-christophe-porteneuve/", "locale": "fr", "readingTime": "44:39" }, { "content": "Filmed at http://2015.dotjs.io on December 7th in Paris. More talks on http://thedotpost.com\n\nJavaScript is asynchronous by nature and that can lead to uneasy code patterns, but we’ve come a long way since Callback Hell. From Async.js to promises to generators to async/await, and a wink at Functional Reactive Programming (FRP), Christophe makes a strong case for clean, readable async JS code.", "description": "Filmed at http://2015.dotjs.io on December 7th in Paris. More talks on http://thedotpost.com\n\nJavaScript is asynchronous by natu…", "date": 1457972071, "image": "https://i.ytimg.com/vi/qNLCTBO3mec/maxresdefault.jpg", "_tags": ["video"], "title": "dotJS 2015 - Christophe Porteneuve - Modern Asynchronous JavaScript", "url": "/fr/video/dotjs-2015-christophe-porteneuve-modern-asynchronous-javascript/", "locale": "fr", "readingTime": "24:53" }, { "content": "Un bon formateur qui vient nous expliquer comment utiliser Git au mieux, des apprentis motivés et une télécommande capricieuse, voilà ce que ça donne !\n\nLes slides présentées sont disponibles ici : http://delicious-insights.com/git-github-collab-bp.pdf\n\nBon visionnage.\n\nPrésentation Git par Christophe Porteneuve au meetup GitHub \n@ Société Générale le 12 novembre 2015.", "description": "Un bon formateur qui vient nous expliquer comment utiliser Git au mieux, des apprentis motivés et une télécommande capricieuse, …", "date": 1449051399, "image": "https://i.ytimg.com/vi/HHE19hKsrW4/maxresdefault.jpg", "_tags": ["git (software)","github","meetup","christophe","présentation","video"], "title": "Présentation Git par Christophe Porteneuve au meetup GitHub", "url": "/fr/video/presentation-git-par-christophe-porteneuve-au-meetup-github/", "locale": "fr", "readingTime": "21:010" }, { "content": "Vidéo tournée lors de la conférence #BlendWebMix 2015 !\n\nDeep-dive dans ES6\nConférencier : Christophe Porteneuve\n\n- Rappels sur ES3, ES5, ES6 et ES7\n- Petits conforts : affectation déstructurée, rest, spread, fonctions fléchées\n- Contrôle de portée : let et const \n- Syntaxe de classes familière\n- Modules \n- Promesses \n- Proxies et métaprogrammation", "description": "Vidéo tournée lors de la conférence #BlendWebMix 2015 !\n\nDeep-dive dans ES6\nConférencier : Christophe Porteneuve\n\n- Rappels sur …", "date": 1448446238, "image": "https://i.ytimg.com/vi/uL9uAAzkFmI/maxresdefault.jpg", "_tags": ["es6","blendwebmix","conférence web","tech","video"], "title": "Deep-dive dans ES6 - Christophe Porteneuve", "url": "/fr/video/deep-dive-dans-es6-christophe-porteneuve/", "locale": "fr", "readingTime": "52:20" }, { "content": "À partir de rien, comment obtenir une boucle de feedback ultra-rapide (moins d'une demi-seconde) entre l'édition de ses fichiers sources (dans DevTools ou ailleurs) et leur exploitation live dans la page web en cours, même au travers d'une chaîne de build riche.", "description": "À partir de rien, comment obtenir une boucle de feedback ultra-rapide (moins d'une demi-seconde) entre l'édition de ses fichiers…", "date": 1421188902, "image": "https://i.ytimg.com/vi/2Dl9ES6IC3c/maxresdefault.jpg", "_tags": ["front end development","google chrome (web browser)","brunch.io","browsersync","feedback loop","chrome developer tools","video"], "title": "Front End Dev Avengers", "url": "/fr/video/front-end-dev-avengers/", "locale": "fr", "readingTime": "33:25" }, { "content": "26 dec 2014 - 18e meetup France HTML5\nhttp://www.meetup.com/France-HTML5-User-Group/\n\nVous pensiez connaître GIT ? Vous allez être surpris. Christophe est certainement l'un des français les plus calé sur le sujet. Il vous partagera toute une série d’astuces visant à rendre votre utilisation de GIT encore plus agréable et efficace au quotidien.", "description": "26 dec 2014 - 18e meetup France HTML5\nhttp://www.meetup.com/France-HTML5-User-Group/\n\nVous pensiez connaître GIT ? Vous allez êt…", "date": 1417534583, "image": "https://i.ytimg.com/vi/OMg7LfSuSUU/maxresdefault.jpg", "_tags": ["git (software)","github (website)","francehtml5","video"], "title": "[France HTML5] - GIT pro tips : Christophe Porteneuve", "url": "/fr/video/france-html5-git-pro-tips-christophe-porteneuve/", "locale": "fr", "readingTime": "49:46" }, { "content": "Animé par Christophe Porteneuve", "description": "Animé par Christophe Porteneuve…", "date": 1414680383, "image": "https://i.ytimg.com/vi/ypR-rEBCoag/maxresdefault.jpg", "_tags": ["video"], "title": "BlendWebMix - Git ProTips : Faire plus vite et mieux grâce à cette séléction d'astuces", "url": "/fr/video/blendwebmix-git-protips-faire-plus-vite-et-mieux-grace-a-cette-selection-dastuces/", "locale": "fr", "readingTime": "59:07" }, { "content": "En décembre 2006, à l'occasion de la sortie récente du futur best-seller \"Bien développer pour le Web 2.0\" chez Eyrolles, Rebie.org & Bearstech interviewent Christophe sur les différents sujets du livre.\n\nSi on fait abstraction des 100 000 \"tu vois\", pas mal de réflexions restent éminemment d'actualité en 2013, et quelques visions se sont pas mal réalisées... :-)", "description": "En décembre 2006, à l'occasion de la sortie récente du futur best-seller \"Bien développer pour le Web 2.0\" chez Eyrolles, Rebie.…", "date": 1373933594, "image": "https://i.ytimg.com/vi/j-Kbo8GqSLg/hqdefault.jpg", "_tags": ["interview","interviews","web 2.0 (industry)","book","video"], "title": "Christophe Porteneuve / Bien Développer pour le Web 2.0 • Interview", "url": "/fr/video/christophe-porteneuve-bien-developper-pour-le-web-20-interview/", "locale": "fr", "readingTime": "15:27" }]