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

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

با استفاده از این هرم ساده کیفیت کد، می‌توانید درخواست‌های pull خود را نه تنها جذاب، بلکه مفیدتر نیز کنید
این هرم برای بحث در مورد کیفیت کد است. از موارد اساسی تا مواردی که کد شما را واقعاً زیبا می‌کند.
نکات:
این هرم فقط یک راهنما است و می‌توانید آن را متناسب با نیازهای خودتان تنظیم کنید.
مهم است که در طول کدنویسی به طور مؤثر با یکدیگر ارتباط برقرار کنید.
هدف بهبود کیفیت کد و کمک به توسعه‌دهندگان برای یادگیری و رشد است.


#️⃣#tip
🆔@IR_javascript

تجرید (انتزاع) داده در JavaScript
در برنامه‌نویسی، تجرید داده به فرآیند پنهان کردن جزئیات پیاده‌سازی داده و ارائه یک رابط برای کار با آن داده‌ها اشاره دارد. این امر به توسعه‌دهندگان اجازه می‌دهد تا از داده‌ها بدون نیاز به دانستن نحوه ذخیره و پردازش آنها در سطح داخلی استفاده کنند.

در JavaScript، تجرید داده معمولاً با استفاده از اشیاء و توابع پیاده‌سازی می‌شود. به عنوان مثال، می‌توانید یک شیء برای نشان دادن یک کاربر با ویژگی‌هایی مانند نام، سن، ایمیل و روش‌هایی برای کار با آن داده‌ها مانند تغییر نام یا ارسال ایمیل ایجاد کنید.

مثال تجرید داده ساده در JavaScript:

// ایجاد یک نمونه کاربر جدید
let user1 = new User("Алиса", 18, "alice@example.com");
// تغییر نام کاربر
user1.changeName("Вовчик");
// ارسال ایمیل به کاربر
user1.sendEmail("Привет, Вовчик! Добро пожаловать на наш сайт.");

در مجموع، تجرید داده یک ابزار قدرتمند است که می‌تواند به توسعه‌دهندگان JavaScript کمک کند تا کدهای ساده‌تر، قابل نگهداری‌تر، قابل استفاده مجدد و قابل تست‌تر بنویسند.

#️⃣#tip
🆔@IR_javascript

فوتو استوک ناب با عکس‌های زنده، ویدیوهای جذاب و قالب‌های تمیز
مجموعه‌ای از عکس‌ها، تصاویر و ویدیوها که می‌توان از آن‌ها برای اهداف مختلف مانند طراحی گرافیک، بازاریابی و تبلیغات استفاده کرد.


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

‏Fluid برای Tailwind CSS: استایل‌های واکنش‌گرا روان‌تر با کد کمتر.

پیشوند ~ یک style را fluid می‌کند
ابزارهای سیال دارای یک مقدار شروع و پایان هستند که با / از هم جدا شده‌اند
ابزارهای سیال زمانی که اندازه پنجره دید بین نقطه شروع و پایان آن‌ها قرار گیرد، بین مقدار شروع و پایان خود درون‌یابی می‌کنند.
نقاطه شروع و پایان به صورت پیش فرض به کوچکترین و بزرگترین صفحه نمایش تنظیم می‌شوند، اما می‌توان آن‌ها را برای هر ابزار به صورت سفارشی یا لغو کرد.

🔗https://fluid.tw/
#️⃣#tool
🆔@IR_javascript

بحران آتنا: یک بازی باکیفیت ساخته شده با جاوااسکریپت

بحران آتنا یک بازی استراتژی نوبت به نوبت تجاری است که در فروشگاه استیم در دسترس است، اما حالا موتور و ابزارهای آن به صورت متن‌باز [Open Source] منتشر شده‌اند.

🔗https://cpojer.net/posts/athena-crisis-open-source
#️⃣#code
🆔@IR_javascript

با استفاده از (container query)، می‌توانیم کامپوننت‌ها این قابلیت را بدهیم که بر اساس عرضه‌ی محتوای خودشان و نه کل صفحه (viewport) گسترش پیدا کنند.

.main {
  container-name: main;
  container-type: inline-size;
}

@container main (min-width: 370px) {
  .search-label,
  .filter-label {
    display: block;
  }
}

🔗https://ishadeed.com/article/css-container-query-guide/
#️⃣#tip #css
🆔@IR_javascript

واحد های اندازه گیری 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