💎 در مورد Suspense در ریکت و نکست جی اس

استفاده از Suspense در React برای مدیریت لود کامپوننت‌های غیرهمزمان (async) استفاده میشه. زمانی که شما کامپوننتی رو با async تعریف می‌کنید، React تلاش می‌کنه تا اون کامپوننت رو لود کنه و اگر این لود زمان‌بر باشه، Suspense به کار میاد تا یک لودینگ شیک (loading state) رو نمایش بده.

اگر شما Suspense را در لایوت (layout) خود قرار دادید و کامپوننت اصلی شما هم به صورت غیرهمزمان یا همون async تنظیم کرده اید، در زمان بارگذاری اولیه، Suspense فعال میشه و صفحه لود یا هرچیزی که شما براش تعریف کردید رو نمایش میده.

نتیجه: اگر UX پروژه براتون اهمیت داره پیشنهاد میکنم حتماً از پراپ Suspense تو لایوت اصلی استفاده کنید

🌐 @pieceJS

💎 در مورد متد lean در Mongoose

تو Mongoose، وقتی با دیتابیس کار می‌کنی و یه کوئری می‌زنی، نتیجه‌ای که برمی‌گرده معمولاً یه شیء پر از امکانات و متدهای مختلف Mongoose هست. این یعنی می‌تونی مستقیم روش کارهایی مثل save یا populate انجام بدی. ولی گاهی وقتا تو فقط نیاز داری داده‌های خام و ساده رو بگیری و نیازی به این همه امکانات اضافی نداری. اینجا lean() به دادت می‌رسه!

فرض کن می‌خوای اطلاعات یه کاربر رو از دیتابیس بگیری، ولی نمی‌خوای باهاش کاری بکنی:

const user = await User.findOne({ email: "[email protected]" }).lean();
console.log(user);

اینجا user دیگه یه سند Mongoose نیست، بلکه یه شیء جاوااسکریپت ساده‌ست که فقط داده‌های خام توشه.


💡 فقط یادت باشه که اگه بعداً می‌خوای با این داده‌ها کارهایی مثل ذخیره (save) انجام بدی، lean() گزینه مناسبی نیست، چون داده‌ها دیگه اون قابلیت‌ها رو ندارن.

✅ جمع بندی: lean() وقتی به دردت می‌خوره که فقط می‌خوای داده‌های خالص و بدون دردسر رو بگیری. سبک و سریع، دقیقاً همون چیزی که گاهی نیاز داری! 😄

🌐 @pieceJS

#پیشنهاد
فایل JSON حاوی اطلاعات تمامی استان ها و شهر های ایران که بشدت توی پروژه ها بخصوص جایی که نیاز به ثبت اطلاعات کاربر هست نیاز میشه

منبع: Saman Zamani Github

💎 در مورد متد Array.from در جاوااسکریپت

این متد یه جورایی مثل جادو می‌مونه که بهت اجازه می‌ده از هر چیزی که شبیه آرایه‌ست یا قابل تکراره، یه آرایه جدید بسازی. خیلی راحت و سریع! 🚀

چطوری کار می‌کنه؟

Array.from(arrayLike, mapFunction, thisArg)

پارامترهاش چیه؟

arrayLike:
- این یکی می‌تونه هر چیزی باشه که شبیه آرایه‌ست، مثلاً یک رشته، یا حتی یه مجموعه (Set) یا چیزای دیگه.
- مثلاً:

     Array.from('hello') // → ['h', 'e', 'l', 'l', 'o']
     

mapFunction (اختیاری):
- با این تابع می‌تونی به هر عنصر تو آرایه جدید یه تغییر بدی. مثلاً اگر بخوای همه عددها رو دو برابر کنی، می‌تونی ازش استفاده کنی.
- مثل این:

     const arr = Array.from([1, 2, 3], x => x * 2);
     console.log(arr); // [2, 4, 6]
     

thisArg (اختیاری):
- این یکی بهت اجازه می‌ده یه مقدار خاص رو به عنوان this تو تابع mapFunction استفاده کنی.
- اگه نذاری، this به طور پیش‌فرض میشه undefined.


چند تا مثال بزنیم؟

🔶 1. ساختن آرایه از یه رشته

const str = 'hello';
const arr = Array.from(str);
console.log(arr); // ['h', 'e', 'l', 'l', 'o']

🔶 2. ساختن آرایه از یک مجموعه (Set)

const set = new Set([1, 2, 3]);
const arr = Array.from(set);
console.log(arr); // [1, 2, 3]

🔶 3. استفاده از mapFunction

const arr = Array.from([1, 2, 3], x => x + 1);
console.log(arr); // [2, 3, 4]

🔶 4. استفاده از thisArg

function addToThis(value) {
    return value + this.number;
}
const obj = { number: 5 };
const arr = Array.from([1, 2, 3], addToThis, obj);
console.log(arr); // [6, 7, 8]

✅ نکته‌های مهم

- غیر تغییر دهنده: یعنی اصل داده‌ها رو دست نمی‌زنه و فقط یه آرایه جدید می‌سازه. 🔒
- تبدیل آسون: با این متد می‌تونی هر داده‌ای رو به راحتی تبدیل به آرایه کنی. 🔄
- سازگاری: تو اکثر مرورگرهای مدرن کار می‌کنه، ولی ممکنه تو بعضی نسخه‌های قدیمی‌تر نباشه. 🖥

💭 نتیجه‌گیری

در کل، Array.from یه ابزار خیلی خوب و کاربردیه که بهت کمک می‌کنه از هر چیزی که شبیه آرایه‌ست، یه آرایه بسازی. با قابلیت‌هایی مثل تغییر دادن داده‌ها، خیلی کارتو راحت می‌کنه. پس حتماً امتحانش کن!


🌐 @pieceJS

💎 استفاده از مقادیر قدیمی استیت درون رویداد ها

دوستان عزیز وقتی توی رویدادهایی (مثل دابل‌کلیک) از state های ریداکس استفاده می‌کنید، بعد از هر باربروزرسانی store، ممکنه مقادیری که درون این رویدادها می‌گیرید قدیمی باشن، چون React مقداریر قبلی state رو نگه می‌داره. و اینجاست که مشکل پیش میاد چراکه مقادیر به‌روز نیستن!

✅ اما راه‌حل سادست، به‌جای استفاده مستقیم از state، با getState از خود Redux آخرین و به‌روزترین مقادیر رو بگیرید. اینطوری همیشه مطمئنید که اطلاعاتی که دارید، کاملاً آپدیت و درسته.

پ.ن: صبح تا حالا وقتمو گرفت تا متوجه باگم شدم 🥹🥲



🌐 @pieceJS

💎 داینامیک کردن نام کلید ها در آبجکت ها

وقتی می‌خوایم یه کلید (key) توی یک شیء (object) رو به صورت دینامیک بسازیم، از براکت‌ها استفاده می‌کنیم. مثلاً:

{[product_${i}]: id}

اینجا داریم می‌گیم که اسم کلید رو با استفاده از i درست کنیم. یعنی اگر i برابر 1 باشه، کلید میشه product_1 اگر 2 باشه میشه product_2 و همینطور ادامه.

اگر بخوایم به صورت ثابت بنویسیم، باید اینطوری بنویسیم:

{ product_1: id }

اینجوری فقط یه کلید ثابت داریم و نمی‌تونیم توی حلقه چند تا کلید مختلف درست کنیم. پس با براکت‌ها می‌تونیم خیلی راحت اسم کلیدها رو تغییر بدیم.



🌐 @pieceJS

💎 رویداد beforeunload در جاوا اسکریپت

برای اینکه قبل از بسته شدن تب درون بروزر مربوط به وب اپلیکیشنی که طراحی کرده اید یه پیام Confirm بیاد میتونید از این رویداد استفاده کنید.

 useEffect(() => {
    const handleBeforeUnload = (event) => {
      event.preventDefault();
      event.returnValue = '';
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

#event

🌐 @pieceJS

💎 تابع eval در جاوا اسکریپت

تابع eval توی جاوااسکریپت یه جورایی مثل یه جادوگر عمل می‌کنه! می‌تونی بهش یه رشته بدی که شامل کد جاوااسکریپت هست، و اون رو اجرا می‌کنه. مثلاً:

eval("console.log('سلام دنیا!')");

این کد توی کنسول "سلام دنیا!" رو چاپ می‌کنه.

اما یه نکته مهم: استفاده از eval خطرناکه! اگه ورودی‌اش از منبع غیرقابل اعتماد باشه، ممکنه کدهای بدی اجرا بشه. 😁👌🏻 همچنین، سرعت برنامه‌ت رو هم می‌تونه پایین بیاره.

پس بهتره فقط وقتی که واقعا نیاز داری ازش استفاده کنی و به جای اون، از روش‌های دیگه برای اجرای کد استفاده کنی.


#function
🌐 @pieceJS

🎞 ویدئویی جالب از پرفورمنس انواع روش های مرتب سازی

دیدنش پیشنهاد میشه، میتونه بهتون ذهنیت بهتری از روش های مرتب سازی بده

🌐 @pieceJS

💎 در مورد محیط Edge Runtime - مزایا و محدودیت ها

محیط Edge Runtime در Next.js به شما این امکان رو می‌ده که کد رو نزدیک به کاربر اجرا کنید، که باعث می‌شه سرعت بارگذاری وب‌سایت بیشتر بشه و تجربه کاربری بهتری داشته باشید.

🟡 مزایاش شامل کاهش زمان تأخیر و بهبود عملکرد سایت هست. اما معایبی هم داره؛ مثلاً ممکنه برخی کتابخانه‌ها با ااین محیط سازگار نباشند و دیباگ کردن کدها هم ممکنه سخت‌تر بشه.

به صورت پیشفرض، Edge Runtime در Middleware.js فعال هست و می‌تونید ازش برای پردازش درخواست‌ها در در این محیط استفاده کنید.

از مهمترین کتابخونه هایی که در این محیط کار نمیکنه میشه به mongoose اشاره کرد که گاهاً میتونه معضلی باشه.
و نکته مهمتر API های Node.js در دسترس نیستن مثلاً کتابخونه‌هایی مثل fs که برای کار با فایل‌ها استفاده میشن، توی Edge Runtime کار نمی‌کنن.

💡 راه حل: برای حل اینچنین محدودیت هایی میتونید از API استفاده کنید.
#edge_runtime

🌐 @pieceJS

💎 معجزه ایندکس رو فراموش نکن

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

#database

🌐 @pieceJS

این چه سمی بود اول صبحی دیدم 😂😂😂

💎 تجربه‌ی فول اسکرین با یک کلیک

با استفاده از کد زیر می‌تونید دکمه Full Screen به وب‌سایت‌تون اضافه کنید که به کاربرها اجازه می‌ده با یک کلیک وارد حالت فول اسکرین بشن یا ازش خارج بشن!

<button id="fullscreenBtn">Full Screen</button>

<script>
    const fullscreenBtn = document.getElementById('fullscreenBtn');

    fullscreenBtn.addEventListener('click', () => {
        if (document.fullscreenElement) {
            document.exitFullscreen();
        } else {
            document.documentElement.requestFullscreen();
        }
    });
</script>

با این کد، کاربرها می‌تونن محتوای شما رو به صورت تمام صفحه ببینند و تجربه‌ی بهتری داشته باشند. حتماً امتحانش کنید.


🌐 @pieceJS

💎 چرا از کاستوم هوک استفاده کنم؟ خب از فانکشن ساده استفاده می کنم!!!

کاستوم هوک‌ها در React برای استفاده مجدد از منطق (مثل state یا effect) بین کامپوننت‌ها به کار میرن. می‌تونن از هوک‌های داخلی React (مثل useState و useEffect) استفاده کنن.
توابع معمولی برای کارهای ساده‌تر (مثل محاسبات یا تبدیل داده‌ها) مناسب‌اند، اما نمی‌تونن از هوک‌ های React استفاده کنن. پس اگه کارت با state یا effect هست، از کاستوم هوک استفاده کن؛ در غیر این صورت، تابع معمولی کافیه! 😊




🌐 @pieceJS

💎 از فولدر public استفاده کنم یا dist ؟


اینم از اون سوالاست که باید بگی قرار دادن فایل‌های CSS درون فولدر public و dist به ساختار پروژه و نحوه مدیریت فایل‌های استاتیک بستگی داره.


فولدر public مثل یک جعبه ابزار ساده‌ هست. هر چیزی که اونجا بذاری، بدون تغییر مستقیم قابل استفادست. مثلاً اگر یک فایل CSS ساده داری و نمی‌خوای ابزارهایی مثل Webpack اونو دستکاری کنن، اینجا بهترین جایگاهه.

اما فولدر dist مثل یک کارخونست. وقتی از ابزارهایی مثل Webpack یا Vite استفاده می‌کنی، این ابزارها فایل‌های CSS تو رو می‌گیرن، پردازش می‌کنن (مثلاً فشرده می‌کنن یا SCSS رو به CSS تبدیل می‌کنن) و نتیجه نهایی رو تو این فولدر قرار میدن. اینطوری فایل‌ها بهینه‌ تر و حرفه‌ ای‌ تر میشن.

پس اگر پروژه‌ ات سادست و نیازی به این پردازش‌ ها نداره، از public استفاده کن. اما اگر پروژت بزرگتره و میخوای فایل‌ هات بهینه بشن، dist گزینه بهتریه.

🌐 @pieceJS

💎 چرایی کلین آپ کردن useEffect

احتمالا شما هم سورس های زیادی رو تو گیت هاب میبینید که از هوک useEffect استفاده کردن اما اون رو clean up نکردن

خواستم تو این پست علت اینکه اصلا چرا باید clean up کنیم یه توضیح مختصری بدم


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


از طرفی کلین آپ کمک می‌ کنه که جلوی یه سری باگ‌ها و مشکلات غیرمنتظره بگیری. مخصوصاً زمانی که به یه ای پی آی وصل شدی و سابسکرایب ایجاد کردی.


در نهایت، این کار باعث بهبود عملکرد اپلیکیشن میشه. وقتی منابع به درستی مدیریت بشن، اپلیکیشن سبک‌ تر و سریع‌ تر عمل می‌ کنه. پس کلین آپ کردن useEffect نه تنها برای کد تمیز و قابل نگهداری مهمه، بلکه به تجربه کاربری هم کمک می‌کنه.

🌐 @pieceJS

💎 مشکل استایل های راستچین برای برخی پکیج های اسلایدر

اگه اسلایدر کار می‌کنه ولی تصاویر نشون داده نمیشن، ممکنه مشکل از direction: rtl; باشه! بعضی اسلایدرها فقط با ltr درست کار می‌کنن. کافیه جهت رو تست کنید، شاید همین یه تغییر مشکل شما رو مثل من حل کنه


🌐 @pieceJS