چرا filter یکی از کاربردیترین متدهای JavaScriptـه؟
فرض کن فقط میخوای کاربران بالای ۱۸ سال رو داشته باشی:
📌 این دقیقاً همون کاریه که توی پروژههای واقعی برای فیلتر محصولات، کاربران، سفارشها و کلی داده دیگه انجام میدی.
#JavaScript #Filter #Frontend #Programming #برنامه_نویسی #کدنویسی
فرض کن فقط میخوای کاربران بالای ۱۸ سال رو داشته باشی:
const users = [
{ name: "Ali", age: 22 },
{ name: "Sara", age: 16 },
{ name: "Reza", age: 25 }
];
const adults = users.filter(user => user.age >= 18);
حالا:console.log(adults);
خروجی:[
{ name: "Ali", age: 22 },
{ name: "Reza", age: 25 }
]
یعنی filter میاد از بین آیتمهای آرایه، فقط مواردی که شرطت رو پاس میکنن نگه میداره.📌 این دقیقاً همون کاریه که توی پروژههای واقعی برای فیلتر محصولات، کاربران، سفارشها و کلی داده دیگه انجام میدی.
#JavaScript #Filter #Frontend #Programming #برنامه_نویسی #کدنویسی
const person = {
name: 'Ali',
getName: () => this.name
};
console.log(person.getName());چه روش هایی برای پول درآوردن از برنامه نویسی به جز موارد گفته شده وجود داره ؟
ما خودمون دقیقا چطوری پروژه میگیریم👇🏻
ما خودمون دقیقا چطوری پروژه میگیریم👇🏻
👍2
1- آژانسهای طراحی سایت و دیجیتال مارکتینگ
این یکی برای فرانتاند خیلی خفنه.
توی گوگل/اینستاگرام/لینکدین دنبال این شرکت ها بگرد:
بعد مستقیم به مدیر یا مسئول فنی پیام بده:
خیلی از آژانسها پروژه دارند ولی نیروی ثابت کافی ندارند.
این یکی برای فرانتاند خیلی خفنه.
توی گوگل/اینستاگرام/لینکدین دنبال این شرکت ها بگرد:
آژانس طراحی سایت
شرکت طراحی سایت
آژانس دیجیتال مارکتینگ
شرکت نرم افزاری
استودیو طراحی سایت
بعد مستقیم به مدیر یا مسئول فنی پیام بده:
«سلام، من توسعهدهنده Front-end هستم و اگر برای پروژههای شما نیروی برونسپاری/فریلنس لازم دارید، خوشحال میشم نمونهکار بفرستم.»
خیلی از آژانسها پروژه دارند ولی نیروی ثابت کافی ندارند.
❤3
2-پیدا کردن سایتهای ضعیف و پیشنهاد بازطراحی
این روش به نظرم برای تو خیلی مهمه.
مثلاً سرچ کن:
سایتهایی که ظاهر قدیمی یا موبایل ضعیف دارند پیدا کن.
بعد به صاحب کسبوکار پیام بده:
یعنی به جای اینکه بگی «سایت میسازم»، یک مشکل واقعی پیدا میکنی.
این روش به نظرم برای تو خیلی مهمه.
مثلاً سرچ کن:
فروشگاه اینترنتی + شهر
شرکت + شهر
کلینیک + شهر
آموزشگاه + شهر
سایتهایی که ظاهر قدیمی یا موبایل ضعیف دارند پیدا کن.
بعد به صاحب کسبوکار پیام بده:
«سلام، سایتتون رو دیدم. روی موبایل چند مشکل UI/Responsive داره. من توسعهدهنده فرانتاند هستم؛ اگر مایل باشید میتونم چند موردی که قابل بهبود هست رو براتون بفرستم.»
یعنی به جای اینکه بگی «سایت میسازم»، یک مشکل واقعی پیدا میکنی.
❤2
3-لینکدین
خیلی دستکم گرفته میشه.
دنبال این افراد باش:
Founder
CEO
Product Manager
CTO
مدیر فنی
مدیر آژانس
مدیر دیجیتال مارکتینگ
و شرکتهایی که محصول وب دارند را پیدا کن.
برای پروژههای B2B، لینکدین میتواند از کانال تلگرام هم بهتر باشد.
خیلی دستکم گرفته میشه.
دنبال این افراد باش:
Founder
CEO
Product Manager
CTO
مدیر فنی
مدیر آژانس
مدیر دیجیتال مارکتینگ
و شرکتهایی که محصول وب دارند را پیدا کن.
برای پروژههای B2B، لینکدین میتواند از کانال تلگرام هم بهتر باشد.
❤3
4-همکاری با طراحهای UI/UX؛ یکی از مسیرهای خوب برای گرفتن پروژه Front-end
اگر Front-end کار میکنی، فقط دنبال مشتری نگرد؛ با آدمهایی همکاری کن که خودشون به مشتری دسترسی دارن.
یکی از بهترین گزینهها، طراحهای UI/UX و
مخصوصاً طراحهای Figma هستن.
خیلی از طراحها طراحی سایت و اپلیکیشن رو انجام میدن، اما پیادهسازی Front-end رو خودشون انجام نمیدن. این دقیقاً جاییه که میتونی وارد همکاری بشی.
مثلاً به یک طراح پیام بده و خیلی ساده بگو:
مزیت این مدل همکاری اینه که لازم نیست برای هر پروژه از صفر دنبال مشتری بگردی.
طراح پروژه طراحی رو میگیره → تو پیادهسازی Front رو انجام میدی → هر دو از پروژه درآمد دارید.
حتی میتونید به مرور به یک تیم دو نفره تبدیل بشید و پروژههای بزرگتری بگیرید.
پس بهجای اینکه فقط دنبال مشتری نهایی باشی، شبکهای از طراحهای خوب بساز. 🤝
این مدل همکاری واقعاً وجود داره و در پروژههای فریلنسری هم نمونههای زیادی از همکاری نزدیک بین طراح و دولوپر دیده میشه.
اگر Front-end کار میکنی، فقط دنبال مشتری نگرد؛ با آدمهایی همکاری کن که خودشون به مشتری دسترسی دارن.
یکی از بهترین گزینهها، طراحهای UI/UX و
مخصوصاً طراحهای Figma هستن.
خیلی از طراحها طراحی سایت و اپلیکیشن رو انجام میدن، اما پیادهسازی Front-end رو خودشون انجام نمیدن. این دقیقاً جاییه که میتونی وارد همکاری بشی.
مثلاً به یک طراح پیام بده و خیلی ساده بگو:
«اگر پروژهای داشتی که طراحی Figma آماده بود و برای پیادهسازی Front-end به کمک نیاز داشتی، خوشحال میشم باهم همکاری کنیم.»
مزیت این مدل همکاری اینه که لازم نیست برای هر پروژه از صفر دنبال مشتری بگردی.
طراح پروژه طراحی رو میگیره → تو پیادهسازی Front رو انجام میدی → هر دو از پروژه درآمد دارید.
حتی میتونید به مرور به یک تیم دو نفره تبدیل بشید و پروژههای بزرگتری بگیرید.
پس بهجای اینکه فقط دنبال مشتری نهایی باشی، شبکهای از طراحهای خوب بساز. 🤝
این مدل همکاری واقعاً وجود داره و در پروژههای فریلنسری هم نمونههای زیادی از همکاری نزدیک بین طراح و دولوپر دیده میشه.
🔥3
🔥 ۱۰ سایتی که هر برنامهنویسی باید بشناسه:
🌐 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 → نگهداری کدها، نمونهکار و همکاری تیمی.
💾 این پست رو ذخیره کن؛ مطمئن باش بارها بهش نیاز پیدا میکنی.
🌐 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 → نگهداری کدها، نمونهکار و همکاری تیمی.
💾 این پست رو ذخیره کن؛ مطمئن باش بارها بهش نیاز پیدا میکنی.
📄 اگه فریلنسری کار میکنی، اینو جدی بگیر!
قبل از اینکه پروژه رو شروع کنی، حتماً یه قرارداد داشته باش.
لازم نیست پیچیده باشه، فقط اینا توش باشه:
✅ دقیقاً قراره چی تحویل بدی
✅ مبلغ پروژه و زمان پرداخت
✅ کی باید پروژه رو تحویل بدی
✅ چند بار اصلاح رایگانه
✅ فایلها بعد از تسویه مال کیه
✅ اگه یکی وسط کار انصراف داد، تکلیف چیه
باور کن یه قرارداد ساده، میتونه جلوی کلی دردسر و بحث بیخودی رو بگیره. 😉
قبل از اینکه پروژه رو شروع کنی، حتماً یه قرارداد داشته باش.
لازم نیست پیچیده باشه، فقط اینا توش باشه:
✅ دقیقاً قراره چی تحویل بدی
✅ مبلغ پروژه و زمان پرداخت
✅ کی باید پروژه رو تحویل بدی
✅ چند بار اصلاح رایگانه
✅ فایلها بعد از تسویه مال کیه
✅ اگه یکی وسط کار انصراف داد، تکلیف چیه
باور کن یه قرارداد ساده، میتونه جلوی کلی دردسر و بحث بیخودی رو بگیره. 😉
❤3
👨💻 اگر تازه وارد پروژه واقعی شدی، اینا
رو زیاد میشنوی:
حتما ذخیرهش کن توی محیط کاری خیلی به دردت میخوره
🔹 Code Review → بررسی کد
🔹 Pull Request → درخواست ادغام تغییرات
🔹 CI/CD → فرآیند خودکار
Build/Test/Deploy
🔹 Staging → محیط قبل از Production
🔹 Production → محیط واقعی کاربران
📌 این اصطلاحات رو فقط حفظ نکن؛ باید بدونی کجا و چرا استفاده میشن.
#برنامه_نویسی #GitHub #DevOps #SoftwareDevelopment #Developer #FrontEnd
رو زیاد میشنوی:
حتما ذخیرهش کن توی محیط کاری خیلی به دردت میخوره
🔹 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 رو عوض کنه.❤1
Merge Conflict
یعنی چی؟
تو و همکارت روی یک فایل کار کردید.
تو یک قسمت رو تغییر دادی.
اون هم همون قسمت رو تغییر داده.
حالا Git میگه:
CONFLICT
خوردی
یعنی Git نمیتونه خودش تصمیم بگیره کدوم تغییر باید باقی بمونه.
باید Conflict رو بررسی کنی، تصمیم بگیری چه کدی درستتره و بعد دوباره Commit کنی.
📌 Merge Conflict
چیز عجیبی نیست؛
بخشی از کار روزمره تیمهای برنامهنویسیه.
#Git #GitHub #MergeConflict #Developer #Programming #برنامه_نویسی
یعنی چی؟
تو و همکارت روی یک فایل کار کردید.
تو یک قسمت رو تغییر دادی.
اون هم همون قسمت رو تغییر داده.
حالا Git میگه:
CONFLICT
خوردی
یعنی Git نمیتونه خودش تصمیم بگیره کدوم تغییر باید باقی بمونه.
باید Conflict رو بررسی کنی، تصمیم بگیری چه کدی درستتره و بعد دوباره Commit کنی.
📌 Merge Conflict
چیز عجیبی نیست؛
بخشی از کار روزمره تیمهای برنامهنویسیه.
#Git #GitHub #MergeConflict #Developer #Programming #برنامه_نویسی
👍1
📱 Mobile First
یعنی چی؟
یعنی طراحی و توسعه رو اول برای صفحه کوچک شروع کنی:
Mobile → Tablet → Desktop
نه اینکه اول یه سایت دسکتاپ بسازی و آخر کار
سعی کنی جمعش کنی داخل موبایل. 😄
✅ CSS سادهتر
✅ تمرکز روی محتوای ضروری
✅ Responsive Design بهتر
📌 اگه Front-End کار میکنی، Mobile First رو جدی بگیر.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
یعنی چی؟
یعنی طراحی و توسعه رو اول برای صفحه کوچک شروع کنی:
Mobile → Tablet → Desktop
نه اینکه اول یه سایت دسکتاپ بسازی و آخر کار
سعی کنی جمعش کنی داخل موبایل. 😄
✅ CSS سادهتر
✅ تمرکز روی محتوای ضروری
✅ Responsive Design بهتر
📌 اگه Front-End کار میکنی، Mobile First رو جدی بگیر.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
❤3
😳 میدونستی سایتت میتونه بدون JavaScript تاریک بشه؟
فقط اینو بذار توی HTML:
کوچیکه، ولی برای یه سایت تمیز خیلی بهدردبخوره. 🔥
فقط اینو بذار توی HTML:
<meta name="color-scheme"
content="dark light">
حالا مرورگر میفهمه سایتت از Dark Mode پشتیبانی میکنه و بعضی المانهای پیشفرضش رو خودش با تم سیستم هماهنگ میکنه. 🌙کوچیکه، ولی برای یه سایت تمیز خیلی بهدردبخوره. 🔥
👏1
«اگر فقط ۳ ماه وقت داشتی برای ورود به بازار کار آماده بشی...»
این کارها رو میکردم:
ماه اول:
JavaScript + Git + API
ماه دوم:
React + یک پروژه واقعی
ماه سوم:
TypeScript + next + پروژه دوم + Portfolio + تمرین مصاحبه
نه اینکه:
۵ Framework
۳ زبان
۱۰ دوره
رو نصفه شروع کنم.
هدف ورود به بازار کاره، نه جمع کردن تکنولوژی.
#بازار_کار #مسیر_یادگیری #Frontend #JavaScript #React #Programming #Codelines
این کارها رو میکردم:
ماه اول:
JavaScript + Git + API
ماه دوم:
React + یک پروژه واقعی
ماه سوم:
TypeScript + next + پروژه دوم + Portfolio + تمرین مصاحبه
نه اینکه:
۵ Framework
۳ زبان
۱۰ دوره
رو نصفه شروع کنم.
هدف ورود به بازار کاره، نه جمع کردن تکنولوژی.
#بازار_کار #مسیر_یادگیری #Frontend #JavaScript #React #Programming #Codelines
❤1🔥1
الان توی فرانتاند کجایی؟
Anonymous Poll
27%
هنوز شروع نکردم
34%
HTML/CSS بلدم
19%
JavaScript گیر کردم
14%
React میخونم
7%
بلدم ولی کار پیدا نمیکنم
⚡ ۸ میانبر VS Code که بهتره حفظشون کنی:
📌 اینا رو یکییکی وارد عادتت کن؛ بعد از چند روز متوجه تفاوت سرعتت میشی.
#VSCode #برنامه_نویسی #فرانت_اند #کدنویسی #Developer #WebDevelopment
Ctrl + P → پیدا کردن فایل Ctrl + Shift + P → Command Palette Ctrl + D → انتخاب مشابه بعدی Alt + ↑ / ↓ → جابهجایی خط Shift + Alt + ↓ → کپی خط Ctrl + / → Comment Ctrl + B → باز/بسته کردن Sidebar Ctrl + Shift + F → جستجو در کل پروژه📌 اینا رو یکییکی وارد عادتت کن؛ بعد از چند روز متوجه تفاوت سرعتت میشی.
#VSCode #برنامه_نویسی #فرانت_اند #کدنویسی #Developer #WebDevelopment
🔥2