This media is not supported in your browser
VIEW IN TELEGRAM
Pointer darsida reference type haqida aytib o'tgan edim. Bu lavha uni tushintirish uchun eng sodda yechim bo'libdi.
@saudabdulwahed
@saudabdulwahed
This media is not supported in your browser
VIEW IN TELEGRAM
📹 Siz meni aldab yurgan ekansiz
Forwarded from Azizbek Khabibullaev
Qanday qilib, 0 dan kuchli backend dasturchi bo'lish mumkin? Roadmap?
👋 Tanishing: Bexruz. Ayni paytda CLICK va Chowis kompaniyalarida Node.JS Backend Engineer bo'lib, ishlab kelmoqdalar.
— Tez kunda: "0 dan kuchli BACKEND DASTURCHI bo'lish" mavzusida YouTube sahifamizda suhbatlashamiz!
— Savollaringizni @azizbekkhabibullaev_bot ga yuborishingiz mumkin :)
Bexruzning shaxsiy telegram va YouTube sahifasi:
@bexruz_ru // YouTube
👉 Telegram | YouTube | Instagram
👋 Tanishing: Bexruz. Ayni paytda CLICK va Chowis kompaniyalarida Node.JS Backend Engineer bo'lib, ishlab kelmoqdalar.
— Tez kunda: "0 dan kuchli BACKEND DASTURCHI bo'lish" mavzusida YouTube sahifamizda suhbatlashamiz!
— Savollaringizni @azizbekkhabibullaev_bot ga yuborishingiz mumkin :)
Bexruzning shaxsiy telegram va YouTube sahifasi:
@bexruz_ru // YouTube
👉 Telegram | YouTube | Instagram
CSS bo'yicha ommabop resurslar
Ko'pchilik CSSni video darslardan tashqari qayerdan o'rgansam ekan deb izlanib yurishadi. Shunday insonlarga men quyidagi bir nechta CSS resurslarini tavsiya qilgan bo'lar edim.
Ushbu resurslar ingliz tilida lekin shunday bo'lsada juda ko'p kerakli ma'lumotlar berib o'tilgan!
1. css-tricks.com
2. scotch.io
3. devhints.io
4. css-author.com
5. smashingmagazine.com
Kanalimiz 👇
https://t.me/joinchat/z4wZ5DYGlQAxZjJi
Ko'pchilik CSSni video darslardan tashqari qayerdan o'rgansam ekan deb izlanib yurishadi. Shunday insonlarga men quyidagi bir nechta CSS resurslarini tavsiya qilgan bo'lar edim.
Ushbu resurslar ingliz tilida lekin shunday bo'lsada juda ko'p kerakli ma'lumotlar berib o'tilgan!
1. css-tricks.com
2. scotch.io
3. devhints.io
4. css-author.com
5. smashingmagazine.com
Kanalimiz 👇
https://t.me/joinchat/z4wZ5DYGlQAxZjJi
👍1
Forwarded from Suhrob Abduaxatov
Ishga qanday kirish mumkin ?
Shu vaqtga chamasi 30-40 ta atrofida intervyularda bo'lganman shular asosida ishga kirish borasida tajribalarimni bo'lishishga harakat qilaman
- Yaxshi rezyume yarating, rezyume-siz ishga topshirmang
- Bajargan portfoliolaringizni ish beruvchiga ZIP qilib yubormang
- Sinov (Template) loyihalarni ko'plab bajaring, misol tariqasida: Sizni portfolio Netlifyda joylangan sayttingizdan kamida 5-10 ga yaqin bajarilgan loyihalar bo'lishi kerak (Haqiqiy loyiha bo'lishi shart emas ammo bo'lsa ishga kirishingiz tezlashadi)
- Telegram akkauntingizda ism va familiyangiz yoki ismingizni o'zi yozilishi qulay, hayoliy usernamelar ish beruvchi sizni jiddiy qabul etmasligiga olib keladi
Davomi bor ...
Shu vaqtga chamasi 30-40 ta atrofida intervyularda bo'lganman shular asosida ishga kirish borasida tajribalarimni bo'lishishga harakat qilaman
- Yaxshi rezyume yarating, rezyume-siz ishga topshirmang
- Bajargan portfoliolaringizni ish beruvchiga ZIP qilib yubormang
- Sinov (Template) loyihalarni ko'plab bajaring, misol tariqasida: Sizni portfolio Netlifyda joylangan sayttingizdan kamida 5-10 ga yaqin bajarilgan loyihalar bo'lishi kerak (Haqiqiy loyiha bo'lishi shart emas ammo bo'lsa ishga kirishingiz tezlashadi)
- Telegram akkauntingizda ism va familiyangiz yoki ismingizni o'zi yozilishi qulay, hayoliy usernamelar ish beruvchi sizni jiddiy qabul etmasligiga olib keladi
Davomi bor ...
Forwarded from Suhrob Abduaxatov
Ishga qanday kirish mumkin? 2-qism
- Yaqin orada ilk bor ishga kirgan xodimlarni izlab toping va ulardan namuna olvoling: Rezyume, portfolio, va unga berilgan jobs zadaniyalarini so'rab oling, o'zingiz uchun xulosa qiling
- Turli xil vakantsiyalarga ishga topshirib ko'ring, va sizga qiziqish bildirishmasa ulardan nega sizni qabul etishmaganini? Yoki suhbatga chaqirishmaganini so'rab oling, shunda siz o'zingizni kamchiliklaringizni yaqqol ko'ra boshlaysiz
- Turli xil tanish va ishga kirgan yaqinlar orqali ishga kirish uchun "kanal"lar izlab ko'ring bu ham foyda beradi, kompaniyada ishlovchi xodim sizni o'sha kompaniyga tavsiya etishsa sizga ko'proq etibor qaratishadi va rezyume-ingiz "qora tuynikda" qolib ketmaydi
Davomi bor...
Imloviy xatoliklar uchun uzr
@suhrobabduaxatov
- Yaqin orada ilk bor ishga kirgan xodimlarni izlab toping va ulardan namuna olvoling: Rezyume, portfolio, va unga berilgan jobs zadaniyalarini so'rab oling, o'zingiz uchun xulosa qiling
- Turli xil vakantsiyalarga ishga topshirib ko'ring, va sizga qiziqish bildirishmasa ulardan nega sizni qabul etishmaganini? Yoki suhbatga chaqirishmaganini so'rab oling, shunda siz o'zingizni kamchiliklaringizni yaqqol ko'ra boshlaysiz
- Turli xil tanish va ishga kirgan yaqinlar orqali ishga kirish uchun "kanal"lar izlab ko'ring bu ham foyda beradi, kompaniyada ishlovchi xodim sizni o'sha kompaniyga tavsiya etishsa sizga ko'proq etibor qaratishadi va rezyume-ingiz "qora tuynikda" qolib ketmaydi
Davomi bor...
Imloviy xatoliklar uchun uzr
@suhrobabduaxatov
"0 dan 1 gacha" nomli loyihamizning dastlabki 2 ta sonida dasturlash asoslariga chuqur yondashgan edik. Bu galgisida esa dasturlash yo'nalishlari va dasturlash tillari mavzusi atrofida akalarimiz bilan suhbat qurdik. Keyingi sonlarida har bir yo'nalishlar bo'yicha chuqurlashib, mavzuni yoritib berish niyatimiz bor.
Bugungi ko'rsatuvimiz premyerasida qaysi dasturlash tilini tanlashga ikkilanayotgan yoshlar uchun yaxshi tavsiyalar berib o'tiladi. Premyerani bugun 14:00 da quyidagi havola orqali tomosha qiling.
Tomosha qilish uchun havola: https://youtu.be/VI3ed9qxy3o
Bugungi ko'rsatuvimiz premyerasida qaysi dasturlash tilini tanlashga ikkilanayotgan yoshlar uchun yaxshi tavsiyalar berib o'tiladi. Premyerani bugun 14:00 da quyidagi havola orqali tomosha qiling.
Tomosha qilish uchun havola: https://youtu.be/VI3ed9qxy3o
Google'dan qocholmaysan, shunday ekan aql bilan ish qil 😳
Do'stingizga ham ulashing: 👇
👉@js_problems👈
Do'stingizga ham ulashing: 👇
👉@js_problems👈
Forwarded from Mabrur - IT Blog 🇵🇸
Assalomu alaykum🖖🏻
Kecha EPAM Systems kompaniyasi bilan suhbatim bo'lib o'tdi. Suhbatda esimda qolgan savollarni sizlar bilan ulashmoqchiman.
▍JavaScript va umumiy savollar
1. JavaScriptda Capturing va Bubbling phase nima?
2. JSda qanday qilib inheritance (me'ros) olish mumkin?
3. var, let, const o'rtasidagi farqni aytib bering.
4. Bind, call, apply farqlari nimada?
5. forEach va map ning bir-biridan qanday farqi bor?
6. JavaScriptda Closures (Замыкания) nima?
7. Event Loop qanday ishlaydi?
8. JSdagi Immutable ma'lumotlar turi qaysilar?
9. Asinxronlik nima?
10. Qanday yo'llar bilan asinxron funksiyalar yasasa bo'ladi?
11. Promiselar tuzilishini tushuntirib bering.
12. Prototiplar zanjiri (prototype chain) nima?
13. SOLID prinsiplari haqida aytib bering.
14. const bilan e'lon qilingan obyektni qanday o'zgartirsa bo'ladi?
15. Testing Pyramid haqida ma'lumot bering, qanday testlarni bilasiz?
16. Optimizatsiya uchun qanday texnologiyalardan foydalangansiz?
17. Multi-page va Single-page o'rtasidagi farq qanday?
18. CI/CD qanday ishlaydi?
19. Toza kod yozish uchun qanday stillardan foydalanasiz?
19. Eslint va Prettierning farqi nimada?
20. Kanban va Scrum metodologiyalari haqida tushunchangiz bormi?
▍Vue.js (Vue js bilganim uchun ushbu freymvorkdan savollar berildi)
1. Vuening asosiy tushunchasi va ishlash tamoyili qanday?
2. Vueda hayot sikllari (life cycle) nimalardan tashkil topgan, ular haqida batafsil aytib bering.
3. Vue va oddiy JS hodisalari o'rtasida qanday farq bor?
▍JS amaliy
1. Funksiya tuzing.
Savollarni do'stlaringiz bilan ulashishni unutmang.
@mabrur_dev
Kecha EPAM Systems kompaniyasi bilan suhbatim bo'lib o'tdi. Suhbatda esimda qolgan savollarni sizlar bilan ulashmoqchiman.
▍JavaScript va umumiy savollar
1. JavaScriptda Capturing va Bubbling phase nima?
2. JSda qanday qilib inheritance (me'ros) olish mumkin?
3. var, let, const o'rtasidagi farqni aytib bering.
4. Bind, call, apply farqlari nimada?
5. forEach va map ning bir-biridan qanday farqi bor?
6. JavaScriptda Closures (Замыкания) nima?
7. Event Loop qanday ishlaydi?
8. JSdagi Immutable ma'lumotlar turi qaysilar?
9. Asinxronlik nima?
10. Qanday yo'llar bilan asinxron funksiyalar yasasa bo'ladi?
11. Promiselar tuzilishini tushuntirib bering.
12. Prototiplar zanjiri (prototype chain) nima?
13. SOLID prinsiplari haqida aytib bering.
14. const bilan e'lon qilingan obyektni qanday o'zgartirsa bo'ladi?
15. Testing Pyramid haqida ma'lumot bering, qanday testlarni bilasiz?
16. Optimizatsiya uchun qanday texnologiyalardan foydalangansiz?
17. Multi-page va Single-page o'rtasidagi farq qanday?
18. CI/CD qanday ishlaydi?
19. Toza kod yozish uchun qanday stillardan foydalanasiz?
19. Eslint va Prettierning farqi nimada?
20. Kanban va Scrum metodologiyalari haqida tushunchangiz bormi?
▍Vue.js (Vue js bilganim uchun ushbu freymvorkdan savollar berildi)
1. Vuening asosiy tushunchasi va ishlash tamoyili qanday?
2. Vueda hayot sikllari (life cycle) nimalardan tashkil topgan, ular haqida batafsil aytib bering.
3. Vue va oddiy JS hodisalari o'rtasida qanday farq bor?
▍JS amaliy
1. Funksiya tuzing.
sum(2, 3) // output 5
; sum(2)(3)
// output 5
2. Quyidagi kodda raqamlar chiqishi ketma-ketligini tushuntirib bering. (function() {
console.log(1);
setTimeout(function(){console.log(2)}, 1000);
setTimeout(function(){console.log(3)}, 0);
console.log(4);
})();
3. Berilgan qiymat palindromligini tekshiruvchi funksiya tuzing.palindrome('34543') // true
palindrome('string') // false
Exadel bilan ham interview bo'lib o'tgan edi, ammo ular savollarni tarqatishga ruhsat berishmadi.Savollarni do'stlaringiz bilan ulashishni unutmang.
@mabrur_dev
👍2
Forwarded from Khumoyun the tech-guy
JavaScript Massiv Metodlari
Ushbu maqolada JavaScript'dagi barcha massiv metodlari haqida alohida yondashdim. Quyidagi havola orqali bemalol o'qishingiz mumkin, o'ylaymanki, sizga foydasi tegadi 🙂
https://community.uzbekcoders.uz/post/javascript-massiv-metodlari-61439348a8109059a1aeb9b2
@HumoyunProjects
Ushbu maqolada JavaScript'dagi barcha massiv metodlari haqida alohida yondashdim. Quyidagi havola orqali bemalol o'qishingiz mumkin, o'ylaymanki, sizga foydasi tegadi 🙂
https://community.uzbekcoders.uz/post/javascript-massiv-metodlari-61439348a8109059a1aeb9b2
@HumoyunProjects
👍2
Forwarded from Dasturlash hayoti️️ ️
🤩 3D iconlar
Ochiq manbali 3D icon kutubxonasi, 1440 dan ortiq ob'ektlar
🌐 Sayt manzili
👉 @Dasturlash_hayoti
Ochiq manbali 3D icon kutubxonasi, 1440 dan ortiq ob'ektlar
🌐 Sayt manzili
👉 @Dasturlash_hayoti
👍1
Hindistonlik 19 yoshli Adarsh degan bola HTML va CSS ni o’zi bilangina yaxshigina daromad qilgani haqida twitterda o’qib qoldim albatta bu menga ham qiziq bo’ldi va o’ziga yozdim buni qanday amalga oshirgani haqida. Men kabi murojaatlar ko’p bo’lgani sabab uzun bir maqola yozdi. Haqiqatdan oddiy hammamiz bilgan usullar orqali daromad qilgan lekin uni bizdan farqi shuki sabr qilgan ekan, upworkda birinchi clientini 3 oy deganda qo’lga kiritgan. Shunday sabr qilishni ham o’rganishimiz kerak biroz ish topa olmay qolsak hammasi tugadi degani emas.
Sizlarga qiziq bo’lsa Adarshni postini to’liq tarjima qilib kanalga joylayman🙂
@nurmukhamedoff_dev
Sizlarga qiziq bo’lsa Adarshni postini to’liq tarjima qilib kanalga joylayman🙂
@nurmukhamedoff_dev
Ko'p odamlar HTML CSS yordamida pul ishlash haqida noto'g'ri tushunchaga ega
Ushbu postda men HTML CSS yordamida pul ishlashda qo'llagan barcha usullarimni (dalil bilan) sizlar bilan bo’lishmoqchiman.
1.Repetitorlik qilish
➪ Agar siz kimdandir bir qadam oldinda bo'lsangiz, uni har doim o'rgatishingiz va mahoratingizdan pul ishlashingiz mumkin
➪Men boshida odamlarga soatiga 2$ (juda kam) evaziga dasturlashni asoslarini o’rgatganman, lekin hozir men undan 5 baravar koʻpiga ishlayman.
Bu odamlarni qanday topganman?
✪ Men bir nechta dasturchilarning Facebook hamjamiyatlari/guruhlarida odamlarga o’z xizmatlarimni taklif qilganman.
✪ Shundan so’ng ko’p odamlar menga xabar yuborishdi.
✪ Men hammasiga ulgura olmaganim uchun faqat 5-6 nafar o’quvchini qabul qildim.
Men super prof profilini yaratdim va oddiy HTML CSS-ni o'rgatishdan 300 dollar ishlab oldim
2. Freelancing
Men 2020 yildan boshlab frilanserlik qilib kelaman.
➪ Menga ishoning, birinchi oylarda mijozlarni topish juda qiyin
Men @fiverr @upwork, frilanser, frilanser va kabi bir nechta platformalarni sinab ko'rdim.
Mijoz olishim uchun 3 oy vaqt ketdi va bu ham 5 dollarga. Bir nechta mijozlarni olganimdan so'ng, odamlar oqimini to’xtatib bo’lmay qoldi😌
Birinchi buyurtmani qanday oldim?
Men ijimoiy tarmoqlardan mijozlarni topdim va undan Fiverr/Upwork orqali meni ishga yo’llashini so‘radim. Ular bunga rozi bo‘ldi va men ushbu platformalardan birinchi buyurtmalarimni oldim.
3. Shablonlarni sotish
Men HTML CSS yordamida bir nechta shablonlarni yaratishga harakat qildim lekin dastlab hech kim sotib olmadi.
Men yana Facebook-ga kirdim va ushbu shablonni sotayotganimni va pul ishlayotganimni e'lon qildim.
Bundan tashqari shablonlar uchun sizga pul to'laydigan bir nechta veb-saytlar ham mavjud
✪ Themeforest .net
✪ sitePoint
✪ TempElateMonster
Lekin men bu veb-saytlardan shaxsan foydalanmaganman.
Bu mening HTML CSS yordamida pul ishlay olgan asosiy usullarim edi.
Men JavaScript va ReactJS-ni o'rganganimda, yanada ko'proq imkoniyatlarga ega bo'ldim va bu menga bitta loyiha uchun $100+ ishlay olishimga yordam berdi.
HTML CSS yordamida pul ishlashning boshqa usullari
✪Kontent yaratish
✪Blog yuritish
✪Kurs yaratish
✪ Elektron kitob yaratish
✪Youtube kanali
To'liq ishga joylashish uchun siz JavaScript, Frontend kutubxonalari kabi ko'proq narsani o'rganishingiz kerak.
"Dasturchilar har doim o'rganadi"
Manba: twitterdan olindi
Muallif: Adarsh Gupta
@nurmukhamedoff_dev
Ushbu postda men HTML CSS yordamida pul ishlashda qo'llagan barcha usullarimni (dalil bilan) sizlar bilan bo’lishmoqchiman.
1.Repetitorlik qilish
➪ Agar siz kimdandir bir qadam oldinda bo'lsangiz, uni har doim o'rgatishingiz va mahoratingizdan pul ishlashingiz mumkin
➪Men boshida odamlarga soatiga 2$ (juda kam) evaziga dasturlashni asoslarini o’rgatganman, lekin hozir men undan 5 baravar koʻpiga ishlayman.
Bu odamlarni qanday topganman?
✪ Men bir nechta dasturchilarning Facebook hamjamiyatlari/guruhlarida odamlarga o’z xizmatlarimni taklif qilganman.
✪ Shundan so’ng ko’p odamlar menga xabar yuborishdi.
✪ Men hammasiga ulgura olmaganim uchun faqat 5-6 nafar o’quvchini qabul qildim.
Men super prof profilini yaratdim va oddiy HTML CSS-ni o'rgatishdan 300 dollar ishlab oldim
2. Freelancing
Men 2020 yildan boshlab frilanserlik qilib kelaman.
➪ Menga ishoning, birinchi oylarda mijozlarni topish juda qiyin
Men @fiverr @upwork, frilanser, frilanser va kabi bir nechta platformalarni sinab ko'rdim.
Mijoz olishim uchun 3 oy vaqt ketdi va bu ham 5 dollarga. Bir nechta mijozlarni olganimdan so'ng, odamlar oqimini to’xtatib bo’lmay qoldi😌
Birinchi buyurtmani qanday oldim?
Men ijimoiy tarmoqlardan mijozlarni topdim va undan Fiverr/Upwork orqali meni ishga yo’llashini so‘radim. Ular bunga rozi bo‘ldi va men ushbu platformalardan birinchi buyurtmalarimni oldim.
3. Shablonlarni sotish
Men HTML CSS yordamida bir nechta shablonlarni yaratishga harakat qildim lekin dastlab hech kim sotib olmadi.
Men yana Facebook-ga kirdim va ushbu shablonni sotayotganimni va pul ishlayotganimni e'lon qildim.
Bundan tashqari shablonlar uchun sizga pul to'laydigan bir nechta veb-saytlar ham mavjud
✪ Themeforest .net
✪ sitePoint
✪ TempElateMonster
Lekin men bu veb-saytlardan shaxsan foydalanmaganman.
Bu mening HTML CSS yordamida pul ishlay olgan asosiy usullarim edi.
Men JavaScript va ReactJS-ni o'rganganimda, yanada ko'proq imkoniyatlarga ega bo'ldim va bu menga bitta loyiha uchun $100+ ishlay olishimga yordam berdi.
HTML CSS yordamida pul ishlashning boshqa usullari
✪Kontent yaratish
✪Blog yuritish
✪Kurs yaratish
✪ Elektron kitob yaratish
✪Youtube kanali
To'liq ishga joylashish uchun siz JavaScript, Frontend kutubxonalari kabi ko'proq narsani o'rganishingiz kerak.
"Dasturchilar har doim o'rganadi"
Manba: twitterdan olindi
Muallif: Adarsh Gupta
@nurmukhamedoff_dev
👍2
JavaScript & React JS intervyu savollari, javoblari
Frontend bo’yicha ishga kirish intervyularida tushishi mumkin bo’lgan, 100 dan oshiq JavaScript, React JSga oid savollardan quyidagi omborlar orqali foydalanishingiz mumkin.
Shuningdek ushbu omborlarda savollarning yechimlari ham keltirilgan!
JavaScript:
github.com/sudheerj/javascript-interview-questions
github.com/learning-zone/javascript-interview-questions
React JS:
github.com/sudheerj/reactjs-interview-questions
Maqolani to'liq o'qish 👇
https://alicode.uz/javascript-react-js-intervyu-savollari-javoblari/
IT olamidagi qaynoq yangiliklar
➤ Telegram | Instagram | Facebook | YouTube
Frontend bo’yicha ishga kirish intervyularida tushishi mumkin bo’lgan, 100 dan oshiq JavaScript, React JSga oid savollardan quyidagi omborlar orqali foydalanishingiz mumkin.
Shuningdek ushbu omborlarda savollarning yechimlari ham keltirilgan!
JavaScript:
github.com/sudheerj/javascript-interview-questions
github.com/learning-zone/javascript-interview-questions
React JS:
github.com/sudheerj/reactjs-interview-questions
Maqolani to'liq o'qish 👇
https://alicode.uz/javascript-react-js-intervyu-savollari-javoblari/
IT olamidagi qaynoq yangiliklar
➤ Telegram | Instagram | Facebook | YouTube
GitHub
GitHub - sudheerj/javascript-interview-questions: List of 1000 JavaScript Interview Questions
List of 1000 JavaScript Interview Questions. Contribute to sudheerj/javascript-interview-questions development by creating an account on GitHub.
👍1
Sahifada SEOni oshiruvchi HTML teglar
Ushbu maqolada sahifangizni SEO taraflama kuchaytirishda yordam beradigan bir nechta HTML teglarni qo'llanilishi bilan keltirib o'tdim. O'ylaymanki loyihalaringizda foyda beradi!
BATAFSIL
👉 @javohir_group
Ushbu maqolada sahifangizni SEO taraflama kuchaytirishda yordam beradigan bir nechta HTML teglarni qo'llanilishi bilan keltirib o'tdim. O'ylaymanki loyihalaringizda foyda beradi!
BATAFSIL
👉 @javohir_group
Telegraph
Sahifada SEOni oshiruvchi HTML teglar
Javohir Group Ba'zi HTML teglari qidiruv tizimlarida sahifaingizni qanday qilib to'g'ri o'qish va uni ma'lum kalit so'zlar bilan indekslash kerakligini bildiradi. Aynan shunday HTML teglarini ko'rib chiqamiz.
👍1
Forwarded from Nuriddinoff Blog
This media is not supported in your browser
VIEW IN TELEGRAM
Frilans nima va Frilanser kim?
Ko'pchilik obunachilar menga shu savol bilan murojaat qiladilar.
3 daqiqalik videoda soha to'g'risida batafsil ma'lumot berilgan.
Ko'rishni tavsiya etaman!
👉 @nuriddinoff_blog
Ko'pchilik obunachilar menga shu savol bilan murojaat qiladilar.
3 daqiqalik videoda soha to'g'risida batafsil ma'lumot berilgan.
Ko'rishni tavsiya etaman!
👉 @nuriddinoff_blog
FEO nima?
FEO - Front-end optimization.
Qisqa qilib aytganda FEO yoki CO (Content Optimization) - veb-saytingizni brauzer uchun qulayroq va tezroq yuklanishi uchun nozik sozlash jarayonidir. Umuman olganda, FEO fayl o'lchamlarini kamaytirishga va ma'lum bir sahifani yuklash uchun zarur bo'lgan so'rovlar sonini kamaytirishga qaratilgan. Bu postda FEO ni yaxshilash uchun bir qancha usullarni ko'rib chiqamiz.
1. Resurslarni minimallashtirish - HTML, CSS, JS fayllardagi kodlaringizni minimallashtiring, ishlatmaydigan kodlaringizni, kommentlarni, bo'sh joylarni o'chirib tashlang. Fayllarni online compressor orqali minimallashtirib oling, bu faylning hajmini anchagina qisqartiradi, veb-sayt yuklanish jarayonida ham vaqt va resurs kamroq sarflanadi. Ko'p kutubxonalarda .min.css yoki .min.js fayllari bekordan bekorga turmaydi axir, endi bu usulni o'zingiz yozgan kodlarda ham ishlatishni boshlang.
2. Responsive rasm va WebP dan foydalaning - Ko'p veb-saytlar hajmining deyarli 50 foizi media fayl va rasmlarga to'g'ri keladi, rasmlar veb-sayt uchun moslashtirilmagan bo'lsa bu veb-saytingizni tezligiga yaxshigina tasir qiladi. Dasturlashni o'rganayotgan paytim background'ga 10MB atrofidagi rasmni qo'yganman, saytda rasm sifati muhim deb o'ylaganman 😁, buni ko'rib ustozimni mazasi qochishiga sal qolgan.
Saytingizga rasmlarni qo'yishdan oldin online servislar orqali rasmni 70-80 foizgacha siqishga urinib ko'ring, keyin uni WebP formatga o'giring, bu saytingizni yuklanishini ancha tezlashtiradi. O'zimda tajribada bo'lgan holat 10-12 Megabaytlik rasmlarni 80 foizgacha siqib, WebP ko'rinishda qo'yganmiz, hajm 100-200 Kilobaytgacha qisqargan.
3. Lazy Loading - Lazy load veb-sayt ochilganda faqat kerakli resusrlarni yuklaydi, qolganini foydalanuvchiga kerak paytida yuklaydi. Masalan veb-saytni ochganingizda rasmlarning faqat bir qismi, ya'ni sizga ko'rinayotgan qismi yuklangan bo'ladi, qolgani esa scroll qilishingiz davomida yuklanib boradi. Misol uchun Google images ham shunaqa ishlaydi, siz rasm qidirsangiz sizga millionlab variantlarni taklif qiladi, lekin hammasi ham yuklanmaydi, rasmlar pastga tushishingiz davomida yuklanib boradi.
Agar hammasini birdan yuklaganida balki bir necha hafta kutardingiz yoki ram yetishmasligidan kompyuteringiz qotib qolgan bo'lardi 🙂.
4. CDN tanlang - CDN lar tarmoqning kechikishi (tarmoq orqali aloqada kechikishlar) bilan bog'liq muammolarni hal qilish uchun mo'ljallangan. Bunday kechikishlar asosan veb-sayt hosting serveri va foydalanuvchi orasidagi fizik masofa bilan bog'liq. Ushbu masofani kamaytirish uchun CDN kontentning versiyasini turli geografik joylarda saqlaydi.
Masalan siz saytingizga biror kutubxonani ulab qo'ydingiz, veb-sayt har safar serverning o'ziga murojaat qiladi, server USA da bo'lsa, masofa taxminan 11 km bo'lsa, javob qaytish vaqti esa taxminan 500-700 ms bo'ladi.
CDN orqali ulasangiz, eng yaqin CDN 200 km uzoqlikda bo'lsin, sizning saytingiz endi CDN ga murojaat qiladi, bu ma'lumot CDN da mavjud bo'lsa sizning so'rovingiz bajariladi, taxminan 50-100 ms.
CDN siz so'ragan ma'lumotni oldin o'zidan qidiradi, topa olmasa USA dagi serverga murojaat qiladi, ma'lumotni olgach sizga uzatadi, keyin uni o'zida ham saqlab qo'yadi. Keyingi safar siz so'rov yuborganingizda, endi u o'zidagi ma'lumotni sizga qaytaradi. Bunda faqat birinchi holatda ko'proq vaqt sarflanadi, keyingi safardan boshlab veb-sayt ma'lumotni CDN dan oladi.
5. Serverga so'rovlarni kamaytirish - Umuman olganda front-end dan serverga qanchalik ko'p so'rov yuborilsa, bu saytning yuklanishini shunchalik kechiktiradi. Serverga har qanday so'rovni yuborish, sayt yuklanishidan oldin to'liq aloqani talab qiladi. Buni oldini olish uchun bir qancha usullar mavjud.
- CSS Sprite-dan foydalanish.
- Ko'p tashqi so'rovlarni amalga oshiradigan third-party plugin'larni kamaytirish.
- Ishlatilmayotgan fayllarga bo'lgan link'larni olib tashlash.
Manba
@saidabdulla
FEO - Front-end optimization.
Qisqa qilib aytganda FEO yoki CO (Content Optimization) - veb-saytingizni brauzer uchun qulayroq va tezroq yuklanishi uchun nozik sozlash jarayonidir. Umuman olganda, FEO fayl o'lchamlarini kamaytirishga va ma'lum bir sahifani yuklash uchun zarur bo'lgan so'rovlar sonini kamaytirishga qaratilgan. Bu postda FEO ni yaxshilash uchun bir qancha usullarni ko'rib chiqamiz.
1. Resurslarni minimallashtirish - HTML, CSS, JS fayllardagi kodlaringizni minimallashtiring, ishlatmaydigan kodlaringizni, kommentlarni, bo'sh joylarni o'chirib tashlang. Fayllarni online compressor orqali minimallashtirib oling, bu faylning hajmini anchagina qisqartiradi, veb-sayt yuklanish jarayonida ham vaqt va resurs kamroq sarflanadi. Ko'p kutubxonalarda .min.css yoki .min.js fayllari bekordan bekorga turmaydi axir, endi bu usulni o'zingiz yozgan kodlarda ham ishlatishni boshlang.
2. Responsive rasm va WebP dan foydalaning - Ko'p veb-saytlar hajmining deyarli 50 foizi media fayl va rasmlarga to'g'ri keladi, rasmlar veb-sayt uchun moslashtirilmagan bo'lsa bu veb-saytingizni tezligiga yaxshigina tasir qiladi. Dasturlashni o'rganayotgan paytim background'ga 10MB atrofidagi rasmni qo'yganman, saytda rasm sifati muhim deb o'ylaganman 😁, buni ko'rib ustozimni mazasi qochishiga sal qolgan.
Saytingizga rasmlarni qo'yishdan oldin online servislar orqali rasmni 70-80 foizgacha siqishga urinib ko'ring, keyin uni WebP formatga o'giring, bu saytingizni yuklanishini ancha tezlashtiradi. O'zimda tajribada bo'lgan holat 10-12 Megabaytlik rasmlarni 80 foizgacha siqib, WebP ko'rinishda qo'yganmiz, hajm 100-200 Kilobaytgacha qisqargan.
3. Lazy Loading - Lazy load veb-sayt ochilganda faqat kerakli resusrlarni yuklaydi, qolganini foydalanuvchiga kerak paytida yuklaydi. Masalan veb-saytni ochganingizda rasmlarning faqat bir qismi, ya'ni sizga ko'rinayotgan qismi yuklangan bo'ladi, qolgani esa scroll qilishingiz davomida yuklanib boradi. Misol uchun Google images ham shunaqa ishlaydi, siz rasm qidirsangiz sizga millionlab variantlarni taklif qiladi, lekin hammasi ham yuklanmaydi, rasmlar pastga tushishingiz davomida yuklanib boradi.
Agar hammasini birdan yuklaganida balki bir necha hafta kutardingiz yoki ram yetishmasligidan kompyuteringiz qotib qolgan bo'lardi 🙂.
4. CDN tanlang - CDN lar tarmoqning kechikishi (tarmoq orqali aloqada kechikishlar) bilan bog'liq muammolarni hal qilish uchun mo'ljallangan. Bunday kechikishlar asosan veb-sayt hosting serveri va foydalanuvchi orasidagi fizik masofa bilan bog'liq. Ushbu masofani kamaytirish uchun CDN kontentning versiyasini turli geografik joylarda saqlaydi.
Masalan siz saytingizga biror kutubxonani ulab qo'ydingiz, veb-sayt har safar serverning o'ziga murojaat qiladi, server USA da bo'lsa, masofa taxminan 11 km bo'lsa, javob qaytish vaqti esa taxminan 500-700 ms bo'ladi.
CDN orqali ulasangiz, eng yaqin CDN 200 km uzoqlikda bo'lsin, sizning saytingiz endi CDN ga murojaat qiladi, bu ma'lumot CDN da mavjud bo'lsa sizning so'rovingiz bajariladi, taxminan 50-100 ms.
CDN siz so'ragan ma'lumotni oldin o'zidan qidiradi, topa olmasa USA dagi serverga murojaat qiladi, ma'lumotni olgach sizga uzatadi, keyin uni o'zida ham saqlab qo'yadi. Keyingi safar siz so'rov yuborganingizda, endi u o'zidagi ma'lumotni sizga qaytaradi. Bunda faqat birinchi holatda ko'proq vaqt sarflanadi, keyingi safardan boshlab veb-sayt ma'lumotni CDN dan oladi.
5. Serverga so'rovlarni kamaytirish - Umuman olganda front-end dan serverga qanchalik ko'p so'rov yuborilsa, bu saytning yuklanishini shunchalik kechiktiradi. Serverga har qanday so'rovni yuborish, sayt yuklanishidan oldin to'liq aloqani talab qiladi. Buni oldini olish uchun bir qancha usullar mavjud.
- CSS Sprite-dan foydalanish.
- Ko'p tashqi so'rovlarni amalga oshiradigan third-party plugin'larni kamaytirish.
- Ishlatilmayotgan fayllarga bo'lgan link'larni olib tashlash.
Manba
@saidabdulla