Un outil pour automatiser les screenshots de sites web
Un nom de domaine, une liste de routes et Peek se charge du reste !
L'une des derniÚres étapes lorsque je publie un site ou une application sur le web, c'est d'ajouter les balises OpenGraph afin d'avoir de jolis partages sur les réseaux sociaux pour mes clients et maximiser le succÚs des liens vers le site.
Si tu ne connais pas bien OpenGraph, j'ai Ă©crit un article dessus que je t'invite Ă lire !
Il est indispensable d'avoir un visuel attaché au lien partagé, sinon le rendu des publications est vraiment terne et n'incite pas à cliquer dessus. Parfois des visuels sont préparés exprÚs pour le site avec l'équipe design et social média, mais pour les projets les plus modestes, un simple screenshot de chaque page suffit.
Le problĂšme est que l'opĂ©ration peut-ĂȘtre chronophage quand le site en question est composĂ© de dizaines de pages et qu'il faut prendre toutes les captures d'Ă©cran, de les ajouter dans les ressources du site puis de les assigner Ă chaque page.
Alors j'ai créé un petit outil pour me faciliter la tùche et automatiser une partie du processus, ça s'appelle Peek !
C'est quoi Peek ?
Peek est un petit utilitaire Ă©crit sous NodeJS et utilisant la puissante de Puppeteer pour automatiser la prise de screenshot d'un site web (ou d'une application) Ă partir de quelques informations de base :
- Un nom de domaine (mĂȘme localhost)
- Une liste de routes (comme /contact, /team, etc...)
- Une résolution (hauteur et largeur)
Si vous ne savez pas ce qu'est Puppeteer, voilĂ un article sur le sujet.
Une fois toutes les informations fournies, Peek va charger chaque page indiquée,  va prendre un screenshot dans la résolution désirée et l'enregistrer dans son dossier "screenshots", simple, efficace.
Actuellement le projet fonctionne sous la forme d'un CLI assez facile d'accÚs, mais je réfléchi à ajouter une interface plus user-friendly pour les personnes travaillant dans le marketing et les médias sociaux avec Electron par exemple !
Pour utiliser Peek, rien de plus simple, rendez-vous directement sur le projet Github et suivez les instructions !
NicolasBrondin
Si vous avez des pistes d'amélioration, ou envie de contribuer, n'hésitez pas à rajouter des issues sur le dépÎt du projet et à faire des pull-requests que j'examinerai dÚs que j'ai un moment.
J'espÚre que cet article vous aura été utile, et à bientÎt sur le blog !
Les articles les plus populaires du blog
Envie de continuer à lire des articles autour du développement web (entre autres) ? Voici la sélection des articles de mon blog les plus lus par la communauté !
Voir la sĂ©lection đRecevez les articles de la semaine par e-mail pour ne rien manquer !
S'abonner Ă la newsletter đ§
Ă propos de l'auteur
Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.
Aujourd'hui je suis aussi formateur/coach pour dĂ©veloppeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et ĂȘtre tenu au courant de mes projets !