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
#100DaysOfFrontend #beginner
6 - kun | Login - Sign up
Texnologiya: Html, Css/Css kutubxonalari, Js
Dizayn: Figma
Deadline: 18.07.2024 β 20:00
P.S. Bajargan ishingizga havolani(GitHub) ushbu post izoh qismiga yuborishingiz mumkin! Hostingga qo'yish ixtiyoriy.
@frontend
π₯9π5
#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
#portfolio #frontend
Frontend dasturchining portfolio saytida
"Nimalar bo'lishi kerak ?"
- Qisqa tarjimai hol
- Ta'lim va sohadagi tajribangiz
- Shaxsiy fotosurat yoki avatar qo'shing
- Frontend dasturlashda foydalanadigan barcha texnologiyalar ro'yxatini kiriting.
- Har bir texnologiya uchun sizning tajriba darajangizni ko'rsating.
- Qo'shimcha ko'nikmalarni, masalan, dizayn yoki UX/UI
- Eng yaxshi ishlaringizni joylang.
- Har bir loyiha uchun qisqa tavsif, ishlatilgan texnologiyalar va loyihada sizning rolingiz.
- Loyihalarni filtrlash yoki qidirish imkoniyatini.
- Siz bilan bog'lanishga qulay bo'lgan elektron pochta/telegramga havola, manzilingiz va telefon raqamingiz.
- Ijtimoiy media profillaringizga havolalarni kiriting.
Saytingiz vizual jihatdan qiziqarli va foydalanish uchun oson bo'lishi kerak. Mobil qurilmalar uchun moslashuvchan dizayndan foydalaning.
Portfoliongizni muntazam yangilab boring. Eng yaxshi loyihangizni namoyish qilish uchun yuqori sifatli tasvirlar ishlating.
Ba'zi namunalar:
1. https://sarkar.fr
2. https://henryheffernan.com
@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
π₯7π4