۶ سایت رایگان برای ساخت 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 م هزینه می‌کنه؛

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

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

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

🚀 ترفند ساده برای سریع‌تر کردن سایت:

اگه عکس‌های زیادی توی صفحه داری، همه‌شون رو از اول لود نکن!

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

<img src="image.webp" loading="lazy" alt="...">

🔹 عکس‌هایی که پایین صفحه هستن، لازم نیست همون اول دانلود بشن.

نتیجه؟
⚡️ درخواست کمتر در شروع صفحه
⚡️ لود اولیه سریع‌تر
⚡️ تجربه بهتر کاربر

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

🌐 SSR یا CSR؟
کدوم بهتره؟

CSR → صفحه بیشتر سمت
Browser
ساخته میشه.

SSR → HTML
صفحه روی Server تولید میشه و بعد به کاربر می‌رسه.

🚀 CSR → مناسب اپلیکیشن‌های تعاملی
🔍 SSR →
مناسب صفحاتی که SEO و نمایش سریع محتوا مهمه

❌ هیچ‌کدوم همیشه بهتر نیست.
انتخاب درست، به نوع پروژه بستگی داره.

Save
کن؛ این سؤال توی مصاحبه‌ها هم زیاد مطرح میشه.

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

📱 Mobile First
یعنی چی؟

یعنی طراحی و توسعه رو اول برای صفحه کوچک شروع کنی:

Mobile → Tablet → Desktop

نه اینکه اول یه سایت دسکتاپ بسازی و آخر کار
سعی کنی جمعش کنی داخل موبایل. 😄
✅ CSS ساده‌تر
✅ تمرکز روی محتوای ضروری
✅ Responsive Design بهتر

📌 اگه Front-End کار می‌کنی، Mobile First رو جدی بگیر.

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

بیا یه واقعیت بازار کار رو با هم ببینیم. 👇

این آگهی‌های Front-End، حقوق ۶۰ تا ۷۰ میلیون گذاشتن رو باز کن ببین.
حتی آگهی‌پایین تری ۶۰ تا ۱۰۰ میلیون حقوق در نظر گرفتن. برای کسی که به:
JavaScript + React + Next.js + TypeScript
مسلط باشه،

حالا یه سؤال:

چرا این شرکت‌ها اکانت ChatGPT نمی‌خرن و نمی‌گن خودش برامون سایت یا ابزار بسازه؟ 😂

چون مسئله شرکت فقط نوشتن کد نیست.
وقتی پروژه بزرگ میشه، باید بتونی:
🔹 معماری درست طراحی کنی
🔹 سیستم رو تحلیل کنی
🔹 تصمیم بگیری هر Feature چطور پیاده‌سازی بشه
🔹 کدی بنویسی که چند ماه بعد هم قابل توسعه باشه
🔹 مشکلات Performance و Scalability رو پیش‌بینی کنی
🔹 و کاری کنی که وقتی ۱۰۰ هزار کاربر همزمان وارد سایت شدن، سیستم نخوابه!
AI
می‌تونه برات کد بنویسه؛
اما مسئولیت تصمیم درست هنوز با توئه.
پس اگه هدفت فقط اینه که با AI چندتا سایت خوشگل بسازی،
داری با خودت شوخی می‌کنی.

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

🚨 اگه Front-End کار می‌کنی، این اشتباه CORS رو باید بشناسی!

وقتی Front-End و Backend روی Originهای متفاوت باشن، مرورگر ممکنه درخواست رو بلاک کنه.

مثلاً:

frontend.com → api.com   

و یهو می‌بینی:
❌ CORS Error

نکته مهم:

CORS
معمولاً مشکل Backend/Server
Configuration
هست، نه اینکه JavaScript
تو خراب باشه!

؛ این خطا دیر یا زود سراغت میاد.

💼 یه پروژه معمولی داری و می‌خوای تبدیلش کنی به چیزی که توی رزومه بدرخشه؟

این 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]



🔥 به‌جای اینکه پروژه‌ات فقط «قشنگ» باشه، کاری کن مهارتت رو ثابت کنه.

🤔 Hoisting
در JavaScript چیه؟

قبل از اجرای کد، بعضی Declarationها در فرآیند ایجاد Execution Context
پردازش میشن.

برای همینه که این کد:

sayHi();

function sayHi() {
  console.log("Hi");
}



کار می‌کنه. ✅

ولی رفتار let و const با var فرق داره.
📌 Hoisting
رو با «انتقال واقعی کد به بالا» اشتباه نگیر.