آموزش برنامه نویسی فرانت اند
8.13K subscribers
329 photos
47 videos
26 files
113 links
👈🏻 ارتباط با من: @codelines_support 🔅

عرفان رضایی هستم ❤️
و اینجا خیلی ساده بهت یاد میدم
چطوری اصولی #برنامه_نویسی #فرانت_اند یاد بگیری 💻
که هم لذت ببری و هم وارد بازار کار بشی
😍🥇
@satisfaction_codelines 👈 نتایج و رضایت دوره

آدرس سایت 👈🏻: codelines.ir
Download Telegram
🎯 چرا [] == ![] خروجی true می‌دهد؟
console.log([] == ![])
// true


اول ![] تبدیل می‌شود به false و بعد JavaScript موقع مقایسه نوع داده‌ها را تبدیل می‌کند.

📌 نتیجه نهایی:
[] == false // true


💡 یکی از سوال‌های WTF در مصاحبه‌های JavaScript.
👏1
🤯 می‌دونستی؟

NaN
تنها مقداری در JavaScript است که حتی با خودش هم برابر نیست!
console.log(NaN === NaN)
// false

اگر خواستی بررسی کنی مقدار NaN است یا نه:
Number.isNaN(value)

📌 این سؤال بارها در مصاحبه‌های JavaScript پرسیده شده.
2
📄 اگه فریلنسری کار می‌کنی، اینو جدی بگیر!

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

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

باور کن یه قرارداد ساده، می‌تونه جلوی کلی دردسر و بحث بیخودی رو بگیره. 😉
2
📄 رزومه برنامه‌نویسی رو چطوری بنویسیم؟

رزومه‌ت لازم نیست ۵ صفحه باشه؛ فقط باید حرفه‌ای باشه.

این چیزا رو حتماً داخلش بذار: مهارت‌هایی که بلدی پروژه‌هایی که انجام دادی لینک GitHub و پورتفولیو اطلاعات تماس
لازم نیست هر دوره‌ای که گذروندی یا هر مهارتی که اسمش رو شنیدی داخل رزومه بنویسی!

یادت باشه، خیلی وقت‌ها یه پروژه خوب بیشتر از ۱۰ تا مدرک به چشم میاد. 🚀
1👍1
🤯 می‌دونستی؟

در JavaScript آرایه هم در واقع یک Object محسوب می‌شه!
console.log(typeof [])
// "object"

برای اینکه بفهمی یک متغیر واقعاً آرایه است، از این استفاده کن:
Array.isArray([])

📌 نکته مصاحبه: typeof نمی‌تواند Array را از Object تشخیص دهد.
1🙏1💯1
استفاده زیاد از:
position: absolute;

معمولاً نشونه طراحی ضعیفه.
اول سعی کن مشکلت رو با:
Flexbox
یا
CSS Grid
حل کنی.
Absolute باید آخرین انتخابت باشه، نه اولین.
4🔥1
🚀 ترفند CSS

اگر دکمه‌ای داری که متنش ممکنه طولانی بشه:
button{
min-width:max-content;
}

باعث میشه دکمه به اندازه محتوا بزرگ بشه و متن نشکنه.
3🙏1
💸 حقیقت بازار کار

حقوق بالا رو کسی نمی‌گیره که بیشترین Framework روبلده.

حقوق بالا رو کسی می‌گیره که:

* بتونه باگ پیدا کنه.
* کد تمیز بنویسه.
* Performance
رو بهبود بده.
* مشکل واقعی پروژه رو حل کنه.

Framework
ها عوض می‌شن، مهارت حل مسئله نه.
📦 کتابخونه React | Framer Motion

می‌خوای انیمیشن‌های حرفه‌ای بسازی؟

Framer Motion تقریباً هر چیزی که بخوای رو
با چند خط کد انجام می‌ده.

Fade
Slide
Drag
Layout Animation

📌 انتخاب اول خیلی از پروژه‌های مدرن React.
🤖 پرامپت کاربردی برای برنامه‌نویس‌ها

اگر یک پروژه جدید 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.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 رو بگو.»

📌 کیفیت جواب‌ها چند برابر بهتر می‌شه.
6
چرا استفاده از index به عنوان key در React می‌تونه مشکل‌ساز بشه؟

چون با حذف یا جابه‌جایی آیتم‌ها، React ممکنه کامپوننت اشتباه رو دوباره استفاده کنه و state به هم بریزه.
1👏1
const arr = [1, 2, 3]; 

arr[10] = 99;

console.log(arr.length);
خروجی کد بالا چیه؟
Anonymous Quiz
11%
3
26%
11
15%
10
48%
Error
📄 پرامپتی که مستندات پروژه رو خودکار می‌نویسه

مستندسازی پروژه رو به 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 تو یه دقیقه

خیلیا فکر می‌کنن git fetch و git pull یکی هستن، ولی یه تفاوت مهم دارن.

git fetch
فقط آخرین تغییرات رو از ریپازیتوری می‌گیره، ولی هیچ تغییری توی برنچ فعلیت ایجاد نمی‌کنه.
git fetch

git pull
اول تغییرات رو می‌گیره، بعد همون لحظه اونا رو با برنچ فعلیت Merge می‌کنه.
git pull


💡 یه پیشنهاد:

اگه می‌خوای قبل از اعمال تغییرات یه نگاهی بهشون بندازی، اول git fetch بزن. این کار احتمال کانفلیکت و دردسرهای بعدی رو کمتر می‌کنه.

📌 یه عادت خوب برای برنامه‌نویسا: اول fetch، بعد بررسی، آخر هم merge یا pull.
2
⚡️ فرق npm install و npm ci چیه؟

اگه روی پروژه تیمی کار می‌کنی، این تفاوت رو حتماً بدون.

npm install
پکیج‌ها رو نصب می‌کنه و اگه لازم باشه فایل package-lock.json رو هم تغییر می‌ده.
npm install

npm ci
دقیقاً همون نسخه‌هایی که داخل package-lock.json ثبت شده رو نصب می‌کنه و هیچ تغییری هم توی فایل‌ها نمی‌ده.
npm ci


💡 کی از npm ci استفاده کنیم؟
موقع Deploy
توی CI/CD
وقتی می‌خوای مطمئن باشی همه دقیقاً یک نسخه از پکیج‌ها رو دارن.

📌 خلاصه:
برای توسعه روزمره → npm install
برای نصب سریع و مطمئن → npm ci