
Utiliser le Github README comme Portfolio
Durée: 28m19s
Date de sortie: 19/09/2020
Dans cet épisode, nous allons parler d'une fonctionnalité sur github.com qui permet d'améliorer sa page d'accueil GitHub. Retrouvez toutes les notes et les liens de l'épisode sur cette page : https://double-slash.dev/podcasts/github-readme/
Bonjour à tous, on se retrouve pour un nouvel épisode de Double Slash, donc comme d'habitude
avec Alex, salut Alex ! Salut ! Et aujourd'hui on va parler de GitHub,
et précisément je ne sais pas exactement comment s'appelle ce GitHub de Readme, comment
tu peux comment t'appelle ça d'ailleurs ? Je ne sais pas, en fait le concept en fait c'est
si on crée un repo du même nom que le notre profil GitHub, cette page va être affichée directement
sur la page de notre profil, en fait c'est comme si on crée une espèce d'interface et ça sera,
on peut le mettre en avant, de la même manière que tous les ripos qu'on peut pin sur notre page
de profil, et bah là s'il existe un repo du même nom que notre profil avec un fichier
Readme.md, le contenu de cette page sera affiché et sera mis en avant sur notre profil, donc ça
on l'utilise pas mal en fait pour mettre en avant et pour se présenter, après c'est un markdown
on va dire classique, mais ça a bien explosé, c'est une fonctionnalité qui a été mise en place
c'est une fonctionnalité qui a été en mise en place il y a peut-être un mois ou deux,
peut-être moi même, mais il y a pas mal de trucs qui se sont mis tout autour de ça et c'est pas
mal intéressant parce que je pense que en tant que dev ça peut être intéressant, si on n'a pas de
site internet d'utiliser justement notre profil GitHub pour se mettre en avant et en savoir un
petit peu plus quoi et donc ouais c'est plutôt sympa, on pourrait dire un peu le site internet du
pauvre, mais non mais c'est vrai, enfin je pense quand on est dev front ok, limite en faire un site
c'est pas si gênant, après quelqu'un qui fait que du backend, qui est dans une logique hyper
hyper spécifique sur des techno qui sont pas toujours orientés web, pour le coup du markdown
c'est pas très compliqué et il peut avoir quelque chose pour se présenter un petit peu plus et
décrire ce qu'il fait quoi. En fait comme tu le dis c'est hyper important d'avoir un compte
GitHub, enfin moi j'avais déjà vu souvent t'as des annonces où ils te demandent ton repo
GitHub pour voir ton code etc, que tu vas partager, enfin je pense que pour un développeur
c'est quand même important d'avoir du code visible, de contribuer même à l'open source, ça donne
un versage de spray. Et puis là c'est une nouvelle fonctionnalité qui permet de rajouter
voilà de faire une sorte de home page en fait avec tout plein d'infos, j'aime bien, j'aime beaucoup
ce que t'as fait en fait. Tu vas nous expliquer comment t'as fait ça. Pour résumer vite fait,
en fait le principe c'est par exemple pas c'est github.com slash xlane x6. Donc pour rajouter
ce rythmie à ton page d'accueil de GitHub, tu as créé un repo xlane et dedans tu mets
un rythmie.md et exactement, il va s'afficher donc sur cette page d'accueil de GitHub de ton profil.
Et en fait si on remplit tous ces critères là, cette page sera mis en avant sur la page de mon
GitHub donc sur mon GitHub.com slash xlanex6, on va directement arriver sur l'interprétation du
markdown de ce fichier MD. Et après en fait tu peux faire ce que tu veux donc tu me mets du texte,
après moi ce que je me suis dit, on va jouer en fait avec des images, des icônes et de la génération
automatique. Donc le premier truc que j'ai fait, je me dis ok, c'est comme si je faisais une section
un petit peu hiro sur un gros header quoi, où là j'ai repris le header de mon site internet
perso que j'ai venu modifier pour avoir la bonne taille et je me suis dit, moi ce qui m'intéresse
c'est de mettre une sorte de baseline mais surtout de mettre des tags qui correspondent
au langage sur lesquels je suis plutôt à l'aise et sur lesquels je vais échanger. Donc bien sûr
j'ai mis du vue, du next, du GraphQL, du server l'aise, de GameStack et deux trois mots qui
résonnent pour moi mais de manière image. Donc tu as mis un lien sur ton image en fait avec un...
Exactement. Avec des tags pour nos guênes. Absolument. Alors l'image, je l'ai créé en lien comme ça
quand tu cliques sur l'image, t'es automatiquement renvoyé sur mon site internet et oui j'ai mis
un Google Analytics avec du petit tag pour sourcer pour voir d'où est ce que les gens viennent.
Et donc ça c'est plutôt sympa et la limite c'est vraiment, il faut être créatif quoi. Donc c'est
plutôt sympa. Après j'ai trouvé des petits icônes qui font bien que j'ai chopé sur simple
icons.org. Et avec les icônes avec VS Code, tu peux récupérer ces icônes là et ce qui est bien
sur justement le site simpleicons.org c'est que tu as le SVG de la marque ou de la technique
que tu utilises mais tu as aussi le code couleur. Donc en fait pour Gatsby ça va être le mauve de
Gatsby. Pour vue ça va être le vert de vue et ainsi de suite. Donc ça c'est plutôt sympa parce que
ça te donne la vraie couleur de la technique que tu veux utiliser. Donc facile. Après
un interprétation en markdown. Et derrière je suis venu aussi mettre des petits badges. Alors ça
c'est des badges qu'on voit partout. Souvent on utilise version, version de NPM ou code coverage
ou est-ce qu'ils passent tous les tests, est-ce que la CIA est bonne, combien j'ai de guides,
de stars ou tout ça. Et donc en fait sur toute la génération de ces badges qui sont des générations
dynamiques en fait, il y a un site qui s'appelle Shield avec un S.io et pour le coup tu vas choisir
différentes sections. Donc tu as un truc social, un truc NPM, un truc GitHub. Enfin tu vas vraiment
avoir énormément de possibilités et tu viens le custom comme tu veux. Donc tu peux avoir
différents styles, différentes formes et ce qui est intéressant c'est que ce contenu là il est
généré de manière automatique et dynamique. Donc en fait c'est un peu le truc à l'ancienne avec les
compteurs de visite à l'époque où on voyait le truc en gros. Voilà c'est exactement le même
délire. Donc on va générer ces badges avec des infos totalement dynamiques. Donc c'est plutôt
sympa, ça met un peu un truc vivant et puis ça fait un peu Dave Corporate. Donc c'est plutôt sympa.
Et le podcast c'est pas automatique, c'est manuel ? Alors non, c'est automatique aussi.
D'accord. Et en fait c'est généré de manière automatique. Et celle là où ça commence à être
intéressant c'est que comme je disais tout à l'heure il y a tout un écosystème qui s'est mis un
petit peu en place avec des nouvelles librairies qui font justement pour générer ton rythme
automatique basé sur les infos que tu veux. Et là en fait en commentaire moi j'ai mis un truc
YouTube Start et YouTube End et après je suis venu utiliser une librairie qui va aller récupérer
des infos depuis Influ et XML et qui va les injecter dans mon rythme. Par contre pour faire
ça il faut exécuter du code. Et c'est là où la nouvelle fonctionnalité, elle est plus
tellement nouvelle mais c'est GitHub Action qui a été mis en place. Alors pour ceux qui connaissent
pas GitHub Action tout simplement ça va être sur demande ou sur un événement spécifique. On va
exécuter du code. Par exemple un exemple typique c'est sur l'ouverture d'une PR je vais exécuter un
bout de code. Ce bout de code va lancer l'intégralité de mes tests. Voilà ça c'est on va dire le flow
classique de GitHub Action donc ça vient directement en parallèle avec tout ce qui est
exactement. C'est beaucoup utilisé pour CI CD mais là où c'est intéressant c'est que justement on
vient acquier un petit peu le système en mode je viens exécuter du code et je vais faire autre
chose pour justement générer de la matière à la demande. Donc il y a une petite fonction qui a
été mis à la disposition qui est open source et qui va venir récupérer les infos donc on
met un espèce de cron. D'ailleurs je sais pas si on dit cron ou cron. Bonne question. Moi je dis cron
général. Du coup on peut définir un cron toutes les heures tous les jours. Et ça vient
lancer ce petit bout de code qu'on est venu implémenter dans notre repo. On crée un repo
avec point GitHub un autre dossier à l'intérieur. Non en fait excuse-moi c'est dans le repo que
je veux que dans le repo qui prend le même nom que mon profil je vais mettre un dossier point
GitHub. A l'intérieur du lequel je vais mettre un dossier workflow et à l'intérieur je vais mettre
un fichier Gamel qui porte le nom de ma fonction que je vais vouloir utiliser et après c'est un
Gamel exécutable où j'ai un met tous mes paramètres et ça va lancer cette fonction et cette
fonction elle va lire le fichier xml ça va récupérer les infos et ça va injecter dans mes
deux balises commentaires ça va injecter automatiquement ma liste donc par défaut il y en a
cinq on peut en mettre plus on peut en mettre point. Ouais je vois que tu fais ça ton plaisir. Tu
injectes ça et qui commence à monter l'injection sèche je comprends pas en fait. En fait si tu
regardes en haut il y a le label donc en fait ça va chercher ce label là dans mon fichier
rythmie et entre le start et le end il vient injecter ça. Tu vois et donc en fait ça vient
injecter le rendu du fichier xml les cinq machins et ça vient créer des des boulettes point à une
liste classique quoi mais ça vient en fait ça vient chercher dans ton fichier le youtube start
youtube end et ça vient injecter la matière au milieu donc ça c'est assez puissant parce que
tu peux utiliser donc là pour le coup on a mis, moi j'ai mis les épisodes sur youtube parce que
j'ai pas réussi à le mettre encore directement sur à utiliser le xml du site internet pour pouvoir
renvoyer mais donc on a un petit peu de travail à faire sur le site pour rendre ce fichier xml
exploitable et du coup demain on le fera donc pour l'instant en attendant j'ai mis le lien
en fait de la chaîne youtube qui reprend en fait les épisodes du podcast directement.
Mais tu as trouvé ça tout seul ? Non non non c'est pas moi qui ai trouvé ça tout seul c'est non
non pas du tout c'est en explorant sur le net tu tombes là dessus tu lis la doc et pareil
derrière il ya un petit encart où il ya une sorte de statistique en fait le truc s'appelle
github rhythmie stats pour le coup il a un nom hyper difficile que je ne prononcerai pas à
nous ragsara enfin je pense que c'est un indien je pense et là où c'est super intéressant c'est
qui venait analyser ton profil et faisait des statistiques sur combien tu as fait de
comites combien tu as fait sur combien de ripot et intervenu combien de PR sur combien de projets
tu as rétacté à collaborer et ça et en fait c'était une fonction qu'il avait mis sur verselle
et en fait il s'est fait mais déglinguer la tête parce qu'il utilisait une même fonction qu'il
a mis à disposition du open source donc les mecs faisaient copier coller et il s'est fait déglinguer
la tête et du coup il a dit bah en fait c'est plus possible donc là où il a été malin il a dit
ok maintenant en fait je vais vous expliquer comment bah vous pouvez déployer vous même votre propre
votre propre fonction pour justement la mettre sur vous sur votre rythmie et donc c'est exactement
ce que j'ai fait où j'ai pris la fonction de ce galage et forké le ripot et j'ai mis mes
identifiants pour verselle et j'ai déployé ça sur verselle et j'ai et derrière bah je mets ça
sur mon sur mon rythmie et ça vient me sortir toutes les infos donc c'est plutôt c'est plutôt pas
mal et en fait bah on est venu automatiser un petit peu le truc ouais de manière de manière
automatique quoi donc ça tourne tout seul et de tête le dernier truc que j'ai mis ce que j'ai pas
je l'ai pas devant les yeux d'ailleurs c'est le premier c'est la première chose que j'ai mis c'est
le compteur de visite à l'ancienne pour savoir combien de personnes ont vu le profil c'est vraiment
le compteur le compteur de ah ouais c'est vraiment c'est vraiment le truc à l'ancienne mais la même
c'est ce qui est intéressant c'est que ça utilise un autre système qui s'appelle pipe dream.net et là
de la même manière ça vient automatiser du code donc il y a il y a il y a différentes façons de
faire il y a en fait sur le sur le même fichier en fait il y a une automatisation fait par git abaction
une automatisation via une fonction verselle et une automatisation via fait via pipe dream.net
et bah le truc est assez intéressant juste à jouer avec pour comprendre comment ça marche et
puis ouais je trouve ça sympa en fait c'est pas mal c'est pas mal moi je trouve excellent ça
s'il ya un bon rendu en plus le fait que ça soit automatisé c'est ça plus rien à faire en fait
ouais moi je suis fini en comme tous les dév en fait en attendant ça va automatiser tous les
maximums de choses en fait ouais ouais clairement après je pense que ce qui manque là dessus et
pour revenir sur on va dire un petit peu plus global sur sur le portofoglio montrer ce qu'on fait
c'est c'est bien mais aussi comprendre le contexte et moi en tout cas sur mon site internet je suis
en train de travailler là dessus ça arrivera bientôt mais c'est de expliquer le projet mais
surtout les contraintes du projet le contexte qu'est ce qu'il fallait faire quel choix j'ai fait
pourquoi j'ai utilisé tel techno comment je l'ai fait et je trouve ça amène vachement plus de
valeur que ok j'ai fait ça ok bon c'est un rendu c'est déjà bien de pouvoir montrer le rendu parce
que pour avoir travaillé sous contrat de clause de confidentialité tout ça bah parfois tu peux
pas montrer donc c'est un petit peu plus compliqué de devenir montrer ton travail quand
t'as signé un truc comme ça néanmoins ce qui est un tu peux quand même le faire à travers en
expliquant le contexte les contraintes et et je pense ça amène plus de valeur pour soit le client
potentiel ou soit le recruteur ou oui ou ton futur manager qui qui cherche à t'embaucher de comprendre
en fait ton raisonnement comprendre comment t'as vu les choses et quel problème t'as eu et comment
t'as fait pour trouver les solutions je trouve que ça amène plus de matière que le simple rendu
quoi j'ai fait ça bim mais ce qui est ce qui est déjà bien on est d'accord je pense qu'il faudrait
multiplier aussi les codes peines ou les codes sandbox ou les choses comme ça où on peut partager
du code et c'est intéressant de partager aussi ce genre d'infos pour pour voir après ça dépend
des clients aussi ça dépend sur quelle fin ce qu'elle cible tu as souvent si tu fais vraiment que du
site site site les gens ils vont regarder vraiment que le rendu du site en fait principalement
oui c'est vrai après une boutique derrière après ça c'est vrai que si tu vas juste sur des
des entreprises qui sont plus techniques un peu plus des recrutements des recruteurs comme ça
ils vont regarder un peu plus ce que tu utilises comme outil ou après tu parles les devs aussi
qui vont s'intégrer au recrutement qui vont regarder un peu ton github ça va ça que ça dépend
vraiment les gratés quoi ça dépend pas mal j'ai je crois que j'avais entendu parler d'une boîte
je crois en espagne startup qui avait créé une intelligence artificielle qui allait voir tous les
github en fait et qui crolait ton github qui crolait à max de github pour retrouver des voilà des
bons codeurs j'ai pas encore mais après ça se tient totalement quoi après je pense enfin je
sais pas toi mais je pense qu'on a on a peu près le même type de profil sur l'indine où on voit
beaucoup de développeurs de jeunes développeurs qui sortent de formation ou qui sont en recherche
d'alternance et il nous pousse le cv copier-collé sur l'indine c'est bien c'est bien mais je trouve
c'est un peu old school et je pense que le fait de pousser en avance son profil github avec ou un site
internet où on voit un peu plus et on voit du concret quoi on voit quelque chose qui a été
produit et si en plus il y a une espèce de contexte où on nous explique un petit peu l'histoire
du projet tout ça je pense que ça amène une grosse grosse valeur pour le recruteur et enfin ça
m'a une grosse valeur pour le candidat justement parce qu'il se démarque parce que ouais tout
monde je suis dev je charge du taf suite à ma formation tout ça bah applique applique ce que
t'as appris dans la formation et montre le quoi et et je pense que ça c'est pas assez encore
ancré et je pense qu'il faut quand t'es dev tu es obligé de sortir de sortir de chiper du projet
quoi et en prode oui mais ça marche sur ma machine ouais mais c'est cool mais la vraie vie c'est pas
pas mal à l'heure où tu es obligé de passer par par la mise en prod et parce que ça fait partie du
cycle de vie d'un un projet quoi c'est je le développe et je le publie et je pense surtout
aux jeunes qui sortent de formation il y a des contraintes qui sont liées aussi à la mise en
production et je vais pas dire que c'est un job à part mais quand on fait des croissants
applications salelés vraiment après quand on fait des petits sites c'est plus facile merci
mais merci les storm kit les verselles les les netlify qui facilite la mise en prod de ma boule
quoi mais il faut pousser quoi il faut pousser beaucoup il ya plus en plus de juniors qui sont
enfin tu vas sur l'indine vraiment beaucoup de reconversion beaucoup de juniors et c'est bien
ouais il faut se démarquer il faut enfin c'est un message pour ces jeunes qui sortent de formation
c'est jeune c'est moins jeune parce qu'il ya des gens plus âgés qui changent complètement de voix
et ouais faut se démarquer faut faire des projets pourquoi pas proposer un commerce local etc de
faire le site pour quelqu'un qui te pas forcément gratuit mais tu arrives des risoires pour travailler
sur des vrais projets et pour avoir des choses qui sont voilà qui sont en prod et qui que tu peux
montrer exactement après c'est vrai moi je ne reproche pas mal je trouve que après je dirais
si t'es peut-être pareil quand j'étais jeune jeune développeur entre guillemets je trouve qu'ils
sont un peu trop techno orienté techno en fait il parle beaucoup techno machin tout ça et que
ma prose vente c'est pas forcément bien ce qu'il faut voir c'est ce qu'on est capable de faire pas
forcément les outils qu'on utilise les gardes de clôté et tout ça les clients et sans foot en
fait mais complet complet et puis le danger de ça c'est d'être justement hype techno
driving quoi c'est ok bon bah vas-y il ya un nouveau framework bim je me mets là dessus je me mets
là dessus je me mets là dessus et surtout sur la quand on est quand on est jeune je pense qu'il
faut plutôt se focaliser sur un framework prendre le temps de plonger vraiment dedans de
le poncer vraiment et après en fait on revient sur ce qu'on avait déjà dit sur les formations
sur les frais d'invento quoi et je pense c'est super c'est vraiment c'est vraiment important mais
surtout de montrer quoi montrer ce qu'on code montrer ce qu'on fait le publier le voir et en ça
où je trouve que le projet la fonctionnalité la feature de github où on peut mettre en avant
sur son profit de github à avoir un rendu automatique même si on pouvait le faire à l'époque
aussi avec github page c'était assez facile on poussait on poussait sur une branche spécifique et
ça venait nous directement nous monter sur github github.io tout donc c'était plutôt c'est
plutôt pas mal là ils ont encore facilité le truc c'est encore plus facile et c'est que du
markdown quoi donc un dev même même enfin qui connaît pas qui connaît pas le markdown en 10
minutes il a compris quoi enfin c'est vraiment en fantaing c'est ces vidéos quoi donc et il y a un
rendu automatique on n'a même pas besoin de le mettre sur sur la machine on peut le faire directement
sur github via éditer éditer le fichier abhim donc c'est assez facile et ça nous permet de
déjà de se différencier sur le profil github et puis de mettre en avant des choses quoi donc
c'est plutôt intéressant ça c'est le message aussi c'est avoir un peu faut soigner son profil
github c'est super important pour le recrutement en charge du travail ou même si on est indépendant
etc c'est hyper important et de participer aussi à des projets open source d'essayer de participer
voilà pour être actif sur github et je pense c'est pas mal aussi pour voir qu'on est actif
pour un recruteur c'est ça met en confiance c'est en tout cas c'est un plus c'est clair c'est un
plus carrément indéniable indéniablement mais je pense qu'il faut pousser il faut regarder aussi
tout ce qui est côté automatisation sur une sur github action moi j'ai juste effleuré le sujet
avec cette petite automatisation je pense que je vais creuser un peu plus parce qu'il y a vraiment
des trucs pas mal à faire aller creuser bien plus enfin dans le même délire un peu dans même
même chose que beaucoup d'écosystèmes ils ont créé un marketplace où il y a des bouts de snippet
dans tous les sens qui sont prêts à être implémentés direct ou à out of the box et ok je lance
je lance mes tests je je viens forquer un autre projet je mets à jour enfin il y a plein plein
plein plein de choses qui se mettent et et sur l'automatisation je crois qu'il y a on pourrait
faire un sujet entier là dessus parce que c'est c'est vraiment super super intéressant quoi et
donc il faut utiliser tout ça il faut utiliser faut faire quoi ok mais intéressant tout ça moi
c'est un peu négliger mon rythmie sur mon profil donc les fois je me mets aussi mon patrick
maintenant tu sais ce que t'as à faire je vais copier tu veux en fait tu fais un copier coller
modifié et puis et puis feu bien mais à l'imit c'est ce qui marche aussi tu regardes tu regardes
ce que les autres font et tu changes tu modifies ton truc et puis voilà ça marche et au moins
tu as un truc tu as un truc qui est plutôt pas mal donc yes merci patrick qu'est ce qu'il faut faire
pour si on aime bien écouter double slash à ton avis mais moi je pense que le meilleur truc c'est
de s'abonner c'est de dire si on utilise sur itunes beam tu on clique s'abonner ou follow
ou si on est sur spotify bah pareil on clique sur abonner et si vraiment vous avez écouté
enfin moi je pense que la personne qui a écouté l'épisode jusqu'au bout le mec il est chaud
quoi et donc on pourrait peut-être lui demander de laisser un commentaire ou au moins de mettre
un petit petit étoile un petit truc ça pourrait nous aider à remonter un peu dans l'algorithme
qui est encore un peu poussif et un peu mystique pour nous parce qu'en tout cas si vous pouvez aider
le show ça en tout cas l'épisode le podcast mettez un commentaire un petit pouce
ça nous encourage et carrément ok carrément on se retrouve pour un prochain épisode alors
merci à vous ciao ciao merci ciao pas trouvé double slash sur le plateforme de podcast préféré
et sur le site internet du podcast 3w pour un flash tiré podcast sur le site vous allez retrouver
tous les viendres épisodes des références évoquées durant l'émission
Episode suivant:
Les infos glanées
DoubleSlashPodcast
Double Slash, un podcast sur le développement web. Retrouvez-nous régulièrement pour parler de sujets variés tels que la JAMStack, l’accessibilité, l’écoconception, React.js, Vue.js, Next.js, Nuxt.js, le CSS et des retours d’expériences sur des implémentations.
Tags
Card title
[{'term': 'Technology', 'label': None, 'scheme': None}, {'term': 'Technology', 'label': None, 'scheme': 'http://www.itunes.com/'}]
Go somewhere
GraphQL, Hype ou Révolution