نکته:🌐 Three.js چیه و چه ربطی به React داره؟

اگه تا حالا سایت‌هایی دیدی که مدل سه‌بعدی، انیمیشن‌های جذاب یا افکت‌های خفن دارن، احتمالاً پشت صحنه از Three.js استفاده شده. 🎨

اینThree.js یک کتابخانه جاوااسکریپتیه که کار با WebGL رو خیلی ساده‌تر می‌کنه و بهت اجازه میده صحنه‌های سه‌بعدی داخل مرورگر بسازی. 🌐

اما وقتی پروژه‌ات با React باشه چی؟ 🤔

اینجاست که React Three Fiber (R3F) وارد میشه. 🚀

این React Three Fiber در واقع یک Renderer برای React هست که بهت اجازه میده با سینتکس React، آبجکت‌های Three.js رو مدیریت کنی:

<mesh>
  <boxGeometry />
  <meshStandardMaterial color="orange" />
</mesh>

به جای نوشتن ده‌ها خط کد Three.js، همه‌چیز رو به سبک کامپوننتی React می‌نویسی. 😎

✅ کاربردها:

نمایش محصولات سه‌بعدی 📦

پورتفولیوهای مدرن 💼

بازی‌های تحت وب 🎮

Data Visualization 📊

و Landing Page های حرفه‌ای 🚀

💡 اگر React بلدی، یادگیری React Three Fiber یکی از جذاب‌ترین راه‌ها برای ورود به
دنیای 3D در وب هست.


#hints@frontendWithHamed

📅 روز 12: CSS Grid

🎯 ساخت Layout های حرفه‌ای و دوبعدی

تا اینجا با Flexbox آشنا شدیم.

خب Flexbox برای چیدمان در یک جهت عالیه:

افقی

یا عمودی


اما وقتی بخوای همزمان ردیف و ستون داشته باشی، Grid انتخاب بهتریه.


🧠 خود CSS Grid چیست؟

اینGrid یک سیستم چیدمان دوبعدی است.

یعنی می‌تونی:

✅ ردیف داشته باشی
✅ ستون داشته باشی
✅ عناصر رو دقیق جایگذاری کنی


اولین Grid

<div class="container">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
</div>

.container {
  display: grid;
  grid-template-columns: 200px 200px;
}

خروجی

1 2
3 4

🔹 grid-template-columns

تعداد ستون‌ها را مشخص می‌کند.
دو ستون

grid-template-columns: 200px 200px;
سه ستون

grid-template-columns: 200px 200px 200px;

روش حرفه‌ای‌تر

grid-template-columns: repeat(3, 1fr);

🧠خب حالا fr چیست؟

fr

مخفف:

Fraction

یعنی تقسیم فضای موجود.
مثال:

grid-template-columns: 1fr 1fr 1fr;

فضا به سه قسمت مساوی تقسیم می‌شود.

🔹 gap

فاصله بین آیتم‌ها

.container {
gap: 20px;
}
🧪 مثال واقعی

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

خروجی

HTML CSS JS

React Next TS

🔹 Responsive Grid

جادوی Grid اینجاست 😎
.container {
display: grid;
grid-template-columns:
repeat(auto-fit, minmax(200px, 1fr));

gap: 20px;
}
نتیجه:

✅ دسکتاپ → چند ستون

✅ موبایل → خودکار تعداد ستون کمتر می‌شود

🎯 تمرین امروز

یک گالری تکنولوژی بساز:

HTML

CSS

JavaScript

React

Next.js

TypeScript


شرایط:

✅ سه ستون داشته باشد
✅ بین آیتم‌ها فاصله باشد
✅ روی موبایل به هم نریزد

🔥مقایسه ، Flexbox یا Grid؟

Flexbox

وقتی:

Navbar می‌سازی

منو می‌سازی

آیتم‌ها در یک جهت هستند
Grid

وقتی:

داشبورد می‌سازی

گالری می‌سازی

کارت‌های محصول داری

ردیف و ستون همزمان نیاز داری

🚀 نکته حرفه‌ای

در پروژه‌های واقعی معمولاً:

Grid برای ساخت Layout اصلی

Flexbox برای چیدمان داخل هر بخش


استفاده می‌شود.

یعنی این دو رقیب هم نیستند؛ مکمل هم هستند.

📌 پست بعدی:

🔥 Hover + Transition

از پست بعدی صفحاتت از حالت خشک و بی‌روح خارج میشن و به تعاملات مدرن سایت‌های امروزی نزدیک میشن. 😎✨

#css_lessons@frontendWithHamed

سورس کد پروژه
Html css js

#سورس_کد@frontendWithHamed

پروژه وب اپلیکیشن درسی آموزشی 📚🖥️
یک نمونه وب اپلیکیشن آموزشی ساختم
نمونه اپ برای مشاهده دروس کامل زیست‌شناسی، فیزیک، ریاضی و شیمی ✅ پخش ویدیوی درس با کنترل کامل ✅
نوار پیشرفت هر دوره ✅
جستجوی سریع بین درس‌ها ✅
طراحی موبایل‌محور با استایل مدرن

فرانت‌اند

React + TypeScript

darsana-prototype/
├── data/courses.ts
├── components/
│ ├── bottom-nav.tsx
│ ├── course-card.tsx
│ └── feature-card.tsx
├── pages/
│ ├── home-page.tsx
│ ├── search-page.tsx
│ ├── my-courses-page.tsx
│ ├── profile-page.tsx
│ ├── course-page.tsx
│ └── lesson-page.tsx
├── styles/
└── darsana-prototype.tsx


🔗 #نمونه_کد@frontendWithHamed

لینک مشاهده آنلاین 👀
🌐 https://darsana-prototype-ktefcl.composed.app/

📅 روز 13: Hover و Transition
🎯 جان دادن به رابط کاربری
تا اینجا صفحاتی ساختیم که ظاهر خوبی دارن، اما هنوز خشک و بی‌روح هستن 😅
امروز یاد می‌گیریم وقتی کاربر روی یک عنصر میره، بهش واکنش نشون بدیم.
🧠 خب Hover چیست؟
این Hover یعنی زمانی که موس روی یک عنصر قرار می‌گیره.
برای این کار از:
:hover
استفاده می‌کنیم.
اولین Hover

<button>کلیک کن</button>

```css
button:hover {
background-color: black;
color: white;
}

وقتی موس روی دکمه بره:
✅ رنگ پس‌زمینه تغییر می‌کنه
✅ رنگ متن تغییر می‌کنه
🔹 Hover روی کارت

html
<div class="card">
React Course
</div>

css
.card:hover {
background-color: #f5f5f5;
}

🧠 مشکل Hover
اگر الان تست کنی، تغییر ناگهانی اتفاق میفته.
یعنی ظاهر سایت حرفه‌ای به نظر نمیاد.
🔥خب Transition چیست؟
اینTransition باعث میشه تغییرات نرم و روان انجام بشن.
بدون Transition

css
.card:hover {
background-color: #f5f5f5;
}

با Transition

css
.card {
transition: 0.3s;
}

یا بهتر:

css
.card {
transition: all 0.3s ease;
}

معنی کد
transition: all 0.3s ease;
all → همه ویژگی‌ها
0.3s → مدت زمان
ease → نوع حرکت
🔹 بزرگ شدن کارت

css
.card {
transition: all 0.3s ease;
}

.card:hover {
transform: scale(1.05);
}

خب حالا scale چیست؟

transform: scale(1.05);
یعنی:
۵٪ بزرگ‌تر شو.
🔹 جابه‌جایی عنصر

css
.card:hover {
transform: translateY(-10px);
}

نتیجه:
کارت 10 پیکسل به بالا حرکت می‌کنه.
این یکی از رایج‌ترین افکت‌های سایت‌های مدرنه.
🧪 مثال کامل

html
<div class="card">
Frontend Developer
</div>

css
.card {
padding: 20px;
border: 1px solid #ddd;

transition: all 0.3s ease;
}

.card:hover {
transform: translateY(-10px);
}`


🎯 تمرین امروز
یک کارت بساز که:
✅ این کارتBorder داشته باشه
✅ هنگام Hover کمی بزرگ بشه
✅ یا کمی به بالا حرکت کنه
✅ تغییرات نرم انجام بشه
🚀 نکته حرفه‌ای
تقریباً تمام:
دکمه‌ها
کارت‌ها
منوها
لینک‌ها
در سایت‌های حرفه‌ای از Hover و Transition استفاده می‌کنن.
اما زیاده‌روی نکن ❌
افکت‌های زیاد معمولاً تجربه کاربری رو بدتر می‌کنن.
📌 پست بعدی:
🔥 Responsive Design + Media Query
یاد می‌گیری چرا بعضی سایت‌ها روی موبایل عالی هستن و بعضی‌ها فاجعه 😅
و یکی از مهم‌ترین مهارت‌های فرانت‌اند رو یاد می‌گیری. 📱💻🚀


#css_lessons@frontendWithHamed

#نمونه_کد@frontendWithHamed
صفحه لاگین

#نمونه_کد@frontendWithHamed
هاور افکت

#نمونه_کد@frontendWithHamed
تکنیک Procedural Animation

لینک گیت هاب :
https://github.com/HamedFarazi/Procedural-Animation1/tree/main

لینک مشاهده لایو:
https://procedural-animation1.vercel.app/

این تکنیک با Canvas ساخته نشده 🛠️

فقط با:
✅ CSS
✅ JavaScript
✅ CSS Doodle

این انیمیشن از تکنیکی به اسم Procedural Animation استفاده می‌کنه. 🎬

یعنی به جای اینکه 100 متن و 100 انیمیشن دستی بسازی، یک الگوریتم می‌نویسی که خودش موقع اجرا همه‌چیز رو تولید می‌کنه. 🤖

ترفندهای استفاده‌شده:

• CSS Variables
• @property
• Dynamic Keyframes
• 3D Transform
• CSS Doodle

فرانت‌اند مدرن بیشتر از اینکه حفظ کردن کد باشه، یاد گرفتن این جور تکنیک‌هاست. 🚀

1️⃣ CSS Doodle
کل افکت روی کتابخانه css-doodle.com ساخته شده.

<css-doodle></css-doodle>

این کتابخونه اجازه میده با CSS الگوها، انیمیشن‌ها و آثار هنری تولید کنی. 🎨

2️⃣ CSS Custom Properties (متغیرهای CSS)

--color-1: #fff;
--color-2: #fed790;

و بعد:

color: var(--color-1);

متغیرهای CSS فقط برای رنگ نیستن؛ می‌تونن انیمیشن و تم کل سایت رو کنترل کنن. 🎛️

3️⃣ @property
این قسمت خیلی مهمه:

@property --color-2 {
  syntax: '<color>';
  inherits: true;
  initial-value: #fed790;
};

بعد:

--color-2: #00bb9c;

انیمیت میشه. 🎨 با @property می‌تونی متغیرهای CSS رو انیمیت کنی؛ قابلیتی که خیلی‌ها نمی‌شناسن.

4️⃣ CSS 3D Transform

rotate: x y z 2400deg;

و:

translate: 30vmin;
scale: 0;

اکثر انیمیشن‌های حرفه‌ای وب فقط با ترکیب:
translate
rotate
scale
ساخته میشن.

5️⃣ Dynamic Keyframes
این بخش خیلی حرفه‌ایه:

const xKeyframes = layers.map(...);

جاوااسکریپت خودش Keyframe تولید می‌کنه. 🔄
لازم نیست همیشه Keyframe رو دستی بنویسی؛ میشه با JS تولیدشون کرد.

6️⃣ DOM Injection

JavaScript
document.createElement("style");

و
JavaScript
style.textContent = ...;

استایل در لحظه ساخته میشه. 💻

7️⃣ Procedural Animation
کل افکت در واقع از این تکنیک استفاده می‌کنه:

JavaScript
@r(...)
@p(...)

و درنهایت موقع اجرا مقادیر تصادفی تولید میشن. 🎲

دوستان Procedural Animation یعنی به جای ساخت 100 انیمیشن، یک الگوریتم بنویسی که خودش انیمیشن تولید کنه.

📅 روز 14: Responsive Design و Media Query

🎯 یک سایت برای موبایل، تبلت و دسکتاپ.

تا الان یاد گرفتیم چطور با HTML ساختار بسازیم و با CSS بهش ظاهر بدیم.

اما یک مشکل وجود داره:

فرض کن سایتت روی لپ‌تاپ عالیه، ولی وقتی با موبایل بازش می‌کنی، کارت‌ها از صفحه بیرون می‌زنن و نوشته‌ها به‌هم می‌ریزن!

اینجاست که Responsive Design وارد می‌شه. 👇

---

🧠 Responsive Design چیه؟

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

مثلاً:

💻 دسکتاپ: سه کارت کنار هم

📱 موبایل: یک کارت در هر ردیف

نکته مهم اینه که قرار نیست برای موبایل یک سایت جدا بسازیم؛ می‌خوایم همون سایت رو با اندازه صفحه سازگار کنیم.

---

🔹 اول اینکه Media Query چیه؟

با Media Query می‌تونیم بگیم:

«اگر عرض صفحه به اندازه مشخصی رسید، این استایل‌ها رو اعمال کن.»

مثال:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

یعنی اگر عرض صفحه حداکثر ۶۰۰ پیکسل باشه، رنگ پس‌زمینه آبی روشن می‌شه.

یک مثال کاربردی‌تر

فرض کن سه کارت داریم:

<div class="container">
  <div class="card">HTML</div>
  <div class="card">CSS</div>
  <div class="card">JavaScript</div>
</div>

استایل دسکتاپ:

.container {
  display: flex;
  gap: 20px;
}

.card {
  flex: 1;
  background-color: #e5e7eb;
  border-radius: 8px;
}

حالا می‌خوایم روی موبایل، کارت‌ها زیر هم قرار بگیرن:

@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

تمام.

روی صفحه‌های کوچک، کارت‌ها زیر هم قرار می‌گیرن؛ بدون اینکه HTML رو تغییر بدیم.

---

🔹 خب حالا Breakpoint چیه؟

این Breakpoint یعنی نقطه‌ای که در اون، چیدمان سایت تغییر می‌کنه.

مثلاً:

/* موبایل */
@media (max-width: 600px) {
  /* استایل موبایل */
}

@media (min-width: 601px) and (max-width: 900px) {
  /* استایل صفحه‌های متوسط */
}

این اعداد قانون ثابت نیستن؛ باید بر اساس نیاز طراحی و جایی که چیدمان به مشکل می‌خوره انتخاب بشن.

---

🔹 تگ Viewport در HTML

یک نکته مهم که خیلی‌ها فراموش می‌کنن

داخل تگ "<head>" صفحه HTML باید این خط رو داشته باشیم:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

این تنظیم به مرورگر موبایل کمک می‌کنه عرض صفحه رو مطابق عرض واقعی دستگاه در نظر بگیره.

---

🔹 تصاویر Responsive

نمی‌خوایم عکس از عرض صفحه بیرون بزنه.

برای همین معمولاً از این استایل استفاده می‌کنیم:

img {
  max-width: 100%;
  height: auto;
}

یعنی تصویر بیشتر از عرض فضای در دسترسش بزرگ نشه و نسبت ابعادش هم حفظ بشه.

---

🎯 تمرین امروز

یک صفحه شامل سه کارت بساز:

- HTML
- CSS
- JavaScript

شرایط:

✅ در دسکتاپ، کارت‌ها کنار هم باشن.

✅ در موبایل، کارت‌ها زیر هم قرار بگیرن.

✅ هیچ کارت یا تصویری از صفحه بیرون نزنه.

✅ عرض صفحه رو در DevTools مرورگر تغییر بده و نتیجه رو بررسی کن.

---

🚀 جمع‌بندی امروز

امروز یاد گرفتیم:

- اولResponsive Design چیه؟
- دومMedia Query چطور کار می‌کنه؟
- و Breakpoint چیه؟
- تگ Viewport چه کاربردی داره؟
- چطور تصاویر رو Responsive کنیم؟
- چطور با Grid چیدمان سازگار بسازیم؟

هدف این نیست که فقط سایت روی لپ‌تاپ خوب دیده بشه؛ باید روی دستگاه‌های مختلف هم قابل استفاده باشه.

---

#css_lessons@frontendWithHamed

📌 پست بعدی: روز 15 — پروژه عملی CSS

نکته ✨

در CSS مدرن همیشه لازم نیست برای Responsive کردن سایت از Media Query استفاده کنیم.
مثلاً با CSS Grid می‌تونیم کارت‌هایی بسازیم که با فضای موجود سازگار بشن:

.container {
  display: grid;
    auto-fit,
    minmax(200px, 1fr)
  );
  gap: 20px;
}

مرورگر تعداد ستون‌ها رو با توجه به فضای موجود تنظیم می‌کنه. 📱
این یکی از تکنیک‌های کاربردی CSS مدرنه. 💻

#hints_frontend@frontendWithHamed

دوستان به کانال تیممون DevSource هم سر بزنید و از مطالب خودم در تیم و همکارام هم استفاده کنید. 💻
آدرس کانال تیممون در تلگرام
🚀 @devsourcech
✅ در بله
🔹 @devsource
سایت تیم ما:
🥇 https://devsource.ir/
در devsource جاییست برای کد زدن، خواندن و باخبر ماندن.
📚 مقاله‌های فنی، پادکستی که وسط کدنویسی گوش می‌دهید، باکس خبر، کلیپ‌های آموزشی و رویدادهای پیش‌روی دنیای برنامه نویسی.


همچنین پیگیری در رابطه با استدیو و شروع فیلمبرداری دوره آموزش React که قول داده بودم هم هستم و در حال انجامه، در مرحله انتشار خبرتون میکنم 🎥

🚀 معرفی Wispbyte؛ هاست رایگان برای پروژه‌های برنامه‌نویسی!

تا حالا شده یه ربات یا پروژه بک‌اند بسازی، ولی برای همیشه آنلاین نگه‌داشتنش به مشکل بخوری؟

سرویس Wispbyte این امکان رو می‌ده که بعضی از پروژه‌های برنامه‌نویسی‌ات رو به‌صورت رایگان روی سرور اجرا کنی

🌐 🔗 وب‌سایت:
https://wispbyte.com/

💡 با Wispbyte چه کارهایی می‌تونی انجام بدی؟

🔹 اجرای پروژه‌های Node.js
برای اجرای بعضی از اپلیکیشن‌ها و سرویس‌های جاوااسکریپتی.

🔹 میزبانی ربات‌ها
می‌تونی ربات‌های پشتیبانی‌شده، از جمله ربات‌های دیسکورد، رو روی سرور اجرا کنی.

🔹 اجرای پروژه‌های Python
برای بک‌اندها، اسکریپت‌ها و سرویس‌های پایتونی.

🔹 پشتیبانی از تکنولوژی‌های مختلف
از جمله Node.js، Python، Java، Bun و چند زبان دیگه.

🔹 پشتیبانی از دیتابیس
امکان استفاده از گزینه‌هایی مثل PostgreSQL، MongoDB، MariaDB و Redis هم وجود داره.

🆓 پلن رایگان چه امکاناتی داره؟

طبق اطلاعات وب‌سایت، پلن رایگان شامل:
▫️ 512 مگابایت RAM
▫️ یک گیگابایت فضای ذخیره‌سازی
▫️ اجرای سرویس به‌صورت 24/7
▫️ بدون نیاز به پرداخت یا ثبت کارت بانکی

⚠️ برای فعال ماندن سرویس رایگان، باید حداقل هر دو هفته یک‌بار وارد حساب کاربری بشی. منابع پلن رایگان هم محدوده؛ بنابراین برای پروژه‌های سنگین یا پرترافیک انتخاب مناسبی نیست.

🎯 این سرویس به درد چه کسانی می‌خوره؟

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

📌 یه نکته مهم:
هاست رایگان با سرویس‌هایی مثل Vercel دقیقاً یکسان نیست. برای پروژه‌های فرانت‌اند React و Next.js، انتخاب سرویس مناسب به نوع پروژه و روش اجرای اون بستگی داره. همچنین قبل از میزبانی پروژه‌های مهم، محدودیت‌ها و شرایط سرویس رو بررسی کن.

🔥 اگه دنبال یه محیط رایگان برای آزمایش پروژه‌های بک‌اند و ربات‌هات هستی، Wispbyte می‌تونه یکی از گزینه‌هات باشه.

🔗 لینک ورود و ثبت‌نام:
https://wispbyte.com/


#معرفی_وبسایت@frontendWithHamed