Muhandislarga GIF-ga eng yaxshi hayotda yordam berish: "GitHub" ni kengaytirish uchun GIF-larni qurishda duch keladigan muammolar

Vend-da, bizning ko'pchilik omborxonalarimizga har bir talab qilish uchun tegishli, uyg'ongan va o'ylaydigan GIF-ni qo'shish qat'iy talablar mavjud.

GIPHY-ni qidirish uchun yangi yorliqni ochib, kerakli GIF-ni toping, keyin uni GitHub-ning sharhiga qo'shib qo'ying, ko'p vaqt talab etadi va ba'zi jiddiy salbiy yon ta'sirlarni ko'rsatishi mumkin ... masalan, dangasa GIF tanlash:

Bu Vend muhandislariga vaqtni tejashga yordam berish g'oyasini keltirib chiqardi (va biroz ehtiyotkor bo'ling), ular talab qilish uchun mos GIF-ni tanlash haqida gap ketganda.

GitHub uchun GIF-larni qurish (kutilmagan!) Men o'ylaganimdan bir oz qiyinroq bo'ldi. Quyida, men ushbu Chrome Extension safari davomida duch kelgan muammolarim bilan o'rtoqlashdim - va yo'q, ular shunchaki jif yoki gif deb aytiladimi yoki yo'qmi degan bahsda emas!

Men GitHub uchun GIF-larni yaratishda duch kelgan qiyinchiliklar

Fikr sharh asboblar paneliga tugmachani qo'shish g'oyasi bo'lib, bosilganda Gifidan GIF-lari bilan popover paydo bo'ladi. Bu oddiy fikr edi. Biroq, GitHub-ning dinamik xususiyati tufayli bir nechta to'siqlar paydo bo'ldi. Meni nimaga olib keladi ...

1-muammo - tugmachani asboblar paneliga qo'shish

Sharh asboblar paneliga tugma qo'shish "sahifa yuklanganda - mening tugmachamni joylashtiring" kabi oson emas - sharh joylari dinamik ravishda paydo bo'lishi mumkin, masalan. so'rov tavsifini tahrirlash paytida, u sahifani qayta yuklamasdan,

dan ga o'zgaradi.

Qaror

Mening skriptim GitHub uchun tashqi ko'rinishga ega, shuning uchun men ularni "on-edit" ishlov beruvchisini GIF tugmachasini kiritish uchun boshqarolmayman. Mening echimim bu ModeObserver-dan foydalanish edi, bu menga sharh tugunini ko'rish va DOM daraxti o'zgarganda harakatni amalga oshirishga imkon beradi. Bunday holda, asboblar paneli ko'rsatilishini tekshirishim mumkin, so'ng mening tugmachamni qo'shing.

2-muammo - sahifani o'zgartirganda GitHub uchun GIFS yuklash

Sahifalar o'rtasida o'zgartirganda, mening kengaytma kodim bajarilmayotganligini aniqladim. Buning sababi shundaki, GitHub sahifalar orasida harakat qilish uchun pjax deb nomlangan JavaScript kutubxonasidan foydalanadi. Bu shuni anglatadiki, siz so'rovni tavsifidan fayllar ko'rinishiga o'tganda, ular keyingi sahifaning tarkibini olishadi va joriy sahifa tarkibini shu bilan almashtirishadi:

Mening sahifamdagi kengaytma uchun Javascript sahifa yuklanganda bajariladi va sahifa yuklanmaganligi sababli kod bajarilmaydi va GIF tugmasi asboblar paneliga qo'shilmaydi.

Qaror

Pjax bir qator global tadbirlarni tarqatadi. Yangi sahifa yuklanganda va sahifa tarkibi o'zgartirilganda pjax: tugatish hodisasi ishga tushadi. Men ushbu hodisani tinglayman va u sodir bo'lganda asboblar paneliga tugmachani qo'shish uchun kodni bajaring.

3-muammo - rasmning to'g'ri hajmini olish

Men Giphy bilan bog'lanish uchun Giphy API-dan foydalanyapman, ular qidiruv so'zlarini qabul qilishadi va natijalarini qaytaradilar. Qaytarilgan har bir GIF uchun ular turli o'lchamdagi rasmlar uchun bir qator turli xil URL-manzillarni taqdim etadilar. Rasmni surish va tortib olish yoki surish paytida yoki ular tortishish paytida ular 10MB hajmdagi rasmlarga ruxsat beradi, shuning uchun men GIF-ning <8MB bo'lgan downsized_large versiyasidan xavfsiz foydalanishim mumkin deb o'yladim.

Sinov paytida men vaqti-vaqti bilan GIF-ni tanlab olishimni va xabar berishda ko'rinmasligini bildim. Bir oz qazish ishlari tugaganidan so'ng, men 10MB rasmlarni tortib olib tashlashga ruxsat berishiga qaramay, ular faqat 5MB gacha bo'lgan rasmlarni joylashtirganligini aniqladim (lekin men bu hujjatlashtirilgan joylarni topa olmadim ...).

Qaror

Dastlab, men muammoni boshqa rasmlar yordamida, ya'ni> 5MB bo'lishi mumkin bo'lgan downsized_large o'rniga, <5MB bo'lgan downsized_medium-dan foydalanib hal qildim. Men shuni aniqladimki, 5MB-dan past bo'lgan downsized_large versiyasiga ega bo'lgan rasmlar uchun o'rta versiya sifati pastroq edi va biz albatta sifatni qurbon qilishni istamaymiz!

Giphy qaytgan har bir rasm hajmi uchun ular bayt hajmida fayl hajmini taqdim etadilar, shuning uchun bu muammoni hal qilaman va GIF-ning eng yuqori sifatli versiyasini joylashtirilishini ta'minlash uchun, men har xil rasm o'lchamlarini takrorlab, eng yaxshi sifatni ostida joylashtiraman. 5MB GitHub ostonasi.

Umuman olganda, kengaytmani qurish noyob qiyinchilik bo'ldi. Atrofdagi kodlardan foydalana olmasligim, men GitHub-ning minitlangan kodiga tez-tez sho'ng'ishim va odatda foydalanmaydigan asboblardan foydalanishim kerak edi.

Menga har kuni vaqtimni tejashga imkon beradigan vositani yaratish va boshqalarga xuddi shu tarzda yordam berish uchun (umid qilaman!) Ochiqchasiga aytib berish juda ham mamnun edi.

Agar siz kengaytmani tekshirmoqchi bo'lsangiz, u Chrome va Firefox uchun mavjud.