قانون @starting-style برای انیمیشن‌های ورود
از @starting-style برای اعمال استایلی استفاده کنید که مرورگر قبل از باز شدن عنصر در صفحه باید داشته باشد. این حالت «قبل از باز شدن» است (جایی که از آن انیمیشن ورود را شروع می‌کنید).

/* 0. حالت قبل از باز شدن */
/* نقطه شروع برای انتقال */
@starting-style {
  .item {
    opacity: 0;
    height: 0;
  }
}

/* 1. حالت باز بودن */
/* حالتی که عنصر باز است + منطق انتقال */
.item {
  height: 3rem;
  display: grid;
  overflow: hidden;
  transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

#️⃣#tip #css
🆔@IR_javascript

‏JS2Flowchart: کتابخانه‌ای برای تبدیل کد جاوا اسکریپت به نمودار

کتابخانه‌ای است که برای تبدیل کد جاوا اسکریپت به نمودارهای بصری به کار می‌رود. این کتابخانه به شما امکان می‌دهد تا کد خود را به صورت بصری درک کنید، اشکال‌زدایی کنید و مستند کنید.
🔗https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

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

🔗https://github.com/e-oj/Magic-Grid

#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

اگر از کیبورد بیش از حد استفاده می کنید!
یا در کل با انگشتان‌تان زیاد از حد کار می‌کنید!
برگرفته از: @EslahiClub
#️⃣#exercise
👥@IR_javascript_group
🆔@IR_javascript

‏LokiJS یک کتابخانه جاوا اسکریپت است که یک پایگاه داده درون حافظه in-memory سبک وزن ارائه می‌دهد که برای استفاده در مرورگر یا در محیط Node.js طراحی شده است. این کتابخانه نیازی به نصب سرورها یا پلاگین‌های اضافی ندارد و به طور کامل در حافظه کار می‌کند که سرعت بالایی را برای عملیات ارائه می‌دهد.

🔗https://github.com/techfort/LokiJS

#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏currentColor یک کلمه کلیدی CSS است که مقدار رنگ فعلی تعیین شده برای آن انتخابگر، چه به صورت صریح و چه به صورت ارثی، را به خود می‌گیرد.

.btn {
  padding: 0.5em 1.25em;
  text-transform: uppercase;
  text-decoration: none;
  background: white;
  color: limegreen;
  border: 1px solid currentColor;
  /* border نیز به رنگ limegreen خواهد بود */
}

‏currentColor اغلب در آیکون‌های SVG استفاده می‌شود تا رنگی را که به عنصر حاوی آن اعمال شده است، به خود آیکون منتقل کند. در این حالت، SVG از color: currentColor استفاده می‌کند. این امر در مجموعه‌های آیکون رایج معمولاً به این صورت است.

<div class="icon-wrapper">
  <svg fill="currentColor">
    </svg>
</div>

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

نقشه راه کوچک
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

اشهد ان علی ولی الله… عید سعید غدیر مبارک

امام صادق (علیه السلام) :
غذا دادن به یک مومن در روز عید غدیر ثواب اطعام یک میلیون پیامبر و صدیق «در راس آنها خود ائمه معصومین(علیها السلام)» و یک میلیون شهید «در راس آنها حضرت عباس(علیه السلام) و شهدای کربلا» و یک میلیون فرد صالح در حرم خداوند را دارد

🔗https://ghadir.org/etaam

#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

سبک های نامگذاری متغیرها و توابع
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

نوار پیشرفت انیمیشنی
پیاده‌سازی این نوار پیشرفت بسیار ساده است و فقط به دو مرحله نیاز دارد:

1. استایل‌دهی CSS:

در این مرحله باید ظاهر نوار پیشرفت را با استفاده از CSS تعیین کنیم. این شامل رنگ، اندازه و شکل نوار می‌شود. همچنین باید انیمیشنی را به خود نوار اضافه کنیم تا ظاهر بارگیری جذاب‌تر شود.

2. کد جاوا اسکریپت برای انیمیشن:

در این پیاده‌سازی، ما بارگیری را از 0٪ تا 80٪ نشان می‌دهیم تا به طور واضح اثر پر شدن روان را نشان دهیم.

🔗https://codepen.io/katrin_profrontend/pen/ZENvOYV

#️⃣#code
👥@IR_javascript_group
🆔@IR_javascript

سلام دوستان
گروهمون هم افتتاح شده

🎉 ویژگی‌های گروه:

🔹 آموزش‌های کاربردی: از مبانی تا مباحث پیشرفته، هر چیزی که برای تسلط بر جاوااسکریپت نیاز دارید را بیاموزید.

🔹 پشتیبانی و مشاوره: سوالات خود را بپرسید و از تجربیات دیگران بهره‌مند شوید. ما اینجا هستیم تا شما را در هر مرحله از راه راهنمایی کنیم.

🔹 پروژه‌های تیمی: با دیگر اعضا پروژه‌های جذاب انجام دهید و مهارت‌های خود را به چالش بکشید.

🔹 منابع و مطالب به‌روز: از جدیدترین منابع، مقالات و دوره‌های آموزشی مطلع شوید و همیشه یک قدم جلوتر باشید.

🔹 رویدادها و چالش‌ها: در چالش‌های برنامه‌نویسی شرکت کنید، جوایز ببرید و لذت ببرید!

🔹 پرسش و پاسخ: هر سوالی دارید، بپرسید! اعضای گروه و متخصصین ما به سرعت به شما پاسخ خواهند داد و مشکلات شما را حل خواهند کرد.

به ما بپیوندید و عضوی از خانواده بزرگ برنامه‌نویسان جاوااسکریپت شوید. فرقی نمی‌کند تازه‌کار هستید یا حرفه‌ای، اینجا جایی برای همه ماست.

🚀 لینک عضویت: @IR_javascript_group
این گروه توسط همین کانال پشتیبانی می شود پس می توانید در مورد مطالب کانال در آنجا به بحث و تبادل نظر بپردازید
منتظرتان هستیم تا با هم دنیای برنامه‌نویسی را تسخیر کنیم! 🌍

تگ picture : راه‌حلی برای بارگذاری بهینه تصاویر
تگ picture در HTML به شما امکان می‌دهد تصاویر مختلفی را برای دستگاه‌ها یا حالات نمایش متفاوت ارائه دهید. این امر به شما کمک می‌کند تا تصاویر را بهینه بارگذاری کنید و تجربه کاربری بهتری را برای مخاطبان خود فراهم کنید.
ساختار تگ picture به صورت زیر است:

<picture>
    <source media="(min-width:1024px)" srcset="/assets/large.png">
    <source media="(min-width:640px)" srcset="/assets/medium.png">
    <img src="/assets/small.png" alt="logo" style="width:auto;">
</picture>

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

جداکننده هزارگان در جاوا اسکریپت
یک سوال: "چه چیزی در کنسول چاپ خواهد شد؟"

console.log( 1_000 + 1_500 )

شاید فکر کنید که رشته‌ها با هم ترکیب می‌شوند و "1_0001_500" در کنسول چاپ می‌شود. یا شاید خطایی رخ دهد؟

در واقع، پاسخ 2500 خواهد بود، اما چرا؟

پاسخ ساده است: _ به عنوان یک جداکننده برای بهبود خوانایی استفاده می‌شود. به نظر شما، خواندن "یک میلیون" زمانی که به این صورت نوشته شده باشد (1_000_000) سریع‌تر نیست تا به این صورت (1000000) ؟

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

این موتور جستجو، هوش مصنوعی مناسب برای هر کار را به شما معرفی می‌کند!
اگر در جستجوی هوش مصنوعی مناسب برای انجام وظایف خود هستید و زمان زیادی را صرف گشت‌وگذار در میان گزینه‌های مختلف می‌کنید، خبر خوب این است که می‌توانید به راحتی هوش مصنوعی مورد نظرتان را پیدا کنید.

✨ به این منظور، یک موتور جستجوی تخصصی به نام TopAI.tools (https://topai.tools/) وجود دارد که به شما کمک می‌کند تا با توجه به نیازهای خود، هوش مصنوعی مناسب را پیدا کنید. فرقی نمی‌کند که به دنبال هوش مصنوعی برای برنامه‌نویسی، خلق تصاویر، نوشتن متن یا هر کار دیگری باشید، TopAI.tools می‌تواند به شما کمک کند.

نحوه استفاده:

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

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

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

چرا به تگ های معنایی نیاز داریم؟

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

<header>برای هدر</header>
<main>برای محتوای اصلی</main>
<footer>برای پاورقی</footer>
<article>بخش مستقل و کامل</article>
<section>بخش محتوا</section>
<aside>محتوای جانبی و غیرمستقیم</aside>
<nav>بخش ناوبری</nav>
<time>برای نمایش تاریخ و زمان</time>
<div>بلوکی که نتوان به آن معنای خاصی اختصاص داد</div>

#️⃣#tip #html
👥@IR_javascript_group
🆔@IR_javascript

ویژگی all در CSS
با استفاده از ویژگی all در CSS میتوان مشخص کرد که آیا تمامی ویژگی های یک عنصر به حالت اولیه یا مقدار پیش فرض خودشان ( مقداری که توسط مرورگرها مشخص شده ) نمایش داده شوند.

مقادیر قابل استفاده برای all:

‏initial: تمام خواص عنصر را به مقادیر پیش فرضشان که در استاندارد CSS تعریف شده است، بازنشانی می‌کند.
‏inherit: تمام خواص عنصر را از والد آن به ارث می‌برد.
‏unset: نگاه میکنه اگه عنصر پدری بود inherit اعمال میکنه و اگه پدری نبود initial رو اعمال میکنه
مثال استفاده:

.element {
  color: red;
  font-size: 20px;
  margin: 10px;
}

.element {
  /* تمام خواص به مقادیر اولیه بازنشانی می‌شوند */
  all: initial;
}

چه زمانی از all استفاده کنیم؟

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

🔗https://free-learn.ir/%D9%88%DB%8C%DA%98%DA%AF%DB%8C-all-%D8%AF%D8%B1-css/

#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

اگر ساکن مشهدید و میخاین مسیر فرانت رو شروع کنید فرصت خوبیه
از دستش ندید

معنی تگ‌ها در ساختار اولیه هر وب‌سایت
سلام به همه! هر بار که در VSCode یک پروژه جدید شروع می‌کنیم، این کار با یک سند HTML آغاز می‌شود، جایی که ترکیب "! + tab" را فشار می‌دهیم. پس از آن، ساختاری مانند تصویر بالا ظاهر می‌شود.

بیایید این ساختار را به طور مفصل بررسی کنیم:

<!DOCTYPE html>

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

<html lang="en">

— این تگ نشان‌دهنده شروع سند HTML است. صفت lang="en" زبان صفحه (در این مورد انگلیسی) را مشخص می‌کند. این برای موتورهای جستجو و دسترسی مفید است.

<head>

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

<meta charset="UTF-8">

— این متاتگ رمزگذاری کاراکترها را برای سند تنظیم می‌کند. UTF-8 تقریباً از همه زبان‌های دنیا پشتیبانی می‌کند و استاندارد صفحات وب است.

<meta name="viewport" content="width=device-width,
initial-scale=1.0">

— این متاتگ برای طراحی واکنشگرا مهم است. به مرورگر می‌گوید که چگونه اندازه و مقیاس صفحه را مدیریت کند. در این مورد:

‏width=device-width عرض را به عرض دستگاه تنظیم می‌کند.
‏initial-scale=1.0 مقیاس اولیه را روی 100% تنظیم می‌کند.

<title>

— این تگ عنوان صفحه را که در برگه مرورگر نمایش داده می‌شود و توسط موتورهای جستجو استفاده می‌شود، تعیین می‌کند.

<body>

— این تگ حاوی تمام محتوای صفحه وب است که در مرورگر کاربر نمایش داده می‌شود - متن، تصاویر، پیوندها، جداول و غیر


#️⃣#tip #html
👥@IR_javascript_group
🆔@IR_javascript