Cách chúng tôi tạo ảnh chụp màn hình mã nguồn cho mạng xã hội
Trước đây, chúng tôi thường chụp ảnh màn hình mã nguồn bằng tay.
Chúng tôi sẽ mở trình soạn thảo, cắt cửa sổ và chèn tệp vào bài đăng. Điều này gây ra ba vấn đề:
- Các chủ đề (themes) thay đổi giữa các bài đăng.
- Độ rộng hình ảnh không đồng nhất.
- Ảnh chụp màn hình trông bị mờ trên màn hình điện thoại.
Chúng tôi đã ngừng làm việc đó một cách thủ công. Giờ đây, chúng tôi sử dụng hai phương pháp khác nhau tùy theo nhu cầu.
Đối với các bài đăng đơn lẻ Chúng tôi sử dụng một công cụ trình duyệt. Bạn chỉ cần dán mã nguồn, chọn ngôn ngữ và tải xuống một tệp PNG sắc nét. Cách này rất nhanh cho một tweet hoặc một slide đơn lẻ.
Đối với các bài đăng tự động Chúng tôi sử dụng một API. Cách này dành cho trường hợp bạn cần tạo hình ảnh tại thời điểm xuất bản hoặc bên trong một quy trình build. Bạn gửi mã nguồn qua một yêu cầu POST và nhận lại một URL.
Tại sao nên sử dụng API? Con người không thể nhấn nút trong một quy trình triển khai (deployment pipeline). API cho phép hệ thống của bạn tạo ra những hình ảnh hoàn hảo mọi lúc mà không cần thao tác thủ công.
Các mẹo của chúng tôi để có hình ảnh mã nguồn đẹp hơn trên mạng xã hội:
- Giữ cho mã ngắn gọn. Không nên vượt quá hai mươi dòng. Các đoạn mã dài sẽ trở nên quá nhỏ để đọc trên điện thoại.
- Sử dụng độ tương phản cao. Các chủ đề như Dracula hoặc One Dark vẫn giữ được độ sắc nét sau khi các nền tảng mạng xã hội nén hình ảnh của bạn. Các chủ đề có độ tương phản thấp trông sẽ bị mờ đục.
- Duy trì độ phân giải. Độ phân giải cao đảm bảo mã của bạn luôn sắc nét trên các màn hình retina.
- Lưu bộ nhớ đệm (cache) kết quả. Lưu lại URL hình ảnh để bạn không phải render cùng một đoạn mã hai lần.
Công cụ trình duyệt và API sử dụng cùng một bộ kết xuất (renderer). Điều này có nghĩa là các bài đăng thủ công và bài đăng tự động của bạn sẽ luôn trông giống nhau.
Bạn xử lý ảnh chụp màn hình mã nguồn như thế nào? Bạn làm thủ công hay sử dụng API? Hãy cho tôi biết ở phần bình luận nhé.
Nguồn: https://dev.to/accreditly/how-we-generate-code-screenshots-for-socials-b91