آموزش برنامه نویسی فرانت اند
6.73K subscribers
356 photos
48 videos
27 files
132 links
👈🏻 ارتباط با من: @codelines_support 🔅

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

آدرس سایت 👈🏻: codelines.ir
Download Telegram
💼 یه پروژه معمولی داری و می‌خوای تبدیلش کنی به چیزی که توی رزومه بدرخشه؟

این 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
Rollback
یعنی چی؟ 🔙

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 #برنامه_نویسی
❤2🔥1
🎯 سوال مصاحبه | DNS چیه؟

فرض کن می‌خوای بری خونه دوستت؛ اسمش رو می‌دونی، ولی آدرس دقیقش رو نه.
اینجاست که 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 بفرست.
❤2🔥1
۶ سایت رایگان برای ساخت UI حرفه‌ای که باید ذخیره‌شون کنی

اگه فرانت‌اند کار می‌کنی، این لیست رو یه جا نگه دار:

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 #برنامه_نویسی
❤1💯1
۳ اشتباهی که باعث می‌شه توی مصاحبه فرانت‌اند رد بشی.
اشتباه اول: فکر می‌کنی باید جواب همه سؤال‌ها رو بلد باشی.
در صورتی که مصاحبه‌کننده بیشتر می‌خواد ببینه وقتی جواب رو نمی‌دونی، چطور فکر می‌کنی و به راه‌حل می‌رسی.
دومی: فقط تئوری خوندی، ولی پروژه واقعی نساختی.
وقتی ازت می‌پرسن «این قابلیت رو خودت پیاده کردی؟» یا «چرا این روش رو انتخاب کردی؟» دیگه جوابی نداری.
سومی: قبل از مصاحبه، پروژه‌های خودت رو مرور نمی‌کنی.
خیلی وقت‌ها بیشتر سؤال‌ها از روی رزومه و پروژه‌های خودته، نه فقط React و JavaScript.
یادت باشه، توی مصاحبه قرار نیست ثابت کنی همه چیز رو بلدی؛ قرارِ نشون بدی می‌تونی یاد بگیری و مسئله حل کنی
❤2
console.log(typeof null);
خروجی تکه کد بالا چیه ؟
Anonymous Quiz
41%
Null
30%
Object
24%
Undefined
6%
Boolean
🤯 یک اشتباه کوچیک در 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 #طراحی_رابط_کاربری
👍2❤1🔥1
🚨 ۵ نکته JavaScript که خیلی‌ها دیر یاد می‌گیرن:

🔹 ?. → جلوگیری از خطای دسترسی به 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
Please open Telegram to view this post
VIEW IN TELEGRAM