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

:fire: :grinningface:

Boshlayapmiz! 🙂

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.

📢 Jonli dars: React.js loyihalar qanday ishlaydi?

👨‍🏫Mentor:
Diyorbek Sadullaev - 7 yillik tajribaga ega, Pinterest kompaniyasida senior dasturchi.

🎯 Nimalarni o'rganamiz?

React.js loyihani sozlash
- Build tools
- Production va Development muhitlari farqi.
- Preprotsessorlar vazifalari: source code vs output code
- Runtime environments: Node.js va browser o‘rtasidagi farqni tushunamiz.

Tuzilma va arxitektura
- Kengayuvchan va moslashuvchan strukturalar.
- Modul/fayllarni tartibga solish.
- Ko’p uchraydigan muammolar oldini olish.

🔑 Kimlar uchun?
- React.js ni o’rganayotgan barchaga.
- Mavjud bilimlarini yanada mukammallashtirishni istaganlar.
- React.js loyihalarini professional darajada tashkil qilishni o‘rganishni xohlaydiganlar.

⏰ 23-yanvar 19:00, online
💰 42.000 so'm
💻 Ro‘yxatdan o‘tish: https://rb.gy/f69791

‼️ Joylar soni chegaralangan: Darsga faqat birinchi 15 kishi qatnasha oladi.

@qirikki

42 platformasida online darslarni boshlayapmiz!

Bilaman, ko'pchilik 42.uz da frontend bo'yicha to'liq kurs kutayapti. Men ham o'z tajribamni boshqalar bilan samarali ravishda ulashishni xohlayman. Shu sabab online darslar orqali auditoriyaga real loyihalar ustida ishlab bilim ulashmoqchiman.

Bu online darslar barcha uchun ochiq. Va albatta, bu online darslar asosida, to'liq frontend kurslarini chiqaramiz. 🙂

Kun masalasi

Konsolga "Salom!!!" matni chiqishi uchun x qiymati qanday bo'lishi kerak?

Maxsus tip koersiyasi (Custom type coercion)

Yuqoridagi shartli ifodani bir ko'rganda ishlamaydi deb o'ylash tabiiy. Chunki Qanday qilib bir o'zgaruvchi bir vaqtda 3 xil qiymatga ega bo'lishi mumkin?

Bu albatta mumkin emas, agar o'zgaruvchi primitiv bo'lsa! Shuning uchun o'zgaruvchini dinamik ravishda primitiv qiymat qaytaruvchi obyektga aylantirish yechim bo'ladi.

Dinamik ravishda primitiv qiymat qaytarish

Buning uchun biz obyektimizga"valueOf" yoki "toString" metodlarini qo'shishimiz kerak bo'ladi. "[Symbol.toPrimitive]" orqali qo'shganimizda prioriteti ancha baland bo'ladi. Ya'ni, agar obyektda 3 ta metod ham bo'lsa JS interpretator

1-"[Symbol.toPrimitive]"
2-"valueOf"
3-"toString()"

metodlariga nisbatan tekshiradi.

Va albatta, bular "==" operatorini qo'llaganimizda ro'y beradi. :)

@brogrammist

Aytgancha, hech qachon bunday kod yozmang!

Bularning hammasi JavaScript bo'yicha bilimlarni charxlash, interpretator o'ziga xosliklarini o'rganish uchun mashq. Intervyularda ham shunday savollar tushib qolishi mumkin. Lekin o'zim intervyularda ko'rmaganman.

Aytganimdek, normal holatda hech qachon bunday kod yozilmaydi. Chunki bunday holatning bo'lishi normal holatda iloji yo'q!

Frontend arxitekturasi

Ko‘pchilik frontend arxitekturasini shunchaki papka yoki repozitoriy fayllari tuzilmasi deb o‘ylaydi. Lekin frontend arxitekturasi ancha kengroq tushuncha. Bunga kiradi:

- dastur xususiyatlarini tahlil qilish

- asosiy komponentlarini aniqlash (aynan UI komponentlari emas!)

- yaxshi “parchalangan” (decoupled) modullarga ajratish

Shular dastur mustahkam bo'lishi va ishonchli ishlashini ta’minlaydi. 

Yaxshi arxitektura quyidagilarga e’tibor qaratadi:

- tizim vazifalarining aniq taqsimlanishi (clear separation of concerns)

- kommunikatsiya shakllarining aniq belgilanishi (well-defined communication)

- bog‘lanishlar boshqaruvining moslashuvchanligi (flexible dependency management)

Kodingiz hammasi bitta faylda bo‘lmaydimi! Uning ichki tuzilishi, modullari va o‘zaro aloqalari puxta o‘ylangan bo‘lsa, loyihangiz baribir yaxshi arxitekturaga ega hisoblanadi.

Frontend arxitekturada yana nimalarga e’tibor berish kerak? Fikrlaringizni ulashing 👇

@brogrammist

Bu narsa ochiq oydin lekin ko‘pchilik noto‘g‘ri qiladi.

Dasturchi sifatida kuniga juda ko‘p qarorlar qabul qilamiz. Qanday qilib shu kodni yozish kerak, qanday qilib bu dokumentga o‘ztartirish kiritish kerak, qanday qilib bu loyihaning arxitekturasini yaratish kerak va hokazo.

Natijada bu qarorlar hamkasblarimiz bilan muhokamalarga olib keladi. Bu tabiiy holat. Siz o‘z fikringizni bildirasiz, ular esa o‘z fikrlarini bildiradi. Mana shu vaziyatda o‘zingizni fikringizni to‘g‘ri tarzda bildirish juda nozik masala.

O‘zingizni noto‘g‘ri ifodalasangiz yoki hamkasblaringiz sizning fikringizga qo‘shilmagani uchun jahlingiz chiqib ketsa, bu yaxshi bo‘lmagan natijalarga olib kelishi mumkin. 

Shuning uchun ham muhokama qilishning eng zo‘r usuli bu shaxsiy fikrdan ko‘ra ko‘proq “data” ga ya’ni aniq ma’lumotlarga asoslangan holda yuritish. Bildirayotgan fikringizni data orqali isbotlab bera olsangiz shundagina rostdan ham sizning argumentlaringiz kuchli bo‘ladi. Hech kim sizdan xafa bo‘lish huquqiga ham ega bo‘lmaydi. Chunki sizning fikrlaringizni isbotlab beradigan dalillar mavjud.

Data is king.

@jakhonrakhmonov

Brauzerni buzgan CSS funksiya

8 yildan beri frontendchiman. Ancha-muncha "bug"larni ko'rdim va hali ko'rmaganlarim qancha. Lekin ular orasida shu paytgacha ajralib turadiganlaridan biri bor. Har safar texnik suhbatlarda "siz duch kelgan eng qiziq bug haqida gapiring" deb so'rashsa, shunisini gapirib beraman.

To'liq: https://www.diyorbek.blog/blog/brauzerni-buzgan-css-funksiya

@brogrammist

Yaqinda "React.js va Autentifikatsiya" navzusida jonli dars qilgandik. Agar kimlar uchundir qiziq bo'lsa, loyiha kodi:

https://github.com/diyorbek/auth-dashboard

📢 Jonli dars: React.js’da holat saqlanishi va sinxronizatsiyasi

👨‍🏫Mentor:
Diyorbek Sadullaev - 7 yillik tajribaga ega, Pinterest kompaniyasida senior dasturchi.

🎯 Nimalarni o'rganamiz?

- URL parameterlari orqali holatni boshqarish
- Deep linking
- LocalStorage bilan holatni saqlash
- Brauzer tablari aro sinxronizatsiya
- Optimizatsiya va “best practices”

⏰ 16-mart 15:00(online)
💰 65.535 so‘m
💻 Ro‘yxatdan o‘ting

‼️ Joylar soni chegaralangan: faqat 24 kishi qatnasha oladi!

@qirikki

Waymo(Google)’dan offer oldim va …

Vakansiya “C++ Backend” roli uchun edi! Men esa frontendchi! 😬

https://www.diyorbek.blog/blog/waymodan-offer-oldim

@brogrammist

Deno bilan oxirgi 2-3 oydan beri har xil dasturlar yasab, uning imkoniyatlarini o'rganayotgandim. Node.js dan doimiy foydalanib kelgan odam uchun Deno juda katta yengillik! Maza qiladim odam.

Chunki:
- package.json yo'q!
- node_modules yo'q!
- TypeScript "bez otkaz" ishlaydi.
- Server yozish oson.
- STD kutubxonasi va dokumentatsiyalar yaxshi
- WebAPI lar bilan deyarli bir xil.

Lekin bir narsadan hafsalam juda pir bo'ldi. Fayl yuklaydigan server yasadim. FormData formatida keluvchi faylni o'qish juda sekin ishlar ekan. To'grirog'i Deno ning FormData bilan ishlovchi standart kutubxonasi juda rasvo ekan.

20MB faylni ~100 sekund parse qilsaya!

Ishonmasdan, xuddi shunday serverni Node.js bilan Formidable kutubxonasini ishlatib yozib ko'ridim. Xuddi o'sha 20MB fayli bor FormDatani o'qish ~200ms vaqt olyapti xolos!

Exxx Deno... Hali ba'zi narsalar uchun yetilmagan ekansan. 🥲

@brogrammist

Stress testing qilib ko'rdim. Bir vaqtning o'zida 100 so'rovnoma jo'natdim. Node.js server uzog'i bilan ~20 sekund vaqtda javob beryapti. Xuddi shu ishni qiladigan Deno server esa ~90 sekund vaqt olyapti!

Deno 4 barobar sekinroq ishlayapti Node.js dan.

P.S. Server o'zi og'ir operatsiyani bajaryotgani uchun 20-30 sekund qoniqarli natija.

Yaxshi sayt ekan:
https://www.patterns.dev/

📢 Jonli dars: ReactJS va JavaScript dizayn patternlari

👨‍🏫Mentor:
Diyorbek Sadullaev - 7 yillik tajribaga ega, Pinterest kompaniyasida senior dasturchi.

🎯 Nimalarni o'rganamiz?

- Enkapsulyatsiya va SOC
- Singleton va Modul patternlari
- Observer pattern va Context API

⏰ 23-mart 15:00(online)
💰 65.535 so‘m
💻 Ro‘yxatdan o‘ting

‼️ Joylar soni chegaralangan: faqat 24 kishi qatnasha oladi!

@qirikki