Словник веб-розробника

Canary Deployment — стратегія поступового розгортання нової версії: спочатку лише малий відсоток трафіку надходить на нову версію (1% → 5% → 10% → 100%). Якщо метрики в нормі — розгортання продовжується. При проблемах — відкат без широкого впливу. Схема Load Balancer ├── v1 (95%) ── стабільна версія └── v2 (5%) ── нова "canary" версія Переваги Реальні користувачі тестують нову версію на продакшн-трафіку Проблеми виявляються на 1% трафіку, а не на всіх Плавне переключення без downtime Vs Blue-Green Blue-Green: трафік перемикається миттєво (0% або 100%) Canary: поступово (1% → ... → 100%) Реалізація Nginx upstream weights, Kubernetes traffic splitting, AWS CodeDeploy Canary, Istio.

CDN (Content Delivery Network) — розподілена мережа серверів по всьому світу, яка роздає статичні файли з вузла, географічно найближчого до користувача. Файл, що зберігається на сервері в Київі, завантажується з вузла в Лондоні для британського користувача — без затримок через Атлантику.Що кешує CDNЗображення, CSS, JavaScript, шрифтиВідео та великі файли для завантаженняСтатичні HTML-сторінки (для JAMstack)ПеревагиМенша затримка (latency) — фізично ближче до користувачаРозвантаження origin-сервера — більшість запитів обробляє CDNЗахист від DDoS — CDN поглинає трафік атаки на edge-вузлахПопулярні рішенняCloudflare (є безкоштовний план), AWS CloudFront, Fastly, BunnyCDN.

Chaos Engineering — дисципліна навмисного введення збоїв у систему (відключення сервісів, підвищення латентності, завершення процесів) для перевірки стійкості до відмов до того як вони виникнуть в реальному житті. Netflix popularized її через Chaos Monkey. Принципи Визначте "стаціонарний стан" — нормальна поведінка системи (RPS, latency, error rate) Сформулюйте гіпотезу: "якщо вбити один Pod — система продовжить роботу" Введіть збій у контрольованих умовах (спочатку на staging) Порівняйте реальний стан з гіпотезою Типові експерименти Відключити один з мікросервісів Збільшити latency до зовнішнього API на 2 секунди Симулювати повний збій БД Заповнити диск на 95% Інструменти Chaos Monkey (Netflix), LitmusChaos (Kubernetes), Gremlin, AWS Fault Injection Simulator.

CI/CD (Continuous Integration / Continuous Delivery) — практика автоматичного складання, тестування і доставки коду після кожного коміту. Мета: скоротити час між написанням коду і його появою на продакшні, виявляючи проблеми якомога раніше.CI — Continuous IntegrationКожен push запускає автоматичний пайплайн: встановлення залежностей, статичний аналіз, юніт-тести, інтеграційні тести. Якщо щось зламалось — розробник дізнається одразу, а не за тижні.CD — Continuous Delivery/DeploymentПісля успішного CI код автоматично або напівавтоматично доставляється на сервер. Delivery — деплой підтверджує людина, Deployment — повністю автоматично.Популярні інструментиGitHub Actions — вбудований у GitHub, безкоштовний для публічних репозиторіївGitLab CI — потужний, з runner'ами на власній інфраструктуріJenkins — self-hosted, широко використовується в enterpriseCircleCI / Bitbucket Pipelines — хмарні рішення

Circuit Breaker (автоматичний вимикач) — патерн стійкості для розподілених систем. Захищає від каскадних відмов: якщо залежний сервіс падає, автоматично «відключає» виклики до нього і повертає fallback-відповідь замість зависання.Три станиClosed (нормальна робота) — запити йдуть. Лічильник відмов зростає при помилкахOpen (вимикач спрацював) — запити блокуються, одразу повертається fallback. Встановлюється коли відмов > порігHalf-Open (перевірка) — після timeout пропускається один тестовий запит. Якщо успішно — переходить у Closed, якщо ні — назад у OpenНавіщоБез circuit breaker: повільний сервіс A → потоки сервісу B зависають в очікуванні → сервіс B вичерпує thread pool → падає весь кластер. Circuit breaker «відключає» сервіс A і дає решті системі продовжити роботу.

Clean Architecture (Роберт Мартін) — принцип організації коду концентричними шарами, де внутрішні шари не знають про зовнішні. Залежності завжди спрямовані всередину: від UI і БД — до бізнес-логіки, а не навпаки.Шари (зсередини назовні)Entities — бізнес-правила підприємства. Не залежать ні від чогоUse Cases — бізнес-правила застосунку. Залежать лише від EntitiesInterface Adapters — Controllers, Presenters, Gateways. Перетворюють формат між Use Cases і зовнішнім світомFrameworks & Drivers — DB, Web, UI. Найзовнішніший шарПравило залежностейКод у внутрішньому шарі ніколи не згадує щось із зовнішнього. Залежність інжектується через інтерфейс.Споріднені концепціїHexagonal Architecture (Ports & Adapters), Onion Architecture — різні назви для схожої ідеї: захистити доменну логіку від інфраструктури.

Clickjacking (UI Redress Attack) — атака, при якій зловмисник накладає прозорий iframe вашого сайту поверх своєї сторінки. Користувач думає що клікає на кнопку шкідливого сайту, а насправді взаємодіє з вашим — підтверджує транзакцію, змінює налаштування. Захист X-Frame-Options — старіший заголовок. DENY забороняє будь-яке вбудовування, SAMEORIGIN — лише з того ж домену Content-Security-Policy: frame-ancestors — сучасний замінник. Гнучкіший: можна дозволити конкретні домени // Nginx add_header X-Frame-Options "DENY"; add_header Content-Security-Policy "frame-ancestors 'none'"; // PHP header('X-Frame-Options: SAMEORIGIN'); header("Content-Security-Policy: frame-ancestors 'self' https://trusted.com"); Відмінність від CSRF CSRF підробляє HTTP-запит. Clickjacking змушує користувача самостійно клікнути на правильний елемент — не підробляє запит, а маніпулює кліком.

Code review — процес перевірки коду іншим розробником до мерджу в основну гілку. Знаходить баги, ділиться знаннями команди і підтримує якість кодової бази. Дослідження показують: code review знаходить ~60% дефектів на ранній стадії.Що перевірятиКоректність: чи вирішує код задачу? Чи немає edge cases?Зрозумілість: чи легко читати і підтримувати?Безпека: SQL-ін'єкції, XSS, витоки данихПродуктивність: N+1, відсутні індекси, зайві запитиВідповідність стилю і конвенціям проєктуПравила хорошого ревʼюераКоментуйте код, а не автора: «функція робить X, але краще Y» замість «ти зробив неправильно»Поясняйте чому, а не лише що змінитиВідрізняйте блокери від пропозицій: nit: — не критично

Command — патерн, що інкапсулює запит у вигляді об'єкта. Відправник не знає, хто і як виконає команду — він просто викликає execute(). Це дозволяє ставити команди в чергу, логувати, скасовувати (undo). Учасники Command — інтерфейс з методом execute() ConcreteCommand — реалізація, що знає отримувача і дію Invoker — зберігає і викликає команди Receiver — об'єкт, що виконує реальну роботу Приклад interface Command { public function execute(): void; public function undo(): void; } class SendEmailCommand implements Command { public function execute(): void { /* відправити */ } public function undo(): void { /* скасувати */ } } class CommandBus { private array $history = []; public function dispatch(Command $cmd): void { $cmd->execute(); $this->history[] = $cmd; } } Де використовується CQRS (Command Bus), черги задач, транзакційний скрипт, undo/redo в редакторах.

Composer — менеджер залежностей для PHP. Він вирішує, які пакети потрібні, завантажує їх, вирішує конфлікти версій і генерує автозавантажувач. Майже кожен сучасний PHP-проєкт починається з composer.json.Ключові командиcomposer require vendor/package — додати пакетcomposer install — встановити залежності з composer.lockcomposer update — оновити залежності та перегенерувати lock-файлcomposer dump-autoload — перегенерувати autoloadercomposer.json vs composer.lockcomposer.json — діапазони версій ("^2.0"). composer.lock — точні версії, зафіксовані при встановленні. Lock-файл гарантує, що всі члени команди і CI-сервери використовують однакові версії. Завжди комітьте composer.lock.

Connection Pool — набір заздалегідь встановлених з'єднань з базою даних, що повторно використовуються між запитами. Відкрити нове з'єднання з БД — дорога операція (TCP handshake, автентифікація). Пул дозволяє взяти готове з'єднання замість того, щоб відкривати нове.Як це працюєПри старті застосунок відкриває N з'єднань. Кожен запит бере з'єднання з пулу, використовує і повертає назад. Якщо всі з'єднання зайняті — запит чекає або отримує помилку timeout.Ключові параметриmin/max connections — мінімум і максимум з'єднань у пуліconnection timeout — скільки чекати вільного з'єднанняidle timeout — після якого часу простою закрити з'єднанняPHP і persistent connectionsPHP-FPM + MySQL: кожен воркер має свій пул. Для централізованого пулингу між воркерами використовують PgBouncer (PostgreSQL) або ProxySQL (MySQL).

Container Registry (реєстр контейнерів) — сховище Docker-образів, аналог npm registry для JavaScript або Packagist для PHP. Зберігає версіоновані образи, звідки їх завантажують сервери при деплої. Як використовується # Збірка образу docker build -t myapp:1.2.0 . # Тег для реєстру docker tag myapp:1.2.0 registry.example.com/myapp:1.2.0 # Публікація docker push registry.example.com/myapp:1.2.0 # На сервері docker pull registry.example.com/myapp:1.2.0 docker run registry.example.com/myapp:1.2.0 Популярні рішення Docker Hub — публічний, безкоштовний для публічних образів GitHub Container Registry (GHCR) — інтеграція з GitHub Actions AWS ECR, Google Artifact Registry — хмарні, інтегровані з кластерами Harbor — self-hosted, open-source Теги і версіонування latest — небезпечний у продакшні: при кожному pull може отримати інший образ. Завжди закріплюйте конкретний тег або SHA-digest.

Content-Type — HTTP-заголовок, що повідомляє отримувачу формат тіла повідомлення. MIME-тип (Multipurpose Internet Mail Extensions) — стандарт ідентифікації типу контенту у форматі type/subtype. Поширені MIME-типи application/json — JSON-дані (REST API) application/x-www-form-urlencoded — дані HTML-форми multipart/form-data — форма з файлами text/html; charset=utf-8 — HTML-сторінка text/plain — простий текст image/png, image/webp, image/svg+xml application/pdf application/octet-stream — бінарні дані (generic завантаження) Використання // Відповідь сервера header('Content-Type: application/json; charset=utf-8'); echo json_encode($data); // Завантаження файлу header('Content-Type: application/pdf'); header('Content-Disposition: attachment; filename="invoice.pdf"'); readfile($path); Accept заголовок Клієнт вказує, які типи приймає: Accept: application/json, text/html. Сервер може повернути різний формат залежно від цього (Content Negotiation).

Contract Testing — тип тестування, що перевіряє відповідність між сервісами-споживачами (consumer) і постачальниками (provider) API. Замість запуску обох сервісів одночасно — кожна сторона перевіряє контракт незалежно. Проблема, яку вирішує При мікросервісній архітектурі сервіс A очікує від сервісу B поле user_id, але B перейменував його на userId. Інтеграційні тести не завжди виловлюють такі зміни своєчасно. Consumer-Driven Contract Testing Consumer (A) записує очікування у "contract" (pact-файл) Contract публікується у Pact Broker Provider (B) автоматично перевіряє, що відповідає контракту Якщо B змінить API — тест провалиться ще до деплою Інструменти Pact — найпопулярніший фреймворк. Підтримує PHP, Node, Java, Go та інші. Pact Broker — центральне сховище контрактів.

Cookie — невеликий фрагмент даних, який сервер відправляє браузеру у заголовку Set-Cookie, а браузер автоматично повертає при кожному наступному запиті до того самого домену. Завдяки цьому stateless HTTP «пам'ятає» користувача.Атрибути cookieHttpOnly — JavaScript не може прочитати cookie. Захист від XSS-крадіжкиSecure — передається лише по HTTPSSameSite=Lax/Strict — обмеження cross-site відправки. Захист від CSRFExpires / Max-Age — час жити; без нього cookie сесійна (видаляється при закритті браузера)Domain / Path — до яких URL надсилається cookieCookie vs localStoragelocalStorage більший (5–10 МБ vs 4 КБ), доступний лише з JavaScript. Cookie надсилаються серверу автоматично і можуть бути HttpOnly (недоступні для JS). Для сесій і токенів безпечніші HttpOnly-cookies.

CORS (Cross-Origin Resource Sharing) — механізм браузера, який дозволяє або забороняє JavaScript-коду на одному домені робити запити до іншого. Браузер перевіряє заголовки відповіді сервера і вирішує, чи може клієнтський код отримати доступ до даних.Як це працюєДля «непростих» запитів (POST з JSON, кастомні заголовки) браузер спочатку надсилає preflight-запит методом OPTIONS. Сервер повертає заголовки, що дозволяють або забороняють запит. Якщо дозволено — браузер надсилає основний запит.Ключові заголовкиAccess-Control-Allow-Origin — домен(и), яким дозволено доступ (* або конкретний домен)Access-Control-Allow-Methods — дозволені HTTP-методиAccess-Control-Allow-Headers — дозволені заголовки запитуAccess-Control-Allow-Credentials — чи можна надсилати cookie з запитомНалаштування на серверіCORS-заголовки встановлює сервер — через middleware, конфігурацію Nginx/Apache або безпосередньо в коді. Помилка «blocked by CORS policy» завжди вирішується на стороні сервера, а не клієнта.

CQRS (Command Query Responsibility Segregation) — патерн розділення моделей читання і запису. Commands змінюють стан, Queries — читають його. Вони використовують різні моделі, а іноді й різні сховища.НавіщоЧитання і запис мають різні вимоги: запити на читання — складні JOIN-и і агрегації; команди — транзакційна цілісність. Розділення дозволяє оптимізувати кожне незалежно.Простий CQRSОдна БД, але різні класи: CreateOrderCommand і OrderSummaryQuery. Мінімальна складність, але вже дає структуру.Повний CQRS з Event SourcingWrite-side зберігає події (Event Store), read-side будує денормалізовані проєкції зручні для читання. Висока складність, але повна аудит-трейл і можливість «перемотати» стан.ЗастереженняCQRS додає складність. Виправданий у складних доменах з різним навантаженням на читання і запис. Для CRUD-застосунків — зайвий.

Critical Rendering Path (CRP) — послідовність кроків, які браузер виконує від отримання HTML до першої відрисовки пікселів на екрані. Оптимізація CRP безпосередньо впливає на LCP і Time to First Paint. Кроки Завантаження HTML → побудова DOM Завантаження CSS → побудова CSSOM DOM + CSSOM → Render Tree Layout (reflow) — обчислення розмірів і позицій Paint — малювання пікселів Render-blocking ресурси CSS і синхронний JS блокують побудову Render Tree. До завершення їх завантаження браузер не малює нічого. Оптимізації Critical CSS inline у <head> — стилі above-the-fold завантажуються без запиту <link rel="stylesheet" media="print"> — некритичний CSS не блокує рендер <script defer> або async — JS не блокує парсинг HTML <link rel="preload"> — завантажити критичні ресурси раніше

Cron — планувальник задач Unix/Linux, що виконує команди за розкладом. Конфігурація зберігається у crontab — таблиці з записами виду «кожну хвилину», «о 3:00 щонеділі» тощо.Синтаксис crontab# хв година день місяць день_тижня команда 0 3 * * * /usr/bin/php /app/backup.php # щодня о 3:00 */15 * * * * curl https://api.example.com/ping # кожні 15 хвП'ять полів: хвилини (0–59), години (0–23), день місяця (1–31), місяць (1–12), день тижня (0–7, 0 і 7 — неділя). * означає «будь-яке значення», */N — кожні N.Підводні каменіCron виконується в мінімальному оточенні — змінні середовища можуть бути відсутні. Вказуйте повні шляхи до командЯкщо задача виконується довше за інтервал — запустяться паралельні екземпляри. Використовуйте lock-файли або flockЛогуйте вивід: command >> /var/log/job.log 2>&1

CSRF (Cross-Site Request Forgery) — атака, яка змушує браузер авторизованого користувача надіслати підроблений запит на сервер від його імені. Браузер автоматично додає cookie — тому сервер вважає запит легітимним.Як це відбуваєтьсяЖертва залогінена на bank.com. Вона відкриває шкідливу сторінку, де прихований <form> автоматично надсилає POST на bank.com/transfer. Браузер додає cookie банку — і переказ відбувається.ЗахистCSRF-токен — сервер генерує унікальний непередбачуваний токен і вкладає його в приховане поле форми (<input type="hidden" name="_token" value="...">). При отриманні форми сервер звіряє токен з тим, що зберігається в сесіїSameSite cookie — атрибут SameSite=Lax/Strict забороняє браузеру надсилати cookie в cross-site запитах. Найефективніший сучасний захистStateless API з Bearer-токенами у заголовку не вразливі до CSRF

CSS Custom Properties (змінні) — значення, що зберігаються у CSS і доступні всьому документу. Оголошуються через --назва, використовуються через var(--назва). Основа дизайн-систем і тем. Синтаксис /* Оголошення в :root — глобальна область */ :root { --color-primary: #c05c08; --spacing-md: 16px; --radius: 8px; } /* Використання */ .btn { background: var(--color-primary); padding: var(--spacing-md); border-radius: var(--radius); } /* Fallback */ color: var(--text-color, #333); Динамічна зміна через JS document.documentElement.style .setProperty('--color-primary', '#0066cc'); Vs Sass/Less змінні Sass/Less змінні компілюються на етапі збірки — статичні. CSS custom properties живуть у браузері — динамічні, успадковуються по DOM, змінюються JS і media queries.

CSS Grid — двовимірна система розкладки в CSS. Дозволяє розміщувати елементи і по рядках, і по стовпцях одночасно. Ідеальний для складних сторінкових layouts, карткових сіток і будь-яких двовимірних конструкцій. Основи .grid { display: grid; grid-template-columns: 1fr 1fr 1fr; /* 3 рівних стовпці */ grid-template-columns: repeat(3, 1fr); /* те саме */ grid-template-columns: 200px 1fr 2fr; /* змішані одиниці */ gap: 20px; /* відступи */ } /* Елемент займає 2 стовпці */ .featured { grid-column: span 2; } Auto-fill vs Auto-fit /* Стільки карточок, скільки влізе (мін 250px) */ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); Named Areas .page { grid-template-areas: "header header" "sidebar main" "footer footer"; } header { grid-area: header; }

CSV (Comma-Separated Values) — текстовий формат таблиць: кожен рядок — запис, значення розділені комою (або крапкою з комою). Найпростіший формат для обміну даними між Excel, БД і застосунками. Формат id,name,email,created_at 1,Alice,alice@example.com,2025-01-15 2,Bob,"Doe, Bob",2025-02-20 Значення з комою або лапками беруться у подвійні лапки. Лапки всередині значення — подвоюються: "". PHP // Читання $file = fopen('users.csv', 'r'); while (($row = fgetcsv($file)) !== false) { [$id, $name, $email] = $row; } fclose($file); // Запис $file = fopen('export.csv', 'w'); fputcsv($file, ['id', 'name', 'email']); // header fputcsv($file, [1, 'Alice', 'alice@example.com']); fclose($file); Підводні камені Кодування: Excel за замовчуванням відкриває у Windows-1252, а не UTF-8. Додай BOM (\xEF\xBB\xBF) на початку файлу щоб Excel коректно відобразив кирилицю.