🔥🚀 سه‌بعدی‌های انبوه با Three.js! 🎨✨

یاد بگیر چطور هزاران شیء سه‌بعدی رو همزمان رندر کنی بدون اینکه به پرفورمنس سایتت آسیب بزنه! 😮💥

توی این آموزش جذاب (با مثال واقعی از سایت حرفه‌ای basement.studio) می‌بینیم چطور با تکنیک "Instancing" در React Three Fiber، انبوهی از آبجکت‌ها رو با بالاترین سرعت و کم‌ترین مصرف منابع نمایش بدیم! ⚡🌪️

دیگه لازم نیست نگران افت فریم یا سنگینی اجرا باشی, اینجا همه‌چیز بهینه‌سازی شده و مثل برق می‌گذره! ⚡😎

👉 برو ببین چطور basement.studio با این تکنیک، یه دنیای سه‌بعدی خیره‌کننده رو بدون هیچ لَگی خلق کرده:

#ThreeJS
#ReactThreeFiber 🚀💻

Channel | Group | YouTube

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

📱وقتی اپلیکیشن می‌سازی، حفظ وضعیت برنامه (State) خیلی مهمه. مخصوصا برای اینکه قابلیت‌های مثل undo/redo درست کار کنن و کاربر بتونه به راحتی به حالت قبلی برگرده.

🔰الگوی Memento توی جاوااسکریپت بهت این امکان رو میده که حالت شی‌هات رو بدون اینکه جزییات داخلی‌ش رو منتشر کنی، ذخیره و بازیابی کنی. با این روش می‌تونی تاریخچه تغییرات رو مدیریت کنی و ساختار مطمئن بهتری برای اپلیکیشن داشته باشی.

📌این الگو باعث میشه برنامه‌هات قابل اعتمادتر و حرفه‌ای‌تر بشن و تجربه کاربر رو بالاتر ببرن. اگه می‌خوای از دست دادن داده‌ها و وضعیت برنامه جلوگیری کنی، یادگیری و به‌کارگیری Memento یک قدم روبه جلوئه😉

🔗اینجا رو ببین👈 لینک

#JavaScript #Memento

Channel | Group | YouTube

⭐️ انواع سبک‌های معماری 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

🛡️ احراز هویت با رفرش توکن 🛡️

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

در این پست، یک جریان کامل از احراز هویت با Access Token و Refresh Token را با کمک یک نمودار توضیح دادم که مراحل اعتبارسنجی، تمدید توکن و بازیابی درخواست اصلی را نشان میده.

⭐️ توضیح مرحله‌ به ‌مرحله

🔹 مرحله 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

📌 سلام علی کرمی‌ هستم، ۲۲ ساله ساکن تهران ، برنامه‌نویس فرانت‌اند ام با حدود ۶ سال تجربه.

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

تجربه‌ام شامل:

✅ ساخت پنل‌های کاربری با React, Next.js, Tailwind (طراحی تمیز، کامپوننت‌محور، ریسپانسیو)

✅ توسعه اپلیکیشن هیبریدی با React Native و WebView (از صفر تا محصول نهایی)

✅ کار با JavaScript خالص، مخصوصاً توی پروژه‌های بارپین

دنبال فرصت‌هایی‌ام برای یادگیری بیشتر و همکاری با تیم‌های حرفه‌ای روی پروژه‌های کاربرمحور و باکیفیت.

#جویای_کار

اگه دنبال یه تمپلت آماده و مقیاس‌پذیر برای پروژه‌های 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

اگه نیاز به یه برنامه برای مدیریت برنامه‌ی روزانه‌تون دارید،
و می‌خواید کارهاتون هر روز به‌صورت تکراری، دقیق و قابل تیک زدن نمایش داده بشن،
✅ TickTick یکی از بهترین گزینه‌هاست.

با TickTick می‌تونید:
🔹 برنامه روزانه ثابت بسازید (مثلاً مخصوص شنبه تا پنجشنبه، یا فقط جمعه)
🔹 به هر کار ساعت و یادآور بدید
🔹 کارهای انجام‌شده رو تیک بزنید
🔹 تمرکز با تایمر Pomodoro داشته باشید
🔹 برنامه رو روی ویندوز، موبایل یا حتی داخل مرورگر مدیریت کنید

مناسب برای:
🧠 زبان‌آموزها، برنامه‌نویس‌ها، دانشجوها، فریلنسرها یا هر کسی که دوست داره طبق برنامه جلو بره.

📎 لینک نصب: ticktick.com


Channel | Group | YouTube

🎭 فرق بین 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

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

سلام وقت بخیر
من زهرا حق‌وردی هستم، توسعه‌دهنده فرانت‌اند با تجربه در طراحی و پیاده‌سازی رابط‌های کاربری مدرن و ریسپانسیو با React و Next.js.
رزومه‌ام رو برای بررسی جهت همکاری ارسال می‌کنم.
در صورت نیاز به اطلاعات بیشتر، خوشحال می‌شم در تماس باشید.

💠GitHub:https://github.com/zahraHaghverdii
✉️Email: haghverdiizahraa@gmail.com
🆔:@zarahv2000

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


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

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