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

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

🌐 @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

💎 معرفی PlayCanvas: یک کتابخانه حرفه‌ای برای ایجاد اپلیکیشن‌های 3D

اگر به دنبال یک کتابخانه سبک و قدرتمند برای ایجاد اپلیکیشن‌های 3D با استفاده از React هستید، PlayCanvas گزینه‌ای عالی برای شماست! این کتابخانه به شما امکان می‌دهد تا به سادگی و با استفاده از قابلیت‌های پیشرفته‌ای مانند پشتیبانی از رویدادهای اشاره، فیزیک، و Gaussian splats، اپلیکیشن‌های خیره‌کننده و تعاملی بسازید.

پکیج PlayCanvas به شما این امکان را می‌دهد که به راحتی عناصر 3D را در پروژه‌های خود پیاده‌سازی کنید و با استفاده از ویژگی‌های آن، تجربه کاربری بی‌نظیری را فراهم آورید.

برای مشاهده دمو و امکانات بیشتر، به آدرس زیر مراجعه کنید:
🌐 PlayCanvas Demo


🌐 @pieceJS

💎 دو واجب مهم برای هر Next.js دولوپر!

اولیش: Rate Limiting
با استفاده از پکیج‌هایی مثل express-rate-limit، تعداد درخواست‌های کاربران رو محدود کن تا از حملات DDoS و سوء استفاده جلوگیری کنی.

npm install express-rate-limit

و دومیش: Proxy
با تنظیم پروکسی در next.config.js، مشکلات CORS رو حل کن و آدرس سرور اصلی رو مخفی نگه دار.

// next.config.js
module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://api.example.com/:path*',
      },
    ];
  },
};

📌 این دو نکته رو فراموش نکن! برای توسعه‌ی اپلیکیشن‌های ایمن و بهینه، حتماً ازشون استفاده کن.

#NextJS #WebDevelopment #امنیت #سکیوریتی


🌐 @pieceJS

💎 یه تریک اچ تی ام الی

برای اینکه تمام تگ های <br/>درون یه بلاک اچ تی ام ال از کار بندازید کافیه بهش استایل زیر بدید.

div br{
   display: none;
}

🌐 @pieceJS

دوستان عزیزم، بعد از 15 سال سابقه طراحی سایت و وب
نصیحت دلسوزانه ای دارم برای کسانی که تازه میخوان مسیر JS رو پیش بگیرند.

باشد که هم ثوابی برا ما بشه هم نکته مفیدی برای شما بمونه از این حقیر 😁

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

سعی کنید همیشه از مقادیر Primitive Type به عنوان Dependency استفاده کنید.
استفاده از مقادیر Reference Type نظیر آبجکت ها موجب رندر های غیر ضروری بسیاری میتونه بشه
اما اگه نیاز بود حتماً یه متغیر رفرنس تایپ رو به عنوان وابستگی به useEffect بدید سعی کنید فقط یکی از پرارپتی های Primitive Typeش رو به عنوان وابستگی بدید مثلاً user.firstName بدید نه خود user رو.


🌐 @pieceJS

💎 فرق ?? و || در جاوااسکریپت چیه؟

const age = props.age ?? "";

حالا چرا به‌ جای || از ?? استفاده شده؟ 🧐

تفاوتش اینجاست:

🔷 اپرتور ?? فقط وقتی مقدار null یا undefined باشه، سمت راست رو جایگزین می‌کنه.

🔷 ولی || هر چیزی که Falsy باشه (مثل "", 0, false) رو رد می‌کنه!

نمونش:

const a = "" ?? "default"; // => ""
const b = "" || "default"; // => "default"

پس اگه می‌خوای مقدارهایی مثل "" یا 0 رو نگه داری، از ?? استفاده کن!

#JavaScript #CodeTips #React


🌐 @pieceJS

از اولین کسانی که شغلش رو به خاطر ای‌آی از دست داد؛ تام بود (:

💎 متغیر های محیطی در نکست جی اس

* متغیرهای محیطی معمولی مثل IS_DEV فقط توی سرور قابل دسترسی هستند، یعنی وقتی کد توی سرور اجرا می شه می تونی به اونا دسترسی داشته باشی.

* متغیر هایی که اسمشون با NEXT_PUBLIC_ شروع می شه مثل NEXT_PUBLIC_IS_DEV هم توی سرور و هم توی مرورگر (کلاینت) قابل دسترسی هستند.

* یعنی اگر NEXT_PUBLIC_IS_DEV را تعریف کنی، تو هر جای پروژه میتونی از ازشون استفاده کنی، چه سرور باشد چه مرورگر، مثلا اینطوری:

console.log(process.env.NEXT_PUBLIC_IS_DEV);

🌐 @pieceJS

#مثبت_برنامه_نویس

وقتی کارت گرافیک گیر می ‌کنه یا صفحه تار شد:

Win + Ctrl + Shift + B

درایور گرافیک ریست میشه و همه چیز سر جای خودش برمی ‌گرده
معمولاً حین بازی های سنگین، تدوین های خفن یا ارائه با ویدئو پرژکتور این موارد زیاد پیش میاد

#خودمم_میدونم_ربطی_هم_به_جاوا_اسکریپت_نداره_😭

🌐 @pieceJS

یه سوءتفاهم رایج توی خیلی از کدبیس‌ ها اینه که فکر می‌ کنیم چون داخل سرور درست هندل شده، پس نوع HTTP Method مهم نیست.
در حالی که API فقط اجرا نیست، قرارداده.
متد HTTP Method یعنی:
من دارم چی کار می‌ کنم؟
نه اینکه:
تو سرور چجوری نوشتمش.
متد PATCH یعنی دارم فقط بخشی از یک resource رو تغییر می‌ دم،
متد PUT یعنی جایگزینی کامل،
وقتی مینویسم POST یعنی… یه کار مبهم.
اینکه همه این‌ ها رو با POST بزنیم شاید الان کار کنه،
ولی بعداً مستندات دروغ می‌ شن، تیم گیج می‌ شه و توسعه سخت.
کد ممکنه درست باشه،
ولی وقتی Method غلطه، API غلطه.