روزی ۱ الی ۲ ساعت کنار ویدیو دیدن تمرین هم داشته باشید

سعی کنید مباحث رو یاد بگیرید
یعنی حفظ نکنید
بببنید هر موضوع کجا کاربرد داره
سینتکس رو میتونید با سرچ کردن بدست بیارید
اگه خواستید مباحث مهم هم میتونید یادداشت برداری گنید
که مثلا فلان تگ مفهومش اینه و کاربردش هم اینجاست
پس فقط کاربردش و مفهومش رو به خوبی یاد بگیرید

🤯 یک اشتباه کوچیک در React

این کد رو ببین:

<button onClick={handleClick()}>
  Click
</button>


به نظرت درست نوشته شده؟
❌ نه!

اینجا handleClick همون لحظه Render اجرا میشه.

✅ معمولاً باید بنویسی:

<button onClick={handleClick}>
  Click
</button>



📌 یک جفت () می‌تونه کل رفتار Component رو عوض کنه.

Merge Conflict
یعنی چی؟

تو و همکارت روی یک فایل کار کردید.
تو یک قسمت رو تغییر دادی.
اون هم همون قسمت رو تغییر داده.

حالا Git میگه:

CONFLICT
خوردی

یعنی Git نمی‌تونه خودش تصمیم بگیره کدوم تغییر باید باقی بمونه.

باید Conflict رو بررسی کنی، تصمیم بگیری چه کدی درست‌تره و بعد دوباره Commit کنی.

📌 Merge Conflict
چیز عجیبی نیست؛

بخشی از کار روزمره تیم‌های برنامه‌نویسیه.

#Git #GitHub #MergeConflict #Developer #Programming #برنامه_نویسی

📱 Mobile First
یعنی چی؟

یعنی طراحی و توسعه رو اول برای صفحه کوچک شروع کنی:

Mobile → Tablet → Desktop

نه اینکه اول یه سایت دسکتاپ بسازی و آخر کار
سعی کنی جمعش کنی داخل موبایل. 😄
✅ CSS ساده‌تر
✅ تمرکز روی محتوای ضروری
✅ Responsive Design بهتر

📌 اگه Front-End کار می‌کنی، Mobile First رو جدی بگیر.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری

😳 می‌دونستی سایتت می‌تونه بدون JavaScript تاریک بشه؟

فقط اینو بذار توی HTML:

<meta name="color-scheme" 
content="dark light">



حالا مرورگر می‌فهمه سایتت از Dark Mode پشتیبانی می‌کنه و بعضی المان‌های پیش‌فرضش رو خودش با تم سیستم هماهنگ می‌کنه. 🌙

کوچیکه، ولی برای یه سایت تمیز خیلی به‌دردبخوره. 🔥

«اگر فقط ۳ ماه وقت داشتی برای ورود به بازار کار آماده بشی...»

این کارها رو می‌کردم:

ماه اول:
JavaScript + Git + API
ماه دوم:
React + یک پروژه واقعی
ماه سوم:
TypeScript + next + پروژه دوم + Portfolio + تمرین مصاحبه

نه اینکه:
۵ Framework
۳ زبان
۱۰ دوره
رو نصفه شروع کنم.

هدف ورود به بازار کاره، نه جمع کردن تکنولوژی.

#بازار_کار #مسیر_یادگیری #Frontend #JavaScript #React #Programming #Codelines

⚡ ۸ میانبر VS Code که بهتره حفظشون کنی:

Ctrl + P → پیدا کردن فایل
Ctrl + Shift + P → Command Palette
Ctrl + D → انتخاب مشابه بعدی
Alt + ↑ / ↓ → جابه‌جایی خط
Shift + Alt + ↓ → کپی خط
Ctrl + / → Comment
Ctrl + B → باز/بسته کردن Sidebar
Ctrl + Shift + F → جستجو در کل پروژه

📌 اینا رو یکی‌یکی وارد عادتت کن؛ بعد از چند روز متوجه تفاوت سرعتت میشی.
#VSCode #برنامه_نویسی #فرانت_اند #کدنویسی #Developer #WebDevelopment

وقتی می‌خوای چیزی رو از یک Array پیدا کنی، لازم نیست همیشه for بنویسی.
از find() استفاده کن:

const users = [
  { id: 1, name: "Ali" },
  { id: 2, name: "Reza" }
];

const user = users.find(user => user.id === 2);

console.log(user);


خروجی:

{ id: 2, name: "Reza" }



🧠 فرقش با filter() اینه:

find() → اولین آیتمی که شرط رو داشته
باشه برمی‌گردونه.

filter() → تمام آیتم‌هایی که شرط رو داشته باشن برمی‌گردونه.

📌 این دوتا رو قاطی نکنی؛ توی پروژه زیاد باهاشون کار می‌کنی.

🚀 ۱۰ سایت رایگان برای آنلاین کردن پروژه‌های برنامه‌نویسی 🔥

📌 ذخیره کن؛ بعداً بهشون نیاز پیدا می‌کنی

Vercel
Netlify
GitHub Pages
Cloudflare Pages
Firebase Hosting
Render
GitLab Pages
Surge
Replit
Gitpod

📤 برای یه برنامه‌نویس بفرست که هنوز پروژه‌هاشو فقط روی سیستمش نگه داشته.
برای نشون دادن نمونه کارهاتون عالیه🙃

🌐 چند روش ذخیره اطلاعات در مرورگر که هر Front-End Developer باید بدونه:

📦 localStorage → ذخیره اطلاعات تا
زمان پاک شدن

⏱️ sessionStorage → اطلاعات تا پایان بستن تب

🍪 Cookie → داده‌های کوچک + امکان ارسال به سرور

🗄️ IndexedDB → ذخیره حجم زیادی از داده‌های ساختاریافته

⚡ Cache Storage → ذخیره فایل‌ها و Responseها برای افزایش سرعت

💾 Storage API → مدیریت و بررسی فضای ذخیره‌سازی

📌 Save
کن؛ اینا از اون چیزاست که توی پروژه واقعاً به کارت میاد.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری

⚡️ دستورهای مهم Git

• git init
• git clone
• git add
• git commit
• git push
• git pull
• git merge
• git rebase
• git stash
• git cherry-pick

۱۰
Extension
کاربردی Chrome برای Developerها

React Developer Tools
Redux DevTools
JSON Viewer
Lighthouse
Wappalyzer
WhatFont
ColorZilla
CSS Viewer
EditThisCookie
VisBug

📌 لازم نیست مرورگرت رو با ۵۰ تا Extension پر کنی؛ فقط چیزهایی رو نصب کن که واقعاً در Workflowت استفاده می‌شن.

#Chrome #DevTools #Frontend #Developer #Programming

⚛️ قبل از شروع آموزش React اینا رو بلد باش.

نه در حد اینکه اسمشون رو شنیده باشی:

DOM
Event
Promise
async/await
Array Methods
Destructuring
Modules
Scope
Closure
Fetch API

چون React قرار نیست JavaScript رو برات یاد بگیره.

اگر JavaScript رو نفهمیده باشی،
React
فقط مشکل رو پیچیده‌تر می‌کنه.

📌 این پست رو برای کسی بفرست که تازه می‌خواد React شروع کنه.

#JavaScript #React #فرانت_اند #جاوااسکریپت #یادگیری_برنامه_نویسی #برنامه_نویسی

🤯 می‌دونستی؟

در JavaScript آرایه هم در واقع یک Object محسوب می‌شه!

console.log(typeof [])
// "object"

برای اینکه بفهمی یک متغیر واقعاً آرایه است، از این استفاده کن:

Array.isArray([])

📌 نکته مصاحبه: typeof نمی‌تواند Array را از Object تشخیص دهد.

💻 ۷ جا برای تمرین واقعی Front-End:

🔥 Frontend Mentor
🔥 Codewell
🔥 DevChallenges
🔥 Frontend Practice
🔥 CSSBattle
🔥 JavaScript30
🔥 100 Days CSS

فقط Tutorial نبین.

یه طراحی بردار → خودت پیاده‌سازی کن → منتشرش کن.

هم تمرین میشه، هم نمونه‌کار.

۶ سایت رایگان برای ساخت UI حرفه‌ای که باید ذخیره‌شون کنی

اگه فرانت‌اند کار می‌کنی، این لیست رو یه جا نگه دار:

shadcn/ui
Magic UI
Aceternity UI
Flowbite
DaisyUI
HyperUI

همه‌شون برای پیدا کردن کامپوننت‌های آماده و ساخت سریع‌تر رابط کاربری کاربردی‌ان.

این پست رو Save کن؛ یه روز بهش نیاز پیدا می‌کنی.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری #فرانت_اند #برنامه_نویسی

⚡ ۸ میانبر VS Code که بهتره حفظشون کنی:

Ctrl + P → پیدا کردن فایل
Ctrl + Shift + P → Command Palette
Ctrl + D → انتخاب مشابه بعدی
Alt + ↑ / ↓ → جابه‌جایی خط
Shift + Alt + ↓ → کپی خط
Ctrl + / → Comment
Ctrl + B → باز/بسته کردن Sidebar
Ctrl + Shift + F → جستجو در کل پروژه

📌 اینا رو یکی‌یکی وارد عادتت کن؛ بعد از چند روز متوجه تفاوت سرعتت میشی.
#VSCode #برنامه_نویسی #فرانت_اند #کدنویسی #Developer #WebDevelopment

👀 این ۵ تا Attribute HTML رو خیلی‌ها جدی نمی‌گیرن:

loading="lazy" → لود تنبل تصاویر
autocomplete → تجربه بهتر فرم‌ها
aria-label → دسترسی‌پذیری بهتر
defer → جلوگیری از بلاک شدن HTML
rel="noopener" → امنیت بیشتر لینک‌های جدید

همین جزئیات کوچیکه که کد یه Junior رو از یه Developer حرفه‌ای جدا می‌کنه. 🚀

📌 Save
کن؛ بعداً به کارت میاد.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری