Cómo generamos capturas de pantalla de código para redes sociales
Solíamos tomar capturas de pantalla de código a mano.
Abríamos el editor, recortábamos la ventana y arrastrábamos el archivo a una publicación. Esto causaba tres problemas:
- Los temas cambiaban entre publicaciones.
- Los anchos de las imágenes eran inconsistentes.
- Las capturas se veían borrosas en pantallas móviles.
Dejamos de hacerlo manualmente. Ahora utilizamos dos métodos diferentes según nuestras necesidades.
Para publicaciones puntuales Usamos una herramienta de navegador. Pegas tu código, eliges un lenguaje y descargas un PNG limpio. Esto es rápido para un solo tweet o una diapositiva.
Para publicaciones automatizadas Usamos una API. Esto es para cuando necesitas generar imágenes al momento de publicar o dentro de un pipeline de construcción. Envías el código mediante una solicitud POST y recibes una URL de vuelta.
¿Por qué usar una API? Un humano no puede hacer clic en un botón en un pipeline de despliegue. Una API permite que tu sistema cree imágenes perfectas cada vez sin trabajo manual.
Nuestros consejos para mejores imágenes de código en redes sociales:
- Manténlo corto. No excedas las veinte líneas. Los fragmentos largos se vuelven demasiado pequeños para leerse en móviles.
- Usa un alto contraste. Temas como Dracula o One Dark se mantienen nítidos después de que las plataformas de redes sociales compriman tus imágenes. Los temas de bajo contraste se ven borrosos.
- Mantén la resolución. Una alta resolución asegura que tu código se mantenga nítido en pantallas retina.
- Cachea tus resultados. Guarda la URL de la imagen para no renderizar el mismo código dos veces.
La herramienta de navegador y la API utilizan el mismo renderizador. Esto significa que tus publicaciones manuales y tus publicaciones automatizadas siempre se ven iguales.
¿Cómo gestionas las capturas de pantalla de código? ¿Lo haces a mano o usas una API? Cuéntame en los comentarios.
Fuente: https://dev.to/accreditly/how-we-generate-code-screenshots-for-socials-b91