💎 استفاده از تگ a به عنوان فرزند کامپوننت Link و چرا اصلا باید این کارو کنیم؟!

💬 اگر دارید از نکست جی اس استفاده می کنید حتماً متوجه شدید که نمیتونید از تگ a به عنوان فرزند در کامپوننت Link استفاده کنید!

حتماً برای یکی دو تا سوال شده که اصلاً چرا باید از a به عنوان فرزند در کامپوننت Link که خودش به نوعی داره از تگ a استفاده می کنه، استفاده کرد؟! 🤨

✅ دلیلش صرفاً جهت بکارگیری از رویداد هایی مثل onClick، onChange و ... هست این رویداد ها رو نمیتونید به عنوان prop به خود کامپوننت Link بدید و باید به تگ a به عنوان فرزند بدید و در صورتی میتونید این تگ رو به عنوان فرزند به Link بدید که پراپ legacyBehavior رو به تگ Link بدید


پ.ن: البته من شنیدم تو نسخه های جدید نکست، دیگه نیازی نیست که از legacyBehavior هم استفاده کنید کسی تست زده؟


🌐 @pieceJS

💎 انتقال ویژگی href از Link به کامپوننت فرزند

فرض کنید یه کامپوننت سفارشی برای تگ لینک دکمه هاتون ایجاد کرده اید و میخواهید اونو به عنوان فرزند به کامپوننت های Link بدید.
در این شرایط برای اینکه بتونید از ویژگی href کامپوننت Link بهره مند بشید باید درون این تگ از پراپ passHref استفاده کنید این پراپ ویژگی href رو به کامپوننت فرزند یعنی MyBottonLink انتقال میدهد.



🌐 @pieceJS

💎 در مورد Custom Event در جاوا اسکریپت

🔶 برای ایجاد ایونت های سفارشی از کلاس CustomEvent یا کلاس Event استفاده میشه و معمولاً از ایونت سفارشی، برای ایجاد ارتباط بین بخش های مختلف پروژه استفاده می کنیم
تفاوتی که این دو کلاس با هم دارند اینه که وقتی از Event استفاده میکنید میتونید ایونت های ساده ای مثل onClick و... ایجاد کنید ولی وقتی از CustomEvent استفاده می کنید، میتونید یه سری جزئیات دیگه هم به ایونتتون اضافه کنید (که تو این محتوا بنا ندارم زیاد در این خصوص بنویسم)

💬 اما ممکنه براتون سوال بشه آیا از ایونت های سفارشی تو پروژه های ریکتی هم استفاده میکنیم یا اصلاً نیازه استفاده بشه؟! جواب اینه که شما تو اکثر پروژه های ریکتی از Custom Event استفاده می کنید با این تفاوت که دیگه مستقیم نمیاید از کلاس های CustomEvent یا Event استفاده کنید بلکه از ابزار هایی مثل Redux و ContextAPI استفاده می کنید.


نتیجه : به طور کلی از Custom Event برای ایجاد ارتباط بین بخش های مختلف پروژه استفاده میشه که این مورد تو Vanilla JS برای پروژه های کوچک راحت قابل پیاده سازی و نگهداریه ولی تو پروژه های بزرگ، مقداری پیچیده و نگهداریش سخت میشه. در صورتی که تو ریکت خیلی ساده، آسان و سریع تره


🌐 @pieceJS

💎 جستجو در دیتابیس بدون در نظر گرفتن بزرگی یا کوچکی حروف

برای جستجو در دیتابیس بدون در نظر گرفتن بزرگی یا کوچکی حروف، در دیتابیس های mongoDB باید از رجکس استفاده کنید.
در نظر داشته باشید به صورت پیشفرض، جستجویی که با استفاده از mongoose انجام میدید case-sensitive هست

 const user = await User.findOne({
             email: new RegExp(`^${email}`,"i")
                })

🌐 @pieceJS

💎 در مورد 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