𝗛𝗼𝘄 𝗪𝗲 𝗚𝗲𝗻𝗲𝗿𝗮𝘁𝗲 𝗖𝗼𝗱𝗲 𝗦𝗰𝗿𝗲𝗲𝗻𝘀𝗵𝗼𝘁𝘀 𝗳𝗼𝗿 𝗦𝗼𝗰𝗶𝗮𝗹𝘀
Раніше ми робили скриншоти коду вручну.
Ми відкривали редактор, обрізали вікно та додавали файл до допису. Це створювало три проблеми:
- Теми змінювалися від допису до допису.
- Ширина зображень була різною.
- Скриншоти виглядали розмитими на екранах мобільних пристроїв.
Ми припинили робити це вручну. Тепер ми використовуємо два різні методи залежно від наших потреб.
Для разових дописів Ми використовуємо браузерний інструмент. Ви вставляєте свій код, обираєте мову та завантажуєте чистий PNG. Це швидко для одного твіту або слайда.
Для автоматизованих дописів Ми використовуємо API. Це потрібно, коли необхідно генерувати зображення під час публікації або всередині конвеєра збірки (build pipeline). Ви надсилаєте код через POST-запит і отримуєте URL-адресу у відповідь.
Навіщо використовувати API? Людина не може натиснути кнопку в конвеєрі розгортання (deployment pipeline). API дозволяє вашій системі створювати ідеальні зображення щоразу без ручної роботи.
Наші поради для кращих зображень коду в соцмережах:
- Не робіть їх довгими. Не перевищуйте двадцяти рядків. Довгі фрагменти стають занадто дрібними для читання на мобільних пристроях.
- Використовуйте високий контраст. Такі теми, як Dracula або One Dark, залишаються чіткими після того, як платформи соцмереж стискають ваші зображення. Теми з низьким контрастом виглядають брудними.
- Підтримуйте роздільну здатність. Висока роздільна здатність гарантує, що ваш код залишатиметься чітким на Retina-дисплеях.
- Кешуйте результати. Зберігайте URL-адресу зображення, щоб не рендерити один і той самий код двічі.
Браузерний інструмент та API використовують один і той самий рендерер. Це означає, що ваші ручні дописи та автоматизовані дописи завжди виглядатимуть однаково.
Як ви створюєте скриншоти коду? Робите це вручну чи використовуєте API? Пишіть у коментарях.
Джерело: https://dev.to/accreditly/how-we-generate-code-screenshots-for-socials-b91