Deep Devs | فرانت اند | بک اند | جاوااسکریپت | برنامه نویسی | برنامه نویسی وب

حقیقت تلخ... نظرتون چیه؟ Channel | Group | YouTube

برید به چت جی پی تی بگید is there any seahorse emoji? و از عذاب کشیدنش لذت ببرید

#fun 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

💻 ترفند 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

⭐️ ترفند کوچیک موقع کدنویسی در 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

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

یک یادآوری کوچک: بیشتر از 20 هزار ویو و بیشتر از 2200 انتشار..

🎭 فرق بین Fake Shadow و Real Shadow توی Three.js چیه؟ وقتی توی پروژه‌ت می‌خوای سایه اضافه کنی، همیشه یه سوال پیش میاد: واقعی باشه یا فیک؟ 🔦 Real Shadow (سایه واقعی) چیه؟ سایه‌ایه که توسط نورهای واقعی Three.js مثل DirectionalLight`، `SpotLight یا PointLight و با فعال‌کردن shadow mapping ساخته می‌شه. 📦 چطوری کار می‌کنه؟ نور از یه زاویه خاص به صحنه می‌تابه و از دید نور، یه depth map ساخته می‌شه. اگه چیزی جلوی نور باشه، روی جسم پشتش سایه می‌افته. دقیق و واقع‌گرایانه! ❌ اما مشکلش چیه؟ ✨ خیلی سنگینه! به‌خصوص اگه نورهای زیادی داشته باشی یا رزولوشن سایه بالا باشه. 🌀 توی صحنه‌های ریل‌تایم (مثل بازی، انیمیشن یا اپ‌های تعاملی) ممکنه باعث لگ و افت فریم بشه. 📱 رو موبایل و سیستم‌های ضعیف؟ تقریباً ممنوعه! 🪞 Fake Shadow (سایه جعلی) چیه؟ سایه‌ایه که تقلبی ساخته می‌شه؛ نه نور می‌تابه، نه سایه واقعاً محاسبه می‌شه. 📦 چطوری کار می‌کنه؟ یه PlaneGeometry زیر جسمت می‌ذاری. یه تکسچر مشکی نیمه‌شفاف با blur (مثلاً PNG یا shadowMaterial) می‌چسبونی. موقع حرکت دادن جسم، اون پلین رو هم باهاش جابه‌جا می‌کنی. بعضی‌ها حتی با gradient ساده یا circle geometry محو شده، یه سایه باورپذیر می‌سازن. ✅ مزایا: ⚡️ فوق‌العاده سبک**، بدون محاسبه پیچیده. 👀 از دور خیلی طبیعی دیده می‌شه. ❌ معایب: ⛔️ واقعی نیست. زاویه‌ی نور، چرخش، یا جزئیات سایه توش لحاظ نمی‌شه. 📏 برای پروژه‌های photoreal یا نزدیک دوربین، ممکنه غیرطبیعی به نظر برسه. Channel | Group | YouTube

اگه نیاز به یه برنامه برای مدیریت برنامه‌ی روزانه‌تون دارید، و می‌خواید کارهاتون هر روز به‌صورت تکراری، دقیق و قابل تیک زدن نمایش داده بشن، ✅ TickTick یکی از بهترین گزینه‌هاست. با TickTick می‌تونید: 🔹 برنامه روزانه ثابت بسازید (مثلاً مخصوص شنبه تا پنجشنبه، یا فقط جمعه) 🔹 به هر کار ساعت و یادآور بدید 🔹 کارهای انجام‌شده رو تیک بزنید 🔹 تمرکز با تایمر Pomodoro داشته باشید 🔹 برنامه رو روی ویندوز، موبایل یا حتی داخل مرورگر مدیریت کنید مناسب برای: 🧠 زبان‌آموزها، برنامه‌نویس‌ها، دانشجوها، فریلنسرها یا هر کسی که دوست داره طبق برنامه جلو بره. 📎 لینک نصب: ticktick.com Channel | Group | YouTube

اگه دنبال یه تمپلت آماده و مقیاس‌پذیر برای پروژه‌های Next.js هستی، این ریپازیتوری رو از دست نده! این تمپلت با معماری Domain-Driven Design، سیستم احراز هویت کامل و ابزارهای مدرن طراحی شده تا توسعه پروژه‌هارو سریع‌تر و ساده‌تر کنه. 🔑 ویژگی‌های کلیدی: ✅ سیستم احراز هویت کامل (JWT با کوکی‌های HTTP-only) ✅ معماری تمیز با الگوی DDD و جداسازی کامل مسئولیت‌ها ✅ مدیریت استیت ها و درخواست ها با Redux Toolkit و RTK Query ✅ ادغام با MongoDB و Mongoose 🛠️ تکنولوژی‌ها: - Next.js 15.4.5، React 19.1.0، TypeScript 5.x - Tailwind CSS، Redux Toolkit، RTK Query - MongoDB، Mongoose، JWT، bcryptjs، Zod - React Hook Form 🎯 موارد استفاده: - پلتفرم‌های کاریابی - داشبوردهای SaaS - فروشگاه‌های آنلاین - سیستم‌های مدیریت محتوا - اپلیکیشن‌های CRUD سنگین https://github.com/h3nrzi/next.js-fullstack-architecture-template

⭐️ توضیح مرحله‌ به ‌مرحله 🔹 مرحله 1: کلاینت درخواست به اندپونت محافظت‌شده‌ای را با Access Token منقضی‌شده ارسال میکنه. 🔹 مرحله 2: سرور API با کد 401 Unauthorized پاسخ میده، چون middleware protect توکن را اعتبارسنجی کرده و متوجه انقضا شده است. 🔹 مرحله 3: کلاینت پس از دریافت 401 درخواست جدیدی به مسیر /auth/refresh-token ارسال می‌کند و Refresh Token را از cookie میفرسته. 🔹 مرحله 4-5: سرور API توکن را اعتبارسنجی میکنه و از دیتابیس اطلاعات کاربر مربوط به آن را میگیره. 🔹 مرحله 6-7: اگر توکن معتبر باشد، سرور توکن‌های جدید (Access + Refresh) تولید می‌کند. 🔹 مرحله 8-9: توکن جدید Refresh در دیتابیس ذخیره شده و جایگزین توکن قبلی میشه. 🔹 مرحله 10: سرور توکن‌های جدید را به کلاینت برمیگردونه 🔹 مرحله 11-14: کلاینت درخواست اصلی را با Access Token جدید تکرار می‌کند و این بار دسترسی موفقیت‌آمیز دارد. Channel | Group | YouTube

🛡️ احراز هویت با رفرش توکن 🛡️ در اپلیکیشن‌های مدرن، استفاده از JWT (JSON Web Token) برای احراز هویت بسیار رایجه. اما از آنجایی که Access Token معمولاً عمر کوتاهی داره (مثلاً 15 دقیقه)، باید راهی برای تمدید توکن بدون نیاز به ورود مجدد کاربر وجود داشته باشه. اینجاست که Refresh Token وارد عمل میشه. در این پست، یک جریان کامل از احراز هویت با Access Token و Refresh Token را با کمک یک نمودار توضیح دادم که مراحل اعتبارسنجی، تمدید توکن و بازیابی درخواست اصلی را نشان میده.

⭐️ انواع سبک‌های معماری API ستون فقرات اپلیکیشن‌های مدرن API ها هستند. امکان ارتباط بین سرویس‌ها، سیستم‌ها و پلتفرم‌ها رو فراهم می‌کنن. اما همه‌ی APIها مثل هم نیستن و سبک‌های مختلف معماری API برای نیازهای مختلف طراحی شدن. بیاید با مهم‌ترین سبک‌های معماری API آشنا بشیم 👇 1️⃣ SOA (Service-Oriented Architecture)

🔹سبک قدیمی‌تر نسبت به REST و GraphQL 🔹مبتنی بر پروتکل‌های استاندارد مثل SOAP (مبتنی بر XML) 🔹معمولاً در سازمان‌ها و پروژه‌های Enterprise استفاده می‌شه 🔹مزایا: ساختار قوی، امنیت بالا، پشتیبانی از WSDL 🔹معایب: سنگین، پیچیده، وابستگی زیاد بین سرویس‌ها

2️⃣ RESTful API

🔹رایج‌ترین سبک API در وب 🔹 مبتنی بر متدهای GET، POST، PUT، DELETE 🔹داده‌ها معمولاً به صورت JSON یا XML بازگشت داده می‌شن 🔹مزایا: ساده، مقیاس‌پذیر، بدون وضعیت (stateless)، قابل کش شدن 🔹معایب: مشکلات over-fetch یا under-fetch، محدود برای کوئری‌های پیچیده

3️⃣ GraphQL

🔹 زبان کوئری برای APIها که توسط فیسبوک ساخته شده 🔹 کلاینت فقط همون داده‌ای که نیاز داره رو درخواست می‌کنه 🔹 فقط یک endpoint برای تمام درخواست‌ها 🔹مزایا: انعطاف‌پذیر، دقیق، strongly typed 🔹معایب: کش کردن سخت، ممکنه برای پروژه‌های ساده زیادی پیچیده باشه، نیاز به ابزارهای خاص

4️⃣ gRPC

🔹 فریم‌ورک RPC با کارایی بالا ساخته گوگل 🔹 به‌جای JSON از Protocol Buffers (protobuf) استفاده می‌کنه 🔹 بسیار مناسب برای microservices و سیستم‌های real-time داخلی 🔹مزایا: بسیار سریع، strongly typed، پشتیبانی از استریم 🔹معایب: خوانایی کم برای انسان، دیباگ سخت‌تر، پشتیبانی محدود در مرورگر

5️⃣ WebSocket

🔹 ارتباط دوطرفه و مداوم از طریق یک اتصال 🔹 مناسب برای اپ‌های real-time مثل چت، بازی یا داشبورد زنده 🔹مزایا: اتصال دائمی، تاخیر کم 🔹معایب: مدیریت سخت‌تر، stateful، مقیاس‌پذیری پیچیده‌تر

6️⃣ Webhook

🔹 وقتی یک رویداد رخ می‌ده، سرور به URL شما پیام می‌فرسته 🔹 معمولا در سیستم‌های event-driven استفاده می‌شه (مثلا تایید پرداخت یا Push در GitHub) 🔹مزایا: سبک، asynchronous، مقیاس‌پذیر 🔹معایب: تضمینی برای دریافت وجود نداره، نیاز به endpoint امن و پایدار

🤔از کدام سبک استفاده کنیم؟ اگر دنبال سادگی هستی، برو سراغ REST. اگه انعطاف می‌خوای، GraphQL عالیه. برای عملکرد بالا در سیستم‌های داخلی gRPC مناسبه. برای ارتباط زنده WebSocket و برای اطلاع‌رسانی رویدادها Webhook بهترینه. Channel | Group | YouTube

💡چطور از State Loss فرار کنیم؟ الگوی Memento پاسخ می‌دهد!

📱وقتی اپلیکیشن می‌سازی، حفظ وضعیت برنامه (State) خیلی مهمه. مخصوصا برای اینکه قابلیت‌های مثل undo/redo درست کار کنن و کاربر بتونه به راحتی به حالت قبلی برگرده. 🔰الگوی Memento توی جاوااسکریپت بهت این امکان رو میده که حالت شی‌هات رو بدون اینکه جزییات داخلی‌ش رو منتشر کنی، ذخیره و بازیابی کنی. با این روش می‌تونی تاریخچه تغییرات رو مدیریت کنی و ساختار مطمئن بهتری برای اپلیکیشن داشته باشی. 📌این الگو باعث میشه برنامه‌هات قابل اعتمادتر و حرفه‌ای‌تر بشن و تجربه کاربر رو بالاتر ببرن. اگه می‌خوای از دست دادن داده‌ها و وضعیت برنامه جلوگیری کنی، یادگیری و به‌کارگیری Memento یک قدم روبه جلوئه😉 🔗اینجا رو ببین👈 لینک #JavaScript #Memento Channel | Group | YouTube

🔥🚀 سه‌بعدی‌های انبوه با Three.js! 🎨✨ یاد بگیر چطور هزاران شیء سه‌بعدی رو همزمان رندر کنی بدون اینکه به پرفورمنس سایتت آسیب بزنه! 😮💥 توی این آموزش جذاب (با مثال واقعی از سایت حرفه‌ای basement.studio) می‌بینیم چطور با تکنیک "Instancing" در React Three Fiber، انبوهی از آبجکت‌ها رو با بالاترین سرعت و کم‌ترین مصرف منابع نمایش بدیم! ⚡🌪️ دیگه لازم نیست نگران افت فریم یا سنگینی اجرا باشی, اینجا همه‌چیز بهینه‌سازی شده و مثل برق می‌گذره! ⚡😎 👉 برو ببین چطور basement.studio با این تکنیک، یه دنیای سه‌بعدی خیره‌کننده رو بدون هیچ لَگی خلق کرده: #ThreeJS #ReactThreeFiber 🚀💻 Channel | Group | YouTube

⚠️پیام فوری از پایگاه شکاری TS_5.5به کلیه یگان ها:

🚀،موشک های هایپرسونیک نسل جدید رو با۴۰٪افزایش سرعت،از شهرهای موشکی به صورت پراکنده و متراکم شلیک کنید! 📡تمامی واحدهای پدافند،موشک های سنگین کروز دشمن رو قبل از انفجار Runtime نابود کنید!با به کارگیری همه قدرت تون امنیت سرور کامپوننت‌ها رو تضمین کنید! 🛫جنگنده های نسل۵.۵ با سلاح Inference ،تارگت های React/Next.js15 رو بمباران کنید! 💣موشک اتمی Auto_Combat ، قبل از حمله کدهای خراب اونجا رو با خاک یکسان کن! 📣دستور فوری:

🧨موشکها رو با این دستور سریعا لانچ کنید npm install typescript@latest 🏹پدافند و رادار ضد تهاجمی رو فعال کنید: strictNullChecks:true ☠موشک های Vanila JavaScript منسوخ شده رو معدوم کنید! 👁‍🗨دوش پرتاب های Vite_Artillery، روی ریزپرنده های Build time قفل کنید.

🔱با رمز #یاحسین‌_ع عملیات‌ سنگین هوایی و موشکی رو آغاز کنید و حریم پایگاه رو امن کنید! Channel | Group | YouTube

🎯 فرق بین Popover و Dialog چیه؟

یه سوال 🤔! به نظرت فرق بین عنصر Popover و Dialog چیه؟

راستش خیلیا اشتباه برداشت می‌کنن و موضوع یه‌جورایی گیج‌کننده‌ست. ولی نویسنده‌ی مقاله، Zell، خیلی خوب توضیح داده که بدونی تو پروژه‌هات باید از کدومش استفاده کنی👇🏻 🧠خب Popover چیه؟ یه پنجره‌ی کوچیکه که وقتی روی یه دکمه کلیک می‌کنی یا موس رو روش می‌بری، ظاهر می‌شه. مثل یه راهنمای کوچیک یا منوی انتخابی. 🗣️پس Dialog چیه؟ یه پنجره‌ی بزرگ‌تره که معمولاً وسط صفحه ظاهر می‌شه و کاربر باید باهاش تعامل کنه. مثلاً وقتی می‌خوای چیزی رو تأیید یا لغو کنی، از Dialog استفاده می‌شه.

💡 نکته مهم اینه که Dialog در واقع یه نوع خاص از Popover حساب می‌شه. یعنی هر Dialog یه Popover هست، ولی هر Popover لزوماً یه Dialog نیست!

👀 اطلاعات بیشتر+مثال‌های دقیق تو سایت CSS-Tricks منتظرته! Channel | Group | YouTube