‏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

‏FormKit هوش مصنوعی را به KickStart خود اضافه کرده است (https://kickstart.formkit.com/).

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


#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript

چگونه مرورگر می‌فهمد چه چیزی را باید کش کند؟

این یک سوال متداول در مصاحبه‌های فنی است و همچنین در عمل بسیار مفید است.

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

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

ساده‌ترین روش برای کنترل کش کردن در مرورگر، این است که به صورت مستقیم به مرورگر بگوییم چه چیزی را و تا چه زمانی می‌تواند کش کند. این کار معمولاً با استفاده از هدرهای HTTP به نام Cache-Control و Expires انجام می‌شود.

هدر Cache-Control می‌تواند مقادیر مختلفی داشته باشد:

‏no-cache: مرورگر قبل از هر استفاده از فایل، مجبور است از سرور بررسی کند که آیا تغییری در آن ایجاد شده است یا خیر.

‏no-store: ذخیره فایل در کش کاملاً ممنوع است. این گزینه برای داده‌های حساس مانند تاریخچه تراکنش‌های بانکی بسیار مفید است.

‏public, max-age=31536000: مثالی از کش کردن طولانی‌مدت است که در آن فایل می‌تواند تا یک سال در کش ذخیره شود (مقدار max-age به ثانیه مشخص می‌شود). برای مثال، می‌توان از این گزینه برای لوگوی یک شرکت که به ندرت تغییر می‌کند، استفاده کرد.

هدر Expires نیز وجود دارد که تاریخ و زمان دقیق انقضای فایل را مشخص می‌کند. به عنوان مثال:Expires: Wed, 21 Oct 2024 07:28:00 GMT
این هدر به مرورگر می‌گوید که فایل تا تاریخ 21 اکتبر 2024 ساعت 7:28 به وقت گرینویچ قابل استفاده است.

به طور کلی، هدر Expires کمتر استفاده می‌شود زیرا به زمان دقیق سیستم وابسته است و ممکن است به دلیل اختلاف ساعت، مشکلاتی ایجاد کند. بنابراین، معمولاً از هدر Cache-Control و پارامتر max-age آن استفاده می‌شود.

به طور خلاصه، مرورگرها معمولاً با استفاده از هدر Cache-Control متوجه می‌شوند که چه فایل‌هایی را می‌توانند کش کنند.

#️⃣#tip
👥@IR_javascript_group
🆔@IR_javascript