شبکه اجتماعی طراحان وب ایران
ورود

نکات آموزشی طراحی وب

اصطلاحات و توضیحات کوتاه، دسته‌بندی شده

API (4)

  • GraphQL

    زبان پرس‌وجو برای API که به کلاینت اجازه می‌دهد دقیقاً داده مورد نیاز را بخواهد.

    مثال: Facebook, Apollo

  • gRPC

    چارچوب RPC با عملکرد بالا برای ارتباط بین سرویس‌ها.

    مثال: Protocol Buffers, HTTP/2

  • REST

    سبک معماری برای APIهای وب با متدهای HTTP (GET, POST, PUT, DELETE) و آدرس‌های منبع‌محور (مثلاً /users/1).

  • tRPC

    چارچوب برای ساخت API نوع‌ایمن بدون نیاز به ساختن شِما.

    مثال: End-to-end Type Safety

CMS (8)

  • Contentful

    CMS headless برای مدیریت محتوا.

    مثال: API-first, Cloud-based

  • Decoupled CMS

    CMS با فرانت‌اند و بک‌اند جدا اما همراه.

    مثال: همانند Headless اما با فرانت‌اند پیش‌فرض

  • Headless CMS

    CMS بدون فرانت‌اند اجباری، فقط API برای محتوا.

    مثال: انعطاف‌پذیری کامل

  • Prismic

    CMS headless ساده و کاربرپسند.

    مثال: Slices, Visual Editor

  • Sanity

    CMS headless با تمرکز بر توسعه‌دهندگان.

    مثال: Real-time, Structured Content

  • Strapi

    CMS headless متن‌باز و خود میزبانی.

    مثال: Node.js, Customizable

  • Traditional CMS

    CMS با فرانت‌اند و بک‌اند یکپارچه.

    مثال: WordPress, Drupal, Joomla

  • WordPress Headless

    استفاده از WordPress به عنوان بک‌اند و فرانت‌اند جداگانه.

    مثال: REST API, GraphQL

CSS (221)

  • Box Model, مدل جعبه

    مدلی که ساختار هر المان HTML را توصیف می‌کند: محتوا، پدینگ، بوردر و مارجین. درک این مدل برای چیدمان صحیح ضروری است.

    مثال: width, padding, border, margin

  • Box Sizing

    تعیین نحوه محاسبه اندازه المان: محتوا + پدینگ + بوردر.

    مثال: box-sizing: border-box;

  • Flexbox, فلکس باکس

    مدل چیدمان یک‌بعدی در CSS برای قرار دادن آیتم‌ها در ردیف یا ستون با تراز و توزیع فضا (justify-content, align-items).

    درس مرتبط در آموزش طراحی وب ←

  • Grid, گرید

    سیستم چیدمان دو بعدی CSS برای ساخت layout با سطر و ستون. با grid-template-columns و gap کار می‌کند.

    درس مرتبط در آموزش طراحی وب ←

  • Bootstrap

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

    درس مرتبط در آموزش طراحی وب ←

  • Centering in CSS

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

    مثال: margin: 0 auto; یا display: flex; justify-content: center;

  • CSS Align Items

    ترازبندی آیتم‌ها در محور متقاطع در فلکس‌باکس و گرید.

    مثال: align-items: center;

  • CSS Aspect Ratio

    تنظیم نسبت ابعاد المان بدون نیاز به ترفندهای قدیمی.

    مثال: aspect-ratio: 16 / 9;

  • CSS Calc()

    تابع برای محاسبات ریاضی در مقادیر CSS. ترکیب واحدهای مختلف ممکن است.

    مثال: width: calc(100% - 40px);

  • CSS Clamp()

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

    مثال: font-size: clamp(1rem, 2vw, 2rem);

  • CSS Flex Direction

    جهت محور اصلی در فلکس‌باکس: ردیف، ستون و معکوس آن‌ها.

    مثال: flex-direction: row-reverse;

  • CSS Flex Shorthand

    پراپرتی کوتاه flex برای تنظیم grow, shrink و basis به صورت یکجا.

    مثال: flex: 1 0 auto;

  • CSS Flex Wrap

    کنترل بسته‌بندی آیتم‌ها در چند خط در فلکس‌باکس.

    مثال: flex-wrap: wrap;

  • CSS Font Face

    تعریف فونت‌های سفارشی برای استفاده در سایت.

    مثال: @font-face { font-family: "MyFont"; src: url("font.woff2"); }

  • CSS Font Family

    خانواده فونت برای متن با فونت‌های پیش‌فرض و سفارشی.

    مثال: font-family: "Vazir", sans-serif;

  • CSS Font Size

    اندازه فونت با واحدهای مختلف: px, em, rem, %, vw.

    مثال: font-size: 16px;

  • CSS Gap

    فاصله بین آیتم‌ها در فلکس‌باکس و گرید.

    مثال: gap: 1rem;

  • CSS Grid Layout

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

    مثال: grid-template-areas, grid-auto-flow

  • CSS Grid Template Columns

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

    مثال: grid-template-columns: 1fr 2fr 1fr;

  • CSS Grid Template Rows

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

    مثال: grid-template-rows: auto 1fr auto;

  • CSS Justify Content

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

    مثال: justify-content: space-around;

  • CSS Line Height

    فاصله بین خطوط متن برای بهبود خوانایی.

    مثال: line-height: 1.6;

  • CSS Variables, متغیرهای CSS

    متغیرهای قابل استفاده‌مجدد در CSS با پیشوند --. به مدیریت رنگ‌ها، فونت‌ها و مقادیر دیگر کمک می‌کنند.

    مثال: --primary-color: #3498db;

  • Display Property

    پراپرتی که نوع نمایش المان را تعیین می‌کند: block, inline, inline-block, none, flex, grid و غیره.

    مثال: display: flex; display: grid;

  • Media Query

    قانون CSS برای اعمال استایل بر اساس عرض صفحه، نوع دستگاه یا جهت. پایه طراحی ریسپانسیو.

    درس مرتبط در آموزش طراحی وب ←

  • Positioning, پوزیشنینگ

    روش‌های مختلف قرارگیری المان‌ها در صفحه: static, relative, absolute, fixed, sticky. هر کدام کاربرد خاص خود را دارند.

    مثال: position: absolute; top: 0; left: 0;

  • REM Unit

    واحد نسبی به فونت‌سایز روت (html). برای مقیاس‌پذیری و دسترسی‌پذیری عالی است.

    مثال: font-size: 1.5rem; padding: 2rem;

  • Tailwind

    فریمورک CSS utility-first. با کلاس‌های آماده مثل flex، p-4، text-center بدون نوشتن CSS جدا طراحی می‌کنی.

    درس مرتبط در آموزش طراحی وب ←

  • Atomic CSS

    استایل‌دهی با کلاس‌های تک‌منظوره و کوچک.

    مثال: Tailwind, Tachyons

  • Autoprefixer

    پلاگین PostCSS برای اضافه کردن پیشوندهای مرورگر.

    مثال: -webkit-, -moz-, -ms-

  • Backdrop Filter

    فیلتر برای پس‌زمینه المان‌های شفاف. برای افکت‌های شیشه‌ای و تار.

    مثال: backdrop-filter: blur(10px);

  • BEM Methodology

    روش نام‌گذاری کلاس‌ها: Block__Element--Modifier.

    مثال: .card__title--active

  • Box Shadow

    ایجاد سایه برای المان‌ها برای ایجاد حس عمق و لایه‌بندی.

    مثال: box-shadow: 0 4px 6px rgba(0,0,0,0.1);

  • Clip Path

    بریدن المان به شکل‌های مختلف: چندضلعی، دایره، بیضی و غیره.

    مثال: clip-path: polygon(0 0, 100% 0, 100% 100%);

  • CSS Accent Color

    رنگ اصلی برای المان‌های فرم مانند چک‌باکس و رادیو.

    مثال: accent-color: #3498db;

  • CSS Accent Color

    تنظیم رنگ اصلی برای المان‌های فرم.

    مثال: accent-color: #3498db;

  • CSS Align Content

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

    مثال: align-content: space-between;

  • CSS Align Self

    ترازبندی جداگانه هر آیتم در محور متقاطع.

    مثال: align-self: flex-end;

  • CSS Architecture

    ساختار و سازماندهی کدهای CSS برای پروژه‌های بزرگ.

    مثال: BEM, SMACSS, ITCSS, OOCSS

  • CSS Cascade

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

    مثال: Importance > Specificity > Source Order

  • CSS Cascade Layers

    لایه‌بندی استایل‌ها برای مدیریت بهتر اولویت‌ها و جلوگیری از تداخل.

    مثال: @layer base, components, utilities;

  • CSS Color Functions

    توابع پیشرفته برای کار با رنگ‌ها: color-mix, color-contrast و غیره.

    مثال: color-mix(in srgb, red 50%, blue);

  • CSS Color Mix

    ترکیب دو رنگ با نسبت مشخص.

    مثال: color: color-mix(in srgb, red 30%, blue);

  • CSS Container Name

    نام‌گذاری کانتینر برای انتخاب با کوئری‌های کانتینر.

    مثال: container-name: card;

  • CSS Container Queries

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

    مثال: @container (min-width: 500px) { }

  • CSS Container Type

    تعریف نوع کانتینر برای استفاده از کوئری‌های کانتینر.

    مثال: container-type: inline-size;

  • CSS Content Visibility

    بهینه‌سازی رندر المان‌هایی که در صفحه نمایش داده نمی‌شوند.

    مثال: content-visibility: auto;

  • CSS Current Color

    کلیدواژه‌ای که به مقدار فعلی پراپرتی color اشاره می‌کند.

    مثال: border-color: currentColor;

  • CSS Custom Font Stack

    تعریف استک فونت با فونت‌های پیش‌فرض و جایگزین برای پشتیبانی بهتر.

    مثال: font-family: "IRANSans", -apple-system, sans-serif;

  • CSS Custom Properties Fallback

    مقدار پیش‌فرض برای متغیرهای CSS در صورت عدم وجود.

    مثال: color: var(--main-color, #333);

  • CSS Custom Properties Scope

    محدوده متغیرهای CSS: سراسری (در :root) یا محلی (در المان خاص).

    مثال: :root { --color: red; } .box { --color: blue; }

  • CSS Flex Basis

    اندازه پایه آیتم قبل از رشد یا کوچک شدن در فلکس‌باکس.

    مثال: flex-basis: 200px;

  • CSS Flex Flow

    پراپرتی کوتاه برای flex-direction و flex-wrap.

    مثال: flex-flow: row wrap;

  • CSS Flex Grow

    میزان رشد آیتم در فلکس‌باکس برای پر کردن فضای خالی.

    مثال: flex-grow: 1;

  • CSS Flex Shrink

    میزان کوچک شدن آیتم در فلکس‌باکس هنگام کمبود فضا.

    مثال: flex-shrink: 0;

  • CSS Font Display

    رفتار نمایش فونت‌های سفارشی هنگام بارگذاری.

    مثال: font-display: swap;

  • CSS Font Weight

    ضخامت فونت از نازک تا ضخیم.

    مثال: font-weight: 700;

  • CSS Gradients

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

    مثال: background: linear-gradient(to right, red, blue);

  • CSS Grid Area

    تخصیص آیتم به منطقه خاص در گرید یا تعریف موقعیت با اعداد.

    مثال: grid-area: header;

  • CSS Grid Column

    موقعیت و اندازه آیتم در ستون‌های گرید.

    مثال: grid-column: span 2;

  • CSS Grid Template Areas

    تعریف مناطق نام‌گذاری‌شده در گرید برای چیدمان خواناتر.

    مثال: grid-template-areas: "header header" "main sidebar";

  • CSS HSLA

    رنگ‌های HSL با کانال شفافیت برای کنترل بهتر رنگ‌ها.

    مثال: color: hsla(120, 100%, 50%, 0.3);

  • CSS Inheritance

    ارث‌بری پراپرتی‌ها از والد به فرزند (مثل color, font-family).

    مثال: color و font معمولاً ارث‌بری می‌شوند

  • CSS Justify Items

    ترازبندی آیتم‌ها در محور اصلی در گرید.

    مثال: justify-items: start;

  • CSS Justify Self

    ترازبندی جداگانه هر آیتم در محور اصلی در گرید.

    مثال: justify-self: end;

  • CSS Light-Dark

    تعریف رنگ‌های مختلف برای حالت روشن و تاریک.

    مثال: color: light-dark(black, white);

  • CSS Logical Properties

    پراپرتی‌های منطقی برای پشتیبانی از زبان‌های مختلف بدون نیاز به تغییر کد.

    مثال: margin-inline-start: 1rem;

  • CSS Max()

    تابع برای انتخاب بزرگترین مقدار از بین چند گزینه.

    مثال: width: max(300px, 50vw);

  • CSS Min()

    تابع برای انتخاب کوچکترین مقدار از بین چند گزینه.

    مثال: width: min(100%, 800px);

  • CSS Nesting

    تو در تو کردن سلکتورها در CSS بدون نیاز به پیش‌پردازنده.

    مثال: div { &.active { color: red; } }

  • CSS Nesting

    تو در تو کردن سلکتورها در CSS خالص (بدون پیش‌پردازنده).

    مثال: parent { & > child { color: red; } }

  • CSS Normalize

    نرمال‌سازی استایل‌های مرورگر به جای ریست کامل (حفظ برخی استایل‌های مفید).

    مثال: استفاده از کتابخانه Normalize.css

  • CSS Opacity

    شفافیت المان از 0 (کاملاً شفاف) تا 1 (کاملاً مات).

    مثال: opacity: 0.5;

  • CSS Order

    ترتیب نمایش آیتم‌ها در فلکس‌باکس و گرید بدون تغییر در کد HTML.

    مثال: order: 2;

  • CSS Overflow

    مدیریت محتوایی که در المان جا نمی‌شود: مخفی، اسکرول، نمایش.

    مثال: overflow: auto;

  • CSS Overflow X/Y

    کنترل جداگانه overflow در جهت افقی و عمودی.

    مثال: overflow-x: hidden; overflow-y: scroll;

  • CSS Place Content

    پراپرتی کوتاه برای align-content و justify-content در گرید.

    مثال: place-content: center;

  • CSS Place Items

    پراپرتی کوتاه برای align-items و justify-items در گرید.

    مثال: place-items: center;

  • CSS Place Self

    پراپرتی کوتاه برای align-self و justify-self برای آیتم‌های گرید.

    مثال: place-self: center;

  • CSS Postprocessors

    پس‌پردازنده‌های CSS برای بهینه‌سازی و تبدیل.

    مثال: PostCSS, Autoprefixer

  • CSS Prefers Color Scheme

    کوئری برای تشخیص حالت روشن یا تاریک سیستم کاربر.

    مثال: @media (prefers-color-scheme: dark) { }

  • CSS Prefers Reduced Motion

    کوئری برای کاربرانی که حرکت کمتر را ترجیح می‌دهند.

    مثال: @media (prefers-reduced-motion: reduce) { }

  • CSS Preprocessors

    پیش‌پردازنده‌های CSS برای ویژگی‌های اضافی.

    مثال: Sass, Less, Stylus

  • CSS Reset

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

    مثال: * { margin: 0; padding: 0; box-sizing: border-box; }

  • CSS RGBA

    رنگ‌های با کانال شفافیت (Alpha) برای ایجاد شفافیت در رنگ‌ها.

    مثال: color: rgba(255, 0, 0, 0.5);

  • CSS Scroll Behavior

    رفتار اسکرول صفحه: ناگهانی یا هموار.

    مثال: scroll-behavior: smooth;

  • CSS Specificity

    اولویت سلکتورها: اینلاین > ID > کلاس > تگ. مهم برای رفع تداخل.

    مثال: !important > inline > #id > .class > tag

  • CSS Subgrid

    قابلیت گرید فرزند برای به اشتراک گذاشتن خطوط گرید والد. برای چیدمان‌های پیچیده و دقیق.

    مثال: grid-template-columns: subgrid;

  • CSS Text Align

    ترازبندی متن در المان: چپ، راست، وسط، توجیه.

    مثال: text-align: justify;

  • CSS Text Decoration

    تزئین متن با خط زیر، خط وسط، خط بالا و رنگ.

    مثال: text-decoration: underline wavy red;

  • CSS Text Overflow

    مدیریت نمایش متن هنگامی که در المان جا نمی‌شود.

    مثال: text-overflow: ellipsis;

  • CSS View Transitions

    ایجاد انیمیشن‌های انتقال بین صفحات مختلف.

    مثال: view-transition-name: hero-image;

  • CSSNext

    پلاگین PostCSS برای استفاده از ویژگی‌های آینده CSS امروز.

    مثال: متغیرها، کاستوم مدلز

  • Custom Properties

    همان متغیرهای CSS که می‌توانند مقادیر مختلفی داشته باشند و در سراسر استایل‌شیت استفاده شوند.

    مثال: --spacing-unit: 8px;

  • EM Unit

    واحد نسبی به فونت‌سایز والد مستقیم. برای استایل‌های نسبی و تودرتو.

    مثال: margin: 1.5em; font-size: 0.9em;

  • Flexbox Gap

    پراپرتی gap در فلکس‌باکس برای ایجاد فاصله بین آیتم‌ها بدون نیاز به مارجین.

    مثال: gap: 1rem;

  • Float

    روش قدیمی برای چیدمان المان‌ها در کنار هم. امروزه بیشتر با فلکس‌باکس و گرید جایگزین شده است.

    مثال: float: left; clear: both;

  • Font Fallback

    فونت‌های جایگزین برای زمانی که فونت اصلی در دسترس نیست.

    مثال: font-family: "Custom", sans-serif;

  • Font Feature Settings

    فعال‌سازی ویژگی‌های پیشرفته فونت: ligatures, kerning و غیره.

    مثال: font-feature-settings: "liga" 1;

  • Font Smoothing

    تنظیم نحوه رندر فونت برای خوانایی بهتر.

    مثال: font-smooth, text-rendering

  • Functional CSS

    همان Atomic CSS: کلاس‌های کوچک با یک کار مشخص.

    مثال: p-4, text-center, bg-blue-500

  • Grid Auto Columns

    اندازه ستون‌های خودکار در گرید.

    مثال: grid-auto-columns: 1fr;

  • Grid Auto Flow

    کنترل جهت پر شدن آیتم‌ها در گرید.

    مثال: grid-auto-flow: dense;

  • Grid Auto Rows

    اندازه سطرهای خودکار در گرید.

    مثال: grid-auto-rows: auto;

  • Grid Column Start/End

    تعیین نقطه شروع و پایان آیتم در ستون‌های گرید.

    مثال: grid-column-start: 2; grid-column-end: 4;

  • Grid Row Start/End

    تعیین نقطه شروع و پایان آیتم در سطرهای گرید.

    مثال: grid-row-start: 1; grid-row-end: 3;

  • ITCSS

    معماری لایه‌بندی CSS برای مقیاس‌پذیری.

    مثال: Inverted Triangle CSS

  • Object Fit

    کنترل نحوه پر کردن تصویر یا ویدیو در کانتینر خود.

    مثال: object-fit: cover;

  • OOCSS

    شیوه شیءگرا برای CSS: Object-Oriented CSS.

    مثال: تست کردن کلاس‌ها

  • PostCSS

    ابزار برای تبدیل CSS با پلاگین‌ها.

    مثال: Autoprefixer, CSSNext

  • Pseudo-classes

    کلاس‌های مجازی که حالت‌های خاص المان را انتخاب می‌کنند: :hover, :active, :focus, :nth-child و غیره.

    مثال: a:hover { color: red; }

  • Pseudo-elements

    عناصر مجازی برای انتخاب بخش‌های خاصی از المان: ::before, ::after, ::first-line, ::first-letter.

    مثال: p::first-letter { font-size: 2em; }

  • Sass, SCSS

    پیش‌پردازنده CSS با متغیر، تو در تو و mixin. کد تمیزتر و قابل استفاده‌مجدد؛ خروجی نهایی CSS است.

  • Scroll Snap

    قابلیت ایجاد نقاط توقف (snap) در اسکرول برای تجربه کاربری بهتر.

    مثال: scroll-snap-type: x mandatory;

  • SMACSS

    رویکرد طبقه‌بندی استایل‌ها: Base, Layout, Module, State, Theme.

    مثال: معماری CSS

  • Sticky Header

    هدری که هنگام اسکرول در بالای صفحه باقی می‌ماند.

    مثال: position: sticky; top: 0;

  • System Font Stack

    استفاده از فونت‌های سیستمی برای سرعت و ظاهر طبیعی.

    مثال: font-family: system-ui, -apple-system, sans-serif;

  • Text Rendering

    بهینه‌سازی رندر متن: سرعت، خوانایی یا دقت.

    مثال: text-rendering: optimizeLegibility;

  • Text Shadow

    ایجاد سایه برای متن برای بهبود خوانایی یا افکت‌های گرافیکی.

    مثال: text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

  • Variable Fonts

    فونت‌های متغیر با قابلیت تنظیم وزن، عرض و دیگر ویژگی‌ها به صورت پیوسته.

    مثال: font-variation-settings: "wght" 700;

  • Viewport Units

    واحدهای نسبی به صفحه نمایش: vw, vh, vmin, vmax. برای طراحی‌های کاملاً ریسپانسیو.

    مثال: height: 100vh; width: 50vw;

  • Z-Index

    پراپرتی که ترتیب لایه‌بندی المان‌ها را در جهت عمودی (عمق) تعیین می‌کند. مقادیر بالاتر در بالای مقادیر پایین‌تر قرار می‌گیرند.

    مثال: z-index: 1000;

  • Background Clip

    کلیپ کردن پس‌زمینه به بخش‌های خاص المان.

    مثال: background-clip: text;

  • Conic Gradient

    گرادیانت مخروطی برای ایجاد افکت‌های دایره‌ای و پیشرفته.

    مثال: background: conic-gradient(red, yellow, green);

  • CSS Anchor Positioning

    پوزیشنینگ المان نسبت به المان دیگر به عنوان لنگر.

    مثال: position-anchor: --my-anchor;

  • CSS Animation Range

    تعیین محدوده اسکرول برای اجرای انیمیشن.

    مثال: animation-range: 0% 100%;

  • CSS Animation Timeline

    اتصال انیمیشن به خط زمانی اسکرول.

    مثال: animation-timeline: scroll();

  • CSS Animation Worklet

    کنترل دقیق انیمیشن‌ها با جاوااسکریپت در هر فریم.

    مثال: CSS.animationWorklet.addModule("animator.js")

  • CSS Appearance

    حذف یا حفظ استایل پیش‌فرض مرورگر برای المان‌های فرم.

    مثال: appearance: none;

  • CSS Background Blend Mode

    حالت ترکیب لایه‌های پس‌زمینه با هم.

    مثال: background-blend-mode: overlay;

  • CSS Caret Color

    رنگ مکان‌نمای متن در فیلدهای ورودی.

    مثال: caret-color: #e74c3c;

  • CSS Ch Unit

    واحد نسبی به عرض کاراکتر "0" (صفر).

    مثال: width: 40ch;

  • CSS Color Contrast

    انتخاب رنگی که بیشترین کنتراست را با پس‌زمینه دارد.

    مثال: color: color-contrast(white vs black, blue);

  • CSS Color Spaces

    فضاهای رنگی پیشرفته برای دقت بیشتر در رنگ‌ها: LAB, LCH, OKLAB و غیره.

    مثال: color: lch(50% 50 180);

  • CSS Contain Intrinsic Size

    تعیین اندازه ذاتی برای المان‌های با content-visibility.

    مثال: contain-intrinsic-size: 300px 200px;

  • CSS Counter Increment

    افزایش مقدار شمارنده برای المان.

    مثال: counter-increment: section;

  • CSS Counter Reset

    ریست کردن مقدار شمارنده برای المان.

    مثال: counter-reset: section;

  • CSS Counter Set

    تنظیم مقدار شمارنده برای المان.

    مثال: counter-set: section 5;

  • CSS Counter Style

    تعریف سبک‌های شمارش سفارشی برای لیست‌ها.

    مثال: @counter-style persian { system: numeric; symbols: "۰" "۱" "۲"; }

  • CSS Cursor

    تغییر شکل مکان‌نما بر اساس حالت المان.

    مثال: cursor: pointer; cursor: grab;

  • CSS Custom Scrollbar

    شخصی‌سازی ظاهر اسکرول‌بار با ویژگی‌های خاص مرورگرها.

    مثال: ::-webkit-scrollbar { width: 10px; }

  • CSS Ex Unit

    واحد نسبی به ارتفاع کاراکتر "x" (کوچک).

    مثال: height: 10ex;

  • CSS Fit Content

    کلیدواژه برای تناسب اندازه با محتوا در محدوده مشخص.

    مثال: width: fit-content(300px);

  • CSS Font Style

    سبک فونت: نرمال، ایتالیک، ابلیک.

    مثال: font-style: italic;

  • CSS Forced Colors

    استایل‌دهی برای حالت رنگ‌های اجباری (دسترسی‌پذیری).

    مثال: @media (forced-colors: active) { }

  • CSS Houdini

    APIهای جدید برای دسترسی به موتور رندر CSS و ساخت ویژگی‌های سفارشی.

    مثال: CSS.paintWorklet, CSS.layoutWorklet

  • CSS Hover

    کوئری برای تشخیص دستگاه‌هایی که قابلیت هاور دارند.

    مثال: @media (hover: hover) { }

  • CSS HWB

    مدل رنگی Hue-Whiteness-Blackness برای کار ساده‌تر با رنگ‌ها.

    مثال: color: hwb(120 20% 40%);

  • CSS Hyphens

    تنظیم خط‌شکنی خودکار برای متن‌های طولانی.

    مثال: hyphens: auto;

  • CSS Inherit

    ارث‌بری مقدار پراپرتی از والد مستقیم.

    مثال: color: inherit;

  • CSS Initial

    بازگرداندن پراپرتی به مقدار اولیه (مقدار پیش‌فرض CSS).

    مثال: color: initial;

  • CSS Inset

    پراپرتی کوتاه برای تنظیم top, right, bottom, left به صورت یکجا.

    مثال: inset: 0;

  • CSS Isolation

    ایجاد کانتکست استکینگ جدید برای المان.

    مثال: isolation: isolate;

  • CSS Lab

    فضای رنگی Lab برای دقت بیشتر در رنگ‌ها.

    مثال: color: lab(50% 40 -20);

  • CSS Layout API

    API برای ایجاد الگوریتم‌های چیدمان سفارشی در CSS.

    مثال: display: layout(myLayout);

  • CSS LCH

    فضای رنگی LCH (Lightness-Chroma-Hue) برای انتقال‌های بهتر.

    مثال: color: lch(50% 50 180);

  • CSS Letter Spacing

    فاصله بین حروف متن برای بهبود خوانایی یا افکت‌های گرافیکی.

    مثال: letter-spacing: 1px;

  • CSS Masks

    ماسک‌کردن المان‌ها با شکل‌ها یا تصاویر برای ایجاد افکت‌های خاص.

    مثال: mask-image: linear-gradient(black 70%, transparent 100%);

  • CSS Max Content

    کلیدواژه برای استفاده از حداکثر اندازه محتوا.

    مثال: width: max-content;

  • CSS Min Content

    کلیدواژه برای استفاده از حداقل اندازه محتوا.

    مثال: width: min-content;

  • CSS Mix Blend Mode

    حالت ترکیب المان با پس‌زمینه والد.

    مثال: mix-blend-mode: multiply;

  • CSS Offset Distance

    فاصله المان از ابتدای مسیر در offset-path.

    مثال: offset-distance: 50%;

  • CSS Offset Path

    تعریف مسیر حرکت المان برای انیمیشن.

    مثال: offset-path: path("M 0 0 L 100 100");

  • CSS Offset Rotate

    چرخش المان در امتداد مسیر offset-path.

    مثال: offset-rotate: auto;

  • CSS OKLCH

    فضای رنگی پیشرفته برای دقت بیشتر و انتقال‌های بهتر.

    مثال: color: oklch(60% 0.2 180);

  • CSS Paint API

    API برای ترسیم گرافیک‌های سفارشی در CSS با جاوااسکریپت.

    مثال: background-image: paint(myPattern);

  • CSS Pointer

    کوئری برای تشخیص دقت اشاره‌گر (دقیق، نامشخص، هیچ).

    مثال: @media (pointer: fine) { }

  • CSS Pointer Events

    کنترل واکنش المان به رویدادهای ماوس.

    مثال: pointer-events: none;

  • CSS Prefers Contrast

    کوئری برای ترجیح کاربر به کنتراست بالا یا پایین.

    مثال: @media (prefers-contrast: high) { }

  • CSS Prefers Reduced Data

    کوئری برای کاربرانی که داده کمتر را ترجیح می‌دهند.

    مثال: @media (prefers-reduced-data: reduce) { }

  • CSS Properties and Values API

    تعریف متغیرهای CSS با نوع داده و مقدار پیش‌فرض.

    مثال: CSS.registerProperty({ name: "--my-var", syntax: "<color>" })

  • CSS Relative Color

    تعریف رنگ نسبت به رنگ دیگر با تغییرات کوچک.

    مثال: color: rgb(from var(--base) r g b / 0.8);

  • CSS Resize

    امکان تغییر اندازه المان توسط کاربر.

    مثال: resize: both;

  • CSS Revert

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

    مثال: color: revert;

  • CSS Scope

    محدود کردن استایل به بخش خاصی از DOM.

    مثال: @scope (.card) { .title { color: red; } }

  • CSS Scroll Margin

    فاصله اضافی هنگام اسکرول به المان با لنک.

    مثال: scroll-margin-top: 2rem;

  • CSS Scroll Padding

    پدینگ داخلی برای کانتینر اسکرول.

    مثال: scroll-padding: 1rem;

  • CSS Scroll Timeline

    ایجاد خط زمانی مبتنی بر اسکرول برای انیمیشن.

    مثال: @scroll-timeline { source: selector(#scroll); }

  • CSS Shapes

    قابلیت ایجاد شکل‌های غیر مستطیلی برای المان‌ها با استفاده از ویژگی‌های خاص.

    مثال: shape-outside: circle();

  • CSS Style Queries

    کوئری‌های کانتینر بر اساس استایل‌های خاص.

    مثال: @container style(--has-image: true) { }

  • CSS System Colors

    رنگ‌های سیستمی که با تنظیمات سیستم عامل کاربر مطابقت دارند.

    مثال: color: ButtonText;

  • CSS System Font

    استفاده از فونت‌های سیستمی برای عملکرد بهتر و ظاهر طبیعی‌تر.

    مثال: font: system-ui;

  • CSS Text Transform

    تغییر حالت حروف متن: بزرگ، کوچک، حرف اول بزرگ.

    مثال: text-transform: capitalize;

  • CSS Top Layer

    قرار دادن المان در لایه بالایی صفحه (مثل مودال‌ها).

    مثال: top-layer: always;

  • CSS Touch Action

    کنترل رفتار لمسی المان‌ها برای دستگاه‌های تاچ.

    مثال: touch-action: pan-y;

  • CSS Typed OM

    رابطه‌ی شیءگرا برای کار با استایل‌ها در جاوااسکریپت.

    مثال: element.attributeStyleMap.set("width", CSS.px(100))

  • CSS Unset

    بازگرداندن پراپرتی به حالت ارث‌بری یا اولیه.

    مثال: color: unset;

  • CSS User Select

    کنترل امکان انتخاب متن توسط کاربر.

    مثال: user-select: none;

  • CSS Viewport Units Dynamic

    واحدهای پویا که با تغییر نوار وضعیت تنظیم می‌شوند.

    مثال: height: 100dvh;

  • CSS Viewport Units Large

    واحدهای بزرگ‌نمایی برای دستگاه‌های با نوار وضعیت.

    مثال: height: 100lvh;

  • CSS Viewport Units Small

    واحدهای کوچک‌نمایی برای دستگاه‌های با نوار وضعیت.

    مثال: height: 100svh;

  • CSS Visibility

    نمایش یا مخفی کردن المان با حفظ فضای آن در چیدمان.

    مثال: visibility: hidden;

  • CSS White Space

    مدیریت فاصله‌های سفید و خط‌شکنی متن.

    مثال: white-space: nowrap;

  • CSS Word Break

    کنترل نحوه شکستن کلمات در انتهای خط.

    مثال: word-break: break-all;

  • CSS Word Spacing

    فاصله بین کلمات متن.

    مثال: word-spacing: 2px;

  • CSS Writing Modes

    حالت‌های نوشتاری مختلف برای زبان‌هایی با جهت‌های متفاوت (راست به چپ، عمودی).

    مثال: writing-mode: vertical-rl;

  • Mix Blend Mode

    حالت ترکیب المان با پس‌زمینه برای افکت‌های گرافیکی خاص.

    مثال: mix-blend-mode: screen;

  • Object Position

    کنترل موقعیت تصویر یا ویدیو در کانتینر هنگام استفاده از object-fit.

    مثال: object-position: center top;

  • Overscroll Behavior

    کنترل رفتار اسکرول هنگام رسیدن به انتهای المان برای جلوگیری از اسکرول صفحه والد.

    مثال: overscroll-behavior: contain;

  • Text Stroke

    ایجاد حاشیه دور متن برای افکت‌های گرافیکی.

    مثال: -webkit-text-stroke: 2px black;

  • متدولوژی BEM

    قرارداد نام‌گذاری کلاس: Block__Element--Modifier. برای جلوگیری از تداخل استایل و خوانایی بهتر.

  • Grid Container

    عنصری که display: grid دارد و شبکه‌ای از سطرها و ستون‌ها برای چیدمان فرزندان ایجاد می‌کند.

    مثال: تعریف grid-template-columns و grid-template-rows

  • Grid CSS

    سیستم طرح‌بندی دو بعدی که کنترل پیشرفته‌ای روی سطرها و ستون‌ها ارائه می‌دهد.

    مثال: ایجاد طرح‌بندی‌های پیچیده با سطر و ستون تعریف شده.

  • Grid Item

    فرزندان مستقیم یک grid container که در سلول‌های تعریف شده شبکه قرار می‌گیرند.

    مثال: grid-column, grid-row برای قرارگیری در موقعیت‌های خاص

  • CSS Animation

    امکان ایجاد انیمیشن‌های ساده تا پیچیده بدون نیاز به جاوااسکریپت با استفاده از keyframes.

    مثال: @keyframes slide { from { transform: translateX(0); } to { transform: translateX(100px); } }

  • CSS Specificity

    قاعده‌ای که تعیین می‌کند کدام قانون CSS هنگام تعارض برنده می‌شود و اعمال می‌گردد.

    مثال: محاسبه امتیاز: شناسه (100)، کلاس (10)، تگ (1)

  • CSS Transition

    تغییر تدریجی مقدار یک خاصیت CSS در یک بازه زمانی مشخص.

    مثال: transition: all 0.3s ease;

  • CSS Variables

    متغیرهای CSS (Custom Properties) که امکان ذخیره مقادیر برای استفاده مجدد در سراسر استایل‌ها را فراهم می‌کنند.

    مثال: تعریف: --primary-color: #007bff; استفاده: color: var(--primary-color);

  • Flex Container

    عنصری که display: flex دارد و به عنوان کانتینر برای آیتم‌های flex عمل می‌کند.

    مثال: کنترل جهت، ترازبندی و توزیع فضای آیتم‌های فرزند.

  • Flex Item

    فرزندان مستقیم یک flex container که ویژگی‌های flex روی آنها اعمال می‌شود.

    مثال: flex-grow, flex-shrink, flex-basis

  • Flexbox

    یک مدل طرح‌بندی یک‌بعدی در CSS برای چیدمان موثر عناصر در یک صفحه.

    مثال: کنترل جهت، ترتیب، اندازه و فاصله عناصر در یک راستا.

  • Media Query

    تکنیکی در CSS که اجازه اعمال استایل‌های مختلف بر اساس ویژگی‌های دستگاه (مانند عرض صفحه) را می‌دهد.

    مثال: @media (max-width: 768px) { ... }

  • Position Property

    خاصیتی که روش قرارگیری یک عنصر در صفحه را مشخص می‌کند.

    مثال: مقادیر: static, relative, absolute, fixed, sticky

  • Pseudo-element

    عنصری مجازی که به شما امکان استایل‌دهی به بخش‌های خاصی از محتوای یک عنصر را می‌دهد.

    مثال: ::before, ::after, ::first-letter, ::selection

  • Transform Property

    مجموعه‌ای از توابع CSS برای تغییر شکل، اندازه و موقعیت عناصر.

    مثال: transform: rotate(45deg) scale(1.2) translateX(10px);

  • z-index

    خاصیتی در CSS که ترتیب روی هم قرارگیری عناصر موقعیت‌دار (positioned) را کنترل می‌کند.

    مثال: عنصر با z-index بالاتر روی عناصر با z-index پایین‌تر نمایش داده می‌شود.

  • Box Model

    مفهوم پایه CSS که هر عنصر را به عنوان یک جعبه شامل margin، border، padding و content توصیف می‌کند.

    مثال: width و height فقط content را شامل می‌شوند مگر از box-sizing: border-box استفاده شود.

  • CSS Reset

    مجموعه‌ای از قوانین CSS برای حذف استایل‌های پیش‌فرض مرورگرها و ایجاد پایه یکسان.

    مثال: نرمالایز کردن margin، padding، font-size و غیره در همه مرورگرها

  • CSS Selector

    الگویی برای انتخاب عناصر HTML که می‌خواهید استایل‌دهی شوند.

    مثال: نوع‌های مختلف: کلاس (.), شناسه (#), تگ (div), فرزند (>)

  • Normalize.css

    یک فایل CSS جایگزین برای CSS Reset که به جای پاک کردن کامل، استایل‌های پیش‌فرض را در مرورگرهای مختلف نرمالایز می‌کند.

    مثال: ایجاد سازگاری بیشتر بین مرورگرها بدون از دست دادن استایل‌های مفید

  • Pseudo-class

    کلاسی که حالت خاصی از یک عنصر را انتخاب می‌کند، نه خود عنصر را.

    مثال: :hover, :focus, :nth-child(), :first-child

GraphQL (2)

  • Apollo Client

    کتابخانه کلاینت GraphQL برای مدیریت داده و کش.

    مثال: React, Vue, Angular

  • Relay

    کتابخانه کلاینت GraphQL از فیسبوک برای React.

    مثال: Type-safe, Optimistic Updates

HTML (39)

  • Viewport Meta

    تگ متا برای کنترل نمایش صفحه در دستگاه‌های موبایل.

    مثال: <meta name="viewport" content="width=device-width, initial-scale=1">

  • HTML Form

    فرم برای جمع‌آوری داده از کاربر. شامل فیلدهای مختلفی مانند input, select, textarea.

    مثال: <form action="/submit" method="POST">

  • Input Types

    انواع مختلف فیلد ورودی: text, email, password, number, date, checkbox, radio و غیره.

    مثال: <input type="email" required>

  • Meta Tags

    تگ‌های متا برای اطلاعات صفحه: عنوان، توضیحات، کلمات کلیدی، کدگذاری.

    مثال: <meta charset="UTF-8">

  • Semantic Elements

    تگ‌های معنایی مانند article, section, nav, header, footer برای ساختار بهتر.

    مثال: <article><h2>عنوان</h2><p>محتوا</p></article>

  • Data Attributes

    ویژگی‌های سفارشی با پیشوند data- برای ذخیره اطلاعات اضافی در المان‌ها.

    مثال: <div data-user-id="123">

  • Favicon

    آیکون کوچک سایت که در تب مرورگر نمایش داده می‌شود.

    مثال: <link rel="icon" href="/favicon.ico">

  • Form Validation

    اعتبارسنجی فرم در مرورگر با ویژگی‌هایی مانند required, pattern, min, max.

    مثال: <input type="number" min="1" max="100">

  • Link Rel

    ویژگی rel در تگ link برای مشخص کردن رابطه منبع.

    مثال: stylesheet, preload, prefetch, canonical

  • Picture Element

    تگ برای ارائه تصاویر مختلف بر اساس شرایط (فرمت، اندازه).

    مثال: <picture><source type="image/webp"><img src="fallback.jpg"></picture>

  • Resource Hints

    تگ‌های کمکی برای بهینه‌سازی بارگذاری منابع.

    مثال: dns-prefetch, preconnect, prefetch, preload

  • Sizes Attribute

    ویژگی برای مشخص کردن اندازه نمایش تصویر در شرایط مختلف.

    مثال: sizes="(max-width: 600px) 100vw, 50vw"

  • Srcset

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

    مثال: srcset="small.jpg 480w, large.jpg 800w"

  • Canvas

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

    مثال: رسم اشکال، متن، تصاویر و انیمیشن‌های پیچیده

  • Drag and Drop API

    APIهای HTML5 که امکان کشیدن و رها کردن المان‌ها را فراهم می‌کنند.

    مثال: جابه‌جایی فایل‌ها، مرتب‌سازی آیتم‌های لیست

  • IndexedDB

    یک پایگاه داده شیءگرا سطح پایین در مرورگر برای ذخیره حجم زیاد داده‌های ساخت یافته.

    مثال: ذخیره آفلاین داده‌های برنامه‌های پیچیده وب

  • Intersection Observer API

    APIای که تغییرات در قرارگیری یک المان نسبت به viewport یا المان والد را تشخیص می‌دهد.

    مثال: لazy loading تصاویر، انیمیشن‌های هنگام اسکرول، پیگیری نمایش تبلیغات

  • Push Notifications

    قابلیت دریافت نوتیفیکیشن از سرور حتی زمانی که برنامه وب باز نیست.

    مثال: استفاده از Service Worker و Notification API

  • Service Worker

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

    مثال: ایجاد PWA، کنترل درخواست‌های شبکه و پاسخ‌های کش شده

  • Shadow DOM

    قابلیتی که اجازه می‌دهد DOM و استایل‌های یک المان از بقیه صفحه جدا و کپسوله شود.

    مثال: ایجاد کامپوننت‌های خودکفا با استایل‌های محافظت شده

  • SVG Animation

    ایجاد انیمیشن برای گرافیک‌های SVG با استفاده از CSS یا جاوااسکریپت.

    مثال: انیمیشن مسیر، تغییر رنگ، transform عناصر SVG

  • Web Audio API

    API قدرتمند برای پردازش و سنتز صدا در برنامه‌های وب.

    مثال: ایجاد ویرایشگر صوتی، بازی‌ها با صداهای پیچیده، تجسم موسیقی

  • Web Components

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

    مثال: Custom Elements، Shadow DOM، HTML Templates

  • WebRTC

    فناوری ارتباط بلادرنگ (Real-Time Communication) برای انتقال صوت، تصویر و داده بین مرورگرها بدون نیاز به پلاگین.

    مثال: برنامه‌های ویدیو کنفرانس، چت ویدئویی، اشتراک‌گذاری فایل

  • ARIA

    مجموعه‌ای از attributes برای بهبود دسترسی محتوای وب برای افراد دارای معلولیت، به‌ویژه در پویانمایی‌ها.

    مثال: aria-label, aria-hidden, role

  • Async Attribute

    ویژگی async برای تگ <script> که اسکریپت را به صورت ناهمزمان بارگیری و اجرا می‌کند بدون مسدود کردن تجزیه HTML.

    مثال: <script src="script.js" async></script>

  • Content Editable

    ویژگی HTML که محتوای یک المنت را قابل ویرایش مستقیم توسط کاربر می‌کند.

    مثال: <div contenteditable="true">متن قابل ویرایش</div>

  • Defer Attribute

    ویژگی defer برای تگ <script> که اجرای اسکریپت را تا پس از تجزیه کامل HTML به تعویق می‌اندازد.

    مثال: <script src="script.js" defer></script>

  • Fetch API

    رابط مدرن جاوااسکریپت برای درخواست منابع شبکه (مانند درخواست‌های AJAX) که جایگزین XMLHttpRequest شده است.

    مثال: fetch(url).then(response => response.json())

  • Geolocation API

    APIای که موقعیت جغرافیایی کاربر را در صورت اجازه او ارائه می‌دهد.

    مثال: نمایش مکان کاربر بر روی نقشه، پیشنهاد مکان‌های نزدیک

  • Template Element

    المنت HTML5 برای تعریف قطعات کد HTML که در زمان اجرا با جاوااسکریپت فعال و تکثیر می‌شوند.

    مثال: <template><div>...</div></template>

  • Viewport

    تگ متایی که کنترل layout را در دستگاه‌های موبایل به عهده می‌گیرد.

    مثال: <meta name="viewport" content="width=device-width, initial-scale=1">

  • Web App Manifest

    فایل JSON که اطلاعاتی درباره برنامه وب پیشرونده (PWA) ارائه می‌دهد تا مانند اپلیکیشن‌های native نصب شود.

    مثال: تعیین نام، آیکون‌ها، رنگ تم و صفحه آغازین

  • Web Storage API

    APIهایی شامل localStorage و sessionStorage برای ذخیره‌سازی داده در مرورگر کاربر.

    مثال: ذخیره ترجیحات کاربر، داده‌های موقت برنامه

  • Data Attributes

    ویژگی‌های سفارشی در HTML که با data- شروع می‌شوند و برای ذخیره اطلاعات اضافی در عناصر استفاده می‌شوند.

    مثال: <div data-id="123" data-user="john"></div>

  • Favicon

    آیکون کوچکی که در تب مرورگر کنار عنوان سایت نمایش داده می‌شود.

    مثال: <link rel="icon" href="favicon.ico">

  • HTML5

    آخرین نسخه اصلی زبان HTML که عناصر معنایی جدید و APIهای قدرتمندی اضافه کرده است.

    مثال: <video>, <audio>, <canvas>, <section>

  • Meta Tags

    تگ‌های HTML در بخش head که اطلاعاتی درباره صفحه به موتورهای جستجو و مرورگرها می‌دهند.

    مثال: <meta name="description" content="...">

  • Semantic HTML

    استفاده از تگ‌های HTML که معنی محتوای درون خود را توصیف می‌کنند.

    مثال: <article>, <header>, <nav>, <footer>

HTTP (13)

  • Cache-Control

    هدر HTTP برای کنترل کش کردن منابع.

    مثال: max-age=3600, immutable

  • ETag

    هدر HTTP برای اعتبارسنجی کش (تشخیص تغییر منبع).

    مثال: ETag: "33a64df5"

  • If-Modified-Since

    هدر HTTP برای درخواست منبع فقط اگر تغییر کرده باشد.

    مثال: درخواست شرطی

  • If-None-Match

    هدر HTTP برای درخواست منبع فقط اگر ETag متفاوت باشد.

    مثال: درخواست شرطی

  • Immutable

    Directive در Cache-Control برای منابع که هرگز تغییر نمی‌کنند.

    مثال: Cache-Control: max-age=31536000, immutable

  • Last-Modified

    هدر HTTP برای نشان دادن زمان آخرین تغییر منبع.

    مثال: Last-Modified: Wed, 21 Oct 2015 07:28:00 GMT

  • Must-Revalidate

    Directive برای اجبار به به‌روزرسانی کش منقضی‌شده.

    مثال: Cache-Control: must-revalidate

  • No-Cache

    Directive برای اجبار به اعتبارسنجی قبل از استفاده از کش.

    مثال: Cache-Control: no-cache

  • No-Store

    Directive برای جلوگیری کامل از کش کردن.

    مثال: اطلاعات حساس

  • Private vs Public Cache

    تفاوت: Private فقط برای یک کاربر، Public برای همه (مثل CDN).

    مثال: Cache-Control: private, public

  • Stale-If-Error

    Directive برای استفاده از کش قدیمی در صورت خطا در به‌روزرسانی.

    مثال: Cache-Control: max-age=60, stale-if-error=86400

  • Stale-While-Revalidate

    Directive برای استفاده از کش قدیمی در حالی که در پس‌زمینه به‌روزرسانی می‌شود.

    مثال: Cache-Control: max-age=60, stale-while-revalidate=3600

  • Vary Header

    هدر HTTP برای مشخص کردن عوامل مؤثر در کش.

    مثال: Vary: Accept-Encoding

JavaScript (55)

  • Angular Components

    بلوک‌های سازنده Angular که شامل template، کلاس component و metadata هستند.

    مثال: @Component decorator و selector

  • Angular Modules

    کانتینر‌هایی برای گروه‌بندی کامپوننت‌ها، سرویس‌ها و دیگر قابلیت‌های مرتبط.

    مثال: @NgModule decorator

  • Angular Services

    کلاس‌هایی که منطق کسب‌وکار و داده‌ها را کپسوله می‌کنند و در کامپوننت‌ها تزریق می‌شوند.

    مثال: @Injectable decorator و Dependency Injection

  • Async/Await

    سینتکسی برای کار با Promises به صورت همزمان‌گونه و خوانا.

    مثال: async function getData() { const data = await fetch(url); }

  • bind/call/apply

    متدهای توابع برای کنترل مقدار this و ارسال آرگومان‌ها.

    مثال: func.call(thisArg, arg1, arg2); func.bind(thisArg);

  • Closures

    قابلیت توابع برای دسترسی و حفظ دسترسی به متغیرها از scope خارجی حتی پس از پایان اجرای آن scope.

    مثال: تابع داخلی که به متغیرهای تابع بیرونی دسترسی دارد.

  • Context API

    قابلیت React برای انتقال داده بین کامپوننت‌ها بدون نیاز به props drilling.

    مثال: createContext، Provider، useContext

  • Currying

    تکنیک تبدیل یک تابع با چندین آرگومان به دنباله‌ای از توابع با یک آرگومان.

    مثال: const add = a => b => a + b;

  • Custom Elements

    امکان تعریف المان‌های HTML جدید با رفتار سفارشی.

    مثال: class MyElement extends HTMLElement { ... }

  • Debouncing

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

    مثال: جستجوی لحظه‌ای (real-time search) که در هر تایپینگ درخواست ارسال نکند

  • Hooks (React)

    توابعی که به کامپوننت‌های تابعی React امکان استفاده از state و lifecycle features را می‌دهند.

    مثال: useState، useEffect، useContext

  • IndexedDB

    پایگاه داده NoSQL داخلی مرورگر برای ذخیره حجم زیاد داده‌های ساخت‌یافته.

    مثال: ذخیره آفلاین داده‌های برنامه‌های پیچیده

  • Prototypal Inheritance

    مدل وراثت در جاوااسکریپت که بر اساس prototypeها کار می‌کند نه کلاس‌ها.

    مثال: Object.create() برای ایجاد اشیاء با prototype مشخص

  • PWA (Progressive Web App)

    برنامه‌های وب با قابلیت‌های native-like مانند نصب، آفلاین و push notification.

    مثال: استفاده از Service Workers، Web App Manifest

  • Redux

    کتابخانه مدیریت state پیش‌بین‌پذیر برای برنامه‌های جاوااسکریپت (معمولاً با React).

    مثال: Store، Actions، Reducers، Dispatch

  • Service Workers

    اسکریپت‌های پس‌زمینه که امکان کار آفلاین، push notification و caching را فراهم می‌کنند.

    مثال: ثبت service worker و مدیریت درخواست‌های شبکه

  • Shadow DOM

    قابلیتی که DOM و استایل یک کامپوننت را از بقیه صفحه جدا و ایزوله می‌کند.

    مثال: ایجاد کامپوننت خودکفا با استایل‌های محافظت شده

  • Throttling

    تکنیک محدود کردن تعداد دفعات اجرای تابع در یک بازه زمانی مشخص.

    مثال: اسکرول کردن که هر ۱۰۰ میلی‌ثانیه فقط یک بار هندلر اجرا شود

  • useEffect

    Hook برای اجرای side effects در کامپوننت‌های تابعی React (مانند fetch data).

    مثال: useEffect(() => { fetchData(); }, []);

  • Virtual DOM

    نمایش مجازی و سبک‌وزن DOM واقعی که توسط کتابخانه‌هایی مانند React استفاده می‌شود.

    مثال: مقایسه Virtual DOM قدیم و جدید و اعمال حداقل تغییرات به DOM واقعی

  • Vuex

    کتابخانه مدیریت state برای برنامه‌های Vue.js (مشابه Redux برای React).

    مثال: State، Getters، Mutations، Actions

  • Web Components

    مجموعه استانداردهای وب برای ایجاد کامپوننت‌های قابل استفاده مجدد و کپسوله شده.

    مثال: Custom Elements، Shadow DOM، HTML Templates

  • WebSockets

    پروتکلی برای ارتباط دوطرفه و بلادرنگ بین کلاینت و سرور.

    مثال: چت آنلاین، بازی‌های چندنفره، نمایش آپدیت‌های زنده

  • Arrow Functions

    سینتکس جدید و کوتاه‌تر برای تعریف توابع در ES6 که this را از context والد به ارث می‌برد.

    مثال: const add = (a, b) => a + b;

  • Class Syntax

    سینتکس مبتنی بر کلاس در ES6 برای ایجاد اشیاء و مدیریت وراثت، که syntactic sugar برای prototypeها است.

    مثال: class Person { constructor(name) { this.name = name; } }

  • Components (React)

    بلوک‌های سازنده UI در React که قابل استفاده مجدد و مدیریت state هستند.

    مثال: کلاس یا تابع کامپوننت که props می‌گیرد و JSX برمی‌گرداند

  • Destructuring

    سینتکس ES6 برای استخراج مقادیر از آرایه‌ها یا خصوصیات از اشیاء و اختصاص آنها به متغیرهای جداگانه.

    مثال: const { name, age } = person; const [first, second] = array;

  • ES6+ Features

    مجموعه‌ای از ویژگی‌های جدید جاوااسکریپت معرفی شده در ECMAScript 2015 و نسخه‌های بعدی.

    مثال: let/const، Arrow Functions، Template Literals، Destructuring

  • Event Bubbling

    مکانیزمی که در آن یک رویداد از المنت هدف به سمت بالا در سلسله مراتب DOM منتشر می‌شود.

    مثال: کلیک روی دکمه داخل div، رویداد به div و سپس به body منتشر می‌شود.

  • Event Capturing

    مرحله قبل از bubbling که رویداد از ریشه DOM به سمت المنت هدف حرکت می‌کند.

    مثال: addEventListener با پارامتر سوم true برای فعال‌سازی capturing

  • Event Delegation

    تکنیکی که به جای افزودن listener به تک‌تک المنت‌ها، یک listener به والد آنها اضافه می‌شود.

    مثال: مدیریت کلیک روی آیتم‌های داینامیک لیست با یک listener روی ul

  • Fetch API

    API مدرن جاوااسکریپت برای درخواست‌های شبکه که جایگزین XMLHttpRequest شده است.

    مثال: fetch(url).then(response => response.json())

  • Higher-Order Functions

    توابعی که یا تابعی را به عنوان آرگومان می‌گیرند یا تابعی را برمی‌گردانند.

    مثال: map، filter، reduce

  • Hoisting

    رفتار پیش‌فرض جاوااسکریپت که باعث می‌شود اعلان متغیرها و توابع به بالای scope خود منتقل شوند.

    مثال: استفاده از متغیر قبل از تعریف با var ممکن است undefined برگرداند.

  • Immutability

    اصل عدم تغییرپذیری داده‌ها پس از ایجاد، که هسته مفاهیم برنامه‌نویسی تابعی است.

    مثال: ایجاد شیء یا آرایه جدید به جای تغییر مستقیم داده موجود

  • JSX

    سینتکس شبیه HTML که در React برای توصیف UI استفاده می‌شود.

    مثال: const element = <h1>Hello, world!</h1>;

  • Modules (ES6)

    سیستم ماژول‌بندی استاندارد در ES6 برای ایمپورت و اکسپورت کد بین فایل‌های مختلف.

    مثال: import { Component } from "module"; export default myFunction;

  • Promises

    اشیاءای که نتیجه نهایی (موفق یا شکست) یک عملیات ناهمزمان را نمایندگی می‌کنند.

    مثال: const promise = new Promise((resolve, reject) => {...});

  • Props

    داده‌هایی که از کامپوننت والد به کامپوننت فرزند در React منتقل می‌شوند.

    مثال: <ChildComponent name="John" age={30} />

  • Pure Functions

    توابعی که برای ورودی‌های یکسان همیشه خروجی یکسان می‌دهند و عوارض جانبی ندارند.

    مثال: const add = (a, b) => a + b;

  • React Router

    کتابخانه استاندارد برای routing در برنامه‌های React (تک صفحه‌ای).

    مثال: <Route path="/about" component={About} />

  • Rest Parameters

    سینتکس ... در پارامترهای تابع که آرگومان‌های باقی‌مانده را در یک آرایه جمع می‌کند.

    مثال: function sum(...numbers) { return numbers.reduce((a,b) => a+b); }

  • Scope (Global/Local)

    محدوده دسترسی به متغیرها در جاوااسکریپت که شامل scope سراسری، تابعی و بلوکی است.

    مثال: let و const دارای scope بلوکی هستند، در حالی که var scope تابعی دارد.

  • Session Management

    مدیریت وضعیت کاربر (لاگین، سبد خرید) در طول بازدید از وب‌سایت.

    مثال: استفاده از sessionStorage، cookies یا توکن‌ها

  • Spread Operator

    عملگر ... که عناصر یک آرایه یا خصوصیات یک شیء را در موقعیت‌های جدید گسترش می‌دهد.

    مثال: const newArr = [...oldArr, newItem];

  • State

    داده‌های داخلی و قابل تغییر یک کامپوننت در React که هنگام تغییر، رندر مجدد را فعال می‌کند.

    مثال: useState hook در کامپوننت‌های تابعی

  • this Keyword

    کلمه کلیدی که به شیء کنونی اشاره می‌کند و مقدار آن بر اساس نحوه فراخوانی تابع تعیین می‌شود.

    مثال: در یک متد شیء، this به خود شیء اشاره می‌کند.

  • useState

    Hook پایه React برای افزودن state به کامپوننت‌های تابعی.

    مثال: const [count, setCount] = useState(0);

  • Vue Components

    بلوک‌های سازنده در Vue.js که HTML، CSS و JavaScript را کپسوله می‌کنند.

    مثال: Single File Components با پسوند .vue

  • Vue Router

    رسمی‌ترین کتابخانه routing برای برنامه‌های Vue.js.

    مثال: تعریف routes و <router-view>

  • Vue.js Directives

    ویژگی‌های ویژه در Vue.js که با v- شروع می‌شوند و رفتار المنت‌ها را تغییر می‌دهند.

    مثال: v-if، v-for، v-bind، v-on

  • Local Storage

    ذخیره‌سازی داده‌های کلید-مقداری در مرورگر کاربر بدون تاریخ انقضا.

    مثال: localStorage.setItem("key", value);

  • Session Storage

    ذخیره‌سازی مشابه localStorage اما فقط برای مدت یک session (تا بسته شدن تب).

    مثال: sessionStorage.getItem("key");

  • Template Literals

    رشته‌هایی با قابلیت‌های پیشرفته در ES6 که امکان interpolation متغیرها و نوشتن چند خطی را فراهم می‌کنند.

    مثال: const text = `Hello ${name}!`;

  • try...catch

    ساختار کنترل خطا در جاوااسکریپت برای مدیریت استثناها.

    مثال: try { riskyOperation(); } catch(error) { console.error(error); }

PWA (1)

  • Web App Manifest

    فایل JSON برای تبدیل سایت به اپلیکیشن وب پیشرفته (PWA).

    مثال: <link rel="manifest" href="/manifest.json">

React (2)

  • React Lazy

    بارگذاری تنبل کامپوننت‌های React.

    مثال: const LazyComp = React.lazy(() => import("./Comp"))

  • Suspense

    کامپوننت React برای نمایش حالت لودینگ هنگام بارگذاری تنبل.

    مثال: <Suspense fallback={<Spinner/>}><LazyComp/></Suspense>

SEO (2)

  • Canonical URL

    تگ برای مشخص کردن نسخه اصلی صفحه و جلوگیری از محتوای تکراری.

    مثال: <link rel="canonical" href="https://example.com/page">

  • Schema Markup

    مارکاپ ساختاریافته برای کمک به موتورهای جستجو در درک محتوا.

    مثال: <script type="application/ld+json">{}</script>

UI (52)

  • Card

    کانتینر مستطیلی برای گروه‌بندی محتوای مرتبط.

    مثال: محصول، پست، پروفایل

  • Mockup

    طراحی بصری کامل صفحه با رنگ، فونت و تصاویر.

    مثال: تصویر نهایی طراحی قبل از کدنویسی

  • SVG Icons

    استفاده از آیکون‌های SVG به جای فونت یا تصویر.

    مثال: انعطاف‌پذیر، قابل استایل‌دهی

  • Accordion

    کامپوننتی که بخش‌ها را می‌توان باز و بسته کرد.

    مثال: سوالات متداول (FAQ)

  • Alert

    پیام هشدار برای اطلاع کاربر از وضعیت خاص.

    مثال: موفقیت، خطا، هشدار، اطلاع

  • Area Chart

    نمودار ناحیه‌ای برای نمایش تجمعی.

    مثال: تعداد کاربران فعال

  • Avatar

    تصویر کوچک نماینده کاربر یا برند.

    مثال: تصویر پروفایل

  • Avatar Group

    گروهی از آواتارها برای نمایش چند کاربر.

    مثال: اعضای تیم، لایک‌کنندگان

  • Badge

    برچسب کوچک برای نشان دادن تعداد یا وضعیت.

    مثال: 3 پیام جدید

  • Badge

    نشان کوچک برای وضعیت یا تعداد.

    مثال: 3 پیام جدید

  • Banner

    پیام بزرگ در بالای صفحه برای اعلان مهم.

    مثال: تخفیف ویژه، تعمیرات

  • Bar Chart

    نمودار میله‌ای برای مقایسه مقادیر.

    مثال: فروش ماهانه

  • Calendar

    کامپوننت انتخاب تاریخ.

    مثال: رزرو هتل، رویدادها

  • Card Layout

    چیدمان کارت‌ها در شبکه یا لیست.

    مثال: گرید 3 ستونه برای محصولات

  • Carousel

    اسلایدر برای نمایش چند مورد در یک فضای محدود.

    مثال: گالری تصاویر، محصولات ویژه

  • Chart

    نمودار برای نمایش داده‌های آماری.

    مثال: خطی، ستونی، دایره‌ای

  • Chip

    عنصر کوچک برای نمایش اطلاعات کوتاه یا فیلترها.

    مثال: تگ، فیلتر انتخاب شده

  • Color Picker

    انتخابگر رنگ برای کاربر.

    مثال: انتخاب رنگ متن، پس‌زمینه

  • Dark Mode

    حالت تاریک رابط با پس‌زمینه تیره و متن روشن. با کلاس dark در HTML و استایل شرطی یا CSS variables پیاده می‌شود.

  • Data Table

    جدول پیشرفته با قابلیت مرتب‌سازی، فیلتر و صفحه‌بندی.

    مثال: جدول مدیریت کاربران

  • Date Picker

    انتخابگر تاریخ با رابط گرافیکی.

    مثال: input type="date"

  • Drag and Drop

    قابلیت کشیدن و رها کردن المان‌ها.

    مثال: آپلود فایل با درگ، مرتب‌سازی

  • File Upload

    کامپوننت برای آپلود فایل توسط کاربر.

    مثال: آپلود عکس پروفایل

  • Gauge

    متر نمایشی شبیه به کیلومتر شمار.

    مثال: سرعت، فشار

  • Heatmap Chart

    نمودار حرارتی برای نمایش تراکم داده‌ها.

    مثال: فعالیت کاربران در ساعات مختلف

  • Icon Fonts

    فونت‌هایی که شامل آیکون به جای حروف هستند.

    مثال: Font Awesome, Material Icons

  • Icon System

    سیستم یکپارچه برای مدیریت آیکون‌ها در پروژه.

    مثال: کامپوننت Icon با نام

  • Infinite Scroll

    بارگذاری خودکار محتوای بیشتر هنگام رسیدن به پایین صفحه.

    مثال: اینستاگرام، توییتر

  • Line Chart

    نمودار خطی برای نمایش روند در طول زمان.

    مثال: رشد کاربران

  • List

    نمایش موارد به صورت لیست عمودی.

    مثال: منو، تنظیمات، مخاطبین

  • Load More Button

    دکمه برای بارگذاری محتوای بیشتر به جای اسکرول نامتناهی.

    مثال: نمایش 10 مورد دیگر

  • Meter

    نمایش مقدار در محدوده مشخص (مثل باتری).

    مثال: باتری 75%

  • Modal

    پنجره‌ای که روی محتوای اصلی ظاهر می‌شود و توجه کاربر را جلب می‌کند.

    مثال: پنجره لاگین، پیام تأیید

  • Off-canvas Menu

    منویی که از کنار صفحه بیرون می‌آید (معمولاً در موبایل).

    مثال: منوی همبرگری

  • Pagination

    شماره‌گذاری صفحات برای محتوای زیاد.

    مثال: صفحه 1، 2، 3 ...

  • Pie Chart

    نمودار دایره‌ای برای نمایش درصدها.

    مثال: سهم بازار

  • Popover

    پنجره کوچکی که اطلاعات بیشتری را نمایش می‌دهد.

    مثال: منوی کشویی، اطلاعات کاربر

  • Progress Circle

    نمایش پیشرفت به صورت دایره‌ای.

    مثال: آپلود فایل، مهارت‌ها

  • Rating

    نمایش یا انتخاب امتیاز با ستاره یا نماد.

    مثال: امتیاز محصول 4.5/5

  • Scatter Plot

    نمودار پراکندگی برای نمایش رابطه بین دو متغیر.

    مثال: قد و وزن

  • Stepper

    کامپوننت برای نمایش مراحل یک فرآیند.

    مثال: فرم ثبت‌نام 3 مرحله‌ای

  • Table

    نمایش داده‌های ساختاریافته در سطر و ستون.

    مثال: داده‌های مالی، لیست کاربران

  • Tabs

    کامپوننت برای سازماندهی محتوای زیاد در تب‌های مختلف.

    مثال: اطلاعات، نظرات، مشخصات

  • Tag

    برچسب کوچک برای دسته‌بندی یا کلیدواژه.

    مثال: تگ پست، فیلتر

  • Time Picker

    انتخابگر زمان با رابط گرافیکی.

    مثال: ساعت و دقیقه

  • Timeline

    نمایش رویدادها در توالی زمانی.

    مثال: تاریخچه کاری، وضعیت سفارش

  • Tooltip

    پیام کوچکی که هنگام هاور یا کلیک نمایش داده می‌شود.

    مثال: توضیح برای آیکون‌ها

  • Tree Map

    نمودار درختی برای نمایش داده‌های سلسله‌مراتبی.

    مثال: دسته‌بندی محصولات

  • Tree View

    نمایش داده‌های سلسله‌مراتبی در درخت.

    مثال: فایل‌ها و پوشه‌ها، دسته‌بندی‌ها

  • Divider

    خط یا فاصله برای جدا کردن بخش‌ها.

    مثال: <hr> یا border-bottom

  • Divider

    خط یا فاصله برای جدا کردن بخش‌ها.

    مثال: <hr> یا border-bottom

  • Sparkline

    نمودار کوچک درون متن برای نمایش روند سریع.

    مثال: قیمت سهام در کنار نام

UI/UX (29)

  • Atomic Design

    روشیاکلوژی برای طراحی رابط کاربری که از اتم‌ها، مولکول‌ها، ارگانیسم‌ها، قالب‌ها و صفحات تشکیل شده است.

    مثال: ایجاد سیستم طراحی مقیاس‌پذیر و یکپارچه

  • Design System

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

    مثال: سیستم‌هایی مانند Material Design (Google)، Carbon (IBM)

  • Gestalt Principles

    مجموعه‌ای از اصول روانشناسی که توضیح می‌دهد چگونه انسان‌ها عناصر بصری را به صورت کل‌های سازمان‌یافته درک می‌کنند.

    مثال: مجاورت، تشابه، تداوم، بسته‌شدگی

  • A/B Testing

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

    مثال: تست دو رنگ مختلف دکمه CTA برای مشاهده نرخ کلیک بالاتر

  • Breakpoints

    نقاطی در عرض صفحه که در آن طرح‌بندی در پاسخ به اندازه دستگاه تغییر می‌کند.

    مثال: breakpointهای معمول: 576px، 768px، 992px، 1200px

  • Cognitive Load

    مقدار تلاش ذهنی مورد نیاز برای استفاده از یک رابط کاربری؛ هدف کاهش آن است.

    مثال: ساده‌سازی رابط، گروه‌بندی اطلاعات مرتبط

  • Color Psychology

    مطالعه چگونگی تأثیر رنگ‌ها بر ادراک، احساسات و رفتار انسان در طراحی.

    مثال: آبی برای اعتماد، قرمز برای فوریت، سبز برای آرامش

  • Conversion Rate

    درصد کاربرانی که یک عمل مطلوب را انجام می‌دهند (مانند خرید یا ثبت‌نام) نسبت به کل بازدیدکنندگان.

    مثال: بهبود طراحی برای افزایش نرخ تبدیل

  • Dark Pattern

    طراحی‌هایی که کاربران را به انجام اقداماتی فریب می‌دهند که ممکن است به نفع آنها نباشد.

    مثال: دکمه لغو اشتراک مخفی، خرید اجباری افزونه‌ها

  • Fluent Design

    زبان طراحی سیستمی مایکروسافت که بر عمق، حرکت، مواد، مقیاس و نور تأکید دارد.

    مثال: اثرات آکریلیک (acrylic) و انیمیشن‌های نرم

  • Gamification

    استفاده از المان‌های بازی‌گونه (مانند امتیاز، نشان‌ها، جدول رده‌بندی) در محصولات غیربازی برای افزایش تعامل.

    مثال: نشان‌های پیشرفت، چالش‌ها، سیستم‌های پاداش

  • Grid System

    چارچوبی از سطرها و ستون‌ها برای سازماندهی و تراز کردن محتوا در طراحی.

    مثال: سیستم ۱۲ ستونی در Bootstrap یا CSS Grid

  • Heatmap

    نمایش بصری داده‌ها که نشان می‌دهد کاربران در کجای صفحه کلیک می‌کنند، اسکرول می‌کنند یا توجه می‌کنند.

    مثال: ابزارهایی مانند Hotjar برای تجزیه و تحلیل رفتار کاربر

  • Human Interface Guidelines

    دستورالعمل‌های طراحی اپل برای iOS، macOS، watchOS و tvOS که تجربه کاربری یکپارچه ایجاد می‌کند.

    مثال: راهنمایی‌هایی برای ناوبری، رنگ‌ها، تایپوگرافی و تعاملات

  • Information Architecture

    سازماندهی و ساختاردهی محتوا در یک محصول دیجیتال برای قابل درک و قابل استفاده بودن.

    مثال: منوهای ناوبری، دسته‌بندی‌ها، سلسله مراتب اطلاعات

  • Material Design

    زبان طراحی ایجاد شده توسط گوگل که بر روی سطوح، سایه‌ها و حرکت‌های واقعی‌گرایانه تمرکز دارد.

    مثال: استفاده از elevation (سایه‌ها) و ink reactions (موج‌ها)

  • Onboarding

    فرآیند معرفی کاربر جدید به محصول و راهنمایی او برای درک ارزش و نحوه استفاده از آن.

    مثال: تورهای راهنما، tooltips، صفحات خوش‌آمدگویی

  • Prototype

    نمایش تعاملی از طراحی که شبیه‌سازی رفتار و تعاملات محصول نهایی را ممکن می‌سازد.

    مثال: پروتوتایپ قابل کلیک در Figma با transitions

  • Typography Scale

    سیستم اندازه‌های فونت که سلسله مراتب بصری و هماهنگی را در طراحی ایجاد می‌کند.

    مثال: استفاده از نسبت‌هایی مانند 1.125 (minor second) یا 1.25 (major third)

  • Usability Testing

    ارزیابی محصول با تست آن بر روی کاربران واقعی برای شناسایی مشکلات استفاده و بهبود تجربه کاربر.

    مثال: نظارت بر تعامل کاربران با پروتوتایپ و جمع‌آوری بازخورد

  • User Flow

    نموداری که مسیرهایی را که کاربر در یک محصول برای انجام یک کار خاص طی می‌کند، نشان می‌دهد.

    مثال: نقشه‌برداری مراحل ثبت‌نام کاربر از ورود تا تکمیل پروفایل

  • User Persona

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

    مثال: شخصیت‌هایی مانند "سارا، دانشجوی ۲۵ ساله علاقه‌مند به تکنولوژی"

  • UX Writing

    عمل نوشتن متن‌های رابط کاربری که کاربران را در استفاده از محصول راهنمایی می‌کند.

    مثال: متن دکمه‌ها، پیام‌های خطا، راهنماها و microcopy

  • Color Contrast

    تفاوت روشنایی یا رنگ که یک شیء (یا متن) را از پس‌زمینه یا اشیاء دیگر متمایز می‌کند.

    مثال: کنترل نسبت کنتراست برای خوانایی و دسترسی

  • Color Palette

    مجموعه‌ای از رنگ‌ها که در یک طراحی استفاده می‌شوند و معمولاً شامل رنگ اصلی، مکمل و نقاط تأکید هستند.

    مثال: پالت‌های از پیش تعریف شده مانند Material Design Colors

  • Letter Spacing

    فاصله افقی بین کاراکترهای متن (kerning) که می‌تواند بر خوانایی و ظاهر تأثیر بگذارد.

    مثال: letter-spacing: 0.5px برای بهبود خوانایی عناوین

  • Line Height

    فاصله عمودی بین خطوط متن که بر خوانایی تأثیر می‌گذارد.

    مثال: line-height: 1.5 برای خوانایی بهتر پاراگراف‌ها

  • Mockup

    نمایش بصری با جزئیات از طرح نهایی که رنگ‌ها، تایپوگرافی و تصاویر واقعی را نشان می‌دهد.

    مثال: طراحی در Figma یا Adobe XD با ظاهر نهایی محصول

  • Wireframe

    طرحی ساده و خطی از یک صفحه وب که ساختار، طرح‌بندی و سلسله مراتب محتوا را نشان می‌دهد.

    مثال: ابزارهایی مانند Balsamiq، Figma برای ایجاد وایرفریم

UX (24)

  • Call to Action

    دکمه یا لینکی که کاربر را به انجام عمل خاص تشویق می‌کند.

    مثال: ثبت‌نام کنید، خرید کنید

  • Information Architecture

    ساختار و سازماندهی اطلاعات در سایت برای دسترسی آسان.

    مثال: منو، دسته‌بندی، جستجو

  • Navigation

    سیستم راهبری کاربر در سایت: منو، بreadcrumb، لینک‌ها.

    مثال: منوی بالا، سایدبار، فوتر

  • Prototype

    نمونه اولیه تعاملی از طراحی برای تست.

    مثال: فایگما، ادوبی اکس‌دی

  • Wireframe

    طرح اولیه ساختار صفحه بدون جزئیات طراحی.

    مثال: جعبه‌ها و خطوط برای چیدمان

  • Breadcrumb

    مسیر ناوبری که نشان می‌دهد کاربر کجا قرار دارد.

    مثال: خانه > دسته‌بندی > محصول

  • Breadcrumb Navigation

    مسیر سلسله‌مراتبی برای ناوبری و درک موقعیت کاربر.

    مثال: خانه > الکترونیک > لپ‌تاپ

  • Empty State

    صفحه‌ای که هنگام عدم وجود داده نمایش داده می‌شود.

    مثال: هیچ پستی وجود ندارد

  • Error State

    صفحه یا پیام نمایش داده شده در صورت خطا.

    مثال: خطا 404، سرور در دسترس نیست

  • Form Validation

    بررسی صحت داده‌های وارد شده در فرم.

    مثال: ایمیل نامعتبر، رمز عبور ضعیف

  • Inline Validation

    نمایش خطاها هنگام تایپ کاربر (بدون نیاز به سابمیت).

    مثال: چک کردن ایمیل در لحظه

  • Loading Spinner

    انیمیشن چرخش برای نشان دادن در حال بارگذاری بودن.

    مثال: دایره چرخان

  • Loading State

    حالت نمایش داده شده در حین بارگذاری داده.

    مثال: اسکلتون، اسپینر

  • Notification

    پیام کوتاه برای اطلاع کاربر از رویدادی.

    مثال: با موفقیت ثبت شد!

  • Placeholder Images

    تصویر موقت در حین بارگذاری تصویر اصلی.

    مثال: LQIP, SQIP, رنگ جامد

  • Progress Bar

    نواری که پیشرفت عملیات را نشان می‌دهد.

    مثال: بارگذاری فایل، فرم چند مرحله‌ای

  • Skeleton Screen

    صفحه اسکلتی که در حین بارگذاری نمایش داده می‌شود.

    مثال: بلوک‌های خاکستری در حال بارگذاری

  • Snackbar

    شبیه توست اما معمولاً در پایین صفحه و با دکمه عملیات.

    مثال: Undo: آیتم حذف شد

  • Success State

    حالت نمایش داده شده پس از انجام موفقیت‌آمیز عملیات.

    مثال: با موفقیت ثبت شد!

  • Toast

    پیام کوتاهی که برای چند ثانیه ظاهر و ناپدید می‌شود.

    مثال: کپی شد!

  • User Flow

    مسیری که کاربر برای رسیدن به هدف طی می‌کند.

    مثال: ورود > جستجو > محصول > خرید

  • User Journey Map

    نقشه‌ای از تجربه کاربر در تمام مراحل تعامل با محصول.

    مثال: مراحل: آگاهی > در نظر گرفتن > خرید > وفاداری

  • User Persona

    پروفایل فرضی از کاربران هدف برای درک بهتر نیازها.

    مثال: علی، 28 سال، دانشجوی کامپیوتر

  • Card Sorting

    تکنیک برای سازماندهی محتوا بر اساس دسته‌بندی کاربران.

    مثال: کارت‌ها را دسته‌بندی کنید

Webpack (3)

  • Chunk

    بخشی از کد که در یک فایل جداگانه باندل می‌شود.

    مثال: vendor chunk, main chunk

  • Module Federation

    قابلیت Webpack برای به اشتراک گذاشتن ماژول‌ها بین اپلیکیشن‌های مستقل.

    مثال: Micro Frontends با Webpack 5

  • Vendor Chunk

    باندل جداگانه برای کتابخانه‌های شخص ثالث.

    مثال: node_modules

ابزار (22)

  • Figma

    ابزار طراحی برخط برای طراحی UI/UX و همکاری تیمی.

    مثال: فایل‌ها در ابر ذخیره می‌شوند

  • Static Site Generator

    ابزار برای تولید صفحات استاتیک در زمان بیلد.

    مثال: Next.js (SSG), Gatsby, Hugo, Jekyll

  • Adobe XD

    ابزار طراحی ادوبی برای طراحی و نمونه‌سازی رابط کاربری.

    مثال: پروتوتایپ تعاملی

  • Bit

    پلتفرم برای توسعه و به اشتراک گذاشتن کامپوننت‌ها بین پروژه‌ها.

    مثال: Component-Driven Development

  • Composer

    مدیر وابستگی‌های PHP. با composer require پکیج نصب می‌شود و autoload و نسخه‌ها در composer.json است.

  • Docusaurus

    ابزار ساخت مستندات با React.

    مثال: Open Source Documentation

  • Eleventy

    جنریتور سایت استاتیک ساده و انعطاف‌پذیر با JavaScript.

    مثال: 11ty, بدون وابستگی

  • Git

    سیستم کنترل نسخه برای مدیریت کد. برنچ، کامیت و merge پایه کار تیمی و دیپلوی هستند.

  • GitBook

    پلتفرم ساخت مستندات و کتاب‌های دیجیتال.

    مثال: Markdown-based

  • GitHub

    پلتفرم میزبانی ریپازیتوری Git و همکاری روی کد. Issue، PR و Actions برای اتوماسیون.

  • Hot Module Replacement

    جایگزینی ماژول‌ها بدون رفرش کامل صفحه در حین توسعه.

    مثال: Webpack HMR

  • Hugo

    جنریتور سایت استاتیک با زبان Go، بسیار سریع.

    مثال: Markdown to HTML

  • InVision

    پلتفرم برای نمونه‌سازی و همکاری در طراحی.

    مثال: پروتوتایپ و کامنت‌گذاری

  • Jekyll

    جنریتور سایت استاتیک با Ruby، اولین و معروف.

    مثال: GitHub Pages

  • Lerna

    ابزار مدیریت مونورپو برای پروژه‌های جاوااسکریپت.

    مثال: مدیریت پکیج‌های متعدد

  • npm

    مدیر پکیج‌های جاوااسکریپت. با npm install وابستگی‌ها نصب می‌شوند و با package.json پروژه تعریف می‌شود.

  • Nx

    ابزار پیشرفته برای مونورپو با قابلیت‌های ساخت و تست بهینه.

    مثال: Nx Workspace

  • Sketch

    ابزار طراحی برای مک برای طراحی رابط کاربری.

    مثال: فقط مک

  • Storybook

    ابزار برای توسعه، تست و مستندسازی کامپوننت‌ها به صورت جداگانه.

    مثال: UI Component Explorer

  • Turborepo

    ابزار سریع برای مونورپو با کش هوشمند.

    مثال: Vercel Turborepo

  • Vite

    ابزار ساخت فرانت‌اند با توسعه سریع (HMR) و بیلد بهینه. در Laravel و Vue/React زیاد استفاده می‌شود.

  • Webpack

    باندلر ماژول‌ها برای فرانت‌اند. JS، CSS و تصاویر را جمع می‌کند و برای پروداکشن بهینه می‌کند.

ابزارها (4)

  • CI/CD

    ادغام مستمر (Continuous Integration) و تحویل مستمر (Continuous Delivery) برای اتوماسیون فرآیند ساخت و deploy.

    مثال: GitHub Actions، Jenkins، GitLab CI

  • Docker

    پلتفرمی برای توسعه، حمل و اجرای برنامه‌ها در کانتینرهای سبک و قابل حمل.

    مثال: ایجاد کانتینرهای ایزوله با تمام وابستگی‌های برنامه

  • Webpack

    یک ماژول باندلر برای برنامه‌های جاوااسکریپت که ماژول‌ها و وابستگی‌ها را در فایل‌های باندل جمع می‌کند.

    مثال: باندل کردن فایل‌های JS، CSS و تصاویر.

  • NPM

    مدیریت بسته برای جاوااسکریپت؛ بزرگترین مخزن کتابخانه‌های نرم‌افزاری در جهان.

    مثال: npm install package-name

استایل (2)

  • CSS

    سیستم آبشاری استایل برای ظاهر و چیدمان المان‌های HTML. رنگ، فونت، فاصله و ریسپانسیو با CSS کنترل می‌شود.

    درس مرتبط در آموزش طراحی وب ←

  • CSS3

    نسخه سوم و جدیدترین نسخه از سیستم آبشاری استایل. ویژگی‌های جدیدی مانند انیمیشن، گرادیانت، سایه‌ها و تبدیل‌ها را اضافه کرده است.

    مثال: transition, transform, animation

اصول (16)

  • Accessibility

    تمرین ساختن وب‌سایت‌هایی که برای افراد با معلولیت‌های مختلف قابل استفاده باشد.

    مثال: استفاده از alt برای تصاویر، تضمین کنتراست رنگ مناسب.

  • Responsive Design

    رویکردی که وب‌سایت را قادر می‌سازد تا با توجه به اندازه صفحه دستگاه، نمایش بهینه‌ای داشته باشد.

    مثال: استفاده از media queries و واحدهای نسبی.

  • SEO

    بهینه‌سازی موتور جستجو؛ مجموعه‌ای از تکنیک‌ها برای بهبود رتبه سایت در نتایج جستجو.

    مثال: استفاده از تگ‌های عنوان معنادار، سرعت بارگذاری بالا.

  • Dark Mode

    طرح رنگ تیره برای رابط کاربری که کاهش نور صفحه و افزایش خوانایی در محیط‌های کم نور را هدف قرار می‌دهد.

    مثال: استفاده از media query (prefers-color-scheme: dark) یا کلید تعویض دستی

  • F-Shaped Pattern

    الگوی رایج خواندن کاربران در وب که به شکل حرف F است و بر تمرکز بر روی سطر اول و سمت چپ تاکید دارد.

    مثال: قرار دادن اطلاعات مهم در بالای صفحه و سمت چپ

  • Microinteractions

    تعاملات کوچک و لحظه‌ای که بازخوردی از اقدام کاربر ارائه می‌دهند یا کار خاصی انجام می‌دهند.

    مثال: لایک کردن یک پست، پر شدن دکمه، انیمیشن‌های کوچک

  • Mobile First

    استراتژی طراحی که ابتدا برای موبایل طراحی می‌شود و سپس برای نمایشگرهای بزرگتر گسترش می‌یابد.

    مثال: شروع با breakpointهای کوچک و اضافه کردن breakpoint برای دسکتاپ.

  • Mobile Navigation

    الگوهای طراحی ناوبری (منو) برای دستگاه‌های موبایل با صفحه نمایش کوچک.

    مثال: منوی همبرگری (Hamburger Menu)، منوی پایین صفحه (Bottom Navigation)

  • Parallax Scrolling

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

    مثال: ایجاد عمق و جلوه بصری جذاب

  • Skeleton Screen

    نمایش طرح‌واره‌ای (wireframe) از محتوا در هنگام بارگذاری داده‌ها برای نشان دادن پیش‌نمایش ساختار صفحه.

    مثال: افزایش درک کاربر از اینکه داده‌ها در حال بارگیری هستند

  • Visual Hierarchy

    چیدمان و ارائه عناصر به گونه‌ای که اهمیت آنها را نشان دهد و کاربر را در صفحه راهنمایی کند.

    مثال: استفاده از اندازه، رنگ و فونت‌های مختلف برای نشان دادن سطوح اهمیت

  • Web Accessibility

    همان Accessibility، تاکید بر ساخت وب‌سایت‌هایی که برای همه افراد قابل دسترس باشد.

    مثال: استفاده از ARIA attributes.

  • Call to Action

    دکمه، لینک یا متن که کاربر را ترغیب به انجام یک اقدام خاص می‌کند.

    مثال: خرید کنید، ثبت نام کنید، دانلود کنید، بیشتر بخوانید

  • Card Design

    الگوی طراحی که اطلاعات را در واحدهای مستطیلی مجزا (کارت) سازماندهی می‌کند.

    مثال: نمایش محصولات، مقالات یا پست‌ها در شبکه‌ای از کارت‌ها

  • Hero Section

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

    مثال: عکس زمینه بزرگ، عنوان جذاب، دکمه دعوت به عمل (CTA)

  • White Space

    فضای خالی بین عناصر صفحه که به خوانایی و تمرکز کاربر کمک می‌کند.

    مثال: مارجین و پدینگ مناسب بین بخش‌های مختلف

امنیت (2)

  • CORS

    اشتراک‌گذاری منبع با مبدا متقاطع؛ مکانیزمی که به منابع یک صفحه وب اجازه درخواست به دامنه دیگر را می‌دهد.

    مثال: خطای "No Access-Control-Allow-Origin" در کنسول.

  • SSL Certificate

    گواهی دیجیتال که ارتباط امن (HTTPS) بین مرورگر کاربر و سرور را فعال می‌کند.

    مثال: قفل سبز در نوار آدرس مرورگر.

انیمیشن (1)

  • Parallax Scrolling

    افکت اسکرول که لایه‌های مختلف با سرعت متفاوت حرکت می‌کنند.

    مثال: پس‌زمینه کندتر از محتوا حرکت می‌کند

برنامه‌نویسی (2)

  • JavaScript, جاوااسکریپت

    زبان اسکریپت سمت کلاینت برای تعامل و منطق در مرورگر. با HTML و CSS سه پایه فرانت‌اند وب را تشکیل می‌دهند.

    درس مرتبط در آموزش طراحی وب ←

  • API

    رابط برنامه‌نویسی اپلیکیشن: قراردادی برای ارتباط بین سرویس‌ها. در وب معمولاً REST یا GraphQL روی HTTP.

بک‌اند (1)

بهترین شیوه‌ها (2)

  • Graceful Degradation

    طراحی از بالا به پایین: نسخه کامل طراحی شود، در مرورگرهای قدیمی به آرامی ساده‌تر شود.

    مثال: در مرورگرهای قدیمی هم کار کند

  • Progressive Enhancement

    طراحی از پایه به بالا: اول نسخه ساده، بعد قابلیت‌های پیشرفته اضافه شود.

    مثال: ابتدا بدون جاوااسکریپت کار کند

بهینه‌سازی (53)

  • SEO, سئو

    بهینه‌سازی موتور جستجو: بهبود ساختار، متا تگ‌ها، سرعت و محتوا برای رتبه بهتر در گوگل.

    درس مرتبط در آموزش طراحی وب ←

  • CDN

    شبکه تحویل محتوا: سرورهای توزیع‌شده برای تحویل سریع‌تر محتوا.

    مثال: Cloudflare, Akamai, AWS CloudFront

  • Critical Rendering Path

    مسیر بحرانی رندر: مراحلی که مرورگر برای نمایش صفحه طی می‌کند.

    مثال: HTML > CSSOM > Render Tree > Layout > Paint

  • Image Optimization

    بهینه‌سازی تصاویر برای کاهش حجم و بهبود سرعت.

    مثال: WebP, AVIF, فشرده‌سازی

  • Lazy Loading

    بارگذاری تصاویر و منابع فقط هنگام نیاز (وقتی به صفحه نمایش می‌رسند).

    مثال: <img src="image.jpg" loading="lazy">

  • Lazy Loading Images

    بارگذاری تصاویر فقط هنگام نزدیک شدن به صفحه نمایش.

    مثال: loading="lazy"

  • Responsive Images

    استفاده از تصاویر مختلف برای اندازه‌های مختلف صفحه.

    مثال: srcset, sizes, picture

  • Web Vitals

    معیارهای عملکردی مهم: LCP, FID, CLS, TTI, TBT.

    مثال: Largest Contentful Paint < 2.5s

  • A/B Testing

    تست دو نسخه از صفحه برای پیدا کردن نسخه بهتر.

    مثال: نسخه A vs نسخه B

  • Above-the-Fold Critical CSS

    استایل‌های ضروری برای نمایش بالای صفحه.

    مثال: اینلاین در head

  • Browser Cache

    کش در مرورگر کاربر برای بارگذاری سریع‌تر بازبینی.

    مثال: Cache-Control, ETag

  • Bundle Splitting

    تقسیم باندل به فایل‌های کوچک‌تر بر اساس مسیر یا کامپوننت.

    مثال: SplitChunksPlugin

  • Cache Busting

    تکنیک برای دور زدن کش قدیمی با تغییر نام فایل.

    مثال: app.a1b2c3.js

  • CLS

    امتیاز تغییرات چیدمان (پرش المان‌ها هنگام بارگذاری). باید کمتر از 0.1 باشد.

    مثال: Cumulative Layout Shift

  • Code Splitting

    تقسیم کد به چند باندل کوچک‌تر برای بارگذاری تنبل.

    مثال: React.lazy, dynamic import

  • Critical CSS

    استایل‌های ضروری برای بالای صفحه که اینلاین می‌شوند.

    مثال: کاهش زمان رندر اولیه

  • Critical CSS Extraction

    استخراج و اینلاین کردن استایل‌های بالای صفحه.

    مثال: penthouse, critical

  • CSS Compression

    فشرده‌سازی فایل CSS با gzip یا brotli.

    مثال: Content-Encoding: gzip

  • CSS Minification

    حذف فاصله‌ها، کامنت‌ها و کاهش حجم فایل CSS.

    مثال: cssnano, csso

  • CSS Sprites

    ترکیب چند تصویر کوچک در یک تصویر بزرگ برای کاهش درخواست‌ها.

    مثال: آیکون‌ها در یک فایل

  • DNS Prefetching

    پیش‌جستجوی DNS برای دامنه‌های احتمالی.

    مثال: <link rel="dns-prefetch" href="//cdn.example.com">

  • Edge Cache

    کش در سرورهای لبه CDN برای کاهش تأخیر.

    مثال: نزدیک به کاربر

  • FCP

    زمان تا اولین پیکسل: نمایش اولین محتوای صفحه.

    مثال: First Contentful Paint

  • FID

    زمان پاسخ به اولین تعامل کاربر. باید کمتر از 100ms باشد.

    مثال: First Input Delay

  • Fingerprinting

    اضافه کردن هش به نام فایل برای کش بلندمدت.

    مثال: style.[hash].css

  • FOIT vs FOUT

    تفاوت: FOIT متن مخفی تا بارگذاری فونت، FOUT متن با فونت جایگزین.

    مثال: swap برای جلوگیری از FOIT

  • Font Display Swap

    نمایش متن با فونت پیش‌فرض تا بارگذاری فونت سفارشی.

    مثال: font-display: swap;

  • Font Loading Strategies

    استراتژی‌های مختلف بارگذاری فونت: swap, block, optional.

    مثال: font-display property

  • Font Subsetting

    حذف کاراکترهای غیرضروری از فونت برای کاهش حجم.

    مثال: فقط کاراکترهای استفاده‌شده

  • INP

    زمان پاسخ به تعاملات کاربر (جایگزین FID). باید کمتر از 200ms باشد.

    مثال: Interaction to Next Paint

  • LCP

    زمان نمایش بزرگترین المان محتوا. باید کمتر از 2.5 ثانیه باشد.

    مثال: Largest Contentful Paint

  • Long-Term Caching

    کش بلندمدت برای منابع استاتیک با نام‌های یکتا.

    مثال: یک سال یا بیشتر

  • LQIP

    تصویر کیفیت پایین به عنوان پلیس‌هولدر تا بارگذاری تصویر اصلی.

    مثال: Low Quality Image Placeholder

  • Preconnect

    اتصال اولیه به دامنه‌های خارجی برای کاهش تأخیر.

    مثال: <link rel="preconnect" href="https://fonts.googleapis.com">

  • Preconnect vs DNS Prefetch

    تفاوت: Preconnect اتصال کامل، DNS Prefetch فقط جستجوی DNS.

    مثال: Preconnect سنگین‌تر اما کامل‌تر

  • Prefetch

    پیش‌بارگذاری منابعی که کاربر احتمالاً در آینده نیاز دارد.

    مثال: <link rel="prefetch" href="/next-page.html">

  • Prefetch vs Preload

    تفاوت: Prefetch برای صفحات آینده، Preload برای منابع صفحه فعلی.

    مثال: پیش‌بارگذاری هوشمند

  • Preload

    بارگذاری پیش‌زمینه منابع مهم قبل از نیاز.

    مثال: <link rel="preload" href="font.woff2" as="font">

  • PurgeCSS

    حذف استایل‌های استفاده‌نشده از فایل نهایی CSS.

    مثال: کاهش حجم فایل CSS

  • Render Blocking

    منابعی که رندر صفحه را مسدود می‌کنند (CSS و جاوااسکریپت).

    مثال: کاهش یا حذف آن‌ها

  • Service Worker Cache

    کش پیشرفته توسط Service Worker برای کارکرد آفلاین.

    مثال: Cache API

  • Short-Term Caching

    کش کوتاه‌مدت برای منابع پویا یا محتوایی که ممکن است تغییر کند.

    مثال: چند دقیقه تا چند ساعت

  • Tree Shaking

    حذف کدهای استفاده‌نشده از باندل نهایی.

    مثال: Webpack, Rollup

  • Tree Shaking CSS

    حذف استایل‌های استفاده‌نشده از فایل CSS.

    مثال: PurgeCSS, UnCSS

  • TTFB

    زمان تا اولین بایت: سرعت پاسخ سرور. باید کمتر از 200ms باشد.

    مثال: Time to First Byte

  • TTI

    زمان تا تعامل کامل: صفحه کاملاً قابل تعامل است.

    مثال: Time to Interactive

  • Web Font Optimization

    بهینه‌سازی فونت‌های وب برای سرعت و تجربه کاربری بهتر.

    مثال: subsetting, woff2, display swap

  • DNS Prefetch

    پیش‌جستجوی DNS برای دامنه‌های خارجی.

    مثال: <link rel="dns-prefetch" href="//fonts.googleapis.com">

  • Critical CSS

    CSS مورد نیاز برای رندر محتوای بالای صفحه (above the fold) که بلافاصله بارگذاری می‌شود تا عملکرد بهبود یابد.

    مثال: استخراج و درون‌خطی کردن (inline) استایل‌های ضروری.

  • Image Optimization

    فرآیند کاهش حجم فایل تصاویر بدون افت کیفیت قابل توجه برای بهبود سرعت بارگذاری.

    مثال: استفاده از فرمت‌های WebP، فشرده‌سازی، و تغییر اندازه مناسب

  • Lazy Loading

    تکنیکی برای به تأخیر انداختن بارگذاری منابع (مانند تصاویر) تا زمانی که به آن‌ها نیاز باشد.

    مثال: لود تصاویر فقط هنگام اسکرول به بخش مربوطه.

  • Lazy Loading Images

    بارگذاری تصاویر تنها هنگام نیاز (معمولاً هنگام اسکرول به سمت آنها) برای کاهش زمان بارگذاری اولیه.

    مثال: ویژگی loading="lazy" در HTML یا Intersection Observer API

  • Responsive Images

    تکنیک‌هایی برای ارائه تصاویر مناسب با اندازه و رزولوشن دستگاه کاربر برای بهبود عملکرد.

    مثال: استفاده از srcset و sizes در تگ <img>

پروتکل (1)

  • WebSocket

    پروتکلی برای ارتباط دوطرفه و زمان‌ واقعی بین کلاینت و سرور روی یک اتصال TCP واحد.

    مثال: چت آنلاین، به‌روزرسانی قیمت سهام.

پیش‌پردازنده (2)

  • SASS

    یک پیش‌پردازنده CSS که امکاناتی مانند متغیر، تو در تویی و mixin را اضافه می‌کند.

    مثال: استفاده از $primary-color: #333;

  • LESS

    یک پیش‌پردازنده CSS دیگر مشابه SASS با سینتکس متفاوت.

    مثال: @primary-color: #333;

تایپوگرافی (8)

  • Hierarchy

    ساختار بصری متن با اندازه، وزن و سبک مختلف برای راهنمایی چشم.

    مثال: H1 > H2 > H3 > Body

  • Kerning

    تنظیم فاصله بین جفت حروف خاص برای ظاهر بهتر.

    مثال: font-kerning: normal;

  • Leading

    فاصله بین خطوط متن (line-height).

    مثال: line-height: 1.6;

  • Legibility

    قابلیت تشخیص کاراکترها از هم.

    مثال: فونت‌های ساده برای بدنه متن

  • Ligatures

    ترکیب دو یا چند حرف در یک گلیف برای ظاهر بهتر.

    مثال: fi, fl, ff

  • Readability

    سهولت خواندن متن: طول خط، فاصله خطوط، کنتراست.

    مثال: 45-75 کاراکتر در خط

  • Tracking

    فاصله یکنواخت بین تمام حروف (letter-spacing).

    مثال: letter-spacing: 0.05em;

  • Web Fonts

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

    مثال: استفاده از Google Fonts یا فونت‌های آپلود شده با @font-face.

تحلیل (3)

  • Conversion Rate

    درصد کاربرانی که عمل مورد نظر (خرید، ثبت‌نام و...) را انجام داده‌اند.

    مثال: تبدیل = تعداد تبدیل‌ها / بازدید کل

  • Heat Map

    نقشه حرارتی که نشان می‌دهد کاربران بیشتر کجا کلیک می‌کنند.

    مثال: ابزار: Hotjar, Crazy Egg

  • Bounce Rate

    درصد کاربرانی که فقط یک صفحه را مشاهده کرده و خارج شده‌اند.

    مثال: نرخ پرش بالا = محتوای ضعیف یا سئو بد

توسعه وب (1)

  • PWA

    اپلیکیشن وب پیشرفته: سایتی که مانند اپلیکیشن موبایل رفتار می‌کند.

    مثال: نصب روی صفحه اصلی، آفلاین کار می‌کند

جاوااسکریپت (105)

  • Async vs Defer

    تفاوت: Async بدون ترتیب و موازی، Defer با ترتیب و بعد از HTML.

    مثال: <script async> vs <script defer>

  • DOMContentLoaded

    رویداد هنگام آماده شدن DOM (قبل از بارگذاری تصاویر).

    مثال: document.addEventListener("DOMContentLoaded", ...)

  • Intersection Observer

    مشاهده ورود و خروج المان‌ها به منطقه قابل مشاهده صفحه.

    مثال: new IntersectionObserver(callback)

  • Service Workers

    وردکر پس‌زمینه برای کش کردن و کارکرد آفلاین.

    مثال: navigator.serviceWorker.register()

  • Animation Events

    رویدادهای انیمیشن CSS: animationstart, animationend, animationiteration.

    مثال: افکت‌های ورود و خروج

  • Async, آسنک

    اجرای ناهمزمان: کدی که منتظر نتیجه (مثلاً درخواست شبکه) نمی‌ماند. با Promise و async/await مدیریت می‌شود.

  • BeforeUnload

    رویداد قبل از ترک صفحه (برای هشدار ذخیره نشدن تغییرات).

    مثال: event.preventDefault() برای نمایش پیام

  • Bubble Phase

    مرحله سوم: رویداد از هدف به والد منتشر می‌شود.

    مثال: پیش‌فرض addEventListener

  • Capture Phase

    مرحله اول انتشار رویداد از والد به فرزند.

    مثال: addEventListener(..., true)

  • Change Event

    رویداد هنگام تغییر و ترک فیلد (بعد از blur).

    مثال: انتخاب در select

  • Clipboard Events

    رویدادهای کلیپ‌بورد: copy, cut, paste.

    مثال: event.clipboardData

  • Custom Event

    ایجاد رویداد سفارشی برای ارتباط بین کامپوننت‌ها.

    مثال: new CustomEvent("myEvent")

  • Debounce

    تاخیر در اجرای تابع تا زمانی که کاربر متوقف شود.

    مثال: جستجوی زنده با تاخیر 300ms

  • Debounce vs Throttle

    تفاوت: debounce منتظر می‌ماند، throttle محدود می‌کند.

    مثال: جستجو (debounce) vs اسکرول (throttle)

  • Drag and Drop Events

    رویدادهای درگ و دراپ: dragstart, drag, drop و غیره.

    مثال: مرتب‌سازی لیست‌ها

  • Dynamic Import

    وارد کردن ماژول‌ها به صورت پویا و تنبل.

    مثال: import("./module").then(...)

  • Dynamic Script Loading

    بارگذاری اسکریپت به صورت پویا با جاوااسکریپت.

    مثال: document.createElement("script")

  • Error Event

    رویداد هنگام بروز خطا در بارگذاری منبع یا اسکریپت.

    مثال: img.onerror, window.onerror

  • Event Bubbling

    رویداد از المان فرزند به والد منتشر می‌شود.

    مثال: کلیک روی دکمه به کانتینر می‌رسد

  • Event Capturing

    رویداد از المان والد به فرزند منتشر می‌شود.

    مثال: مرحله اول قبل از bubbling

  • Event Delegation

    ثبت رویداد روی والد به جای هر فرزند برای بهینه‌سازی.

    مثال: کلیک روی لیست به جای هر آیتم

  • Event Flow

    فرآیند کامل انتشار رویداد: Capture > Target > Bubble.

    مثال: سه مرحله انتشار رویداد

  • Event Listener

    ثبت تابع برای اجرا هنگام وقوع رویداد.

    مثال: element.addEventListener("click", handler)

  • Event Object

    شیء اطلاعات رویداد شامل هدف، مختصات، کلید فشرده شده و غیره.

    مثال: event.target, event.clientX

  • Fetch

    API مرورگر برای درخواست HTTP. با fetch(url) داده از سرور می‌گیری و با then یا async/await جواب را می‌خوانی.

  • Focus Events

    رویدادهای تمرکز: focus, blur, focusin, focusout.

    مثال: هایلایت فیلد فرم

  • Font Loading API

    API برای کنترل بارگذاری و نمایش فونت‌ها.

    مثال: document.fonts.load()

  • Form Events

    رویدادهای فرم: submit, reset, change, input.

    مثال: event.preventDefault() در submit

  • Fullscreen API

    نمایش المان در حالت تمام‌صفحه.

    مثال: element.requestFullscreen()

  • Geolocation

    دریافت موقعیت جغرافیایی کاربر.

    مثال: navigator.geolocation.getCurrentPosition()

  • Input Event

    رویداد هنگام تغییر مقدار فیلد ورودی (حتی با کیبورد یا paste).

    مثال: جستجوی زنده

  • Keyboard Events

    رویدادهای مربوط به کیبورد: keydown, keypress, keyup.

    مثال: event.key, event.code

  • Load Event

    رویداد هنگام بارگذاری کامل صفحه (شامل تصاویر).

    مثال: window.addEventListener("load", ...)

  • Module Type

    وارد کردن اسکریپت به عنوان ماژول ES6.

    مثال: <script type="module" src="app.js">

  • Mouse Events

    رویدادهای مربوط به ماوس: click, dblclick, mousemove, mouseover.

    مثال: event.clientX, event.clientY

  • Mutation Observer

    مشاهده تغییرات در DOM (اضافه/حذف/تغییر المان‌ها).

    مثال: new MutationObserver(callback)

  • Native Event

    رویداد اصلی مرورگر بدون تغییر.

    مثال: event.nativeEvent در React

  • Nomodule

    اسکریپتی که فقط در مرورگرهای قدیمی اجرا می‌شود.

    مثال: <script nomodule src="legacy.js">

  • Notification API

    نمایش اعلان‌های دسکتاپ به کاربر.

    مثال: Notification.requestPermission()

  • Once Option

    گزینه برای اجرای رویداد فقط یک بار.

    مثال: addEventListener("click", handler, { once: true })

  • Page Visibility API

    تشخیص نمایش یا پنهان بودن تب مرورگر.

    مثال: document.visibilityState

  • Passive Event

    گزینه برای بهبود عملکرد رویدادهای اسکرول و تاچ.

    مثال: addEventListener("scroll", handler, { passive: true })

  • Performance API

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

    مثال: performance.now(), performance.mark()

  • Pointer Events

    رویدادهای یکپارچه برای ماوس، تاچ و پن.

    مثال: pointerdown, pointermove, pointerup

  • Prevent Default

    جلوگیری از رفتار پیش‌فرض مرورگر.

    مثال: event.preventDefault() برای فرم

  • Remove Event Listener

    حذف گوش‌دهنده رویداد.

    مثال: element.removeEventListener("click", handler)

  • Resize Event

    رویداد هنگام تغییر اندازه پنجره.

    مثال: بهینه‌سازی نمایش برای اندازه جدید

  • Resize Observer

    مشاهده تغییر اندازه المان‌ها.

    مثال: new ResizeObserver(callback)

  • Script Loading Strategies

    استراتژی‌های مختلف بارگذاری اسکریپت: معمولی، async, defer, dynamic.

    مثال: انتخاب بر اساس نیاز

  • Scroll Event

    رویداد هنگام اسکرول صفحه یا المان.

    مثال: نمایش هدر، بارگذاری بیشتر

  • Server-Sent Events

    ارسال رویداد از سرور به کلاینت (یکطرفه).

    مثال: new EventSource("/stream")

  • Service Worker

    اسکریپت پس‌زمینه برای کش کردن منابع و کارکرد آفلاین.

    مثال: navigator.serviceWorker.register("/sw.js")

  • Stop Propagation

    توقف انتشار رویداد به المان‌های دیگر.

    مثال: event.stopPropagation()

  • Submit Event

    رویداد هنگام ارسال فرم.

    مثال: event.preventDefault() برای AJAX

  • Target Phase

    مرحله دوم: رویداد به المان هدف می‌رسد.

    مثال: المانی که رویداد روی آن رخ داده

  • Throttle

    محدود کردن اجرای تابع به یک بار در بازه زمانی مشخص.

    مثال: اسکرول، تغییر اندازه پنجره

  • Touch Events

    رویدادهای مربوط به لمس: touchstart, touchmove, touchend.

    مثال: event.touches, event.changedTouches

  • Transition Events

    رویدادهای ترانزیشن CSS: transitionend.

    مثال: پایان تغییر اندازه

  • Web Animations API

    API مرورگر برای کنترل انیمیشن‌های وب با جاوااسکریپت.

    مثال: element.animate(keyframes, options)

  • Web Audio API

    پردازش و سنتز صدا در مرورگر.

    مثال: new AudioContext()

  • Web Share API

    اشتراک‌گذاری محتوا با اپلیکیشن‌های دستگاه.

    مثال: navigator.share({ title, text, url })

  • Web Workers

    اجرای کد در ترد جداگانه بدون مسدود کردن UI.

    مثال: new Worker("worker.js")

  • WebAssembly

    زبان باینری برای اجرای کد با عملکرد نزدیک به نیتیو در مرورگر.

    مثال: wasm, .wasm

  • WebRTC

    ارتباط بلادرنگ (صدا، ویدیو، داده) بین مرورگرها.

    مثال: RTCPeerConnection

  • WebSocket

    ارتباط دوطرفه دائمی بین کلاینت و سرور.

    مثال: new WebSocket("ws://example.com")

  • Battery Status API

    دریافت اطلاعات باتری دستگاه.

    مثال: navigator.getBattery()

  • Device Orientation

    رویدادهای جهت‌گیری دستگاه: deviceorientation.

    مثال: ژیروسکوپ، شتاب‌سنج

  • Gamepad Events

    رویدادهای کنترل بازی برای بازی‌های وب.

    مثال: gamepadconnected, gamepaddisconnected

  • Gesture Events

    رویدادهای حرکتی مانند pinch و rotate.

    مثال: pinch-to-zoom

  • Network Information API

    دریافت اطلاعات شبکه و نوع اتصال.

    مثال: navigator.connection.effectiveType

  • Screen Orientation API

    کنترل و تشخیص جهت صفحه نمایش.

    مثال: screen.orientation.lock("landscape")

  • Shared Workers

    وردکر مشترک بین چند تب یا پنجره.

    مثال: new SharedWorker("worker.js")

  • Unload

    رویداد هنگام ترک صفحه.

    مثال: ارسال آمار قبل از خروج

  • Vibration API

    لرزاندن دستگاه موبایل.

    مثال: navigator.vibrate(200)

  • Web Bluetooth API

    ارتباط با دستگاه‌های بلوتوث از طریق مرورگر.

    مثال: navigator.bluetooth.requestDevice()

  • Web MIDI API

    ارتباط با دستگاه‌های MIDI از طریق مرورگر.

    مثال: navigator.requestMIDIAccess()

  • Web NFC API

    ارتباط با دستگاه‌های NFC از طریق مرورگر.

    مثال: new NDEFReader()

  • Web Serial API

    ارتباط با دستگاه‌های سریال از طریق مرورگر.

    مثال: navigator.serial.requestPort()

  • Web USB API

    ارتباط با دستگاه‌های USB از طریق مرورگر.

    مثال: navigator.usb.requestDevice()

  • Worklet

    اسکریپت سبک‌تر از وردکر برای کارهای خاص (پینت، انیمیشن).

    مثال: CSS.paintWorklet.addModule()

  • Async/Await

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

    مثال: async function getData() { let data = await fetch(); }

  • Cypress

    فریمورک تست end-to-end برای برنامه‌های وب که در مرورگر اجرا می‌شود و تست‌های قابل اعتماد ایجاد می‌کند.

    مثال: تست تعاملات کاربر در مرورگر واقعی

  • Generics (TypeScript)

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

    مثال: function identity<T>(arg: T): T { return arg; }

  • GraphQL

    زبان کوئری‌نویسی برای APIها و محیط اجرا برای اجرای این کوئری‌ها، توسعه‌یافته توسط فیسبوک.

    مثال: درخواست داده‌های خاص: query { user(id: "1") { name, email } }

  • Interface (TypeScript)

    ساختاری در TypeScript برای تعریف شکل (shape) یک شیء یا کلاس.

    مثال: interface User { id: number; name: string; }

  • Jest

    فریمورک تست جاوااسکریپت با تمرکز بر سادگی، اغلب برای تست React و برنامه‌های Node.js استفاده می‌شود.

    مثال: نوشتن unit tests و snapshot testing

  • JWT (JSON Web Token)

    استانداردی باز برای ایجاد توکن‌های امن که می‌توانند بین دو طرف به صورت ایمن انتقال داده شوند.

    مثال: احراز هویت کاربران در APIها با توکن Bearer

  • MongoDB

    پایگاه داده NoSQL مبتنی بر سند (document-oriented) که از JSON-like documents استفاده می‌کند.

    مثال: ذخیره داده‌های بدون ساختار ثابت یا نیمه‌ساختار یافته

  • Mongoose

    کتابخانه مدل‌سازی شیء برای MongoDB و Node.js که ساختار schema-based را فراهم می‌کند.

    مثال: تعریف Schema و Model برای داده‌های MongoDB

  • OAuth

    پروتکل استاندارد باز برای احراز هویت (authorization) که به برنامه‌های شخص ثالث دسترسی محدود می‌دهد.

    مثال: ورود با گوگل، فیسبوک یا GitHub در وب‌سایت‌ها

  • Promise

    یک شیء در جاوااسکریپت که نمایانگر تکمیل یا شکست یک عملیات ناهمزمان است.

    مثال: fetch().then(response => ...).catch(error => ...)

  • Static Typing

    قابلیت تعیین نوع متغیرها در زمان کامپایل که خطاهای نوع داده را زودتر شناسایی می‌کند.

    مثال: TypeScript، Flow برای اضافه کردن static typing به جاوااسکریپت

  • TypeScript

    زبان برنامه‌نویسی superset از جاوااسکریپت که قابلیت static typing به آن اضافه می‌کند.

    مثال: تعریف انواع متغیرها: let name: string = "John";

  • Webpack Configuration

    پیکربندی Webpack برای باندل کردن ماژول‌های جاوااسکریپت، استایل‌ها و سایر فایل‌ها.

    مثال: تعریف entry point، output، loaders و plugins

  • AJAX

    تکنیکی برای به‌روزرسانی بخشی از صفحه بدون بارگذاری مجدد کل صفحه.

    مثال: استفاده از XMLHttpRequest یا fetch API.

  • Babel

    ترانسپایلر جاوااسکریپت که کد ES6+ را به نسخه سازگار با مرورگرهای قدیمی تبدیل می‌کند.

    مثال: استفاده از preset-env برای پشتیبانی مرورگرها

  • Callback Function

    تابعی که به عنوان آرگومان به تابع دیگر داده می‌شود و پس از انجام یک کار اجرا می‌شود.

    مثال: setTimeout(function(){ ... }, 1000);

  • CORS (Cross-Origin Resource Sharing)

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

    مثال: تنظیم هدر: Access-Control-Allow-Origin: *

  • DOM

    نمایش سلسله مراتبی عناصر HTML صفحه که توسط جاوااسکریپت قابل دستکاری است.

    مثال: document.getElementById()

  • ESLint

    ابزار تحلیل کد استاتیک برای شناسایی الگوهای مشکل‌ساز در کد جاوااسکریپت.

    مثال: اعمال قوانین coding standards و بهترین روش‌ها

  • Event Listener

    تابعی در جاوااسکریپت که منتظر یک رویداد خاص (مانند کلیک) می‌ماند و سپس اجرا می‌شود.

    مثال: element.addEventListener('click', function)

  • Express.js

    فریمورک وب مینیمال و انعطاف‌پذیر برای Node.js که برای ساخت API و برنامه‌های وب استفاده می‌شود.

    مثال: const app = express(); app.get("/", (req, res) => {...});

  • Node.js

    محیط اجرای جاوااسکریپت بر روی سرور که برای ساخت برنامه‌های شبکه‌ای مقیاس‌پذیر استفاده می‌شود.

    مثال: ایجاد سرور وب: const http = require("http");

  • RESTful API

    سبک معماری برای طراحی APIهای وب که از اصول REST (Representational State Transfer) پیروی می‌کند.

    مثال: استفاده از متدهای HTTP: GET, POST, PUT, DELETE

  • Prettier

    فرمت‌کننده کد با پشتیبانی از چندین زبان که تضمین می‌کند همه کدها از یک سبک واحد پیروی کنند.

    مثال: فرمت خودکار کد بر اساس قوانین تعریف شده

حوزه (2)

  • طراحی وب

    طراحی ظاهر و تجربه سایت: رنگ، تایپوگرافی، چیدمان و تعامل. ترکیب هنر و اصول UX/UI برای وب.

  • توسعه وب

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

داده (1)

  • JSON

    قالب سبک و متنی برای تبادل داده، مبتنی بر سینتکس شیء جاوااسکریپت.

    مثال: {"name": "John", "age": 30}

دسترسی‌پذیری (6)

  • ARIA Attributes

    ویژگی‌های دسترسی‌پذیری برای کمک به خواننده‌های صفحه (screen readers).

    مثال: aria-label="بستن" aria-hidden="true"

  • Contrast Ratio

    نسبت کنتراست بین متن و پس‌زمینه برای خوانایی.

    مثال: حداقل 4.5:1 برای متن عادی

  • WCAG

    راهنمای محتوای وب قابل دسترسی: استانداردهای دسترسی‌پذیری.

    مثال: WCAG 2.1, سطوح A, AA, AAA

  • ARIA Roles

    نقش‌های معنایی برای المان‌ها برای خواننده‌های صفحه.

    مثال: role="button", role="navigation"

  • ARIA States and Properties

    وضعیت‌ها و ویژگی‌های دسترسی‌پذیری برای المان‌ها.

    مثال: aria-expanded, aria-disabled, aria-label

  • Screen Reader

    نرم‌افزاری که محتوای صفحه را برای کاربران نابینا می‌خواند.

    مثال: NVDA, JAWS, VoiceOver

ذخیره‌سازی (3)

  • LocalStorage

    ذخیره‌سازی کلید/مقدار در مرورگر کاربر که حتی پس از بستن مرورگر نیز باقی می‌ماند.

    مثال: ذخیره تنظیمات کاربر یا توکن.

  • Cookie

    قطعه‌ای داده کوچک که توسط سرور ارسال و در مرورگر کاربر ذخیره می‌شود، اغلب برای شناسایی کاربر.

    مثال: ذخیره session ID یا تنظیمات شخصی‌سازی.

  • SessionStorage

    مشابه localStorage اما داده‌ها فقط برای مدت یک session (تا بسته شدن تب) ذخیره می‌شوند.

    مثال: ذخیره موقت اطلاعات فرم در چند صفحه.

رندرینگ (2)

  • SSR

    رندرینگ سمت سرور؛ فرآیند رندر کردن صفحات وب در سرور و ارسال HTML کامل به کلاینت.

    مثال: بهبود SEO و زمان بارگذاری اولیه.

  • CSR

    رندرینگ سمت کلاینت؛ فرآیندی که در آن جاوااسکریپت در مرورگر، DOM را می‌سازد و به روز می‌کند.

    مثال: رندر اولیه ممکن است کندتر باشد.

ریسپانسیو (2)

  • Breakpoints

    نقاط شکست برای تغییر استایل در اندازه‌های مختلف صفحه.

    مثال: @media (min-width: 768px) { }

  • Fluid Layout

    چیدمانی که با اندازه صفحه تغییر می‌کند (معمولاً با درصد یا fr).

    مثال: width: 100%; max-width: 1200px;

زبان (1)

  • TypeScript

    زبان برنامه‌نویسی با تایپ استاتیک که به جاوااسکریپت کامپایل می‌شود. برای پروژه‌های بزرگ و کم‌کردن باگ مفید است.

زبان‌های نشانه‌گذاری (3)

  • HTML

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

    درس مرتبط در آموزش طراحی وب ←

  • HTML5

    نسخه پنجم و جدیدترین نسخه از استاندارد زبان نشانه‌گذاری ابرمتن. ویژگی‌های جدیدی مانند تگ‌های معنایی، پشتیبانی از رسانه‌ها و گرافیک‌های برداری اضافه کرده است.

    مثال: <article>, <section>, <canvas>

  • Semantic HTML, HTML معنایی

    استفاده از تگ‌هایی که معنای محتوا را به مرورگر و موتورهای جستجو می‌فهمند. به بهبود سئو و دسترسی‌پذیری کمک می‌کند.

    مثال: <header>, <footer>, <nav>, <main>

سرور (3)

  • PHP

    زبان برنامه‌نویسی سمت سرور برای وب. در سرور اجرا می‌شود و خروجی HTML یا JSON به کلاینت می‌فرستد.

    درس مرتبط در آموزش طراحی وب ←

  • Edge Functions

    توابعی که در سرورهای لبه اجرا می‌شوند.

    مثال: Vercel Edge Functions, Cloudflare Workers

  • دیتابیس

    پایگاه داده برای ذخیره ساختاریافته. رابطه‌ای (MySQL, PostgreSQL) یا NoSQL (MongoDB). با کوئری داده خوانده و نوشته می‌شود.

سیستم مدیریت (2)

  • CMS Headless

    یک CMS که فقط backend (مدیریت محتوا) را ارائه می‌دهد و محتوا را از طریق API به frontend جداگانه می‌فرستد.

    مثال: استفاده از WordPress به عنوان headless با React.

  • CMS

    سیستم نرم‌افزاری که به کاربران اجازه می‌دهد محتوای وب‌سایت را بدون کدنویسی مدیریت کنند.

    مثال: WordPress, Joomla, Drupal

شبکه (14)

  • Connection Reuse

    استفاده مجدد از ارتباط TCP برای چند درخواست.

    مثال: Keep-Alive, HTTP/2

  • DNS

    سیستم نام دامنه: تبدیل نام دامنه به آدرس IP.

    مثال: example.com → 93.184.216.34

  • DNS Lookup

    فرآیند جستجوی آدرس IP برای یک دامنه.

    مثال: مرحله اول بارگذاری صفحه

  • Header Compression

    فشرده‌سازی هدرهای HTTP برای کاهش حجم.

    مثال: HPACK در HTTP/2

  • HTTP/2

    نسخه دوم پروتکل HTTP با قابلیت‌های پیشرفته.

    مثال: Multiplexing, Server Push, Header Compression

  • HTTP/3

    نسخه سوم پروتکل HTTP بر پایه QUIC (UDP).

    مثال: سرعت بیشتر، کاهش تأخیر

  • Multiplexing

    ارسال چند درخواست در یک ارتباط TCP.

    مثال: HTTP/2

  • QUIC Protocol

    پروتکل انتقال جدید بر پایه UDP برای کاهش تأخیر.

    مثال: HTTP/3 از این استفاده می‌کند

  • Server Push

    قابلیت سرور برای ارسال منابع قبل از درخواست کلاینت.

    مثال: HTTP/2 Server Push

  • TCP vs UDP

    تفاوت: TCP قابل اعتماد و مطمئن، UDP سریع‌تر اما بدون تضمین.

    مثال: وب (TCP) vs ویدیو (UDP)

  • WebSocket Protocol

    پروتکل ارتباط دوطرفه دائمی بین کلاینت و سرور.

    مثال: ws://, wss://

  • SPDY

    پروتکل قدیمی گوگل که الهام‌بخش HTTP/2 بود.

    مثال: منسوخ شده

  • CDN

    شبکه توزیع محتوا؛ سرورهای توزیع‌شده جغرافیایی که برای ارائه سریع‌تر محتوا استفاده می‌شوند.

    مثال: Cloudflare, Amazon CloudFront

  • DNS

    سیستم نام دامنه؛ آدرس‌های خواندنی انسان (مانند example.com) را به آدرس‌های IP ماشین ترجمه می‌کند.

    مثال: تنظیم رکوردهای A و CNAME در هاست.

شبکه اجتماعی (3)

  • Open Graph

    متا تگ‌ها برای کنترل نحوه نمایش لینک در شبکه‌های اجتماعی.

    مثال: <meta property="og:title" content="عنوان">

  • Twitter Cards

    متا تگ‌ها برای کنترل نمایش لینک در توییتر.

    مثال: <meta name="twitter:card" content="summary_large_image">

  • هشتگ, Hashtag

    برچسب متنی با # برای دسته‌بندی و جستجوی پست. در طراحی وب مثلاً #CSS #Frontend برای موضوع استفاده می‌شود.

طراحی (5)

  • UI, رابط کاربری

    رابط کاربری: ظاهر و المان‌های تعاملی که کاربر می‌بیند و با آن کار می‌کند. رنگ، تایپوگرافی و دکمه‌ها جزو UI هستند.

  • UX, تجربه کاربری

    تجربه کاربری: احساس و راحتی کاربر هنگام استفاده از محصول. تحقیق کاربر، وایرفریم و تست از مراحل UX است.

  • Design System

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

    مثال: Material Design, Ant Design

  • Design Tokens

    متغیرهای اصلی طراحی برای حفظ یکپارچگی بصری.

    مثال: رنگ، فاصله، شعاع، سایه

  • Mobile First

    رویکرد طراحی که اول نسخه موبایل را طراحی می‌کنی و بعد با media query برای دسکتاپ گسترش می‌دهی.

طراحی وب (7)

  • Mobile-First Design

    طراحی ابتدا برای موبایل، سپس برای صفحه‌های بزرگ‌تر گسترش یابد.

    مثال: @media (min-width: 768px) { }

  • Responsive, ریسپانسیو

    طراحی که با رسانه‌های مختلف (موبایل، تبلت، دسکتاپ) سازگار است. معمولاً با media query و واحدهای نسبی.

    درس مرتبط در آموزش طراحی وب ←

  • Accessibility, دسترسی‌پذیری

    دسترسی‌پذیری وب: امکان استفاده برای افراد با محدودیت (نابینا، کم‌بینا، فقط کیبورد). نقش‌های ARIA و کنتراست رنگ مهم است.

    درس مرتبط در آموزش طراحی وب ←

  • Above the Fold

    بخشی از صفحه که بدون اسکرول نمایش داده می‌شود.

    مثال: مهم‌ترین محتوا اینجا باشد

  • Desktop-First Design

    طراحی ابتدا برای دسکتاپ، سپس برای صفحه‌های کوچک‌تر ساده‌تر شود.

    مثال: @media (max-width: 768px) { }

  • Hero Section

    بخش بزرگ در بالای صفحه برای جلب توجه و معرفی اصلی.

    مثال: تصویر بزرگ + عنوان + دکمه CTA

  • Fixed Layout

    چیدمان با اندازه ثابت که با اندازه صفحه تغییر نمی‌کند.

    مثال: width: 1200px; margin: 0 auto;

فرانت‌اند (14)

  • Component Library

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

    مثال: Material-UI, Ant Design, Chakra UI

  • CSS Modules

    استایل‌های محلی برای کامپوننت‌ها با نام‌های یکتا.

    مثال: import styles from "./Button.module.css"

  • CSS-in-JS

    نوشتن استایل درون جاوااسکریپت (معمولاً در کامپوننت‌ها).

    مثال: Styled-components, Emotion

  • CSS-in-JS Libraries

    کتابخانه‌های مختلف برای CSS-in-JS.

    مثال: Styled-components, Emotion, JSS, Linaria

  • CSS-in-JS vs CSS Modules

    تفاوت: CSS-in-JS در جاوااسکریپت، CSS Modules فایل جدا با اسکوپ محلی.

    مثال: انتخاب بر اساس نیاز پروژه

  • Hydration

    فرآیند اضافه کردن تعامل به محتوای استاتیک توسط جاوااسکریپت.

    مثال: SSR + JS = تعاملی

  • Partial Hydration

    هیدریشن فقط بخش‌های تعاملی صفحه.

    مثال: جزایر تعاملی

  • Progressive Hydration

    هیدریشن تدریجی بخش‌ها با اولویت‌بندی.

    مثال: ابتدا بالای صفحه

  • Resumability

    قابلیت ادامه کار از همان جایی که سرور متوقف شده (بدون هیدریشن کامل).

    مثال: Qwik

  • Streaming SSR

    ارسال HTML به صورت استریم (بخش به بخش) به جای یکجا.

    مثال: کاهش TTFB

  • Styled Components

    کتابخانه CSS-in-JS برای استایل‌دهی به کامپوننت‌های React.

    مثال: const Button = styled.button`...`

  • کامپوننت

    بلوک قابل استفاده‌مجدد در UI (دکمه، کارت، هدر). در React و Vue با کامپوننت کد ماژولار می‌شود.

  • State

    وضعیت داده در یک لحظه در اپ. با تغییر state رابط به‌روز می‌شود. در React با useState و در Vue با data/reactive.

  • پیش‌رندر, SSR

    رندر سمت سرور: HTML اولیه در سرور ساخته می‌شود و به مرورگر فرستاده می‌شود. برای سئو و بار اول سریع‌تر.

فرمت تصویر (3)

  • WebP

    فرمت تصویر مدرن با فشرده‌سازی بهتر از JPEG و PNG.

    مثال: حجم کمتر، کیفیت بهتر

  • AVIF

    فرمت تصویر پیشرفته‌تر از WebP با فشرده‌سازی بهتر.

    مثال: نسل بعدی تصاویر وب

  • JPEG XL

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

    مثال: پشتیبانی هنوز محدود است

فرمت فونت (2)

  • Variable Fonts

    فونت‌هایی که چند وزن و سبک را در یک فایل پشتیبانی می‌کنند.

    مثال: حجم کمتر، انعطاف بیشتر

  • WOFF2

    فرمت فونت فشرده‌شده با بهترین پشتیبانی مدرن.

    مثال: حجم کمتر از WOFF

فریمورک (16)

  • React

    کتابخانه جاوااسکریپت فیسبوک برای ساخت رابط کاربری با کامپوننت و Virtual DOM. اکوسیستم بزرگ و شغل‌ساز.

    درس مرتبط در آموزش طراحی وب ←

  • Next.js

    فریمورک React برای برنامه‌های وب با قابلیت‌های پیشرفته.

    مثال: SSR, SSG, API Routes

  • Nuxt.js

    فریمورک Vue برای برنامه‌های وب با قابلیت‌های پیشرفته.

    مثال: SSR, SSG, Modules

  • Svelte

    فریمورک جاوااسکریپت که در زمان کامپایل کار می‌کند (نه ران‌تایم).

    مثال: بدون Virtual DOM

  • Vue

    فریمورک پیشرونده جاوااسکریپت برای UI. ترکیب ساده با HTML و قابلیت scale تا اپلیکیشن‌های بزرگ.

    درس مرتبط در آموزش طراحی وب ←

  • Astro

    فریمورک ساخت سایت‌های سریع با معماری جزایر.

    مثال: کامپوننت‌های تعاملی در صفحات استاتیک

  • Fresh

    فریمورک Deno برای برنامه‌های وب با عدم نیاز به باندلینگ.

    مثال: Islands Architecture

  • Gatsby

    فریمورک React برای سایت‌های استاتیک با عملکرد بالا.

    مثال: GraphQL, Image Optimization

  • Hydrogen

    فریمورک Shopify برای ساخت فروشگاه‌های آنلاین.

    مثال: React-based

  • Qwik

    فریمورک با تمرکز بر سرعت بارگذاری اولیه (Resumability).

    مثال: بارگذاری صفر جاوااسکریپت

  • Remix

    فریمورک React برای برنامه‌های وب با تمرکز بر وب استاندارد.

    مثال: Nested Routes, Loaders, Actions

  • SolidJS

    فریمورک واکنش‌گرا بدون Virtual DOM با عملکرد بالا.

    مثال: Signals به جای Hooks

  • SvelteKit

    فریمورک برنامه‌های وب برای Svelte (شبیه Next.js).

    مثال: SSR, SSG, API Endpoints

  • Synthetic Event

    رویداد مصنوعی در فریمورک‌ها مانند React برای سازگاری بین مرورگرها.

    مثال: React SyntheticEvent

  • Bootstrap

    یک فریمورک CSS محبوب برای توسعه واکنش‌گرا و موبایل‌فرست.

    مثال: استفاده از کلاس‌های از پیش تعریف شده مانند .container و .row.

  • Tailwind CSS

    یک فریمورک CSS کاربردی (utility-first) برای ساخت طرح‌های سفارشی سریع.

    مثال: کلاس‌هایی مانند p-4, text-center, bg-blue-500.

فریمورک جاوااسکریپت (2)

  • Angular

    یک پلتفرم و فریمورک جامع برای ساخت برنامه‌های وب کاربردی توسط گوگل.

    مثال: استفاده از TypeScript و معماری مبتنی بر کامپوننت.

  • Vue.js

    یک فریمورک پیشرونده جاوااسکریپت برای ساخت رابط‌های کاربری و برنامه‌های تک صفحه‌ای.

    مثال: Directiveهایی مانند v-if, v-for.

کتابخانه جاوااسکریپت (1)

  • React

    یک کتابخانه جاوااسکریپت برای ساخت رابط‌های کاربری، بر اساس کامپوننت.

    مثال: کامپوننت‌های قابل استفاده مجدد با state و props.

کنترل نسخه (2)

  • Git

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

    مثال: دستورات: git commit, git push, git pull

  • GitHub

    یک سرویس میزبانی مبتنی بر وب برای مخازن Git با ویژگی‌های همکاری و مدیریت پروژه.

    مثال: ذخیره کد پروژه و همکاری تیمی.

گرافیک (6)

  • SVG

    گرافیک برداری قابل اسکیل بدون کاهش کیفیت.

    مثال: <svg><circle cx="50" cy="50" r="40"/></svg>

  • Canvas API

    API برای ترسیم گرافیک 2D در المان canvas.

    مثال: getContext("2d")

  • Canvas vs SVG

    تفاوت: Canvas پیکسلی و پرسرعت، SVG برداری و قابل دستکاری.

    مثال: بازی (Canvas) vs آیکون (SVG)

  • WebGL

    API گرافیکی 3D برای مرورگر بدون نیاز به افزونه.

    مثال: Three.js, Babylon.js

  • WebGPU

    نسل بعدی API گرافیکی برای مرورگر با عملکرد بالاتر.

    مثال: جایگزین آینده WebGL

  • SVG

    گرافیک برداری مقیاس‌پذیر؛ فرمت تصویری بر اساس XML که بدون افت کیفیت در هر اندازه‌ای نمایش می‌یابد.

    مثال: آیکون‌ها، لوگوها و نمودارهای پیچیده.

مدیریت پروژه (5)

  • Kanban

    روشی بصری برای مدیریت کار که بر تحویل در زمان واقعی (just-in-time) و بهبود جریان کار تمرکز دارد.

    مثال: برد Kanban با ستون‌های To Do، In Progress، Done

  • MVP (Minimum Viable Product)

    نسخه‌ای از یک محصول با حداقل ویژگی‌های لازم برای عرضه به اولین کاربران و جمع‌آوری بازخورد.

    مثال: راه‌اندازی سریع محصول با ویژگی‌های اصلی برای تست بازار

  • Scrum

    چارچوبی در Agile برای مدیریت کار تیمی پیچیده که بر یادگیری تجربی، خودسازماندهی و بهبود مستمر تأکید دارد.

    مثال: اسپرینت‌ها، استندآپ‌ها، نقش‌های Scrum Master و Product Owner

  • Agile Methodology

    رویکردی تکراری و افزایشی برای مدیریت پروژه که بر تحویل بخش‌های کوچک و دریافت بازخورد تمرکز دارد.

    مثال: اسکرام (Scrum)، کانبان (Kanban)

  • User Story

    توضیحی ساده و غیررسمی از یک ویژگی سیستم از دیدگاه کاربر نهایی.

    مثال: به عنوان یک کاربر، می‌خواهم لاگین کنم تا به حساب شخصی خود دسترسی داشته باشم.

مرورگر (2)

  • DOM

    مدل شیء سند: نمایش درختی از HTML که جاوااسکریپت می‌تواند آن را تغییر دهد. هر تگ یک نود است.

  • Local Storage

    ذخیره‌سازی کلید-مقدار در مرورگر بدون انقضا. برای نگه‌داری تنظیمات یا کش در سمت کلاینت.

معماری (9)

  • فرانت‌اند, Frontend

    سمت کاربر: آنچه در مرورگر اجرا می‌شود (HTML, CSS, JS). ظاهر و تعامل با کاربر را فرانت‌اند انجام می‌دهد.

  • JAMstack

    معماری مدرن: JavaScript, APIs, Markup (پیش‌رندر شده).

    مثال: سرعت، امنیت، مقیاس‌پذیری

  • بک‌اند, Backend

    سمت سرور: منطق، دیتابیس و API. کاربر مستقیماً کد بک‌اند را نمی‌بیند؛ فقط نتیجه درخواست را می‌گیرد.

  • Edge Computing

    اجرای کد نزدیک به کاربر (در لبه شبکه) برای کاهش تأخیر.

    مثال: Edge Functions, Edge Middleware

  • Islands Architecture

    معماری برای ترکیب استاتیک و تعاملی: جزایر تعاملی در دریای استاتیک.

    مثال: Astro, Marko

  • Micro Frontends

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

    مثال: تیم‌های مستقل، فناوری‌های مختلف

  • Monorepo

    یک مخزن برای چند پروژه یا پکیج مرتبط.

    مثال: Nx, Turborepo, Lerna

  • Polyrepo

    مخزن جداگانه برای هر پروژه یا پکیج.

    مثال: رویکرد سنتی

  • Serverless

    اجرای کد بدون مدیریت سرور (پرداخت بر اساس استفاده).

    مثال: AWS Lambda, Vercel Serverless

مفهوم (2)

  • PWA

    برنامه پیشرونده وب؛ وب‌اپلیکیشن‌هایی که مانند اپلیکیشن‌های موبایل رفتار و تجربه می‌دهند.

    مثال: قابلیت نصب، کار آفلاین، push notification.

  • SPA

    برنامه تک صفحه‌ای؛ وب‌اپلیکیشنی که کل تعامل کاربر در یک صفحه بارگیری شده واحد اتفاق می‌افتد.

    مثال: برنامه‌های ساخته شده با React یا Vue.

میزبانی (1)

  • FTP

    پروتکل انتقال فایل؛ برای انتقال فایل‌های سایت بین کامپیوتر کاربر و سرور میزبان.

    مثال: استفاده از نرم‌افزارهایی مانند FileZilla.

نام‌گذاری (1)

  • BEM

    یک روش نام‌گذاری برای کلاس‌های CSS برای ایجاد کدهای قابل فهم و قابل استفاده مجدد.

    مثال: block__element--modifier

وب (1)

  • Cookie

    داده کوچک ذخیره‌شده در مرورگر که با هر درخواست به سرور فرستاده می‌شود. برای session و ترجیحات کاربر.

وب سرویس (2)

  • REST API

    سبکی معماری برای طراحی سرویس‌های وب که از پروتکل HTTP و اصول ساده استفاده می‌کند.

    مثال: دریافت داده از یک آدرس URL با متد GET.

  • API Endpoint

    یک URL خاص که یک API در آن درخواست‌ها را دریافت و پاسخ را ارسال می‌کند.

    مثال: https://api.example.com/users
لینک کپی شد!