انواع داده و حافظه

7

primitive در مقابل reference

هفت نوع primitive بر اساس مقدار کپی می‌شوند؛ آبجکت‌ها (شیء، آرایه، تابع) بر اساس ارجاع.

⌄

انواع داده و حافظهجونیور◫ نمودارprimitivereferencevaluecopy

حافظه: stack و heap

primitiveها و ارجاع‌ها در stack نگه‌داری می‌شوند؛ خود آبجکت‌ها در heap زندگی می‌کنند.

⌄

انواع داده و حافظهمیدلول◫ نمودارmemorystackheapgarbage collection

تشخیص نوع داده

typeof برای primitiveها، instanceof برای آبجکت‌ها و Array.isArray برای آرایه‌ها.

⌄

انواع داده و حافظهجونیورtypeofinstanceofisArray

null در برابر undefined

undefined یعنی مقداردهی نشده؛ null یعنی نبودِ عمدیِ مقدار.

⌄

انواع داده و حافظهجونیورnullundefinednullish

Garbage Collection

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

⌄

انواع داده و حافظهسینیورmemorygarbage collectionmark-and-sweep

BigInt

نوعی primitive برای اعداد صحیح بزرگ‌تر از محدوده‌ی امنِ Number (بیش از 2^53).

⌄

انواع داده و حافظهمیدلولbigintnumbers

دقت اعداد اعشاری

اعداد در JS با استاندارد IEEE 754 (ممیز شناور ۶۴ بیتی) ذخیره می‌شوند، پس بعضی کسرها دقیق نیستند.

⌄

انواع داده و حافظهمیدلولfloatIEEE 754precision

اسکوپ، هویستینگ و TDZ

4

زنجیره‌ی اسکوپ و lexical scope

اسکوپ در جاوااسکریپت واژگانی (lexical) است: بر اساس جای نوشته‌شدن کد تعیین می‌شود، نه جای فراخوانی.

⌄

اسکوپ، هویستینگ و TDZمیدلول◫ نمودارscopelexicalchain

هویستینگ (hoisting)

تعریف‌ها در فاز کامپایل به بالای اسکوپ منتقل می‌شوند؛ ولی نحوه‌اش برای var و function و let فرق دارد.

⌄

اسکوپ، هویستینگ و TDZمیدلول◫ نمودارhoistingvarfunction

TDZ و تفاوت var/let/const

هر سه hoist می‌شوند، اما let و const تا خط تعریف در ناحیه‌ی مرده‌ی زمانی (TDZ) قرار دارند.

⌄

اسکوپ، هویستینگ و TDZسینیور◫ نمودارTDZletconstvar

اسکوپ بلوکی

let و const در هر بلوک { } اسکوپ مستقل می‌سازند؛ این رفتار حلقه‌ها را قابل‌پیش‌بینی می‌کند.

⌄

اسکوپ، هویستینگ و TDZجونیورblockletloop

کلوژرها

3

closure چیست

closure یعنی یک تابع به‌همراه محیط واژگانی‌ای که در آن ساخته شده؛ حتی پس از پایان تابع بیرونی زنده می‌ماند.

⌄

کلوژرهامیدلول◫ نمودارclosurelexical environment

closure در حلقه

تله‌ی کلاسیک: با var همه‌ی closureها یک binding مشترک می‌گیرند؛ با let هر تکرار binding تازه دارد.

⌄

کلوژرهاسینیورclosureloopvarlet

کاربردهای closure

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

⌄

کلوژرهاسینیورprivacymemoizecurrying

کلیدواژه‌ی this

4

قواعد this

مقدار this به «جایگاه فراخوانی» بستگی دارد و بر اساس اولویت تعیین می‌شود.

⌄

کلیدواژه‌ی thisسینیور◫ نمودارthisbindingcall-site

this در arrow function

arrow function this مخصوص خودش ندارد و آن را از اسکوپ تعریف به ارث می‌برد.

⌄

کلیدواژه‌ی thisمیدلولarrowthislexical

bind، call و apply

هر سه this را صریح تعیین می‌کنند؛ call/apply بلافاصله اجرا می‌کنند، bind تابع تازه برمی‌گرداند.

⌄

کلیدواژه‌ی thisمیدلولbindcallapply

از دست رفتن this هنگام جداکردن متد

obj.method() درست کار می‌کند، اما اگر متد را در متغیر بریزی و جدا صدا بزنی، this گم می‌شود.

⌄

کلیدواژه‌ی thisسینیور◫ نمودارthisreference typemethod

پروتوتایپ و وراثت

7

زنجیره‌ی پروتوتایپ

وقتی پراپرتی روی شیء پیدا نشود، موتور زنجیره‌ی __proto__ را بالا می‌رود تا به null برسد.

⌄

پروتوتایپ و وراثتسینیور◫ نمودارprototype__proto__inheritance

__proto__ در برابر prototype

prototype روی تابع سازنده است؛ __proto__ روی نمونه‌ها و به همان prototype اشاره می‌کند.

⌄

پروتوتایپ و وراثتسینیور__proto__prototype

class به‌عنوان sugar

کلاس‌ها فقط نحو شیرین روی همان مدل پروتوتایپ هستند، نه یک سیستم وراثت جدید.

⌄

پروتوتایپ و وراثتمیدلولclasssyntactic sugar

وراثت با extends و super

extends زنجیره‌ی پروتوتایپ را بین دو کلاس برقرار می‌کند و super سازنده/متد والد را صدا می‌زند.

⌄

پروتوتایپ و وراثتمیدلولextendssuperinheritance

عملگر new و سازنده

new یک آبجکت خالی می‌سازد، prototype را وصل می‌کند، سازنده را با this برابر آن آبجکت اجرا و در نبودِ return شیئی، خودش را برمی‌گرداند.

⌄

پروتوتایپ و وراثتمیدلول◫ نمودارnewconstructorthis

اعضای static کلاس

متد و پراپرتی static روی خود کلاس قرار می‌گیرند، نه روی نمونه‌ها؛ برای توابع کمکی و factory مناسب‌اند.

⌄

پروتوتایپ و وراثتمیدلولstaticclass

عملگر instanceof

بررسی می‌کند آیا prototype یک سازنده در زنجیره‌ی پروتوتایپِ یک آبجکت قرار دارد یا نه.

⌄

پروتوتایپ و وراثتمیدلولinstanceofprototype

توابع

5

توابع درجه‌یک و HOF

تابع‌ها مقدار هستند: می‌توان آن‌ها را در متغیر ریخت، پاس داد و برگرداند.

⌄

توابعجونیورfirst-classhigher-ordercallback

IIFE

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

⌄

توابعمیدلولiifescopeencapsulation

پارامتر پیش‌فرض، rest و spread

default مقدار پیش‌فرض می‌دهد، rest آرگومان‌ها را جمع می‌کند و spread آن‌ها را پخش می‌کند.

⌄

توابعجونیورdefaultrestspread

currying و partial application

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

⌄

توابعسینیورcurryingpartialclosure

بازگشت (Recursion) و استک

تابعی که خودش را صدا می‌زند؛ به یک شرط پایه (base case) برای توقف نیاز دارد وگرنه استک سرریز می‌شود.

⌄

توابعمیدلولrecursioncall stackbase case

آرایه‌ها و متدها

4

map، filter و reduce

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

⌄

آرایه‌ها و متدهاجونیور◫ نمودارmapfilterreduce

متدهای mutating در برابر غیرمخرب

برخی متدها آرایه‌ی اصلی را تغییر می‌دهند و برخی کپی تازه می‌سازند؛ تمایزشان مهم است.

⌄

آرایه‌ها و متدهامیدلولmutatingimmutable

find، some، every و flat

متدهای جست‌وجو و بررسی شرط روی آرایه برای کدِ خواناتر.

⌄

آرایه‌ها و متدهاجونیورfindsomeeveryflat

forEach در برابر map

هر دو روی آرایه می‌چرخند، اما map آرایه‌ی تازه برمی‌گرداند و forEach مقداری برنمی‌گرداند (undefined).

⌄

آرایه‌ها و متدهاجونیورforEachmaparrays

آبجکت‌ها

7

کپی سطحی و عمیق

spread و Object.assign فقط یک سطح کپی می‌کنند؛ برای کپی عمیق به ابزار دیگری نیاز است.

⌄

آبجکت‌هاسینیورshallowdeepclone

destructuring

استخراج مقادیر از آبجکت و آرایه با امکان تغییر نام و مقدار پیش‌فرض.

⌄

آبجکت‌هاجونیورdestructuringdefaultrename

optional chaining و nullish

?. دسترسی امن به پراپرتی‌های احتمالاً نبوده می‌دهد و ?? فقط null/undefined را جایگزین می‌کند.

⌄

آبجکت‌هامیدلولoptional-chainingnullish??

چرا for...in را با احتیاط

for...in روی همه‌ی کلیدهای enumerable از جمله ارث‌رسیده می‌چرخد و ترتیبش تضمین‌شده نیست.

⌄

آبجکت‌هامیدلولfor-initerationenumerable

Property Flags و Descriptors

هر پراپرتی سه پرچم دارد: writable، enumerable و configurable که با Object.defineProperty کنترل می‌شوند.

⌄

آبجکت‌هاسینیورdescriptordefinePropertyenumerable

Getter و Setter

پراپرتی‌های accessor که به‌جای ذخیره‌ی مقدار، هنگام خواندن/نوشتن یک تابع اجرا می‌کنند.

⌄

آبجکت‌هامیدلولgettersetteraccessor

متدهای JSON

JSON.stringify آبجکت را به رشته و JSON.parse رشته را به آبجکت تبدیل می‌کند؛ با replacer و reviver قابل سفارشی‌سازی است.

⌄

آبجکت‌هاجونیورJSONstringifyparse

ناهمگام و Event Loop

12

Event Loop و microtask/macrotask

وقتی call stack خالی شود، کل صف microtask پیش از برداشتن یک macrotask تخلیه می‌شود.

⌄

ناهمگام و Event Loopسینیور◫ نمودارevent loopmicrotaskmacrotask

Promise و حالت‌هایش

Promise یک عملیات ناهمگام را نمایندگی می‌کند با سه حالت: pending، fulfilled و rejected.

⌄

ناهمگام و Event Loopمیدلول◫ نمودارpromisethencatch

async/await

نحو خواناتر روی Promiseها؛ await تابع را می‌شکند و ادامه را به‌صورت microtask زمان‌بندی می‌کند.

⌄

ناهمگام و Event Loopمیدلولasyncawaitpromise

all، allSettled، race و any

چهار ترکیب‌کننده برای اجرای هم‌زمان چند Promise با رفتارهای متفاوت.

⌄

ناهمگام و Event Loopسینیور◫ نمودارPromise.allraceanyallSettled

جاوااسکریپت: parallel یا concurrent؟

جاوااسکریپت تک‌نخی و concurrent است، نه parallel؛ کارها را با هم پیش می‌برد ولی هم‌زمان اجرا نمی‌کند.

⌄

ناهمگام و Event Loopسینیورconcurrencysingle-threadevent loop

Call Stack

ساختار LIFO که فراخوانی توابع در حال اجرا را پیگیری می‌کند.

⌄

ناهمگام و Event Loopمیدلولcall stackexecution

عملیات Non-Blocking I/O

عملیات ورودی/خروجی نخ اصلی را مسدود نمی‌کند؛ کار به محیط واگذار و نتیجه بعداً به‌صورت callback برمی‌گردد.

⌄

ناهمگام و Event Loopسینیورnon-blockingioasync

چرا await در حلقه نه

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

⌄

ناهمگام و Event LoopسینیورawaitloopPromise.all

چرا این کد تمام نمی‌شود

اگر یک microtask مدام microtask تازه صف کند، صف هرگز خالی نمی‌شود و event loop به macrotaskها و رندر نمی‌رسد.

⌄

ناهمگام و Event Loopسینیورevent loopmicrotaskstarvation

زمان‌بندی: setTimeout و setInterval

setTimeout یک‌بار پس از تأخیر و setInterval به‌صورت تکرارشونده اجرا می‌کند؛ هر دو با clear* لغو می‌شوند.

⌄

ناهمگام و Event LoopجونیورsetTimeoutsetIntervalscheduling

Promisification

تبدیل یک API مبتنی بر callback به نسخه‌ای که Promise برمی‌گرداند تا با async/await قابل‌استفاده شود.

⌄

ناهمگام و Event Loopسینیورpromisecallbackpromisify

پیمایش ناهمگام و async generator

for await...of روی منابع ناهمگام می‌چرخد و async generator با yield مقادیر را به‌مرور و ناهمگام تولید می‌کند.

⌄

ناهمگام و Event Loopسینیورasync iteratorfor awaitasync generator

ویژگی‌های ES6+

8

ماژول‌ها: import و export

ماژول‌های ES اسکوپ مستقل دارند، به‌صورت پیش‌فرض strict هستند و یک‌بار اجرا و کش می‌شوند.

⌄

ویژگی‌های ES6+میدلولmodulesimportexportESM

generator و iterator

تابع generator با function* اجرا را در yield متوقف و از سر می‌گیرد و یک iterator می‌سازد.

⌄

ویژگی‌های ES6+سینیورgeneratoriteratoryield

Symbol و قابلیت پیمایش

Symbol مقدار یکتای غیرقابل‌تصادم می‌سازد و Symbol.iterator رفتار پیمایش را تعریف می‌کند.

⌄

ویژگی‌های ES6+سینیورsymboliterablefor-of

Map در برابر WeakMap

Map هر نوع کلیدی را نگه می‌دارد و قابل‌پیمایش است؛ WeakMap فقط کلید آبجکتی دارد و مانع garbage collection نمی‌شود.

⌄

ویژگی‌های ES6+سینیورMapWeakMapmemory

چرا ماژول‌ها Singleton‌اند

هر ماژول فقط یک‌بار ارزیابی می‌شود و نتیجه‌اش کش می‌شود؛ همه‌ی importها همان نمونه‌ی واحد را می‌گیرند.

⌄

ویژگی‌های ES6+سینیورmodulessingletoncache

AMD، CommonJS، UMD و ESM

سیستم‌های ماژول پیش از ESM: CommonJS همگام (مناسب سرور/Node)، AMD ناهمگام (مناسب مرورگر)، UMD ترکیبی؛ امروزه ESM استاندارد است.

⌄

ویژگی‌های ES6+سینیورmodulesAMDCommonJSESM

Map و Set

Map یک نگاشت کلید-مقدار با کلید از هر نوع و ترتیب درج‌محفوظ است؛ Set مجموعه‌ای از مقادیر یکتاست.

⌄

ویژگی‌های ES6+میدلول◫ نمودارMapSetcollections

Proxy و Reflect

Proxy عملیات روی یک آبجکت (خواندن، نوشتن، حذف) را با trapها رهگیری می‌کند؛ Reflect همان عملیات پیش‌فرض را به‌صورت تابع فراهم می‌کند.

⌄

ویژگی‌های ES6+سینیورproxyreflectmetaprogramming

عملگرها و تبدیل نوع

4

== در برابر ===

=== بدون تبدیل نوع مقایسه می‌کند؛ == ابتدا نوع‌ها را همسان می‌کند و رفتار غیرشهودی دارد.

⌄

عملگرها و تبدیل نوعجونیورequality=====

مقادیر truthy و falsy

هشت مقدار falsy وجود دارد؛ بقیه‌ی همه‌چیز truthy است.

⌄

عملگرها و تبدیل نوعجونیورtruthyfalsyboolean

تبدیل نوع ضمنی

عملگرها بسته به نوع عملوندها تبدیل خودکار انجام می‌دهند؛ + با رشته الحاق می‌کند.

⌄

عملگرها و تبدیل نوعمیدلولcoerciontype conversion

تبدیل آبجکت به primitive

وقتی آبجکت در عملیاتی نیاز به primitive دارد، موتور بسته به hint از Symbol.toPrimitive، valueOf یا toString استفاده می‌کند.

⌄

عملگرها و تبدیل نوعسینیورtoPrimitivevalueOftoString

الگوها و متفرقه

11

debounce و throttle

دو تکنیک کنترل نرخ اجرا برای رویدادهای پرتکرار مثل scroll، resize و تایپ.

⌄

الگوها و متفرقهسینیور◫ نمودارdebouncethrottleperformance

کپی عمیق

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

⌄

الگوها و متفرقهمیدلولclonestructuredClone

module pattern

با closure یک API عمومی همراه با state خصوصی می‌سازد؛ جد ماژول‌های امروزی.

⌄

الگوها و متفرقهمیدلولmoduleclosureencapsulation

SyntaxError در برابر TypeError

SyntaxError هنگام پارس کدِ نامعتبر رخ می‌دهد؛ TypeError هنگام اجرا وقتی مقداری از نوع نادرست استفاده شود.

⌄

الگوها و متفرقهجونیورerrorsSyntaxErrorTypeError

حالت strict

'use strict' محدودیت‌های امن‌تری اعمال می‌کند: جلوگیری از متغیر اعلام‌نشده، خطا روی تخصیص‌های نامعتبر و this برابر undefined در فراخوانی ساده.

⌄

الگوها و متفرقهمیدلولuse strictstrict mode

آبجکت‌های native در برابر host

native آبجکت‌ها بخشی از خود زبان (طبق ECMAScript) مثل Array و Math‌اند؛ host آبجکت‌ها را محیط اجرا فراهم می‌کند مثل window و XMLHttpRequest.

⌄

الگوها و متفرقهمیدلولnative objectshost objects

چرا توسعه‌ی آبجکت‌های بومی بد است

افزودن متد به prototypeِ آبجکت‌های بومی (مثل Array.prototype) خطرناک است چون می‌تواند با کتابخانه‌ها تداخل و رفتار را خراب کند.

⌄

الگوها و متفرقهسینیورprototypebuilt-insanti-pattern

مدیریت خطا با try...catch

try بلوک مشکوک به خطا را اجرا می‌کند، catch خطای زمان اجرا را می‌گیرد و finally همیشه (با خطا یا بی‌خطا) اجرا می‌شود.

⌄

الگوها و متفرقهمیدلول◫ نمودارerror handlingtry catchfinally

خطاهای سفارشی

با ارث‌بری از Error می‌توان کلاس خطای دامنه‌ای ساخت تا انواع خطا را دقیق‌تر تشخیص و مدیریت کرد.

⌄

الگوها و متفرقهسینیورcustom errorsErrorextends

Mixin

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

⌄

الگوها و متفرقهسینیورmixincompositionprototype

عبارات باقاعده (Regex)

الگوهایی برای جست‌وجو و جایگزینی در متن، با فلگ‌هایی مثل g (سراسری)، i (بی‌توجه به بزرگی حروف) و m (چندخطی).

⌄

الگوها و متفرقهمیدلولregexpatternflags

CSS

19

استراتژی Mobile-first

ابتدا برای صفحه‌ی کوچک طراحی کن و با media queryهای min-width لایه‌های بزرگ‌تر را اضافه کن.

⌄

CSSمیدلولresponsivemobile-firstmedia query

Box Model در CSS

هر المنت جعبه‌ای است متشکل از content، padding، border و margin از داخل به بیرون.

⌄

CSSجونیور◫ نمودارbox modelmarginpaddingborder

rem در برابر em

rem نسبت به فونت ریشه (html) محاسبه می‌شود؛ em نسبت به فونت خودِ المنت و انباشته می‌شود.

⌄

CSSمیدلولrememunits

پراپرتی position

جایگاه‌گیری المنت را تعیین می‌کند: static، relative، absolute، fixed و sticky.

⌄

CSSمیدلول◫ نمودارpositionrelativeabsolutesticky

ثابت‌ماندن ابعاد با box-sizing

با border-box، padding و border داخل عرض/ارتفاع تعریف‌شده حساب می‌شوند و ابعاد ثابت می‌ماند.

⌄

CSSجونیور◫ نمودارbox-sizingborder-box

Pseudo-element و Pseudo-class

pseudo-class حالت المنت را هدف می‌گیرد (hover, focus)؛ pseudo-element بخشی از آن را (before, first-line).

⌄

CSSمیدلولpseudo-classpseudo-element

Grid در برابر Flexbox

Flexbox برای چیدمان یک‌بُعدی (ردیف یا ستون) و Grid برای چیدمان دوبُعدی (سطر و ستون هم‌زمان) است.

⌄

CSSمیدلول◫ نمودارgridflexboxlayout

Specificity در CSS

وزنِ یک سلکتور که تعیین می‌کند هنگام تعارض، کدام قانون اعمال شود.

⌄

CSSسینیورspecificitycascade

Reset در برابر Normalize

Reset همه‌ی استایل پیش‌فرض مرورگر را صفر می‌کند؛ Normalize استایل‌های مفید را نگه می‌دارد و فقط ناسازگاری‌ها را اصلاح می‌کند.

⌄

CSSمیدلولresetnormalizecross-browser

float و پاک‌سازی آن

float المنت را از جریان عادی خارج نمی‌کند ولی محتوای اطراف دورش می‌چرخد؛ والدِ فقط‌float ارتفاعش صفر می‌شود و باید clear شود.

⌄

CSSمیدلولfloatclearfixclear

z-index و Stacking Context

z-index ترتیب روی‌هم‌قرارگرفتن المنت‌های دارای position غیر static را کنترل می‌کند، اما درون «بافت روی‌هم‌چینی» محلی عمل می‌کند.

⌄

CSSسینیور◫ نمودارz-indexstacking contextposition

Block Formatting Context (BFC)

ناحیه‌ای مستقل در رندر که جعبه‌های بلوکی داخلش چیده می‌شوند؛ floatها را در بر می‌گیرد و از collapse مارجین جلوگیری می‌کند.

⌄

CSSسینیورBFClayoutfloat

پراپرتی display

تعیین می‌کند یک المنت چطور در چیدمان رفتار کند: block، inline، inline-block، flex، grid، none و غیره.

⌄

CSSجونیورdisplayblockinlineflex

inline در برابر inline-block

inline عرض/ارتفاع نمی‌پذیرد و فقط مارجین/پدینگ افقی مؤثر دارد؛ inline-block در کنار بقیه می‌ماند ولی width و height می‌گیرد.

⌄

CSSمیدلولinlineinline-blockdisplay

طراحی Responsive در برابر Adaptive

Responsive یک چیدمان سیال است که با هر اندازه‌ای کش می‌آید؛ Adaptive چند چیدمان از پیش‌تعریف‌شده برای breakpointهای مشخص دارد.

⌄

CSSمیدلولresponsiveadaptivedesign

پیش‌پردازنده‌های CSS

ابزارهایی مثل Sass و Less که با متغیر، nesting، mixin و توابع، نوشتن CSS قابل‌نگه‌داری‌تر را ممکن می‌کنند.

⌄

CSSمیدلولsasslesspreprocessor

انواع media به‌جز screen

علاوه بر screen، انواع دیگری مثل print، speech و all برای هدف‌گیری رسانه‌های مختلف وجود دارد.

⌄

CSSجونیورmedia queryprintmedia types

سلکتور کارآمد و تطبیق راست‌به‌چپ

مرورگر سلکتورها را از راست‌ترین بخش (key selector) به چپ تطبیق می‌دهد؛ زنجیره‌ی کوتاه‌تر و کلاس‌محور سریع‌تر است.

⌄

CSSسینیورperformanceselectorsrendering

translate در برابر موقعیت‌دهی absolute

تغییر transform: translate باعث reflow/repaint نمی‌شود و روی GPU انجام می‌گیرد؛ تغییر موقعیت absolute باعث reflow و استفاده از CPU می‌شود.

⌄

CSSسینیورtransformtranslateperformancereflow

HTML

8

اتریبیوت tabindex

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

⌄

HTMLمیدلولtabindexaccessibilityfocus

تگ picture

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

⌄

HTMLمیدلولpictureresponsive imagesart direction

اعلان DOCTYPE

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

⌄

HTMLجونیورdoctypestandards mode

اتریبیوت‌های data-*

راهی استاندارد برای ذخیره‌ی داده‌ی سفارشی روی المنت‌ها که از طریق dataset در JS خوانده می‌شود.

⌄

HTMLجونیورdata attributesdataset

المنت template

نگه‌داری قطعه‌ای از HTML که رندر نمی‌شود تا با JS کلون و درج شود؛ پایه‌ی محتوای پویا.

⌄

HTMLمیدلولtemplateDOM

چه زمانی section نه

section برای بخش معنادارِ دارای عنوان است؛ برای گروه‌بندیِ صرفِ استایل از div استفاده کن.

⌄

HTMLمیدلولsectionsemantic html

Semantic HTML

استفاده از تگ‌هایی که معنای محتوا را می‌رسانند (header، nav، main، article) به‌جای div همه‌کاره.

⌄

HTMLجونیورsemantic htmlaccessibilityseo

Canvas در برابر SVG

Canvas مبتنی بر پیکسل و دستوری است (مناسب گرافیک پویا و بازی)؛ SVG برداری و توصیفی است (مناسب گرافیک مقیاس‌پذیر و دسترس‌پذیر).

⌄

HTMLمیدلولcanvassvggraphics

TypeScript

10

Generic در تایپ‌اسکریپت

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

⌄

TypeScriptمیدلولgenericsreusable types

چه زمانی Tuple نه

tuple برای داده‌ی ثابتِ موقعیتی خوب است؛ اما وقتی اعضا هم‌نوع و تعدادشان متغیر است، آرایه یا آبجکت بهتر است.

⌄

TypeScriptمیدلولtupletypescript

کلمه‌کلیدی declare

به کامپایلر می‌گوید چیزی در زمان اجرا وجود دارد، بدون تولید کد؛ برای توصیف APIهای خارجی.

⌄

TypeScriptسینیورdeclareambienttypes

Utility Typeهای پرکاربرد

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

⌄

TypeScriptمیدلولPartialPickOmitRecord

فایل d.ts

فایل تعریف نوع که فقط تایپ‌ها را توصیف می‌کند، بدون پیاده‌سازی؛ برای کتابخانه‌ها و کد JS.

⌄

TypeScriptمیدلولd.tsdeclarationtypes

type در برابر interface

هر دو شکل آبجکت را توصیف می‌کنند؛ interface قابل‌گسترش و ادغام است، type انعطاف بیشتری دارد.

⌄

TypeScriptسینیورtypeinterface

عبارت keyof typeof

typeof نوعِ یک مقدار را می‌گیرد و keyof کلیدهای آن نوع را به‌صورت union رشته‌ای می‌دهد.

⌄

TypeScriptسینیورkeyoftypeof

کلمه‌کلیدی infer

در تایپ‌های شرطی، یک نوع را از درون ساختار دیگری استخراج و در یک متغیر نوع می‌ریزد.

⌄

TypeScriptسینیورinferconditional types

Narrowing در تایپ‌اسکریپت

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

⌄

TypeScriptمیدلولnarrowingtype guards

void در برابر never

void یعنی تابع چیزی برنمی‌گرداند؛ never یعنی تابع هرگز به‌طور عادی برنمی‌گردد (خطا یا حلقه‌ی بی‌نهایت).

⌄

TypeScriptسینیورvoidnever

مرورگر و DOM

14

Node در برابر Element در DOM

Node نوع پایه‌ی همه‌ی گره‌های DOM است؛ Element زیرمجموعه‌ای از Node که فقط تگ‌هاست.

⌄

مرورگر و DOMمیدلولdomnodeelement

load در برابر DOMContentLoaded

DOMContentLoaded وقتی شلیک می‌شود که HTML پارس شد؛ load وقتی همه‌ی منابع (تصویر، استایل) هم بارگذاری شدند.

⌄

مرورگر و DOMمیدلولeventsloadDOMContentLoaded

Event Delegation

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

⌄

مرورگر و DOMمیدلولeventsdelegationbubbling

اتریبیوت‌های defer و async

هر دو دانلود اسکریپت را غیرمسدودکننده می‌کنند؛ defer ترتیب را حفظ و پس از پارس اجرا می‌کند، async به‌محض آماده‌شدن.

⌄

مرورگر و DOMمیدلولscriptdeferasync

cookie، localStorage و sessionStorage

هر سه ذخیره‌سازی کلید-مقدارِ سمت کلاینت‌اند، ولی در عمر، ظرفیت و ارسال‌شدن به سرور تفاوت دارند.

⌄

مرورگر و DOMمیدلول◫ نمودارstoragecookielocalStoragesessionStorage

Attribute در برابر Property

attribute روی markup اولیه‌ی HTML تعریف می‌شود؛ property روی آبجکت DOM زندگی می‌کند و می‌تواند از مقدار اولیه جدا شود.

⌄

مرورگر و DOMسینیورdomattributeproperty

Event Bubbling و Capturing

پس از وقوع رویداد روی یک المنت، رویداد به‌سمت بالا تا document حباب می‌شود؛ همین مکانیزم پایه‌ی event delegation است.

⌄

مرورگر و DOMمیدلول◫ نمودارeventsbubblingcapturing

Feature Detection در برابر UA

feature detection بررسی می‌کند آیا قابلیتی پشتیبانی می‌شود؛ روشی مطمئن‌تر از تکیه بر رشته‌ی User Agent (که جعل‌پذیر است).

⌄

مرورگر و DOMمیدلولfeature detectionuser agentcompatibility

یافتن المنت‌ها در DOM

روش‌های جست‌وجوی المنت: getElementById، querySelector (اولین تطبیق) و querySelectorAll (همه، به‌صورت لیست ایستا).

⌄

مرورگر و DOMجونیورdomquerySelectorgetElementById

جلوگیری از رفتار پیش‌فرض مرورگر

بسیاری رویدادها رفتار پیش‌فرض دارند (رفتن لینک، ارسال فرم) که با preventDefault می‌توان جلوی آن را گرفت.

⌄

مرورگر و DOMمیدلولpreventDefaultevents

رویدادهای سفارشی

با CustomEvent و dispatchEvent می‌توان رویداد دلخواه ساخت و داده را در فیلد detail منتقل کرد.

⌄

مرورگر و DOMمیدلولCustomEventdispatchEvent

MutationObserver

به تغییرات DOM (افزودن/حذف نود، تغییر اتریبیوت یا متن) گوش می‌دهد و به‌صورت ناهمگام (microtask) گزارش می‌دهد.

⌄

مرورگر و DOMسینیورMutationObserverdomobserve

IndexedDB

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

⌄

مرورگر و DOMسینیورIndexedDBstorageoffline

Blob و File

Blob داده‌ی باینری خام را نمایندگی می‌کند؛ File نوعی Blob با نام و تاریخ است و FileReader محتوای آن را می‌خواند.

⌄

مرورگر و DOMسینیورBlobFileFileReader

شبکه و HTTP

16

متد HEAD در برابر OPTIONS

HEAD مثل GET است ولی فقط هدرها را برمی‌گرداند؛ OPTIONS متدها و قابلیت‌های مجاز روی منبع را می‌دهد.

⌄

شبکه و HTTPمیدلولhttpHEADOPTIONS

User Agent

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

⌄

شبکه و HTTPجونیورuser agenthttp header

DNS

سیستمی که نام دامنه را به آدرس IP ترجمه می‌کند؛ دفترچه‌تلفنِ اینترنت.

⌄

شبکه و HTTPجونیورdnsdomainnetwork

Stateless بودن REST

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

⌄

شبکه و HTTPمیدلولreststatelessapi

Same-origin policy

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

⌄

شبکه و HTTPسینیورsecuritysame-originbrowser

درخواست‌های Idempotent

درخواستی که چندبار اجرا شدنش همان اثرِ یک‌بار اجرا را دارد.

⌄

شبکه و HTTPمیدلولhttpidempotent

CORS

مکانیزمی مبتنی بر هدر که به سرور اجازه می‌دهد دسترسی originهای دیگر به منابعش را مجاز کند.

⌄

شبکه و HTTPسینیورcorssecuritypreflight

چه زمانی WebSocket مناسب نیست

WebSocket برای ارتباط دوطرفه‌ی بلادرنگ خوب است، ولی برای داده‌ی کم‌تکرار یا یک‌طرفه هزینه‌ی اضافه دارد.

⌄

شبکه و HTTPسینیورwebsocketrealtime

Authentication در برابر Authorization

authentication یعنی «تو کی هستی»؛ authorization یعنی «اجازه‌ی چه کاری داری».

⌄

شبکه و HTTPمیدلولauthsecurity

URI در برابر URL

URI شناسه‌ی عام یک منبع است؛ URL زیرمجموعه‌ای از URI که علاوه بر شناسایی، محل و راه دسترسی را هم می‌دهد.

⌄

شبکه و HTTPجونیورuriurl

Ajax، XMLHttpRequest و fetch

Ajax مجموعه‌ای از تکنیک‌ها برای تبادل ناهمگام داده با سرور بدون بارگذاری مجدد صفحه است؛ امروزه با fetch و JSON انجام می‌شود.

⌄

شبکه و HTTPمیدلولajaxfetchxhr

JSONP

ترفندی قدیمی برای دور زدن محدودیت cross-origin از طریق تگ script و یک تابع callback؛ امروزه جایش را به CORS داده.

⌄

شبکه و HTTPسینیورjsonpcross-originlegacy

AbortController

راهی استاندارد برای لغو عملیات ناهمگام مثل fetch، با ارسال signal و فراخوانی abort.

⌄

شبکه و HTTPمیدلولfetchabortcancel

Server-Sent Events (SSE)

جریان یک‌طرفه از سرور به کلاینت روی HTTP با EventSource؛ ساده‌تر از WebSocket برای به‌روزرسانی‌های یک‌سویه.

⌄

شبکه و HTTPسینیورSSEEventSourcerealtime

آبجکت URL و searchParams

کلاس URL پارس و ساخت آدرس را ساده می‌کند و searchParams کار با پارامترهای query را بدون رشته‌بازی ممکن می‌کند.

⌄

شبکه و HTTPجونیورURLsearchParamsquery

FormData

آبجکتی برای ساخت داده‌ی فرم (از جمله فایل) که مستقیم می‌توان به‌عنوان بدنه‌ی fetch فرستاد.

⌄

شبکه و HTTPمیدلولFormDatafetchupload

پرفورمنس

10

تکنیک‌های بهینه‌سازی فرانت‌اند

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

⌄

پرفورمنسسینیورperformanceoptimization

موانع tree-shaking

tree-shaking کد بلااستفاده را حذف می‌کند، ولی برخی الگوها مانع تشخیص آن می‌شوند.

⌄

پرفورمنسسینیورtree-shakingbundlingESM

preload در برابر prefetch

preload برای ریسورس‌های لازمِ همین صفحه با اولویت بالا؛ prefetch برای ریسورس‌های احتمالیِ صفحه‌ی بعد با اولویت پایین.

⌄

پرفورمنسمیدلولpreloadprefetchresource hints

Core Web Vitals

سه شاخص کلیدی تجربه‌ی کاربری گوگل: سرعت بارگذاری، پایداری چیدمان و پاسخ‌گویی.

⌄

پرفورمنسمیدلولLCPCLSINPweb vitals

gzip و فشرده‌سازی پاسخ

فشرده‌سازی متنی روی سرور که حجم HTML/CSS/JS را پیش از ارسال تا چند برابر کم می‌کند.

⌄

پرفورمنسمیدلولgzipbrotlicompression

بهینه‌سازی تصاویر وب

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

⌄

پرفورمنسمیدلولimageswebplazy

CSS Sprites

ترکیب چند تصویر کوچک در یک تصویر بزرگ و نمایش هرکدام با background-position، برای کاهش تعداد درخواست‌ها.

⌄

پرفورمنسمیدلولspritesperformanceimages

Progressive Rendering

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

⌄

پرفورمنسسینیورperformancerenderingperceived load

جای link و script و مشکل FOUC

قراردادن link استایل در head و script در انتهای body، رندر تدریجی را ممکن و از محتوای بدون‌استایل (FOUC) جلوگیری می‌کند.

⌄

پرفورمنسمیدلولperformanceFOUCrendering

requestAnimationFrame

تابع callback را درست پیش از رنگ‌آمیزی بعدیِ مرورگر (هماهنگ با نرخ تازه‌سازی) اجرا می‌کند و انیمیشن نرم‌تری از setTimeout می‌دهد.

⌄

پرفورمنسمیدلولanimationrafperformance

تست‌نویسی

3

بهترین‌شیوه‌های تست‌نویسی

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

⌄

تست‌نویسیمیدلولtestingbest practices

Shallow Rendering

رندر یک کامپوننت بدون رندرکردن فرزندانش، برای جداسازی و تست واحدِ متمرکز.

⌄

تست‌نویسیمیدلولtestingshallow rendering

Snapshot Test

خروجی رندرشده را ذخیره و در اجراهای بعدی با نسخه‌ی ذخیره‌شده مقایسه می‌کند تا تغییر ناخواسته را بگیرد.

⌄

تست‌نویسیمیدلولtestingsnapshot

دسترس‌پذیری

3

اتریبیوت aria-label

یک برچسب متنی قابل‌دسترس به المنت می‌دهد، وقتی متن قابل‌مشاهده‌ای برای screen reader وجود ندارد.

⌄

دسترس‌پذیریمیدلولariaaccessibility

بهترین‌شیوه‌های دسترس‌پذیری

HTML معنادار، کنتراست کافی، ناوبری با کیبورد و متن جایگزین، پایه‌های یک رابط دسترس‌پذیرند.

⌄

دسترس‌پذیریمیدلولaccessibilitya11ywcag

پنهان‌سازی بصری برای screen reader

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

⌄

دسترس‌پذیریسینیورaccessibilityscreen readervisually hidden

Git

5

git commit --amend

آخرین کامیت را بازنویسی می‌کند؛ برای اصلاح پیام یا اضافه‌کردن تغییرِ جاافتاده.

⌄

Gitجونیورgitamendcommit

git cherry-pick

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

⌄

Gitمیدلولgitcherry-pick

git tag

یک اشاره‌گر ثابت به یک کامیت می‌سازد؛ معمولاً برای نشانه‌گذاری نسخه‌های انتشار.

⌄

Gitجونیورgittagrelease

git pull در برابر git fetch

fetch تغییرات ریموت را فقط دانلود می‌کند؛ pull همان fetch است به‌علاوه‌ی merge خودکار.

⌄

Gitجونیورgitpullfetch

git stash

تغییرات کامیت‌نشده را موقتاً کنار می‌گذارد تا شاخه‌ی کاری تمیز شود و بعد بازگردانده شود.

⌄

Gitمیدلولgitstash

معماری و عمومی

13

فایل package-lock.json

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

⌄

معماری و عمومیجونیورnpmlockfiledependencies

برنامه‌ی فرانت‌اند Maintainable

ساختار ماژولار، نام‌گذاری روشن، تست و یکنواختی سبک، نگه‌داری بلندمدت را ممکن می‌کند.

⌄

معماری و عمومیسینیورmaintainabilityarchitecture

مزایای برنامه‌نویسی functional

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

⌄

معماری و عمومیمیدلولfunctionalpureimmutability

اصول مهندسی نرم‌افزار

مجموعه‌ای از قواعد طراحی برای کدِ تمیز، منعطف و کم‌هزینه برای تغییر.

⌄

معماری و عمومیسینیورSOLIDDRYKISS

Progressive Enhancement

ابتدا یک تجربه‌ی پایه با HTML بساز، سپس با CSS و JS لایه‌های پیشرفته را روی آن اضافه کن.

⌄

معماری و عمومیمیدلولprogressive enhancementresilience

Virtual DOM

نمایش سبکِ درختِ UI در حافظه که با مقایسه‌ی نسخه‌ها، حداقل تغییرات را به DOM واقعی اعمال می‌کند.

⌄

معماری و عمومیمیدلولvirtual domreactdiff

Web Components

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

⌄

معماری و عمومیسینیورweb componentscustom elementsshadow dom

وابستگی Transitive

وابستگیِ وابستگی‌ها؛ پکیج‌هایی که خودت مستقیم نصب نکرده‌ای ولی توسط پکیج‌های دیگر کشیده می‌شوند.

⌄

معماری و عمومیمیدلولdependenciesnpm

چالش‌های توسعه‌دهنده‌ی سینیور

فراتر از کد: تصمیم‌های معماری، منتورینگ، ترید-آف‌ها و هم‌سوسازی فنی با نیاز کسب‌وکار.

⌄

معماری و عمومیسینیورsenioritysoft skills

چه زمانی State management؟

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

⌄

معماری و عمومیمیدلولstatereduxcontext

صفحه‌ی چندزبانه و i18n

ارائه‌ی محتوا به زبان مناسب کاربر با کمک هدر Accept-Language، اتریبیوت lang و hreflang، و قالب‌بندی محلی.

⌄

معماری و عمومیمیدلولi18nlocalizationlang

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

نوشتن کد با زبانی مثل TypeScript و ترجمه‌ی آن به JS سازگار با مرورگر؛ مزیت ابزار و ایمنی، به‌بهای مرحله‌ی build.

⌄

معماری و عمومیمیدلولtranspilertypescriptbabel

SPA و سازگاری با SEO

در SPA محتوای کلاینت‌رندر ممکن است برای موتور جست‌وجو دیده نشود؛ راه‌حل‌ها رندر سمت سرور یا pre-rendering است.

⌄

معماری و عمومیسینیورSPASEOSSR