💡 نکته 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🚀 پرامپتی که پروژهات رو برای مصاحبه فنی آماده میکنه
قبل از مصاحبه، این پرامپت رو به AI بده تا پروژهات رو مثل یک مصاحبهکننده ارشد بررسی کنه.
Prompt 👇
نتیجه
✅ سوالهای واقعی مصاحبه
✅ بررسی نقاط ضعف و قوت
✅ امتیازدهی به پاسخها
✅ آمادگی بیشتر برای مصاحبههای فنی
💾 این پرامپت رو ذخیره کن؛ قبل از هر مصاحبه حسابی به دردت میخوره.
قبل از مصاحبه، این پرامپت رو به AI بده تا پروژهات رو مثل یک مصاحبهکننده ارشد بررسی کنه.
Prompt 👇
Act as a Senior Front-End Interviewer.
Analyze my project and ask me technical interview questions based on my code.
Focus on:
- React
- JavaScript
- TypeScript
- Performance
- State Management
- Architecture
- Security
- Clean Code
Ask one question at a time.
After each answer, evaluate me, explain the correct answer, and rate my response.
At the end, give me a score out of 100 and tell me what I should improve.
نتیجه
✅ سوالهای واقعی مصاحبه
✅ بررسی نقاط ضعف و قوت
✅ امتیازدهی به پاسخها
✅ آمادگی بیشتر برای مصاحبههای فنی
💾 این پرامپت رو ذخیره کن؛ قبل از هر مصاحبه حسابی به دردت میخوره.
💡 چرا
خیلی وقتها میبینم برای ساختن آرایه جدید از
❌ اینجوری:
✅ اینجوری:
چرا؟
کد کوتاهتر و خواناتر میشه.
همیشه یه آرایه جدید برمیگردونه.
توی React و برنامهنویسی Functional بیشتر از
📌 هر وقت هدفت ساختن یه آرایه جدیده، اول به
map() از forEach() بهتره؟خیلی وقتها میبینم برای ساختن آرایه جدید از
forEach() استفاده میشه، در حالی که map() دقیقاً برای همین کار ساخته شده.❌ اینجوری:
const result = [];
users.forEach(user => {
result.push(user.name);
});
✅ اینجوری:
const result = users.map(user => user.name);
چرا؟
کد کوتاهتر و خواناتر میشه.
map() همیشه یه آرایه جدید برمیگردونه.
توی React و برنامهنویسی Functional بیشتر از
map() استفاده میشه.📌 هر وقت هدفت ساختن یه آرایه جدیده، اول به
map() فکر کن.🚀 یه ترفند که کدت رو تمیزتر میکنه
اگه چند تا
❌ اینجوری:
✅ اینجوری:
کد هم کوتاهتر میشه، هم خوندنش راحتتره و هم از تو در تو شدن
📌 خیلی از تیمهای حرفهای استفاده از Early Return رو بهعنوان یک Best Practice در Code Review پیشنهاد میکنن.
پکیج جامع برنامه نویسی فرانت اند
اگه چند تا
if پشت سر هم داری، شاید وقتشه از Early Return استفاده کنی.❌ اینجوری:
function login(user) {
if (user) {
if (user.isActive) {
return "Welcome";
}
}
return "Access denied";
}✅ اینجوری:
function login(user) {
if (!user) return "Access denied";
if (!user.isActive) return "Access denied";
return "Welcome";
}کد هم کوتاهتر میشه، هم خوندنش راحتتره و هم از تو در تو شدن
ifها جلوگیری میکنه.📌 خیلی از تیمهای حرفهای استفاده از Early Return رو بهعنوان یک Best Practice در Code Review پیشنهاد میکنن.
پکیج جامع برنامه نویسی فرانت اند
کدلاینز
کدلاینز | آموزش فرانت اند پروژه محور از صفر تا استخدام
آموزش فرانت اند از صفر تا استخدام: دورههای پروژه محور ری اکت (React)، جاوا اسکریپت (JavaScript)، HTML و CSS و گیت و گیت هاب — با دسترسی مادامالعمر و پشتیبانی واقعی.
❤1🔥1
🚀 پرامپتی که کد رو به زبان ساده برات توضیح میده
یه پروژه یا فایل پیدا کردی که نمیفهمی چیکار میکنه؟ این پرامپت رو امتحان کن.
Prompt 👇
نتیجه
✅ فهم سریع کدهای دیگران
✅ یادگیری منطق پشت کد
✅ مناسب برای پروژههای Open Source و Legacy
💾 ذخیرهاش کن؛ هر وقت با یه کد پیچیده روبهرو شدی، به دادت میرسه.
یه پروژه یا فایل پیدا کردی که نمیفهمی چیکار میکنه؟ این پرامپت رو امتحان کن.
Prompt 👇
Act as a Senior JavaScript Mentor.
Explain this code step by step in simple language.
For each function:
- What it does
- Why it's written this way
- Possible improvements
- Common mistakes
- Real-world example
Assume I'm a junior developer learning from a senior mentor.
نتیجه
✅ فهم سریع کدهای دیگران
✅ یادگیری منطق پشت کد
✅ مناسب برای پروژههای Open Source و Legacy
💾 ذخیرهاش کن؛ هر وقت با یه کد پیچیده روبهرو شدی، به دادت میرسه.
🔥1
💼 یه ترفند برای مصاحبههای Front-End
اگه جواب یه سؤال رو نمیدونی،
هیچوقت فقط نگو "نمیدونم".
بهجاش اینطوری جواب بده:
این جواب دو تا مزیت داره:
✅ مصاحبهکننده میبینه قدرت تحلیل داری، نه فقط حفظیات.
✅ حتی اگه جواب کامل نباشه، نشون میدی میتونی مسئله رو حل کنی.
📌 توی خیلی از مصاحبههای فنی، نحوه فکر کردنت از حفظ بودن جواب مهمتره.
اگه جواب یه سؤال رو نمیدونی،
هیچوقت فقط نگو "نمیدونم".
بهجاش اینطوری جواب بده:
"دقیق با این مورد کار نکردم، ولی با توجه به تجربهای که دارم، فکر میکنم... اگر اجازه بدید منطقش رو تحلیل کنم."
این جواب دو تا مزیت داره:
✅ مصاحبهکننده میبینه قدرت تحلیل داری، نه فقط حفظیات.
✅ حتی اگه جواب کامل نباشه، نشون میدی میتونی مسئله رو حل کنی.
📌 توی خیلی از مصاحبههای فنی، نحوه فکر کردنت از حفظ بودن جواب مهمتره.
🔥1
🚀 ۵ تا سایت که هر Front-End Developer باید بوکمارک کنه
🌈 uiverse.io
کامپوننتهای آماده HTML/CSS و Tailwind که توسط جامعه توسعهدهندهها ساخته شده.
🎨 magicui.design
کامپوننتها و افکتهای مدرن برای React و Tailwind.
✨ animista.net
ساخت انیمیشنهای CSS فقط با چند کلیک.
🖼 shadcn/ui
یکی از محبوبترین مجموعه کامپوننتهای React و Tailwind برای پروژههای حرفهای.
🎯 bg.ibelick.com
مجموعهای از بکگراندهای مدرن برای سایتها و لندینگپیجها.
📌 این ۵ سایت میتونن ساعتها از زمان طراحی و توسعه UI رو برات ذخیره کنن.
🌈 uiverse.io
کامپوننتهای آماده HTML/CSS و Tailwind که توسط جامعه توسعهدهندهها ساخته شده.
🎨 magicui.design
کامپوننتها و افکتهای مدرن برای React و Tailwind.
✨ animista.net
ساخت انیمیشنهای CSS فقط با چند کلیک.
🖼 shadcn/ui
یکی از محبوبترین مجموعه کامپوننتهای React و Tailwind برای پروژههای حرفهای.
🎯 bg.ibelick.com
مجموعهای از بکگراندهای مدرن برای سایتها و لندینگپیجها.
📌 این ۵ سایت میتونن ساعتها از زمان طراحی و توسعه UI رو برات ذخیره کنن.
❤2❤🔥1
for (var i = 0; i < 3; i++) { setTimeout(() => console.log("Hello"), 0); }❌ میری مصاحبه، ۲ تا سوال میپرسن، بلد نیستی و رد میشی؟ 🤯💻
🔴 مشکل چیه؟
- دورههای زیادی دیدی ولی هنوز نمیتونی پروژه واقعی انجام بدی؟
- مصاحبه فنی میری، سوالای ساده رو هم جواب نمیدی؟
- فقط سینتکس بلدی ولی نمیدونی چطور ازش استفاده کنی؟
🚀 مشکل از تو نیست، از روش یادگیریته!
✅ باید پروژه محور یاد بگیری، نه فقط حفظ کردن کد!
🔥 اگه میخوای با اعتمادبهنفس بری مصاحبه و قبول بشی، وقتشه اصولی یاد بگیری!
🔴 مشکل چیه؟
- دورههای زیادی دیدی ولی هنوز نمیتونی پروژه واقعی انجام بدی؟
- مصاحبه فنی میری، سوالای ساده رو هم جواب نمیدی؟
- فقط سینتکس بلدی ولی نمیدونی چطور ازش استفاده کنی؟
🚀 مشکل از تو نیست، از روش یادگیریته!
✅ باید پروژه محور یاد بگیری، نه فقط حفظ کردن کد!
🔥 اگه میخوای با اعتمادبهنفس بری مصاحبه و قبول بشی، وقتشه اصولی یاد بگیری!
🚀 ۵ افزونه کروم که هر برنامهنویس فرانتاند باید نصب داشته باشه
🛠 Wappalyzer با یه کلیک میفهمی هر سایتی با چه تکنولوژیهایی ساخته شده؛ از React و Next.js گرفته تا CMS و سرویسهای Analytics.
🎨 ColorZilla رنگ هر بخش از هر سایتی رو بردار، گرادینت بساز و کد HEX یا RGB رو کپی کن.
📏 Dimensions فقط با نگه داشتن Alt، فاصله بین المانهای صفحه رو اندازه بگیر؛ خیلی به درد پیادهسازی دقیق از روی دیزاین میخوره.
⚡ React Developer Tools اگه با React کار میکنی، این افزونه واجبه! کامپوننتها، State و Props رو راحت بررسی و دیباگ کن.
🌐 JSONVue فایلهای JSON رو بهجای یه متن شلوغ، بهصورت مرتب، رنگی و قابل جمعکردن نمایش میده.
#Frontend #React #Chrome #ChromeExtensions #JavaScript #WebDevelopment #Developer #Programming #Nextjs
🛠 Wappalyzer با یه کلیک میفهمی هر سایتی با چه تکنولوژیهایی ساخته شده؛ از React و Next.js گرفته تا CMS و سرویسهای Analytics.
🎨 ColorZilla رنگ هر بخش از هر سایتی رو بردار، گرادینت بساز و کد HEX یا RGB رو کپی کن.
📏 Dimensions فقط با نگه داشتن Alt، فاصله بین المانهای صفحه رو اندازه بگیر؛ خیلی به درد پیادهسازی دقیق از روی دیزاین میخوره.
⚡ React Developer Tools اگه با React کار میکنی، این افزونه واجبه! کامپوننتها، State و Props رو راحت بررسی و دیباگ کن.
🌐 JSONVue فایلهای JSON رو بهجای یه متن شلوغ، بهصورت مرتب، رنگی و قابل جمعکردن نمایش میده.
#Frontend #React #Chrome #ChromeExtensions #JavaScript #WebDevelopment #Developer #Programming #Nextjs
👍1
۳ اشتباهی که باعث میشه توی مصاحبه فرانتاند رد بشی.
اشتباه اول: فکر میکنی باید جواب همه سؤالها رو بلد باشی.
در صورتی که مصاحبهکننده بیشتر میخواد ببینه وقتی جواب رو نمیدونی، چطور فکر میکنی و به راهحل میرسی.
دومی: فقط تئوری خوندی، ولی پروژه واقعی نساختی.
وقتی ازت میپرسن «این قابلیت رو خودت پیاده کردی؟» یا «چرا این روش رو انتخاب کردی؟» دیگه جوابی نداری.
سومی: قبل از مصاحبه، پروژههای خودت رو مرور نمیکنی.
خیلی وقتها بیشتر سؤالها از روی رزومه و پروژههای خودته، نه فقط React و JavaScript.
یادت باشه، توی مصاحبه قرار نیست ثابت کنی همه چیز رو بلدی؛ قرارِ نشون بدی میتونی یاد بگیری و مسئله حل کنی
اشتباه اول: فکر میکنی باید جواب همه سؤالها رو بلد باشی.
در صورتی که مصاحبهکننده بیشتر میخواد ببینه وقتی جواب رو نمیدونی، چطور فکر میکنی و به راهحل میرسی.
دومی: فقط تئوری خوندی، ولی پروژه واقعی نساختی.
وقتی ازت میپرسن «این قابلیت رو خودت پیاده کردی؟» یا «چرا این روش رو انتخاب کردی؟» دیگه جوابی نداری.
سومی: قبل از مصاحبه، پروژههای خودت رو مرور نمیکنی.
خیلی وقتها بیشتر سؤالها از روی رزومه و پروژههای خودته، نه فقط React و JavaScript.
یادت باشه، توی مصاحبه قرار نیست ثابت کنی همه چیز رو بلدی؛ قرارِ نشون بدی میتونی یاد بگیری و مسئله حل کنی
❤5🔥2