JsBarcode ‍
‏JsBarcode یک کتابخانه JavaScript برای تولید بارکد در صفحات وب است. این کتابخانه به شما امکان می دهد انواع مختلف بارکد مانند EAN، CODE128، CODE39 و موارد دیگر را ایجاد کنید.

به طور خلاصه، JsBarcode انتخابی عالی برای زمانی است که نیاز به تولید بارکد دارید، زیرا راه حلی ساده و کارآمد در سناریوهای مختلف ارائه می دهد.

نحوه اتصال:

JsBarcode را متصل کنید:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.3/JsBarcode.all.min.js"></script>

یک بارکد ایجاد کنید:

JsBarcode("#barcode", "Katerina | PRO Frontend", {
  format: "CODE128",
  width: 2,
  height: 100,
  displayValue: true,
  font: "Arial",
  textAlign: "center",
  lineColor: "#d14bd5",
});

نکات مهم:

قابل استفاده در: svg، canvas یا img
پشتیبانی از پارامترهای مختلف: برای تنظیم ظاهر بارکد

🔗 https://github.com/lindell/JsBarcode

#️⃣#npm_module
🆔@IR_javascript

‏With یک متد جدید که در ECMAScript 2023 معرفی شده است و راهی آسان برای انجام یک کار بسیار خاص ارائه می دهد: اصلاح یک آرایه و ایجاد یک کپی از آن.

بیایید آن را با یک مثال تجزیه و تحلیل کنیم:

const nums = [1, 2, 3, 4];
const newNums = nums.with(1, 'string');

console.log(newNums); // [1, 'string', 3, 4]

روش with دو آرگومان می پذیرد: شاخصی که جایگزینی در آن رخ می دهد و مقدار جدید.


#️⃣#tip
🆔@IR_javascript

Microsoft Designer for Web

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

🔗https://designer.microsoft.com/

#️⃣#tool
🆔@IR_javascript

‏ is() در CSS
به شما امکان می دهد تا چندین انتخاب کننده را در یک انتخاب کننده واحد گروه بندی کنید، که این امر نوشتن CSS را آسان تر می کند.

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

CSS
.cart__number:is(:hover, :focus) {
  outline: 1px solid var(--accent);
  color: var(--accent);
}

در مثال بالا، این کد CSS هر عنصر .cart__number را که روی آن هاور شده یا روی آن ها تمرکز شده است، هدف قرار می دهد و رنگ و outline آن ها را تغییر می دهد.

مزایای استفاده از is():

[1] کد را خواناتر می کند: با گروه بندی چندین selector در یک selector واحد، می توانید کد CSS خود را خواناتر و سازمان یافته تر کنید.
[2] نگهداری را آسان تر می کند: اگر نیاز به تغییر نحوه انتخاب عناصر دارید، فقط باید یک انتخاب کننده را در is() تغییر دهید، به جای اینکه چندین انتخاب کننده را به طور جداگانه تغییر دهید.
[3] پشتیبانی مرورگر: در حال حاضر توسط 97.68٪ از مرورگرها پشتیبانی می شود.

#️⃣#tip #css
🆔@IR_javascript

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

🔗 https://www.theatrejs.com/

#️⃣#npm_module
🆔@IR_javascript

منجا: Fruit Ninja با جاوا اسکریپت
معرفی منجا:

منجا یک بازی جذاب شبیه به Fruit Ninja است که با استفاده از زبان برنامه نویسی جاوا اسکریپت و بدون نیاز به هیچ فریم‌ورک خارجی توسعه یافته است. این بازی به عنوان جانشین معنوی Fruit Ninja شناخته می‌شود و با ارائه ظاهری هندسی و منحصر به فرد، تجربه‌ای جدید و سرگرم‌کننده را به ارمغان می‌آورد.

در منجا، وظیفه‌ی شما برش و نابودی بلوک‌های رنگارنگی است که از جهات مختلف به سمت شما پرتاب می‌شوند. برای انجام این کار، باید از انگشت یا موس خود برای هدایت تیغه و برش دقیق بلوک‌ها استفاده کنید. دقت داشته باشید که نباید اجازه دهید هیچ بلوکی از صفحه بازی خارج شود، در غیر این صورت امتیاز خود را از دست خواهید داد.
🔗https://codepen.io/MillerTime/details/BexBbE

#️⃣#code
🆔@IR_javascript

‏vscodethemes یک وب‌سایت است که به شما امکان می‌دهد تم‌های مختلفی را برای ویرایشگر کد VS Code خود پیدا کنید. این وب‌سایت شامل طیف گسترده‌ای از تم‌ها در سبک‌ها و رنگ‌های مختلف است، بنابراین مطمئناً تم مورد علاقه خود را پیدا خواهید کرد.

🔗https://vscodethemes.com/

#️⃣#tool
🆔@IR_javascript

استفاده از gap به جای margin

چرا استفاده از gap بهتر از margin است؟

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

CSS
.container {
  display: grid;
  gap: 20px; 
}

در این مثال، ازgap برای تعریف فاصله بین آیتم‌های .item در داخل container استفاده شده است. با این کار دیگر نیازی به تعریف margin جداگانه برای هر آیتم نیست.

نکاتی برای استفاده از gap:

از row-gap و column-gap برای تنظیم فاصله در راستای افقی و عمودی به طور جداگانه استفاده کنید.
‏gap به طور پیش فرض برای هر دو جهت افقی و عمودی اعمال می‌شود.
#️⃣#tip
🆔@IR_javascript

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

🔗https://neat.firecms.co/

#️⃣#tool
🆔@IR_javascript

رازهای بارگذاری سریع‌تر صفحات وب

‏Prefetch:

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

مزایای Prefetch:

کاهش زمان بارگذاری صفحه
بهبود تجربه کاربری
کاهش بار سرور

‏Preload شبیه به Prefetch است، اما با یک تفاوت ظریف Preload به طور خاص به مرورگر می‌گوید که منابع مشخص شده "ضروری" هستند و باید "بلافاصله" بارگیری شوند. این روش برای منابعی که برای نمایش اولیه صفحه ضروری هستند، مانند فایل CSS اصلی یا اسکریپت جاوا اسکریپت، بسیار مفید است.

مزایای Preload:

بارگذاری سریع‌تر محتوای اصلی
بهبود زمان اولین محتوای قابل مشاهده
تجربه کاربری روان‌تر


استفاده از Prefetch و Preload با هم:
‏Prefetch را برای منابعی که احتمالاً در آینده مورد نیاز خواهند بود، اما ضروری نیستند، و Preload را برای منابعی که برای نمایش اولیه صفحه ضروری هستند، استفاده کنید.
#️⃣#tip
🆔@IR_javascript

‏CSS Shape — ابزاری که می‌توانند برای ایجاد طیف وسیع‌تری از اشکال مورد استفاده قرار بگیرند.

نکات برجسته:

تنوع باورنکردنی اشکال
قابلیت برش و پیکربندی برخی از اشکال
سادگی و ظرافت در طراحی

کاربردها:

ایجاد دکمه‌ها و آیکون‌های جذاب
طراحی جداکننده‌ها و بخش‌های مختلف صفحه
افزودن جزئیات بصری به طرح کلی

🆔https://css-tricks.com/the-shapes-of-css/

#️⃣#tip
🆔@IR_javascript

View transitions (Chrome 115+)

🔗https://codepen.io/joshsanger-the-looper/pen/WNLoaOg

#️⃣#code
🆔@IR_javascript

امروز می‌خواهیم به سراغ ابزاری به نام qnm برویم که برای جستجوی بسته‌های نصب‌شده در پوشه node_modules کاربرد دارد.

اما چرا به چنین ابزاری نیاز داریم؟

دلایل متعددی برای استفاده از qnm وجود دارد. به عنوان مثال، این ابزار می‌تواند به شما کمک کند تا:

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

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

🔗 https://github.com/ranyitz/qnm

#️⃣#npm_module
🆔@IR_javascript

3D Card

🔗https://codepen.io/gayane-gasparyan/pen/wvxewXO
🔗https://codepen.io/t_afif/full/mdzxJaa

#️⃣#code
🆔@IR_javascript

جیتر: ابزاری برای خلق انیمیشن‌
جیتر یک پلتفرم آنلاین برای طراحی و ساخت انیمیشن‌های جذاب و تعاملی است. این ابزار به عنوان جایگزینی برای نرم‌افزار After Effects شناخته می‌شود و به کاربران امکان می‌دهد تا بدون نیاز به دانش فنی عمیق، انیمیشن‌های باکیفیت و حرفه‌ای را خلق کنند.
همچنین امکان وارد کردن پروژه های خود از Figma وجود دارد.

🔗https://www.youtube.com/watch?v=jdNvHs8l0Bs
🔗https://jitter.video/

#️⃣#tool
🆔@IR_javascript