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

Intervyuda yolg'on ishlatish

Ko'p intervyularda o'zim guvohi bo'ladiganim - kandidatlar yolg'on ishlatishi.

Bilasizmi nima? Intervyuverlarni katta qismi yolg'onni tez payqaydi, aynisa texnik tomondan yolg'on bo'lsa.

O'zingizni sharmanda qilgandan ko'ra, "Bu mavzuni chuqurroq o'rganib chiqishim kerak ekan", deganingiz ancha yaxshiroq.

Yaqindagina shunday kandidatni intervyu qildim. Texnik savollarni o'zida yolg'on ishlatyaptida 😅 "Falon narsa nima?" desam, tikkasiga "ijod" qilyapti. Shu kandidat esimda qolib ketdi. Keyingi safar topshirsa ham biroz ikkilansam kerak...

#tavsiya #interview

@JoshDeveloper

Eng birinchi ish suhbatimni yaxshi eslayman. 7-8 oylik tajribam bilan middle frontend pozitsiyaga rezyume topshirgandim. Rezyumeni rosa bo'rttirib yozib tashlaganman:
- Tajriba 2 yil
- ES6+, Node.js
- CSS3, HTML5
- MySQL, PHP,...

😬

Intervyuga kirganimda 3 ta kishi meni savol-javob qilishgan.
- CSS variable'lar qanday ishlatishni tushuntirib berolmaganman.
- Import bilan require farqlarini sanab berolmaganman.
- Async/await qachon kerakligini bilmaganman.
- JSdagi data type'larni sanab berolmaganman.
- JS engine nimaligini, qanday engine'lar borligini bilmaganman. (Chunki barcha JS engine'larni bilaman deb yozib qo'ygandim rezyumeda 🥲)

Xullas rezyumedagi har bir punktni so'roq qilishgan. Oxirida darajang "novichok",
portfolio projectlaringni o'zing qilmagansan deb, xayrlashishgan.

Tashqariga chiqqandagi ahvolimni tasavvur qilavering. Hozir eslasam yuragim yomon bo'ladi. 🥲

O'sha kuni suhbatdan chiqib, bekatda avtobus kutib o'tirar ekanman, qanchalik bilimsiz va tajribasiz ekanimni anglaganman. Chunki shu paytgacha o'rganganlarim ko'p, ko'p narsa qo'limdan keladi deb yurardim.

Lekin taslim bo'lishni xohlamadim. Chunki haqiqatga tik qarash kerakligini bilardim. O'sha kuniyoq menga berilgan har bir savolni javobini o'rganishga tushdim. Wikipedia, har xil maqolalar, video darsliklardan rezyumedagi yolg'onlarni chinga aylantirishga tushdim. Rezyumeyimni sal kamtarroq holatga ham keltirib oldim. Orada 5-6 marta boshqa suhbatlarda bo'ldim. Garchi suhbatlarda endi yaxshiroq javob berolsamda, tajribam hali ko'p emasligi uchun ishga olishmasdi.

Shu sabab qo'shimcha loyihalar, iloji boricha murakkabroq bo'lgan web dasturlar yaratishga bel bog'laganman. Ulardan biri MusicSpider, Chrome uchun musiqa pleyer dastur edi. 1 kunda, Garage48 hakatonida yasalgan va bizga 2-o'rinni olib bergan loyiha.

Birinchi suhbatimdan keyin tahminan 5-6 oy o'tgachgina eng birinchi ishimni topganman. Reactni u paytlari endi o'rganishni boshlagandim. Ishim esa React Native'da ishlash edi😬. 2 kun dokumentatsiya o'qib, ertasi mobil ilova qurishga tushib ketganman. Ana shunaqa🙂