‏CSS @property
قاعده ای که به شما اجازه می‌دهد خصوصیات سفارشی یا به عبارت دیگر متغیرهای CSS را تعریف کنید.

ساختار:

@property <نام_خاصیت> {
  syntax: <نوع_داده>;
  inherits: <درست | نادرست>;
  initial-value: <مقدار_اولیه>;
}

<نام_خاصیت>: نام خاصیت سفارشی که می‌خواهید تعریف کنید (مثلاً، --my-color).

‏syntax: نوع داده‌هایی که برای این خاصیت مجاز هستند. این می‌تواند یک نوع داده مانند <color>، <length>، <number> و غیره باشد.

‏inherits: مشخص می‌کند که آیا این خاصیت از عناصر والد به ارث می‌رسد یا خیر. مقادیر می‌تواند true (به ارث می‌رسد) یا false (به ارث نمی‌رسد) باشد.

‏initial-value: مقدار پیش‌فرض برای خاصیت، در صورتی که مقدار دیگری مشخص نشده باشد.
چرا باید از CSS @property استفاده کنیم؟

تعیین نوع داده: به شما امکان می‌دهد نوع داده‌های هر خاصیت را مشخص کنید که باعث می‌شود کد شما قابل پیش‌بینی‌تر و ایمن‌تر شود.
کنترل وراثت: می‌توانید مشخص کنید که آیا خواص سفارشی از عناصر والد به ارث می‌رسند یا خیر.
مقدار پیش‌فرض: می‌توانید یک مقدار پیش‌فرض برای هر خاصیت تعریف کنید.
اشکال‌زدایی آسان: ابزارهای توسعه‌دهنده مرورگر به شما امکان می‌دهند تا به راحتی این خصوصیات را اشکال‌زدایی کنید.
پشتیبانی گسترده: در اکثر مرورگرهای مدرن پشتیبانی می‌شود.
پس چرا متغیرها را داخل :root تعریف کنیم؟

با استفاده از @property می‌توانید از تعریف متغیرها داخل :root اجتناب کنید و ساختار CSS خود را منظم‌تر کنید.

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

‏Glider.js به عنوان یک جایگزین سبک و سریع برای کاروسل‌های سنتی ارائه شده است که به ویژه برای دستگاه‌های موبایل مناسب است. این کتابخانه با حفظ قابلیت اسکرول طبیعی، تجربه کاربری بهتری را ارائه می‌دهد. نکته مهم حجم آن است که < 2.8kb میباشد

🔗https://nickpiscitelli.github.io/Glider.js/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏Particles.js

‏Particles.js یک کتابخانه سبک‌وزن جاوا اسکریپت است که به شما امکان می‌دهد ذرات را در یک صفحه وب ایجاد و انیمیت کنید. این کتابخانه اغلب برای ایجاد پس‌زمینه‌های متحرک از ذرات استفاده می‌شود که می‌توانند تعاملی باشند و به اقدامات کاربر مانند حرکت ماوس واکنش نشان دهند.


🔗https://github.com/VincentGarreau/particles.js
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏Clusterize.js

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

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

چند روز پیش، یک مثال جالب با استفاده از تگ HTML <wbr> ایجاد کردم. اگرچه این تگ به تنهایی بسیار جالب است، ممکن است راه حل بهتری وجود داشته باشد.
می‌توانیم از &shy استفاده کنیم که یک خط فاصله نرم در HTML است.
این به این معنی است که اگر کلمه خیلی طولانی باشد، یک خط فاصله (-) اضافه می‌کند، در غیر این صورت کلمه را همانطور که هست رندر می‌کند.

<div>
  <h1>SHY</h1>
  super&shy;long&shy;word&shy;that&shy;needs&shy;to&shy;break&shy;better
</div>

<div>
  <h1>WBR</h1>
  super<wbr>long<wbr>word<wbr>that<wbr>needs<wbr>to<wbr>break<wbr>better
</div>

<div style="word-break: break-all">
  <h1>CSS</h1>superlongwordthatneedstobreakbetter
</div>

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

‏SWC‏چیست و کمی درباره Rust

‏SWC مخففی است که به طور فزاینده‌ای در دنیای فرانت‌اند دیده می‌شود. این مخفف Speedy Web Compiler است و کاملاً نام خود را توجیه می‌کند، زیرا SWC یک کامپایلر و بسته‌بند فوق‌العاده سریع است که با زبان برنامه‌نویسی Rust نوشته شده است. هدف آن تبدیل کدهای مدرن جاوا اسکریپت و تایپ اسکریپت به کدی است که توسط اکثر مرورگرها پشتیبانی می‌شود.

به عبارت ساده‌تر، SWC تمام کارهای Babel را انجام می‌دهد، اما بیش از ۲۰ برابر سریع‌تر روی یک هسته و بیش از ۷۰ برابر سریع‌تر روی ۴ هسته.

‌‏SWC در حال حاضر در محصولات Vercel (از جمله Next.js و Turbopack)، Tencent، Shopify و سایر شرکت‌ها استفاده می‌شود و از نسخه ۴ (اکنون نسخه ۵) به عنوان پایه Vite قرار گرفته است، بنابراین به زودی با ما خواهد بود.

در واقع، چیز زیادی برای گفتن در مورد SWC وجود ندارد. من در تمام این موارد، مشاهده تمرکز بسیار زیاد بر سرعت در فرانت‌اند بسیار جالب است. Rust به تدریج در حال تسخیر ابزارهای فرانت‌اند است: کامپایلرها، لینترها و غیره - تقریباً در هر بخش از ابزارها، یک راه‌حل مبتنی بر Rust وجود دارد و این اتفاقی نیست.

همچنین نباید فراموش کنیم که Rust مدت‌هاست از WebAssembly به طور کامل پشتیبانی می‌کند و یکی از زبان‌های اصلی این فناوری است.


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

🖤من دختر شاهم و دنیا واسه بابای منه 🖤

شهادت_حضرت_رقیه سلام‌الله‌علیها


#️⃣#event
👥@IR_javascript_group
🆔@IR_javascript

چگونه یک فایل را از سایت دانلود کنیم

تگ لینک <a> یک ویژگی بسیار کاربردی به نام download دارد که به شما اجازه می‌دهد هر فایلی را از سایت دانلود کنید. استفاده از آن به این شکل است:

<a
    download
    href="https://.../files/example.zip"
>
    دانلود فایل
</a>

همچنین می‌توانید نام دلخواهی برای فایل دانلودی تعیین کنید، به این صورت:

<a
    download="نام_جدید_فایل.zip"
    href="https://.../files/example.zip"
>
    دانلود فایل
</a>

باید توجه داشته باشید که دانلود فایل‌ها فقط از سرورهایی امکان‌پذیر است که سیاست‌های CORS برای سایت ما را رعایت می‌کنند.

این ویژگی در حال حاضر بیش از ۹۷٪ پشتیبانی در مرورگرها دارد و تنها در مرورگر IE به طور کامل پشتیبانی نمی‌شود.

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

‏noopener و noreferrer در مرورگر

<a href="https://example.com" target="_blank" rel="noopener noreferrer">Anchor text</a>

وقتی یک لینک را در یک تب جدید باز می‌کنیم (مثلاً https://t.me/prog_way_blog/317) با استفاده از ویژگی target="_blank"، مرورگر چند کار ناخواسته انجام می‌دهد که ویژگی‌های noopener و noreferrer از آن‌ها جلوگیری می‌کنند:

🟢 ویژگی noopener: مانع از دسترسی تب جدید به شیء window.opener می‌شود. چرا این مهم است؟ بدون این ویژگی، سایتی که در تب جدید باز می‌شود می‌تواند به تب اصلی دسترسی پیدا کند و احتمالاً کدهای مخرب اجرا کند که یک تهدید امنیتی است.

‏window.opener حاوی اطلاعاتی از تب اصلی است که از آنجا به سایت جدید آمده‌ایم. اگرچه اطلاعات این شیء محدود است، اما تب جدید می‌تواند در تب اصلی حرکت کند که این امکان را برای حملات فیشینگ فراهم می‌کند.

فرض کنید در سایت some-bank.com هستید و به سایتی دیگر با کد مخرب بدون noopener می‌روید. تب جدید می‌تواند به آدرس قبلی شما و API ناوبری تب اصلی دسترسی پیدا کند و بدون اینکه شما متوجه شوید، آدرس تب اصلی را از some-bank.com به some-bauk.com تغییر دهد. وقتی به تب اصلی برگردید، همان سایت را می‌بینید اما در واقع به یک صفحه فیشینگ هدایت شده‌اید. اگر اطلاعات خود را در این صفحه وارد کنید، اطلاعات شما به دست مهاجمان می‌افتد.

این نوع حمله به آن tabnabbing می‌گویند.

🟢 ویژگی noreferrer: دو کار انجام می‌دهد:

مانند noopener از دسترسی به window.opener جلوگیری می‌کند.
هدر HTTP Referer را هنگام کلیک روی لینک حذف می‌کند تا منبع درخواست پنهان شود.


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

معمولاً این دو ویژگی با هم استفاده می‌شوند. noreferrer به نوعی شامل noopener می‌شود، اما در عمل همیشه هر دو استفاده می‌شوند. دلیل آن این است که هر مرورگر Referer-Policy را به روش خود پیاده‌سازی می‌کند و استفاده از هر دو ویژگی خیالمان را راحت‌تر می‌کند.


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

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

🔗https://www.jwilber.me/roughviz/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏Dropzone.js یک کتابخانه سبک‌وزن جاوا اسکریپت است که برای ادغام آسان قابلیت کشیدن و رها کردن فایل‌ها در وب‌سایت‌ها طراحی شده است. این کتابخانه به کاربران اجازه می‌دهد تا فایل‌ها را به یک ناحیه مشخص بکشند و رها کنند.


🔗https://www.dropzone.dev/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

‏** Tabby**

یک دستیار هوش مصنوعی پیشرفته برای کدنویسی. Tabby به صورت محلی نصب می‌شود و دقیقاً همان کاری را انجام می‌دهد که GitHub Copilot انجام می‌دهد، اما کاملاً رایگان است!

از روش‌های مختلفی برای استقرار آن پشتیبانی می‌شود، از جمله Docker، Homebrew و Hugging Face Space، و این دستیار به راحتی با محیط‌های توسعه یکپارچه محبوب ادغام می‌شود.



#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

JS Nice

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

🔗http://jsnice.org/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

‏Solo — سازنده وبسایت مبتنی بر هوش مصنوعی

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

🔗https://soloist.ai/
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

"به دلیل سادگی بیش از حد، Google Tasks قبلاً برای من کاربردی نبود و برای یادآوری‌های کوچک، من از رویدادهای Google Calendar به همراه Google Keep یا TickTick (که در تلفن من دائماً از حافظه پاک می‌شد) استفاده می‌کردم. اما اخیراً متوجه شدم که Google Tasks تغییرات اساسی کرده و به شکل امروزی درآمده است. حتی یک تابلو کانبان هم به آن اضافه شده است."

#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

chatgpt.js
چت‌جی‌پی‌تی.جی‌اس — کتابخانه جاوااسکریپت منبع باز قدرتمندی برای تعامل آسان با DOM چت‌جی‌پی‌تی .
کتابخانه چت‌جی‌پی‌تی.جی‌اس
چندکاره،
شی‌گرا،
آسان برای استفاده
و کارآمد است.

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

Litegraph.js
یک کتابخانه جاوا اسکریپت برای ساخت نمودارهای تعاملی در مرورگر است که می‌توان آن‌ها را به فرمت JSON صادر کرد و به کد دیگر اضافه کرد. این کتابخانه از Canvas 2D، یک ویرایشگر کاربرپسند، تنظیمات طراحی سفارشی و قابلیت کار با TypeScript پشتیبانی می‌کند.

🔗https://github.com/jagenjo/litegraph.js
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript

Barba.js

‌‎یک کتابخانه کوچک (7 کیلوبایت فشرده و کم‌حجم) و ساده برای استفاده است که به شما کمک می‌کند تا انتقال‌های روان و یکدستی بین صفحات وبسایت خود ایجاد کنید. این کتابخانه باعث می‌شود وبسایت شما مانند یک SPA (برنامه تک‌صفحه‌ای) عمل کند و کمک می‌کند تا تأخیر بین صفحات کاهش یابد، درخواست‌های HTTP مرورگر به حداقل برسد و تجربه وب کاربر بهبود یابد.




🔗https://barba.js.org/docs/getstarted/intro/
#️⃣#npm_module
👥@IR_javascript_group
🆔@IR_javascript