Frontend
#100DaysOfFrontend
Bugungi vazifa yuboriladi:
Juma (12.07.2024), soat: 20:00
Deadline:
Shanba (13.07.2024), soat: 20:00
Qolgan kunlari shu tarzda davom etadi...
Juma (12.07.2024), soat: 20:00
Deadline:
Shanba (13.07.2024), soat: 20:00
Qolgan kunlari shu tarzda davom etadi...
🔥10👍4
DRY termini
DRY prinsipining ko'plab afzalliklari bor:
Aytaylik yuqoridagi kod misolida agar biz DRY prinsipiga amal qilinmagan holatdagisiga qaraylik. Agarda "button"ning biror xususiyatini o'zgartirmoqchi bo'lsak biz barcha "button"larni o'sha xususiyatlarnini bittama-bitta yozib chiqishga majbur bo'lamiz. Aytaylik "border-radius" xususiyati qiymatini 12px qilmoqchimiz.
Lekin biz DRY prinsipiga amal qilingan holatdagi kodga qarasak, ".button" classli elementning xususiyatini o'zgartirsak ".button" classli barcha elementlarni xususiyatlarini bitta kod blokida o'zgartira olamiz.
Masalan bunday ko'rinishda foydalanamiz:
Humoyunmirzo
DRY (Don't Repeat Yourself) prinsipi dasturiy ta'minot ishlab chiqishda juda muhim hisoblanadi va uning asosiy maqsadi kodni takrorlashni oldini olishdir. Bu prinsip dasturiy ta'minotning o'qilishini, qo'llab-quvvatlanishini va kengaytirilishini osonlashtiradi.
DRY prinsipining ko'plab afzalliklari bor:
Aytaylik yuqoridagi kod misolida agar biz DRY prinsipiga amal qilinmagan holatdagisiga qaraylik. Agarda "button"ning biror xususiyatini o'zgartirmoqchi bo'lsak biz barcha "button"larni o'sha xususiyatlarnini bittama-bitta yozib chiqishga majbur bo'lamiz. Aytaylik "border-radius" xususiyati qiymatini 12px qilmoqchimiz.
Lekin biz DRY prinsipiga amal qilingan holatdagi kodga qarasak, ".button" classli elementning xususiyatini o'zgartirsak ".button" classli barcha elementlarni xususiyatlarini bitta kod blokida o'zgartira olamiz.
Masalan bunday ko'rinishda foydalanamiz:
<button class="button button-primary">Button</button>
Humoyunmirzo
👍8🔥5
Frontend pinned «#100DaysOfFrontend #frontend Assalomu aleykum hammaga 👋 ⚡️ Bugundan (12.07.2024) #frontendChallenge boshlangunga qadar #beginner'lar uchun mo'ljallangan yangi #100DaysOfFrontend chellenjiga start beramiz! #100DaysOfFrontend haqida: Kimlar uchun (daraja):…»
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9🔥7
#devTools #frontend
React Dev Tools / Vuejs Devtools: Ushbu kengaytmalar React yoki Vue ilovalarini tuzatish uchun zarurdir. Siz komponentlarni ko'rib chiqishingiz, ularning xususiyatlari va holatlarini ko'rishingiz mumkin.
Redux Dev Tools: Ilovangizda Redux'dan foydalansangiz bu uning holatini tuzatishga yordam beradi.
JSON Formatter: JSON faylini yuborsangiz, uni chiroyli formatda ko'rsatiladi.
ColorZilla: ColorZilla sizga kerakli rangni olishga yordam beradi.
WhatFont: Bu kengaytma veb-saytdan shriftni aniqlaydi.
Mobile simulator: Responsive testing
Screenshot Tool: Tezkor skrinshotlar olishga imkon beradigan skrinshot vositasi
@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥4
#100DaysOfFrontend #beginner
3 - kun | Contact us
Texnologiya: Html, Css/Css kutubxonalari, Js
Dizayn: Figma (responsive)
Deadline: 15.07.2024 — 20:00
P.S. Bajargan ishingizga havolani(GitHub) ushbu post izoh qismiga yuborishingiz mumkin! Hostingga qo'yish ixtiyoriy.
@frontend
👍5🔥4
#js #leetCode #frontend
Videoga havola
@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥3
Forwarded from Uzbek Developers
#mazui #dasturlash #vuejs
Maz-UI — bu Vue.js uchun mo‘ljallangan yuqori sifatli komponentlar kutubxonasidir. U Mazen Hisham tomonidan yaratilgan va foydalanuvchilarga tez va oson veb-saytlar yaratish uchun keng qamrovli, responsiv va oson sozlanadigan komponentlar to‘plamini taqdim etadi.
uzbekdevs.uz / @uzbekdevs
🔥4👍2
#vue #frontend
<div v-for="car in cars" :key="car.id">
<h2>{{ car.make }} {{ car.model }}</h2>
</div>
cars[] avtomobillar ro'yxati va har bir avtomobil quyidagi tuzilishga ega:interface Car {
make: string; // Avtomobil markasi
model: string; // Modeli
id: string; // id
}<div v-for="{id, make, model} in cars" :key="id">
<h2>{{ make }} {{ model }}</h2>
</div>@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8👍2
#charts #ui
https://ui.shadcn.com/charts
@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥2
This media is not supported in your browser
VIEW IN TELEGRAM
#ai #gemini
Gemini AI - Google Search asosida ma'lumotlarni qayta ishlaydi, shuning uchun bu sizning vaqtingizni anchagina tejaydi.
https://gemini.google.com/app
@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍4
This media is not supported in your browser
VIEW IN TELEGRAM
#100DaysOfFrontend #beginner
5 - kun | Image carusel
Texnologiya: Html, Css/Css kutubxonalari, Js
Dizayn: Figma
Deadline: 17.07.2024 — 20:00
P.S. Bajargan ishingizga havolani(GitHub) ushbu post izoh qismiga yuborishingiz mumkin! Hostingga qo'yish ixtiyoriy.
@frontend
🔥8👍6
#miniProject #frontend
HTML, CSS va JavaScriptdan foydalanib yaratilgan turli xil mini-loyihalari to'plangan. Ushbu loyihalar yangi boshlovchilar uchun o'zlarini sinab ko'rish va asosiy tushunchalarni o'rganish uchun ajoyib manbadir.
Har bir loyiha uchun HTML, CSS va JavaScript kodlari, shuningdek, loyihaning jonli demosi mavjud.
GitHub sahifaga havola
@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍6🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
#javascript #library #frontend
Bu JavaScript kutubxonasi foydalanuvchilarni interfeys bilan tanishtirish, yo'l-yo'riq berish imkoniyatini beradi. U kichik hajmli (taxminan 5kb), moslashuvchan , har qanday elementni ta'kidlab chiqarish imkoniyatini beradi.
doc : https://driverjs.com/docs/installation
@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥8👍3
#js #library #frontend
— SweetAlert
— React-Toastify
— Toastr
— Essential JS 2
— chakra-ui/alert
— Vue Toastification
— Sonner
— Awesome Notifications
@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍7🔥2