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

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

آدرس سایت 👈🏻: codelines.ir
Download Telegram
📄 پرامپتی که مستندات پروژه رو خودکار می‌نویسه

مستندسازی پروژه رو به 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
🚀 پرامپتی که پروژه‌ات رو برای مصاحبه فنی آماده می‌کنه

قبل از مصاحبه، این پرامپت رو به 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.

نتیجه

سوال‌های واقعی مصاحبه
بررسی نقاط ضعف و قوت
امتیازدهی به پاسخ‌ها
آمادگی بیشتر برای مصاحبه‌های فنی

💾 این پرامپت رو ذخیره کن؛ قبل از هر مصاحبه حسابی به دردت می‌خوره.
💡 چرا 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() فکر کن.
🚀 یه ترفند که کدت رو تمیزتر می‌کنه

اگه چند تا 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 پیشنهاد می‌کنن.


پکیج جامع برنامه نویسی فرانت اند
1🔥1
🚀 پرامپتی که کد رو به زبان ساده برات توضیح می‌ده

یه پروژه یا فایل پیدا کردی که نمی‌فهمی چیکار می‌کنه؟ این پرامپت رو امتحان کن.

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 رو برات ذخیره کنن.
2❤‍🔥1
for (var i = 0; i < 3; i++) { setTimeout(() => console.log("Hello"), 0); }
کد بالا چند بار Hello رو چاپ می‌کنه؟
Anonymous Quiz
8%
1 بار
18%
2 بار
47%
3 بار
27%
هیچ‌کدام
😟 می‌ترسم شروع کنم، استرس می‌گیرم...

طبیعیه! هر شروعی یه مقدار استرس داره، ولی اگه شروع نکنی، همیشه توی همین نقطه می‌مونی!

هرکی امروز حرفه‌ایه، یه روز از صفر شروع کرده!

🚀 بزرگ‌ترین ترس، ترس از شروعه! فقط یه قدم بردار، بعدش می‌بینی چقدر ساده بود! 🔥😎
2🔥1
میری مصاحبه، ۲ تا سوال می‌پرسن، بلد نیستی و رد میشی؟ 🤯💻

🔴 مشکل چیه؟

- دوره‌های زیادی دیدی ولی هنوز نمی‌تونی پروژه واقعی انجام بدی؟

- مصاحبه فنی می‌ری، سوالای ساده رو هم جواب نمی‌دی؟

- فقط سینتکس بلدی ولی نمی‌دونی چطور ازش استفاده کنی؟

🚀 مشکل از تو نیست، از روش یادگیریته!

باید پروژه محور یاد بگیری، نه فقط حفظ کردن کد!

🔥 اگه می‌خوای با اعتماد‌به‌نفس بری مصاحبه و قبول بشی، وقتشه اصولی یاد بگیری!
🚀 ۵ افزونه کروم که هر برنامه‌نویس فرانت‌اند باید نصب داشته باشه

🛠 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.
یادت باشه، توی مصاحبه قرار نیست ثابت کنی همه چیز رو بلدی؛ قرارِ نشون بدی می‌تونی یاد بگیری و مسئله حل کنی
5🔥2
🔥 ترفند closest() در JavaScript

به‌جای این:

button.parentElement.parentElement


از این استفاده کن:

button.closest(".card")


نزدیک‌ترین والد با کلاس .card را پیدا می‌کند.

کدت تمیزتر، خواناتر و در برابر تغییرات HTML مقاوم‌تر می‌شود.

💡 هر وقت خواستی به والد یک المنت دسترسی داشته باشی، اول closest() را امتحان کن.
2🔥1
🎨 ۱۰ ابزار رایگان برای طراحی UI/UX

Figma
— محبوب‌ترین ابزار طراحی رابط کاربری و نمونه‌سازی.
Penpot — متن‌باز و رایگان، مناسب برای کار تیمی.
Coolors — ساخت پالت رنگ حرفه‌ای در چند ثانیه.
Google Fonts — هزاران فونت رایگان برای طراحی و وب.
Iconify — دسترسی به میلیون‌ها آیکون از مجموعه‌های مختلف.
unDraw — تصویرسازی‌های SVG رایگان برای پروژه‌ها.
Storyset — ایلوستریشن‌های قابل شخصی‌سازی.
Remove.bg — حذف پس‌زمینه تصاویر با یک کلیک.
Shots.so — ساخت موکاپ‌های جذاب برای نمایش پروژه‌ها.
Lorem Picsum — تصاویر نمونه رایگان برای طراحی و توسعه.

💡 اگر فقط با این ۱۰ ابزار آشنا باشی، بخش بزرگی از نیازهای طراحی UI/UX و ساخت پروژه‌های فرانت‌اند را پوشش می‌دهی.
4❤‍🔥1
console.log(typeof null);
خروجی تکه کد بالا چیه ؟
Anonymous Quiz
42%
Null
35%
Object
22%
Undefined
2%
Boolean
3
🚨 ۵ اشتباه رایج برنامه‌نویس‌های Front-End

1. نادیده گرفتن Responsive Design سایت روی دسکتاپ عالیه، ولی روی موبایل به‌هم می‌ریزه.

2. استفاده بیش‌ازحد از !important به‌جای حل مشکل CSS، فقط آن را پنهان می‌کند.

3. نوشتن کامپوننت‌های خیلی بزرگ کامپوننت‌های کوچک و قابل استفاده مجدد، نگهداری پروژه را آسان‌تر می‌کنند.

4. نادیده گرفتن Performance لود کردن تصاویر حجیم یا رندرهای غیرضروری، سرعت سایت را کاهش می‌دهد.

5. استفاده از == به‌جای === در بیشتر مواقع، === انتخاب امن‌تر و قابل پیش‌بینی‌تری است.

💡 اگر این ۵ اشتباه را تکرار نکنی، کدهایت تمیزتر، سریع‌تر و حرفه‌ای‌تر خواهند بود.
3🔥1
💰 ۱۰ مهارتی که درآمد یک Front-End Developer را بیشتر می‌کند

🚀 تسلط کامل بر JavaScript
⚛️ یادگیری عمیق React (یا Next.js)
🌐 کار با REST API و GraphQL
📱 طراحی Responsive و Mobile-First
بهینه‌سازی Performance سایت
🛠️ تسلط بر Git & GitHub
🧪 آشنایی با Testing (Jest, Cypress)
🎨 درک اصول UI/UX
🤖 استفاده از ابزارهای هوش مصنوعی برای افزایش سرعت توسعه
💼 ساخت Portfolio قوی با پروژه‌های واقعی

💡 فقط کدنویسی کافی نیست؛ ترکیب مهارت فنی، پروژه‌های واقعی و یادگیری مداوم، بیشترین تأثیر را روی درآمد یک Front-End Developer دارد.
2