Brogrammist

2024-yildan olgan xulosalarimdan:

- Eng qisqa yo'l har doim ham eng yaxshi yo'l emas.

- Har kim o'z ishini astoydil qilgan jamiyat kuchli bo'ladi.

- Hayotda kimlar uchundir qiyin, kimlar uchundir oson emas. Hamma o'z imtihonidan o'tayapti. Faqat imtihoniga befarqlar bor.

Boshlayapmiz! 🙂

❤️‍🔥❤️‍🔥❤️‍🔥

Yakshanba kuni, 22-dekabr soat 14:00 da, "Pinterest" kompaniyasida Senior Software Engineer Diyorbek Sadullayev bilan intervyu uyushtiramiz.

Intervyuni o’zim(@JoshDeveloper) va Shahzod aka Tursunov olamiz.

Intervyu Umumiy Frontend’dan bo’lib o’tadi. Imkon qadar chuqurlashamiz 😉

Jonli efirga LINK.

O’tkazib yubormang, ulashishni esa unutmang ✔️

#interview

@JoshDeveloper

{:searchCount} marta LinkedIn meni odamlarga ko'rsatibdi!

:fire: :grinningface:

Ofisda meni yonimda Androidchi o'tiradi. Oq background qo'yib olgan u ham editoriga. Nega oq rang qo'yib olganini yaqinda so'ragandim. Ko'zing og'rimaydimi desam, menga shunaqasi yoqadi deb qo'ygandi. 🤷‍♂️
Mayli deb qo'yaverdim menam.

https://t.me/JR_TwitGram/3048

Ko'pchilik ishlatadigan va ko'pchilik ustida ishlaydigan katta loyihalarning yoqimsiz tarafi, siz erkin ishlolmaysiz.

Kod sifati va barqarorligini ta'minlash uchun qo'yilgan qoidalar bora-bora ovoragarchilikka aylanadi. Chunki vaqt o'tishi bilan hamma narsa o'zgaradi. Lekin bu o'zgarishlarning barchasiga moslashib ulgurishning iloji yo'q.

Shunday qilib bitta "techical debt" 2-siga olib keladi, keyin 3-siga... va qarabsizki sizda bir uyum "legacy" kod paydo bo'ladi.

Noliyotganim yo'q! Bu shunchaki haqiqat.

Shuni unutmang, 2 xil kod bor:
1. O'ta tushunarli va sinchkovlik bilan yozilgan ideal kod.
2. Pul keltiradigan kod.

Rasm tarjimasi:

Kelajakda shu kod ustida ishlovchilardan bunday rasvogarchilik uchun oldindan uzr so'rayman. Bizning joriy CSS validator skriptimiz turli selektorlar ichida bir xil nomli o'zgaruvchilarni qayta e'lon qilishimga imkon bermadi (aks holda kod ancha sodda va o'qishli bo'lar edi).

https://github.com/public-apis/public-apis

Frontendni o'rganyotganlar,

Qasyi tekin API servislardan foydalanisizlar portfolio yoki shunchaki o'rganish uchun?

Masalan, man themoviedb.org, openlibrary.org lardan foydalanardim. Sizchi?

Shu loyihalarni amalga oshirish uchun deyarli hamma ona tili darsliklarini o'qib chiqqanman. Maktab darsliklaridan to universitet dasrliklarigacha va boshqa qo'llanmallar va lug'atlar. Xatto, maktabdagi o'qituvchim bilan ham aloqaga chiqib, maslahatlashganman.

Balki dasturchi bo'lganim uchundir, ammo, anglaganim shuki, bizning O'zbek tilimiz qoidalari muammolarga to'la ekan. Ayniqsa alifbo masalasi. Shuning uchun ham balki tilimizni raqamlashtirishda juda ortda qolib ketganmiz menimcha.

Tilshunoshlikka oid loyihalarimdan yana biri bu Transliterator.Uz

Xususiyalari:

- Matnlarni lotin/kirill alifbosiga o'girish

- MS Ofiice fayllarni va oddiy matn fayllarni o'girish

- Deyarli barcha istisno so'zlar va qoidalarni aniqlay oladi

- Qisman transliteratsiya, ya'ni matnning faqat belgilangan qismini o'giradi

- Istisno so'zlar ro'yxatini kengaytirish

🔗 https://transliterator.uz

Github: https://github.com/diyorbek/lotin-kirill

Aytgancha, 100% client-side! Hech qanday serverlarsiz ishlaydi (albatta sahifani uzatuvchi serverdan tashqari)

P.S. Bu loyiha ham eskilaridan. Maqsad o'zi yuqoridagi Fonetika loyihasini kirill alifbosida ham ishlashini ta'minlash edi. Lekin lotin-kirill masalasi ham kichik narsa emasligini anglab yetganman.

Bo'g'inlarga ajratuvchi dastur

O'zbek tiliga amaliy hissa qo'shaman degan bir yaxshi dasturchi aka, litseydoshim o'zbekcha so'zlarni bo'g'inlarga ajratadigan dastur tuzgan ekan.

Bir-ikkita "qiyshiq" so'zlar chig'irig'idan ham yaxshi o'tdi.

Imkoniyatlari:
➡️ BEPUL;
➡️ istalgan so'zni bo'g'inga ajratib beradi;
➡️ har bir tovush hosil bo'lish o'rni (til oldi, til orqa va h.k), umuman, sifatlariga ko'ra tasniflanadi;
➡️ ochiq/yopiq bo'g'inlar statistikasi beriladi.

Bo'g'inga ajratish qoidalari bilan endi tanishayotgan xorijlik talabalar, maktab o'quvchilari va ona tili ustozlari uchun yaxshi yordamchi bo'ladi.

🔗Dastur havolasi:
https://fonetika.uz/


Shunaqa ishlarni ko'rsam, xursand bo'lib ketaman. Tilni sevish emas, unga yordam berish kerak!

Omad sizga, Diyorbek!

#offtop

Shohrux repper endi mening Linkedindagi networkimda. 😬️️️️️️

"Aka men sizni ashaddiy muxlisizman!!!" deb yozvoraymikan-a? 🤔️️️️️️

Facebookdan:

"Bu dunyoda o‘qishi kerak bo‘lganlar juda ko‘p, ammo ular yozish bilan band."

Jaun Ella

@psixolingvist

10000000 -> '10 000 000'

Vanihoyat!!!!! 😤🥹

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.

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:

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.

How I Experience Web Today
https://how-i-experience-web-today.com/

​​“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

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

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.

requestAnimationFrame - vazifalarni render sikli bilan sinxronlash uchun ishlatiladi.

setTimeout - hodisalar sikli bilan ishlaydi va unga yangi vazifa qo’shishda ishlatiladi.

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

Intervyu savoli

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 👇

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, 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

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

Dasturchilar kuni muborak!

Shu munosabat bilan JavaScript quiz bermoqchiman. Yuqoridagi kod natijasi qanday bo'ladi?
🤔🤔🤔

⚡️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

"Accessible" veb-sahifalar yasash

Nega shadcn-ui sizga yoqadi? 🤔️️️️️️

🔥 GDG Tashkent-dan uzoq tanaffusdan keyingi birinchi kuzgi Web Dev Meetup #3 ni kutib oling!

Kelayotgan shanba kuni yurtimiz va dunyoning top kompaniyalarida faoliyat yuritadigan web-dasturchilar bilan Web Dev Meetup o’tkazamiz.

💥 Spikerlar ichida:
- Ravshan Samandarov, Oxagile;
- Diyorbek Sadullaev, Pinterest;
- Doniyor Yusupov, Uzum Market;
- Umar Sadullaev, Unicon Soft;

Tadbir to’liq o’zbek tilida bo’ladi!

👀 Sana: 7-Sentabr, 2024
🕙 Vaqt: 14:00
📍 Joy: IT Park, Muminov 7/1

Ishtirok etish narxi: BEPUL.

🎟 Ro'yxatdan o'tish uchun havola:
https://gdg.community.dev/events/details/google-gdg-tashkent-presents-web-dev-meetup-3/

* Joylar soni chegaralanganligi tufayli "First come first serve" qoidalari amal qiladi. Joy sig’imi 180 kishi. Tadbir online translatsiya qilinadi.

@gdgtashkent

📚 Bugun mutolaa.com ofisida mehmon bo’ldik, 1.7 million kitob, 1298 audio kitob va 820,000 foydalanuvchiga ega - ular orasida men ham bor. Ajoyib jamoa, o’zgacha muhit.

📍 Kitoblar orasida kofe ichib, kod yozmoqchi bo’lsangiz:
maps.app.goo.gl/CwdkC3K5efRTGLg26