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

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 | فرانت کست

📋 چک‌لیست پروژه: شروع کار با API

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

✅ درک مفهوم API و REST ← (Endpoint، Methodها، Status Code)

✅ ارسال درخواست GET و POST با Fetch ← (Body، Headers، JSON)

✅ مدیریت Error و حالت‌های مختلف ← (loading / success / error)

✅ بررسی یک Authentication ساده ← (Token، ارسال Authorization Header)

✅ کار با APIهای عمومی برای تمرین ← (مثل JSONPlaceholder)

✅ مدیریت داده‌های دریافت شده ← (State، رندر لیست، نمایش جزئیات)

📌 پیشنهاد:
برای تمرین واقعی، یک صفحه بساز که لیست دیتا رو از API بگیره و امکان Refresh یا Search داشته باشه.

آموزش Node.js - توسعه API

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

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

📂 کد رو از رو نخون | CSS

.box {
  position: relative;
  z-index: 9999;
}

👀 در نگاه اول:
این کد باعث می‌شه المان بالاتر از سایر المان‌ها نمایش داده بشه.

⚡️ واقعیت CSS:
در صورتی که المنت parent یک محدوده جدید لایه‌بندی ایجاد کرده باشه، مقدار z-index المنت child فقط داخل همون محدوده اثرگذار هست.

💡 نکته:
ویژگی‌هایی مثل opacity، transform و filter باعث ایجاد محدوده لایه‌بندی جدید می‌شن.

📌 راه‌حل پیشنهادی:
برای رفع این مشکل، محدوده لایه‌بندی مربوط به parent را حذف کن یا ساختار المنت‌ها را طوری اصلاح کن که محدودیت ایجاد نشه.

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

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

✅ مقایسه کوتاه contain و container queries

در طراحی مدرن مبتنی بر کامپوننت، دو مفهوم contain و container queries نقش مهمی در مدیریت layout و بهینه‌سازی رابط کاربری دارن.

☑️ contain
این ویژگی باعث می‌شه رفتار و محاسبات یک المنت از parentاش جدا بشه و مرورگر بتونه رندر اون بخش رو بهینه‌تر انجام بده. استفاده از contain معمولاً به بهبود performance کمک می‌کنه.

☑️ container queries
این قابلیت امکان تغییر استایل کامپوننت رو بر اساس اندازه parent فراهم می‌کنه، نه اندازه کل صفحه. این رویکرد برای ساخت کامپوننت‌های responsive و مستقل بسیار کاربردیه.

🔰 جمع‌بندی
به طور خلاصه، contain بیشتر برای بهبود performance استفاده می‌شه و container queries برای طراحی کامپوننت‌های responsive و انعطاف‌پذیر.

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

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

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

این چک لیست بهت کمک می‌کنه از همون ابتدا با گیت اصولی کار کنی و پروژه‌هات رو کاملاً حرفه‌ای مدیریت کنی.

✅ نصب Git و تنظیم اولیه ← (git config، ثبت نام در GitHub)

✅ ساخت repository جدید ← (git init، .gitignore، اولین commit)

✅ کار با Branchها ← (branch جدید، merge، حذف شاخه‌ها)

✅ کار با Remote Repository ← (git remote add، push، pull)

✅ رفع Conflictهای ساده ← (درک دلیل conflict و ادغام دستی)

✅ آشنایی با Pull Request و همکاری تیمی ← (ساخت PR، review مقدماتی)

📌 پیشنهاد:
قبل از شروع پروژه‌های جدی، روی یک پروژه تمرینی چند Branch بساز و چند بار Merge انجام بده تا روند برایت کاملاً جا بیفته.

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

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

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

const user = { profile: null };
console.log(user.profile?.name ?? "No name"); 

👀 در نگاه اول:
چون مقدار نهایی این دسترسی به name برابر undefined می‌شه، عملگر ?? فعال شده و مقدار پیش‌فرض "No name" چاپ می‌شه.

⚡️ در واقعیت:
مقدار user.profile وجود داره، اما برابر null هست. optional chaining بررسی می‌کنه آیا مقدار قبل از خودش null یا undefined هست یا نه؛ وقتی با null مواجه می‌شه، بدون خطا اجرای مسیر رو متوقف می‌کنه و نتیجه رو undefined برمی‌گردونه. در ادامه، عملگر ?? این undefined رو می‌بینه و مقدار پیش‌فرض رو برمی‌گردونه.

💡 نکته مهم:
جلوگیری از crash شدن برنامه تنها کاریه که optional chaining انجام می‌ده و هیچ تغییری در مسیر یا ساختار داده ایجاد نمی‌کنه.

📌 پیشنهاد عملی:
برای دسترسی به مسیرهای عمیق و داده‌های نامطمئن، استفاده از safe accessorها یا اعتبارسنجی ساختار داده با ابزارهایی مثل Zod انتخاب مطمئن‌تری هست.

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

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