امروز روز برنامه نویسه


روز برنامه نویسو به همتون تبریک میگم🎉

⭐️ ترفند کوچیک موقع کدنویسی در React یا Next.js

من وقتی دارم یه صفحه رو توی React کدشو میزنم، راستش زیاد حوصله‌ی ساختار و Component جدا کردن رو ندارم 😅
میام کل صفحه رو یه جا می‌نویسم که فقط کار کنه و نتیجه رو ببینم.
ولی وقتی کار تموم شد، برای تمیز کردن کد، این پرامپت رو به AI می‌دم 👇

Separate this component into smaller components in the current directory - extract each distinct section/feature into its own file while keeping the main component focused only on layout structure.

اینجا AI خودش میاد بخش‌های مختلف صفحه (مثل Header، Sidebar، Content و...) رو جدا می‌کنه،
و صفحه‌ی اصلی فقط کار چیدمان و ترکیب اون‌ها رو انجام میده. خیلی تمیز درمیاد ✨

🔹 اگه بخوای دقیق‌تر انجام بده، این نسخه‌هاش هم هست:

1️⃣ نسخه ساده و سریع:

Refactor the provided React component by extracting distinct UI sections into separate functional components in the same directory. Keep the original filename as the main layout component.

2️⃣ نسخه حرفه‌ای با TypeScript و props:

Split this React component into smaller TypeScript components. 
Each new component:
- توی فایل جدا باشه
- prop و interface خودش رو داشته باشه
- اگه منطق تکراری هست، ببرش توی یه هوک جدا
- در نهایت فایل اصلی فقط همه رو کنار هم بذاره

3️⃣ نسخه خیلی حرفه‌ای برای پروژه‌های بزرگ:

Refactor the component into atomic pieces: Header, Content, Sidebar, Controls, ItemList, ItemCard, Footer. Extract hooks and shared logic. Return full file contents and a short summary.

📂 مثلاً خروجی نهایی این شکلی میشه:

/MyPage
  ├─ MyPage.tsx        // فقط layout
  ├─ Header.tsx
  ├─ Filters.tsx
  ├─ ItemList.tsx
  ├─ ItemCard.tsx
  ├─ useItems.ts
  └─ MyPage.module.css

آخرش یه ساختار تمیز داری، با فایل‌های جدا، کد قابل‌خوندن‌تر و راحت‌تر برای نگهداری 💪

#React #NextJS #FrontEnd
Channel | Group | YouTube

💻 ترفند DevTools – استایل دادن به console.log 🎨

تا حالا خواستی لاگ‌هات توی کنسول یه ذره شیک‌تر باشن؟
مثلاً رنگی، برجسته، یا فرمت‌دار؟
ببین چطور میشه:



🧩 ۱. استفاده از Specifierها (مثل %i, %s, %o)

console.log("User ID: %i | Name: %s", 42, "Mohammad");

📎 نتیجه:
User ID: 42 | Name: Mohammad

با %i عدد چاپ میشه، %s برای رشته‌ست، %o برای آبجکت‌ها 🔥



🎨 ۲. استایل دادن با CSS در کنسول

console.log("%cHello Devs!", "color: #4CAF50; font-size: 18px; font-weight: bold;");

📎 نتیجه:
متن سبز، بزرگ و بولد توی کنسول 😎

می‌تونی چند تا استایل هم ترکیب کنی با %c های مختلف:

console.log("%cHey%c there!", "color: red;", "color: blue;");

🌈 ۳. استفاده از ANSI Escape Sequences (در Node.js)

console.log("\x1b[32mSuccess!\x1b[0m");
console.log("\x1b[31mError!\x1b[0m");

📎 در Node خروجی رنگی می‌گیری:

* 🟩 سبز برای Success
* 🟥 قرمز برای Error



Channel | Group | YouTube

🧊 DevTools Tip – فریز کردن المنت‌هایی که سریع ناپدید می‌شن 😅
تا حالا خواستی یه منوی hover یا یه tooltip رو بررسی کنی،
ولی همین که موسو بردی سمت DevTools، غیب شده؟

خب، این چند تا روش نجاتت میدن 👇


🧩 ۱. استفاده از حالت :hover و pseudo-classes
برو روی المنت → راست‌کلیک → Force state → :hover
🔹 حالا انگار موس هنوز روشه، و می‌تونی راحت استایلش رو ببینی یا ویرایش کنی.


🎯 ‏۲. Emulate a focused page
وقتی DevTools بازه، بعضی المنت‌ها تمرکز (focus) رو از دست میدن.
برای جلوگیری ازش:
➡️ از بالای DevTools برو به Rendering tab → گزینه Emulate a focused page رو فعال کن.

🚫 ۳. حذف mouse event listenerها
بعضی المنت‌ها وقتی موس روش میره، با جاوااسکریپت مخفی می‌شن.
می‌تونی توی کنسول بزنی:

getEventListeners($0) 

بعد اونایی که لازم نیست (مثلاً mouseout) رو حذف کنی تا دیگه مخفی نشه.

⛔️ ۴. استفاده از Breakpoints
از تب Sources یه breakpoint بزار روی خطی که باعث تغییر حالت المنت میشه.
هر وقت اون کد اجرا بشه، DevTools برنامه رو Pause می‌کنه و المنت همون‌جا فریز می‌مونه 🧠

⏱️ ۵. استفاده از Snippet با setTimeout
یه Snippet بساز که اجرای کد رو برای چند ثانیه متوقف کنه.
مثلاً:

setTimeout(() => { debugger; }, 2000); 

صفحه ۲ ثانیه بعد pause می‌کنه و می‌تونی راحت المنت رو بررسی کنی.




Channel | Group | YouTube

برید به چت جی پی تی بگید


is there any seahorse emoji?


و از عذاب کشیدنش لذت ببرید

حقیقت تلخ...

نظرتون چیه؟

Channel | Group | YouTube

🚀 نسل جدید ساخت اپلیکیشن‌ها: Tauri


اگه تا حالا با Electron کار کردی، احتمالاً می‌دونی ساخت اپ دسکتاپ با HTML، CSS و JS چقدر راحت و جذابه.

اما یه مشکل همیشگی هست:

📦 اپ‌ها خیلی سنگین می‌شن، رم زیاد مصرف می‌کنن و گاهی کند عمل می‌کنن 😕
اینجاست که Tauri وارد می‌شه ✨
یه فریم‌ورک مدرن، سریع و فوق‌العاده سبک برای ساخت اپلیکیشن‌های دسکتاپ که از قدرت Rust برای قسمت بک‌اند و از تکنولوژی‌های وب برای رابط کاربری استفاده می‌کنه!

🔹 چرا Tauri محبوب شده؟

✅ حجم خروجی اپ‌ها معمولاً زیر ۱۰ مگابایته 😍
✅ سرعت و عملکرد عالی (چون Rust پشتشه 🦀)
✅ مصرف رم و CPU خیلی کمتر از Electron
✅ پشتیبانی از React، Vue، Svelte، Solid، و حتی Vanilla JS
✅ امنیت بالا و امکان دسترسی محدود و کنترل‌شده به سیستم
✅ خروجی برای ویندوز، مک و لینوکس


📊 در عمل یعنی چی؟
یعنی با همون مهارت‌های وب‌ت می‌تونی یه اپ واقعی دسکتاپ بسازی که سبک، امن و زیباست.
دیگه لازم نیست برای ساخت اپ سنگین و پرحجم، سراغ Electron بری

Channel | Group | YouTube

برید به chatgpt بگید :

با توجه به شناختی که از من داری، در چند خط آینده‌ی چند سال بعد من رو توصیف کن — از نظر مالی، شغلی و شخصی.

واقع گرایانه این قضیه را توصیف کن و هیچ گونه اغراقی نکن

و جوابی که داد رو کامنت کنید

تا حالا شده تو یه سایت المان‌هایی ببینی که می‌تونی با موس یا انگشت بکشی و جابه‌جا کنی؟
این قابلیت رو می‌شه با یه کتابخونه جاوااسکریپت به اسم Interact.js ایجاد کرد. حتی یه جور حس واقعی حرکت هم به المان‌ها می‌ده؛ مثلا وقتی رهاشون می‌کنید کمی به حرکتشون ادامه می‌ده یا به المان‌های دیگه می‌چسبه.

اگر دوست داری ببینی چطور می‌شه باهاش کارهای مختلف ساخت و نحوه استفاده‌ش چیه، سایتش پر از مثال و راهنماست: interactjs.io



Channel | Group | YouTube

این ریپازیتوری گیت‌هاب یکی از کامل‌ترین مجموعه‌های منابع مربوط به Micro Frontends را یک‌جا جمع کرده؛ از وب‌سایت‌ها و بلاگ‌ها گرفته تا ویدیوها، کتاب‌ها و دوره‌ها.
اگر قصد داری معماری میکروفرانت اند را اصولی و مرحله‌به‌مرحله یاد بگیری، این لیست می‌تواند یک نقطه شروع محکم و قابل اتکا باشد.

🔗 لینک ریپو:
https://github.com/billyjov/microfrontend-resources



Channel | Group | YouTube

باریستاها دنبال برنامه‌نویس شدن، برنامه‌نویسا دنبال باز کردن کافه. 😂

#fun

Channel | Group | YouTube

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


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