Taxminan 15 yil oldin men sayohat agentlari, aeroport ishchilari va aviakompaniyalar uchun ilovalar yaratgan kompaniyada ishlaganman. Shuningdek, biz UI komponentlari va bir sahifali ilova imkoniyatlari uchun oʻz ichki tizimimizni yaratdik. Bizda hamma narsa uchun komponentlar bor edi: maydonlar, tugmalar, yorliqlar, diapazonlar, ma'lumotlar jadvallari, menyular, sanani tanlash, tanlash va ko'p tanlovlar. Bizda hatto div komponenti ham bor edi. Aytgancha, bizning div komponentimiz ajoyib edi, u bizga barcha brauzerlarda yumaloq burchaklar qilish imkonini berdi, xoh ishoning, xoh ishonmang, o'sha paytda buni qilish oson ish emas edi.
Bizning ishimiz tariximizning JS, Ajax va dinamik HTML bizni kelajakka olib kelgan inqilob sifatida ko'rgan bir paytda sodir bo'ldi. To'satdan biz sahifani dinamik ravishda yangilashimiz, serverdan ma'lumot olishimiz va boshqa sahifalarga o'tishdan qochishimiz mumkin edi, bu sekin deb ko'rindi va ekranda ikki sahifa o'rtasida katta oq to'rtburchak paydo bo'ldi. Jeff Atwood (StackOverflow asoschisi) tomonidan mashhur bo'lgan bir ibora bor edi, unda o'qigan: "JavaScript-da yozilishi mumkin bo'lgan har qanday dastur oxir-oqibat JavaScript-da yoziladi." - Jeff Atvud
O'sha paytda biz uchun bu haqiqatan ham o'sha ilovalarni yaratishga jur'at kabi tuyulardi. Bu JS bilan hamma narsani qilish uchun adyol roziligidek tuyuldi. Shunday qilib, biz JS bilan hamma narsani qildik va boshqa ishlarni qilish usullarini o'rganishga vaqt ajratmadik. Biz HTML va CSS nima qila olishini to'g'ri o'rganish uchun rag'bat his qilmadik. Biz haqiqatan ham vebni rivojlanayotgan dastur platformasi sifatida qabul qilmadik. Biz buni asosan ishlashimiz kerak bo'lgan narsa sifatida ko'rdik, ayniqsa brauzerni qo'llab-quvvatlash haqida gap ketganda. Biz ishlarni bajarish uchun unga ko'proq JS tashlashimiz mumkin. Internet qanday ishlashi va platformada mavjud bo'lgan narsalar haqida ko'proq ma'lumot olishga vaqt ajratganim menga yordam berganmi? Albatta, men haqiqatan ham kerak bo'lmagan bir nechta kodni o'chirib tashlagan bo'lardim. Ammo, o'sha paytda, ehtimol unchalik emas. Ko'ryapsizmi, o'sha paytda brauzerdagi farqlar juda muhim edi. Bu Internet Explorer hali ham dominant brauzer bo'lgan, Firefox ikkinchi o'rinda turgan, ammo Chrome tez mashhurlikka erishganligi sababli bozor ulushini yo'qota boshlagan vaqt edi. Garchi Chrome va Firefox veb-standartlar bo'yicha kelishuvga erishgan bo'lsa-da, bizning ilovalarimiz ishlayotgan muhitlar biz IE6-ni uzoq vaqt davomida qo'llab-quvvatlashimiz kerakligini anglatardi. Bizga IE8-ni qo'llab-quvvatlashga ruxsat berilgan bo'lsa ham, brauzerlar o'rtasidagi juda ko'p farqlarni hal qilishimiz kerak edi. Nafaqat bu, balki o'sha paytdagi Internetda platformaga o'rnatilgan unchalik ko'p imkoniyatlar yo'q edi.
Bugungi kunga shoshiling. Ishlar juda o'zgardi. Bizda nafaqat bu imkoniyatlar har qachongidan ham ko'p, balki ularning mavjud bo'lish tezligi ham oshdi. Keyin yana savol beraman: Internet qanday ishlashi va platformada mavjud bo'lgan narsalar haqida ko'proq ma'lumot olishga vaqt ajratsam, bugungi kunda sizga yordam bera oladimi? Mutlaqo ha. Bugungi kunda veb-platformani tushunish va undan foydalanishni o'rganish sizni boshqa ishlab chiquvchilarga nisbatan katta afzalliklarga ega bo'ladi. Siz unumdorlik, qulaylik, sezgirlik, ularning barchasi birgalikda ishlaysizmi yoki oddiygina UI funksiyalarini yetkazib berasizmi, agar siz buni mas'uliyatli muhandis sifatida qilishni istasangiz, sizda mavjud vositalarni bilish maqsadlaringizga tezroq va yaxshiroq erishishingizga yordam beradi. Endi kutubxona kerak bo'lmasligi mumkin bo'lgan ba'zi narsalar Bugungi kunda qaysi brauzerlar qo'llab-quvvatlanishini bilgan holda, savol tug'iladi: biz nimadan voz kechishimiz mumkin? 2025 yilda yumaloq burchaklar qilish uchun bizga div komponenti kerakmi? Albatta, biz yo'q. border-radius xususiyati hozirda foydalanilayotgan barcha brauzerlar tomonidan 15 yildan ortiq vaqt davomida qo‘llab-quvvatlangan. Tez orada burchak shakli ham paydo bo'ladi, bu yanada chiroyli burchaklar uchun. Keling, barcha asosiy brauzerlarda mavjud bo'lgan va kod bazangizdagi mavjud bog'liqliklarni almashtirish uchun foydalanishingiz mumkin bo'lgan nisbatan yangi xususiyatlarni ko'rib chiqaylik. Gap shundaki, barcha sevimli kutubxonalaringizni darhol tark etish va kod bazasini qayta yozish emas. Boshqa hamma narsaga kelsak, avval brauzerni qo'llab-quvvatlashni hisobga olishingiz va loyihangizga xos bo'lgan boshqa omillarga asoslanib qaror qabul qilishingiz kerak. Quyidagi xususiyatlar uchta asosiy brauzer dvigatellarida (Chromium, WebKit va Gecko) amalga oshiriladi, ammo siz ularni darhol ishlatishingizga xalaqit beradigan turli xil brauzerlarni qo'llab-quvvatlash talablariga ega bo'lishingiz mumkin. Hozir bu xususiyatlar haqida ma'lumot olish uchun hali ham yaxshi vaqt va, ehtimol, bir nuqtada ulardan foydalanishni rejalashtirish. Popoverlar va dialoglar Popover API,
Albatta, sizning internetga ulanish tezligingiz ham oshdi, lekin bu hamma uchun ham shunday emas. Va hamma ham bir xil qurilma imkoniyatlariga ega emas. Platforma bilan amalga oshirishingiz mumkin bo'lgan narsalar uchun uchinchi tomon kodini olish, buning o'rniga, ehtimol siz ko'proq kod jo'natasiz va shuning uchun odatdagidan kamroq mijozlarga erishasiz. Internetda yuklashning yomon ishlashi katta voz kechish stavkalariga olib keladi va brend obro'siga putur etkazadi. Qurilmalarda kamroq kodni ishga tushirish Bundan tashqari, siz mijozlaringizning qurilmalariga yuboradigan kod, platformaning tepasida kamroq JavaScript abstraksiyalaridan foydalansa, tezroq ishlaydi. Bundan tashqari, sukut bo'yicha, ehtimol, sezgirroq va qulayroqdir. Bularning barchasi ko'proq va baxtli mijozlarga olib keladi. Mening hamkasbim Aleks Rassellning yillik unumdorlik tengsizligi haqidagi blogini tekshiring, bu boylik tengsizligi tufayli milliardlab foydalanuvchilari bo'lgan bozorlarda premium qurilmalar deyarli yo'qligini ko'rsatadi. Va bu bo'shliq faqat vaqt o'tishi bilan o'sib bormoqda.
O'rnatilgan duvarcılık tartibi Tez orada paydo bo'ladigan va meni juda hayajonlantiradigan veb-platforma xususiyatlaridan biri bu CSS Masonry.
Masonlik nima ekanligini tushuntirishdan boshlaylik. Masonlik nima Masonlik - bu Pinterest tomonidan yillar oldin mashhur bo'lgan tartibning bir turi. U kontentning mustaqil treklarini yaratadi, unda elementlar trekning boshlanishiga imkon qadar yaqinroq joylashadi.
Ko'p odamlar masonlikni portfellar va foto galereyalar uchun ajoyib imkoniyat sifatida ko'rishadi, bu albatta qila oladi. Ammo masonlik Pinterest-da ko'rganingizdan ko'ra moslashuvchanroq va u faqat sharsharaga o'xshash tartiblar bilan cheklanmaydi. Masonlik sxemasida:
Treklar ustunlar yoki qatorlar bo'lishi mumkin:
Kontent treklarining hammasi bir xil o'lchamda bo'lishi shart emas:
Elementlar bir nechta treklarni qamrab olishi mumkin:
Elementlar maxsus treklarga joylashtirilishi mumkin; ular har doim avtomatik joylashtirish algoritmiga amal qilishlari shart emas:
Namoyishlar Bu erda Chromium-da CSS Masonry dasturidan foydalangan holda qilgan bir nechta oddiy demolar. Elementlar (bu holda sarlavha) bir nechta treklarni qanday qamrab olishi mumkinligini ko'rsatadigan fotogalereya demosi:
Turli o'lchamdagi treklarni ko'rsatadigan boshqa fotogalereya:
Ba'zi treklari boshqalardan ko'ra kengroq va ba'zi ob'ektlar joylashuvning butun kengligini qamrab olgan yangiliklar saytining tartibi:
Elementlarni ma'lum treklarga joylashtirish mumkinligini ko'rsatadigan kanban taxtasi:
Eslatma: Theoldingi demolar ko'pchilik veb-foydalanuvchilar uchun hali mavjud bo'lmagan Chromium versiyasi bilan yaratilgan, chunki CSS Masonry endigina brauzerlarda qo'llanila boshlandi. Biroq, veb-ishlab chiquvchilar yillar davomida Masonry maketlarini yaratish uchun kutubxonalardan mamnuniyat bilan foydalanishmoqda. Bugungi kunda duvarcılıkdan foydalanadigan saytlar Darhaqiqat, bugungi kunda masonlik Internetda juda keng tarqalgan. Pinterest-dan tashqari men topgan bir nechta misollar:
Va yana bir nechta, kamroq ravshan misollar:
Xo'sh, bu maketlar qanday yaratilgan? Vaqtinchalik echimlar Men ko'rgan hiylalardan biri bu Flexbox tartibidan foydalanish, uning yo'nalishini ustunga o'zgartirish va uni o'rashga o'rnatish. Shunday qilib, siz turli balandlikdagi narsalarni bir nechta mustaqil ustunlarga joylashtirishingiz mumkin, bu esa Masonlik sxemasi taassurotini qoldiradi:
Biroq, bu vaqtinchalik hal qilishda ikkita cheklov mavjud:
Elementlarning tartibi haqiqiy masonlik tartibida bo'ladiganidan farq qiladi. Flexbox bilan elementlar birinchi ustunni to'ldiradi va u to'lgandan keyin keyingi ustunga o'tadi. Masonlik bilan buyumlar qaysi trekka (yoki bu holda ustunga) ko'proq joy ega bo'lsa, yig'iladi. Bundan tashqari, va, ehtimol, bundan ham muhimi, bu vaqtinchalik yechim Flexbox konteyneriga belgilangan balandlikni o'rnatishingizni talab qiladi; aks holda, hech qanday o'rash sodir bo'lmaydi.
Uchinchi tomon masonlik kutubxonalari Murakkab holatlar uchun ishlab chiquvchilar kutubxonalardan foydalanishgan. Buning uchun eng mashhur va ommabop kutubxona oddiygina Masonry deb ataladi va NPM ma'lumotlariga ko'ra haftasiga taxminan 200 000 marta yuklab olinadi. Squarespace shuningdek, kodsiz muqobil uchun Masonry tartibini ko'rsatadigan tartib komponentini taqdim etadi va ko'plab saytlar undan foydalanadi. Ushbu ikkala variant ham tartibdagi elementlarni joylashtirish uchun JavaScript kodidan foydalanadi. O'rnatilgan masonlik Masonry endi brauzerlarda o'rnatilgan CSS xususiyati sifatida paydo bo'la boshlaganidan juda xursandman. Vaqt o'tishi bilan siz Masonry'dan xuddi Grid yoki Flexbox kabi, ya'ni hech qanday vaqtinchalik echimlar yoki uchinchi tomon kodiga muhtoj bo'lmasdan foydalanishingiz mumkin bo'ladi. Microsoftdagi mening jamoam Edge, Chrome va boshqa ko'plab brauzerlar asoslangan Chromium ochiq manba loyihasida o'rnatilgan Masonry yordamini amalga oshirmoqda. Mozilla aslida 2020-yilda Masonry-ni eksperimental joriy etishni taklif qilgan birinchi brauzer sotuvchisi edi. Apple ham ushbu yangi veb-layoutni ibtidoiy qilishdan juda manfaatdor edi. Xususiyatni standartlashtirish bo'yicha ishlar ham davom etmoqda, CSS ishchi guruhida umumiy yo'nalish va hatto yangi displey tipidagi displey: grid-lanes haqida kelishilgan holda. Agar siz Masonluk haqida ko'proq ma'lumotga ega bo'lishni istasangiz va taraqqiyotni kuzatishni istasangiz, mening CSS Masonry resurslari sahifamni tekshiring. Vaqt o'tishi bilan, masonlik xuddi Grid yoki Flexbox kabi asosiy xususiyatga aylanganda, biz undan oddiygina foydalana olamiz va quyidagilardan foyda olamiz:
Yaxshiroq ishlash, Yaxshiroq javob berish, Foydalanish qulayligi va oddiy kod.
Keling, bularni batafsil ko'rib chiqaylik. Yaxshiroq ishlash O'zingizning Masonry-ga o'xshash tartib tizimini yaratish yoki uning o'rniga uchinchi tomon kutubxonasidan foydalanish, elementlarni ekranga joylashtirish uchun JavaScript kodini ishlatishingiz kerakligini anglatadi. Bu shuningdek, ushbu kod blokirovka qilinishini anglatadi. Haqiqatan ham, JavaScript kodi ishga tushmaguncha, hech narsa ko'rinmaydi yoki narsalar to'g'ri joylarda yoki kerakli o'lchamlarda bo'lmaydi. Masonlik tartibi ko'pincha veb-sahifaning asosiy qismi uchun ishlatiladi, ya'ni kod sizning asosiy tarkibingizni aks holda bo'lishi mumkin bo'lganidan keyinroq ko'rsatishi, LCP yoki eng katta kontentli bo'yoq ko'rsatkichini yomonlashtiradi, bu esa qabul qilinadigan ishlash va qidiruv tizimini optimallashtirishda katta rol o'ynaydi. Men Masonry JS kutubxonasini oddiy tartib bilan va DevTools-da sekin 4G ulanishini simulyatsiya qilish orqali sinab ko'rdim. Kutubxona unchalik katta emas (24KB, 7.8KB gzip), lekin mening sinov shartlarimga ko'ra yuklash uchun 600ms kerak bo'ldi. Masonry kutubxonasi uchun uzoq 600 ms yuklash vaqti va bu sodir bo'lgan paytda boshqa hech qanday renderlash harakati sodir bo'lmaganligini ko'rsatadigan ishlash yozuvi:
Bundan tashqari, dastlabki yuklash vaqtidan keyin yuklab olingan skriptni tahlil qilish, kompilyatsiya qilish va keyin ishga tushirish kerak edi. Bularning barchasi, yuqorida aytib o'tilganidek, sahifani ko'rsatishni to'sib qo'ygan. Brauzerda o'rnatilgan Masonry ilovasi bilan bizda yuklash va ishga tushirish uchun skript bo'lmaydi. Brauzer mexanizmi sahifani ko'rsatishning dastlabki bosqichida o'z ishini qiladi. Yaxshiroq javob berish Sahifani birinchi marta yuklaganda bo'lgani kabi, brauzer oynasining o'lchamini o'zgartirish ushbu sahifadagi tartibni qayta ko'rsatishga olib keladi. Shu nuqtada, agar sahifa Masonry JS kutubxonasidan foydalanayotgan bo'lsa, skriptni qayta yuklashning hojati yo'q, chunki u allaqachonBu yerga. Biroq, elementlarni to'g'ri joylarga ko'chiradigan kod ishlashi kerak. Endi ushbu kutubxona sahifa yuklanganda buni juda tez bajaradiganga o'xshaydi. Biroq, u oyna o'lchamlarini boshqa joyga ko'chirish kerak bo'lganda elementlarni jonlantiradi va bu katta farq qiladi. Albatta, biz ishlab chiquvchilar kabi foydalanuvchilar brauzer oynalarining o'lchamlarini o'zgartirishga vaqt sarflamaydilar. Ammo bu jonlantirilgan o'lchamni o'zgartirish tajribasi juda noqulay bo'lishi mumkin va sahifaning yangi hajmiga moslashishi uchun qabul qilinadigan vaqtni oshiradi. Foydalanish qulayligi va oddiyroq kod Veb-xususiyatdan foydalanish qanchalik oson va kod qanchalik sodda ko'rinishi jamoangiz uchun katta farq qilishi mumkin bo'lgan muhim omillardir. Albatta, ular oxirgi foydalanuvchi tajribasi kabi muhim bo'lishi mumkin emas, lekin ishlab chiquvchi tajribasi barqarorlikka ta'sir qiladi. O'rnatilgan veb-xususiyatdan foydalanish bu borada muhim afzalliklarga ega:
HTML, CSS va JS-ni allaqachon biladigan dasturchilar, ehtimol, bu xususiyatdan osongina foydalanishlari mumkin, chunki u veb-platformaning qolgan qismi bilan yaxshi integratsiya va mos keladigan tarzda ishlab chiqilgan. Funktsiyadan qanday foydalanishda kiritilgan o'zgarishlarni buzish xavfi yo'q. Ushbu xususiyatning eskirishi yoki qo'llab-quvvatlanmasligi xavfi deyarli nolga teng.
O'rnatilgan masonlik bo'lsa, bu ibtidoiy tartib bo'lgani uchun siz uni Grid yoki Flexbox kabi CSS-dan foydalanasiz, JS ishtirok etmaydi. Bundan tashqari, bo'shliq kabi tartib bilan bog'liq boshqa CSS xususiyatlari siz kutganingizdek ishlaydi. Bilish uchun hech qanday hiyla yoki vaqtinchalik echimlar yo'q va siz o'rgangan narsalar MDN da hujjatlashtirilgan. Masonry JS lib uchun ishga tushirish biroz murakkab: ustun va bo'shliq o'lchamlarini o'rnatish uchun yashirin HTML elementlari bilan birga ma'lum bir sintaksisga ega ma'lumotlar atributini talab qiladi. Bundan tashqari, agar siz ustunlarni kengaytirmoqchi bo'lsangiz, muammolarni oldini olish uchun bo'shliq hajmini o'zingiz kiritishingiz kerak:
Keling, buni o'rnatilgan Masonry ilovasi qanday ko'rinishi bilan taqqoslaylik:
Oddiyroq, ixchamroq kod bo'shliq kabi narsalarni ishlatishi mumkin va qayerda yo'llar 2 oraliq bilan amalga oshiriladi, xuddi panjaradagi kabi va bo'shliq hajmini o'z ichiga olgan to'g'ri kenglikni hisoblashni talab qilmaydi. Nima va qachon borligini qanday bilish mumkin? Umuman olganda, savol JS kutubxonasi orqali o'rnatilgan masonlikdan foydalanish kerakmi yoki yo'qmi, emas, balki qachon. Masonry JS kutubxonasi ajoyib va ko'p yillar davomida veb-platformadagi bo'shliqni to'ldirib kelmoqda va ko'plab baxtli ishlab chiquvchilar va foydalanuvchilar uchun. Albatta, agar siz uni o'rnatilgan Masonry ilovasi bilan taqqoslasangiz, uning bir nechta kamchiliklari bor, lekin agar bu dastur tayyor bo'lmasa, bu muhim emas. Ushbu ajoyib yangi veb-platforma xususiyatlarini sanab o'tish men uchun oson, chunki men brauzer sotuvchisida ishlayman va shuning uchun nima bo'lishini bilishga moyilman. Ammo ishlab chiquvchilar ko'pincha so'rovdan so'ng so'rov o'tkazishadi, yangi narsalarni kuzatib borish qiyin. Xabardor bo'lish qiyin va kompaniyalar har doim ham o'rganishni birinchi o'ringa qo'yishmaydi. Bunga yordam berish uchun, kerakli ma'lumotlarni tezda olishingiz uchun oddiy va ixcham usullarda yangilanishlarni ta'minlaydigan bir nechta manbalar mavjud:
Veb-platformada tadqiqotchi saytlari mavjud: Sizni uning relizlar haqidagi eslatmalari sahifasi qiziqtirishi mumkin. Va agar sizga RSS yoqsa, relizlar qaydlari tasmasini, shuningdek, yangi mavjud va keng tarqalgan tasmalarni tekshiring.
InternetPlatforma holati boshqaruv paneli: Siz uning turli xil asosiy yil sahifalarini yoqtirishingiz mumkin.
Chrome platformasi holatining yoʻl xaritasi sahifasi.
Agar biroz ko'proq vaqtingiz bo'lsa, siz brauzer sotuvchilarining relizlar haqidagi eslatmalariga ham qiziqishingiz mumkin:
Chrome Chet Firefox Safari
Yana ko'proq manbalar uchun veb-platformada navigatsiya jadvalini tekshiring. Mening narsam hali ham amalga oshirilmagan Bu muammoning boshqa tomoni. Vaqt, kuch va kuzatib borish yo'llarini topsangiz ham, ovozingizni eshitish va sevimli xususiyatlaringizni amalga oshirishdan umidsizlik bor. Ehtimol, siz ko'p yillar davomida ma'lum bir xatoning hal qilinishini yoki u hali ham etishmayotgan brauzerda ma'lum xususiyatni yuborishni kutgandirsiz. Men aytmoqchimanki, brauzer sotuvchilari tinglashadi. Men har doim ishlab chiquvchilar signallari va fikr-mulohazalarini muhokama qiladigan bir nechta o'zaro faoliyat guruhlarning bir qismiman. Biz har bir brauzer sotuvchisining ichki va forumlar, ochiq manbali loyihalar, bloglar va so'rovlardagi tashqi/ommaviy fikr-mulohazalar manbalarini ko'rib chiqamiz. Va biz har doim ishlab chiquvchilar uchun o'zlarining maxsus ehtiyojlari va foydalanish holatlarini baham ko'rishlari uchun yaxshiroq yo'llarni yaratishga harakat qilamiz. Shuning uchun, agar imkoningiz bo'lsa, iltimos, brauzer sotuvchilardan ko'proq narsani talab qiling va kerakli xususiyatlarni amalga oshirish uchun bizga bosim o'tkazing. Men tushunaman, bu vaqt talab etadi va qo'rqitishi mumkin (kirish uchun yuqori to'siq haqida gapirmasa ham), lekin u ham ishlaydi. O'zingizning (yoki kompaniyangizning) ovozini eshitishingizning bir necha yo'li: Yillik JS holati, CSS holati va HTML holati so'rovlarini oling. Ular brauzer sotuvchilari o'z ishlariga ustuvor ahamiyat berishda katta rol o'ynaydi. Agar sizga brauzerlar bo'ylab izchil amalga oshirilishi uchun ma'lum bir standartga asoslangan API kerak bo'lsa, keyingi Interop loyihasi iteratsiyasida taklif yuborishni o'ylab ko'ring. Bu ko'proq vaqt talab etadi, lekin Shopify va RUMvision Interop 2026 uchun o'z istaklari ro'yxatini qanday baham ko'rishini ko'rib chiqing. Bu kabi batafsil ma'lumotlar brauzer sotuvchilari uchun ustuvor ahamiyatga ega bo'lishi uchun juda foydali bo'lishi mumkin. Brauzer ishlab chiqaruvchilariga ta'sir qilish uchun ko'proq foydali havolalar uchun veb-platformadagi navigatsiya jadvalini tekshiring. Xulosa Yakunlash uchun, umid qilamanki, ushbu maqola sizni o'ylash uchun bir nechta narsalarni qoldirdi:
Masonlik va boshqa yaqinlashib kelayotgan veb-xususiyatlar uchun hayajon. Foydalanishni boshlashingiz mumkin bo'lgan bir nechta veb-xususiyatlar. Oʻrnatilgan funksiyalar foydasiga oʻchirib tashlashingiz mumkin boʻlgan bir nechta maxsus yoki uchinchi tomon kodlari. Nima bo'layotganini kuzatish va brauzer sotuvchilariga ta'sir qilishning bir necha usullari.
Eng muhimi, veb-platformadan to'liq foydalanishning afzalliklariga sizni ishontirdim deb umid qilaman.