نسخهٔ آزمایشی Vue v3.6.0-alpha منتشر شده است
(لینک: https://github.com/vuejs/core/releases/tag/v3.6.0-alpha.1)
که در آن حالت Vapor نیز معرفی شده است.
توصیه می‌شود این قابلیت را با احتیاط، تنها در برنامه‌های کوچک، یا در بخش‌هایی از پروژه که نیاز به عملکرد بالا دارند، به‌صورت کامل یا جزئی مورد استفاده قرار دهید.
ایدهٔ اصلی پشت حالت Vapor این است که تعامل با DOM مرورگر به‌طور مستقیم انجام شود، نه از طریق VDOM. این روش به‌صورت نظری می‌تواند موجب افزایش سرعت و کاهش حجم نهایی بسته شود. با این حال، در بیشتر برنامه‌های نوشته‌شده با Vue، احتمالاً این تفاوت‌ها چندان محسوس نخواهند بود، حتی با وجود بنچ‌مارک‌ها.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
(لینک: https://github.com/vuejs/core/releases/tag/v3.6.0-alpha.1)
که در آن حالت Vapor نیز معرفی شده است.
توصیه می‌شود این قابلیت را با احتیاط، تنها در برنامه‌های کوچک، یا در بخش‌هایی از پروژه که نیاز به عملکرد بالا دارند، به‌صورت کامل یا جزئی مورد استفاده قرار دهید.
ایدهٔ اصلی پشت حالت Vapor این است که تعامل با DOM مرورگر به‌طور مستقیم انجام شود، نه از طریق VDOM. این روش به‌صورت نظری می‌تواند موجب افزایش سرعت و کاهش حجم نهایی بسته شود. با این حال، در بیشتر برنامه‌های نوشته‌شده با Vue، احتمالاً این تفاوت‌ها چندان محسوس نخواهند بود، حتی با وجود بنچ‌مارک‌ها.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
GitHub
Release v3.6.0-alpha.1 · vuejs/core
Features
vapor mode (#12359) (bfe5ce3)
Please see About Vapor Mode section below for details.
Performance Improvements
reactivity: refactor reactivity core by porting alien-signals (#12349) (3...
vapor mode (#12359) (bfe5ce3)
Please see About Vapor Mode section below for details.
Performance Improvements
reactivity: refactor reactivity core by porting alien-signals (#12349) (3...
👍5
**Nuxt نسخهٔ چهارم رسماً منتشر شده است!
🔗 [جزئیات بیشتر](https://nuxt.com/blog/v4)
این نسخه شامل مجموعه‌ای از بهبودهای مهم و کاربردی است:
🐤 **تغییر ساختار پوشه‌های پروژه (یا همان معماری): اکنون با ساختار جدید شامل
✨ بازطراحی کامل useAsyncData و useFetch: اکنون از واکنش‌گرایی سطحی (shallow reactivity)، مقدار پیش‌فرض
🍙 سادگی در tsconfig: حالا فقط یک فایل در ریشهٔ پروژه کافی است.
🩹 هماهنگ‌سازی نام‌گذاری خودکار کامپوننت‌ها: از این پس نام‌ها به‌صورت یکنواخت در ابزار توسعه، ویژگی KeepAlive و سیستم Auto Import نمایش داده و استفاده می‌شوند.
📦 آمادهٔ ارتقا هستید؟
📘 [راهنمای مهاجرت به Nuxt 4](https://nuxt.com/docs/4.x/getting-started/upgrade#upgrading-nuxt)
📅 نگران نباشید اگر هنوز آماده نیستید —
پشتیبانی از Nuxt 3 تا پایان سال ۲۰۲۵ ادامه دارد، و Nuxt 4 تا میانهٔ سال ۲۰۲۶ پشتیبانی خواهد شد.
در ضمن، نسخهٔ سوم Nitro هم به‌زودی منتشر می‌شود و پایه‌ای برای Nuxt 5 خواهد بود.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
🔗 [جزئیات بیشتر](https://nuxt.com/blog/v4)
این نسخه شامل مجموعه‌ای از بهبودهای مهم و کاربردی است:
🐤 **تغییر ساختار پوشه‌های پروژه (یا همان معماری): اکنون با ساختار جدید شامل
app/`، `server/ و modules/.✨ بازطراحی کامل useAsyncData و useFetch: اکنون از واکنش‌گرایی سطحی (shallow reactivity)، مقدار پیش‌فرض
undefined و اشتراک داده‌ها بین کامپوننت‌ها پشتیبانی می‌شود.🍙 سادگی در tsconfig: حالا فقط یک فایل در ریشهٔ پروژه کافی است.
🩹 هماهنگ‌سازی نام‌گذاری خودکار کامپوننت‌ها: از این پس نام‌ها به‌صورت یکنواخت در ابزار توسعه، ویژگی KeepAlive و سیستم Auto Import نمایش داده و استفاده می‌شوند.
📦 آمادهٔ ارتقا هستید؟
📘 [راهنمای مهاجرت به Nuxt 4](https://nuxt.com/docs/4.x/getting-started/upgrade#upgrading-nuxt)
📅 نگران نباشید اگر هنوز آماده نیستید —
پشتیبانی از Nuxt 3 تا پایان سال ۲۰۲۵ ادامه دارد، و Nuxt 4 تا میانهٔ سال ۲۰۲۶ پشتیبانی خواهد شد.
در ضمن، نسخهٔ سوم Nitro هم به‌زودی منتشر می‌شود و پایه‌ای برای Nuxt 5 خواهد بود.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
Nuxt
Announcing Nuxt 4.0 · Nuxt Blog
Nuxt 4.0 is here! A thoughtful evolution focused on developer experience, with better project organization, smarter data fetching, and improved type safety.
👍1
برای علاقه‌مندان به آزمایش دستیارهای هوش مصنوعی، شرکت AWS نسخه‌ای اختصاصی از Visual Studio Code با قابلیت‌های هوش مصنوعی ارائه کرده است که با نام Kiro شناخته می‌شود.
ویژگی متمایز Kiro آن است که بر اساس مشخصات پروژه (spec-driven) عمل می‌کند؛ به این معنا که کاربر ابتدا باید مشخصات و نیازمندی‌های پروژه را تعریف کند و سپس Kiro بر مبنای همان مشخصات، ساختار و کدهای پروژه را تولید می‌نماید.
این رویکرد بسیار هوشمندانه است. البته می‌توان این روند را به‌صورت دستی نیز پیاده‌سازی کرد، اما نکته قابل توجه این است که در Kiro این منطق به‌صورت درونی در الگوریتم آن طراحی شده است.
در حال حاضر، استفاده از Kiro رایگان است و این ابزار از مدل Claude Sonnet ۴ بهره می‌برد.
🔗https://kiro.dev/blog/introducing-kiro
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
ویژگی متمایز Kiro آن است که بر اساس مشخصات پروژه (spec-driven) عمل می‌کند؛ به این معنا که کاربر ابتدا باید مشخصات و نیازمندی‌های پروژه را تعریف کند و سپس Kiro بر مبنای همان مشخصات، ساختار و کدهای پروژه را تولید می‌نماید.
این رویکرد بسیار هوشمندانه است. البته می‌توان این روند را به‌صورت دستی نیز پیاده‌سازی کرد، اما نکته قابل توجه این است که در Kiro این منطق به‌صورت درونی در الگوریتم آن طراحی شده است.
در حال حاضر، استفاده از Kiro رایگان است و این ابزار از مدل Claude Sonnet ۴ بهره می‌برد.
🔗https://kiro.dev/blog/introducing-kiro
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
kiro.dev
Introducing Kiro
A new agentic IDE that works alongside you from prototype to production
۸ ابزار رایگان برای طراحی وایرفریم و نمونه‌سازی (Prototyping):
🔸 Figma
🔸 Adobe XD
🔸 Wireframe.cc
🔸 FluidUI
🔸 Mockflow
🔸 Moqups
🔸 Cacoo
🔸 Jumpchart
این ابزارها برای طراحی رابط کاربری، ترسیم طرح‌های اولیه و شبیه‌سازی تعاملات کاربر بسیار کاربردی و مؤثر هستند.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
🔸 Figma
🔸 Adobe XD
🔸 Wireframe.cc
🔸 FluidUI
🔸 Mockflow
🔸 Moqups
🔸 Cacoo
🔸 Jumpchart
این ابزارها برای طراحی رابط کاربری، ترسیم طرح‌های اولیه و شبیه‌سازی تعاملات کاربر بسیار کاربردی و مؤثر هستند.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
سرور HTTP انجین‌ایکس (Nginx) دارای ماژولی به نام njs است که امکان گسترش قابلیت‌های آن با استفاده از جاوااسکریپت را فراهم می‌کند. در گذشته، این ماژول تنها از استاندارد ES5 پشتیبانی می‌کرد. اما اکنون، با بهره‌گیری از موتور QuickJS
، تجربه‌ای مدرن‌تر و قدرتمندتر را ارائه می‌دهد و پشتیبانی کامل از استاندارد ES2023 را فراهم کرده
🔗https://blog.nginx.org/blog/quickjs-engine-support-for-njs
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
، تجربه‌ای مدرن‌تر و قدرتمندتر را ارائه می‌دهد و پشتیبانی کامل از استاندارد ES2023 را فراهم کرده
🔗https://blog.nginx.org/blog/quickjs-engine-support-for-njs
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
🔥2
جاوااسکریپت | JavaScript
php-node یک ماژول بومی برای Node است که امکان اجرای برنامه‌های PHP را در محیط Node فراهم می‌کند. چرا باید چنین کاری کرد؟ برای مهاجرت دادن برنامه‌های قدیمی، ساخت اپلیکیشن‌های ترکیبی PHP و JavaScript، یا حتی اپلیکیشن‌های Nodeای که به هر دلیلی نیاز دارند بخش‌هایی…
لاراول و Node.js: اجرای PHP در محیط Watt Runtime
[مطالعه در وبلاگ Platformatic](https://blog.platformatic.dev/laravel-nodejs-php-in-watt-runtime)
در ماه ژوئن، پروژه‌ای با نام php-node معرفی شد که روشی نوین برای *پر کردن فاصله بین PHP و Node.js* ارائه می‌داد؛ به‌طوری‌که می‌توانستیم کدهای PHP را درون برنامه‌های Node اجرا کنیم.
اکنون این رویکرد یک گام فراتر رفته است: با بهره‌گیری از php-node و سرور برنامه‌ای Watt**، امکان **اجرای برنامه‌های لاراول (Laravel) نیز فراهم شده است.
این پروژه، پیوندی جالب و نوآورانه میان دو اکوسیستم محبوب یعنی PHP و Node.js ایجاد کرده و راهی تازه برای هم‌زیستی آن‌ها در یک پروژه واحد فراهم می‌سازد.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
[مطالعه در وبلاگ Platformatic](https://blog.platformatic.dev/laravel-nodejs-php-in-watt-runtime)
در ماه ژوئن، پروژه‌ای با نام php-node معرفی شد که روشی نوین برای *پر کردن فاصله بین PHP و Node.js* ارائه می‌داد؛ به‌طوری‌که می‌توانستیم کدهای PHP را درون برنامه‌های Node اجرا کنیم.
اکنون این رویکرد یک گام فراتر رفته است: با بهره‌گیری از php-node و سرور برنامه‌ای Watt**، امکان **اجرای برنامه‌های لاراول (Laravel) نیز فراهم شده است.
این پروژه، پیوندی جالب و نوآورانه میان دو اکوسیستم محبوب یعنی PHP و Node.js ایجاد کرده و راهی تازه برای هم‌زیستی آن‌ها در یک پروژه واحد فراهم می‌سازد.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
❤4
آیا راهی برای فشرده‌سازی کدهای SVG می‌خواهید؟
معمولاً SVGها کد نسبتاً تمیزی دارند، ولی بعضی فایل‌ها حجم زیادی کد اضافی و غیرضروری تولید می‌کنند.
ابزار فوق‌العاده‌ای به نام SVGO (مخفف SVG Optimizer) وجود دارد که اگر SVGها را به صورت inline در HTML استفاده می‌کنید، واقعاً به کارتان می‌آید.
با SVGO می‌توانید:
✔️ دقت غیرضروری منحنی‌ها را کاهش دهید
✔️ استایل‌های درون‌خطی را به کلاس‌ها منتقل کنید
✔️ عناصر و ویژگی‌ها را مرتب و گروه‌بندی کنید
---
🔗https://jakearchibald.github.io/svgomg/
#️⃣ #tool
👥@IR_javascript_group
🆔@IR_javascript
معمولاً SVGها کد نسبتاً تمیزی دارند، ولی بعضی فایل‌ها حجم زیادی کد اضافی و غیرضروری تولید می‌کنند.
ابزار فوق‌العاده‌ای به نام SVGO (مخفف SVG Optimizer) وجود دارد که اگر SVGها را به صورت inline در HTML استفاده می‌کنید، واقعاً به کارتان می‌آید.
با SVGO می‌توانید:
✔️ دقت غیرضروری منحنی‌ها را کاهش دهید
✔️ استایل‌های درون‌خطی را به کلاس‌ها منتقل کنید
✔️ عناصر و ویژگی‌ها را مرتب و گروه‌بندی کنید
---
🔗https://jakearchibald.github.io/svgomg/
#️⃣ #tool
👥@IR_javascript_group
🆔@IR_javascript
اگر از معنای یک خطا مطمئن نیستید، گوگل اخیراً قابلیتی به نام AI Console Insights در کنسول به مرورگر کروم افزوده است.
برای استفاده از این قابلیت، ابتدا باید آن را از طریق تنظیمات فعال کنید.
هنگامی که برای توضیح یک پیام درخواست می‌دهید، کروم متن پیام، پشته‌ی خطا (stack trace) و کد مرتبط را به سرورهای گوگل ارسال می‌کند تا تحلیل آن از طریق هوش مصنوعی انجام شود.
فعال‌سازی بینش‌های هوش مصنوعی در کروم
پس از فعال‌سازی این قابلیت، می‌توانید نشان‌گر ماوس را روی هر خطا یا هشدار نگه دارید تا پیامی با عنوان
«درک این خطا» یا «درک این هشدار» مشاهده کنید
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
برای استفاده از این قابلیت، ابتدا باید آن را از طریق تنظیمات فعال کنید.
هنگامی که برای توضیح یک پیام درخواست می‌دهید، کروم متن پیام، پشته‌ی خطا (stack trace) و کد مرتبط را به سرورهای گوگل ارسال می‌کند تا تحلیل آن از طریق هوش مصنوعی انجام شود.
فعال‌سازی بینش‌های هوش مصنوعی در کروم
پس از فعال‌سازی این قابلیت، می‌توانید نشان‌گر ماوس را روی هر خطا یا هشدار نگه دارید تا پیامی با عنوان
«درک این خطا» یا «درک این هشدار» مشاهده کنید
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
❤2👍1👎1🤯1
اگر وب‌سایت شما از iframe یا Service Worker استفاده می‌کند، لازم است بررسی کنید که کدی که در کنسول اجرا می‌کنید، در زمینهٔ (Context) درست اجرا می‌شود.
مرورگر کروم یک گزینش‌گر زمینهٔ جاوااسکریپت در بالای سمت چپ زبانهٔ کنسول (Console Tab) فراهم کرده است. به‌صورت پیش‌فرض، این زمینه روی «فریم اصلی» صفحه قرار دارد.
💡 نکته:
افزونه‌های کروم (Chrome Extensions) نیز دارای زمینهٔ جاوااسکریپت مستقل خود هستند.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
مرورگر کروم یک گزینش‌گر زمینهٔ جاوااسکریپت در بالای سمت چپ زبانهٔ کنسول (Console Tab) فراهم کرده است. به‌صورت پیش‌فرض، این زمینه روی «فریم اصلی» صفحه قرار دارد.
💡 نکته:
افزونه‌های کروم (Chrome Extensions) نیز دارای زمینهٔ جاوااسکریپت مستقل خود هستند.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
اگر کدی را در کنسول اجرا کرده‌اید و حالا می‌خواهید نتیجهٔ آن را در جایی دیگر جای‌گذاری (Paste) کنید، بسیار ساده است:
کافی‌ست دستور زیر را اجرا کنید:
در اینجا، $_ به مقدار آخرین عبارت جاوااسکریپتی که در کنسول اجرا کرده‌اید اشاره دارد.
اگر نیاز دارید چند مرحله مختلف را روی یک شیء انجام دهید، استفاده از $_ باعث می‌شود بتوانید به نتیجهٔ آخرین عملیات به‌سادگی دسترسی پیدا کنید، بدون نیاز به اجرای مجدد کل عبارت.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
کافی‌ست دستور زیر را اجرا کنید:
در اینجا، $_ به مقدار آخرین عبارت جاوااسکریپتی که در کنسول اجرا کرده‌اید اشاره دارد.
اگر نیاز دارید چند مرحله مختلف را روی یک شیء انجام دهید، استفاده از $_ باعث می‌شود بتوانید به نتیجهٔ آخرین عملیات به‌سادگی دسترسی پیدا کنید، بدون نیاز به اجرای مجدد کل عبارت.
#️⃣#tool
👥@IR_javascript_group
🆔@IR_javascript
👍1