Peace of Code
رفتن به کانال در Telegram
Sharing good stuff related Angular, Vue, Nuxt, nx and everything related to frontend
نمایش بیشتر275
مشترکین
اطلاعاتی وجود ندارد24 ساعت
-87 روز
-830 روز
آرشیو پست ها
\n\n\n\n\nsrc Import lar bn:\n\n\n\n\n\n\nEhtiyot bo'ling! O'zingizni Angular 😎 da yozayotgandek xis qilishingiz mumkin😅\n\nhttps://t.me/peaceofcode #vue #sfc","datePublished":"2024-07-11T08:19:40Z","dateModified":"2024-07-11T08:19:40Z","author":{"@type":"Organization","name":"Peace of Code","url":"https://telemetr.io/fa/channels/1782368017-peaceofcode","image":"https://img.tlmtr.io/c/1WCDlf/5426863364191148472?ty=x"},"publisher":{"@type":"Organization","name":"Peace of Code","url":"https://telemetr.io/fa/channels/1782368017-peaceofcode","image":"https://img.tlmtr.io/c/1WCDlf/5426863364191148472?ty=x"},"commentCount":10,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":362},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":7},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":10}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1782368017-peaceofcode/posts/9","url":"https://telemetr.io/fa/channels/1782368017-peaceofcode/posts/9","mainEntityOfPage":"https://telemetr.io/fa/channels/1782368017-peaceofcode/posts/9","headline":"🕺 Vue Developer Roadmap Quyidagi sahifa (link)da Vue stack*ida yaxshi dasturchi bo'lish uchun kerak bo'lgan t…","articleBody":"🕺 Vue Developer Roadmap\n\nQuyidagi sahifa (link)da Vue stack*ida yaxshi dasturchi bo'lish uchun kerak bo'lgan texnologiyalar, toollar va mavzular keltirilgan.\nhttps://roadmap.sh/vue\n\nBiz esa shu roadmap bo'yicha postlar qo'yib boramiz. Maqsad - o'zingiz ishlatayotgan framework(Vue) вф maksimal darajada qo'limizdan kelgancha har bir muammo (issue) ga Best practice* larni ishlatgan holda yechim bera olishimiz kerak.\n\nFundamental Topics lardan boshlaymiz. Siz mavzularni qanday formatda yoritib berishimni hohlardingiz? (By default: postda tushintirish va code dan misollar ko'rinishida bo'ladi) Kommentda shu haqida fikringizni qoldiring.\n\nStack* - ma'lum bir core framework orqali dastur yasashda shu framework atrofidagi texnologiyalar, toollar, ecosystema nazarda tutiladi.\nBest practice* - ma'lum bir muammoni yechishda eng effektiv va anti-pattern lardan holi bo'lgan strategiya nazarda tutiladi.\n\nhttps://t.me/peaceofcode #roadmap #vue","datePublished":"2024-07-10T07:56:09Z","dateModified":"2024-07-10T07:56:09Z","author":{"@type":"Organization","name":"Peace of Code","url":"https://telemetr.io/fa/channels/1782368017-peaceofcode","image":"https://img.tlmtr.io/c/1WCDlf/5426863364191148472?ty=x"},"publisher":{"@type":"Organization","name":"Peace of Code","url":"https://telemetr.io/fa/channels/1782368017-peaceofcode","image":"https://img.tlmtr.io/c/1WCDlf/5426863364191148472?ty=x"},"commentCount":2,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":323},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":2}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1782368017-peaceofcode/posts/8","url":"https://telemetr.io/fa/channels/1782368017-peaceofcode/posts/8","mainEntityOfPage":"https://telemetr.io/fa/channels/1782368017-peaceofcode/posts/8","headline":"👨💻 Nice content is on the way 😋 Foydali postlar yozilish jarayonida, ungacha eski meetup larda qatnashgan vi…","articleBody":"👨💻 Nice content is on the way 😋\n\nFoydali postlar yozilish jarayonida, ungacha eski meetup larda qatnashgan videolarimdan bahramand bo’lib turing.\n\nWeb dev event 2022\nhttps://www.youtube.com/live/yuphof3PYVI?si=KBHP0p-FwWRYW0G8\n\nFirebase Summit 2020\nhttps://www.youtube.com/live/K87Q6Dfaawc?si=6L2GEskefbOjBnOL\n\nOrada ma’lum bir sabablarga ko’ra qatnashmay qo’ydim. Hudo holasa keyingi meetuplarda aktivlashishga harakat qilamiz 💪\n\nP.s. Videodagi ma’lumotlar eskirgan bo’lishi mumkin (aniq) 🫠","datePublished":"2024-07-09T16:08:03Z","dateModified":"2024-07-09T16:08:03Z","author":{"@type":"Organization","name":"Peace of Code","url":"https://telemetr.io/fa/channels/1782368017-peaceofcode","image":"https://img.tlmtr.io/c/1WCDlf/5426863364191148472?ty=x"},"publisher":{"@type":"Organization","name":"Peace of Code","url":"https://telemetr.io/fa/channels/1782368017-peaceofcode","image":"https://img.tlmtr.io/c/1WCDlf/5426863364191148472?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":360},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":4},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/fa/channels/1782368017-peaceofcode/posts/7","url":"https://telemetr.io/fa/channels/1782368017-peaceofcode/posts/7","mainEntityOfPage":"https://telemetr.io/fa/channels/1782368017-peaceofcode/posts/7","headline":"👋 Assalamu alaykum, \"yet another developer blog\" ga xush kelibsiz! Mening ismim Doniyor, 6 yillik tajribaga e…","articleBody":"👋 Assalamu alaykum, \"yet another developer blog\" ga xush kelibsiz!\nMening ismim Doniyor, 6 yillik tajribaga ega Frontend dasturchisiman. Hozirgi kunda Uzum kompaniyasida Senior Frontend dasturchi bo'lib ishlayman. Asosan Vue va Angular stackida faoliyat yuritib boraman.\n\n🌟 Nimalarni Kutishingiz Mumkin:\nUshbu blogda frontend dasturlash bo'yicha maslahatlar, eng yaxshi tajribalar, qiziqarli faktlar va loyihalarimdan olingan tajribalarimni bo'lishaman. Siz boshlang'ich dasturchi bo'lasizmi yoki tajribali dasturchi bo'lasizmi, hammaga nimadir topiladi.\n\nO'quv qo'llanmalar, muhokamalar va web dasturlash sohasidagi so'nggi yangiliklar uchun kuzatib boring. Keling, birgalikda o'samiz va o'rganamiz!\n\nO'zingizni tanishtiring va qiziqayotgan mavzularingizni bo'lishing.","datePublished":"2024-07-09T14:07:29Z","dateModified":"2024-07-09T14:07:29Z","author":{"@type":"Organization","name":"Peace of Code","url":"https://telemetr.io/fa/channels/1782368017-peaceofcode","image":"https://img.tlmtr.io/c/1WCDlf/5426863364191148472?ty=x"},"publisher":{"@type":"Organization","name":"Peace of Code","url":"https://telemetr.io/fa/channels/1782368017-peaceofcode","image":"https://img.tlmtr.io/c/1WCDlf/5426863364191148472?ty=x"},"commentCount":10,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1395},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":9},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":10}]}}]}
Shanba kunidagi GDG Web dev event da qilgan prezentatsiyamiz.
Mavzu: 🤩 Leveraging the Power of Nuxt Layers
Speaker: Doniyor Yusupov
p.s. Layerlar haqida ko'p narsalarni gapirishga ulgurmadik, vaqt kam bo'lgani sababli. Ular haqida keyingi postlarda qo'yib borishga harakat qilamiz.
#nuxt #layers
Repost from GDG Tashkent
+4
🔥 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
Technical problems 🛠️
Akalar uzr, Web dev event posti hali tayyor emas ekan. Shu uchun postni o’chirvordim. Tayyor bo’lishi bilan share qilaman 🙏
Biron kishi bilan baxslashmoqchi bo’lsangiz oldin o’zingizga savol bering:
“Bu odam turli nuqtai nazarni qabul qilish uchun aqliy jihatdan yetukmi?”.
Unday bo’lmasa baxslashishdan foyda yo’q.
🕺 Computed methodi
Sizlar bilan bugun vue dagi computed methodi qanday ishlashini va qanday holatlarda ishlatish yoki ishlatmaslikni ko'rib chiqamiz.
Happy coding! 💻✨
#vue #computed
https://teletype.in/@dyusupov/vue-computed
Highly recommended 🔥
Kelayotgan yakshanba 21:00 da Umar mock interview topshirmoqda.
Hammaga foydali ma’lumotlar bo’ladi degan umiddaman.
https://t.me/JoshDeveloper/2416
O'ziga yoqmaydigan ishda ishlab yurgan va "oldinroq boshqa ishga o'tsam bo'larkan, endi shuncha ketqizgan vaqtim zoye bo'ladi" deb shu ishdan ketolmay yurgan birodarim:
"Daraxt ekishning eng yaxshi vaqti yigirma yil oldin bo'lishi mumkin edi, lekin ikkinchi eng yaxshi vaqt aynan hozirdir."
@peaceofcode
🚀 JavaScript-dan TypeScript-ga o'tish: Tips and tricks
JavaScript kodingizni TypeScript-ga o'tkazishga tayyormisiz? Mana sizga o'tishni osonlashtirish uchun amaliy maslahatlar:
1. Asta-sekin boshlang 🐢
◦ .js fayllarini .ts ga qayta nomlashdan boshlang
◦ JS va TS-ni aralashtirish uchun "allowJs" kompilyator parametridan foydalaning
2. strict mode ni yoqing 🔒
◦ tsconfig.json faylida "strict": true ni o'rnating
◦ Xatolarni bittadan hal qiling
3. Type annotation lar sizning do'stingiz 🤝
◦ Funksiya parametrlari va return qiymatlariga type larni qo'shing
◦ Ob'ekt shakllari uchun interfeyslardan foydalaning
4. Type inference dan foydalaning 🧠
◦ Iloji boricha TypeScript-ga type larni o’zi aniqlashiga ruxsat bering
◦ Faqat zarur bo'lganda aniq type larni ko'rsating
5. Moslashuvchanlik uchun union type lardan foydalaning 🔀
◦ Masalan,
function printId(id: number | string) { ... }Hamkasb: Man sani birinchi marta ishda kulayotganingni ko’ryapman, nima boldi?
Men: Men ishdan ketayapman
https://shorturl.at/N5yUw
#burn_out
Peace of Code
🛠 Code quality, maintainability and security
Static code analysis bu code ni ishga tushirmasdan analiz qilish protsessi hidoblanadi. Analiz maxsus Tool lar orqali source code ni scan qilib potensial xatolar, code smells, zaifliklar va coding standart dan chetga chiqilgan holatlarni aniqlash uchun mo’ljallangan. Maqsad code sifatini, texnikaviy ta’minotini (maintainability) va havfsizligini code ni ishga tushirishdan oldin ta’minlashdan iborat.
🧐 Nega static code analyzer lar kerak:
1. Early Error Detection: Statik analiz sintaksis xatolar, typelarning mos kelmasligi va boshqa muammolarni early development (vaqtliroq) paytida aniqlashga yordam beradi, bu esa productionga borib tushadigan xatolar sonini kamaytiradi.
2. Code Quality: Code standartlari va best practice ni ishlatish orqali statik tahlil vositalari kod bazasining izchilligini (maintainability) saqlashga yordam beradi, bu esa jamoalar bir-birining kodini tushunishda va hamkorlik qilishini osonlashtiradi.
3. Security: Frontend kod Cross-Site Scripting (XSS) yoki xavfsiz bo'lmagan API requestlari kabi muammolarga duch kelishi mumkin. Statik analiz bu xatarlarini haqiqiy tahdidlarga aylanishidan oldin aniqlashga yordam beradi.
4. Performance Optimization: Ba'zi statik analiz tool lari web-ilovalarning ishlashiga salbiy ta'sir qilishi mumkin bo'lgan samarasiz kod patternlarini aniqlay oladi.
5. Maintainability: Code smells (Juda murakkab funksiyalar yoki takrorlanadigan (duplicate) kodlar) larni aniqlash orqali statik analiz toza, texnikaviy ta'minotni (maintainability) osonroq qiladigan kodni rag'batlantiradi, bu esa kodni refaktor qilish va kengaytirishni osonlashtiradi.
Frontend dasturchilari uchun ESLint, Stylelint va Prettier kabi vositalar statik kod tahlili uchun keng qo'llaniladi. Bu vositalar JavaScript, CSS va boshqa frontend kodlarida best practice ni qo'llashga yordam beradi, bu esa developmentni silliq va samaraliroq qiladi.
Sonarlint degan juda ham powerful analyzer ham bor, ammo u haqida batafsil keyingi postlarimizda gaplashamiz. Stay tuned... 👋
https://t.me/peaceofcode #tooling #static_code_analysis
Current Market rate for React developer 😅
Bu albatta hazil. Vakansiya notog’ri post qilingan deb umid qilamiz😅
Upd. Balki har bir qator code uchun shunchadan to’lar🤔
#shit_vacancy #react
Repost from Kamron Fozilov
Youtube kanalimizda Frontend bo'yicha Mock Interview boshlanyapti. Marhamat, efirga qo'shiling.
Chatga qo'llab-quvvatlab yozish esdan chiqmasin 🙂
👉 https://www.youtube.com/live/LSf-MB_vf6Y?si=3rdbUAS8iuaOruYJ
🕺 Suspense component in Vue ⏳
O’tgan postlarimizni birida bir do’stimiz global loading haqida so’radilar:
vue da global loader qilish qanchalik to'g'ri bir page dan boshqa page ga o'yganda loadiing ni true qilib axios interceptors request kelsa loading ni false qilib qo'yish ?Men: Loading ni page levelda boshqarganiz yaxshi dedim, ammo qanday qilib to’g’ri boshqarish mumkinligini alohida post qilib yozishga ahd qildim. Bu postimiz ham uzunroq bo’ladi, shuning uchun quyidagi havolaga o’tib mazza qilib o’qishingiz mumkin. 🔗 https://teletype.in/@dyusupov/loading-experience-with-suspense-component
Kanalga ozroq Humor (Hazil) qo’shmasak zerikib qolyapmiz.😏
P.s. 🐍 chi do’stlaringizga jo’natib qo’ying)
P.s.s. Python o’rniga Javascriptni qoysangiz ham bo’ladi😅
https://www.ddinstagram.com/reel/C78rekyt--I/?igsh=cHJ5Nm15NnB2bDNy
🕺 Async Components in Vue
Bu safar Vue ning defineAsyncComponents() funksiyasini yoritib berishga harakat qildim.
Ma'lumot ko'p bo'lgani sababli teletype.in da yozishga qaror qildim.
Hammasi sizni o'qishingizga oson bo'lishi uchun qilindi.
🔗 https://teletype.in/@dyusupov/Vue-Async-Components-07-11
Bu teletype.in dagi birinchi postim, shuning uchun kamchiliklari bo'lishi mumkin aniq. 🙃
Qattiq pushkaga olmangiz iltimos 👋
https://t.me/peaceofcode #vue #asyncComponents
🕺 Vue Single-File Components (SFC)
Odatta biror bir component kerak bo'lsa .vue file ochamiz va ba'zida ko'pincha bizni componentimiz juda katta bo'lib ketadi va bu componentni Not Readable (O'qishga qiyin) qilib qo'yadi.
Ha to'g'ri biz componentni yana boshqa mayda componentlarga bo'lishimiz mumkin (va shunday qilish kerak). Ammo bazida component ni Functionality (funksionalligi) ko'pligidan qancha bo'lsak ham baribir kichiklashtirishni imkoni bo'lmasligi mumkin.
* Best practice: SFC component dagi kod 200-300 qatordan oshmasligi kerak. Ammo dasturchilar o'zaro boshqa qiymatga kelishishi ham mumkin. Masalan bizni team da bu son 150 qator, undan uzunini qisqartirish zarur.
Qisqartirishni iloji bo'magan taqdirda bizga src Import lar qo'l keladi.
src Imports:
src atributidan foydalanib, komponentlarni bir nechta fayllarga ajratish. Bunda siz ./ path larni va hato npm dependency larni ham ishlatishingiz mumkin.
Odatta:
<template>
<div class="someClass">{{ text }}</div>
</template>
<script setup>
const text = ref('Hello world!')
</script>
<style>
.someClass {
color: "#111";
}
</style>
<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>
🕺 Vue Developer Roadmap
Quyidagi sahifa (link)da Vue stack*ida yaxshi dasturchi bo'lish uchun kerak bo'lgan texnologiyalar, toollar va mavzular keltirilgan.
https://roadmap.sh/vue
Biz esa shu roadmap bo'yicha postlar qo'yib boramiz. Maqsad - o'zingiz ishlatayotgan framework(Vue) вф maksimal darajada qo'limizdan kelgancha har bir muammo (issue) ga Best practice* larni ishlatgan holda yechim bera olishimiz kerak.
Fundamental Topics lardan boshlaymiz. Siz mavzularni qanday formatda yoritib berishimni hohlardingiz? (By default: postda tushintirish va code dan misollar ko'rinishida bo'ladi) Kommentda shu haqida fikringizni qoldiring.
Stack* - ma'lum bir core framework orqali dastur yasashda shu framework atrofidagi texnologiyalar, toollar, ecosystema nazarda tutiladi.
Best practice* - ma'lum bir muammoni yechishda eng effektiv va anti-pattern lardan holi bo'lgan strategiya nazarda tutiladi.
https://t.me/peaceofcode #roadmap #vue
👨💻 Nice content is on the way 😋
Foydali postlar yozilish jarayonida, ungacha eski meetup larda qatnashgan videolarimdan bahramand bo’lib turing.
Web dev event 2022
https://www.youtube.com/live/yuphof3PYVI?si=KBHP0p-FwWRYW0G8
Firebase Summit 2020
https://www.youtube.com/live/K87Q6Dfaawc?si=6L2GEskefbOjBnOL
Orada ma’lum bir sabablarga ko’ra qatnashmay qo’ydim. Hudo holasa keyingi meetuplarda aktivlashishga harakat qilamiz 💪
P.s. Videodagi ma’lumotlar eskirgan bo’lishi mumkin (aniq) 🫠
👋 Assalamu alaykum, "yet another developer blog" ga xush kelibsiz!
Mening ismim Doniyor, 6 yillik tajribaga ega Frontend dasturchisiman. Hozirgi kunda Uzum kompaniyasida Senior Frontend dasturchi bo'lib ishlayman. Asosan Vue va Angular stackida faoliyat yuritib boraman.
🌟 Nimalarni Kutishingiz Mumkin:
Ushbu blogda frontend dasturlash bo'yicha maslahatlar, eng yaxshi tajribalar, qiziqarli faktlar va loyihalarimdan olingan tajribalarimni bo'lishaman. Siz boshlang'ich dasturchi bo'lasizmi yoki tajribali dasturchi bo'lasizmi, hammaga nimadir topiladi.
O'quv qo'llanmalar, muhokamalar va web dasturlash sohasidagi so'nggi yangiliklar uchun kuzatib boring. Keling, birgalikda o'samiz va o'rganamiz!
O'zingizni tanishtiring va qiziqayotgan mavzularingizni bo'lishing.
