‏PerfectPixel: پلاگینی برای پیکسل‌نویسی دقیق وب‌سایت‌ها

‏PerfectPixel یک پلاگین مرورگر است که به شما امکان می‌دهد وب‌سایت‌ها را «پیکسل به پیکسل» طراحی کنید. این ابزار به شما کمک می‌کند تا بررسی کنید که تا چه حد طراحی شما به طرح اولیه نزدیک است. برای انجام این کار، کافی است پلاگین را نصب کرده و آن را در وب‌سایتی که می‌خواهید بررسی کنید، اجرا کنید.
🔗https://www.welldonecode.com/
#️⃣#tool
🆔@IR_javascript

‏KaTeX: سریع‌ترین کتابخانه برای ریاضی در وب
این روزها، تمام مقالات و پست‌های وبلاگ پر از نمادهای ریاضی است. پس چه بهتر از رویکردی مبتنی بر TeX برای نمایش آنها استفاده کنیم که کاملا روان باشد.

🔗https://katex.org

#️⃣#npm_module
🆔@IR_javascript

ویژگی poster
ویژگی poster در تگ <video> آدرس تصویری را مشخص می‌کند که تا زمانی که ویدیو در دسترس یا در حال پخش نیست، نمایش داده می‌شود. اگر این ویژگی مشخص نشده باشد، مرورگر سعی می‌کند اولین فریم ویدیو را نمایش دهد.

مزایای استفاده از ویژگی poster:

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

<video src="video.mp4" poster="poster.jpg">
</video>

#️⃣#tip
🆔@IR_javascript

‏Vite: رقیب قدرتمند Webpack در دنیای بسته‌بندی جاوا اسکریپت

اخیراً شاهد رشد چشمگیر Vite بوده‌ایم، به طوری که تعداد دانلودهای آن به نصف تعداد دانلودهای Webpack رسیده است. این موضوع نشان‌دهنده‌ی محبوبیت روزافزون Vite و پتانسیل آن برای تبدیل شدن به رقیبی جدی برای Webpack در دنیای بسته‌بندی جاوا اسکریپت است.

برای درک بهتر این موضوع، بیایید به نموداری که در متن ارائه شده است نگاهی بیندازیم. این نمودار نشان می‌دهد که از بهار سال 2023، سهم Vite در میان پروژه‌های جدید به طور قابل‌توجهی افزایش یافته است. در حالی که Webpack همچنان سهم قابل‌توجهی در بازار دارد، Vite به سرعت در حال تصاحب سهم بازار از آن است.


#️⃣#tool
🆔@IR_javascript

قانون @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