🤖 شبیه‌سازی مصاحبه Front-End با AI

می‌خوای قبل از مصاحبه واقعی، خودت رو محک بزنی؟ 😈

این پرامپت رو به AI بده:

Act as a Senior Front-End interviewer.

Conduct a realistic interview.
Ask only one question at a time.

Questions should cover JavaScript, React, CSS, Browser, and Performance.

Do not reveal the correct answer until I respond.

After each answer:

* Give me a score from 0 to 10.
* Point out my mistakes.
* Ask a harder related question.

At the end, tell me how ready I am for a Junior / Mid / Senior position.

اینطوری AI فقط سؤال نمی‌پرسه؛ نقاط ضعف مصاحبه‌ات رو هم پیدا می‌کنه.

CORS
چیه؟

قانون امنیتی مرورگره که مشخص می‌کنه یک سایت اجازه داره به منابع سایت دیگه درخواست بفرسته یا نه.

🍪 Cookie و Session
چی هستن؟

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

🍪 Cookie →
اطلاعات کوچیکی که مرورگر ذخیره می‌کنه و معمولاً همراه Request
برای سرور می‌فرسته.

Session →
اطلاعات ورود کاربر که معمولاً سمت سرور نگهداری میشه و با یک شناسه به کاربر مرتبط میشه.

خیلی ساده:
Cookie = چیزی که مرورگر نگه می‌داره
Session = اطلاعاتی که معمولاً سرور نگه می‌داره

مثلاً وقتی صفحه رو Refresh می‌کنی و هنوز لاگین هستی، یکی از این مکانیزم‌ها پشت صحنه داره کار می‌کنه. 🔐

سوال مصاحبه بوده همیشه

📱 سایت‌ها از کجا می‌فهمن با چه گوشی و مرورگری وارد شدی؟

وقتی وارد یه سایت میشی، مرورگرت یه سری اطلاعات همراه درخواست برای سرور می‌فرسته.

مثلاً ممکنه سایت بفهمه:

📱 موبایل یا کامپیوتر
🌐 Chrome، Safari یا Firefox 💻
نوع سیستم‌عامل 📐 اندازه تقریبی صفحه

یکی از مهم‌ترین این اطلاعات User-Agent هست.

سایت هم با استفاده از این اطلاعات، نسخه مناسب‌تری از صفحه رو بهت نمایش میده.

نکته جالب: سایت لزوماً مدل دقیق گوشی‌ات رو همیشه نمی‌دونه؛ مقدار اطلاعاتی که می‌تونه بفهمه به مرورگر و تنظیمات حریم خصوصی هم بستگی داره. 👀

این GitHub Repo رو احتمالاً باید Bookmark کنی.

اسمش: Awesome AI Agents

یه لیست جمع‌وجور از پروژه‌ها و ابزارهای AI Agent که می‌تونه کلی وقتت رو برای پیدا کردن ابزار مناسب ذخیره کنه.

داخلش پیدا می‌کنی:
Coding Agent
Automation
Agent Framework
Computer Use

ابزارهای مختلف برای ساخت Agent
اگه با AI و برنامه‌نویسی سروکار داری، به‌جای اینکه هر بار دنبال ابزار جدید بگردی، این لیست رو داشته باش.

GitHub:
https://github.com/caramaschiHG/awesome-ai-agents-2026

این یکی رو Save کن؛ بعداً احتمالاً بهش برمی‌گردی.

🚨 ۵ اشتباه که سایتت رو کند می‌کنه:

❌ عکس‌های سنگین
❌ JavaScript

❌ Re-renderهای
اضافی
غیرضروری در React

❌ لود کردن فونت‌های زیاد
❌ بی‌توجهی به Core Web Vitals

💡 سرعت سایت فقط به سرور مربوط
نیست؛

کدی که توی Front-End می‌نویسی تأثیر
زیادی داره.

📌 Save
کن، یه روز به دردت می‌خوره.

👨‍💻 برای یه Front-End Developer بفرست.

۶ سایت رایگان برای ساخت UI حرفه‌ای که باید ذخیره‌شون کنی

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

shadcn/ui
Magic UI
Aceternity UI
Flowbite
DaisyUI
HyperUI

همه‌شون برای پیدا کردن کامپوننت‌های آماده و ساخت سریع‌تر رابط کاربری کاربردی‌ان.

این پست رو Save کن؛ یه روز بهش نیاز پیدا می‌کنی.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری #فرانت_اند #برنامه_نویسی

از این به بعد رزومه‌خواستید بسازید روی سایت خودمون بسازید

ابزار ساخته رزومه‌ به سایت اضافه شد

https://codelines.ir/resume-builder

اگه کاربر خیلی سریع تایپ کنه، نمی‌خوایم با زدن هر حرف یه درخواست به API بفرستیم.

Debounce
میاد یه کم صبر می‌کنه تا کاربر تایپش رو متوقف کنه، بعد تابع رو اجرا می‌کنه.

📌 بیشتر برای Search Box و جستجوهای لحظه‌ای کاربرد داره.

🚀از جنس تجربه

هر وقت خواستی یک Library جدید نصب کنی، اول این سؤال رو از خودت بپرس:
«
اگر این Library فردا آپدیت نشه، پروژه من چقدر آسیب می‌بینه؟»
📦
Dependency
زیاد همیشه نشونه
حرفه‌ای بودن نیست.

گاهی یک Function ساده، بهتر از اضافه کردن یک Package جدیده.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری

useMemo
چه زمانی استفاده می‌شود؟

اگر یک محاسبه سنگین داری که در هر رندر دوباره اجرا می‌شود، از useMemo استفاده کن.

✅ مناسب برای:
فیلتر کردن لیست‌های بزرگ
مرتب‌سازی داده‌ها
محاسبات سنگین

❌ برای هر متغیری از useMemo استفاده نکن؛ خودش هم هزینه دارد.

🌐 چند روش ذخیره اطلاعات در مرورگر که هر Front-End Developer باید بدونه:

📦 localStorage → ذخیره اطلاعات تا
زمان پاک شدن

⏱️ sessionStorage → اطلاعات تا پایان بستن تب

🍪 Cookie → داده‌های کوچک + امکان ارسال به سرور

🗄️ IndexedDB → ذخیره حجم زیادی از داده‌های ساختاریافته

⚡ Cache Storage → ذخیره فایل‌ها و Responseها برای افزایش سرعت

💾 Storage API → مدیریت و بررسی فضای ذخیره‌سازی

📌 Save
کن؛ اینا از اون چیزاست که توی پروژه واقعاً به کارت میاد.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری

🚨 ۵ چیزی که هر Front-End Developer باید درباره API بدونه:

🔹 GET → گرفتن اطلاعات
🔹 POST → ساخت اطلاعات جدید
🔹 PUT → جایگزینی کامل اطلاعات
🔹 PATCH → ویرایش بخشی از اطلاعات
🔹 DELETE → حذف اطلاعات
اما یه نکته مهم:

❌ فقط بلد بودن fetch()نشون نمیده که API رو کامل بلدی !

Status Code
، Error Handling،
Authentication
و Loading State
رو هم باید بلد باشی.

📌 Save
کن؛ توی پروژه به کارت میاد.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری

👀 این ۵ تا Attribute HTML رو خیلی‌ها جدی نمی‌گیرن:

loading="lazy" → لود تنبل تصاویر
autocomplete → تجربه بهتر فرم‌ها
aria-label → دسترسی‌پذیری بهتر
defer → جلوگیری از بلاک شدن HTML
rel="noopener" → امنیت بیشتر لینک‌های جدید

همین جزئیات کوچیکه که کد یه Junior رو از یه Developer حرفه‌ای جدا می‌کنه. 🚀

📌 Save
کن؛ بعداً به کارت میاد.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری

🚨 ۵ نکته JavaScript که خیلی‌ها دیر یاد می‌گیرن:

🔹 ?. → جلوگیری از خطای دسترسی به null/undefined
🔹 ?? → مقدار پیش‌فرض فقط وقتی مقدار null/undefined باشه
🔹 Object.freeze() → جلوگیری از تغییر مستقیم آبجکت
🔹 structuredClone() → کپی عمیق داده‌ها
🔹 Promise.all() → اجرای چند Promise به‌صورت همزمان

💡 لازم نیست JavaScript رو فقط با حفظ کردن یاد بگیری؛

بفهم هر ابزار کِی به درد می‌خوره.

📌 Save
کن؛ اینا توی پروژه واقعاً کاربردی‌ان.

#Frontend #UI #WebDesign #TailwindCSS #React #FrontendDeveloper #WebDevelopment #UIDesign #UIComponents #طراحی_رابط_کاربری

یکی اومد توی پیوی پشتیبانی بهم گفت:

«هر کاری می‌کنم نمی‌تونم کار پیدا کنم.»
گفتم: نمونه‌کار داری؟
گفت: آره.
یه صفحه وبلاگ ساده برام فرستاد.
بعد چندتا سؤال درباره پروژه ازش پرسیدم؛
رفته بود جواب‌ها رو از ChatGPT گرفته و برام فرستاده بود! 😐

عزیز، اینطوری داری سر خودت رو گول می‌زنی.
اگه می‌خوای استخدام بشی، باید واقعاً به مفاهیم مسلط باشی، پروژه درست‌وحسابی داشته باشی و بتونی چیزی که ساختی رو توضیح بدی. سر جلسه مصاحبه تموم مفاهیم رو ازتون میپرسن من نمیفهمم چرا اینو نمیخواید قبول کنید
اینکه فقط پروژه رو با کمک AI بسازی و حتی ندونی داخلش چه خبره، توی مصاحبه خیلی زود مشخص میشه ردت میکنن
از طرفی، وقتی نمونه‌کار قوی نداری، چرا کارفرما باید تو رو انتخاب کنه؟
کارفرما داره برای یک نیروی متخصص 50 الی 80 م هزینه می‌کنه؛

قرار نیست پول بده که تو تازه سر پروژه یاد بگیری.

اگه واقعاً دنبال کاری:
✅ مفاهیم رو یاد بگیر
✅ پروژه واقعی بساز
✅ پروژه‌ات رو خودت کامل بفهم
✅ برای موقعیت‌های مناسب مداوم درخواست بفرست
✅ آماده مصاحبه باش.

اگه دنبال استخدامی، اول مطمئن شو واقعاً چیزی برای ارائه داری. 👨‍💻