𝗖𝗼𝗺𝗼 𝗚𝗲𝗿𝗮𝗺𝗼𝘀 𝗖𝗮𝗽𝘁𝘂𝗿𝗮𝘀 𝗱𝗲 𝗧𝗲𝗺𝗽𝗼 𝗱𝗲 𝗖𝗼́𝗱𝗶𝗴𝗼 𝗽𝗮𝗿𝗮 𝗥𝗲𝗱𝗲𝘀 𝗦𝗼𝗰𝗶𝗮𝗶𝘀
Costumávamos tirar capturas de tela de código manualmente.
Abríamos o editor, recortávamos a janela e arrastávamos o arquivo para uma postagem. Isso causava três problemas:
- Os temas mudavam entre as postagens.
- As larguras das imagens eram inconsistentes.
- As capturas de tela pareciam borradas em telas de dispositivos móveis.
Paramos de fazer isso manualmente. Agora usamos dois métodos diferentes com base em nossas necessidades.
Para postagens pontuais Usamos uma ferramenta de navegador. Você cola seu código, escolhe uma linguagem e baixa um PNG limpo. Isso é rápido para um único tweet ou um slide.
Para postagens automatizadas Usamos uma API. Isso é para quando você precisa gerar imagens no momento da publicação ou dentro de um pipeline de build. Você envia o código via uma requisição POST e recebe uma URL de volta.
Por que usar uma API? Um ser humano não pode clicar em um botão em um pipeline de implantação. Uma API permite que seu sistema crie imagens perfeitas todas as vezes, sem trabalho manual.
Nossas dicas para melhores imagens de código para redes sociais:
- Mantenha curto. Não exceda vinte linhas. Trechos longos tornam-se pequenos demais para ler no celular.
- Use alto contraste. Temas como Dracula ou One Dark permanecem nítidos depois que as plataformas de redes sociais comprimem suas imagens. Temas de baixo contraste parecem turvos.
- Mantenha a resolução. Alta resolução garante que seu código permaneça nítido em telas retina.
- Faça cache dos seus resultados. Armazene a URL da imagem para não renderizar o mesmo código duas vezes.
A ferramenta de navegador e a API usam o mesmo renderizador. Isso significa que suas postagens manuais e suas postagens automatizadas sempre terão a mesma aparência.
Como você lida com capturas de tela de código? Você faz manualmente ou usa uma API? Deixe-me saber nos comentários.
Fonte: https://dev.to/accreditly/how-we-generate-code-screenshots-for-socials-b91