Frontend
3.46K subscribers
383 photos
53 videos
23 files
364 links
Barchasi Frontend dasturlash haqida!

- So'nggi yangiliklar
- Eng yaxshi resurslar
- Intervyu savol - javoblar

Vakansiyalar: @frontendVacancy

Reklama va hamkorlik: @jaydariX
Download Telegram
πŸ’Ž 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 πŸ‘ˆπŸΌ
πŸ‘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 ))
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 πŸ‘ˆπŸΌ
❀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 ))
Β»
#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 πŸ‘ˆπŸΌ
#js #quiz

let a = 3;
let b = new Number(3);
let c = 3;

console.log(a == b);
console.log(a === b);
console.log(b === c);


πŸ‘‰πŸΌ @FrontEnd πŸ‘ˆπŸΌ
#hazil

Yig'ilgan tajriba πŸ˜…

πŸ‘‰πŸΌ @Frontend πŸ‘ˆπŸΌ
😁16πŸ‘3
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 πŸ‘ˆπŸΌ
πŸ‘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
😁14πŸ’―2πŸ‘1
Miyyani press qiladigan joyi 😁

let a = 5;
let b = a-- + ++a;
let c = a++ - --b;

console.log(a+b+c);
πŸ‘‰πŸ» @FrontendIQ > #js
⚑7πŸ‘1
Frontend
console.log(a+b+c);
Natija qanday bo'ladi ?
Anonymous Quiz
27%
14
24%
12
40%
11
9%
13
πŸ†7
#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

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:
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:
βš™οΈ settings ➑️ editor ➑️ Sticky Scroll


Do'stlarga ulashing πŸš€

Bizga qo'shiling πŸ‘‰πŸΌ @Frontend πŸ‘ˆπŸΌ
πŸ‘6
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.

        <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}&amp;layer=mapnik`;
}

function error() {
status.textContent = 'Baribir topaman!:0';
}
}


πŸ‘‰πŸΌ @Frontend πŸ‘ˆπŸΌ
πŸ‘4πŸ”₯2πŸ’―2
#vue #amaliyot

πŸ’Ό Lavozim: Frontend Vue dasturchi

NDC(ndc.uz) IT kompaniyasi Frontend VueJS bo'yicha Internship e'lon qiladi!

🌐 Batafsil o'qing

Vakansiyalar: πŸ‘‰πŸΌ @frontendVacancy
πŸ”₯2πŸ‘¨β€πŸ’»2πŸ‘1
Frontend vacancy
#js #tailwindcss #vakansiya

πŸ’Ό Lavozim: Frontend dasturchi
Yangi vakansiya bilan tanishib chiqishingiz mumkin πŸ‘†πŸ»

πŸ‘‰πŸΌ @Frontend πŸ‘ˆπŸΌ
πŸ”₯4