π Dasturchilar uchun foydli bo'lgan 7ta sayt
1οΈβ£ O'zingiz biladigan dasturlash tilingiz bo'yicha kod yozib bilimingizni sinab ko'rish imkoniyatini beruvchi sayt:
ππ» https://codewars.com/
2οΈβ£ CSS Grid'ga oid ajoyib misollarini osongina o'rganish imkoniyatini beruvchi sayt:
ππ» https://griddy.io/
3οΈβ£ Sizga animatsiyalarni yaratish, koβrish va ishga tushirishda yordam beradigan ajoyib sayt:
ππ» https://keyframes.app/animate
4οΈβ£ Kodlarni bir dasturlash tilidan boshqa dasturlash tiliga o'tqazib beruvchi sayt:
ππ» https://ide.onelang.io/
5οΈβ£ Ochiq manbali CSS, SVG va Figma UI Ikonkalari mavjud sayt:
ππ» https://css.gg/
6οΈβ£ Web dasturchilar uchun kerak bo'ladigan ikonkalar bor eng yaxshi sayt:
ππ» https://fontawesome.com/
7οΈβ£ VSCode'ni brauzerning oβzida foydalanish imkoniyatini beruvchi sayt:
ππ» https://vscode.dev/
ππΌ @frontend ππΌ
1οΈβ£ O'zingiz biladigan dasturlash tilingiz bo'yicha kod yozib bilimingizni sinab ko'rish imkoniyatini beruvchi sayt:
ππ» https://codewars.com/
2οΈβ£ CSS Grid'ga oid ajoyib misollarini osongina o'rganish imkoniyatini beruvchi sayt:
ππ» https://griddy.io/
3οΈβ£ Sizga animatsiyalarni yaratish, koβrish va ishga tushirishda yordam beradigan ajoyib sayt:
ππ» https://keyframes.app/animate
4οΈβ£ Kodlarni bir dasturlash tilidan boshqa dasturlash tiliga o'tqazib beruvchi sayt:
ππ» https://ide.onelang.io/
5οΈβ£ Ochiq manbali CSS, SVG va Figma UI Ikonkalari mavjud sayt:
ππ» https://css.gg/
6οΈβ£ Web dasturchilar uchun kerak bo'ladigan ikonkalar bor eng yaxshi sayt:
ππ» https://fontawesome.com/
7οΈβ£ VSCode'ni brauzerning oβzida foydalanish imkoniyatini beruvchi sayt:
ππ» https://vscode.dev/
ππΌ @frontend ππΌ
π7
#sorovnoma
Barchaga Assalomu aleykum π Ushbu so'rovnomada faol qatnashishingiz so'rab qo'lamiz! Boisi kanalimiz rivoji va sizlarga foydali bo'ladigan kontentlar tayyorlashimiz uchun. Rahmat ))
Barchaga Assalomu aleykum π Ushbu so'rovnomada faol qatnashishingiz so'rab qo'lamiz! Boisi kanalimiz rivoji va sizlarga foydali bo'ladigan kontentlar tayyorlashimiz uchun. Rahmat ))
Anonymous Poll
19%
Dasturchi bo'lib ishlayman
46%
Frontend'ni o'rganyapman
26%
Ish qidirmoqdaman (kursni tamomladim)
3%
Frontend dasturlashga qiziqaman
7%
O'rganmoqchiman
π₯9π3π―2
#vscplugin
Tailwind CSS IntelliSense
Tailwind CSS IntelliSense VSCode foydalanuvchilariga avtotoβldirish, sintaksisni ajratib koβrsatish va tahlil qilish kabi ilgβor funksiyalarni taqdim etish orqali Tailwindda ishlash imkoniyatingizni oshiradi.
π₯ Plaginni o'rnatish
ππΌ @frontend ππΌ
Tailwind CSS IntelliSense
Tailwind CSS IntelliSense VSCode foydalanuvchilariga avtotoβldirish, sintaksisni ajratib koβrsatish va tahlil qilish kabi ilgβor funksiyalarni taqdim etish orqali Tailwindda ishlash imkoniyatingizni oshiradi.
π₯ Plaginni o'rnatish
ππΌ @frontend ππΌ
β€4π1π₯1
Frontend pinned Β«#sorovnoma
Barchaga Assalomu aleykum π Ushbu so'rovnomada faol qatnashishingiz so'rab qo'lamiz! Boisi kanalimiz rivoji va sizlarga foydali bo'ladigan kontentlar tayyorlashimiz uchun. Rahmat ))Β»
Barchaga Assalomu aleykum π Ushbu so'rovnomada faol qatnashishingiz so'rab qo'lamiz! Boisi kanalimiz rivoji va sizlarga foydali bo'ladigan kontentlar tayyorlashimiz uchun. Rahmat ))Β»
#tavsiya #tajriba
π§ Sodda yechimlarni, murakkab yechimlardan ustun qo'ying (KISS printsipi)
"KISS printsipi" dasturlashda sodda va tushunarli kod yozishga qaratilgan bir tamoyil hisoblanadi. KISS so'zi "Keep It Simple, Stupid" degan iboraning bosh harflaridan tashkil topgan. Bu printsipga asosan, dasturchilar murakkab logika va arxitektura yordamida yozgan kodingizni kelajakda tushunishi, optimizatsiya qilishni va kengaytirishi kerak bo'ladigan dasturchilar haqida o'ylashlari kerak. Bu dasturchiga yarim yildan keyin o'zingiz aylanishingiz mumkin:) Kerak bo'lmagan joyda turli xil dasturiy tamoyillarni, arxitektura shablonlarini, dasturiy tillarning yangi xususiyatlarini v.k. ishlatishga urunmang! Chunki bu kodingizga ortiqcha murakkablik qo'shadi.
Sodda, tushunarli kod, genial va murakkab koddan yaxshiroq, chunki u o'qish va o'rganish, kengaytirish va debug qilish osonroq.
Loyihalaringizni arxitekturasini soddalashtirishga uruning. Bu sizga vaqt, xarajat va muammolardan tejaydi.
ππΌ @FrontEnd ππΌ
π§ Sodda yechimlarni, murakkab yechimlardan ustun qo'ying (KISS printsipi)
"KISS printsipi" dasturlashda sodda va tushunarli kod yozishga qaratilgan bir tamoyil hisoblanadi. KISS so'zi "Keep It Simple, Stupid" degan iboraning bosh harflaridan tashkil topgan. Bu printsipga asosan, dasturchilar murakkab logika va arxitektura yordamida yozgan kodingizni kelajakda tushunishi, optimizatsiya qilishni va kengaytirishi kerak bo'ladigan dasturchilar haqida o'ylashlari kerak. Bu dasturchiga yarim yildan keyin o'zingiz aylanishingiz mumkin:) Kerak bo'lmagan joyda turli xil dasturiy tamoyillarni, arxitektura shablonlarini, dasturiy tillarning yangi xususiyatlarini v.k. ishlatishga urunmang! Chunki bu kodingizga ortiqcha murakkablik qo'shadi.
Sodda, tushunarli kod, genial va murakkab koddan yaxshiroq, chunki u o'qish va o'rganish, kengaytirish va debug qilish osonroq.
Loyihalaringizni arxitekturasini soddalashtirishga uruning. Bu sizga vaqt, xarajat va muammolardan tejaydi.
ππΌ @FrontEnd ππΌ
Amaliyot qilish uchun TOP manbalar π
π Tayyor Dizayn shablonlari orqali HTML, CSS imkoniyatlaringizni kuchaytiring β codewell.cc
π Murakkabroq Frontend loyihalarida o'zingizni sinang β frontendpractice.com
π Bir oylik javascript chellenji orqali JS bo'yicha bilimlaringizni oshiring β javascript30.com
π CSSga doir turli darajadagi vazifalar jamlanmasi β cssbattle.dev
π Frontend boβyicha musobaqa oβtkazish uchun ajoyib sayt β 100dayscss.com
Frontendchilar kanali ππΌ @Frontend ππΌ
π Tayyor Dizayn shablonlari orqali HTML, CSS imkoniyatlaringizni kuchaytiring β codewell.cc
π Murakkabroq Frontend loyihalarida o'zingizni sinang β frontendpractice.com
π Bir oylik javascript chellenji orqali JS bo'yicha bilimlaringizni oshiring β javascript30.com
π CSSga doir turli darajadagi vazifalar jamlanmasi β cssbattle.dev
π Frontend boβyicha musobaqa oβtkazish uchun ajoyib sayt β 100dayscss.com
Frontendchilar kanali ππΌ @Frontend ππΌ
π5π₯1
This media is not supported in your browser
VIEW IN TELEGRAM
Bu holat hamma Frontend'chilarning boshidan oβtgan boβlsa kerak, shundaymi? π
Frontendchilar kanali ππΌ @Frontend
Frontendchilar kanali ππΌ @Frontend
π14π―2π1
let a = 5;ππ» @FrontendIQ > #js
let b = a-- + ++a;
let c = a++ - --b;
console.log(a+b+c);
β‘7π1
#amaliyot #api
Amaliyot qilish uchun 7 ta ajoyib bepul API π»
1οΈβ£ Web Search API
Agar siz Google kabi qidiruv tizimini yaratmoqchi bo'lsangiz yoki oddiy qidiruv tizimi vidjeti qilmoqchi bo'lsangiz, Web Search API buning uchun ajoyib vositadir.
Web Search
2οΈβ£ Open Weather Map API
Open Weather Map - bu dunyo bo'ylab so'nggi ob-havo haqida ma'lumot beruvchi bepul API. Siz qilishingiz kerak bo'lgan narsa shahar nomi yoki mamlakat nomini ko'rsatish va u o'sha hudud uchun ob-havo ma'lumotlarini qaytaradi
Open Weather Map
3οΈβ£ IMDB API
Agar siz kino ilovasini yaratmoqchi bo'lsangiz, IMDB API yana bir ajoyib API bo'lib, u so'ralgan filmlar, aktyorlar, seriallar, treylerlar, kino ratinlari va boshqalar uchun ma'lumotlarni qaytaradi.
IMDB
4οΈβ£ News API
News API ajoyib bepul API bo'lib, u sizga dunyo miqyosidagi yangiliklar haqidagi ma'lumotlarni taqdim etadi.
News
5οΈβ£ Instagram API
Instagram klonini yaratmoqchi bo'lsangiz. Instagram-dan real vaqtda ma'lumotlarni taqdim etadigan ushbu ajoyib bepul API-dan foydalanishingiz mumkin.
Instagram
6οΈβ£ API-Football
Agar siz Futbol natijalari ilovasini yaratmoqchi bo'lsangiz, API-Football siz uchun API bo'lib, u +940 futbol ligalari va kuboklarini taqdim etadi. Har 15 soniyada jonli va o'yindan oldingi koeffitsientlar, voqealar, tarkiblar, murabbiylar, o'yinchilar, eng yaxshi to'purarlar, turnir jadvali, statistika, transferlar.
API-Futbol
7οΈβ£ Meme Generator API
Meme Generator API - bu oddiy mem generatori bo'lib, u oldindan yuklangan tasvirni asosida memlarni yaratadi. Memlar JPEG tasvir fayl formatida taqdim etiladi.
Meme Generator
Do'stlaringizga ham ulashib qo'ying π
Bizga qo'shiling ππΌ @Frontend ππΌ
Amaliyot qilish uchun 7 ta ajoyib bepul API π»
1οΈβ£ Web Search API
Agar siz Google kabi qidiruv tizimini yaratmoqchi bo'lsangiz yoki oddiy qidiruv tizimi vidjeti qilmoqchi bo'lsangiz, Web Search API buning uchun ajoyib vositadir.
Web Search
2οΈβ£ Open Weather Map API
Open Weather Map - bu dunyo bo'ylab so'nggi ob-havo haqida ma'lumot beruvchi bepul API. Siz qilishingiz kerak bo'lgan narsa shahar nomi yoki mamlakat nomini ko'rsatish va u o'sha hudud uchun ob-havo ma'lumotlarini qaytaradi
Open Weather Map
3οΈβ£ IMDB API
Agar siz kino ilovasini yaratmoqchi bo'lsangiz, IMDB API yana bir ajoyib API bo'lib, u so'ralgan filmlar, aktyorlar, seriallar, treylerlar, kino ratinlari va boshqalar uchun ma'lumotlarni qaytaradi.
IMDB
4οΈβ£ News API
News API ajoyib bepul API bo'lib, u sizga dunyo miqyosidagi yangiliklar haqidagi ma'lumotlarni taqdim etadi.
News
5οΈβ£ Instagram API
Instagram klonini yaratmoqchi bo'lsangiz. Instagram-dan real vaqtda ma'lumotlarni taqdim etadigan ushbu ajoyib bepul API-dan foydalanishingiz mumkin.
6οΈβ£ API-Football
Agar siz Futbol natijalari ilovasini yaratmoqchi bo'lsangiz, API-Football siz uchun API bo'lib, u +940 futbol ligalari va kuboklarini taqdim etadi. Har 15 soniyada jonli va o'yindan oldingi koeffitsientlar, voqealar, tarkiblar, murabbiylar, o'yinchilar, eng yaxshi to'purarlar, turnir jadvali, statistika, transferlar.
API-Futbol
7οΈβ£ Meme Generator API
Meme Generator API - bu oddiy mem generatori bo'lib, u oldindan yuklangan tasvirni asosida memlarni yaratadi. Memlar JPEG tasvir fayl formatida taqdim etiladi.
Meme Generator
Dunyoning eng katta API hubi - rapidapi.com
Do'stlaringizga ham ulashib qo'ying π
Bizga qo'shiling ππΌ @Frontend ππΌ
π4π₯3
#js
Topshiriq: Massivdagi har bir elementni sonini aniqlash.
Yechim:
Natija:
Bu JavaScript funktsiyasi berilgan massivdagi har bir elementni sanaydi va natijani obyekt (object) ko'rinishida qaytaradi. Funksiyada reduce metodidan foydalanilgan. reduce metodi massivdagi har bir elementni bitta qiymatga o'zlashtirish imkonini beradi.
Sizda qanday yechim bor, izohlarda yozib qoldiring π¬
Do'stlarga ulashing π
Bizga qo'shiling ππΌ @Frontend ππΌ
Topshiriq: Massivdagi har bir elementni sonini aniqlash.
Yechim:
function countElements(arr) {
return arr.reduce((acc, element) => {
acc[element] = (acc[element] || 0) + 1;
return acc;
}, {});
}
// Misol uchun
const tags = ["#javascript", "#react", "#patterns", "#css", "#interview", "#javascript", "#css"]
console.log(countElements(tags));
Natija:
{
"#javascript": 2,
"#react": 1,
"#patterns": 1,
"#css": 2,
"#interview": 1
}
Bu JavaScript funktsiyasi berilgan massivdagi har bir elementni sanaydi va natijani obyekt (object) ko'rinishida qaytaradi. Funksiyada reduce metodidan foydalanilgan. reduce metodi massivdagi har bir elementni bitta qiymatga o'zlashtirish imkonini beradi.
Sizda qanday yechim bor, izohlarda yozib qoldiring π¬
Do'stlarga ulashing π
Bizga qo'shiling ππΌ @Frontend ππΌ
π3π₯2
This media is not supported in your browser
VIEW IN TELEGRAM
#vsCode #foydali
π±Sticky Scroll
Visual Studio Code-ning yangi tahrirlovchisi Sticky Scroll xususiyati, sizning kodlaringizni oβqishda yordam beradi. Bu xususiyat yordamida, siz kodlaringizni oβqishda, kodning qaysi qismida ekanligingizni bilib turishingiz mumkin, chunki boβlimlar yuqoriga yopishtiriladi, masalan, klass, funksiya aniqlanishi va hokazo...
β VS Code'da ishga tushirish:
Do'stlarga ulashing π
Bizga qo'shiling ππΌ @Frontend ππΌ
π±Sticky Scroll
Visual Studio Code-ning yangi tahrirlovchisi Sticky Scroll xususiyati, sizning kodlaringizni oβqishda yordam beradi. Bu xususiyat yordamida, siz kodlaringizni oβqishda, kodning qaysi qismida ekanligingizni bilib turishingiz mumkin, chunki boβlimlar yuqoriga yopishtiriladi, masalan, klass, funksiya aniqlanishi va hokazo...
β VS Code'da ishga tushirish:
βοΈ settings β‘οΈ editor β‘οΈ Sticky Scroll
Do'stlarga ulashing π
Bizga qo'shiling ππΌ @Frontend ππΌ
π6
Frontend
#vsCode #foydali π±Sticky Scroll Visual Studio Code-ning yangi tahrirlovchisi Sticky Scroll xususiyati, sizning kodlaringizni oβqishda yordam beradi. Bu xususiyat yordamida, siz kodlaringizni oβqishda, kodning qaysi qismida ekanligingizni bilib turishingizβ¦
This media is not supported in your browser
VIEW IN TELEGRAM
βπ
π12
This media is not supported in your browser
VIEW IN TELEGRAM
Geolokatsiyani aniqlash va uni xaritada ko'rsatish πΊ
Geolocation API yordamida foydalanuvchining koordinatalarini olishingiz va keyin ularni xaritadan joyni topish uchun ishlatishingiz mumkin.
ππΌ @Frontend ππΌ
Geolocation API yordamida foydalanuvchining koordinatalarini olishingiz va keyin ularni xaritadan joyni topish uchun ishlatishingiz mumkin.
<p class="status"></p>
<iframe class="map" src=""></iframe>
<button class="button">Men qayerdaman?</button>
const button = document.querySelector(".button"),
map = document.querySelector(".map"),
status = document.querySelector(".status");
button.addEventListener('click', findLocation);
function findLocation() {
if (!navigator.geolocation) {
status.textContent = 'ΠΠ°Ρ Π±ΡΠ°ΡΠ·Π΅Ρ Π½Π΅ Π΄ΡΡΠΆΠΈΡ Ρ Π³Π΅ΠΎΠ»ΠΎΠΊΠ°ΡΠΈΠ΅ΠΉ...';
} else {
navigator.geolocation.getCurrentPosition(success, error);
}
function success(position) {
const { longitude, latitude } = position.coords;
map.src = `https://www.openstreetmap.org/export/embed.html?bbox=${longitude}%2C${latitude}&layer=mapnik`;
}
function error() {
status.textContent = 'Baribir topaman!:0';
}
}
ππΌ @Frontend ππΌ
π4π₯2π―2