💼 یه پروژه معمولی داری و میخوای تبدیلش کنی به چیزی که توی رزومه بدرخشه؟
این Prompt رو امتحان کن:
این Prompt رو امتحان کن:
Act as a Senior Front-End Engineer and a Technical Recruiter.
I will describe my current project.
Analyze it and suggest features that would make the project demonstrate real-world engineering skills.
Prioritize features that demonstrate:
- Complex state management
- Authentication and authorization
- API integration
- Error handling
- Performance optimization
- Responsive design
- Accessibility
- Testing
- Real-world business logic
Avoid generic features that only make the project look bigger.
For each feature, explain what skill it demonstrates and why a recruiter would care.
Project:
[DESCRIBE PROJECT]
🔥 بهجای اینکه پروژهات فقط «قشنگ» باشه، کاری کن مهارتت رو ثابت کنه.🔥1
آموزش برنامه نویسی فرانت اند
به سایت سر زدی ؟ فقط تا فردا فرصت هستشا👨🏻💻 نگی نگفتی 🙄 بزن بریم 🙌🏻 . . . . : :
به خاطر استقبال زیادتون یک روز دیگه هم تمدید شد
فقط تا فردا ساعت 10 صبح
🙌🏻
فقط تا فردا ساعت 10 صبح
🙌🏻
❤2
Rollback
یعنی چی؟ 🔙
Deploy
کردی.
۵ دقیقه بعد:
سایت خراب میشه.
اولین سؤال ممکنه این باشه:
Can we rollback?
Rollback
یعنی برگردوندن سیستم به نسخه قبلی که سالم بوده
.
مثلاً:
تا وقتی مشکل بررسی و Fix بشه، نسخه سالم قبلی دوباره فعال میشه.
🔥 یکی از چیزهایی که در پروژه واقعی
خیلی مهمه:
فقط Deploy کردن رو بلد نباش؛ برگشتن از Deploy خراب رو هم باید بلد باشی.
#Rollback #Deploy #Production #DevOps #Developer #برنامه_نویسی
یعنی چی؟ 🔙
Deploy
کردی.
۵ دقیقه بعد:
سایت خراب میشه.
اولین سؤال ممکنه این باشه:
Can we rollback?
Rollback
یعنی برگردوندن سیستم به نسخه قبلی که سالم بوده
.
مثلاً:
v1.4.2 ❌ v1.4.1 ✅تا وقتی مشکل بررسی و Fix بشه، نسخه سالم قبلی دوباره فعال میشه.
🔥 یکی از چیزهایی که در پروژه واقعی
خیلی مهمه:
فقط Deploy کردن رو بلد نباش؛ برگشتن از Deploy خراب رو هم باید بلد باشی.
#Rollback #Deploy #Production #DevOps #Developer #برنامه_نویسی
❤1👏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 #برنامه_نویسی
❤2🔥1
🎯 سوال مصاحبه | DNS چیه؟
فرض کن میخوای بری خونه دوستت؛ اسمش رو میدونی، ولی آدرس دقیقش رو نه.
اینجاست که DNS وارد عمل میشه. 😄
DNS اسم سایته مثل:
رو به آدرس واقعی سرورش (IP) تبدیل میکنه تا مرورگر بدونه باید به کجا وصل بشه.
📌 خلاصه:
💡 نکته : کامپیوترها اسم سایتها رو نمیفهمن، فقط با IP Address ارتباط برقرار میکنن.
فرض کن میخوای بری خونه دوستت؛ اسمش رو میدونی، ولی آدرس دقیقش رو نه.
اینجاست که DNS وارد عمل میشه. 😄
DNS اسم سایته مثل:
google.com
رو به آدرس واقعی سرورش (IP) تبدیل میکنه تا مرورگر بدونه باید به کجا وصل بشه.
📌 خلاصه:
google.com
⬇️
DNS
⬇️
142.250.xxx.xxx
💡 نکته : کامپیوترها اسم سایتها رو نمیفهمن، فقط با IP Address ارتباط برقرار میکنن.
🔥1
🚨 ۵ اشتباه که سایتت رو کند میکنه:
❌ عکسهای سنگین
❌ JavaScript
❌ Re-renderهای
اضافی
غیرضروری در React
❌ لود کردن فونتهای زیاد
❌ بیتوجهی به Core Web Vitals
💡 سرعت سایت فقط به سرور مربوط
نیست؛
کدی که توی Front-End مینویسی تأثیر
زیادی داره.
📌 Save
کن، یه روز به دردت میخوره.
👨💻 برای یه Front-End Developer بفرست.
❌ عکسهای سنگین
❌ JavaScript
❌ Re-renderهای
اضافی
غیرضروری در React
❌ لود کردن فونتهای زیاد
❌ بیتوجهی به Core Web Vitals
💡 سرعت سایت فقط به سرور مربوط
نیست؛
کدی که توی Front-End مینویسی تأثیر
زیادی داره.
📌 Save
کن، یه روز به دردت میخوره.
👨💻 برای یه Front-End Developer بفرست.
❤2🔥1
۶ سایت رایگان برای ساخت UI حرفهای که باید ذخیرهشون کنی
اگه فرانتاند کار میکنی، این لیست رو یه جا نگه دار:
shadcn/ui
Magic UI
Aceternity UI
Flowbite
DaisyUI
HyperUI
همهشون برای پیدا کردن کامپوننتهای آماده و ساخت سریعتر رابط کاربری کاربردیان.
این پست رو Save کن؛ یه روز بهش نیاز پیدا میکنی.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری #فرانت_اند #برنامه_نویسی
اگه فرانتاند کار میکنی، این لیست رو یه جا نگه دار:
shadcn/ui
Magic UI
Aceternity UI
Flowbite
DaisyUI
HyperUI
همهشون برای پیدا کردن کامپوننتهای آماده و ساخت سریعتر رابط کاربری کاربردیان.
این پست رو Save کن؛ یه روز بهش نیاز پیدا میکنی.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری #فرانت_اند #برنامه_نویسی
❤2👍1
اگه میخوای Frontend Developer بشی:
❌ هر روز دنبال Framework جدید نباش.
✅ JavaScript
رو عمیق یاد بگیر.
چون Frameworkها عوض میشن؛
ولی JavaScript هنوز سر جاشه. 🔥
#Frontend #JavaScript #React #WebDevelopment #برنامه_نویسی
❌ هر روز دنبال Framework جدید نباش.
✅ JavaScript
رو عمیق یاد بگیر.
چون Frameworkها عوض میشن؛
ولی JavaScript هنوز سر جاشه. 🔥
#Frontend #JavaScript #React #WebDevelopment #برنامه_نویسی
❤1💯1
۳ اشتباهی که باعث میشه توی مصاحبه فرانتاند رد بشی.
اشتباه اول: فکر میکنی باید جواب همه سؤالها رو بلد باشی.
در صورتی که مصاحبهکننده بیشتر میخواد ببینه وقتی جواب رو نمیدونی، چطور فکر میکنی و به راهحل میرسی.
دومی: فقط تئوری خوندی، ولی پروژه واقعی نساختی.
وقتی ازت میپرسن «این قابلیت رو خودت پیاده کردی؟» یا «چرا این روش رو انتخاب کردی؟» دیگه جوابی نداری.
سومی: قبل از مصاحبه، پروژههای خودت رو مرور نمیکنی.
خیلی وقتها بیشتر سؤالها از روی رزومه و پروژههای خودته، نه فقط React و JavaScript.
یادت باشه، توی مصاحبه قرار نیست ثابت کنی همه چیز رو بلدی؛ قرارِ نشون بدی میتونی یاد بگیری و مسئله حل کنی
اشتباه اول: فکر میکنی باید جواب همه سؤالها رو بلد باشی.
در صورتی که مصاحبهکننده بیشتر میخواد ببینه وقتی جواب رو نمیدونی، چطور فکر میکنی و به راهحل میرسی.
دومی: فقط تئوری خوندی، ولی پروژه واقعی نساختی.
وقتی ازت میپرسن «این قابلیت رو خودت پیاده کردی؟» یا «چرا این روش رو انتخاب کردی؟» دیگه جوابی نداری.
سومی: قبل از مصاحبه، پروژههای خودت رو مرور نمیکنی.
خیلی وقتها بیشتر سؤالها از روی رزومه و پروژههای خودته، نه فقط React و JavaScript.
یادت باشه، توی مصاحبه قرار نیست ثابت کنی همه چیز رو بلدی؛ قرارِ نشون بدی میتونی یاد بگیری و مسئله حل کنی
❤2
🤯 یک اشتباه کوچیک در React
این کد رو ببین:
❌ نه!
اینجا
✅ معمولاً باید بنویسی:
این کد رو ببین:
<button onClick={handleClick()}>
Click
</button>
به نظرت درست نوشته شده؟❌ نه!
اینجا
handleClick همون لحظه Render اجرا میشه.✅ معمولاً باید بنویسی:
<button onClick={handleClick}>
Click
</button>
📌 یک جفت () میتونه کل رفتار Component رو عوض کنه.❤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 #طراحی_رابط_کاربری
👍2❤1🔥1
🚨 ۵ نکته JavaScript که خیلیها دیر یاد میگیرن:
🔹
🔹
🔹
🔹
🔹
💡 لازم نیست JavaScript رو فقط با حفظ کردن یاد بگیری؛
بفهم هر ابزار کِی به درد میخوره.
📌 Save
کن؛ اینا توی پروژه واقعاً کاربردیان.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
🔹
?. → جلوگیری از خطای دسترسی به null/undefined🔹
?? → مقدار پیشفرض فقط وقتی مقدار null/undefined باشه🔹
Object.freeze() → جلوگیری از تغییر مستقیم آبجکت🔹
structuredClone() → کپی عمیق دادهها🔹
Promise.all() → اجرای چند Promise بهصورت همزمان💡 لازم نیست JavaScript رو فقط با حفظ کردن یاد بگیری؛
بفهم هر ابزار کِی به درد میخوره.
📌 Save
کن؛ اینا توی پروژه واقعاً کاربردیان.
#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری
❤1🔥1
😳 چرا نباید داخل forEach از async/await استفاده کنی؟
۹۰٪ برنامهنویسها حداقل یک بار این اشتباه رو انجام دادن.
❌
منتظر نمیمونه.
چون
✅ راه درست:
۹۰٪ برنامهنویسها حداقل یک بار این اشتباه رو انجام دادن.
users.forEach(async (user) => {
await sendEmail(user);
});
console.log("Done");
فکر میکنی اول کدوم اجرا میشه؟❌
Done منتظر نمیمونه.
چون
forEach منتظر Promiseها نمیمونه.✅ راه درست:
for (const user of users) {
await sendEmail(user);
}❤1🔥1