Comment nous générons des captures d'écran de code pour les réseaux sociaux
Nous avions l'habitude de prendre des captures d'écran de code manuellement.
Nous ouvrions l'éditeur, recadrions la fenêtre et glissions le fichier dans une publication. Cela posait trois problèmes :
- Les thèmes changeaient d'une publication à l'autre.
- Les largeurs d'image étaient incohérentes.
- Les captures d'écran paraissaient floues sur les écrans mobiles.
Nous avons arrêté de le faire manuellement. Désormais, nous utilisons deux méthodes différentes selon nos besoins.
Pour les publications ponctuelles Nous utilisons un outil de navigateur. Vous collez votre code, choisissez un langage et téléchargez un PNG propre. C'est rapide pour un tweet unique ou une diapositive.
Pour les publications automatisées Nous utilisons une API. C'est utile lorsque vous devez générer des images au moment de la publication ou au sein d'un pipeline de build. Vous envoyez le code via une requête POST et recevez une URL en retour.
Pourquoi utiliser une API ? Un humain ne peut pas cliquer sur un bouton dans un pipeline de déploiement. Une API permet à votre système de créer des images parfaites à chaque fois, sans travail manuel.
Nos conseils pour de meilleures images de code sur les réseaux sociaux :
- Restez concis. Ne dépassez pas vingt lignes. Les extraits longs deviennent trop petits pour être lus sur mobile.
- Utilisez un contraste élevé. Les thèmes comme Dracula ou One Dark restent nets après la compression de vos images par les plateformes de réseaux sociaux. Les thèmes à faible contraste paraissent ternes.
- Maintenez la résolution. Une haute résolution garantit que votre code reste net sur les écrans Retina.
- Mettez vos résultats en cache. Stockez l'URL de l'image pour ne pas avoir à générer deux fois le même code.
L'outil de navigateur et l'API utilisent le même moteur de rendu. Cela signifie que vos publications manuelles et vos publications automatisées auront toujours le même aspect.
Et vous, comment gérez-vous les captures d'écran de code ? Le faites-vous manuellement ou utilisez-vous une API ? Dites-le-moi dans les commentaires.
Source : https://dev.to/accreditly/how-we-generate-code-screenshots-for-socials-b91