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

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

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

Resume tayyorlash uchun juda ham yaxshi sayt. Mutlaqo bepul foydalanishingiz mumkin.

http://canva.com

Kanal @js_problems

#Misol- 1️⃣1️⃣


Minimal 4 ta musbat butun sonli massiv berilgan ikkita eng kichik musbat sonlar yig‘indisini qaytaruvchi funksiya yarating.

Misol uchun, massiv kabi uzatilganda [19, 5, 42, 2, 77], chiqish bo'lishi kerak 7.

✳️✳️Yechimlarni izohlarda kutib qolamiz

#Misol 11 yechimi Sizda boshqacha yo'li bormi

function sumTwoSmallestNumbers(numbers) {
let k = numbers.sort((a,b)=> {
return a-b})
return k[0]+k[1]
}

#Misol-1️⃣2️⃣
Berilgan string orasidagi unli harflar sonini aniqlovchi dastur tuzing?

❇️❇️Yechimlarni kutib qolamiz

👉@js_problems👈

Shu kunlarda eski yozgan resumeyimni yangilash kerak bo’lib qoldi va yangiladim. Keyin feedback oldim va nihoyat resume o’z nihoyasiga yetdi. Resume yozib ko’rganlar biladi bu 1-2 soatda hal bo’ladigan ish emas uni iloji boricha tushunarli, sodda qilib yozish kerak sababi recruiterlar 1 ta resumega o’rtacha 7-8 sekunda sarflaydi va bu vaqt mobaynida sizni vakansiya uchun to’g’ri canditat ekanligingizni bila olishi kerak.

Resume yozishda ushbu qodilalarga amal qilishni unutmang.

1. Rasm ishlatmang joy egallaydi
2. 1 betdan oshmasin.
3. XYZ qoidasiga amal qiling.

Ushbu qo’llanmalardan foydalaning

https://slides.com/inspiredengineer/cracking-resume-3491a7

https://gist.github.com/darhonbek/208df5a3113fa73e1f03647b407be1e7

https://github.com/darhonbek/resume_templates

https://azimjon.com/cv/

Resume ishga suhbatga yetib olishingiz uchun juda muhim ahamiyatga ega shu sabab e’tiborli bo’ling va vaqtingizni ayamang.

Ushbu postni ulashishni unutmang😊

@nurmukhamedoff_dev

​​​​Frontendga oid amaliyot qilish uchun TOP manbalar

— codewell.cc - Tayyor Dizayn shablonlari orqali HTML, CSS imkoniyatlaringizni kuchaytiring;

— dailyui.co - Kunlik dizayn chellenjlari yig'ilgan majmua;

— frontendpractice.com - Murakkabroq frontend loyihalarida o'zingizni sinang;

— javascript30.com - 30 kunlik javascript chellenji orqali JS bo'yicha bilimlaringizni oshiring;

— cssbattle.dev - CSSga doir turli darajadagi vazifalar jamlanmasi;

👉 @javohir_group

💎2-daqiqada Netlifyga saytni yuklash

O'zimiz tayyorlagan veb-saytimizni netlify.app'ga joylash haqida video qo'llanma. Video 🇬🇧Ingliz tilida.

Frontendga oid sifatli bilimlar manbai
👉@js_problems👈

#Misol13

Ixtiyory raqamlardan iborat array berilgan(raqamlar soni 10 tadan oshmagan). Arrydan tel raqam ko'rinishada strinh qaytaradigan funcsiya tuzulsin .

createPhoneNumber([1, 1, 1, 1, 1, 1, 1, 1, 1, 1]), "(111) 111-1111")
createPhoneNumber([1, 2, 3, 4, 5, 6, 7, 8, 9, 0]), "(123) 456-7890")

tepadagi ko'rinishda yechim qaytarsin funksiyangiz

👉@js_problems👈

#Misol13 -#solution

function createPhoneNumber(numbers) {
let format = "(xxx) xxx-xxxx";
for(let i = 0; i < numbers.length;i++)
format=format.replace('x',numbers[i])
return format
}

#Misol1️⃣4️⃣

Berilgan satr ichida hech bo'lmaganda bir marataoba barcha Alifbo harflari qatnashgan bo'lsa True aks holda false qaytaradigan funksiya tuzulsin:

Namuna:

Ispagram("The quick brown fox jumps over the lazy dog.") true qaytadi chunki barcha harflar qatnashgan

isPagram("This is not a pangram"). false qataradi


Yechimi 5:00 da Izohlarda qoldiriladi:

👉@js_problems👈

Ko'pchilik dasturchilar va endi boshlamoqchi bo'lganlar uchun ham juda foydali hamda samimiy maqola yozilibti.
O'zingizni qiziqtirgan ko'plab savollarga javob topishingizga ishonaman ✊✊

Havola: daryo.uz

#Solution 12

function countVowel (s) {
let vowels = "euioa";
let count = 0;
for (let i = 0; i < s.length; i++) {
if (vowels.includes(s[i])) {
count++;
}
}
return count;
}