ویژگی @property در CSS در سال دو هزار و بیست و چهار معرفی شده است، بنابراین باید هنگام استفاده از آن احتیاط کنید. این ویژگی به شما امکان می‌دهد که نوع متغیرهای سفارشی را در CSS مشخص کنید.

نمونه‌ای از یک متغیر غیر نوعی در CSS:

:root {
  --background-color: blue;
}

.box {
  background-color: var(--background-color);
}

نمونه‌ای از یک متغیر نوعی در CSS:

@property --background-color {
  syntax: "<color>";
  inherits: false;
  initial-value: blue;
}

از طریق جاوا اسکریپت:

window.CSS.registerProperty({
  name: "--background-color",
  syntax: "<color>",
  inherits: false,
  initialValue: "blue",
});

انواع (syntax):
مقادیر ممکن شامل: <length>، <number>، <percentage>، <length-percentage>، <color>، <image>، <url>، <integer>، <angle>، <time>، <resolution>، <transform-function>، <custom-ident>، یا لیستی از انواع داده‌ها و مقادیر کلیدی می‌باشد.

پشتیبانی در مرورگرها
پشتیبانی از این ویژگی در مرورگرها هم اکنون کامل است.

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

ویدیو دوبله شده در مورد پوشه NPM bin با اسکریپت‌های اجرایی [+لینک]
پوشه NPM bin جایی است که NPM فایل‌های اجرایی مرتبط با بسته‌های نصب‌شده را ذخیره می‌کند. وقتی شما یک بسته NPM را نصب می‌کنید، اگر آن بسته شامل اسکریپت‌های اجرایی باشد، NPM این اسکریپت‌ها را در پوشه bin قرار می‌دهد.

این پوشه به شما این امکان را می‌دهد که به راحتی به این اسکریپت‌ها دسترسی داشته باشید و آن‌ها را از هر نقطه‌ای در خط فرمان اجرا کنید. اسکریپت‌های موجود در این پوشه معمولاً فاقد پسوند هستند و برای اجرا به خط Shebang (#!) نیاز دارند که در ابتدای هر فایل اجرایی قرار می‌گیرد و تعیین می‌کند کدام مفسر برای اجرای فایل استفاده شود..

🔗https://aparat.com/v/ved7pjj
#️⃣#tip #dub
👥@IR_javascript_group
🆔@IR_javascript

چک باکس سفارشی بدون دردسر 🤨

سفارشی‌سازی چک باکس‌ها مدت‌ها یک مشکل برای توسعه‌دهندگان وب بود. برای تغییر استایل استاندارد، باید عنصر اصلی را مخفی می‌کردند و یک <div> استایل‌دار جایگزین می‌کردند که به کد زیادی نیاز داشت. اما اکنون راه حلی مدرن وجود دارد: appearance: none که نود و چهار درصد پشتیبانی دارد.

این ویژگی به شما امکان می‌دهد طراحی استاندارد چک باکس را حذف کنید و از یک بوم خالی شروع کنید. با استفاده از appearance: none، نیازی به مخفی کردن عناصر استاندارد و افزودن عناصر اضافی نیست. به سادگی استایل‌ها را در CSS توصیف کنید و کد خود را تمیز نگه دارید. 👍
برای یادگیری بیشتر به لینک زیر مراجعه کنید

🔗 https://codepen.io/katrin_profrontend/pen/PoMRdJp
#️⃣#tip #css
👥@IR_javascript_group
🆔@IR_javascript

به نظر می‌رسد ویژگی "علامت‌گذاری برای عناصر اسکرول‌دار" در Chrome 130 واقعاً مفید باشد. گاهی اوقات پیدا کردن عناصر اسکرول‌دار در ساختار وب دشوار می‌شود.


#️⃣ #tool
👥@IR_javascript_group
🆔@IR_javascript

ولادت عقیله بنی‌هاشم زینب کبری سلام‌الله‌علیها مبارک

#️⃣ #event
👥@IR_javascript_group
🆔@IR_javascript

‏Daisy UI یک کتابخانه زیبا و ساده برای Tailwind CSS است که به طور متفاوتی از کتابخانه‌های معمولی مانند Material UI یا Mantine UI عمل می‌کند. به جای ارائه مجموعه‌ای از کامپوننت‌ها، Daisy UI مجموعه‌ای از کلاس‌های کاربردی مانند btn، btn-primary، modal و modal-box را ارائه می‌دهد که می‌توانید برای ایجاد کامپوننت‌های خود استفاده کنید.

🔗https://daisyui.com/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏🌐 MotionNumber

MotionNumber یک ابزار مفید برای ایجاد اثرات انتقال زیبا برای هر نوع داده عددی است. این ابزار می‌تواند به جلوه‌های بصری جذاب کمک کند و تجربه کاربری را بهبود بخشد.


🔗https://motion-number.barvian.me/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

توسعه مدرن جاوا اسکریپت اغلب با وظایفی در ارتباط با عملیات غیرهمزمان و مدیریت خطا مواجه است. معمولاً از ساختارهای try-catch و async-await برای این مقاصد استفاده می‌شود. با این حال، این روش‌ها ممکن است کد را سنگین کرده و خوانایی آن را کاهش دهند. برای رفع این مشکل، یک اپراتور جدید به نام ?= پیشنهاد شده است که به‌طور قابل‌توجهی مدیریت خطا را ساده‌تر کرده و خوانایی کد را بهبود می‌بخشد.


#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

‏Timeago.js یک کتابخانه برای فرمت‌بندی دینامیک زمان به سبک "۳ دقیقه پیش" یا "۲ ساعت پیش" است. این کتابخانه به‌طور خودکار برچسب متنی زمان را بر اساس زمان فعلی به‌روزرسانی می‌کند و برای ایجاد فیدهای خبری، چت‌ها و سیستم‌های نظرات بسیار مناسب است. همچنین، این کتابخانه از زبان‌های متعدد پشتیبانی می‌کند و به دلیل سبک بودنش، گزینه‌ای عالی برای هر وب‌اپلیکیشنی است.

🔗https://timeago.org/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

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

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

تطبیق خودکار رنگ‌ها با تم‌های سیستمی 😌
تابع light-dark() در CSS یک روش کارآمد برای تنظیم رنگ‌های عناصر بر اساس تنظیمات تم سیستمی کاربر است، نه بر اساس تم انتخابی در وب‌سایت. پشتیبانی- ٪۸۲

این تابع امکان تعریف دو رنگ را فراهم می‌کند: یکی برای تم روشن و دیگری برای تم تاریک. برای مثال:

color: light-dark(#000000, #ffffff);

برای فعال‌سازی تابع light-dark() باید مقدار color-scheme را به light dark تنظیم کنید که معمولاً در شبه‌کلاس :root قرار داده می‌شود.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

به چه نکاتی در مصاحبه‌های کاری باید توجه کنیم؟ 🤨
در جستجوی شغل جدید، ممکن است تمایل داشته باشید هرچه زودتر پیشنهاد کاری دریافت کنید، اما نباید فراموش کنید که مهم است نه تنها نظر شرکت را جلب کنید، بلکه اطمینان حاصل کنید که شرکت واقعاً برای شما مناسب است. جزئیاتی که شاید در مراحل مصاحبه بی‌اهمیت به نظر برسند، می‌توانند در آینده تأثیر بسزایی بر رشد و رضایت شما در محل کار جدید داشته باشند. در ادامه به چند نکته کلیدی اشاره می‌کنیم که بهتر است قبل از گفتن «بله» به آنها توجه کنید. ✔️

۱️⃣ بروز بودن تکنولوژی‌ها و ابزارها
از شرکت درباره فناوری‌ها و ابزارهایی که استفاده می‌کند بپرسید. آیا از تکنولوژی‌های روز بهره می‌برد یا از تکنولوژی‌های قدیمی و منسوخ استفاده می‌کند؟ کدام فناوری‌ها برای شما آشنا و مناسب‌اند و کدام‌ها چالش‌برانگیز؟ اگر شرکتی به فریم‌ورک‌های قدیمی متکی است یا از بروزرسانی اجتناب می‌کند، ممکن است با مشکل انعطاف‌پذیری مواجه باشد — پیش خود بسنجید که آیا در چنین محیطی امکان رشد و پیشرفت دارید یا خیر.

۲️⃣ اهمیت تست و کیفیت کد
درباره روش‌های تست و بازبینی کد تیم سوال کنید. اگر تست‌ها و بازبینی‌ها بخشی از فرآیند کار هستند، این نشانه خوبی است. آیا شرکت به کیفیت کد اهمیت می‌دهد یا سرعت توسعه اولویت دارد؟ نحوه بازبینی‌های کد و تعداد دفعات آن‌ها می‌تواند نشان‌دهنده میزان اهمیت تیم به پروژه و کار گروهی باشد. 😌

۳️⃣ فرآیندهای توسعه و مدیریت پروژه
بپرسید فرآیند توسعه چگونه تعریف شده است. آیا از متدولوژی‌های چابک مانند Agile یا Kanban استفاده می‌شود؟ چرخه‌های انتشار نرم‌افزار چگونه‌اند؟ اگر فرآیندها ساختار مناسبی نداشته باشند یا از شما توقع انجام سریع همه‌چیز را داشته باشند، ممکن است در آینده به مشکل بربخورید. هرچه فرآیندها بهتر تعریف شده باشند، کار شما راحت‌تر و مؤثرتر خواهد بود.

۴️⃣ رشد و توسعه حرفه‌ای
از شرکت بپرسید که چگونه از رشد و توسعه حرفه‌ای کارکنان حمایت می‌کند. آیا برنامه‌های ارتقای مهارت، دوره‌های آموزشی یا حمایت از شرکت در کنفرانس‌ها وجود دارد؟ شرکت‌های پیشرو از رشد کارکنان حمایت می‌کنند، هزینه دوره‌های آموزشی را پرداخت می‌کنند و با فراهم کردن آموزش‌های داخلی، به کارکنان کمک می‌کنند تا مهارت‌های خود را بهبود ببخشند. اگر شرکت از کسانی که به دنبال توسعه هستند حمایت می‌کند، این یک نشانه مثبت است.

۵️⃣ فرمت و برنامه کاری
آیا کار حضوری است یا به صورت دورکاری؟ برنامه ثابت است یا انعطاف‌پذیر؟ این مسئله می‌تواند تأثیر زیادی روی تعادل بین کار و زندگی شخصی داشته باشد. به‌ویژه مهم است که بدانید شرکت به چه شکلی با دورکاری برخورد می‌کند و تا چه اندازه انعطاف‌پذیر است — این اطلاعات به شما کمک می‌کند تا میزان کنترل خود بر زمان‌بندی روزانه را درک کنید. 👍

۶️⃣ سیستم ارتقا، پاداش و انگیزش
از سیستم ارتقا و ارزیابی عملکرد شرکت و همچنین فرصت‌های پاداش‌دهی سوال کنید. هرچه این فرآیندها شفاف‌تر و منظم‌تر باشند، فرصت‌های بیشتری برای رشد حرفه‌ای و انگیزش خواهید داشت. اگر شرکت نمی‌تواند به روشنی درباره فرآیند ارتقا و پاداش‌دهی توضیح دهد، احتمالاً سیستم رشد حرفه‌ای مناسبی ندارد و شاید ارتقاها با تأخیر و دشواری انجام شوند. شفافیت و ثبات در پاداش‌دهی نشانه خوبی از یک فرهنگ سازمانی سالم و پایدار است. 👌

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

پرسیدن سوال درباره فرآیندها، فناوری‌ها و شرایط کاری به شما کمک می‌کند تا انتظارات خود را با شرکت مقایسه کنید. و وقتی شغل مناسب پیدا شود، شما نه تنها در وظایف خود موفق خواهید بود، بلکه در محیطی حرفه‌ای و هماهنگ رشد کرده و به اهداف خود می‌رسید.

چه نکات دیگری را می‌توان به این فهرست اضافه کرد؟ 👇

#️⃣#discussion
👥@IR_javascript_group
🆔@IR_javascript

خلاصه رویداد Vue Fes Japan 2024 و معرفی Vue Vapor
در نوزدهم اکتبر سال دوهزار و بیست و چهار، رویداد سنتی Vue Fes Japan 2024 برگزار شد که بسیاری از علاقه‌مندان و متخصصان حوزه وب را گرد هم آورد. در این کنفرانس، کوین دنگ، یکی از توسعه‌دهندگان فریمورک Vue، نسل جدیدی از این فریمورک به نام Vue Vapor را معرفی کرد. انتظار می‌رود که Vue Vapor عملکرد Vue را به طور چشمگیری بهبود بخشد و آن را به ابزاری سریع‌تر و کارآمدتر برای ساخت برنامه‌های مدرن وب تبدیل کند. این تغییر نه تنها موجب افزایش سرعت و کاهش مصرف حافظه می‌شود، بلکه به انعطاف‌پذیری و انطباق این فریمورک برای پروژه‌های پیچیده‌تر نیز کمک خواهد کرد.

‌‏Vue Vapor چیست؟
‏Vue Vapor یک مکانیزم رندر جدید است که ویژگی‌های زیر را به همراه دارد:

ارتباط مستقیم با APIهای نیتیو DOM

در Vue Vapor دیگر از DOM مجازی (Virtual DOM) استفاده نمی‌شود. به جای آن، مستقیماً از APIهای نیتیو DOM بهره می‌برد. این امر باعث کاهش پیچیدگی، افزایش سرعت و کاهش مصرف حافظه می‌شود، زیرا مراحل واسطه‌ای کاهش یافته و فشار روی سیستم کمتر می‌شود.
کاهش اندازه باندل نهایی

با استفاده مستقیم از APIهای DOM، نیاز به کدهای اضافه برای پردازش گره‌های مجازی DOM حذف می‌شود. این باعث می‌شود برنامه‌ها باندل کوچکتری داشته باشند و برای کاربرانی که با اینترنت ضعیف دسترسی دارند سریع‌تر بارگذاری شوند.
رندر دقیق و جزیی (Fine-grained Rendering)

با توجه به سیستم واکنشی Vue، اکنون می‌توان تغییرات داده‌ها را به‌صورت دقیق ردیابی کرد و تنها بخش‌هایی را که واقعاً لازم است، به‌روز کرد. این موضوع باعث می‌شود که نیازی به رندر مجدد کل کامپوننت نباشد و کارایی فریمورک افزایش یابد.
کاهش چشمگیر اندازه باندل

با استفاده از ارتباط مستقیم با APIهای نیتیو DOM، اندازه باندل تا پنجاه و سه و سه دهم درصد (۵۳.۳٪) نسبت به حالت استاندارد DOM مجازی کاهش یافته است. این میزان بهبود بدون در نظر گرفتن اندازه سیستم واکنش‌پذیری است که حتی بدون آن نیز کاهش اندازه باندل، به طرز قابل توجهی در عملکرد برنامه مؤثر است.
افزایش سرعت عملکرد

برای ارزیابی سرعت، می‌توان جاوااسکریپت خالص را به‌عنوان مرجع صددرصدی در نظر گرفت. در حال حاضر، سریع‌ترین فریمورک Solid است و بعد از آن Svelte قرار دارد. اکنون Vue Vapor هم‌تراز با Svelte عمل می‌کند، که نشان‌دهنده عملکردی بسیار سریع‌تر نسبت به حالت DOM مجازی Vue و React با Jotai است. با وجود اینکه Vue Vapor از Vue DOM مجازی و React پیشی گرفته است، تیم توسعه همچنان در تلاش است تا عملکرد آن را بیش از پیش بهبود بخشد.
این تغییرات باعث می‌شود Vue برای پروژه‌های آینده‌نگرانه و پیچیده، به گزینه‌ای جذاب‌تر تبدیل شود و سرعت و کارایی بیشتری را برای توسعه‌دهندگان فراهم کند.

<script setup vapor>
import { ref } from 'vue'


const count = ref(0)


function increase() {
  count.value++
}
</script>


<template>
  <h1>Count: {{ count }}</h1>
  <button @click="increase">Increase</button>
</template>

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

جمع‌بندی
‏Vapor آغاز جدیدی برای Vue است. تقریباً همه چیز از پایه بازنویسی شده است.
‏Vapor زیرمجموعه‌ای از حالت vDOM در Vue است که بر ساده‌سازی تمرکز دارد.
‏Vapor در حال حاضر بهینه‌سازی چشمگیری در عملکرد و اندازه‌ی باندل ایجاد کرده است.

🔗https://habr.com/ru/companies/first/articles/856346/
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

نویسنده‌ی Pinia ترفندی را برای ایجاد متغیرهای خصوصی در Store معرفی کرده است که از طریق ساخت یک Store دیگر به دست می‌آید. این روش به عنوان یک راهکار برای پیاده‌سازی private state در نظر گرفته می‌شود، که به کپسوله‌سازی و استفاده از اصول برنامه‌نویسی شی‌گرا (OOP) کمک می‌کند.

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


🔗https://masteringpinia.com/blog/how-to-create-private-state-in-stores
#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript

.روی HuggingFace کلی مدل و دیتاست برای کارهای مختلف هست که میتونید استفاده کنید. مثلا این مدل جدید Flux.1-Lite-8B برای تولید عکس واقعا عالیه. کیفیت عکسها واقعا بالاست.
برای این مدل هنوز نیاز به GPU هست اگه بخواهید روی سیستم خودتون ران کنید اما به گفتیه خودشون هم 7 GB کمتر RAM نیاز داره و هم ۲۳% سریعتر هست در عین حال که کیفیت بالا هنوز حفظ شده. و دارن روش کار میکنن که هم اندازه را کوچک کنن و هم سرعت را بیشتر. [برگرفته از کانال @Ai_NewsTv]

🔗https://huggingface.co/spaces/TheAwakenOne/flux1-lite-8B-alpha
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

ویدیو دوبله شده در مورد نکات کلیدی برای پرامت نویسی ChatGPT [+لینک]

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

🔗https://www.aparat.com/v/dog93mg
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

کتابخانه الگوها

مجموعه‌ای از الگوهای رایگان برای پروژه شما. همه موارد به‌صورت رایگان ارائه می‌شوند و با یک کلیک قابل دانلود هستند.


🔗http://thepatternlibrary.com/#green-goblin
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

کمی از زیبایی‌شناسی SQL بصری و نظریه مجموعه‌ها

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript