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

✅ توی 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!");

☕️💻

☀️ نقشه راه جاوااسکریپت ( حیاتی برای تازه‌کارها )

رفقا، برای تسلط واقعی به جاوااسکریپت، این ۵ سرفصل خط قرمزِ شماست. اگه اینا رو ندونی، درگیرِ باگ‌های بی‌انتها میشی :

1. ES6+ Features: (Destructuring, Spread/Rest, Arrow Functions)
2. Asynchronous JS: (Promises, Async/Await - قلبِ فچ کردن دیتا)
3. Scope & Closures: (درکِ رفتار حافظه)
4. The Event Loop: (چطوری JS با تردِ اصلی کار می‌کنه)
5. Array Methods: (map, filter, reduce - سلاح‌های اصلی شما)

این لیست رو سیو کنید، هر وقت تو مسیرِ React یا Next.js گم شدید، برگردید به همین مباحث.

🚀 سری ۵ قسمتی : معماری‌های کلاس جهانی در Next.js 🟠
پارت ۳ — معماری تمیز (Clean Architecture)
این همون معماری معروفیه که "عمو باب" (Uncle Bob) معرفیش کرد. تو پروژه‌های اینترپرایز که قراره ۱۰ سال عمر کنن، بزرگ‌ترین ترس اینه که یه روزی فریمورک‌ها منقرض بشن!

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

فولدربندی به سبک پیازی (Onion) :

src/
├── domain/           # هسته مرکزی: فقط قوانین خالص، بدون هیییچ ایمپورتی از ری‌اکت
│   └── models/       # مثلاً قانون اینکه سبد خرید چطور محاسبه میشه
├── application/      # یوزکیس‌ها: کارایی که کاربر می‌تونه بکنه (UseCase)
├── infrastructure/   # ارتباط با دنیای بیرون: وصل شدن به API یا دیتابیس محلی
└── presentation/     # لایه نمایش: همون کامپوننت‌های React و روت‌های Next.js

#Labs_Next5Architecture

https://t.me/labs_gp/73

یکی از بچه‌ها در پیروی از این ساختار گفته بود که دقیقاً نشان بدیم این موضوع توی پروژه‌های واقعی چگونه چطوریه. یکی از پروژه‌هایی که در حال حاضر روی اون کار می‌کنم و به زودی به تموم میشه و معرفیش میکنم بهتون از همین ساختار پیروی می‌کند.

همینطور که می‌بینین، همه چیز حول و حوش یک پوشه پیش میره

رسما دارم هر ۲ روز یه بسته ۴ گیگ یک هفته میخرم 🫪🫪

🚀 سری ۵ قسمتی : معماری‌های کلاس جهانی در Next.js 🔴
پارت ۴ — معماری قلمرو‌محور (Domain-Driven Design - DDD)

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

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

وقتی بیزینس تبدیل به فولدر میشه :

src/
├── domains/
│   ├── inventory/         # قلمرو انبارداری
│   │   ├── api/
│   │   ├── components/
│   │   └── core/          # لاجیک تخصصی انبار
│   ├── billing/           # قلمرو حسابداری و پرداخت
│   │   ├── api/
│   │   ├── components/
│   │   └── core/          # لاجیک تخصصی مالی
└── shared/                # کدهای مشترک بین همه قلمروها

این دو دسته از ساختار و معماری رو من خودم به شخصه هنوز تجربه استفاده ازش رو ندارم که در اختیارتون بزارم ولی اگر پروژه اپن سورسی دیدم حتما رفرنس میدم براتون ❤️

خروجی کد زیر چیه؟

🔰 مبحث Closures توی JS رو مطالعه کنین

🚀 سری ۵ قسمتی: معماری‌های کلاس جهانی در Next.js 🟣
پارت ۵ — ساختار Monorepo (Turborepo)

فرض کن رسیدی به جایی که یه پنل مدیریت داری، یه سایت اصلی برای مشتری‌ها، و یه سایت دیگه برای وبلاگ.
هر سه تا هم با Next.js نوشته شدن. اگه بخوای دکمه‌های سایت رو عوض کنی، باید بری تو هر سه تا پروژه دستی کد رو کپی‌پیست کنی؟ قطعا نه! کابوس میشه.

اینجا مونو‌ریپو (با ابزارهایی مثل Turborepo یا Nx) میاد وسط. تو این مدل، تمام اپلیکیشن‌های تو داخل یک ریپازیتوری (پوشه اصلی) قرار میگیرن. یه پوشه مشترک میسازی برای کامپوننت‌های UI یا هوک‌های مشترک، و همه اپلیکیشن‌ها از همون یدونه استفاده می‌کنن. سرعت توسعه و بیلد گرفتن تو این روش فوق‌العاده بالاست.

ساختار جذاب یه مونو‌ریپو :

my-company-monorepo/
├── apps/                  # اپلیکیشن‌های اصلی تو
│   ├── web/               # سایت اصلی (Next.js)
│   ├── admin-panel/       # داشبورد مدیریت (Next.js)
│   └── docs/              # سایت داکیومنت‌ها
└── packages/              # پکیج‌های مشترکی که خودت ساختی
    ├── ui-kit/            # دیزاین سیستم مشترک (دکمه‌ها، مودال‌ها)
    ├── typescript-config/ # تنظیمات مشترک TS
    └── eslint-config/     # تنظیمات مشترک لینتر

#Labs_Next5Architecture

مینی سری 5 قسمته معماری‌های کلاس جهانی next.js‌مون به پایان رسید 💣

مینی سری بعدی چی باشه ؟ شما بگین 🧐❤️

امروز هم پایه JS رو مرور کردیم و هم معماری Next.js رو حرفه‌ای‌تر چیدیم.

کدوم بخش امروز براتون چالش‌برانگیزتر بود؟ تو کامنت‌ها بنویسید.
شبتون خوش و کدتون بدون باگ! ✌️🌌

امروز قراره روی یه مهارت نرم شیفت کنیم که خیلی از برنامه‌نویس‌ها ندارنش 🤔
هنرِ پرزنت کردن و فروختنِ مهارت! 🎤🚀

خیلی‌ها کدهای فوق‌العاده‌ای می‌نویسن 💻، اما چون نمی‌تونن خودشون رو درست پرزنت کنن، پروژه‌های خوب رو از دست میدن 💸📉

یه واقعیت تلخ هست که 📉
—— بهترین کدهای دنیا اگه درست پرزنت نشن، هیچ‌وقت تبدیل به قرارداد و پول نمیشن 💸 ——

ما برنامه‌نویس‌ها عادت کردیم همه‌چیز رو تو ترمینال و ادیتور ببینیم 💻. اما کارفرما (مخصوصا کارفرماهای بین‌المللی) کدهای ما رو نمیبینه 👀
اون رزومه، پورتفولیو، نحوه معرفی و خروجیِ کارمون رو میبینه 📄✨.

امروز قراره یه سوییچ بزنیم و از مود کدنویس دربیایم 🔄 و به مود یه بیزینس‌من / ارائه‌دهنده حرفه‌ای در بیایم 🚀🤝

فرض کنین رفتین تو یه گروه تلگرامیِ تخصصی (یا لینکدین) و میخواین خودتون رو برای گرفتن پروژه معرفی کنین ، چطوری شروع میکنین شما ❓❓

براساس تجربه 90 درصد افراد یه همچین متنی رو میفرستن =>

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

⚠️ که دقیقا میشین یکی از هزاران نفری که هیچ فرقی باهم ندارن.

در صورتی که پیش رفتن با این فرمول میتونه یه تفاوت اساسی ایجاد کنه =>
❗️ [تخصص] + [ابزارها] + [ارزشی که خلق می‌کنی] ❗️

سلام، من توسعه‌دهنده مدرن فرانت‌اند هستم و تمرکزم روی خلق تجربه‌های کاربری مینیمال و پرسرعت با Next.js و TypeScript است. تخصص من اینه که لود اولیه سایت رو به زیر ۱ ثانیه برسونم تا هم سئوی سایتتون بهینه بشه و هم نرخ تبدیل مشتریتون بالا بره. برای دیدن نمونه کارهام می‌تونید به سایتم سر بزنید.
لینکش : .....

⁉️ خودتونو جای کارفرما جا بزنین و تصور کنین اگر یه پروژه داشته باشین چند درصد احتمال داشت با اولی پروژه رو بدین و چند درصد دومی ؟؟
با صداقت توی کامنت‌ها بگین

💣 تکنیک Show, Don't Tell ( نشونشون بده بجای صحبت کردن )

یکی از مهم‌ترین تکنیک‌های پرزنت کردن، تکنیک اثباته.
بزرگ‌ترین اشتباه تو رزومه اینه که از کلمات کلیشه‌ای مثل مسلط به توسعه وب یا متخصص سئو استفاده کنیم.

در صورتی که وقتی حرف از دستاوردهای واقعی خودمون بزنیم مثل این مثال =>

❌ به جای اینکه بگی من می‌تونم سایت‌های شرکتی رو با نکست‌جی‌اس بیارم بالا
✅ بگو : توسعه و بهینه‌سازیِ وب‌سایت [نوع پروژه] با Next.js، رسیدن به رتبه ۱ گوگل در کلمات کلیدی هدف، و کاهش زمان لود اولیه سایت به زیر ۱ ثانیه

همین یدونه جمله مثل بمب میترکونه،
توی رزومتون از اعداد و ارقام و نتایجی که دادن استفاده کنید، مردم به اعداد بیشتر از کلمات اعتماد میکنن 🤝

غروبتون بخیر رفقا ☕️💻

یه بحث داغ برای همین الان🔥
همیشه یکی از بزرگترین دغدغه‌های ما تو پروژه‌های سطح بالا، رسوندن زمان لود اولیه سایت (Initial Load) به زیر ۱ ثانیه است. این عدد تو پروژه‌های واقعی برای سئو و نرخ تبدیلِ کارفرما معجزه می‌کنه.
حالا فرض کنید یه پروژه Next.js (یا ریکت) اومده زیر دستتون که لود اولیه‌اش ۳ تا ۴ ثانیه طول می‌کشه. اولین قدمی که برای دیباگ و بهینه‌سازی برمی‌دارید چیه؟

۱. اول می‌رید سراغ بهینه‌سازی Assetها (حجم عکس‌ها، فرمت WebP، فونت‌ها)؟
۲. استراتژی رندرینگ (SSR vs SSG) رو تغییر میدین؟
3. باندل سایز جاوااسکریپت (Bundle Size) و پکیج‌های سنگینِ اضافی رو چک می‌کنید؟
۴. مستقیم میرید سراغ کشینگِ سرور و تنظیمات CDN؟

تو کامنت‌ها برام بنویسید اولویت اولتون کدومه و چرا.
امشب نظراتتون رو میخونم و فردا به عنوان کسی که بارها سایت‌ها رو به زیر یک ثانیه رسونده، تجربیات و راه‌حلِ اصلی خودم رو براتون می‌شکافم! 👇