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

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