🎯 چرا [] == ![] خروجی true میدهد؟
اول
📌 نتیجه نهایی:
💡 یکی از سوالهای WTF در مصاحبههای JavaScript.
console.log([] == ![])
// true
اول
![] تبدیل میشود به false و بعد JavaScript موقع مقایسه نوع دادهها را تبدیل میکند.📌 نتیجه نهایی:
[] == false // true
💡 یکی از سوالهای WTF در مصاحبههای JavaScript.
👏1
🤯 میدونستی؟
تنها مقداری در JavaScript است که حتی با خودش هم برابر نیست!
اگر خواستی بررسی کنی مقدار
📌 این سؤال بارها در مصاحبههای JavaScript پرسیده شده.
NaNتنها مقداری در JavaScript است که حتی با خودش هم برابر نیست!
console.log(NaN === NaN)
// false
اگر خواستی بررسی کنی مقدار
NaN است یا نه:Number.isNaN(value)
📌 این سؤال بارها در مصاحبههای JavaScript پرسیده شده.
❤2
📄 اگه فریلنسری کار میکنی، اینو جدی بگیر!
قبل از اینکه پروژه رو شروع کنی، حتماً یه قرارداد داشته باش.
لازم نیست پیچیده باشه، فقط اینا توش باشه:
✅ دقیقاً قراره چی تحویل بدی
✅ مبلغ پروژه و زمان پرداخت
✅ کی باید پروژه رو تحویل بدی
✅ چند بار اصلاح رایگانه
✅ فایلها بعد از تسویه مال کیه
✅ اگه یکی وسط کار انصراف داد، تکلیف چیه
باور کن یه قرارداد ساده، میتونه جلوی کلی دردسر و بحث بیخودی رو بگیره. 😉
قبل از اینکه پروژه رو شروع کنی، حتماً یه قرارداد داشته باش.
لازم نیست پیچیده باشه، فقط اینا توش باشه:
✅ دقیقاً قراره چی تحویل بدی
✅ مبلغ پروژه و زمان پرداخت
✅ کی باید پروژه رو تحویل بدی
✅ چند بار اصلاح رایگانه
✅ فایلها بعد از تسویه مال کیه
✅ اگه یکی وسط کار انصراف داد، تکلیف چیه
باور کن یه قرارداد ساده، میتونه جلوی کلی دردسر و بحث بیخودی رو بگیره. 😉
❤2
آموزش برنامه نویسی فرانت اند
📄 اگه فریلنسری کار میکنی، اینو جدی بگیر! قبل از اینکه پروژه رو شروع کنی، حتماً یه قرارداد داشته باش. لازم نیست پیچیده باشه، فقط اینا توش باشه: ✅ دقیقاً قراره چی تحویل بدی ✅ مبلغ پروژه و زمان پرداخت ✅ کی باید پروژه رو تحویل بدی ✅ چند بار اصلاح رایگانه…
❌یادتون باشه دامنه و هاست رو همیشه به اسم خودِ مشتری بگیرید.
فردا روز مشکلی پیش اومد پاتون گیر نباشه
فردا روز مشکلی پیش اومد پاتون گیر نباشه
👏1
📄 رزومه برنامهنویسی رو چطوری بنویسیم؟
رزومهت لازم نیست ۵ صفحه باشه؛ فقط باید حرفهای باشه.
این چیزا رو حتماً داخلش بذار: ✅ مهارتهایی که بلدی ✅ پروژههایی که انجام دادی ✅ لینک GitHub و پورتفولیو ✅ اطلاعات تماس
❌ لازم نیست هر دورهای که گذروندی یا هر مهارتی که اسمش رو شنیدی داخل رزومه بنویسی!
یادت باشه، خیلی وقتها یه پروژه خوب بیشتر از ۱۰ تا مدرک به چشم میاد. 🚀
رزومهت لازم نیست ۵ صفحه باشه؛ فقط باید حرفهای باشه.
این چیزا رو حتماً داخلش بذار: ✅ مهارتهایی که بلدی ✅ پروژههایی که انجام دادی ✅ لینک GitHub و پورتفولیو ✅ اطلاعات تماس
❌ لازم نیست هر دورهای که گذروندی یا هر مهارتی که اسمش رو شنیدی داخل رزومه بنویسی!
یادت باشه، خیلی وقتها یه پروژه خوب بیشتر از ۱۰ تا مدرک به چشم میاد. 🚀
❤1👍1
JSX در React
چیست؟
چیست؟
Anonymous Quiz
46%
ترکیب JavaScript و ساختار شبیه HTML
16%
افزایش سرعت آپدیت رابط کاربری
30%
ارسال داده بین کامپوننتها
8%
امنیت فیزیکی
❤1
🤯 میدونستی؟
در JavaScript آرایه هم در واقع یک Object محسوب میشه!
برای اینکه بفهمی یک متغیر واقعاً آرایه است، از این استفاده کن:
📌 نکته مصاحبه:
در JavaScript آرایه هم در واقع یک Object محسوب میشه!
console.log(typeof [])
// "object"
برای اینکه بفهمی یک متغیر واقعاً آرایه است، از این استفاده کن:
Array.isArray([])
📌 نکته مصاحبه:
typeof نمیتواند Array را از Object تشخیص دهد.❤1🙏1💯1
استفاده زیاد از:
معمولاً نشونه طراحی ضعیفه.
اول سعی کن مشکلت رو با:
✅ Flexbox
یا
✅ CSS Grid
حل کنی.
Absolute باید آخرین انتخابت باشه، نه اولین.
position: absolute;
معمولاً نشونه طراحی ضعیفه.
اول سعی کن مشکلت رو با:
✅ Flexbox
یا
✅ CSS Grid
حل کنی.
Absolute باید آخرین انتخابت باشه، نه اولین.
❤4🔥1
🚀 ترفند CSS
اگر دکمهای داری که متنش ممکنه طولانی بشه:
باعث میشه دکمه به اندازه محتوا بزرگ بشه و متن نشکنه.
اگر دکمهای داری که متنش ممکنه طولانی بشه:
button{
min-width:max-content;
}باعث میشه دکمه به اندازه محتوا بزرگ بشه و متن نشکنه.
❤3🙏1
💸 حقیقت بازار کار
حقوق بالا رو کسی نمیگیره که بیشترین Framework روبلده.
حقوق بالا رو کسی میگیره که:
* بتونه باگ پیدا کنه.
* کد تمیز بنویسه.
* Performance
رو بهبود بده.
* مشکل واقعی پروژه رو حل کنه.
Framework
ها عوض میشن، مهارت حل مسئله نه.
حقوق بالا رو کسی نمیگیره که بیشترین Framework روبلده.
حقوق بالا رو کسی میگیره که:
* بتونه باگ پیدا کنه.
* کد تمیز بنویسه.
* Performance
رو بهبود بده.
* مشکل واقعی پروژه رو حل کنه.
Framework
ها عوض میشن، مهارت حل مسئله نه.
📦 کتابخونه React | Framer Motion
میخوای انیمیشنهای حرفهای بسازی؟
Framer Motion تقریباً هر چیزی که بخوای رو
با چند خط کد انجام میده.
✅ Fade
✅ Slide
✅ Drag
✅ Layout Animation
📌 انتخاب اول خیلی از پروژههای مدرن React.
میخوای انیمیشنهای حرفهای بسازی؟
Framer Motion تقریباً هر چیزی که بخوای رو
با چند خط کد انجام میده.
✅ Fade
✅ Slide
✅ Drag
✅ Layout Animation
📌 انتخاب اول خیلی از پروژههای مدرن React.
🤖 پرامپت کاربردی برای برنامهنویسها
اگر یک پروژه جدید React شروع کردی، این پرامپت رو به ChatGPT بده:
📌 بهجای اینکه فقط کد رو اصلاح کنه، مثل یک Code Reviewer رفتار میکنه و ایرادهای واقعی پروژه رو بهت میگه.
اگر یک پروژه جدید React شروع کردی، این پرامپت رو به ChatGPT بده:
You are a Senior React Developer.
Review my code like a senior engineer.
Find bugs, performance issues, bad practices, security problems and suggest a cleaner architecture.
Explain every suggestion with examples.
📌 بهجای اینکه فقط کد رو اصلاح کنه، مثل یک Code Reviewer رفتار میکنه و ایرادهای واقعی پروژه رو بهت میگه.
💡 نکته JavaScript | چرا از
اگر نمیخوای کسی مقدار یک Object رو تغییر بده، از
بعد از
❌ تغییر مقدار
❌ اضافه کردن Property
❌ حذف Property
وجود نداره.
📌 نکته مصاحبه:
Object.freeze() استفاده میکنیم؟اگر نمیخوای کسی مقدار یک Object رو تغییر بده، از
Object.freeze() استفاده کن.const user = {
name: "Ali",
};
Object.freeze(user);
user.name = "Reza";
console.log(user.name);
// Aliبعد از
freeze، امکان:❌ تغییر مقدار
❌ اضافه کردن Property
❌ حذف Property
وجود نداره.
📌 نکته مصاحبه:
Object.freeze() فقط روی سطح اول Object اعمال میشه. اگر داخل Object، آبجکت دیگهای وجود داشته باشه، همچنان قابل تغییره.❤3
به ChatGPT نگو:
❌ «این کد رو درست کن.»
بگو:
✅ «مثل یک Senior Front-End Developer این کد رو Review کن و فقط مشکلات مهم مربوط به Performance، Security و Clean Code رو بگو.»
📌 کیفیت جوابها چند برابر بهتر میشه.
❌ «این کد رو درست کن.»
بگو:
✅ «مثل یک Senior Front-End Developer این کد رو Review کن و فقط مشکلات مهم مربوط به Performance، Security و Clean Code رو بگو.»
📌 کیفیت جوابها چند برابر بهتر میشه.
❤6
چرا استفاده از index به عنوان key در React میتونه مشکلساز بشه؟
چون با حذف یا جابهجایی آیتمها، React ممکنه کامپوننت اشتباه رو دوباره استفاده کنه و state به هم بریزه.
چون با حذف یا جابهجایی آیتمها، React ممکنه کامپوننت اشتباه رو دوباره استفاده کنه و state به هم بریزه.
❤1👏1
💻 بهترین سایتها برای تمرین Front-End
Frontend Mentor
Codewell
DevChallenges
Frontend Practice
ICodeThis
CSSBattle
CodePen Challenges
LeetCode
JavaScript30
GreatFrontEnd
Frontend Mentor
Codewell
DevChallenges
Frontend Practice
ICodeThis
CSSBattle
CodePen Challenges
LeetCode
JavaScript30
GreatFrontEnd
Front-end coding challenges using a real-life workflow | Frontend Mentor
Improve your front-end skills by building real projects. Solve real-world HTML, CSS and JavaScript challenges whilst working to professional designs.
const arr = [1, 2, 3];
arr[10] = 99;
console.log(arr.length);
📄 پرامپتی که مستندات پروژه رو خودکار مینویسه
مستندسازی پروژه رو به AI بسپار؛
از README تا پوشه docs رو در چند ثانیه تولید میکنه.
Prompt 👇
نتیجه
✅ README حرفهای
✅ مستندات کامل پروژه
✅ راهنمای نصب و اجرا
✅ مستندات API و کامپوننتها
✅ آماده برای GitHub
💾 ذخیرهاش کن؛ بعداً حسابی به کارت میاد.
مستندسازی پروژه رو به AI بسپار؛
از README تا پوشه docs رو در چند ثانیه تولید میکنه.
Prompt 👇
Act as a Senior Technical Writer.
Analyze my project and generate:
- Professional README.md
- Project structure
- Installation guide
- API documentation
- Component documentation
- Deployment guide
- Architecture overview
- Troubleshooting
- docs/ folder in Markdown
If information is missing, ask me before generating the documentation.
نتیجه
✅ README حرفهای
✅ مستندات کامل پروژه
✅ راهنمای نصب و اجرا
✅ مستندات API و کامپوننتها
✅ آماده برای GitHub
💾 ذخیرهاش کن؛ بعداً حسابی به کارت میاد.
🚀 تفاوت git fetch و git pull تو یه دقیقه
خیلیا فکر میکنن
فقط آخرین تغییرات رو از ریپازیتوری میگیره، ولی هیچ تغییری توی برنچ فعلیت ایجاد نمیکنه.
اول تغییرات رو میگیره، بعد همون لحظه اونا رو با برنچ فعلیت Merge میکنه.
💡 یه پیشنهاد:
اگه میخوای قبل از اعمال تغییرات یه نگاهی بهشون بندازی، اول
📌 یه عادت خوب برای برنامهنویسا: اول
خیلیا فکر میکنن
git fetch و git pull یکی هستن، ولی یه تفاوت مهم دارن.git fetchفقط آخرین تغییرات رو از ریپازیتوری میگیره، ولی هیچ تغییری توی برنچ فعلیت ایجاد نمیکنه.
git fetch
git pullاول تغییرات رو میگیره، بعد همون لحظه اونا رو با برنچ فعلیت Merge میکنه.
git pull
💡 یه پیشنهاد:
اگه میخوای قبل از اعمال تغییرات یه نگاهی بهشون بندازی، اول
git fetch بزن. این کار احتمال کانفلیکت و دردسرهای بعدی رو کمتر میکنه.📌 یه عادت خوب برای برنامهنویسا: اول
fetch، بعد بررسی، آخر هم merge یا pull.❤2
⚡️ فرق npm install و npm ci چیه؟
اگه روی پروژه تیمی کار میکنی، این تفاوت رو حتماً بدون.
پکیجها رو نصب میکنه و اگه لازم باشه فایل
دقیقاً همون نسخههایی که داخل
💡 کی از
موقع Deploy
توی CI/CD
وقتی میخوای مطمئن باشی همه دقیقاً یک نسخه از پکیجها رو دارن.
📌 خلاصه:
برای توسعه روزمره →
برای نصب سریع و مطمئن →
اگه روی پروژه تیمی کار میکنی، این تفاوت رو حتماً بدون.
npm installپکیجها رو نصب میکنه و اگه لازم باشه فایل
package-lock.json رو هم تغییر میده.npm install
npm ciدقیقاً همون نسخههایی که داخل
package-lock.json ثبت شده رو نصب میکنه و هیچ تغییری هم توی فایلها نمیده.npm ci
💡 کی از
npm ci استفاده کنیم؟موقع Deploy
توی CI/CD
وقتی میخوای مطمئن باشی همه دقیقاً یک نسخه از پکیجها رو دارن.
📌 خلاصه:
برای توسعه روزمره →
npm installبرای نصب سریع و مطمئن →
npm ci