Peace of Code
@peaceofcode
175 subscribers
9 photos
2 videos
1 file
19 links
Sharing good stuff related Angular, Vue, Nuxt, nx and everything related to frontend
Download Telegram
About
Blog
Apps
Platform
Join
Peace of Code
175 subscribers
Peace of Code
👨‍💻 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) 🫠
Please open Telegram to view this post
VIEW IN TELEGRAM
YouTube
Web Dev Meetup
🔥 GDG Tashkent-dan uzoq kutilgan Web Dev Meetup!

Biz GDG Tashkent da yangi yo‘nalish – Web Community ochilishini mamnuniyat bilan e’lon qilamiz.

Kelayotgan shanba kuni yurtimizning top kompaniyalarida faoliyat yuritadigan web-dasturchilari bilan birinchi…
👍4
433 viewsDoniyor, 
Peace of Code
🕺 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
Please open Telegram to view this post
VIEW IN TELEGRAM
roadmap.sh
Vue Developer Roadmap: Learn to become a Vue developer
Everything that is there to learn about Vue and the ecosystem in 2026.
👍5🔥3
393 viewsDoniyor, edited  
Peace of Code
🕺 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>


src Import lar bn:

<template src="./template.html"></template>
<style src="./style.css"></style>
<script src="./script.js"></script>


Ehtiyot bo'ling! O'zingizni Angular 😎 da yozayotgandek xis qilishingiz mumkin😅

https://t.me/peaceofcode #vue #sfc
Please open Telegram to view this post
VIEW IN TELEGRAM
Telegram
Peace of Code
Sharing good stuff related Angular, Vue, Nuxt, nx and everything related to frontend
👍4😁4
440 viewsDoniyor, edited  
Peace of Code
🕺 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
Please open Telegram to view this post
VIEW IN TELEGRAM
Teletype
Async Components in Vue
Katta web ilovalarni dasturlashda, ularning tez yuklanishi va interaktiv elementlarining javob berish tezligi UX ga katta ta\'sir...
🔥9
707 viewsDoniyor, edited  
Peace of Code
InstaFix
@egor_wexler
Когда разработчик перепил

#айти #разработка #веб #вебразработка #программистышутят #программирование #пайтон #питон #типизация #си #айтиюмор #айтимемы #озвучка #ai #ии...
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
Please open Telegram to view this post
VIEW IN TELEGRAM
😁8
543 viewsDoniyor, 
Peace of Code
🕺 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
Please open Telegram to view this post
VIEW IN TELEGRAM
Teletype
Vue Suspense component ⏳
Kontent yuklanishini kutish (Content loading) - bu web UX ning ajralmas qismidir. Internet tezligini o\'ynashi hatto eng tezkor...
🔥8👍4
851 viewsDoniyor, edited  
Peace of Code
Forwarded 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
YouTube
FRONTEND | MOCK INTERVIEW | UZUM TEAM LEAD BILAN BIRGA | 1-SON
Assalomu alaykum. Frontend bo'yicha Mock Interviewga xush kelibsiz. Ushbu interviewda nomzodimiz Xudoyorov Shahriyordan Uzum kompaniyasida Team Lead lavozimida ishlovchi Shahzod Tursunov interview oladi. O'ylaymanki, suhbat siz uchun foydali bo'ladi.

Shahzod…
🔥3❤2👍1
377 viewsDoniyor, 
Peace of Code
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
🔥6🤣4
563 viewsDoniyor, edited  
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
Please open Telegram to view this post
VIEW IN TELEGRAM
Telegram
Peace of Code
Sharing good stuff related Angular, Vue, Nuxt, nx and everything related to frontend
👍4🔥2
427 viewsDoniyor, 
Peace of Code
InstaFix
@paddyjobsman
True joy #workmeme #memes #funny #worklife #relatable #workmemes
Hamkasb: Man sani birinchi marta ishda kulayotganingni ko’ryapman, nima boldi?

Men: Men ishdan ketayapman

https://shorturl.at/N5yUw

#burn_out
Peace of Code
😁7👍2🌚1
450 viewsDoniyor, 
Peace of Code
🚀 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) { ... }


6. Vaqtincha "any" dan foydalaning 🏗️
◦ Dastlabki o'zgartirishda xatolarni chetlab o'tish uchun "any" dan foydalaning
◦ Asta-sekin "any" ni to'g'ri type lar bilan almashtiring

7. TypeScript-specific feature lardan foydalaning 💡
◦ Nomlangan konstantalar to'plami uchun enumlardan foydalaning
◦ Qayta ishlatiladigan komponentlar uchun genericlardan foydalaning

8. Deklaratsiya fayllarini unutmang 📄
◦ Type lari bo'lmagan third party kutubxonalar uchun .d.ts fayllarini yarating
◦ Mashhur kutubxonalar uchun DefinitelyTyped (@types) dan foydalaning

9. TypeScript Playground dan foydalaning 🎮
◦ TypeScript feature larni onlayn sinab ko'ring
◦ O'rganish va tezkor testlar uchun ayni kerakli narsa

10. Migratsiya vositalari bilan avtomatlashtiring 🔧
◦ ts-migrate yoki boshqa avtomatlashtirilgan konvertatsiya vositalarini sinab ko'ring
◦ AI tool lar orqali tez natijalarga erishing, ammo javoblarni albatta tekshiring. AI har doim ham typelarni to’g’ri yozib bermaydi
◦ Doimo natijani ko'rib chiqing va takomillashtiring

Esda tutingki, TypeScript-ga o'tish - bu marafon, sprint emas. Qadam-baqadam harakat qiling va tez orada statik tiplash va yaxshilangan developer experience dan bahramand bo'lasiz!

Happy coding! 💻✨
#TypeScript #JavaScript #WebDevelopment

Ushbu nuqtalardan birortasini kengroq tushuntirishimni xohlarmidingiz?

Peace of Code
Telegram
Peace of Code
Sharing good stuff related Angular, Vue, Nuxt, nx and everything related to frontend
👍8
534 viewsDoniyor, 
Peace of Code
This media is not supported in your browser
VIEW IN TELEGRAM
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
🔥7👍5
526 viewsDoniyor, 
Peace of Code
Highly recommended 🔥

Kelayotgan yakshanba 21:00 da Umar mock interview topshirmoqda.

Hammaga foydali ma’lumotlar bo’ladi degan umiddaman.

https://t.me/JoshDeveloper/2416
Please open Telegram to view this post
VIEW IN TELEGRAM
Telegram
Josh*Developer
Kutganmidingiz?

Texnik intervyularning bu safargisi – o'zgacha. Intervyuver kandidat sifatida qatnashadi.

@JoshDeveloper'ning (meni aytyapti 😉) intervyu olaverib bilimi zanglab ketmadimikin?

Qani tekshirib ko'ramiz 😎️️️️️️

Qachon? - Yakshanba, 21:00…
⚡4
511 viewsDoniyor, 
Peace of Code
🕺 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
Please open Telegram to view this post
VIEW IN TELEGRAM
Teletype
Computed properties
computed() method reaktiv va kuzatuvchan xususiyatlarni yaratish uchun ishlatiladi. Bu metod quyidagi asosiy xususiyatlarga ega:
👍7
527 viewsDoniyor, 
Peace of Code
This media is not supported in your browser
VIEW IN TELEGRAM
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.
👍3
619 viewsDoniyor, 
Peace of Code
Technical problems 🛠️

Akalar uzr, Web dev event posti hali tayyor emas ekan. Shu uchun postni o’chirvordim. Tayyor bo’lishi bilan share qilaman 🙏
👍4
531 viewsDoniyor, 
Peace of Code
Forwarded from GDG Tashkent (Khumoyun Inoyatov)
🔥 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
👍3❤1🔥1
531 viewsDoniyor,