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

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

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

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

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

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

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

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

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

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

✅ مقایسه کوتاه: useEffect و Server Action

با App Router، بسیاری از کاری‌های سمت کلاینت به سرور منتقل شدن و این مقایسه برای درک جریان جدید Next.js ضروریه.

☑️ useEffect:
برای اجرای کد بعد از رندر در مرورگر استفاده می‌شه و روی performance و hydration تأثیر داره.

☑️ Server Action:
توابع سمت سرور هستن که بدون نیاز به API Route اجرا می‌شن و سریع‌تر، امن‌تر و بدون رندر اضافه هستن.

🔰 جمع‌بندی:
در Next.js جدید، تا جایی که می‌تونی سرور اکشن‌ها رو جایگزین useEffectهای غیرضروری کن.

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

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

توسعه اپلیکیشن تایپ اسکریپت + React با استفاده از Vite

در این آموزش یک پروژه کامل React + تایپ اسکریپت رو با استفاده از Vite ایجاد می‌کنیم و مزیت‌های این معماری مدرن رو بررسی می‌کنیم. روش کار با ساختار فایل‌ها، اجرای نرم پروژه و ویژگی‌های سرعتی Vite را مرحله‌به‌مرحله توضیح می‌دیم. همچنین عملکرد اپلیکیشن Vite رو در مقایسه با CRA تحلیل می‌کنیم. این مقاله برای توسعه‌دهندگانی که به دنبال تجربه‌ای سریع‌تر و حرفه‌ای‌تر در فرانت‌اند هستن میتونه خیلی مفید باشه.

ادامه مطلب

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

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

if ("0") console.log("YES");

👀 در نگاه اول:
تصور می‌کنیم "0" مقدار صفره و باید falsy باشه.

⚡️ در واقعیت:
این مقدار یک رشته غیرخالیه، بنابراین truthy محسوب میشه و دستور داخل شرط اجرا میشه.

💡 نکته:
در بین رشته‌ها فقط حالت کاملاً خالی یعنی "" رفتار falsy دارد.

📌 پیشنهاد:
پیش از نوشتن شرط‌ها بهتره نوع داده ورودی رو در نظر بگیری تا نتیجه غیرمنتظره نشه.

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

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

✅ مقایسه کوتاه: Promises و async/await

این مقایسه برای نوشتن کد خوانا، مدیریت بهتر جریان اجرای برنامه و جلوگیری از callback hell اهمیت زیادی داره.

☑️ Promises:
از ساختارهای then و catch استفاده می‌کنن و برای مدیریت وضعیت‌های مختلف (pending، fulfilled، rejected) مناسب هستن. کنترل جریان را بهتر از کال‌بک‌ها ساده می‌کنن.

☑️ async/await:
سینتکس تمیزتر و شبیه کد synchronous ارائه می‌ده و مدیریت خطا با try/catch بسیار قابل فهم‌تر و منظم‌تره.

🔰 جمع‌بندی:
هر دو بر پایه یک مفهوم ساخته شدن، اما async/await خواناتر، مدرن‌تر و استاندارد پیشنهادی برای توسعه‌دهنده‌هاست.

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

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

اجرای تایپ اسکریپت در Node.js

در این مقاله روش‌های مختلف اجرای مستقیم تایپ‌اسکریپت در Node.js رو بررسی کردیم. یاد گرفتیم چرا کامپایلر رسمی تایپ اسکریپت همیشه کافی نیست و چه محدودیت‌هایی داره. ابزارهایی مثل ts-node و tsx رو معرفی کردیم و نحوه استفاده و نقاط ضعفشان رو توضیح دادیم. در نهایت دیدیم که قابلیت Type Stripping Node.js، مسیر اجرای کامل تایپ اسکریپت بدون ابزار جانبی رو هموار کرده.

ادامه مطلب

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

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

این چک‌لیست بهت کمک می‌کنه مسیر یادگیریت رو از پایه تا سطح قابل قبول، مرحله‌به‌مرحله و بدون سردرگمی طی کنی. مخصوص کساییه که می‌خوان جاوااسکریپت رو درست و اصولی یاد بگیرن.

✅ آشنایی با مفاهیم پایه وب ← (HTML، CSS در حد لازم برای شروع جاوااسکریپت)

✅ راه‌اندازی محیط توسعه ← (VSCode، افزونه‌ها، Node.js، افزونه Live Server)

✅ مبانی جاوااسکریپت ← (متغیرها، انواع داده، عملگرها، شرط‌ها، حلقه‌ها)

✅ توابع و Scope ← (تابع معمولی، Arrow function، انواع Scope)

✅ مفهوم Array و Objectها در عمل ← (متدهای پرکاربرد مثل map، filter، reduce)

✅ آشنایی با DOM و مدیریت eventها ← (انتخاب عناصر، تغییر محتوا، Event Listener)

✅ یادگیری Async جاوااسکریپت ← (مفاهیم callback، Promise، async/await،)

✅ کار با APIها (Fetch) ← (درخواست GET/POST، مدیریت خطا)

✅ مدیریت ماژول‌ها ← (Import/Export، ساختاردهی فایل‌ها)

✅ آشنایی با مفاهیم Debugging و Console ← (خطایابی، Breakpoint، ابزارهای DevTools مرورگر)

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

آموزش جاوااسکریپت - دوره فشرده

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

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

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

function check(x: string | number) {
  if (typeof x === "string") return;
  if (typeof x === "number") return;
  x;
}

👀 در نگاه اول:
اینجا به‌نظر می‌رسه مقدار x فقط می‌تونه string یا number باشه.

⚡️ در واقعیت:
تایپ‌اسکریپت وقتی به خط آخر می‌رسه، می‌بینه که تمام حالت‌های ممکن (string و number) در بالا بررسی شدن.
پس نتیجه می‌گیره که هیچ حالت سومی وجود نداره و مقدار x در این نقطه باید never باشه.

💡 نکته مهم:
تایپ never یعنی «این بخش از کد نباید هیچ‌وقت اجرا بشه».
تایپ‌اسکریپت با این کار مطمئن می‌شه تمام حالت‌ها به‌طور کامل پوشش داده شدن.

📌 پیشنهاد کاربردی:
از همین الگو برای exhaustiveness check داخل switch‌ها استفاده کن تا مطمئن بشی هیچ حالت تعریف نشده‌ای از قلم نیفتاده.

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

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

✅ مقایسه کوتاه: Interface Merging و Type Alias

در پروژه‌های بزرگ تایپ‌اسکریپت، انتخاب بین interface و type تأثیر مستقیمی روی گسترش‌پذیری و نگه‌داری کد داره.

☑️ Interface Merging
وقتی چندتا interface با یک نام در فایل‌های مختلف تعریف می‌شن، تایپ‌اسکریپت اون‌ها رو به‌صورت خودکار با هم ادغام می‌کنه. این ویژگی برای توسعه تدریجی، کار تیمی و ساختارهای پلاگین‌محور بسیار کاربردیه.

☑️ Type Alias
در مورد type، ادغامی انجام نمی‌شه؛ اما این ساختار برای تعریف union، intersection و تایپ‌های پیچیده و ترکیبی انتخاب مناسب‌تری محسوب می‌شه.

🔰 جمع‌بندی نهایی
برای توسعه مرحله‌ای و ساختارهای قابل گسترش، استفاده از interface منطقی‌تره؛ اما برای ساخت تایپ‌های پیچیده و ترکیبی، type گزینه بهتریه.

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

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

بررسی ۶ کتابخانه‌ برتر CSS در سال ۲۰۲۵

در این مقاله با ۶ کتابخانه محبوب انیمیشن CSS آشنا می‌شیم که به ما کمک می‌کنن بدون پیچیدگی‌های اضافی، رابط کاربری پروژه‌هامون رو جذاب‌تر کنیم. کتابخانه‌هایی مثل Animista، Animate CSS و AnimXYZ امکان ساخت انیمیشن‌های روان، قابل تنظیم و حرفه‌ای رو با حداقل کدنویسی فراهم می‌کنن. در کنار اون‌ها، ابزارهایی مثل Whirl، Moving Letters و LDRS راه‌حل‌های آماده‌ای برای لودرها و انیمیشن‌های متنی ارائه می‌دن. در نهایت یاد می‌گیریم چطور با انتخاب درست کتابخانه CSS، تجربه کاربری بهتر و رابطی مدرن‌تر برای پروژه‌های وب بسازیم.

ادامه مطلب

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

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

این چک‌لیست بهت کمک می‌کنه React رو اصولی و بدون پراکندگی یاد بگیری؛ مخصوص مبتدی‌هایی که می‌خوان سریع به سطح پروژه زدن برسن.

✅ نصب Node.js و ساخت پروژه با Vite یا Create React App ← (شروع سریع و کم‌دردسر)

✅ درک Component و JSX ← (ساخت کامپوننت، props، ساختار JSX)

✅ آشنایی با State و eventها ← (useState، کنترل ورودی‌ها، مدیریت تعاملات)

✅ ایجاد لیست‌ها و شرطی‌سازی ← (map، رندر شرطی، keyها)

✅ هوک‌های پایه ← (useEffect برای درخواست API یا Side Effectها)

✅ ماژول‌ها و ساختاردهی پروژه ← (فولدرینگ، مدیریت فایل‌ها)

✅ استایل‌دهی ← (CSS Module ،Tailwind یا Styled Components)

✅ کار با APIها در React ← (fetch یا axios + مدیریت لودینگ و error)

📌 پیشنهاد:
برای تسلط بیشتر، یک پروژه ساده Todo یا Weather بساز و تمام مفاهیم رو در عمل پیاده کن.

آموزش React - دوره فشرده

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

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

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

export default async function Page() {
  const data = await fetch("https://api.com").then(res => res.json());
  return <div>{data.noscript}</div>;
}

👀 در نگاه اول:
این کد فقط یک fetch ساده در سمت سرور هست و داده رو دریافت می‌کنه و نمایش می‌ده.

⚡️ در واقعیت:
در Next.js، تابع fetch به‌صورت پیش‌فرض cache می‌شه. یعنی ممکنه داده‌ای که نمایش داده می‌شه همیشه به‌روز نباشه.

💡 نکته:
رفتار fetch داخل سرور کامپوننت‌ها با چیزی که در سمت کلاینت انتظار داریم فرق داره.

📌 پیشنهاد:
اگر به داده‌های لحظه‌ای و کاملاً به‌روز نیاز داری، کش رو غیرفعال کن:

fetch("...", { cache: "no-store" })

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

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

🍉 ۵۰ درصد تخفیف یلدای فرانت‌ کست!

⏳ تا پایان هفته می‌تونید از این تخفیف استفاده کنید.

💬 اگر نمی‌دونید از کدوم دوره شروع کنید یا درباره مسیر یادگیری سوال دارید، پیام بدید: @MasoodSadri

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

✅ مقایسه کوتاه: Cluster و Worker Threads

وقتی با کدهای سنگین در Node.js کار می‌کنیم، انتخاب بین multi-process و multi-thread می‌تونه تأثیر مستقیمی روی کارایی اپلیکیشن داشته باشه.

☑️ Cluster:
در این روش، چند پردازش مستقل Node.js اجرا می‌شن که هر کدوم حافظه جداگانه دارن. این مدل برای هندل کردن درخواست‌های زیاد، کارهای شبکه‌ای و عملیات I/O خیلی مناسبه و کمک می‌کنه از تمام هسته‌های CPU استفاده بشه.

☑️ Worker Threads:
در این حالت، چند Thread داخل یک پردازش اجرا می‌شن و حافظه رو با هم به اشتراک می‌ذارن. این گزینه برای انجام محاسبات سنگین CPU مثل پردازش داده، رمزنگاری یا الگوریتم‌های پیچیده بهترین انتخابه.

🔰 جمع‌بندی:
برای پردازش‌های محاسباتی و CPU ‌محور Worker Threads مناسبه
برای درخواست‌های زیاد، شبکه و I/O‌ محور Cluster مناسبه

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

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

بررسی Middleware در Next.js

در این مقاله یاد می‌گیریم Middleware در Next.js چیه و چطور می‌تونیم قبل از پردازش نهایی درخواست‌ها، روی رفتار اپلیکیشن کنترل داشته باشیم. با بررسی کاربردهایی مثل احراز هویت، ریدایرکت و Geolocation می‌بینیم این قابلیت کجا واقعاً به کارمون میاد. همچنین نقش Edge Functions رو در اجرای سریع‌تر منطق‌ها و بهبود تجربه کاربری مرور می‌کنیم. اگه می‌خوایید ساختار پروژه‌های Next.js خودتون رو حرفه‌ای‌تر و تمیزتر طراحی کنین، این مقاله می‌تونه نقطه شروع خوبی باشه.

ادامه مطلب

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