Forwarded from 42⚡️
⚡️Frontend dasturlashga kirish
@qirikki dan offlayn darslar:
- 12,14,16,18-sentabr kunlari, soat 10:00 dan 16:00 gacha bo'lib o'tadi.
👨🏫 Mentor:
Diyorbek Sadullaev, Pinterest kompaniyasida senior dasturchi.
‼️ Joylar soni chegaralangan: darslarga faqat birinchi 15 kishi taklif qilinadi.
👉 42.uz/course/frontend-dasturlashga-kirish
@qirikki dan offlayn darslar:
- 12,14,16,18-sentabr kunlari, soat 10:00 dan 16:00 gacha bo'lib o'tadi.
👨🏫 Mentor:
Diyorbek Sadullaev, Pinterest kompaniyasida senior dasturchi.
‼️ Joylar soni chegaralangan: darslarga faqat birinchi 15 kishi taklif qilinadi.
👉 42.uz/course/frontend-dasturlashga-kirish
🔥18👍7👏2🎉1
👍1
HTML-like Comments
JavaScript qiziq til-da! Men ham bugun bildimki, HTML dagi kommentlar JS da ham ishlar ekan.
Yuqoridagi kodda <!-- ifodasi aslida komment boshlanishi edi. Shuning uchun ataylab joy tashlamay yozgandim. Aybga buyurmaysiz, qizg'in baxs ko'rgim kelgandi 😬.
Javob: 0
Chunki: "0 <!-- a;" === "0 // a;"
Ya'ni 0 dan keyin kelgan qism kommentariyaga aylanadi.
Variantlarda ham to'g'ri javob yo'q edi. Uzr 😬️️
Aytgancha, bu nafaqat brauzerda, NodeJS da ham ishlaydi. Chunki HTML-like comments ECMAScript spec'larida bor.
https://262.ecma-international.org/#sec-html-like-comments
JavaScript qiziq til-da! Men ham bugun bildimki, HTML dagi kommentlar JS da ham ishlar ekan.
Yuqoridagi kodda <!-- ifodasi aslida komment boshlanishi edi. Shuning uchun ataylab joy tashlamay yozgandim. Aybga buyurmaysiz, qizg'in baxs ko'rgim kelgandi 😬.
Javob: 0
Chunki: "0 <!-- a;" === "0 // a;"
Ya'ni 0 dan keyin kelgan qism kommentariyaga aylanadi.
Variantlarda ham to'g'ri javob yo'q edi. Uzr 😬️️
Aytgancha, bu nafaqat brauzerda, NodeJS da ham ishlaydi. Chunki HTML-like comments ECMAScript spec'larida bor.
https://262.ecma-international.org/#sec-html-like-comments
👍12🔥1
HTML ping
Ko'pincha sahifadagi linklarga analitika uchun "event listener"lar qo'shiladi. Masalan, biror link bosilganda "link bosildi" degan hodisa analitika serveriga jo'natiladi.
Buning uchun shu paytgacha JavaScript ishlatib kelganman. Hozir bilib qoldimki, buni faqat HTMLning o'zida qilsa ham bo'lar ekan,
Lekin bu usuldan foydalanmasam kerak. Chunki ping attributi faqat <a> tegi uchun mavjud. Button va boshqa elementlar uchun ishlamaydi. Bundan tashqari Firefox bu atribut ishlashini cheklar ekan.
Qachon ishlatar edim? Balki kichik HTML sahifa uchun analitika qo'shganda. 🤷♂️
Ammo baribir analitika servislari kutubxonalari shunchaki sahifaga ularning kutubxonasini qo'shish bilan linklarni kuzatishni boshlashadi. Ortiqcha ishga o'rin yo'q.
To'liq MDNda
Ko'pincha sahifadagi linklarga analitika uchun "event listener"lar qo'shiladi. Masalan, biror link bosilganda "link bosildi" degan hodisa analitika serveriga jo'natiladi.
Buning uchun shu paytgacha JavaScript ishlatib kelganman. Hozir bilib qoldimki, buni faqat HTMLning o'zida qilsa ham bo'lar ekan,
ping atributi orqali:
<a
href="https://example.com"
ping="https://example-tracking.com"
>Example Link</a
>
Lekin bu usuldan foydalanmasam kerak. Chunki ping attributi faqat <a> tegi uchun mavjud. Button va boshqa elementlar uchun ishlamaydi. Bundan tashqari Firefox bu atribut ishlashini cheklar ekan.
Qachon ishlatar edim? Balki kichik HTML sahifa uchun analitika qo'shganda. 🤷♂️
Ammo baribir analitika servislari kutubxonalari shunchaki sahifaga ularning kutubxonasini qo'shish bilan linklarni kuzatishni boshlashadi. Ortiqcha ishga o'rin yo'q.
To'liq MDNda
MDN Web Docs
HTMLAnchorElement: ping property - Web APIs | MDN
The ping property of the HTMLAnchorElement interface is a space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs.
👍18
Intervyu savoli
1. Yuqoridagi kod, ya'ni "setTimeout"ni 0 millisekunddan keyin chaqirish qanday holatlarda qo'l keladi?
2. Bu yerda "callback" aslida 0 millisekunddan keyin chaqiriladimi yoki ko'proq vaqt oladimi?
Savollarga javobni izlanib ko'rishingizni xohlardim.
Javoblaringizni izohlarda qoldiring 👇
setTimeout(callback, 0);
1. Yuqoridagi kod, ya'ni "setTimeout"ni 0 millisekunddan keyin chaqirish qanday holatlarda qo'l keladi?
2. Bu yerda "callback" aslida 0 millisekunddan keyin chaqiriladimi yoki ko'proq vaqt oladimi?
Savollarga javobni izlanib ko'rishingizni xohlardim.
Javoblaringizni izohlarda qoldiring 👇
👍2
Media is too big
VIEW IN TELEGRAM
Animatsiyalarni debug qilish
Chrome DevToolsda animatsiyalar uchun alohida debug tab bor. U yerda xuddi After Effects yoki shunga o'xshash dasturlardagidek, ammo soddaroq debugging interfeys mavjud.
Bu tabni ochish uchun DevToolsda:
1. Cmd+Shift+P ni bosing (Windowsda Control+Shift+P)
2. "Show Animations" deb qidiring va uni tanlang
Chrome DevToolsda animatsiyalar uchun alohida debug tab bor. U yerda xuddi After Effects yoki shunga o'xshash dasturlardagidek, ammo soddaroq debugging interfeys mavjud.
Bu tabni ochish uchun DevToolsda:
1. Cmd+Shift+P ni bosing (Windowsda Control+Shift+P)
2. "Show Animations" deb qidiring va uni tanlang
👍12👏3
Render sikli
Brauzerda asosiy ikkita sikl mavjud:
1. Event Loop (Hodisalar Sikli)
Bu JavaScript vazifalarini boshqarish uchun javob beradi. Jumladan:
1. kodni bajarish
2. hodisalarga javob berish
3. asinxron operatsiyalarni (setTimeout, Promise yoki AJAX kabi jarayonlar) boshqaradi.
2. Rendering (Paint) Cycle (Sahifa Renderi Sikli)
Hodisalar sikli vazifalarni qayta ishlagandan so'ng, brauzer rendering jarayonini amalga oshiradi:
1. CSS stillarni hisoblash
2. joylashuvni aniqlash
3. kompozitsiyalash ya’ni piksellarni ekranga chizish.
Bu ikki sikl mustaqil ravishda ishlaydi, lekin yaqindan o'zaro ta'sir qiladi.
Brauzerda asosiy ikkita sikl mavjud:
1. Event Loop (Hodisalar Sikli)
Bu JavaScript vazifalarini boshqarish uchun javob beradi. Jumladan:
1. kodni bajarish
2. hodisalarga javob berish
3. asinxron operatsiyalarni (setTimeout, Promise yoki AJAX kabi jarayonlar) boshqaradi.
2. Rendering (Paint) Cycle (Sahifa Renderi Sikli)
Hodisalar sikli vazifalarni qayta ishlagandan so'ng, brauzer rendering jarayonini amalga oshiradi:
1. CSS stillarni hisoblash
2. joylashuvni aniqlash
3. kompozitsiyalash ya’ni piksellarni ekranga chizish.
Bu ikki sikl mustaqil ravishda ishlaydi, lekin yaqindan o'zaro ta'sir qiladi.
requestAnimationFrame - vazifalarni render sikli bilan sinxronlash uchun ishlatiladi.setTimeout - hodisalar sikli bilan ishlaydi va unga yangi vazifa qo’shishda ishlatiladi.👍8🔥3
setTimeout(callback, 0) qachon kerak?
setTimeout() hodisalar sikliga yangi makrovazifa qo’shadi. Shu sabab “callback” keyingi siklda sodir bo’ladi.
Funksiyani keyingi hodisa siklda chaqirish UI o’zgarishlari to’liq “chizilishi” uchun imkon beradi, la la la, la la… .
Shunda bunday qilishdan maqsad “og’ir” funksiyani kechroqqa surishmi? Kechga sursak ham baribir keyingi siklda o’sha funksiya chaqiriladi-ku! Sahifa baribir qotib qoladigan bo’lsa, bunaday qilishdan nima naf? 🤔
Davomi bu yerda
@brogrammist
setTimeout() hodisalar sikliga yangi makrovazifa qo’shadi. Shu sabab “callback” keyingi siklda sodir bo’ladi.
Funksiyani keyingi hodisa siklda chaqirish UI o’zgarishlari to’liq “chizilishi” uchun imkon beradi, la la la, la la… .
Shunda bunday qilishdan maqsad “og’ir” funksiyani kechroqqa surishmi? Kechga sursak ham baribir keyingi siklda o’sha funksiya chaqiriladi-ku! Sahifa baribir qotib qoladigan bo’lsa, bunaday qilishdan nima naf? 🤔
Davomi bu yerda
@brogrammist
🔥6👍1
Forwarded from Orif Tolib
“Default” soʻzining tarjimasi nima?
Obunachilardan biri shu soʻzning tarjimasi haqida soʻrabdi. Bu inglizcha soʻz koʻp maʼnoli, oʻrniga qarab turlicha tarjima qilinishi mumkin. U birlamchi, odatiy, standart, yoʻqlik, mavjud emaslik, yetishmovchilik, defolt, oʻz vazifalarini bajarmaslik, aybdorlik, sudda qatnashmaslik, toʻlov qilmaganlik kabi maʼnolarga ega.
Agar saytlar, dastur va ilovalarni oʻzbekchalashtirayotgan boʻlsangiz, birlamchi soʻzi mos tushadi.
The default value is zero. – Birlamchi qiymat nolga teng.
Most people choose the default option. – Koʻpchilik birlamchi variantni tanlaydi.
Are you using the default settings? – Siz birlamchi sozlamalardan foydalanasizmi?
👉 Yuqoridagi kabi oʻrinlarda odatiy, standart soʻzlarini qoʻllasa ham boʻladi. Lekin birlamchi mosroq.
🟢 Boshqa maʼnolariga misollar:
I got a default notice in the mail yesterday. – Kecha toʻlov qilmaganim haqida eslatma oldim.
The whole countyʼs on the edge of default. – Butun mamlakat (okrug) defolt yoqasida turibdi. // Butun mamlakat defoltga yaqin.
Please default me, or else it could get dangerous for everyone. – Meni oʻyindan oling, yoʻqsa, bu barchaga xavfli boʻlishi mumkin.
They have defaulted on their debt repayments. – Ular qarzni soʻndirish boʻyicha majburiyatlarini bajarmadi.
#Soʻragan_edingiz
@oriftolib
Obunachilardan biri shu soʻzning tarjimasi haqida soʻrabdi. Bu inglizcha soʻz koʻp maʼnoli, oʻrniga qarab turlicha tarjima qilinishi mumkin. U birlamchi, odatiy, standart, yoʻqlik, mavjud emaslik, yetishmovchilik, defolt, oʻz vazifalarini bajarmaslik, aybdorlik, sudda qatnashmaslik, toʻlov qilmaganlik kabi maʼnolarga ega.
Agar saytlar, dastur va ilovalarni oʻzbekchalashtirayotgan boʻlsangiz, birlamchi soʻzi mos tushadi.
The default value is zero. – Birlamchi qiymat nolga teng.
Most people choose the default option. – Koʻpchilik birlamchi variantni tanlaydi.
Are you using the default settings? – Siz birlamchi sozlamalardan foydalanasizmi?
👉 Yuqoridagi kabi oʻrinlarda odatiy, standart soʻzlarini qoʻllasa ham boʻladi. Lekin birlamchi mosroq.
🟢 Boshqa maʼnolariga misollar:
I got a default notice in the mail yesterday. – Kecha toʻlov qilmaganim haqida eslatma oldim.
The whole countyʼs on the edge of default. – Butun mamlakat (okrug) defolt yoqasida turibdi. // Butun mamlakat defoltga yaqin.
Please default me, or else it could get dangerous for everyone. – Meni oʻyindan oling, yoʻqsa, bu barchaga xavfli boʻlishi mumkin.
They have defaulted on their debt repayments. – Ular qarzni soʻndirish boʻyicha majburiyatlarini bajarmadi.
#Soʻragan_edingiz
@oriftolib
👍7
Ustozim deyishim mumkin bo‘lgan insonlar ko‘p. Albatta ularning orasida menga ko‘p mehnati singganlari, men boshqalardan ko‘ra ko‘proq e’zozlaydigan ustozlarim bor. Ularning har biri hayotimning turli jabhalarida menga ustozlik qilganlar.
Ammo barchasidan ham ko‘ra ko‘proq qadrlaydiganim - mening Onam!
Onam menga o‘qish va yozishni o‘rgatganlar. Maktabdan ololmagan bilimlarimni o‘zlari berganlar, doim savollarimga javoblari bo‘lgan. Eng asosiysi bilimga chanqoq bo‘lishni o‘rgatganlar. Shu kungacha menda qanday muvaffaqiyat bo‘lgan bo‘lsa, bunda Onamning shu kungacha bergan tarbiyasi va ilmi o‘rni doim bor!
Aytgancha, kasblari o‘qituvchi.
Shu kungacha miyamga muhrlangan bir gaplari bor:
Ammo barchasidan ham ko‘ra ko‘proq qadrlaydiganim - mening Onam!
Onam menga o‘qish va yozishni o‘rgatganlar. Maktabdan ololmagan bilimlarimni o‘zlari berganlar, doim savollarimga javoblari bo‘lgan. Eng asosiysi bilimga chanqoq bo‘lishni o‘rgatganlar. Shu kungacha menda qanday muvaffaqiyat bo‘lgan bo‘lsa, bunda Onamning shu kungacha bergan tarbiyasi va ilmi o‘rni doim bor!
Aytgancha, kasblari o‘qituvchi.
Shu kungacha miyamga muhrlangan bir gaplari bor:
Hech qachon qo‘limdan kelmaydi dema! Agar qilolmayman desang, hech qachon qilolmaysan.
👍23🔥9🎉9
Forwarded from Programming Deadlock
How I Experience Web Today
https://how-i-experience-web-today.com/
https://how-i-experience-web-today.com/
🔥7😁6
console.dir() chuqurligi
Bugun console.dir() da "depth" parametri borligini o'rgandim. Odatda Node.js da obyektlarni terminalga chiqarishda console.log() yoki console.dir() dan foydalanaman. Ikkovini farqini shu paytgacha sezmaganman. Faqat brauzer konsolida farqini bilar edim. (Siz bilasizmi?)
Xullas, odatda obyektlarni terminalga chiqarganda, obyektlar qisqartirib ko'rsatiladi, ya'ni "chuqurroq" joylashgan ma'lumotlar "[Object]" deb qisqartirib ketiladi.
Obyektlarni to'liq ko'rish uchun esa bunday qilish mumkin ekan:
"depth" - istalgan son, xatto Infinity bo'lishi mumkin.
Har xil JS bajarilish muhitlarida (runtime environment) sinab ko'rdim. Qizig'i, "Bun"da obyektlar doimo to'liq ko'rsatilar ekan.
Bugun console.dir() da "depth" parametri borligini o'rgandim. Odatda Node.js da obyektlarni terminalga chiqarishda console.log() yoki console.dir() dan foydalanaman. Ikkovini farqini shu paytgacha sezmaganman. Faqat brauzer konsolida farqini bilar edim. (Siz bilasizmi?)
Xullas, odatda obyektlarni terminalga chiqarganda, obyektlar qisqartirib ko'rsatiladi, ya'ni "chuqurroq" joylashgan ma'lumotlar "[Object]" deb qisqartirib ketiladi.
Obyektlarni to'liq ko'rish uchun esa bunday qilish mumkin ekan:
console.dir(obj, { depth: 100 });
"depth" - istalgan son, xatto Infinity bo'lishi mumkin.
Har xil JS bajarilish muhitlarida (runtime environment) sinab ko'rdim. Qizig'i, "Bun"da obyektlar doimo to'liq ko'rsatilar ekan.
🔥9👍7🤔1
Ishdagi kechagi suhbatdan:
- "Loader" komponenti animatsiyasi juda murakkab. Uni Lottie dasturidan foydalanib yaratsak bo'ladi.
- Uning uchun Lottie-player kutubxonasini ishlatish kerak-ku! Kutubxona hajmi katta.
- Katta bo'lsa, uni "dynamic import" qilsak bo'ladi.
- Aha, keyin "Loader"ni ko'rsatish uchun "Loader" ko'rsatamizmi?
- 😐
- 😐
- Unda qo'lda yozib qo'yaveramiz.
- "Loader" komponenti animatsiyasi juda murakkab. Uni Lottie dasturidan foydalanib yaratsak bo'ladi.
- Uning uchun Lottie-player kutubxonasini ishlatish kerak-ku! Kutubxona hajmi katta.
- Katta bo'lsa, uni "dynamic import" qilsak bo'ladi.
- Aha, keyin "Loader"ni ko'rsatish uchun "Loader" ko'rsatamizmi?
- 😐
- 😐
- Unda qo'lda yozib qo'yaveramiz.
😁28🤣26👍1🔥1
Forwarded from Lingvist Iroda Azimova
Facebookdan:
"Bu dunyoda o‘qishi kerak bo‘lganlar juda ko‘p, ammo ular yozish bilan band."
Jaun Ella
@psixolingvist
"Bu dunyoda o‘qishi kerak bo‘lganlar juda ko‘p, ammo ular yozish bilan band."
Jaun Ella
@psixolingvist
👍17🔥6