واحد های اندازه گیری CSS (قسمت سوم)

واحدهای اندازه‌گیری معرفی شده در container queries، ویژگی جدیدی در CSS هستند که به شما این امکان را می‌دهند تا استایل‌ها را بر اساس ابعاد یک container مشخص کنید. با استفاده از این واحدها، می‌توانید ابعاد المان‌ها را نسبت به ابعاد container تنظیم کنید، که باعث افزایش انعطاف‌پذیری و قابلیت استفاده در containerهای مختلف می‌شود[1].

‏cqw معادل با 1% از عرض container است
‏cqh با 1% از ارتفاع آن
‏cqi و cqb به ترتیب به 1% از اندازه inline و block container اشاره دارند
‏cqmin و cqmax کمترین و بیشترین مقدار از cqi و cqb را نشان می‌دهند

با استفاده از این واحدها، می‌توانید به راحتی استایل‌ها را با توجه به ابعاد متغیر container تنظیم کرده و واکنش مناسبی نسبت به تغییرات در ابعاد container نشان دهید[1].

🔗https://ishadeed.com/article/css-container-query-guide/
#️⃣#tip #css #واحد_های_اندازه_گیری
🆔@IR_javascript

‏Flagpack مجموعه ای از بیش از 250 پرچم کشورها را در اختیار شما قرار می دهد که به صورت PNG و SVG ارائه می شوند.
علاوه بر این، Flagpack شامل فایل های منبع Figma و Sketch برای تمام پرچم ها است، به طوری که می توانید آنها را به راحتی سفارشی کنید.
و کامپوننت های آماده برای React، Vue و Svelte را نیز ارائه می دهد، بنابراین می توانید پرچم ها را به سرعت و به آسانی به وب سایت خود اضافه کنید.
تحت مجوز MIT منتشر شده است، بنابراین می توانید با خیال راحت از آن در پروژه های خود استفاده کنید.

🔗https://flagpack.xyz/
#️⃣#tool
🆔@IR_javascript

‏CSS برای تکمیل توابع ریاضی قدیمی (مانند calc()) توابع ریاضی جدید زیادی اضافه کرده است. همه آنها در نهایت یک مقدار عددی را نشان می دهند، اما ظرافت های نحوه عملکرد آنها همیشه از ابتدا واضح نیست.

در CSS، تابع rem , mod دسترسی داریم. این تابع دو پارامتر می گیرد، درست مانند عملگر باقی‌مانده (%) در جاوااسکریپت که با دو عدد کار می کند. از نظر ریاضی، عدد اول معرفِ صورتِ‌ کسر (dividend) و عدد دوم معرفِ مخرج کسر (divisor) است.
اما در عمل این دو تابع تفاوت هایی را در محاسبه باقی مانده در اعداد منفی نشان می دهند
به طور کلی اگر می خواهید باقی مانده یک مقدار را محاسبه کنید rem رفتار مناسب تری را نشان می دهد

🔗https://danielcwilson.com/posts/mathematicss-rem-mod/
#️⃣#tip #css
🆔@IR_javascript

متد at() در آرایه‌ها
متد at() با اعداد مثبت مانند [] عمل می‌کند، اما با دادن اعداد منفی به این متد می‌توانیم به مقادیر از انتهای آرایه دسترسی پیدا کنیم.

به جای نوشتن:

const arr = [1, 2, 3, 4];
arr[arr.length - 2]; // 3
arr.slice(-2)[0]; // 3

const str = "1234";
str[str.length - 2]; // '3'
str.slice(-2)[0]; // '3'

می‌توانیم از این روش استفاده کنیم:

const arr = [1, 2, 3, 4];
arr.at(-2); // 3

const str = "1234";
str.at(-2); // '3'

مزایای استفاده از روش at() :
خوانایی کد را افزایش می‌دهد.
نیازی به محاسبه طول آرایه یا رشته نیست.
در هنگام کار با رشته‌ها و آرایه‌ها، مختصر و مفید است.

🔗https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at
#️⃣#tip
🆔@IR_javascript

Firefly Button

🔗https://codepen.io/ShaeSco/pen/xxeeeam
#️⃣#code
🆔@IR_javascript

‏Cascading Layers (لایه‌های آبشاری)

مرورگرها برای تعیین اینکه کدام سبک را به یک عنصر اعمال کنند، از اصل آبشاری (cascading) استفاده می‌کنند. زمانی که (وزن انتخابگر) برابر باشد، آخرین را اعمال می‌کند:

.card {
  background-color: rgb(175, 238, 238);
}
.card {
  background-color: rgb(52, 0, 148);
}

در این کد، رنگ پس‌زمینه rgb(52, 0, 148) به کارت اعمال می‌شود، زیرا آخرین مورد است.

گاهی اوقات لازم است که استایل‌ها را به طور خاص بازنویسی کنیم و برای این کار از تعدیل کننده !important استفاده می‌شود. این به شما امکان می‌دهد مقدار ویژگی را علی‌رغم خاصیت و آبشار معمولی اعمال کنید.

.card {
  background-color: rgb(175, 238, 238) !important;
}
.card {
  background-color: rgb(52, 0, 148);
}

حالا می‌توانیم از طریق قاعده @layer ترتیب آبشار را تعیین کنیم. و توسعه‌دهنده می‌تواند در کد، اولویت استایل را کنترل کند. در این حالت، کلمه کلیدی @layer را می‌نویسیم، نام‌های لایه‌ای را که می‌خواهیم تعریف کنیم، مشخص می‌کنیم و کلاس ها را داخل {} می‌نویسیم.

@layer نام-لایه {
  کلاس ها
}

ترتیب نوشتن لایه‌ها ، اولویت آنها را تعیین می‌کند. آخرین لایه اولویت دارد.

@layer dark, light;

@layer light {
  .card {
    width: 500px;
    height: 150px;
    background-color: paleturquoise;
    text-wrap: balance;
  }
}
@layer dark {
  .card {
    background-color: rgb(148, 59, 0);
  }
}

• ما از قاعده @layer استفاده کرده‌ایم.
• نام لایه‌ها و ترتیب آنها را مشخص کرده‌ایم. آخرین لایه اولویت دارد.
• قوانین مربوط به استایل‌ها را در لایه‌ها احاطه کرده‌ایم.

در دنیای واقعی، @layer می‌تواند در هنگام کار با پروژه‌های قدیمی که به CSS دسترسی دارند، استفاده شود. می‌توانید استایل‌های قدیمی را در لایه legacy و استایل‌های جدید را در لایه new قرار دهید و به طور واضح ترتیب اولویت را تعیین کنید.

#️⃣#tip
🆔@IR_javascript

Undesign

مجموعه ای جالب از تکه های کد، رنگ ها، گرادیان ها، فونت ها، نمادها و انیمیشن های مختلف - به طور کلی، انواع چیزهای مفید برای توسعه دهندگان فرانت اند.

🔗https://undesign.learn.uno/
#️⃣#tool
🆔@IR_javascript

Acrobatic Preloader

🔗https://codepen.io/jkantner/pen/VwrYggy
#️⃣#code
🆔@IR_javascript

‏استفاده از WebGL برای ایجاد گرافیک سه‌بعدی در برنامه‌های وب

‏WebGL یک API برای ایجاد گرافیک سه‌بعدی تعاملی در برنامه‌های وب ارائه می‌دهد و کتابخانه Three.js این فرآیند را ساده‌تر می‌کند.
#️⃣#tip
🆔@IR_javascript

‏Talend API Tester: ابزاری قدرتمند برای تست API
‏Talend API Tester یک ابزار جامع و کاربر پسند برای تعامل با APIهای HTTP و REST است. این ابزار به شما امکان می دهد تا به راحتی APIها را کشف کنید، درخواست ها را ارسال کنید، پاسخ ها را بررسی کنید و رفتار API را تأیید کنید.
🔗https://chromewebstore.google.com/detail/talend-api-tester-free-ed/aejoelaoggembcahagimdiliamlcdmfm
#️⃣#tool
🆔@IR_javascript

شمارنده قیمت

این شمارنده قیمت به شما امکان می دهد قیمت را با استفاده از نقاط مشخص شده روی اعداد تنظیم کنید. شما می توانید نوار لغزنده را به طور مستقیم به نقطه دلخواه خود بکشید یا روی هر نقطه از مقیاس کلیک کنید.

🔗https://codepen.io/konstantindenerz/pen/zYJzvEQ
#️⃣#code
🆔@IR_javascript

‏GPT-4 به طور محدود در افزونه هوش مصنوعی IDE Codeium در دسترس است

نسخه محدود GPT-4 اکنون در افزونه هوش مصنوعی IDE Codeium در دسترس است. شما می توانید برای امتحان رایگان آن از طریق لینک زیر ثبت نام کنید ممکن است تا باز شدن دسترسی 24 ساعت طول بکشد

🔗https://codeium.com/waitlist/gpt-4?referrer=chat_homepage
#️⃣#tool
🆔@IR_javascript

‏JSDoc 3 یک ابزار تولید مستندات API برای جاوااسکریپت است، مشابه Javadoc یا phpDocumentor.

با JSDoc 3، شما می توانید توضیحات مربوط به API را به صورت مستقیم درون کد منبع خود، در کنار کد اصلی، اضافه کنید. ابزار JSDoc سپس کد منبع شما را اسکن کرده و یک وب سایت مستندات HTML برایتان تولید می کند.

🔗https://codeium.com/waitlist/gpt-4?referrer=chat_homepage
#️⃣#npm_module
🆔@IR_javascript

Storyset

کتابخانه ای رایگان از تصاویر گرافیکی قابل تنظیم برای پروژه شما

‏Storyset یک وب سایت است که مجموعه ای از تصاویر گرافیکی با کیفیت بالا را به صورت رایگان ارائه می دهد. این تصاویر را می توانید برای استفاده در وب سایت، اپلیکیشن، ارائه، یا هر نوع پروژه دیگری دانلود و به دلخواه خودتان تنظیم کنید.

🔗https://storyset.com/
#️⃣#tool
🆔@IR_javascript

Ecommerce App
🔗https://www.figma.com/community/file/1364542582137903412

#️⃣#design
🆔@IR_javascript

‏Brizy Cloud یک پلتفرم ساخت وب سایت بصری و آسان است که به شما امکان می دهد بدون نیاز به دانش کدنویسی، وب سایت های زیبا و حرفه ای ایجاد کنید. این پلتفرم دارای مجموعه ای از ابزارها و ویژگی های قدرتمند است که به شما کمک می کند تا به سرعت و به سادگی وب سایت خود را راه اندازی و مدیریت کنید.

🔗https://www.brizy.cloud/
#️⃣#tool
🆔@IR_javascript

اگر به دنبال یک کتابخانه UI جدید برای پروژه خود هستید، Ark گزینه ای عالی است که باید در نظر بگیرید. این کتابخانه مدرن، قدرتمند و قابل دسترس است و توسط تیمی از توسعه‌دهندگان پشتیبانی می‌شود.
‏ Ark یک کتابخانه بدون سر است، به این معنی که هیچ سبک پیش‌فرضی ندارد و به شما امکان می‌دهد تا ظاهر UI خود را با استفاده از سیستم‌های مختلف استایل مانند CSS Modules یا Emotion کاملاً سفارشی کنید.

🔗https://ark-ui.com/
#️⃣#npm_module
🆔@IR_javascript

ماشین‌ها منطق را کنترل می‌کنند، شما رابط کاربری را کنترل کنید

‏Zag، رفتار و منطق درونی کامپوننت‌های رابط کاربری شما را مدیریت می‌کند. این به شما امکان می‌دهد تا بر جنبه بصری تمرکز کنید و از راه‌حل‌های استایل‌دهی مورد علاقه خود مانند Material UI یا Tailwind CSS برای ایجاد یک رابط کاربری زیبا و سازگار با سیستم طراحی خود استفاده کنید.

<script setup>
import * as numberInput from "@zag-js/number-input";
import { normalizeProps, useMachine } from "@zag-js/vue";
import { computed } from "vue";
const [state, send] = useMachine(numberInput.machine({ id: "1" }));
const api = computed(() =>
  numberInput.connect(state.value, send, normalizeProps)
);
</script>
<template>
  <div ref="ref" v-bind="api.rootProps">
    <label v-bind="api.labelProps">Enter number</label>
    <div>
      <button v-bind="api.decrementTriggerProps">DEC</button>
      <input v-bind="api.inputProps" />
      <button v-bind="api.incrementTriggerProps">INC</button>
    </div>
  </div>
</template>

🔗https://zagjs.com/
#️⃣#npm_module
🆔@IR_javascript