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

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

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

📱 موبایل یا کامپیوتر
🌐 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 م هزینه می‌کنه؛

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

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

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

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

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

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

<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 #طراحی_رابط_کاربری