3-لینکدین

خیلی دست‌کم گرفته میشه.

دنبال این افراد باش:

Founder
CEO
Product Manager
CTO
مدیر فنی
مدیر آژانس
مدیر دیجیتال مارکتینگ

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

برای پروژه‌های B2B، لینکدین می‌تواند از کانال تلگرام هم بهتر باشد.

4-همکاری با طراح‌های UI/UX؛ یکی از مسیرهای خوب برای گرفتن پروژه Front-end

اگر Front-end کار می‌کنی، فقط دنبال مشتری نگرد؛ با آدم‌هایی همکاری کن که خودشون به مشتری دسترسی دارن.

یکی از بهترین گزینه‌ها، طراح‌های UI/UX و
مخصوصاً طراح‌های Figma هستن.

خیلی از طراح‌ها طراحی سایت و اپلیکیشن رو انجام میدن، اما پیاده‌سازی Front-end رو خودشون انجام نمی‌دن. این دقیقاً جاییه که می‌تونی وارد همکاری بشی.

مثلاً به یک طراح پیام بده و خیلی ساده بگو:

«اگر پروژه‌ای داشتی که طراحی Figma آماده بود و برای پیاده‌سازی Front-end به کمک نیاز داشتی، خوشحال می‌شم باهم همکاری کنیم.»

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

طراح پروژه طراحی رو می‌گیره → تو پیاده‌سازی Front رو انجام میدی → هر دو از پروژه درآمد دارید.

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

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

این مدل همکاری واقعاً وجود داره و در پروژه‌های فریلنسری هم نمونه‌های زیادی از همکاری نزدیک بین طراح و دولوپر دیده می‌شه.

🔥 ۱۰ سایتی که هر برنامه‌نویسی باید بشناسه:

🌐 MDN Web Docs → مرجع کامل
HTML، CSS و JavaScript.
⚡ Can I Use → بررسی پشتیبانی مرورگرها از ویژگی‌های CSS و JS.
🎨 CSS Gradient → ساخت گرادینت‌های حرفه‌ای.
🎨 Coolors → ساخت پالت رنگ برای پروژه‌ها.
🖼️ Undraw → تصاویر SVG رایگان برای سایت.
📷 Pexels → عکس‌های رایگان و باکیفیت.
🔤 Google Fonts → فونت‌های رایگان وب.
💻 CodePen → تست سریع HTML، CSS و JavaScript.
🚀 Vercel → انتشار رایگان پروژه‌های React و Next.js.
🐙 GitHub → نگهداری کدها، نمونه‌کار و همکاری تیمی.

💾 این پست رو ذخیره کن؛ مطمئن باش بارها بهش نیاز پیدا می‌کنی.

📄 اگه فریلنسری کار می‌کنی، اینو جدی بگیر!

قبل از اینکه پروژه رو شروع کنی، حتماً یه قرارداد داشته باش.

لازم نیست پیچیده باشه، فقط اینا توش باشه:
✅ دقیقاً قراره چی تحویل بدی
✅ مبلغ پروژه و زمان پرداخت
✅ کی باید پروژه رو تحویل بدی
✅ چند بار اصلاح رایگانه
✅ فایل‌ها بعد از تسویه مال کیه
✅ اگه یکی وسط کار انصراف داد، تکلیف چیه

باور کن یه قرارداد ساده، می‌تونه جلوی کلی دردسر و بحث بیخودی رو بگیره. 😉

👨‍💻 اگر تازه وارد پروژه واقعی شدی، اینا
رو زیاد می‌شنوی:

حتما ذخیره‌ش کن توی محیط کاری خیلی به دردت میخوره

🔹 Code Review → بررسی کد

🔹 Pull Request → درخواست ادغام تغییرات

🔹 CI/CD → فرآیند خودکار
Build/Test/Deploy

🔹 Staging → محیط قبل از Production

🔹 Production → محیط واقعی کاربران

📌 این اصطلاحات رو فقط حفظ نکن؛ باید بدونی کجا و چرا استفاده میشن.

#برنامه_نویسی #GitHub #DevOps #SoftwareDevelopment #Developer #FrontEnd

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

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

🤯 یک اشتباه کوچیک در 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 تشخیص دهد.