Bagaimana Kami Menghasilkan Tangkapan Skrin Kod untuk Media Sosial
Dahulu, kami mengambil tangkapan skrin kod secara manual.
Kami akan membuka editor, memotong (crop) tetingkap, dan memasukkan fail ke dalam hantaran. Ini menyebabkan tiga masalah:
- Tema berubah-ubah antara hantaran.
- Lebar imej tidak konsisten.
- Tangkapan skrin kelihatan kabur pada skrin mudah alih.
Kami berhenti melakukannya secara manual. Kini, kami menggunakan dua kaedah berbeza berdasarkan keperluan kami.
Untuk hantaran sekali sekala Kami menggunakan alatan pelayar. Anda hanya perlu tampal kod anda, pilih bahasa, dan muat turun PNG yang bersih. Ini pantas untuk satu ciapan atau satu slaid.
Untuk hantaran automatik Kami menggunakan API. Ini adalah untuk apabila anda perlu menjana imej pada masa penerbitan atau di dalam saluran paip binaan (build pipeline). Anda menghantar kod melalui permintaan POST dan menerima URL sebagai maklum balas.
Mengapa menggunakan API? Manusia tidak boleh menekan butang dalam saluran paip penggunaan (deployment pipeline). API membolehkan sistem anda mencipta imej yang sempurna setiap masa tanpa kerja manual.
Tip kami untuk imej kod media sosial yang lebih baik:
- Pastikan ia pendek. Jangan melebihi dua puluh baris. Keratan kod yang panjang akan menjadi terlalu kecil untuk dibaca pada peranti mudah alih.
- Gunakan kontras tinggi. Tema seperti Dracula atau One Dark kekal tajam selepas platform media sosial memampatkan imej anda. Tema kontras rendah akan kelihatan kusam.
- Kekalkan resolusi. Resolusi tinggi memastikan kod anda kekal jelas pada paparan retina.
- Simpan cache hasil anda. Simpan URL imej supaya anda tidak perlu menjana kod yang sama berulang kali.
Alatan pelayar dan API menggunakan penjana (renderer) yang sama. Ini bermakna hantaran manual dan hantaran automatik anda akan sentiasa kelihatan sama.
Bagaimana anda mengendalikan tangkapan skrin kod? Adakah anda melakukannya secara manual atau menggunakan API? Beritahu saya di ruangan komen.
Sumber: https://dev.to/accreditly/how-we-generate-code-screenshots-for-socials-b91