Jak generujemy zrzuty ekranu kodu do mediów społecznościowych
Kiedyś robiliśmy zrzuty ekranu kodu ręcznie.
Otwieraliśmy edytor, wycinaliśmy okno i wrzucaliśmy plik do posta. Powodowało to trzy problemy:
- Motywy zmieniały się między postami.
- Szerokość obrazów była niespójna.
- Zrzuty ekranu wyglądały niewyraźnie na ekranach mobilnych.
Przestaliśmy robić to ręcznie. Teraz używamy dwóch różnych metod, w zależności od potrzeb.
Do jednorazowych postów Używamy narzędzia przeglądarkowego. Wklejasz kod, wybierasz język i pobierasz czysty plik PNG. Jest to szybkie rozwiązanie dla pojedynczego tweeta lub slajdu.
Do zautomatyzowanych postów Używamy API. To rozwiązanie na wypadek, gdy musisz generować obrazy w momencie publikacji lub wewnątrz potoku budowania (build pipeline). Wysyłasz kod za pomocą żądania POST i otrzymujesz z powrotem adres URL.
Dlaczego warto używać API? Człowiek nie może kliknąć przycisku w potoku wdrożeniowym (deployment pipeline). API pozwala Twojemu systemowi tworzyć idealne obrazy za każdym razem, bez ręcznej pracy.
Nasze wskazówki, jak tworzyć lepsze obrazy kodu do mediów społecznościowych:
- Dbaj o zwięzłość. Nie przekraczaj dwudziestu linii. Długie fragmenty stają się zbyt małe, by je przeczytać na telefonie.
- Używaj wysokiego kontrastu. Motywy takie jak Dracula czy One Dark pozostają wyraźne nawet po kompresji obrazów przez platformy społecznościowe. Motywy o niskim kontraście wyglądają na niewyraźne.
- Zachowaj rozdzielczość. Wysoka rozdzielczość sprawia, że Twój kod pozostaje ostry na wyświetlaczach Retina.
- Buforuj wyniki. Przechowuj adres URL obrazu, aby nie renderować tego samego kodu dwukrotnie.
Narzędzie przeglądarkowe i API korzystają z tego samego renderera. Oznacza to, że Twoje ręczne i zautomatyzowane posty zawsze wyglądają tak samo.
A Ty jak radzisz sobie ze zrzutami ekranu kodu? Robisz to ręcznie czy używasz API? Daj znać w komentarzach.
Źródło: https://dev.to/accreditly/how-we-generate-code-screenshots-for-socials-b91