π₯ Web Development veb-saytlarni yaratish, qurish va saqlashni anglatadi. U veb-dizayn, veb-nashr qilish, veb-dasturlash va ma'lumotlar bazasini boshqarish kabi jihatlarni o'z ichiga oladi.
Web Development so'zi ikki so'zdan iborat, ya'ni:
βͺοΈWeb: Bu veb-saytlar, veb-sahifalar yoki internet orqali ishlaydigan har qanday narsaga ishora qiladi.
βͺοΈDevelopment: Bu dasturni noldan yaratishni bildiradi
Web Development ikki turga bo'lish mumkin:
β Frontend Development
β Backend Development
@saad_blog
Web Development so'zi ikki so'zdan iborat, ya'ni:
βͺοΈWeb: Bu veb-saytlar, veb-sahifalar yoki internet orqali ishlaydigan har qanday narsaga ishora qiladi.
βͺοΈDevelopment: Bu dasturni noldan yaratishni bildiradi
Web Development ikki turga bo'lish mumkin:
β Frontend Development
β Backend Development
@saad_blog
π3
π±Frontend Development
Veb-saytning foydalanuvchi bilan bevosita muloqot qiladigan qismi Frontend deb ataladi. U ilovaning "mijoz tomoni" deb ham ataladi.
βΉοΈ Frontend dasturlashda asosan ushbu tillardan foydalaniladi:
β«οΈ HTML: HTML belgilash tilidan foydalangan holda veb-sahifalarning old qismini loyihalash uchun ishlatiladi. U veb-sayt uchun skelet vazifasini bajaradi, chunki u veb-sayt tuzilishini yaratish uchun ishlatiladi.
πΉ CSS: CSS veb-sahifalarni ko'rinishga keltirish jarayonini soddalashtirish uchun mo'ljallangan sodda tarzda ishlab chiqilgan tildir. CSS veb-saytlarga dizayn berish uchun ishlatiladi.
πΈ JavaScript: JavaScript - bu veb-saytimizga dinamik harakatni ta'minlash uchun ishlatiladigan skript tildir.
Frontend freymvorklari:
β AngularJS
β React.js
β VueJS va boshqalar...
@saad_blog
Veb-saytning foydalanuvchi bilan bevosita muloqot qiladigan qismi Frontend deb ataladi. U ilovaning "mijoz tomoni" deb ham ataladi.
βΉοΈ Frontend dasturlashda asosan ushbu tillardan foydalaniladi:
β«οΈ HTML: HTML belgilash tilidan foydalangan holda veb-sahifalarning old qismini loyihalash uchun ishlatiladi. U veb-sayt uchun skelet vazifasini bajaradi, chunki u veb-sayt tuzilishini yaratish uchun ishlatiladi.
πΉ CSS: CSS veb-sahifalarni ko'rinishga keltirish jarayonini soddalashtirish uchun mo'ljallangan sodda tarzda ishlab chiqilgan tildir. CSS veb-saytlarga dizayn berish uchun ishlatiladi.
πΈ JavaScript: JavaScript - bu veb-saytimizga dinamik harakatni ta'minlash uchun ishlatiladigan skript tildir.
Frontend freymvorklari:
β AngularJS
β React.js
β VueJS va boshqalar...
@saad_blog
β‘2π₯2
β Backend Development
Backend veb-saytning server tomonidir. Bu veb-saytning foydalanuvchilar ko'ra olmaydigan va o'zaro aloqada bo'lmaydigan qismidir. U ma'lumotlarni saqlash va tartibga solish uchun ishlatiladi.
βΉοΈ Backend dasturlashda asosan ushbu tillardan foydalaniladi:
βͺοΈ PHP: PHP - bu veb-ishlab chiqish uchun maxsus ishlab chiqilgan server tomonidagi skript tili.
π€ Java: Java eng mashhur va keng qo'llaniladigan dasturlash tillaridan biridir. U yuqori darajada kengaytirilishi mumkin.
π΅ Python: Python - bu tez ishlash va tizimlarni yanada samarali integratsiyalash imkonini beruvchi dasturlash tili.
π‘ Javascript: Node.js brauzerdan tashqarida JavaScript kodini bajarish uchun ochiq manba va platformalararo runtime muhitdir.
Backend freyvorklari: Express(JavaScript), Django(Python), Laravel(PHP) va boshqalar.
@saad_blog
Backend veb-saytning server tomonidir. Bu veb-saytning foydalanuvchilar ko'ra olmaydigan va o'zaro aloqada bo'lmaydigan qismidir. U ma'lumotlarni saqlash va tartibga solish uchun ishlatiladi.
βΉοΈ Backend dasturlashda asosan ushbu tillardan foydalaniladi:
βͺοΈ PHP: PHP - bu veb-ishlab chiqish uchun maxsus ishlab chiqilgan server tomonidagi skript tili.
π€ Java: Java eng mashhur va keng qo'llaniladigan dasturlash tillaridan biridir. U yuqori darajada kengaytirilishi mumkin.
π΅ Python: Python - bu tez ishlash va tizimlarni yanada samarali integratsiyalash imkonini beruvchi dasturlash tili.
π‘ Javascript: Node.js brauzerdan tashqarida JavaScript kodini bajarish uchun ochiq manba va platformalararo runtime muhitdir.
Backend freyvorklari: Express(JavaScript), Django(Python), Laravel(PHP) va boshqalar.
@saad_blog
π₯2β€1π1
π UI/UX dizaynini Figma orqali o'rganish uchun quyidagi mavzularni boshlang'ich sifatida tanlashingiz mumkin:
1. Figma Platformasi haqida Umumiy Ma'lumot:
β’ Figma nima?
β’ Figma qanday ishlaydi?
β’ Figma haqida umumiy qisqacha ma'lumotlar.
2. Figma Interfeysi:
β’ Figma interfeysi qanday tuzilgan?
β’ Asosiy elementlar (toolbar, layer panel, design canvas) haqida tushunchalar.
β’ Sahifalar va artboardlarni qanday yaratish.
3. ObΚΌekt va Elementlarni Qo'shish:
β’ Ranglar va stilar qanday qo'shiladi?
β’ Matn va shriftlar.
β’ Tasvirlarni qanday joylashtirish?
4. Wireframing va Prototyping:
β’ Wireframes qanday yaratiladi?
β’ Prototiplar qanday ishlaydi?
β’ Interaktiv o'yinlar yaratish.
5. Dizayn Elementlari:
β’ Asosiy dizayn elementlari (buttonlar, inputlar, menu, tooltiplar) qanday yaratiladi?
β’ Ikona va tasvir ishlash.
6. Responsive Dizayn:
β’ Qanday responsive dizayn qilish mumkin?
β’ Grid sistemalari.
7. Komponentlar va Style Guide:
β’ Komponentlarini qanday yaratish va ishlatish?
β’ Stil guide qanday yaratiladi?
8. Collaboration va Feedback:
β’ Boshqa dizaynerlar bilan hamkorlik qanday olib boriladi?
β’ Foydalanuvchilar bilan izohlash va takliflar qanday qabul qilinadi?
9. Plug-inlar va Integration:
β’ Figma plug-inlarini qanday qo'shish?
β’ Figma va boshqa dasturlar (Sketch, Adobe XD) orasidagi integratsiyalar.
10. Dizaynning Eksport Qilinishi:
β’ Dizaynni qanday eksport qilish mumkin?
β’ Figma uchun fayl formatlari (JPG, PNG, SVG) qanday ishlaydi?
@saad_blog
1. Figma Platformasi haqida Umumiy Ma'lumot:
β’ Figma nima?
β’ Figma qanday ishlaydi?
β’ Figma haqida umumiy qisqacha ma'lumotlar.
2. Figma Interfeysi:
β’ Figma interfeysi qanday tuzilgan?
β’ Asosiy elementlar (toolbar, layer panel, design canvas) haqida tushunchalar.
β’ Sahifalar va artboardlarni qanday yaratish.
3. ObΚΌekt va Elementlarni Qo'shish:
β’ Ranglar va stilar qanday qo'shiladi?
β’ Matn va shriftlar.
β’ Tasvirlarni qanday joylashtirish?
4. Wireframing va Prototyping:
β’ Wireframes qanday yaratiladi?
β’ Prototiplar qanday ishlaydi?
β’ Interaktiv o'yinlar yaratish.
5. Dizayn Elementlari:
β’ Asosiy dizayn elementlari (buttonlar, inputlar, menu, tooltiplar) qanday yaratiladi?
β’ Ikona va tasvir ishlash.
6. Responsive Dizayn:
β’ Qanday responsive dizayn qilish mumkin?
β’ Grid sistemalari.
7. Komponentlar va Style Guide:
β’ Komponentlarini qanday yaratish va ishlatish?
β’ Stil guide qanday yaratiladi?
8. Collaboration va Feedback:
β’ Boshqa dizaynerlar bilan hamkorlik qanday olib boriladi?
β’ Foydalanuvchilar bilan izohlash va takliflar qanday qabul qilinadi?
9. Plug-inlar va Integration:
β’ Figma plug-inlarini qanday qo'shish?
β’ Figma va boshqa dasturlar (Sketch, Adobe XD) orasidagi integratsiyalar.
10. Dizaynning Eksport Qilinishi:
β’ Dizaynni qanday eksport qilish mumkin?
β’ Figma uchun fayl formatlari (JPG, PNG, SVG) qanday ishlaydi?
@saad_blog
β‘2π1π₯1
Websocket nima ?
- WebSocket, veb-protokolning bir turi bo'lib, brauzer va server o'rtasida yuqori tezlikdagi bog'lanishlarni o'rnatish va o'zgarishlarni amalga oshirish uchun ishlatiladi. Bu protokolning eng muhim maqsadi, biror qurilmadan (brauzer yoki serverdan) kelgan xabarlar uchun xavfsiz, yuqori tezlikdagi boshqa biror qurilma bilan o'zaro bog'lanishni yaratishdir.
- WebSocket o'rnatilgandan so'ng, brauzer va server o'rtasida "oddiy" HTTP so'rovi orqali emas, balki o'zaro bog'lanishni saqlash uchun mo'ljallangan yangi bir protokol orqali xabarlar almashishadi. Bu, uni boshqa protokollar bilan solishtirishga imkon beradi, masalan, HTTP polling (so'rov yuborish) yoki long polling (uzoq so'rov yuborish).
@saad_blog
- WebSocket, veb-protokolning bir turi bo'lib, brauzer va server o'rtasida yuqori tezlikdagi bog'lanishlarni o'rnatish va o'zgarishlarni amalga oshirish uchun ishlatiladi. Bu protokolning eng muhim maqsadi, biror qurilmadan (brauzer yoki serverdan) kelgan xabarlar uchun xavfsiz, yuqori tezlikdagi boshqa biror qurilma bilan o'zaro bog'lanishni yaratishdir.
- WebSocket o'rnatilgandan so'ng, brauzer va server o'rtasida "oddiy" HTTP so'rovi orqali emas, balki o'zaro bog'lanishni saqlash uchun mo'ljallangan yangi bir protokol orqali xabarlar almashishadi. Bu, uni boshqa protokollar bilan solishtirishga imkon beradi, masalan, HTTP polling (so'rov yuborish) yoki long polling (uzoq so'rov yuborish).
@saad_blog
π₯2β‘1π1
SocketIO nima ?
- Socket.IO, veb ilovalarni yaratish uchun mo'ljallangan oddiy WebSocket protokoli ustiga qo'yilgan, o'rganishga oson, ishlatishni osonlashtiradigan va ko'p funksiyali kutubxona. SocketIO, JavaScript tilida yozilgan va brauzer va server o'rtasida ko'p qurilma (cross-platform) o'rtasida xabar almashishni osonlashtiradi.
SocketIO ning afzalliklari:
1. Maintain cross-connection between devices: SocketIO, brauzer va server o'rtasida o'zaro bog'lanishni saqlash uchun qulay interfeysni taqdim etadi.
2. Auto-reconnection: Agar bog'lanish qilib, so'ng qiyinlik bo'lganida, SocketIO avtomatik ravishda qayta bog'lanishni harakatga o'tkazadi.
3. Messages: SocketIO, xabarlarni o'zaro bog'lanish tizimida o'tkazish uchun oddiy interfeysni taqdim etadi.
4. Broadcasting: Bitta qurilma birorta qurilma bilan bog'langanda, undagi barcha boshqa qurilmalarga xabar jo'natish imkonini beradi.
@saad_blog
- Socket.IO, veb ilovalarni yaratish uchun mo'ljallangan oddiy WebSocket protokoli ustiga qo'yilgan, o'rganishga oson, ishlatishni osonlashtiradigan va ko'p funksiyali kutubxona. SocketIO, JavaScript tilida yozilgan va brauzer va server o'rtasida ko'p qurilma (cross-platform) o'rtasida xabar almashishni osonlashtiradi.
SocketIO ning afzalliklari:
1. Maintain cross-connection between devices: SocketIO, brauzer va server o'rtasida o'zaro bog'lanishni saqlash uchun qulay interfeysni taqdim etadi.
2. Auto-reconnection: Agar bog'lanish qilib, so'ng qiyinlik bo'lganida, SocketIO avtomatik ravishda qayta bog'lanishni harakatga o'tkazadi.
3. Messages: SocketIO, xabarlarni o'zaro bog'lanish tizimida o'tkazish uchun oddiy interfeysni taqdim etadi.
4. Broadcasting: Bitta qurilma birorta qurilma bilan bog'langanda, undagi barcha boshqa qurilmalarga xabar jo'natish imkonini beradi.
@saad_blog
β‘2π1π₯1
Forwarded from Saad Takhir | Coding
#html #css #tailwindcss #javaScript
π Todo app. Modal yordamida yangi todo yaratish mumkin. Todo 2 qismga boΚ»linadi bajarilmagan va bajarilgan todolar. Todolarni o'chirish imkoniyati ham mavjud. Bu loyihaning birinchi versiyasi.
Todo bu yerda π todo.saad.uz
π Todo app. Modal yordamida yangi todo yaratish mumkin. Todo 2 qismga boΚ»linadi bajarilmagan va bajarilgan todolar. Todolarni o'chirish imkoniyati ham mavjud. Bu loyihaning birinchi versiyasi.
Todo bu yerda π todo.saad.uz
π3π₯2β‘1