https://dev.to/dipakahirav/top-20-javascript-tricks-and-tips-for-every-developer-3apb

بعدی ساعت 12:00

https://najm-eddine-zaga.medium.com/top-javascript-best-practices-cf897022b6fd

بعدی ساعت 14:00

مقاله‌هارو مطالعه کنین
نظری یا سوالی بود توی کامنت بگین ❤️

برید کامنتای این پست لینکدین رو بخونین بعد بیاید ازم تشکر کنین بابت به خنده درآورنتون 😂

راستی اگر لینکدین دارین کانکشن بدین همو پیدا کنیم ❤️

لینکدین من

فیگما یک اکستنشن مرورگر کروم معرفی کرده که یک سایت رو باز میکنید
میزنید روی کپی
میرید داخل فیگما Past میکنید
تمام، الان یک سایت قابل ادیت دارید

سلام به كاپي پيست تمام سايت هاي داخلي و خارجي 🦦🫨

لینک

💚 چنلمون: @pepesocial
  💚 سایتمون: pepe.ir

حتما تستش کنین و نظرتون رو بگین
منم تستش رو امشب یا فردا میزنم نتیجه رو میزارم 😉

یه سایت خفن پر از پورتفولیو برنامه نویسا که میتونین لذت ببرین و ازش برای ساخت سایت خودتون الهام بگیرین 👨🏻‍💻

خفناشو بفرستین باهم ببینیم 👀❤️

در سه سطح مختلف ایده پیاده‌سازی پروژه براتون گذاشته این ریپازیتوری که میتونید استارت پیاده سازیشون رو بزنید 🚀

🔴 Offline

🚀 مینی‌سری جدید : معماری‌های کلاس جهانی در Next.js
همیشه یه سوال بزرگ بعد از یادگیری وجود داره: "خب Next.js رو بلدم، ولی پروژه‌های بزرگ و واقعیِ استارتاپ‌ها دقیقا چطوری فولدربندی و نوشته میشن؟"
کد زدن برای یه سایت ساده کجا، و طراحی سیستم برای یه پروژه بزرگ که چند تا تیم دارن همزمان روش کار می‌کنن کجا!

قراره تو یه مینی‌سری ۵ قسمتی، بریم سراغ ساختارها و معماری‌هایی که شرکت‌های بزرگ و یونیکورن‌ها برای پروژه‌های اصلی‌شون استفاده می‌کنن. تو این سری دیگه کاری با کدهای تستی و دم‌دستی نداریم؛ قراره یاد بگیریم چطور دیدگاهمون رو از یه "کدنویس" به یه "طراح سیستم" ارتقا بدیم.

👇 امروز پارت اول رو با یه معماریِ به شدت کاربردی استارت می‌زنیم آماده‌ باشید 🔥

🚀 سری ۵ قسمتی : معماری‌های کلاس جهانی در Next.js 🟢
پارت ۱ — معماری Bulletproof (سپر ضد گلوله)

خیلی ساده ساده بگم، وقتی پروژه استارتاپت داره سریع بزرگ میشه، کدهات خیلی راحت تبدیل به اسپاگتی کد میشن. معماری Bulletproof (ضد گلوله) اومده که جلوی این کثیف‌ کاری رو بگیره.

ایده اصلی اینه : هر ویژگی (Feature) برای خودش یه کشور مستقله.
به جای اینکه تمام کامپوننت‌های کل سایت رو بریزی تو یه پوشه، تمام هوک‌ها رو تو یه پوشه دیگه و... میای هر فیچر رو با تمام مخلفاتش یه جا جمع میکنی.
اینجوری اگه کسی خواست روی سیستم "نظرات" کار کنه، دقیقا میدونه باید بره تو کدوم پوشه و نیازی نیست کل پروژه رو شخم بزنه.

ساختار فولدرها تو دنیای واقعی این شکلیه :

src/
├── components/       # فقط دکمه‌ها و اینپوت‌های عمومی کل سایت
├── lib/              # تنظیمات کلی مثل کلاینت Axios
├── features/         # 👈 قلب تپنده پروژه
│   ├── comments/     # جزیره مستقل نظرات
│   │   ├── api/      # ریکوئست‌های مربوط به نظرات
│   │   ├── components/ # کامپوننت‌های مخصوص همین بخش
│   │   ├── hooks/    # لاجیک و استیت‌های نظرات
│   │   └── types/    # تایپ‌های تایپ‌اسکریپت این بخش
│   └── auth/         # جزیره مستقل لاگین و ثبت‌نام
└── app/              # فقط وصل کردن فیچرها به روت‌های Next.js

همینقدر ساده و شیک و بدون پیچیدگی زیاد 🟢
یکی از ساده ترین معماری و ساختارهای توی پروژه‌های نکست شناخته میشه 🚀

#Labs_Next5Architecture

🚀 سری ۵ قسمتی : معماری‌های کلاس جهانی در Next.js 🟡
پارت ۲ — ساختار Feature-Sliced Design (FSD)

وقتی پروژه‌ات انقدر بزرگ و خفن شده که حتی مدل Bulletproof هم جواب نمیده، باید بری سراغ FSD. این معماری الان تو خیلی از شرکت‌های بزرگ ترنده.
تو FSD ما با یه سیستم طبقاتی به‌شدت سخت‌گیرانه طرفیم. کدها تو لایه‌های مختلف چیده میشن و قانون جاذبه وجود داره : دیتا فقط از بالا به پایین میریزه!
مثلا لایه Features حق نداره از لایه Pages چیزی ایمپورت کنه. این کار باعث میشه کدهات به هم گره نخورن و وقتی یه جا رو دستکاری میکنی، یه جای بی‌ربط دیگه باگ نده.

نمای واقعی فولدربندی FSD :

src/
├── app/              # تنظیمات پایه، پروایدرها و استایل‌های گلوبال
├── pages/            # ترکیب کردن دیتاها برای ساختن یک صفحه کامل
├── widgets/          # بلوک‌های بزرگ UI (مثلاً کل هدر سایت با دکمه‌هاش)
├── features/         # اکشن‌های کاربر (مثلاً لایک کردن، لاگین کردن)
├── entities/         # موجودیت‌های بیزینس (مدل دیتای User یا Product)
└── shared/           # آیکون‌ها، یوتیلیتی‌ها و دکمه‌های ساده

👇 قانون FSD: کدها مثل طبقات یک برج ساخته میشن؛ هیچ طبقه‌ای نباید بارِ خودش رو بندازه روی سقفِ طبقه بالایی!

#Labs_Next5Architecture

صبح بخیر رفقای کدنویس ☕️
یه نقل قول معروف تو دنیای برنامه‌نویسی هست از دانالد کنوت (Donald Knuth) که میگه :
بهینه‌سازیِ زودرس، ریشه تمام بدی‌هاست (Premature optimization is the root of all evil)

خیلی وقتا روزا درگیر این میشیم که کدمون رو از همون خط اول پرفکت و فوق‌سریع بنویسیم. نتیجه؟ کدی می‌نویسیم که به شدت پیچیده‌ست، خوندنش سخته و آخرش هم اون فیچر کلا از پروژه حذف میشه ( اینقدر پیاده‌سازیش طول میکشه که فکر میکنی بهتره اصلا پیاده‌سازی نشه ) 😂

✅ قانون ۳ مرحله‌ای
1. اول کاری کن که فقط کار کنه ( Make it work )
2. بعد کاری کن که درست و تمیز کار کنه ( Make it right )
3. در نهایت اگه لازم بود، سریعش کن ( Make it fast )

شما تو کدوم مرحله بیشتر گیر می‌کنین؟
روز پرکدی داشته باشیمم 😉 💻

🔥 چالش ظهرگاهی
جنگ زبان‌ها 🔥

بچه‌ها یه سناریوی خیلی ساده داریم که قراره تو سه تا زبان TypeScript, Python, و PHP اجرا بشه.
کدها ایناست :

🟡 تو جاوااسکریپت (JS) :

let a = [1, 2, 3];
let b = a;
b.push(4);
console.log(a);

🔵 تو پی‌اچ‌پی (PHP) :

$a = [1, 2, 3];
$b = $a;
$b[] = 4;
print_r($a);

🟢 تو پایتون (Python) :

a = [1, 2, 3]
b = a
b.append(4)
print(a)

❗️ سوال اینه
خروجی آرایه a توی این سه تا زبان به ترتیب چیه؟ 🤔
توی نظرسنجی پایین جواب بدیم ببینیم چند نفر تفاوت رفتار زبان‌ها رو تو مدیریت حافظه میدونن! 👇

کالبدشکافی چالش ظهر 🕵️‍♂️
دم اونایی که گزینه ۳ رو زدن جیز ❤️
اما چرا این اتفاق افتاد؟ داستان برمیگرده به اینکه زبان‌ها چطور متغیرها رو توی حافظه کپی میکنن.

✅ توی Python و TypeScript (پاس دادن با رفرنس) : وقتی می‌نویسی b = a، زبان نمیاد یه آرایه جدید بسازه❗️
فقط میگه متغیر b هم به همون آدرسِ a تو حافظه اشاره کنه. پس وقتی b رو تغییر میدی، در واقع داری همون آرایه اصلی رو دستکاری میکنی. (خروجی جفتشون شد ۱ تا ۴).

✅ توی PHP (پاس دادن با مقدار - Copy on Write) : پی‌اچ‌پی رفتار متفاوتی داره. وقتی می‌نویسی $b = $a و بعد $b رو تغییر میدی، PHP همون لحظه یه کپیِ کاملا جدید از آرایه تو حافظه میسازه!
پس تغییراتِ $b هیچ ربطی به $a پیدا نمیکنه و آرایه اصلی دست‌نخورده میمونه. (خروجی شد ۱ تا ۳).

این از اون باگ‌هاییه که اگه حواست نباشه، ساعت‌ها تو دیباگ کردنش پیر میشی 😅
از این چالش‌ها بازم بریم؟ (با ری‌اکشن 🔥 نشون بدید).

معرفی ابزار شبانه 🛠🌙

اگه از دست ارورها خسته شدی و دوست نداری هی ترمینال رو باز کنی تا ببینی کجای کارت ایراد داره، افزونه Error Lens تو VSCode دقیقا برای تو ساخته شده!

این اکستنشن چیکار می‌کنه؟ ارورها، هشدارها (Warnings) و مشکلات تایپ‌اسکریپت/پایتون/پی‌اچ‌پی رو به جای اینکه ببره تو پنل پایین، دقیقا همون خطی که کد نوشتی، با رنگ قرمز (یا زرد) و بولد شده بهت نشون میده
✨ اینجوری سرعت دیباگ کردنت حداقل ۲ برابر میشه.

🔗 لینک دانلود مستقیم از مارکت‌پلیس VSCode

شبتون بخیر رفقا، تا فردا و چالش‌های جدید ✌️

console.log("Good Morning, World!");

☕️💻