خلوت، سوت و کور، چقدر خوب بود این یکی دو روز که اینترنت نبود..

انگار برگشته بودیم به گذشته، زمانی که گوشیا هنوز جای انسان ها رو نگرفته بودن..

اینترنت وصل شد و ما خواب بودیم..

وقتتون بخیر دوستان.

پس از چندسال فکر میکنم که وقتش رسیده که مسیرم رو جدا کنم.

مسیر پر فرازو نشیبی بود بقول کلیشه ها😂
از چلنجا و ویدیوهای یوتوب گرفته
تا پستایی که خیلی راحبشون بحث میکردیم، تا جایی که تونستیم یه دوبله خفن بدیم بیرون که خداروشکر خیلیا تونستن ازش استفاده کنن.

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

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

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

در نهایت امیدوارم که همیشه فکر و ذهنو بدنتون سالم باشه و همیشه پیش کسایی که دوسشون دارین، خوشحال زندگی کنین.
با ارزوی کلی موفقیتو کلی حال خوب
HTML❤️

دوستان عزیز، این کانال رو داشته باشید، بسیار کانال خوبیه و محتوای بسیار بسیار مفیدی داخلش هست، چیزایی که باید بابتش کلی تایم و پول هزینه کنید!

https://news.1rj.ru/str/drarmanmoosavi

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

این هم یک مطلب فوق العاده مهم دیگه در مورد رزومه

✳️‌ آشنایی با Float32Array در جاوااسکریپت

اگر با داده‌های عددی، مخصوصاً عددهای اعشاری و محاسبات دقیق سر و کار داری، Float32Array یکی از اون ابزارهاییه که باید بشناسی.

🔹 Float32Array نوعی Typed Array محسوب میشه که به‌طور خاص برای ذخیره‌سازی اعداد اعشاری ۳۲-بیتی (float) طراحی شده.

به‌جای استفاده از آرایه‌های معمولی که ساختارشون کلی حافظه اضافه مصرف می‌کنه، این یکی خیلی بهینه‌تره، مخصوصاً وقتی با WebGL، پردازش صوت، یا کارهای گرافیکی کار می‌کنی.

📌‌ مثلا:

const arr = new Float32Array([3.14, 2.71, 1.41]);
console.log(arr[0]); // 3.140000104904175

🔍 تفاوتش با آرایه‌های معمولی چیه؟

* حافظه‌ی کمتری مصرف می‌کنه.
* نوع داده‌ها ثابته و فقط عدد اعشاری ۳۲-بیتی ذخیره می‌کنه.
* مناسب برای کارایی بالا و پردازش‌های سنگین‌تر.

🛠 کاربردها:

* گرافیک (مثل WebGL)
* پردازش صوت
* کار با باینری یا دیتاهای عددی دقیق

🔗 اطلاعات بیشتر از MDN:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array





Channel | Group | YouTube

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

🧠خب Popover چیه؟
یه پنجره‌ی کوچیکه که وقتی روی یه دکمه کلیک می‌کنی یا موس رو روش می‌بری، ظاهر می‌شه. مثل یه راهنمای کوچیک یا منوی انتخابی.

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

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

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

#Dialog #Popover

Channel | Group | YouTube

🔥🚀 سه‌بعدی‌های انبوه با 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