✅ ظرفیت کلاس رفع اشکال تکمیل شده.

✅ تا آخر هفته می‌تونید با تخفیف ویژه برای دوره ثبت نام کنید.

✅ امروز آخرین فرصت ثبت‌نام با تخفیف بیشتر از ۵۰ درصد برای آموزش Next.js - حل مسئله هست.

✅ این تخفیف دیگه تکرار نمی‌شه.

📂 کد رو از رو نخون: Next.js

export default function Page() {
  return <div>{Date.now()}</div>;
}

👀 در نگاه اول:
فکر می‌کنی هر بار که صفحه رو ریفرش کنی، زمان جدید نمایش داده میشه.

⚡️ در واقعیت:
این کد در سمت سرور اجرا میشه، بنابراین ()Date.now در زمان رندر شدن سرور مقداردهی میشه.
در نتیجه، همه کاربران همون زمان ثبت شده در سرور رو می‌بینن، نه زمان واقعی سیستم خودشون رو.

💡 نکته:
در Next.js (به‌خصوص App Router)، حالت‌های مختلفی مثل SSR، SSG و CSR وجود داره.
در SSR و SSG مقادیر پویا مثل تاریخ باید با دقت مدیریت بشن تا داده‌ی کش شده یا زمان اشتباه نمایش داده نشه.

📌 پیشنهاد:
اگر می‌خوای تاریخ یا ساعت لحظه‌ای (زمان واقعی مرورگر کاربر) رو نشون بدی، اون بخش رو با استفاده از 'use client' به کلاینت کامپوننت تبدیل کن و از هوک‌هایی مثل useEffect برای به‌روزرسانی لحظه‌ای استفاده کن.

#کد_رو_از_رو_نخون #Nextjs

———————————
@frontcast | فرانت کست

✅ مقایسه کوتاه: Relative units (em/rem) و Absolute units (px)

انتخاب واحد اندازه‌گیری در CSS روی ریسپانسیو بودن و تجربه کاربری تاثیر مستقیم داره.

☑️ Relative units (em/rem):
نسبت به اندازه فونت parent (em) یا root (rem) محاسبه می‌شن. برای طراحی‌های ریسپانسیو مناسب‌تر هستن.

☑️ Absolute units (px):
یک اندازه ثابت مشخص می‌کنن. ساده و دقیقن اما در دستگاه‌های مختلف انعطاف‌پذیری کمتری دارن.

🔰 جمع‌بندی:
واحدهای نسبی در طراحی مدرن و ریسپانسیو توصیه می‌شن، درحالی‌که px بیشتر برای المنت‌های دقیق یا موارد خاص کاربرد داره.

#مقایسه_مفاهیم #کدنویسی #توسعه_وب

———————————
@frontcast | فرانت کست

بررسی تغییرات 16 Next.js

نسخه ۱۶ فریم‌ورک Next.js منتشر شد. توی این نسخه، React Compiler به مرحله پایدار رسیده، Turbopack برای محیط production آماده شده و DevTools جدید هم معرفی شده. همچنین بهبودهایی در prefetch cache، پردازش تصاویر و رابط Terminal ایجاد شده تا عملکرد پروژه‌ها سریع‌تر و شفاف‌تر باشه.

ادامه مطلب

———————————
@frontcast | فرانت کست

📋 چک‌لیست پروژه: دیپلوی روی لیارا

دیپلوی مرحله‌ای حساسه که تضمین می‌کنه پروژه‌ات به درستی در دسترس کاربر قرار بگیره. این چک‌لیست، مسیر دیپلوی روی لیارا رو ساده می‌کنه.

✅ ساخت اکانت و ایجاد سرویس در لیارا
✅ کانفیگ دیتابیس (MongoDB, MySQL و ...) در پنل لیارا
✅ تنظیم متغیرهای محیطی
✅ اتصال ریپازیتوری به لیارا و تنظیم CI/CD
✅ تست نهایی بعد از دیپلوی (عملکرد APIها و صفحات فرانت‌اند)

📌 پیشنهاد:
قبل از دیپلوی، از فایل env. و dependencyهای پروژه یک بار روی لوکال تست کامل بگیر.

#چک_لیست #توسعه_وب

———————————
@frontcast | فرانت کست

📂 کد رو از رو نخون: Node.js

console.log(this);

👀 در نگاه اول:
شاید فکر کنی مثل مرورگر، خروجی window باشه.

⚡️واقعیت:
اما در Node.js ماجرا فرق داره؛
اگه این کد رو بیرون از هر تابعی بنویسی، مقدارش {} (آبجکت خالی) نشون داده میشه.
ولی داخل تابع یا کلاس، this دیگه {} نیست، ممکنه undefined باشه یا به global اشاره کنه (بسته به نوع تابع و حالت strict).

💡 نکته:
تو مرورگر، this معمولاً به window اشاره می‌کنه،
اما تو Node.js به چیزی مثل global مربوطه و در ماژول‌ها مقدارش {} هست.

📌 پیشنهاد:
برای اینکه کاملاً درک کنی، این کد رو هم تو مرورگر اجرا کن و هم تو Node.js.
تفاوتش رو خودت ببینی، هیچ توضیحی مثل تجربه مستقیم نیست.

#کد_رو_از_رو_نخون #Nodejs

———————————
@frontcast | فرانت کست

✅ مقایسه کوتاه: Tailwind و Bootstrap

انتخاب فریم‌ورک استایل روی سرعت توسعه و ظاهر پروژه تاثیر مستقیم داره.

☑️ Tailwind:
یک فریم‌ورک utility-first که کلاس‌های کوچک و آماده برای استایل‌دهی ارائه می‌ده. سبک، قابل سفارشی‌سازی و مناسب طراحی‌های مدرن.

☑️ Bootstrap:
یک فریم‌ورک آماده با کامپوننت‌های از پیش طراحی‌شده. سریع برای شروع پروژه‌ها اما ظاهر پروژه‌ها ممکنه شبیه به هم بشه.

🔰 جمع‌بندی:
فریم‌ورک Tailwind برای طراحی‌های یونیک و سفارشی بهتره؛ Bootstrap برای پروژه‌هایی که سرعت شروع و کامپوننت آماده اهمیت داره مناسب‌تره.

#مقایسه_مفاهیم #کدنویسی #توسعه_وب

———————————
@frontcast | فرانت کست

نکات جاوااسکریپت: شش رفتار کم‌تر شناخته شده در جاوااسکریپت

جاوااسکریپت پر از جزئیات ظریفه که گاهی حتی برنامه‌نویس‌های باتجربه رو هم غافلگیر می‌کنه.
توی این مقاله، شش رفتار مهم و کم‌تر شناخته شده اونو با مثالدبررسی کردیم. از تفاوت Function Declaration و Expression تا تغییرناپذیری داده‌های Primitive رو مرور کردیم.
درک این مفاهیم، پایه‌ای برای کدنویسی دقیق‌تر و پیش‌بینی‌پذیرتر فراهم می‌کنه.

ادامه مطلب

———————————
@frontcast | فرانت کست

📋 چک‌لیست پروژه: نگه‌داری و مانیتورینگ

نگه‌داری و مانیتورینگ منظم باعث می‌شه مشکلات سریع‌تر شناسایی بشن و پروژه پایدار بمونه.

✅ پیاده‌سازی لاگ‌گیری مناسب در بک‌اند
✅ مانیتورینگ منابع سرور (CPU، RAM، Disk)
✅ به‌روزرسانی منظم وابستگی‌ها و پکیج‌ها
✅ استفاده از ابزار مانیتورینگ (Sentry، New Relic، Grafana)
✅ تهیه بکاپ دوره‌ای از دیتابیس و فایل‌ها

📌 پیشنهاد:
یک داشبورد مانیتورینگ داشته باش تا همیشه وضعیت سرور و سرویس‌ها رو در لحظه بررسی کنی.

#چک_لیست #توسعه_وب

———————————
@frontcast | فرانت کست

📂 کد رو از رو نخون: Node.js

setTimeout(() => console.log("A"), 0);
Promise.resolve().then(() => console.log("B"));
console.log("C");

👀 در نگاه اول:
انتظار داری ترتیب اجرا A → B → C باشه.

⚡️ در واقعیت:
خروجی به این شکله:

C
B
A

به خاطر رفتار Event Loop و اولویت microtask queue.

💡 نکته:
باید یادمون باشه که Promise‌ها همیشه قبل از callbackهای setTimeout اجرا میشن.

📌 پیشنهاد:
برای درک بهتر رفتار کد، حتماً Event Loop و ترتیب اجرای taskها رو مطالعه کن.

#کد_رو_از_رو_نخون #Nodejs

———————————
@frontcast | فرانت کست

✅ مقایسه کوتاه: خطاهای Compile-time و خطاهای Run-time

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

☑️ خطاهای Compile-time:
خطاهایی که هنگام کامپایل یا قبل از اجرای برنامه رخ می‌دن. مثل خطاهای تایپی یا نوع داده اشتباه در تایپ اسکریپت.

☑️ خطاهای Run-time:
خطاهایی که در زمان اجرای برنامه ظاهر می‌شن. مثل دسترسی به متغیر undefined یا خطا در API call.

🔰 جمع‌بندی:
خطاهای Compile-time زودتر شناسایی و رفع می‌شن، اما خطاهای Run-time نیاز به تست و مدیریت استثنا دارن.

#مقایسه_مفاهیم #کدنویسی #توسعه_وب

———————————
@frontcast | فرانت کست

بررسی ویژگی Cursor در CSS

ویژگی cursor در CSS یکی از ابزارهای کلیدی برای بهبود تجربه کاربریه. این ویژگی با تغییر شکل نشانگر ماوس، نوع تعامل قابل انجام رو به‌صورت فوری منتقل می‌کنه. از کلیک‌پذیری و درَگ‌کردن گرفته تا حالت بارگذاری، هر حالت پیام مشخصی به کاربر می‌ده. توی این مقاله کاربردها، محدودیت‌ها و راهکارهای بهینه‌سازی این ویژگی رو بررسی می‌کنیم.

ادامه مطلب

———————————
@frontcast | فرانت کست

🎉 ۷۰ درصد تخفیف بلک فرایدی فرانت کست!

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

⏳ تخفیف فقط تا پایان هفته فعاله و تمدید نمی‌شه!

💬 اگر نمی‌دونید کدوم دوره برای شما مناسبه یا می‌خواید مسیرتون رو مشخص کنید، پیام بدید: @MasoodSadri

مشاهده دوره‌ها

✅ امروز آخرین فرصت استفاده از تخفیف بلک فرایدی هست!

✅ این تخفیف دیگه تکرار نمی‌شه!

📂 کد رو از رو نخون: جاوااسکریپت

for (var i = 1; i <= 3; i++) {
  setTimeout(() => console.log(i), 0);
}

👀 در نگاه اول:
باید ۱،۲،۳ چاپ بشه.

⚡️ در واقعیت:
سه بار عدد ۴ چاپ میشه، چون var اسکوپ بلاکی نداره.

💡 نکته:
باید دقت کنیم که callbackها مقدار i نهایی رو می‌گیرن.

📌 پیشنهاد:
از let استفاده کن تا هر iteration مقدار مستقل داشته باشه.

#کد_رو_از_رو_نخون #جاوااسکریپت

———————————
@frontcast | فرانت کست