📁 معرفی وبسایت Web Code Tools

با استفاده از وبسایت Web Code Tools می توانید با چند کلیک کد های HTML و CSS همچنین کانفیگ Meta data سایت، Robot.txt و... تولید کنید.

⬅️ برای مشاهده کلیک کنید

#معرفی_وبسایت
🟨 @pieceJS
Buy me a coffee 😀

💎 محاسبه تعداد اعداد منفی درون یک آرایه

برای محاسبه تعداد اعداد منفی درون یک آرایه میتونید از تیکه کد بالا استفاده کنید.

💡 نکته مهمی که داخل این پست میخوام بهتون بگم اینکه، قطعاً میدونید این کد رو میتونید با یه for ساده هم پیاده سازی کنید اما پرفورمنس آن به نسبت پیاده سازیش با حلقه for بالاتر هست دلیلش هم اینه که توابعی نظیر filter یا map صرفاً جهت کار بر روی آرایه ها ساخته شده اند و همیشه سعی شده در توابعی اخصاصی از الگوریتم های بهینه تری جهت بهبود پرفرمنس آن استفاده شود.

💬 پ.ن: البته تو نمونه بالا اینقدر اختلاف بین پرفرومنس ها در حالت های مختلف ناچیز هست که میشه ازش صرف نظر کنید و فقط به خوانایی تمرکز کنید


🌐 @pieceJS
❣️ Buy me a coffee

💎 نکته ای در مورد بروزرسانی داکیومنت توسط mongoose

دو متد findByIdAndUpdate و findOneAndUpdate به صورت پیشفرض، داکیومنت فعلی رو برمیگردونند سپس، مقدار اون رو آپدیت میکنند اگر میخواهید مقدار داکیومنت مورد نظر پس از آپدیت شدن برگردانید تنظیمات زیر رو اعمال کنید

Model.findByIdAndUpdate(id, updateObj, {new: true}, function(err, model) {...

🌐 @pieceJS
❣️ Buy me a coffee

💎 نکته ای در خصوص استفاده از ایونت های onChange یا onClick در select تگ ها

🔷 در صورتی که دارید از تگ select در پروژه خود استفاده می کنید، در نظر داشته باشید که نمیتوانید از ایونت های onChange یا onClick در تگ های فرزند آن یعنی تگ های option استفاده کنید و فقط میتوانید از این ایونت ها در خود تگ select استفاده کنید دلیل آن هم این است که اکثر ورژن های بروزر های کروم، سافاری و IE از آن ها در این تگ یعنی option پشتیبانی نمی کنند. (فایرفاکس پشتیبانی میکنه)


🌐 @pieceJS

🖋 اصطلاح Complex Transactions یعنی چه؟

این اصطلاح بیشتر در مبحث دیتابیس ها مورد استفاده قرار میگیره
اصطلاح Complex Transactions یا تراکنش های پیجیده به عملیات هایی گفته میشه که به صورت پیوسته و اتمیک (atomic) انجام میشه به عبارتی یا هیچ کدام انجام نشه یا همه با هم انجام بشه.
این قابلیت بیشتر در دیتابیس های SQL بیس ها وجود داره. در دیتابیس های noSQL باید این گونه عملیات ها مدیریت بشه.

#دیکشنری #دیتابیس



🌐 @pieceJS

💎 استفاده از تگ 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