میگن نحوه چیدن مانیتورا شخصیت آدمو مشخص می‌کنه!
خب… شما کدومش هستید؟ 🤔


Channel | Group | YouTube

#git
#trick

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

git clone --depth 1 https://github.com/username/repository.git

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

Channel | Group | YouTube

⭐️ ساختار پروژه (Project Structure) در Next.js

🗂️ 1. پوشه‌های سطح بالا (Top-level folders)

- دایرکتوری app: قلب اپلیکیشن؛ جایی‌که مسیرها، صفحات، layout ها و کامپوننت‌ها قرار دارند.
- دایرکتوری pages: روتینگ قدیمی (Pages Router).
- دایرکتوری public: فایل‌های استاتیک (تصاویر، آیکون‌ها، و …).
- دایرکتوری src: اختیاری؛ برای جداسازی کد اپلیکیشن از فایل‌های پیکربندی.

📄 2. فایل‌های مهم سطح بالا (Top-level files)

- فایل next.config.js: تنظیمات Next.js
- فایل package.json: وابستگی‌ها و اسکریپت‌ها
- فایل env. : متغیرهای محیطی
- فایل eslint.config.mjs: پیکربندی ESLint
- فایل tsconfig.json / jsconfig.json: تنظیمات مسیرها و TypeScript/JS

🧭 3. فایل‌های روتینگ

در Next.js از فایل‌های خاصی برای کنترل UI، رندر و رفتار مسیر استفاده میشه:

- فایل page.js: صفحه قابل دسترسی
- فایل layout.js: لایوت مشترک
- فایل loading.js: اسکلت لودینگ
- فایل error.js: مرتبط به خطاهای اپلیکشن
- فایل not-found.js: برای 404
- فایل route.js: برای API endpoint

🧩 4. مسیرهای تو در تو (Nested Routes)

هر پوشه یک بخش از URL را نشان می‌دهد.
مثال: app/blog/authors/page.tsx: مسیر blog/authors/

🔢 5. مسیرهای داینامیک (Dynamic Routes)

- مسیر [slug]: پارامتر تک
- مسیر [slug...]: همه مسیرها (catch-all)
- مسیر [[slug...]]: catch-all اختیاری

🗃️ 6. گروه‌بندی مسیرها (Route Groups)

برای سازماندهی بدون تغییر URL:

app/(marketing)/page.js → URL = /

🔒 7. پوشه‌های خصوصی (folder_)

پوشه‌هایی که با علامت _ شروع می‌شوند، وارد روتینگ نمی‌شوند و برای نگه‌داری:
- تابع‌ها
- یوآی داخلی
- فایل‌های کمکی

#Nextjs #NextjsAppRouter #ProjectStructure #WebDevelopment #Frontend #ReactJS #JavaScript #WebDev #Coding #Programmer #DevCommunity
#LearnNextJS

Channel | Group | YouTube

#git
#trick

وقتی می‌خوایم پروژه‌ای رو مستقیم از یک برنچ خاص کلون کنیم، لازم نیست کل مخزن رو بگیریم و بعداً سوییچ کنیم.
با این دستور می‌تونیم از همون اول روی برنچ موردنظر کلون کنیم:

git clone --branch branch-name https://github.com/username/repository.git

بعد از کلون شدن هم مخزن دقیقاً روی همون برنچ باز میشه؛ بدون نیاز به checkout اضافه.

Channel | Group | YouTube

حماسه میباره از این قطعه

Channel | Group | YouTube

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

مثلاً این لینک:

https://picsum.photos/1200/600


هر بار که صفحه رو رفرش کنی یه عکس جدید با سایز ۱۲۰۰×۶۰۰ میده.
از این چیزها شاید به‌نظر ساده بیان، ولی تو بعضی پروژه‌ها مخصوصاً وقتی نمی‌خوای درگیر انتخاب تصویر واقعی بشی واقعاً نجات‌دهنده‌ان.

فقط یه نکته: GitHub این لینک‌ها رو کش می‌کنه و همیشه عکس جدید نشون نمی‌ده. ولی هر جایی که کش نکنه، کاملاً درست کار می‌کنه.




Channel | Group | YouTube

🚨 آسیب‌پذیری بحرانی در React Server Components (CVE-2025-55182)

در ۲۹ نوامبر ۲۰۲۵ یک آسیب‌پذیری بسیار جدی در React کشف شد که امکان اجرای کد از راه دور بدون نیاز به احراز هویت را فراهم می‌کند.

حتی اگر از Server Functionها استفاده نکنید، تا زمانی که پروژه شما RSC را پشتیبانی می‌کند، احتمال دارد آسیب‌پذیر باشید.

این ضعف با امتیاز CVSS = 10.0 (حداکثر شدت) ثبت شده است.

🛑 پکیج‌های آسیب‌پذیر
🧩 react-server-dom-webpack
🧩 react-server-dom-parcel
🧩 react-server-dom-turbopack

❗️ نسخه‌های درگیر
📌 19.0
📌 19.1.0
📌 19.1.1
📌 19.2.0

🔧 نسخه‌های اصلاح‌شده
✅ 19.0.1
✅ 19.1.2
✅ 19.2.1

📌 چه پروژه‌هایی آسیب‌پذیرند؟
⚡️ پروژه‌هایی که از React Server Components پشتیبانی می‌کنند و از یکی از پکیج‌های آسیب‌پذیر استفاده می‌کنند.

> پروژه‌هایی که سرور ندارند یا از باندلر/فریم‌ورک مرتبط با RSC استفاده نمی‌کنند، تحت تأثیر نیستند.



🛠 فریم‌ورک‌ها و ابزارهای تحت تأثیر
🚀 Next.js
🔀 React Router
🛰 Waku
📦 @parcel/rsc
⚡️ @vitejs/plugin-rsc
🛡 rwsdk

📚 منبع رسمی برای راهنمای آپدیت
https://react.dev/blog/2025/12/03/critical-security-vulnerability-in-react-server-componentsu




Channel | Group | YouTube

تلنگر

گاهی اوقات وسط پروژه می‌فهمی که console.log دیگه جواب نمی‌ده 🤯
خطاها گم می‌شن، لاگ‌ها قاطی می‌شن و درست وقتی بهشون نیاز داری، هیچ‌چی سر جاش نیست.

اینجاست که Winston وارد بازی می‌شه
یه لایبرری لاگ‌گیری برای Node.js که کمک می‌کنه لاگ‌ها رو هدفمند، دسته‌بندی‌شده و قابل‌ردگیری ثبت کنی .

با Winston می‌تونی: لاگ‌ها رو سطح‌بندی کنی (info، warn، error و …) 🎯
مشخص کنی لاگ‌ها کجا برن: فایل، کنسول، دیتابیس یا هرجای دیگه 🗂️
فرمت لاگ‌ها رو استاندارد و تمیز نگه داری 🧹
توی production بفهمی دقیقاً «چی، کِی و کجا» خراب شده 🔍

اگه پروژه‌ت قراره جدی بشه و فقط برای تمرین نیست،
لاگ‌گیری حرفه‌ای آپشن نیست، ضرورته و Winston یکی از انتخاب‌های مطمئن برای این کاره 💡


Channel | Group | YouTube

#meme


بیاید اعتراف کنید ببینیم کدوماتون اینجوری میشینید 😂😂

Channel | Group | YouTube

شب یلدا مبارک 🌙
امیدوارم شب یلداتون کنار آدمای دوست‌داشتنی، با حال خوب و دل آروم بگذره.

کریسمس دیگه چه صیغه ایه، یلدای خودمونو بچسب

یلداتون مبارک رفقا ✌️❤️

📌سایت Patterns.dev — مرجع رایگان برای وب‌اپ‌های مدرن

سایت Patterns.dev یه سایت آموزشی برای کسانیه که با JavaScript و React کار می‌کنن. این سایت الگوهای طراحی، رندرینگ و بهینه‌سازی عملکرد رو به صورت ساده و عملی توضیح می‌ده تا مشکلات رایج توسعه وب راحت‌تر حل بشه.

با استفاده از Patterns.dev می‌تونی ساختار پروژه‌هات رو مرتب کنی، کد تمیزتری بنویسی و پروژه‌هایی بسازی که نگهداری و توسعه‌شون راحت‌تر باشه.

📎 https://www.patterns.dev/


Channel | Group | YouTube