[{"data":1,"prerenderedAt":8049},["ShallowReactive",2],{"navigation_docs":3,"-csharp-aspnet-mvc-htmx":2949,"-csharp-aspnet-mvc-htmx-surround":8044},[4,1640,1765,2219,2352,2559,2641,2691,2748,2782,2908,2945],{"title":5,"icon":6,"path":7,"stem":8,"children":9},"C#","i-devicon-csharp","/csharp","01.csharp",[10,13,60,90,120,202,219,253,379,404,457,650,1346,1636],{"title":11,"path":7,"stem":12},"C# Roadmap","01.csharp/index",{"title":14,"icon":15,"path":16,"stem":17,"children":18,"page":59},"Fundamentals","i-lucide-book-open","/csharp/fundamentals","01.csharp/01.fundamentals",[19,23,27,31,35,39,43,47,51,55],{"title":20,"path":21,"stem":22},"Вступ до екосистеми .NET","/csharp/fundamentals/introduction-to-ecosystem","01.csharp/01.fundamentals/01.introduction-to-ecosystem",{"title":24,"path":25,"stem":26},"Структура програми на C#","/csharp/fundamentals/program-structure","01.csharp/01.fundamentals/02.program-structure",{"title":28,"path":29,"stem":30},"Змінні та Типи Даних","/csharp/fundamentals/variables-data-types","01.csharp/01.fundamentals/03.variables-data-types",{"title":32,"path":33,"stem":34},"Масиви","/csharp/fundamentals/arrays","01.csharp/01.fundamentals/04.arrays",{"title":36,"path":37,"stem":38},"Strings & Text Handling","/csharp/fundamentals/strings-text-handling","01.csharp/01.fundamentals/05.strings-text-handling",{"title":40,"path":41,"stem":42},"Дати і Час","/csharp/fundamentals/dates-time-handling","01.csharp/01.fundamentals/06.dates-time-handling",{"title":44,"path":45,"stem":46},"Потік Керування","/csharp/fundamentals/control-flow","01.csharp/01.fundamentals/07.control-flow",{"title":48,"path":49,"stem":50},"Методи","/csharp/fundamentals/methods","01.csharp/01.fundamentals/08.methods",{"title":52,"path":53,"stem":54},"Основи Відлагодження","/csharp/fundamentals/debugging-basics","01.csharp/01.fundamentals/09.debugging-basics",{"title":56,"path":57,"stem":58},"Інтерактивна Консоль (Classic)","/csharp/fundamentals/interactive-console","01.csharp/01.fundamentals/10.interactive-console",false,{"title":61,"icon":62,"path":63,"stem":64,"children":65,"page":59},"OOP","i-lucide-box","/csharp/oop","01.csharp/02.oop",[66,70,74,78,82,86],{"title":67,"path":68,"stem":69},"Package Management (Управління Пакетами)","/csharp/oop/package-management","01.csharp/02.oop/01.package-management",{"title":71,"path":72,"stem":73},"Класи та Об'єкти","/csharp/oop/classes-objects","01.csharp/02.oop/02.classes-objects",{"title":75,"path":76,"stem":77},"Властивості та Поля","/csharp/oop/properties-fields","01.csharp/02.oop/03.properties-fields",{"title":79,"path":80,"stem":81},"Стовпи ООП","/csharp/oop/oop-pillars","01.csharp/02.oop/04.oop-pillars",{"title":83,"path":84,"stem":85},"Advanced Types","/csharp/oop/advanced-types","01.csharp/02.oop/05.advanced-types",{"title":87,"path":88,"stem":89},"Namespaces (Простори Імен)","/csharp/oop/namespaces","01.csharp/02.oop/06.namespaces",{"title":91,"icon":92,"path":93,"stem":94,"children":95,"page":59},"Advanced Core","i-lucide-zap","/csharp/advanced-core","01.csharp/03.advanced-core",[96,100,104,108,112,116],{"title":97,"path":98,"stem":99},"Generics (Узагальнення)","/csharp/advanced-core/generics","01.csharp/03.advanced-core/01.generics",{"title":101,"path":102,"stem":103},"Делегати, Події та Лямбда-вирази","/csharp/advanced-core/delegates-events-lambdas","01.csharp/03.advanced-core/02.delegates-events-lambdas",{"title":105,"path":106,"stem":107},"Interfaces Deep Dive (Інтерфейси: Поглиблений Розгляд)","/csharp/advanced-core/interfaces-deep-dive","01.csharp/03.advanced-core/03.interfaces-deep-dive",{"title":109,"path":110,"stem":111},"Обробка Винятків","/csharp/advanced-core/exception-handling","01.csharp/03.advanced-core/04.exception-handling",{"title":113,"path":114,"stem":115},"Pattern Matching","/csharp/advanced-core/pattern-matching","01.csharp/03.advanced-core/05.pattern-matching",{"title":117,"path":118,"stem":119},"Додаткові Можливості C#","/csharp/advanced-core/additional-features","01.csharp/03.advanced-core/06.additional-features",{"title":121,"icon":122,"path":123,"stem":124,"children":125,"page":59},"Architecture Best Practices","i-lucide-building-2","/csharp/architecture-best-practices","01.csharp/04.architecture-best-practices",[126,130,149,153,157,161,165,169],{"title":127,"path":128,"stem":129},"Software Design Principles (Частина 1)","/csharp/architecture-best-practices/software-design-principles","01.csharp/04.architecture-best-practices/01.software-design-principles",{"title":131,"icon":132,"path":133,"stem":134,"children":135,"page":59},"Design Patterns","i-lucide-folder","/csharp/architecture-best-practices/design-patterns","01.csharp/04.architecture-best-practices/02.design-patterns",[136],{"title":137,"icon":132,"path":138,"stem":139,"children":140,"page":59},"Creational","/csharp/architecture-best-practices/design-patterns/creational","01.csharp/04.architecture-best-practices/02.design-patterns/creational",[141,145],{"title":142,"path":143,"stem":144},"Singleton (Одинак)","/csharp/architecture-best-practices/design-patterns/creational/singleton","01.csharp/04.architecture-best-practices/02.design-patterns/creational/01.singleton",{"title":146,"path":147,"stem":148},"Builder (Будівельник)","/csharp/architecture-best-practices/design-patterns/creational/builder","01.csharp/04.architecture-best-practices/02.design-patterns/creational/02.builder",{"title":150,"path":151,"stem":152},"Building Professional CLIs","/csharp/architecture-best-practices/building-professional-clis","01.csharp/04.architecture-best-practices/03.building-professional-clis",{"title":154,"path":155,"stem":156},"Validation & Flow Control","/csharp/architecture-best-practices/validation-flow-control","01.csharp/04.architecture-best-practices/04.validation-flow-control",{"title":158,"path":159,"stem":160},"The Modern .NET Host (Microsoft.Extensions)","/csharp/architecture-best-practices/modern-dotnet-host","01.csharp/04.architecture-best-practices/05.modern-dotnet-host",{"title":162,"path":163,"stem":164},"Data Mapper: Repository та DAO патерни (Частина 1)","/csharp/architecture-best-practices/data-mapper-part1","01.csharp/04.architecture-best-practices/06.data-mapper-part1",{"title":166,"path":167,"stem":168},"Data Mapper: Repository та DAO патерни (Частина 2)","/csharp/architecture-best-practices/data-mapper-part2","01.csharp/04.architecture-best-practices/07.data-mapper-part2",{"title":170,"icon":132,"path":171,"stem":172,"children":173,"page":59},"Di Ioc","/csharp/architecture-best-practices/di-ioc","01.csharp/04.architecture-best-practices/08.di-ioc",[174,178,182,186,190,194,198],{"title":175,"path":176,"stem":177},"Проблема залежностей та Інверсія Контролю","/csharp/architecture-best-practices/di-ioc/the-dependency-problem","01.csharp/04.architecture-best-practices/08.di-ioc/01.the-dependency-problem",{"title":179,"path":180,"stem":181},"Будуємо власний Service Container","/csharp/architecture-best-practices/di-ioc/build-your-own-container","01.csharp/04.architecture-best-practices/08.di-ioc/02.build-your-own-container",{"title":183,"path":184,"stem":185},"Service Locator: Паттерн та Анти-паттерн","/csharp/architecture-best-practices/di-ioc/service-locator-pattern","01.csharp/04.architecture-best-practices/08.di-ioc/03.service-locator-pattern",{"title":187,"path":188,"stem":189},"Паттерни Dependency Injection","/csharp/architecture-best-practices/di-ioc/dependency-injection-patterns","01.csharp/04.architecture-best-practices/08.di-ioc/04.dependency-injection-patterns",{"title":191,"path":192,"stem":193},"Microsoft DI: IServiceCollection та IServiceProvider","/csharp/architecture-best-practices/di-ioc/microsoft-di-deep-dive","01.csharp/04.architecture-best-practices/08.di-ioc/05.microsoft-di-deep-dive",{"title":195,"path":196,"stem":197},"Service Lifetimes та Scopes","/csharp/architecture-best-practices/di-ioc/service-lifetimes-and-scopes","01.csharp/04.architecture-best-practices/08.di-ioc/06.service-lifetimes-and-scopes",{"title":199,"path":200,"stem":201},"DI Анти-паттерни та Найкращі Практики","/csharp/architecture-best-practices/di-ioc/di-anti-patterns-and-best-practices","01.csharp/04.architecture-best-practices/08.di-ioc/07.di-anti-patterns-and-best-practices",{"title":203,"icon":132,"path":204,"stem":205,"children":206,"page":59},"Standard Library","/csharp/standard-library","01.csharp/05.standard-library",[207,211,215],{"title":208,"path":209,"stem":210},"Collections (Колекції)","/csharp/standard-library/collections","01.csharp/05.standard-library/01.collections",{"title":212,"path":213,"stem":214},"High Performance Types (Високопродуктивні Типи)","/csharp/standard-library/high-performance-types","01.csharp/05.standard-library/02.high-performance-types",{"title":216,"path":217,"stem":218},"LINQ (Language Integrated Query)","/csharp/standard-library/linq","01.csharp/05.standard-library/03.linq",{"title":220,"icon":221,"path":222,"stem":223,"children":224,"page":59},"System Internals Concurrency","i-lucide-server","/csharp/system-internals-concurrency","01.csharp/06.system-internals-concurrency",[225,229,233,237,241,245,249],{"title":226,"path":227,"stem":228},"Memory Management","/csharp/system-internals-concurrency/memory-management","01.csharp/06.system-internals-concurrency/01.memory-management",{"title":230,"path":231,"stem":232},"Reflection API: System.Type та Метадані","/csharp/system-internals-concurrency/reflection-fundamentals","01.csharp/06.system-internals-concurrency/02.reflection-fundamentals",{"title":234,"path":235,"stem":236},"Attributes та Dynamic Language Runtime","/csharp/system-internals-concurrency/attributes-dynamic","01.csharp/06.system-internals-concurrency/03.attributes-dynamic",{"title":238,"path":239,"stem":240},"Expression Trees: Швидка Альтернатива Рефлексії","/csharp/system-internals-concurrency/expression-trees-compiled","01.csharp/06.system-internals-concurrency/04.expression-trees-compiled",{"title":242,"path":243,"stem":244},"Source Generators: Compile-Time Code Generation","/csharp/system-internals-concurrency/source-generators","01.csharp/06.system-internals-concurrency/05.source-generators",{"title":246,"path":247,"stem":248},"Multithreading Fundamentals","/csharp/system-internals-concurrency/multithreading-fundamentals","01.csharp/06.system-internals-concurrency/06.multithreading-fundamentals",{"title":250,"path":251,"stem":252},"Synchronization Primitives","/csharp/system-internals-concurrency/synchronization-primitives","01.csharp/06.system-internals-concurrency/07.synchronization-primitives",{"title":254,"icon":255,"path":256,"stem":257,"children":258,"page":59},"System Programming Windows","i-lucide-cpu","/csharp/system-programming-windows","01.csharp/07.system-programming-windows",[259,263,267,271,275,279,283,287,291,295,299,303,307,311,315,319,323,327,331,335,339,343,347,351,355,359,363,367,371,375],{"title":260,"path":261,"stem":262},"Як Працює Операційна Система","/csharp/system-programming-windows/how-os-works","01.csharp/07.system-programming-windows/01.how-os-works",{"title":264,"path":265,"stem":266},"Процеси в .NET — API та Запуск","/csharp/system-programming-windows/processes-in-dotnet","01.csharp/07.system-programming-windows/02.processes-in-dotnet",{"title":268,"path":269,"stem":270},"Процеси в .NET — IPC та Міжпроцесна Комунікація","/csharp/system-programming-windows/02a.processes-ipc","01.csharp/07.system-programming-windows/02a.processes-ipc",{"title":272,"path":273,"stem":274},"Application Domains та Збірки — AppDomain і AssemblyLoadContext","/csharp/system-programming-windows/appdomains-assemblies","01.csharp/07.system-programming-windows/03.appdomains-assemblies",{"title":276,"path":277,"stem":278},"Application Domains та Збірки — Plug-in Система з Hot-Reload","/csharp/system-programming-windows/03a.appdomains-plugin-system","01.csharp/07.system-programming-windows/03a.appdomains-plugin-system",{"title":280,"path":281,"stem":282},"Потоки — Основи та API Thread","/csharp/system-programming-windows/thread-fundamentals","01.csharp/07.system-programming-windows/04.thread-fundamentals",{"title":284,"path":285,"stem":286},"Потоки — Lifecycle, Пріоритети та Безпечне Завершення","/csharp/system-programming-windows/04a.thread-lifecycle-priorities","01.csharp/07.system-programming-windows/04a.thread-lifecycle-priorities",{"title":288,"path":289,"stem":290},"Проблеми Спільного Стану — Race Condition та Data Race","/csharp/system-programming-windows/shared-state-problems","01.csharp/07.system-programming-windows/05.shared-state-problems",{"title":292,"path":293,"stem":294},"Проблеми Спільного Стану — Memory Model та volatile","/csharp/system-programming-windows/05a.shared-state-memory-model","01.csharp/07.system-programming-windows/05a.shared-state-memory-model",{"title":296,"path":297,"stem":298},"Синхронізація — Monitor, lock та еволюція примітивів","/csharp/system-programming-windows/synchronization-fundamentals","01.csharp/07.system-programming-windows/06.synchronization-fundamentals",{"title":300,"path":301,"stem":302},"Синхронізація — Наскрізний Приклад та Deadlock Detection","/csharp/system-programming-windows/06a.synchronization-walkthrough","01.csharp/07.system-programming-windows/06a.synchronization-walkthrough",{"title":304,"path":305,"stem":306},"Синхронізація — Mutex, Semaphore та Event-Based Primitives","/csharp/system-programming-windows/synchronization-advanced","01.csharp/07.system-programming-windows/07.synchronization-advanced",{"title":308,"path":309,"stem":310},"Синхронізація — Interlocked, Volatile та Lock-Free Структури","/csharp/system-programming-windows/07a.synchronization-advanced-walkthrough","01.csharp/07.system-programming-windows/07a.synchronization-advanced-walkthrough",{"title":312,"path":313,"stem":314},"Interlocked, CAS та Lock-Free Структури","/csharp/system-programming-windows/interlocked-cas-lockfree","01.csharp/07.system-programming-windows/08.interlocked-cas-lockfree",{"title":316,"path":317,"stem":318},"Volatile, Memory Model та Spinning","/csharp/system-programming-windows/08a.volatile-memory-model","01.csharp/07.system-programming-windows/08a.volatile-memory-model",{"title":320,"path":321,"stem":322},"ThreadPool — Пул Потоків для Ефективного Виконання","/csharp/system-programming-windows/thread-pool","01.csharp/07.system-programming-windows/09.thread-pool",{"title":324,"path":325,"stem":326},"ThreadPool — Просунуті Сценарії та Внутрішня Будова","/csharp/system-programming-windows/09a.thread-pool-advanced","01.csharp/07.system-programming-windows/09a.thread-pool-advanced",{"title":328,"path":329,"stem":330},"Concurrent та Immutable Collections","/csharp/system-programming-windows/concurrent-collections","01.csharp/07.system-programming-windows/10.concurrent-collections",{"title":332,"path":333,"stem":334},"TPL, Task та Композиція — Від Thread до Task","/csharp/system-programming-windows/tpl-parallel-plinq","01.csharp/07.system-programming-windows/11.tpl-parallel-plinq",{"title":336,"path":337,"stem":338},"Parallel Class та PLINQ — Data Parallelism","/csharp/system-programming-windows/11a.tpl-parallel-plinq-advanced","01.csharp/07.system-programming-windows/11a.tpl-parallel-plinq-advanced",{"title":340,"path":341,"stem":342},"Async/Await — Фундамент Асинхронного Програмування","/csharp/system-programming-windows/async-fundamentals","01.csharp/07.system-programming-windows/12.async-fundamentals",{"title":344,"path":345,"stem":346},"SynchronizationContext та ConfigureAwait — Контекст Виконання","/csharp/system-programming-windows/async-context-configureawait","01.csharp/07.system-programming-windows/13.async-context-configureawait",{"title":348,"path":349,"stem":350},"Async — Просунуті Паттерни","/csharp/system-programming-windows/async-advanced","01.csharp/07.system-programming-windows/14.async-advanced",{"title":352,"path":353,"stem":354},"System.Threading.Channels — Async Producer-Consumer","/csharp/system-programming-windows/channels","01.csharp/07.system-programming-windows/15.channels",{"title":356,"path":357,"stem":358},"Асинхронна Синхронізація","/csharp/system-programming-windows/async-synchronization","01.csharp/07.system-programming-windows/16.async-synchronization",{"title":360,"path":361,"stem":362},"Unsafe Code та Вказівники","/csharp/system-programming-windows/unsafe-code","01.csharp/07.system-programming-windows/17.unsafe-code",{"title":364,"path":365,"stem":366},"P/Invoke та Windows API — Міст між .NET та Native Code","/csharp/system-programming-windows/pinvoke-winapi","01.csharp/07.system-programming-windows/18.pinvoke-winapi",{"title":368,"path":369,"stem":370},"Реєстр Windows — Центральна База Конфігурації Системи","/csharp/system-programming-windows/windows-registry","01.csharp/07.system-programming-windows/19.windows-registry",{"title":372,"path":373,"stem":374},"Windows Hooks, Hotkeys та Services — Глибока Інтеграція з ОС","/csharp/system-programming-windows/windows-hooks-services","01.csharp/07.system-programming-windows/20.windows-hooks-services",{"title":376,"path":377,"stem":378},"Системне Програмування C# (Windows) — 07.system-programming-windows","/csharp/system-programming-windows/implementation_plan","01.csharp/07.system-programming-windows/implementation_plan",{"title":380,"icon":132,"path":381,"stem":382,"children":383,"page":59},"Io","/csharp/io","01.csharp/08.io",[384,388,392,396,400],{"title":385,"path":386,"stem":387},"8.1.1. Основи роботи з файловою системою","/csharp/io/file-system-basics","01.csharp/08.io/01.file-system-basics",{"title":389,"path":390,"stem":391},"8.1.2. Потоки (Streams) та Серіалізація Даних","/csharp/io/streams-serialization","01.csharp/08.io/02.streams-serialization",{"title":393,"path":394,"stem":395},"8.2.1. JSON Serialization з System.Text.Json","/csharp/io/json-serialization","01.csharp/08.io/03.json-serialization",{"title":397,"path":398,"stem":399},"8.2.2. XML Serialization та LINQ to XML","/csharp/io/xml-serialization","01.csharp/08.io/04.xml-serialization",{"title":401,"path":402,"stem":403},"8.2.3. Binary Serialization: MessagePack та Protocol Buffers","/csharp/io/binary-serialization","01.csharp/08.io/05.binary-serialization",{"title":405,"icon":132,"path":406,"stem":407,"children":408,"page":59},"Ado Net","/csharp/ado-net","01.csharp/09.ado-net",[409,413,417,421,425,429,433,437,441,445,449,453],{"title":410,"path":411,"stem":412},"9.1. Введення в ADO.NET","/csharp/ado-net/introduction-to-adonet","01.csharp/09.ado-net/01.introduction-to-adonet",{"title":414,"path":415,"stem":416},"9.2. Клас DbConnection — з'єднання з базою даних","/csharp/ado-net/connection","01.csharp/09.ado-net/02.connection",{"title":418,"path":419,"stem":420},"9.3. Клас DbCommand — виконання SQL-запитів","/csharp/ado-net/command-and-queries","01.csharp/09.ado-net/03.command-and-queries",{"title":422,"path":423,"stem":424},"9.4. Клас DbDataReader — ефективне читання даних","/csharp/ado-net/datareader","01.csharp/09.ado-net/04.datareader",{"title":426,"path":427,"stem":428},"9.5. Параметризовані запити та захист від SQL Injection","/csharp/ado-net/parameters-and-sql-injection","01.csharp/09.ado-net/05.parameters-and-sql-injection",{"title":430,"path":431,"stem":432},"9.6. Транзакції в ADO.NET","/csharp/ado-net/transactions","01.csharp/09.ado-net/06.transactions",{"title":434,"path":435,"stem":436},"9.7. DbProviderFactory — провайдер-незалежний код","/csharp/ado-net/provider-factory","01.csharp/09.ado-net/07.provider-factory",{"title":438,"path":439,"stem":440},"9.8. Асинхронний доступ до даних","/csharp/ado-net/async-data-access","01.csharp/09.ado-net/08.async-data-access",{"title":442,"path":443,"stem":444},"9.9. Від'єднаний режим: DataSet, DataTable, DataRow","/csharp/ado-net/disconnected-mode-dataset","01.csharp/09.ado-net/09.disconnected-mode-dataset",{"title":446,"path":447,"stem":448},"9.10. DataAdapter — міст між DataSet та базою даних","/csharp/ado-net/data-adapter","01.csharp/09.ado-net/10.data-adapter",{"title":450,"path":451,"stem":452},"9.11. Data Mapper та Repository: Архітектура доступу до даних","/csharp/ado-net/data-mapper-repository","01.csharp/09.ado-net/11.data-mapper-repository",{"title":454,"path":455,"stem":456},"9.12. Identity Map, Unit of Work та Specification Pattern","/csharp/ado-net/advanced-patterns","01.csharp/09.ado-net/12.advanced-patterns",{"title":458,"icon":255,"path":459,"stem":460,"children":461,"page":59},"Ef Core","/csharp/ef-core","01.csharp/10.ef-core",[462,466,470,474,478,482,486,490,494,498,502,506,510,514,518,522,526,532,538,542,546,550,554,558,562,566,570,574,578,582,586,590,594,598,602,606,610,614,618,622,626,630,634,638,642,646],{"title":463,"path":464,"stem":465},"Що таке ORM? Від SQL до об'єктів","/csharp/ef-core/what-is-orm","01.csharp/10.ef-core/01.what-is-orm",{"title":467,"path":468,"stem":469},"Перший проєкт — від нуля до CRUD","/csharp/ef-core/first-project","01.csharp/10.ef-core/02.first-project",{"title":471,"path":472,"stem":473},"DbContext — Серце EF Core","/csharp/ef-core/dbcontext-deep-dive","01.csharp/10.ef-core/03.dbcontext-deep-dive",{"title":475,"path":476,"stem":477},"Провайдери баз даних — Архітектура та Вибір СУБД","/csharp/ef-core/database-providers","01.csharp/10.ef-core/04.database-providers",{"title":479,"path":480,"stem":481},"Конвенції EF Core — Магія без конфігурації","/csharp/ef-core/conventions","01.csharp/10.ef-core/05.conventions",{"title":483,"path":484,"stem":485},"Fluent API та Data Annotations — Явна конфігурація моделі","/csharp/ef-core/fluent-api-vs-annotations","01.csharp/10.ef-core/06.fluent-api-vs-annotations",{"title":487,"path":488,"stem":489},"Зв'язки — One-to-One та One-to-Many","/csharp/ef-core/relationships-basics","01.csharp/10.ef-core/07.relationships-basics",{"title":491,"path":492,"stem":493},"Зв'язки Advanced — Many-to-Many та Складні Сценарії","/csharp/ef-core/relationships-advanced","01.csharp/10.ef-core/08.relationships-advanced",{"title":495,"path":496,"stem":497},"Властивості — Типи, Конвертери, Компаратори (Частина 1)","/csharp/ef-core/property-configuration-part1","01.csharp/10.ef-core/09.property-configuration-part1",{"title":499,"path":500,"stem":501},"Властивості — Value Comparers, Generators, Shadow Properties (Частина 2)","/csharp/ef-core/property-configuration-part2","01.csharp/10.ef-core/09.property-configuration-part2",{"title":503,"path":504,"stem":505},"Складні типи — Owned Types та Complex Types (Частина 1)","/csharp/ef-core/complex-types-owned-part1","01.csharp/10.ef-core/10.complex-types-owned-part1",{"title":507,"path":508,"stem":509},"Складні типи — Complex Types, Keyless Entities, Порівняння (Частина 2)","/csharp/ef-core/complex-types-owned-part2","01.csharp/10.ef-core/10.complex-types-owned-part2",{"title":511,"path":512,"stem":513},"JSON Columns — Складні дані у JSON (Частина 1)","/csharp/ef-core/json-columns-part1","01.csharp/10.ef-core/11.json-columns-part1",{"title":515,"path":516,"stem":517},"JSON Columns — Value Comparers, Індекси, Провайдери (Частина 2)","/csharp/ef-core/json-columns-part2","01.csharp/10.ef-core/11.json-columns-part2",{"title":519,"path":520,"stem":521},"Успадкування — Абстрактні класи та TPH (Частина 1)","/csharp/ef-core/inheritance-part1","01.csharp/10.ef-core/12.inheritance-part1",{"title":523,"path":524,"stem":525},"Успадкування — TPT, TPC та Порівняння Стратегій (Частина 2)","/csharp/ef-core/inheritance-part2","01.csharp/10.ef-core/12.inheritance-part2",{"title":527,"path":528,"stem":529,"children":530},"Індекси, Обмеження та Схема (Частина 1)","/csharp/ef-core/indexes-constraints-part1","01.csharp/10.ef-core/13.indexes-constraints-part1",[531],{"title":527,"path":528,"stem":529},{"title":533,"path":534,"stem":535,"children":536},"Індекси, Обмеження та Схема (Частина 2)","/csharp/ef-core/indexes-constraints-part2","01.csharp/10.ef-core/13.indexes-constraints-part2",[537],{"title":533,"path":534,"stem":535},{"title":539,"path":540,"stem":541},"Seed Data — Початкові Дані (Частина 1)","/csharp/ef-core/seeding-part1","01.csharp/10.ef-core/14.seeding-part1",{"title":543,"path":544,"stem":545},"Seed Data — SQL-скрипти, Bogus та Стратегії (Частина 2)","/csharp/ef-core/seeding-part2","01.csharp/10.ef-core/14.seeding-part2",{"title":547,"path":548,"stem":549},"Global Query Filters — Глобальні Фільтри (Частина 1)","/csharp/ef-core/global-query-filters-part1","01.csharp/10.ef-core/15.global-query-filters-part1",{"title":551,"path":552,"stem":553},"Global Query Filters — Підводні камені та Інтеграція (Частина 2)","/csharp/ef-core/global-query-filters-part2","01.csharp/10.ef-core/15.global-query-filters-part2",{"title":555,"path":556,"stem":557},"LINQ-запити в EF Core (Частина 1)","/csharp/ef-core/linq-queries-part1","01.csharp/10.ef-core/16.linq-queries-part1",{"title":559,"path":560,"stem":561},"LINQ-запити в EF Core (Частина 2)","/csharp/ef-core/linq-queries-part2","01.csharp/10.ef-core/16.linq-queries-part2",{"title":563,"path":564,"stem":565},"Завантаження Пов'язаних Даних (Частина 1)","/csharp/ef-core/loading-related-data-part1","01.csharp/10.ef-core/17.loading-related-data-part1",{"title":567,"path":568,"stem":569},"Завантаження Пов'язаних Даних (Частина 2)","/csharp/ef-core/loading-related-data-part2","01.csharp/10.ef-core/17.loading-related-data-part2",{"title":571,"path":572,"stem":573},"Raw SQL, Views та Stored Procedures (Частина 1)","/csharp/ef-core/raw-sql-part1","01.csharp/10.ef-core/18.raw-sql-part1",{"title":575,"path":576,"stem":577},"Raw SQL — Stored Procedures, DbFunction та Bulk Operations (Частина 2)","/csharp/ef-core/raw-sql-part2","01.csharp/10.ef-core/18.raw-sql-part2",{"title":579,"path":580,"stem":581},"Продвинуті Запити — Compiled Queries, Bulk та Оптимізація (Частина 1)","/csharp/ef-core/advanced-queries-part1","01.csharp/10.ef-core/19.advanced-queries-part1",{"title":583,"path":584,"stem":585},"Продвинуті Запити — Query Tags, Bulk та Interceptors (Частина 2)","/csharp/ef-core/advanced-queries-part2","01.csharp/10.ef-core/19.advanced-queries-part2",{"title":587,"path":588,"stem":589},"Change Tracker — Відстеження Змін (Частина 1)","/csharp/ef-core/change-tracking-part1","01.csharp/10.ef-core/20.change-tracking-part1",{"title":591,"path":592,"stem":593},"Change Tracker — Графи Об'єктів та Disconnected (Частина 2)","/csharp/ef-core/change-tracking-part2","01.csharp/10.ef-core/20.change-tracking-part2",{"title":595,"path":596,"stem":597},"Збереження Даних та Транзакції (Частина 1)","/csharp/ef-core/saving-data-part1","01.csharp/10.ef-core/21.saving-data-part1",{"title":599,"path":600,"stem":601},"Збереження Даних — Concurrency та Outbox (Частина 2)","/csharp/ef-core/saving-data-part2","01.csharp/10.ef-core/21.saving-data-part2",{"title":603,"path":604,"stem":605},"Конкурентність та Блокування (Частина 1)","/csharp/ef-core/concurrency-part1","01.csharp/10.ef-core/22.concurrency-part1",{"title":607,"path":608,"stem":609},"Конкурентність — Дедлоки та Queue Processing (Частина 2)","/csharp/ef-core/concurrency-part2","01.csharp/10.ef-core/22.concurrency-part2",{"title":611,"path":612,"stem":613},"Міграції в EF Core — Основи (Частина 1)","/csharp/ef-core/migrations-basics-part1","01.csharp/10.ef-core/23.migrations-basics-part1",{"title":615,"path":616,"stem":617},"Міграції в EF Core — Основи (Частина 2)","/csharp/ef-core/migrations-basics-part2","01.csharp/10.ef-core/23.migrations-basics-part2",{"title":619,"path":620,"stem":621},"Міграції — Просунуті Сценарії (Частина 1)","/csharp/ef-core/migrations-advanced-part1","01.csharp/10.ef-core/24.migrations-advanced-part1",{"title":623,"path":624,"stem":625},"Міграції — Просунуті Сценарії (Частина 2)","/csharp/ef-core/migrations-advanced-part2","01.csharp/10.ef-core/24.migrations-advanced-part2",{"title":627,"path":628,"stem":629},"Управління Схемою та Database-First (Частина 1)","/csharp/ef-core/schema-management-part1","01.csharp/10.ef-core/25.schema-management-part1",{"title":631,"path":632,"stem":633},"Управління Схемою та Database-First (Частина 2)","/csharp/ef-core/schema-management-part2","01.csharp/10.ef-core/25.schema-management-part2",{"title":635,"path":636,"stem":637},"Продуктивність EF Core — Основи (Частина 1)","/csharp/ef-core/performance-fundamentals-part1","01.csharp/10.ef-core/26.performance-fundamentals-part1",{"title":639,"path":640,"stem":641},"Interceptors в EF Core (Частина 1)","/csharp/ef-core/interceptors-part1","01.csharp/10.ef-core/29.interceptors-part1",{"title":643,"path":644,"stem":645},"Interceptors в EF Core — Connection, Transaction та Materialization (Частина 2)","/csharp/ef-core/interceptors-part2","01.csharp/10.ef-core/29.interceptors-part2",{"title":647,"path":648,"stem":649},"План вивчення Entity Framework Core — Повний курс","/csharp/ef-core/implementation_plan","01.csharp/10.ef-core/implementation_plan",{"title":651,"icon":652,"path":653,"stem":654,"children":655,"page":59},"ASP.NET","i-devicon-dotnetcore","/csharp/aspnet","01.csharp/11.aspnet",[656,730,791,869,927,941,967,1057,1111,1182,1212,1289],{"title":657,"icon":658,"path":659,"stem":660,"children":661,"page":59},"Minimal API","i-lucide-network","/csharp/aspnet/minimal-api","01.csharp/11.aspnet/01.minimal-api",[662,666,670,674,678,682,686,690,694,698,702,706,710,714,718,722,726],{"title":663,"path":664,"stem":665},"Вступ до ASP.NET та еволюція фреймворку","/csharp/aspnet/minimal-api/introduction","01.csharp/11.aspnet/01.minimal-api/01.introduction",{"title":667,"path":668,"stem":669},"Перший додаток на ASP.NET Core","/csharp/aspnet/minimal-api/first-application","01.csharp/11.aspnet/01.minimal-api/02.first-application",{"title":671,"path":672,"stem":673},"WebApplication, Builder та Dependency Injection","/csharp/aspnet/minimal-api/webapplication-builder","01.csharp/11.aspnet/01.minimal-api/03.webapplication-builder",{"title":675,"path":676,"stem":677},"Конвеєр запитів та Middleware","/csharp/aspnet/minimal-api/request-pipeline-middleware","01.csharp/11.aspnet/01.minimal-api/04.request-pipeline-middleware",{"title":679,"path":680,"stem":681},"Маршрутизація в ASP.NET Core: Основи","/csharp/aspnet/minimal-api/routing-basics","01.csharp/11.aspnet/01.minimal-api/05.routing-basics",{"title":683,"path":684,"stem":685},"Маршрутизація в ASP.NET Core: Розширені можливості","/csharp/aspnet/minimal-api/routing-advanced","01.csharp/11.aspnet/01.minimal-api/06.routing-advanced",{"title":687,"path":688,"stem":689},"Статичні файли в ASP.NET Core","/csharp/aspnet/minimal-api/static-files","01.csharp/11.aspnet/01.minimal-api/07.static-files",{"title":691,"path":692,"stem":693},"Статичні Активи: MapStaticAssets (ASP.NET Core 9.0)","/csharp/aspnet/minimal-api/static-assets","01.csharp/11.aspnet/01.minimal-api/08.static-assets",{"title":695,"path":696,"stem":697},"Конфігурація в ASP.NET Core: Основи","/csharp/aspnet/minimal-api/configuration-fundamentals","01.csharp/11.aspnet/01.minimal-api/09.configuration-fundamentals",{"title":699,"path":700,"stem":701},"Конфігурація: Паттерн Options","/csharp/aspnet/minimal-api/configuration-options","01.csharp/11.aspnet/01.minimal-api/10.configuration-options",{"title":703,"path":704,"stem":705},"Логування в ASP.NET Core: Основи","/csharp/aspnet/minimal-api/logging-basics","01.csharp/11.aspnet/01.minimal-api/11.logging-basics",{"title":707,"path":708,"stem":709},"Логування: Serilog та Middleware","/csharp/aspnet/minimal-api/logging-advanced","01.csharp/11.aspnet/01.minimal-api/12.logging-advanced",{"title":711,"path":712,"stem":713},"Управління станом: HttpContext.Items та Cookies","/csharp/aspnet/minimal-api/state-management","01.csharp/11.aspnet/01.minimal-api/13.state-management",{"title":715,"path":716,"stem":717},"Стан сесії: Sessions","/csharp/aspnet/minimal-api/session-state","01.csharp/11.aspnet/01.minimal-api/14.session-state",{"title":719,"path":720,"stem":721},"Структура проєкту: від хаосу до архітектури","/csharp/aspnet/minimal-api/project-structure","01.csharp/11.aspnet/01.minimal-api/15.project-structure",{"title":723,"path":724,"stem":725},"Scalar у Minimal API: повний проєкт і Fluent OpenAPI","/csharp/aspnet/minimal-api/scalar-openapi-fluent","01.csharp/11.aspnet/01.minimal-api/16.scalar-openapi-fluent",{"title":727,"path":728,"stem":729},"Swagger / Swashbuckle у Minimal API: окремий класичний шлях","/csharp/aspnet/minimal-api/swagger-swashbuckle","01.csharp/11.aspnet/01.minimal-api/17.swagger-swashbuckle",{"title":731,"icon":658,"path":732,"stem":733,"children":734,"page":59},"API","/csharp/aspnet/api","01.csharp/11.aspnet/02.api",[735,739,743,747,751,755,759,763,767,771,775,779,783,787],{"title":736,"path":737,"stem":738},"Що таке API. Клієнт-серверна архітектура","/csharp/aspnet/api/what-is-api","01.csharp/11.aspnet/02.api/01.what-is-api",{"title":740,"path":741,"stem":742},"Формати даних: JSON, XML, TOML та бінарні формати","/csharp/aspnet/api/data-formats","01.csharp/11.aspnet/02.api/02.data-formats",{"title":744,"path":745,"stem":746},"Парадигми API та концепція REST","/csharp/aspnet/api/api-paradigms-rest","01.csharp/11.aspnet/02.api/03.api-paradigms-rest",{"title":748,"path":749,"stem":750},"HTTP-методи, статус-коди та заголовки","/csharp/aspnet/api/http-methods-status-codes","01.csharp/11.aspnet/02.api/04.http-methods-status-codes",{"title":752,"path":753,"stem":754},"Організація HTTP API за принципами REST","/csharp/aspnet/api/rest-organizing","01.csharp/11.aspnet/02.api/05.rest-organizing",{"title":756,"path":757,"stem":758},"Номенклатура URL та CRUD-операції","/csharp/aspnet/api/url-nomenclature-crud","01.csharp/11.aspnet/02.api/06.url-nomenclature-crud",{"title":760,"path":761,"stem":762},"Правила дизайну: іменування та стандарти","/csharp/aspnet/api/api-design-naming","01.csharp/11.aspnet/02.api/07.api-design-naming",{"title":764,"path":765,"stem":766},"Валідація, ліміти та обробка помилок","/csharp/aspnet/api/api-design-validation","01.csharp/11.aspnet/02.api/08.api-design-validation",{"title":768,"path":769,"stem":770},"Обробка помилок у Minimal API","/csharp/aspnet/api/error-handling-http","01.csharp/11.aspnet/02.api/09.error-handling-http",{"title":772,"path":773,"stem":774},"Ідемпотентність та синхронізація стану","/csharp/aspnet/api/idempotency-sync","01.csharp/11.aspnet/02.api/10.idempotency-sync",{"title":776,"path":777,"stem":778},"Пагінація та організація списків","/csharp/aspnet/api/pagination-lists","01.csharp/11.aspnet/02.api/11.pagination-lists",{"title":780,"path":781,"stem":782},"Безпека API, кешування та інтернаціоналізація","/csharp/aspnet/api/security-auth","01.csharp/11.aspnet/02.api/12.security-auth",{"title":784,"path":785,"stem":786},"Процес проєктування API та документування","/csharp/aspnet/api/api-design-process","01.csharp/11.aspnet/02.api/13.api-design-process",{"title":788,"path":789,"stem":790},"OpenAPI: контракт, специфікація та документація API","/csharp/aspnet/api/openapi","01.csharp/11.aspnet/02.api/14.openapi",{"title":792,"icon":793,"path":794,"stem":795,"children":796,"page":59},"Auth","i-lucide-shield-check","/csharp/aspnet/auth","01.csharp/11.aspnet/03.auth",[797,801,805,809,813,817,821,825,829,833,837,841,845,849,853,857,861,865],{"title":798,"path":799,"stem":800},"Основи аутентифікації та авторизації","/csharp/aspnet/auth/auth-fundamentals","01.csharp/11.aspnet/03.auth/01.auth-fundamentals",{"title":802,"path":803,"stem":804},"JWT-аутентифікація","/csharp/aspnet/auth/jwt-authentication","01.csharp/11.aspnet/03.auth/02.jwt-authentication",{"title":806,"path":807,"stem":808},"Авторизація: ролі, політики та resource-based доступ","/csharp/aspnet/auth/authorization-policies","01.csharp/11.aspnet/03.auth/03.authorization-policies",{"title":810,"path":811,"stem":812},"Cookie-аутентифікація та ASP.NET Core Identity","/csharp/aspnet/auth/cookie-auth-identity","01.csharp/11.aspnet/03.auth/04.cookie-auth-identity",{"title":814,"path":815,"stem":816},"JWT + Refresh Tokens (HttpOnly Cookie)","/csharp/aspnet/auth/04b.identity-auth-jwt","01.csharp/11.aspnet/03.auth/04b.identity-auth-jwt",{"title":818,"path":819,"stem":820},"Identity: Підтвердження Email та Скидання Пароля","/csharp/aspnet/auth/identity-email-confirmation","01.csharp/11.aspnet/03.auth/05.identity-email-confirmation",{"title":822,"path":823,"stem":824},"Identity: Двофакторна Аутентифікація (2FA)","/csharp/aspnet/auth/identity-two-factor","01.csharp/11.aspnet/03.auth/06.identity-two-factor",{"title":826,"path":827,"stem":828},"Identity: Внутрішня Архітектура та Кастомізація","/csharp/aspnet/auth/identity-internals","01.csharp/11.aspnet/03.auth/07.identity-internals",{"title":830,"path":831,"stem":832},"OAuth 2.0 та зовнішні провайдери","/csharp/aspnet/auth/oauth-external-providers","01.csharp/11.aspnet/03.auth/08.oauth-external-providers",{"title":834,"path":835,"stem":836},"Безпека на практиці: CORS, HTTPS та захист від атак","/csharp/aspnet/auth/security-hardening","01.csharp/11.aspnet/03.auth/09.security-hardening",{"title":838,"path":839,"stem":840},"Теорія OAuth 2.0: Поняття, Аналогії та Флоу","/csharp/aspnet/auth/oauth-theory","01.csharp/11.aspnet/03.auth/10.oauth-theory",{"title":842,"path":843,"stem":844},"OIDC, OAuth 2.0 та Keycloak в ASP.NET Core","/csharp/aspnet/auth/oidc-keycloak","01.csharp/11.aspnet/03.auth/10.oidc-keycloak",{"title":846,"path":847,"stem":848},"API Keys аутентифікація в ASP.NET Core","/csharp/aspnet/auth/api-keys","01.csharp/11.aspnet/03.auth/11.api-keys",{"title":850,"path":851,"stem":852},"Rate Limiting та Throttling в ASP.NET Core","/csharp/aspnet/auth/rate-limiting","01.csharp/11.aspnet/03.auth/12.rate-limiting",{"title":854,"path":855,"stem":856},"Refresh Token Rotation в ASP.NET Core","/csharp/aspnet/auth/refresh-token-rotation","01.csharp/11.aspnet/03.auth/13.refresh-token-rotation",{"title":858,"path":859,"stem":860},"Certificate Authentication та mTLS в ASP.NET Core","/csharp/aspnet/auth/certificate-auth","01.csharp/11.aspnet/03.auth/14.certificate-auth",{"title":862,"path":863,"stem":864},"RBAC, ABAC та ReBAC в ASP.NET Core","/csharp/aspnet/auth/rbac-abac-rebac","01.csharp/11.aspnet/03.auth/15.rbac-abac-rebac",{"title":866,"path":867,"stem":868},"Multi-tenancy та ізоляція даних в ASP.NET Core","/csharp/aspnet/auth/multi-tenancy","01.csharp/11.aspnet/03.auth/16.multi-tenancy",{"title":870,"icon":871,"path":872,"stem":873,"children":874,"page":59},"Нотифікації","i-lucide-bell","/csharp/aspnet/notifications","01.csharp/11.aspnet/04.notifications",[875,879,883,887,891,895,899,903,907,911,915,919,923],{"title":876,"path":877,"stem":878},"In-App нотифікації через базу даних","/csharp/aspnet/notifications/in-app-database-notifications","01.csharp/11.aspnet/04.notifications/01.in-app-database-notifications",{"title":880,"path":881,"stem":882},"Polling: Регулярний запит оновлень","/csharp/aspnet/notifications/polling","01.csharp/11.aspnet/04.notifications/02.polling",{"title":884,"path":885,"stem":886},"Server-Sent Events: Однострімовий push від сервера","/csharp/aspnet/notifications/server-sent-events","01.csharp/11.aspnet/04.notifications/03.server-sent-events",{"title":888,"path":889,"stem":890},"WebSockets: Двостороннє з'єднання в реальному часі","/csharp/aspnet/notifications/websockets","01.csharp/11.aspnet/04.notifications/04.websockets",{"title":892,"path":893,"stem":894},"SignalR: Абстракція над транспортами реального часу","/csharp/aspnet/notifications/signalr","01.csharp/11.aspnet/04.notifications/05.signalr",{"title":896,"path":897,"stem":898},"Background Services: Фонові задачі в ASP.NET Core","/csharp/aspnet/notifications/background-services","01.csharp/11.aspnet/04.notifications/06.background-services",{"title":900,"path":901,"stem":902},"Web Push нотифікації","/csharp/aspnet/notifications/web-push","01.csharp/11.aspnet/04.notifications/07.web-push",{"title":904,"path":905,"stem":906},"Email нотифікації","/csharp/aspnet/notifications/email-notifications","01.csharp/11.aspnet/04.notifications/08.email-notifications",{"title":908,"path":909,"stem":910},"Порівняння підходів: Як вибрати правильну технологію нотифікацій","/csharp/aspnet/notifications/choosing-the-right-approach","01.csharp/11.aspnet/04.notifications/09.choosing-the-right-approach",{"title":912,"path":913,"stem":914},"Hangfire: Надійне планування фонових задач","/csharp/aspnet/notifications/hangfire","01.csharp/11.aspnet/04.notifications/10.hangfire",{"title":916,"path":917,"stem":918},"Практика: Конвертація зображень у WebP через Hangfire","/csharp/aspnet/notifications/hangfire-image-webp","01.csharp/11.aspnet/04.notifications/11.hangfire-image-webp",{"title":920,"path":921,"stem":922},"Практика: Підготовка відео до HLS-стрімінгу через Hangfire","/csharp/aspnet/notifications/hangfire-video-hls","01.csharp/11.aspnet/04.notifications/12.hangfire-video-hls",{"title":924,"path":925,"stem":926},"Telegram-нотифікації: від одного повідомлення до масових розсилок і мульти-канального підходу","/csharp/aspnet/notifications/telegram-notifications","01.csharp/11.aspnet/04.notifications/13.telegram-notifications",{"title":928,"icon":929,"path":930,"stem":931,"children":932,"page":59},"Інтернаціоналізація","i-lucide-languages","/csharp/aspnet/i18n","01.csharp/11.aspnet/05.i18n",[933,937],{"title":934,"path":935,"stem":936},"Інтернаціоналізація (i18n) у Minimal API: від A до Я","/csharp/aspnet/i18n/internationalization","01.csharp/11.aspnet/05.i18n/01.internationalization",{"title":938,"path":939,"stem":940},"Humanizer: людиномовні рядки у .NET","/csharp/aspnet/i18n/humanizer","01.csharp/11.aspnet/05.i18n/02.humanizer",{"title":942,"icon":943,"path":944,"stem":945,"children":946,"page":59},"Кешування","i-lucide-layers","/csharp/aspnet/caching","01.csharp/11.aspnet/06.caching",[947,951,955,959,963],{"title":948,"path":949,"stem":950},"Огляд кешування: чотири рівні і коли що обирати","/csharp/aspnet/caching/caching","01.csharp/11.aspnet/06.caching/01.caching",{"title":952,"path":953,"stem":954},"IMemoryCache: кеш в оперативній пам'яті","/csharp/aspnet/caching/memory-cache","01.csharp/11.aspnet/06.caching/02.memory-cache",{"title":956,"path":957,"stem":958},"IDistributedCache і Redis: розподілений кеш","/csharp/aspnet/caching/distributed-cache","01.csharp/11.aspnet/06.caching/03.distributed-cache",{"title":960,"path":961,"stem":962},"Response Cache: HTTP-кешування через Cache-Control","/csharp/aspnet/caching/response-cache","01.csharp/11.aspnet/06.caching/04.response-cache",{"title":964,"path":965,"stem":966},"Output Cache: серверний кеш HTTP-відповідей (.NET 7+)","/csharp/aspnet/caching/output-cache","01.csharp/11.aspnet/06.caching/05.output-cache",{"title":968,"icon":969,"path":970,"stem":971,"children":972,"page":59},"Тестування","i-lucide-test-tube","/csharp/aspnet/testing","01.csharp/11.aspnet/07.testing",[973,977,981,985,989,993,997,1001,1005,1009,1013,1017,1021,1025,1029,1033,1037,1041,1045,1049,1053],{"title":974,"path":975,"stem":976},"Що таке тестування? Від інтуїції до науки","/csharp/aspnet/testing/what-is-testing","01.csharp/11.aspnet/07.testing/01.what-is-testing",{"title":978,"path":979,"stem":980},"Піраміда тестування — Стратегія, а не Догма","/csharp/aspnet/testing/testing-pyramid","01.csharp/11.aspnet/07.testing/02.testing-pyramid",{"title":982,"path":983,"stem":984},"Дві Школи Тестування — Лондон проти Детройту","/csharp/aspnet/testing/testing-schools","01.csharp/11.aspnet/07.testing/03.testing-schools",{"title":986,"path":987,"stem":988},"TDD та BDD — Тести як Дизайн-інструмент","/csharp/aspnet/testing/tdd-and-bdd","01.csharp/11.aspnet/07.testing/04.tdd-and-bdd",{"title":990,"path":991,"stem":992},"Що саме тестувати — Техніки аналізу та Циклomatична складність","/csharp/aspnet/testing/what-to-test","01.csharp/11.aspnet/07.testing/05.what-to-test",{"title":994,"path":995,"stem":996},"Тестові Фреймворки — Навіщо вони і що всередині","/csharp/aspnet/testing/test-frameworks","01.csharp/11.aspnet/07.testing/06.test-frameworks",{"title":998,"path":999,"stem":1000},"xUnit — Факти, Теорії та Lifecycle тестів","/csharp/aspnet/testing/xunit-basics","01.csharp/11.aspnet/07.testing/07.xunit-basics",{"title":1002,"path":1003,"stem":1004},"xUnit Advanced — Fixtures, Кастомізація та Розширення","/csharp/aspnet/testing/xunit-advanced","01.csharp/11.aspnet/07.testing/08.xunit-advanced",{"title":1006,"path":1007,"stem":1008},"Moq — Глибоке занурення в мокування","/csharp/aspnet/testing/mocking-with-moq","01.csharp/11.aspnet/07.testing/09.mocking-with-moq",{"title":1010,"path":1011,"stem":1012},"Тестування Баз Даних — EF Core, SQLite та Testcontainers","/csharp/aspnet/testing/database-testing","01.csharp/11.aspnet/07.testing/10.database-testing",{"title":1014,"path":1015,"stem":1016},"Integration Testing — Частина 1 [Теорія та WebApplicationFactory]","/csharp/aspnet/testing/integration-testing","01.csharp/11.aspnet/07.testing/11.integration-testing",{"title":1018,"path":1019,"stem":1020},"Інтеграційне тестування — Практика","/csharp/aspnet/testing/11a.integration-testing-practice","01.csharp/11.aspnet/07.testing/11a.integration-testing-practice",{"title":1022,"path":1023,"stem":1024},"Integration Testing — Частина 2 [Просунуті Сценарії та Testcontainers]","/csharp/aspnet/testing/integration-testing-advanced","01.csharp/11.aspnet/07.testing/12.integration-testing-advanced",{"title":1026,"path":1027,"stem":1028},"Професійний Postman: Колекції, Змінні та GitHub Інтеграція","/csharp/aspnet/testing/postman-professional","01.csharp/11.aspnet/07.testing/13.postman-professional",{"title":1030,"path":1031,"stem":1032},"HttpClient у Тестах Частина 1: Архітектура та MockHttpMessageHandler","/csharp/aspnet/testing/httpclient-testing","01.csharp/11.aspnet/07.testing/14.httpclient-testing",{"title":1034,"path":1035,"stem":1036},"HttpClient у Тестах Частина 2: WireMock.Net та Resilience","/csharp/aspnet/testing/wiremock-net","01.csharp/11.aspnet/07.testing/15.wiremock-net",{"title":1038,"path":1039,"stem":1040},"Патерни та Анти-патерни Тестування: Test Smells","/csharp/aspnet/testing/testing-patterns","01.csharp/11.aspnet/07.testing/16.testing-patterns",{"title":1042,"path":1043,"stem":1044},"Просунуті інструменти: Time, Snapshots та Властивості","/csharp/aspnet/testing/advanced-testing-tools","01.csharp/11.aspnet/07.testing/17.advanced-testing-tools",{"title":1046,"path":1047,"stem":1048},"Тестування Архітектури з NetArchTest","/csharp/aspnet/testing/architecture-testing","01.csharp/11.aspnet/07.testing/18.architecture-testing",{"title":1050,"path":1051,"stem":1052},"Тестування Продуктивності: BenchmarkDotNet, NBomber та k6","/csharp/aspnet/testing/performance-testing","01.csharp/11.aspnet/07.testing/19.performance-testing",{"title":1054,"path":1055,"stem":1056},"Залишок плану для курсу \"Тестування ASP.NET Minimal API\"","/csharp/aspnet/testing/remaining_plan","01.csharp/11.aspnet/07.testing/remaining_plan",{"title":1058,"icon":1059,"path":1060,"stem":1061,"children":1062,"page":59},"Платежі","i-lucide-credit-card","/csharp/aspnet/payments","01.csharp/11.aspnet/08.payments",[1063,1067,1071,1075,1079,1083,1087,1091,1095,1099,1103,1107],{"title":1064,"path":1065,"stem":1066},"Основи платіжної інфраструктури","/csharp/aspnet/payments/payment-fundamentals","01.csharp/11.aspnet/08.payments/01.payment-fundamentals",{"title":1068,"path":1069,"stem":1070},"Методи оплати в Україні","/csharp/aspnet/payments/payment-methods-ukraine","01.csharp/11.aspnet/08.payments/02.payment-methods-ukraine",{"title":1072,"path":1073,"stem":1074},"PCI DSS та безпека платежів","/csharp/aspnet/payments/pci-dss-security","01.csharp/11.aspnet/08.payments/03.pci-dss-security",{"title":1076,"path":1077,"stem":1078},"Архітектура платіжної підсистеми","/csharp/aspnet/payments/payment-architecture","01.csharp/11.aspnet/08.payments/04.payment-architecture",{"title":1080,"path":1081,"stem":1082},"Інтеграція LiqPay (ПриватБанк)","/csharp/aspnet/payments/liqpay-integration","01.csharp/11.aspnet/08.payments/05.liqpay-integration",{"title":1084,"path":1085,"stem":1086},"Інтеграція Monobank Acquiring API","/csharp/aspnet/payments/monobank-acquiring","01.csharp/11.aspnet/08.payments/06.monobank-acquiring",{"title":1088,"path":1089,"stem":1090},"Інтеграція Stripe","/csharp/aspnet/payments/stripe-integration","01.csharp/11.aspnet/08.payments/07.stripe-integration",{"title":1092,"path":1093,"stem":1094},"Webhooks — глибоке занурення","/csharp/aspnet/payments/webhooks-deep-dive","01.csharp/11.aspnet/08.payments/08.webhooks-deep-dive",{"title":1096,"path":1097,"stem":1098},"Підписки та рекурентні платежі","/csharp/aspnet/payments/subscriptions-recurring","01.csharp/11.aspnet/08.payments/09.subscriptions-recurring",{"title":1100,"path":1101,"stem":1102},"Повернення коштів та диспути","/csharp/aspnet/payments/refunds-disputes","01.csharp/11.aspnet/08.payments/10.refunds-disputes",{"title":1104,"path":1105,"stem":1106},"Тестування платіжних інтеграцій","/csharp/aspnet/payments/testing-payments","01.csharp/11.aspnet/08.payments/11.testing-payments",{"title":1108,"path":1109,"stem":1110},"Чекліст виходу в Production","/csharp/aspnet/payments/production-checklist","01.csharp/11.aspnet/08.payments/12.production-checklist",{"title":1112,"icon":1113,"items":1114,"path":1127,"stem":1128,"children":1129,"page":59},"Популярні бібліотеки","lucide:box",[1115,1116,1117,1118,1119,1120,1121,1122,1123,1124,1125,1126],"01.fluent-validation","02.mapster","03.erroror-result-pattern","04.serilog","05.mediatr","06.polly","07.health-checks","08.feature-management","09.fluent-email","10.quest-pdf","11.bogus","12.humanizer-guard","/csharp/aspnet/libraries","01.csharp/11.aspnet/09.libraries",[1130,1134,1138,1142,1146,1150,1154,1158,1162,1166,1170,1174,1178],{"title":1131,"path":1132,"stem":1133},"Валідація з FluentValidation в ASP.NET Core","/csharp/aspnet/libraries/fluent-validation","01.csharp/11.aspnet/09.libraries/01.fluent-validation",{"title":1135,"path":1136,"stem":1137},"Маппінг об","/csharp/aspnet/libraries/mapster","01.csharp/11.aspnet/09.libraries/02.mapster",{"title":1139,"path":1140,"stem":1141},"Обробка помилок з ErrorOr та Result Pattern в ASP.NET Core","/csharp/aspnet/libraries/erroror-result-pattern","01.csharp/11.aspnet/09.libraries/03.erroror-result-pattern",{"title":1143,"path":1144,"stem":1145},"Структуроване логування з Serilog в ASP.NET Core","/csharp/aspnet/libraries/serilog","01.csharp/11.aspnet/09.libraries/04.serilog",{"title":1147,"path":1148,"stem":1149},"CQRS та Mediator з MediatR в ASP.NET Core","/csharp/aspnet/libraries/mediatr","01.csharp/11.aspnet/09.libraries/05.mediatr",{"title":1151,"path":1152,"stem":1153},"Відмовостійкість з Polly в ASP.NET Core","/csharp/aspnet/libraries/polly","01.csharp/11.aspnet/09.libraries/06.polly",{"title":1155,"path":1156,"stem":1157},"Health Checks в ASP.NET Core","/csharp/aspnet/libraries/health-checks","01.csharp/11.aspnet/09.libraries/07.health-checks",{"title":1159,"path":1160,"stem":1161},"Feature Management та Feature Flags в ASP.NET Core","/csharp/aspnet/libraries/feature-management","01.csharp/11.aspnet/09.libraries/08.feature-management",{"title":1163,"path":1164,"stem":1165},"Відправка Email з FluentEmail в ASP.NET Core","/csharp/aspnet/libraries/fluent-email","01.csharp/11.aspnet/09.libraries/09.fluent-email",{"title":1167,"path":1168,"stem":1169},"Генерація PDF з QuestPDF в ASP.NET Core","/csharp/aspnet/libraries/quest-pdf","01.csharp/11.aspnet/09.libraries/10.quest-pdf",{"title":1171,"path":1172,"stem":1173},"Генерація тестових даних з Bogus в ASP.NET Core","/csharp/aspnet/libraries/bogus","01.csharp/11.aspnet/09.libraries/11.bogus",{"title":1175,"path":1176,"stem":1177},"Humanizer та Guard Clauses в ASP.NET Core","/csharp/aspnet/libraries/humanizer-guard","01.csharp/11.aspnet/09.libraries/12.humanizer-guard",{"title":1179,"path":1180,"stem":1181},"План модуля 10.libraries — Популярні бібліотеки ASP.NET","/csharp/aspnet/libraries/plan","01.csharp/11.aspnet/09.libraries/plan",{"title":1183,"icon":1184,"path":1185,"stem":1186,"children":1187,"page":59},"Razor Pages","i-lucide-layout-template","/csharp/aspnet/razor-pages","01.csharp/11.aspnet/10.razor-pages",[1188,1192,1196,1200,1204,1208],{"title":1189,"path":1190,"stem":1191},"Від Minimal API до Razor Pages: концептуальний перехід","/csharp/aspnet/razor-pages/from-minimal-api","01.csharp/11.aspnet/10.razor-pages/01.from-minimal-api",{"title":1193,"path":1194,"stem":1195},"PageModel: логіка сторінки Razor Pages","/csharp/aspnet/razor-pages/page-model","01.csharp/11.aspnet/10.razor-pages/02.page-model",{"title":1197,"path":1198,"stem":1199},"Razor синтаксис: шаблонізатор у .cshtml","/csharp/aspnet/razor-pages/razor-syntax","01.csharp/11.aspnet/10.razor-pages/03.razor-syntax",{"title":1201,"path":1202,"stem":1203},"Tag Helpers: типізований HTML","/csharp/aspnet/razor-pages/tag-helpers","01.csharp/11.aspnet/10.razor-pages/04.tag-helpers",{"title":1205,"path":1206,"stem":1207},"Форми і валідація: повний цикл обробки даних","/csharp/aspnet/razor-pages/forms-validation","01.csharp/11.aspnet/10.razor-pages/05.forms-validation",{"title":1209,"path":1210,"stem":1211},"Практичний проєкт: TaskManager на Razor Pages","/csharp/aspnet/razor-pages/project-task-manager","01.csharp/11.aspnet/10.razor-pages/06.project-task-manager",{"title":1213,"path":1214,"stem":1215,"children":1216,"page":59},"ASP.NET Core MVC","/csharp/aspnet/mvc","01.csharp/11.aspnet/11.mvc",[1217,1221,1225,1229,1233,1237,1241,1245,1249,1253,1257,1261,1265,1269,1273,1277,1281,1285],{"title":1218,"path":1219,"stem":1220},"Патерн MVC: архітектура, що змінила веб","/csharp/aspnet/mvc/mvc-pattern","01.csharp/11.aspnet/11.mvc/01.mvc-pattern",{"title":1222,"path":1223,"stem":1224},"Від Razor Pages до MVC: концептуальний перехід","/csharp/aspnet/mvc/from-razor-pages","01.csharp/11.aspnet/11.mvc/02.from-razor-pages",{"title":1226,"path":1227,"stem":1228},"Controllers та Actions: серце MVC","/csharp/aspnet/mvc/controllers-actions","01.csharp/11.aspnet/11.mvc/03.controllers-actions",{"title":1230,"path":1231,"stem":1232},"Маршрутизація в MVC: Convention vs Attribute Routing","/csharp/aspnet/mvc/routing-mvc","01.csharp/11.aspnet/11.mvc/04.routing-mvc",{"title":1234,"path":1235,"stem":1236},"Model Binding: від HTTP до C#","/csharp/aspnet/mvc/model-binding","01.csharp/11.aspnet/11.mvc/05.model-binding",{"title":1238,"path":1239,"stem":1240},"Views, ViewData, ViewBag, TempData і ViewModel","/csharp/aspnet/mvc/views-viewdata-tempdata","01.csharp/11.aspnet/11.mvc/06.views-viewdata-tempdata",{"title":1242,"path":1243,"stem":1244},"Filters: аспектно-орієнтоване програмування в MVC","/csharp/aspnet/mvc/filters","01.csharp/11.aspnet/11.mvc/07.filters",{"title":1246,"path":1247,"stem":1248},"Areas: структурування великих застосунків","/csharp/aspnet/mvc/areas","01.csharp/11.aspnet/11.mvc/08.areas",{"title":1250,"path":1251,"stem":1252},"View Components: повторювані незалежні блоки UI","/csharp/aspnet/mvc/view-components","01.csharp/11.aspnet/11.mvc/09.view-components",{"title":1254,"path":1255,"stem":1256},"Display та Editor Templates","/csharp/aspnet/mvc/display-editor-templates","01.csharp/11.aspnet/11.mvc/10.display-editor-templates",{"title":1258,"path":1259,"stem":1260},"Валідація: IValidatableObject та FluentValidation","/csharp/aspnet/mvc/validation-advanced","01.csharp/11.aspnet/11.mvc/11.validation-advanced",{"title":1262,"path":1263,"stem":1264},"HTMX: інтерактивність через HTML-атрибути","/csharp/aspnet/mvc/htmx","01.csharp/11.aspnet/11.mvc/12.htmx",{"title":1266,"path":1267,"stem":1268},"HTMX у ASP.NET Core MVC: серверна інтеграція","/csharp/aspnet/mvc/ajax-htmx-mvc","01.csharp/11.aspnet/11.mvc/13.ajax-htmx-mvc",{"title":1270,"path":1271,"stem":1272},"Практичний проєкт: Каталог товарів з HTMX","/csharp/aspnet/mvc/htmx-project","01.csharp/11.aspnet/11.mvc/14.htmx-project",{"title":1274,"path":1275,"stem":1276},"Завантаження та обробка файлів","/csharp/aspnet/mvc/file-upload","01.csharp/11.aspnet/11.mvc/15.file-upload",{"title":1278,"path":1279,"stem":1280},"Глобалізація та Локалізація MVC","/csharp/aspnet/mvc/globalization-localization","01.csharp/11.aspnet/11.mvc/16.globalization-localization",{"title":1282,"path":1283,"stem":1284},"Підсумковий проєкт: Блог-платформа","/csharp/aspnet/mvc/mvc-project","01.csharp/11.aspnet/11.mvc/17.mvc-project",{"title":1286,"path":1287,"stem":1288},"План курсу: ASP.NET Core MVC","/csharp/aspnet/mvc/plan","01.csharp/11.aspnet/11.mvc/plan",{"title":1290,"path":1291,"stem":1292,"children":1293,"page":59},"Web Api","/csharp/aspnet/web-api","01.csharp/11.aspnet/12.web-api",[1294,1298,1302,1306,1310,1314,1318,1322,1326,1330,1334,1338,1342],{"title":1295,"path":1296,"stem":1297},"Від Minimal API до Controller-based API","/csharp/aspnet/web-api/from-minimal-api-to-controllers","01.csharp/11.aspnet/12.web-api/01.from-minimal-api-to-controllers",{"title":1299,"path":1300,"stem":1301},"ControllerBase, ActionResult\u003CT> та Response Types","/csharp/aspnet/web-api/controller-base-actionresult","01.csharp/11.aspnet/12.web-api/02.controller-base-actionresult",{"title":1303,"path":1304,"stem":1305},"Content Negotiation - JSON, XML та власні форматери","/csharp/aspnet/web-api/content-negotiation","01.csharp/11.aspnet/12.web-api/03.content-negotiation",{"title":1307,"path":1308,"stem":1309},"Версіонування API","/csharp/aspnet/web-api/api-versioning","01.csharp/11.aspnet/12.web-api/04.api-versioning",{"title":1311,"path":1312,"stem":1313},"ProblemDetails та структурована обробка помилок","/csharp/aspnet/web-api/problemdetails-error-handling","01.csharp/11.aspnet/12.web-api/05.problemdetails-error-handling",{"title":1315,"path":1316,"stem":1317},"Фільтри у Web API контексті","/csharp/aspnet/web-api/filters-for-api","01.csharp/11.aspnet/12.web-api/06.filters-for-api",{"title":1319,"path":1320,"stem":1321},"Пагінація, фільтрація та сортування","/csharp/aspnet/web-api/pagination-filtering-sorting","01.csharp/11.aspnet/12.web-api/07.pagination-filtering-sorting",{"title":1323,"path":1324,"stem":1325},"HATEOAS та Resource Expansion","/csharp/aspnet/web-api/hateoas-resource-expansion","01.csharp/11.aspnet/12.web-api/08.hateoas-resource-expansion",{"title":1327,"path":1328,"stem":1329},"Гібридна архітектура - Minimal API + Controllers","/csharp/aspnet/web-api/minimal-api-vs-controllers-hybrid","01.csharp/11.aspnet/12.web-api/09.minimal-api-vs-controllers-hybrid",{"title":1331,"path":1332,"stem":1333},"Документація API - Swashbuckle, NSwag та генерація клієнтів","/csharp/aspnet/web-api/api-documentation-generation","01.csharp/11.aspnet/12.web-api/10.api-documentation-generation",{"title":1335,"path":1336,"stem":1337},"Health Checks та моніторинг API","/csharp/aspnet/web-api/health-checks-monitoring","01.csharp/11.aspnet/12.web-api/11.health-checks-monitoring",{"title":1339,"path":1340,"stem":1341},"Підсумковий проєкт - Production-Ready REST API","/csharp/aspnet/web-api/web-api-project","01.csharp/11.aspnet/12.web-api/12.web-api-project",{"title":1343,"path":1344,"stem":1345},"План курсу: ASP.NET Core Web API (Controllers)","/csharp/aspnet/web-api/plan","01.csharp/11.aspnet/12.web-api/plan",{"title":1347,"icon":1348,"path":1349,"stem":1350,"children":1351,"page":59},"Desktop UI","i-lucide-app-window","/csharp/desktop-ui","01.csharp/12.desktop-ui",[1352,1356,1360,1364,1368,1372,1376,1380,1384,1388,1392,1396,1400,1404,1408,1412,1416,1420,1424,1428,1432,1436,1440,1444,1448,1452,1456,1460,1464,1468,1472,1476,1480,1484,1488,1492,1496,1500,1504,1508,1512,1516,1520,1524,1528,1532,1536,1540,1544,1548,1552,1556,1560,1564,1568,1572,1576,1580,1584,1588,1592,1596,1600,1604,1608,1612,1616,1620,1624,1628,1632],{"title":1353,"path":1354,"stem":1355},"Що таке десктопна розробка?","/csharp/desktop-ui/what-is-desktop-dev","01.csharp/12.desktop-ui/01.what-is-desktop-dev",{"title":1357,"path":1358,"stem":1359},"Архітектура WPF — як влаштований графічний інтерфейс","/csharp/desktop-ui/wpf-architecture","01.csharp/12.desktop-ui/02.wpf-architecture",{"title":1361,"path":1362,"stem":1363},"Перший WPF-проєкт — від нуля до вікна","/csharp/desktop-ui/first-wpf-app","01.csharp/12.desktop-ui/03.first-wpf-app",{"title":1365,"path":1366,"stem":1367},"Перший Avalonia-проєкт: WPF для всіх платформ","/csharp/desktop-ui/03a.first-avalonia-app","01.csharp/12.desktop-ui/03a.first-avalonia-app",{"title":1369,"path":1370,"stem":1371},"XAML: декларативний інтерфейс","/csharp/desktop-ui/xaml-basics","01.csharp/12.desktop-ui/04.xaml-basics",{"title":1373,"path":1374,"stem":1375},"Fluent UI у WPF — сучасний дизайн Windows 11","/csharp/desktop-ui/04a.wpf-fluent-ui","01.csharp/12.desktop-ui/04a.wpf-fluent-ui",{"title":1377,"path":1378,"stem":1379},"WPF UI — сучасна бібліотека Fluent контролів","/csharp/desktop-ui/04b.wpf-ui-library","01.csharp/12.desktop-ui/04b.wpf-ui-library",{"title":1381,"path":1382,"stem":1383},"HandyControl — велика бібліотека UI контролів для WPF","/csharp/desktop-ui/04c.handycontrol-library","01.csharp/12.desktop-ui/04c.handycontrol-library",{"title":1385,"path":1386,"stem":1387},"Простори імен та ресурси XAML","/csharp/desktop-ui/xaml-namespaces-resources","01.csharp/12.desktop-ui/05.xaml-namespaces-resources",{"title":1389,"path":1390,"stem":1391},"XAML в Avalonia: ключові відмінності від WPF","/csharp/desktop-ui/05a.avalonia-xaml-differences","01.csharp/12.desktop-ui/05a.avalonia-xaml-differences",{"title":1393,"path":1394,"stem":1395},"Розширення розмітки XAML (Markup Extensions)","/csharp/desktop-ui/xaml-markup-extensions","01.csharp/12.desktop-ui/06.xaml-markup-extensions",{"title":1397,"path":1398,"stem":1399},"Панелі Layout: StackPanel, WrapPanel, DockPanel","/csharp/desktop-ui/layout-panels-part1","01.csharp/12.desktop-ui/07.layout-panels-part1",{"title":1401,"path":1402,"stem":1403},"Grid, Canvas, UniformGrid","/csharp/desktop-ui/layout-panels-part2","01.csharp/12.desktop-ui/07.layout-panels-part2",{"title":1405,"path":1406,"stem":1407},"Просунуті техніки Layout","/csharp/desktop-ui/layout-advanced","01.csharp/12.desktop-ui/08.layout-advanced",{"title":1409,"path":1410,"stem":1411},"Адаптивний Layout та найкращі практики","/csharp/desktop-ui/layout-responsive","01.csharp/12.desktop-ui/09.layout-responsive",{"title":1413,"path":1414,"stem":1415},"Layout в Avalonia: відмінності та нові можливості","/csharp/desktop-ui/09a.layout-avalonia","01.csharp/12.desktop-ui/09a.layout-avalonia",{"title":1417,"path":1418,"stem":1419},"Button, Image, ProgressBar та інші базові контроли","/csharp/desktop-ui/basic-controls","01.csharp/12.desktop-ui/10.basic-controls",{"title":1421,"path":1422,"stem":1423},"Контроли в Avalonia: відмінності від WPF","/csharp/desktop-ui/10a.controls-avalonia","01.csharp/12.desktop-ui/10a.controls-avalonia",{"title":1425,"path":1426,"stem":1427},"Текстові контроли — TextBlock, TextBox, RichTextBox","/csharp/desktop-ui/text-controls","01.csharp/12.desktop-ui/11.text-controls",{"title":1429,"path":1430,"stem":1431},"Контроли вибору — CheckBox, RadioButton, ComboBox, ListBox, DatePicker","/csharp/desktop-ui/selection-controls","01.csharp/12.desktop-ui/12.selection-controls",{"title":1433,"path":1434,"stem":1435},"Content Model — GroupBox, Expander, TabControl, StatusBar","/csharp/desktop-ui/content-controls","01.csharp/12.desktop-ui/13.content-controls",{"title":1437,"path":1438,"stem":1439},"UI/UX принципи десктопних застосунків","/csharp/desktop-ui/13a.ui-ux-principles","01.csharp/12.desktop-ui/13a.ui-ux-principles",{"title":1441,"path":1442,"stem":1443},"Dependency Properties — Концепція та Value Resolution","/csharp/desktop-ui/dependency-properties-part1","01.csharp/12.desktop-ui/14.dependency-properties-part1",{"title":1445,"path":1446,"stem":1447},"Avalonia Property System — StyledProperty та DirectProperty","/csharp/desktop-ui/14a.avalonia-property-system","01.csharp/12.desktop-ui/14a.avalonia-property-system",{"title":1449,"path":1450,"stem":1451},"Attached Properties — Властивості без меж","/csharp/desktop-ui/attached-properties","01.csharp/12.desktop-ui/15.attached-properties",{"title":1453,"path":1454,"stem":1455},"Routed Events — Маршрутизація подій у WPF","/csharp/desktop-ui/routed-events","01.csharp/12.desktop-ui/16.routed-events",{"title":1457,"path":1458,"stem":1459},"Data Binding — Від Code-Behind до Декларативності","/csharp/desktop-ui/data-binding-basics-part1","01.csharp/12.desktop-ui/17.data-binding-basics-part1",{"title":1461,"path":1462,"stem":1463},"INotifyPropertyChanged — Живе оновлення UI","/csharp/desktop-ui/data-binding-basics-part2","01.csharp/12.desktop-ui/17.data-binding-basics-part2",{"title":1465,"path":1466,"stem":1467},"Compiled Bindings в Avalonia — Безпека на етапі компіляції","/csharp/desktop-ui/17a.avalonia-compiled-bindings","01.csharp/12.desktop-ui/17a.avalonia-compiled-bindings",{"title":1469,"path":1470,"stem":1471},"Просунутий Data Binding — ElementName, RelativeSource, MultiBinding","/csharp/desktop-ui/data-binding-advanced","01.csharp/12.desktop-ui/18.data-binding-advanced",{"title":1473,"path":1474,"stem":1475},"Value Converters — Перетворення типів даних у Data Binding","/csharp/desktop-ui/value-converters","01.csharp/12.desktop-ui/19.value-converters",{"title":1477,"path":1478,"stem":1479},"Data Templates — Візуалізація об'єктів у WPF","/csharp/desktop-ui/data-templates","01.csharp/12.desktop-ui/20.data-templates",{"title":1481,"path":1482,"stem":1483},"Collections Binding Part 1 — ObservableCollection та ItemsControl","/csharp/desktop-ui/collections-binding-part1","01.csharp/12.desktop-ui/21.collections-binding-part1",{"title":1485,"path":1486,"stem":1487},"Collections Binding Part 2 — ICollectionView, Filtering, Sorting та Virtualization","/csharp/desktop-ui/collections-binding-part2","01.csharp/12.desktop-ui/21.collections-binding-part2",{"title":1489,"path":1490,"stem":1491},"MVVM Pattern — Від Spaghetti Code до архітектури","/csharp/desktop-ui/mvvm-pattern","01.csharp/12.desktop-ui/22.mvvm-pattern",{"title":1493,"path":1494,"stem":1495},"ViewModel Implementation — Від BaseViewModel до валідації","/csharp/desktop-ui/viewmodel-implementation","01.csharp/12.desktop-ui/23.viewmodel-implementation",{"title":1497,"path":1498,"stem":1499},"Commands — Від event handlers до декларативних команд","/csharp/desktop-ui/commands","01.csharp/12.desktop-ui/24.commands",{"title":1501,"path":1502,"stem":1503},"MVVM Toolkit — MVVM без boilerplate через Source Generators","/csharp/desktop-ui/mvvm-toolkit","01.csharp/12.desktop-ui/25.mvvm-toolkit",{"title":1505,"path":1506,"stem":1507},"Messenger Pattern — Комунікація між ViewModel без прямих посилань","/csharp/desktop-ui/messenger-pattern","01.csharp/12.desktop-ui/26.messenger-pattern",{"title":1509,"path":1510,"stem":1511},"Стилі WPF — CSS для десктопу","/csharp/desktop-ui/styles-basics","01.csharp/12.desktop-ui/27.styles-basics",{"title":1513,"path":1514,"stem":1515},"CSS-like стилі Avalonia","/csharp/desktop-ui/27a.avalonia-css-styling","01.csharp/12.desktop-ui/27a.avalonia-css-styling",{"title":1517,"path":1518,"stem":1519},"Control Templates — Частина 1. Концепція та TemplateBinding","/csharp/desktop-ui/control-templates-part1","01.csharp/12.desktop-ui/28.control-templates-part1",{"title":1521,"path":1522,"stem":1523},"Control Templates — Частина 2. Named Parts та ContentPresenter","/csharp/desktop-ui/control-templates-part2","01.csharp/12.desktop-ui/28.control-templates-part2",{"title":1525,"path":1526,"stem":1527},"Control Themes в Avalonia — нова ера стилізації","/csharp/desktop-ui/28a.avalonia-control-themes","01.csharp/12.desktop-ui/28a.avalonia-control-themes",{"title":1529,"path":1530,"stem":1531},"Triggers та Visual State Manager у WPF","/csharp/desktop-ui/triggers-visual-states","01.csharp/12.desktop-ui/29.triggers-visual-states",{"title":1533,"path":1534,"stem":1535},"Pseudo-classes в Avalonia — замість WPF Triggers","/csharp/desktop-ui/29a.avalonia-pseudo-classes","01.csharp/12.desktop-ui/29a.avalonia-pseudo-classes",{"title":1537,"path":1538,"stem":1539},"Теми та ресурсні словники у WPF","/csharp/desktop-ui/resources-themes","01.csharp/12.desktop-ui/30.resources-themes",{"title":1541,"path":1542,"stem":1543},"Avalonia Themes — Fluent Design та система тематизації","/csharp/desktop-ui/30a.avalonia-themes-fluent","01.csharp/12.desktop-ui/30a.avalonia-themes-fluent",{"title":1545,"path":1546,"stem":1547},"Контроли колекцій — глибоке занурення","/csharp/desktop-ui/collection-controls","01.csharp/12.desktop-ui/31.collection-controls",{"title":1549,"path":1550,"stem":1551},"DataGrid — колонки та базове відображення","/csharp/desktop-ui/datagrid-part1","01.csharp/12.desktop-ui/32.datagrid-part1",{"title":1553,"path":1554,"stem":1555},"DataGrid — сортування, фільтрація, редагування","/csharp/desktop-ui/datagrid-part2","01.csharp/12.desktop-ui/32.datagrid-part2",{"title":1557,"path":1558,"stem":1559},"TreeView та GridView","/csharp/desktop-ui/treeview-listview","01.csharp/12.desktop-ui/33.treeview-listview",{"title":1561,"path":1562,"stem":1563},"Меню, Toolbar, ContextMenu, StatusBar","/csharp/desktop-ui/menus-toolbars","01.csharp/12.desktop-ui/34.menus-toolbars",{"title":1565,"path":1566,"stem":1567},"Навігація та керування вікнами. Частина 1: вікна та сторінки","/csharp/desktop-ui/navigation-windows-part1","01.csharp/12.desktop-ui/35.navigation-windows-part1",{"title":1569,"path":1570,"stem":1571},"Навігація та керування вікнами. Частина 2: MVVM-навігація","/csharp/desktop-ui/navigation-windows-part2","01.csharp/12.desktop-ui/35.navigation-windows-part2",{"title":1573,"path":1574,"stem":1575},"Avalonia — Навігація та діалоги","/csharp/desktop-ui/35a.avalonia-navigation-dialogs","01.csharp/12.desktop-ui/35a.avalonia-navigation-dialogs",{"title":1577,"path":1578,"stem":1579},"Діалоги та File Pickers у WPF","/csharp/desktop-ui/dialogs-file-pickers","01.csharp/12.desktop-ui/36.dialogs-file-pickers",{"title":1581,"path":1582,"stem":1583},"UserControl: компонентний підхід у WPF","/csharp/desktop-ui/user-controls","01.csharp/12.desktop-ui/37.user-controls",{"title":1585,"path":1586,"stem":1587},"Custom Controls: Lookless Controls у WPF","/csharp/desktop-ui/custom-controls","01.csharp/12.desktop-ui/38.custom-controls",{"title":1589,"path":1590,"stem":1591},"Avalonia TemplatedControl — Lookless Controls","/csharp/desktop-ui/38a.avalonia-templated-controls","01.csharp/12.desktop-ui/38a.avalonia-templated-controls",{"title":1593,"path":1594,"stem":1595},"Анімації у WPF: Storyboard та Easing Functions","/csharp/desktop-ui/animations-transitions","01.csharp/12.desktop-ui/39.animations-transitions",{"title":1597,"path":1598,"stem":1599},"Анімації в Avalonia","/csharp/desktop-ui/39a.avalonia-animations","01.csharp/12.desktop-ui/39a.avalonia-animations",{"title":1601,"path":1602,"stem":1603},"2D Графіка та Мультимедіа у WPF","/csharp/desktop-ui/media-graphics","01.csharp/12.desktop-ui/40.media-graphics",{"title":1605,"path":1606,"stem":1607},"Dependency Injection у WPF та Avalonia","/csharp/desktop-ui/di-integration","01.csharp/12.desktop-ui/41.di-integration",{"title":1609,"path":1610,"stem":1611},"SQLite та EF Core у десктопних додатках","/csharp/desktop-ui/data-persistence-part1","01.csharp/12.desktop-ui/42.data-persistence-part1",{"title":1613,"path":1614,"stem":1615},"Repository Pattern та Unit of Work","/csharp/desktop-ui/data-persistence-part2","01.csharp/12.desktop-ui/43.data-persistence-part2",{"title":1617,"path":1618,"stem":1619},"Тестування ViewModels","/csharp/desktop-ui/viewmodel-testing","01.csharp/12.desktop-ui/44.viewmodel-testing",{"title":1621,"path":1622,"stem":1623},"Avalonia Headless Testing — тестування UI без вікон","/csharp/desktop-ui/44a.avalonia-headless-testing","01.csharp/12.desktop-ui/44a.avalonia-headless-testing",{"title":1625,"path":1626,"stem":1627},"Кросплатформна розробка з Avalonia","/csharp/desktop-ui/avalonia-cross-platform","01.csharp/12.desktop-ui/45.avalonia-cross-platform",{"title":1629,"path":1630,"stem":1631},"Пакування та розгортання Avalonia додатків","/csharp/desktop-ui/avalonia-packaging-deployment","01.csharp/12.desktop-ui/46.avalonia-packaging-deployment",{"title":1633,"path":1634,"stem":1635},"Розгортання WPF застосунків","/csharp/desktop-ui/wpf-packaging-deployment","01.csharp/12.desktop-ui/47.wpf-packaging-deployment",{"title":1637,"path":1638,"stem":1639},"C# & .NET: The Ultimate Roadmap","/csharp/roadmap","01.csharp/roadmap",{"title":1641,"icon":1642,"path":1643,"stem":1644,"children":1645,"page":59},"C++","i-devicon-cplusplus","/cpp","02.cpp",[1646,1650,1654,1658,1662,1666,1670,1674,1678,1681,1685,1689,1693,1697,1701,1705,1709,1713,1717,1721,1725,1729,1733,1737,1741,1745,1749,1753,1757,1761],{"title":1647,"path":1648,"stem":1649},"Вступ у програмування та алгоритми","/cpp/intro-algorithms","02.cpp/01.intro-algorithms",{"title":1651,"path":1652,"stem":1653},"Code Style: угоди про оформлення коду","/cpp/code-style","02.cpp/02.code-style",{"title":1655,"path":1656,"stem":1657},"Середовище розробки та перший проєкт","/cpp/ide-setup","02.cpp/03.ide-setup",{"title":1659,"path":1660,"stem":1661},"Вивід даних на екран","/cpp/data-output","02.cpp/04.data-output",{"title":1663,"path":1664,"stem":1665},"Типи даних, змінні та константи","/cpp/data-types-variables","02.cpp/05.data-types-variables",{"title":1667,"path":1668,"stem":1669},"Ввід даних з клавіатури","/cpp/data-input","02.cpp/06.data-input",{"title":1671,"path":1672,"stem":1673},"Оператори, перетворення типів та логічні операції","/cpp/operators-type-conversion","02.cpp/07.operators-type-conversion",{"title":1675,"path":1676,"stem":1677},"Цикли","/cpp/loops","02.cpp/08.loops",{"title":32,"path":1679,"stem":1680},"/cpp/arrays","02.cpp/09.arrays",{"title":1682,"path":1683,"stem":1684},"Алгоритми сортування та аналіз складності","/cpp/sorting","02.cpp/10.sorting",{"title":1686,"path":1687,"stem":1688},"Алгоритми пошуку","/cpp/searching","02.cpp/11.searching",{"title":1690,"path":1691,"stem":1692},"Функції: основи","/cpp/functions-basics","02.cpp/12.functions-basics",{"title":1694,"path":1695,"stem":1696},"Функції: прототипи, область видимості та додаткові можливості","/cpp/functions-scope","02.cpp/13.functions-scope",{"title":1698,"path":1699,"stem":1700},"Функції: перевантаження та шаблони","/cpp/functions-overloading-templates","02.cpp/14.functions-overloading-templates",{"title":1702,"path":1703,"stem":1704},"Вказівники: основи","/cpp/pointers-basics","02.cpp/15.pointers-basics",{"title":1706,"path":1707,"stem":1708},"Посилання (References)","/cpp/references","02.cpp/16.references",{"title":1710,"path":1711,"stem":1712},"Вказівники, const і масиви","/cpp/pointers-const-arrays","02.cpp/17.pointers-const-arrays",{"title":1714,"path":1715,"stem":1716},"Адресна арифметика","/cpp/pointer-arithmetic","02.cpp/18.pointer-arithmetic",{"title":1718,"path":1719,"stem":1720},"Динамічна пам'ять","/cpp/dynamic-memory","02.cpp/19.dynamic-memory",{"title":1722,"path":1723,"stem":1724},"Вказівники типу void","/cpp/void-pointers","02.cpp/20.void-pointers",{"title":1726,"path":1727,"stem":1728},"Вказівники на вказівники","/cpp/pointers-to-pointers","02.cpp/21.pointers-to-pointers",{"title":1730,"path":1731,"stem":1732},"Оператор доступу до членів через вказівник (->)","/cpp/member-access-operator","02.cpp/22.member-access-operator",{"title":1734,"path":1735,"stem":1736},"Цикл for-each (Range-based for)","/cpp/foreach-loop","02.cpp/23.foreach-loop",{"title":1738,"path":1739,"stem":1740},"Вказівники на функції","/cpp/function-pointers","02.cpp/24.function-pointers",{"title":1742,"path":1743,"stem":1744},"Лямбда-вирази","/cpp/lambdas","02.cpp/25.lambdas",{"title":1746,"path":1747,"stem":1748},"Лямбда-захоплення","/cpp/lambda-captures","02.cpp/26.lambda-captures",{"title":1750,"path":1751,"stem":1752},"Еліпсис","/cpp/ellipsis","02.cpp/27.ellipsis",{"title":1754,"path":1755,"stem":1756},"Аргументи командного рядка","/cpp/command-line-arguments","02.cpp/28.command-line-arguments",{"title":1758,"path":1759,"stem":1760},"Перерахування (enum)","/cpp/enum","02.cpp/29.enum",{"title":1762,"path":1763,"stem":1764},"План навчання: Курс C++ — Продовження (Статті 29–60+)","/cpp/curriculum-plan","02.cpp/curriculum-plan",{"title":1766,"icon":1767,"path":1768,"stem":1769,"children":1770,"page":59},"JavaScript","i-devicon-javascript","/javascript","03.javascript",[1771,1797,1851,1873,2177,2215],{"title":1772,"icon":1773,"path":1774,"stem":1775,"children":1776,"page":59},"Events","i-lucide-mouse-pointer-click","/javascript/events","03.javascript/01.events",[1777,1781,1785,1789,1793],{"title":1778,"path":1779,"stem":1780},"Вступ до подій браузера","/javascript/events/intro","03.javascript/01.events/01.intro",{"title":1782,"path":1783,"stem":1784},"Бульбашковий механізм (Bubbling) та занурення (Capturing)","/javascript/events/bubbling-capturing","03.javascript/01.events/02.bubbling-capturing",{"title":1786,"path":1787,"stem":1788},"Делегування подій (Event Delegation)","/javascript/events/delegate-events","03.javascript/01.events/03.delegate-events",{"title":1790,"path":1791,"stem":1792},"Типові дії браузера та preventDefault()","/javascript/events/prevent-default","03.javascript/01.events/04.prevent-default",{"title":1794,"path":1795,"stem":1796},"Запуск користувацьких подій (Custom Events)","/javascript/events/custom-events","03.javascript/01.events/05.custom-events",{"title":1798,"icon":1799,"path":1800,"stem":1801,"children":1802,"page":59},"Network","i-lucide-globe","/javascript/network","03.javascript/02.network",[1803,1807,1811,1815,1819,1823,1827,1831,1835,1839,1843,1847],{"title":1804,"path":1805,"stem":1806},"Fetch API - Сучасний підхід до HTTP-запитів","/javascript/network/01-fetch-api","03.javascript/02.network/01-fetch-api",{"title":1808,"path":1809,"stem":1810},"FormData - Робота з формами та файлами","/javascript/network/02-formdata","03.javascript/02.network/02-formdata",{"title":1812,"path":1813,"stem":1814},"Відстеження прогресу завантаження","/javascript/network/03-download-progress","03.javascript/02.network/03-download-progress",{"title":1816,"path":1817,"stem":1818},"Переривання fetch-запитів","/javascript/network/04-abort-requests","03.javascript/02.network/04-abort-requests",{"title":1820,"path":1821,"stem":1822},"CORS - Запити між різними джерелами","/javascript/network/05-cors","03.javascript/02.network/05-cors",{"title":1824,"path":1825,"stem":1826},"Fetch API - Повний довідник опцій","/javascript/network/06-fetch-options","03.javascript/02.network/06-fetch-options",{"title":1828,"path":1829,"stem":1830},"URL Objects - Робота з посиланнями","/javascript/network/07-url-objects","03.javascript/02.network/07-url-objects",{"title":1832,"path":1833,"stem":1834},"XMLHttpRequest - AJAX та низькорівневі запити","/javascript/network/08-xmlhttprequest","03.javascript/02.network/08-xmlhttprequest",{"title":1836,"path":1837,"stem":1838},"Відновлюване завантаження файлів","/javascript/network/09-resumable-upload","03.javascript/02.network/09-resumable-upload",{"title":1840,"path":1841,"stem":1842},"Cookies, document.cookie та світ після \"Cookiepocalypse\"","/javascript/network/10-cookies","03.javascript/02.network/10-cookies",{"title":1844,"path":1845,"stem":1846},"js-cookie: Керування Cookies без Болю","/javascript/network/11-js-cookie","03.javascript/02.network/11-js-cookie",{"title":1848,"path":1849,"stem":1850},"Axios: Потужний HTTP-клієнт для JavaScript","/javascript/network/12-axios","03.javascript/02.network/12-axios",{"title":1852,"icon":1853,"path":1854,"stem":1855,"children":1856,"page":59},"Bom","i-lucide-monitor","/javascript/bom","03.javascript/03.bom",[1857,1861,1865,1869],{"title":1858,"path":1859,"stem":1860},"LocalStorage, SessionStorage та patterns збереження даних","/javascript/bom/01-localstorage","03.javascript/03.bom/01-localstorage",{"title":1862,"path":1863,"stem":1864},"Location Object - Керування адресою сторінки","/javascript/bom/02-location-object","03.javascript/03.bom/02-location-object",{"title":1866,"path":1867,"stem":1868},"History API - Керування історією браузера","/javascript/bom/03-history-api","03.javascript/03.bom/03-history-api",{"title":1870,"path":1871,"stem":1872},"Navigator Object - Ідентифікація та Можливості Пристрою","/javascript/bom/04-navigator-object","03.javascript/03.bom/04-navigator-object",{"title":1874,"icon":1875,"path":1876,"stem":1877,"children":1878},"React","i-devicon-react","/javascript/react","03.javascript/04.react/index",[1879,1880,1884,1888,1892,1896,1959,1994,2146],{"title":1874,"path":1876,"stem":1877},{"title":1881,"path":1882,"stem":1883},"Робота з Формами в React","/javascript/react/react-forms","03.javascript/04.react/01.react-forms",{"title":1885,"path":1886,"stem":1887},"React Hook Form: Професійна Робота з Формами","/javascript/react/react-hook-form","03.javascript/04.react/02.react-hook-form",{"title":1889,"path":1890,"stem":1891},"React Hook Form: Глибоке Розуміння Архітектури та Оптимізації","/javascript/react/react-hook-form-new","03.javascript/04.react/02.react-hook-form-new",{"title":1893,"path":1894,"stem":1895},"Axios та React: Професійна Архітектура Запитів","/javascript/react/data-fetching-axios","03.javascript/04.react/03.data-fetching-axios",{"title":1897,"icon":132,"path":1898,"stem":1899,"children":1900},"Tanstack Query","/javascript/react/tanstack-query","03.javascript/04.react/04.tanstack-query/index",[1901,1903,1907,1911,1915,1919,1923,1927,1931,1935,1939,1943,1947,1951,1955],{"title":1902,"path":1898,"stem":1899},"TanStack Query: Майстерність Керування Станом Сервера",{"title":1904,"path":1905,"stem":1906},"Парадигма Server State: Чому useEffect недостатньо","/javascript/react/tanstack-query/server-state-paradigm","03.javascript/04.react/04.tanstack-query/01.server-state-paradigm",{"title":1908,"path":1909,"stem":1910},"Встановлення та Налаштування: Фундамент","/javascript/react/tanstack-query/installation-and-devtools","03.javascript/04.react/04.tanstack-query/02.installation-and-devtools",{"title":1912,"path":1913,"stem":1914},"Основи Запитів та Магія Ключів","/javascript/react/tanstack-query/query-basics-and-keys","03.javascript/04.react/04.tanstack-query/03.query-basics-and-keys",{"title":1916,"path":1917,"stem":1918},"Синхронізація Даних: Життєвий Цикл Запиту","/javascript/react/tanstack-query/data-synchronization","03.javascript/04.react/04.tanstack-query/04.data-synchronization",{"title":1920,"path":1921,"stem":1922},"Мутації та Інвалідація: Зміна Даних","/javascript/react/tanstack-query/mutations-and-invalidation","03.javascript/04.react/04.tanstack-query/05.mutations-and-invalidation",{"title":1924,"path":1925,"stem":1926},"Оптимістичні Оновлення: Швидше за Світло","/javascript/react/tanstack-query/optimistic-updates","03.javascript/04.react/04.tanstack-query/06.optimistic-updates",{"title":1928,"path":1929,"stem":1930},"Пагінація та Infinite Scroll","/javascript/react/tanstack-query/pagination-and-load-more","03.javascript/04.react/04.tanstack-query/07.pagination-and-load-more",{"title":1932,"path":1933,"stem":1934},"Просунуті Патерни та Оптимізація","/javascript/react/tanstack-query/advanced-patterns","03.javascript/04.react/04.tanstack-query/08.advanced-patterns",{"title":1936,"path":1937,"stem":1938},"Архітектура та Best Practices","/javascript/react/tanstack-query/architecture-and-best-practices","03.javascript/04.react/04.tanstack-query/09.architecture-and-best-practices",{"title":1940,"path":1941,"stem":1942},"Server-Side Rendering (SSR) та Гідратація","/javascript/react/tanstack-query/server-side-rendering","03.javascript/04.react/04.tanstack-query/10.server-side-rendering",{"title":1944,"path":1945,"stem":1946},"Стратегії Тестування","/javascript/react/tanstack-query/testing-strategies","03.javascript/04.react/04.tanstack-query/11.testing-strategies",{"title":1948,"path":1949,"stem":1950},"Аутентифікація та Обробка Помилок","/javascript/react/tanstack-query/authentication-and-errors","03.javascript/04.react/04.tanstack-query/12.authentication-and-errors",{"title":1952,"path":1953,"stem":1954},"React Suspense та Майбутнє","/javascript/react/tanstack-query/react-suspense","03.javascript/04.react/04.tanstack-query/13.react-suspense",{"title":1956,"path":1957,"stem":1958},"Глибоке Занурення в Продуктивність","/javascript/react/tanstack-query/performance-deep-dive","03.javascript/04.react/04.tanstack-query/14.performance-deep-dive",{"title":1960,"icon":1875,"path":1961,"stem":1962,"children":1963},"React Router","/javascript/react/react-router","03.javascript/04.react/05.react-router/index",[1964,1966,1970,1974,1978,1982,1986,1990],{"title":1965,"path":1961,"stem":1962},"React Router: Навігаційна система сучасного вебу",{"title":1967,"path":1968,"stem":1969},"Налаштування та Базовий Роутинг","/javascript/react/react-router/setup-and-basic-routing","03.javascript/04.react/05.react-router/01.setup-and-basic-routing",{"title":1971,"path":1972,"stem":1973},"Динамічна Навігація","/javascript/react/react-router/navigation-and-links","03.javascript/04.react/05.react-router/02.navigation-and-links",{"title":1975,"path":1976,"stem":1977},"Вкладені Маршрути та Макети","/javascript/react/react-router/nested-routes-and-layouts","03.javascript/04.react/05.react-router/03.nested-routes-and-layouts",{"title":1979,"path":1980,"stem":1981},"Динамічні Маршрути та Параметри","/javascript/react/react-router/dynamic-routing","03.javascript/04.react/05.react-router/04.dynamic-routing",{"title":1983,"path":1984,"stem":1985},"Data APIs: Loaders та Actions","/javascript/react/react-router/data-loading","03.javascript/04.react/05.react-router/05.data-loading",{"title":1987,"path":1988,"stem":1989},"Просунуті Патерни","/javascript/react/react-router/advanced-patterns","03.javascript/04.react/05.react-router/06.advanced-patterns",{"title":1991,"path":1992,"stem":1993},"Legacy Routing: Компонентний підхід","/javascript/react/react-router/legacy-routing","03.javascript/04.react/05.react-router/07.legacy-routing",{"title":1995,"icon":132,"path":1996,"stem":1997,"children":1998},"Redux","/javascript/react/redux","03.javascript/04.react/06.redux/index",[1999,2001,2017,2046,2055,2076,2092,2121],{"title":2000,"path":1996,"stem":1997},"Redux: Еволюція управління станом",{"title":14,"icon":15,"path":2002,"stem":2003,"children":2004,"page":59},"/javascript/react/redux/fundamentals","03.javascript/04.react/06.redux/01.fundamentals",[2005,2009,2013],{"title":2006,"path":2007,"stem":2008},"Вступ до State Management","/javascript/react/redux/fundamentals/intro-state-management","03.javascript/04.react/06.redux/01.fundamentals/01.intro-state-management",{"title":2010,"path":2011,"stem":2012},"Філософія Redux та Три Принципи","/javascript/react/redux/fundamentals/redux-philosophy","03.javascript/04.react/06.redux/01.fundamentals/02.redux-philosophy",{"title":2014,"path":2015,"stem":2016},"Чисті функції та Іммутабельність","/javascript/react/redux/fundamentals/pure-functions-immutability","03.javascript/04.react/06.redux/01.fundamentals/03.pure-functions-immutability",{"title":2018,"icon":132,"path":2019,"stem":2020,"children":2021,"page":59},"Classic Redux","/javascript/react/redux/classic-redux","03.javascript/04.react/06.redux/02.classic-redux",[2022,2026,2030,2034,2038,2042],{"title":2023,"path":2024,"stem":2025},"Створення Store (Classic Redux)","/javascript/react/redux/classic-redux/store-setup","03.javascript/04.react/06.redux/02.classic-redux/01.store-setup",{"title":2027,"path":2028,"stem":2029},"Actions, Constants та Action Creators","/javascript/react/redux/classic-redux/actions-constants","03.javascript/04.react/06.redux/02.classic-redux/02.actions-constants",{"title":2031,"path":2032,"stem":2033},"Логіка Reducers","/javascript/react/redux/classic-redux/reducers","03.javascript/04.react/06.redux/02.classic-redux/03.reducers",{"title":2035,"path":2036,"stem":2037},"Комбінування Reducers (Root Reducer)","/javascript/react/redux/classic-redux/data-flow","03.javascript/04.react/06.redux/02.classic-redux/04.data-flow",{"title":2039,"path":2040,"stem":2041},"Підключення до React (React-Redux)","/javascript/react/redux/classic-redux/react-redux-connection","03.javascript/04.react/06.redux/02.classic-redux/05.react-redux-connection",{"title":2043,"path":2044,"stem":2045},"Middleware та Асинхронність (Redux Thunk)","/javascript/react/redux/classic-redux/middleware-thunk","03.javascript/04.react/06.redux/02.classic-redux/06.middleware-thunk",{"title":2047,"icon":132,"path":2048,"stem":2049,"children":2050,"page":59},"Transition To Rtk","/javascript/react/redux/transition-to-rtk","03.javascript/04.react/06.redux/03.transition-to-rtk",[2051],{"title":2052,"path":2053,"stem":2054},"Проблеми класичного Redux","/javascript/react/redux/transition-to-rtk/problems-with-classic","03.javascript/04.react/06.redux/03.transition-to-rtk/01.problems-with-classic",{"title":2056,"icon":132,"path":2057,"stem":2058,"children":2059,"page":59},"Redux Toolkit","/javascript/react/redux/redux-toolkit","03.javascript/04.react/06.redux/04.redux-toolkit",[2060,2064,2068,2072],{"title":2061,"path":2062,"stem":2063},"Налаштування Store з configureStore","/javascript/react/redux/redux-toolkit/configure-store","03.javascript/04.react/06.redux/04.redux-toolkit/01.configure-store",{"title":2065,"path":2066,"stem":2067},"createSlice: Революція в Redux","/javascript/react/redux/redux-toolkit/create-slice","03.javascript/04.react/06.redux/04.redux-toolkit/02.create-slice",{"title":2069,"path":2070,"stem":2071},"Асинхронність з createAsyncThunk","/javascript/react/redux/redux-toolkit/async-thunks","03.javascript/04.react/06.redux/04.redux-toolkit/03.async-thunks",{"title":2073,"path":2074,"stem":2075},"04. Entity Adapter: Керування нормалізованим станом","/javascript/react/redux/redux-toolkit/entity-adapter","03.javascript/04.react/06.redux/04.redux-toolkit/04.entity-adapter",{"title":2077,"icon":92,"path":2078,"stem":2079,"children":2080,"page":59},"Advanced","/javascript/react/redux/advanced","03.javascript/04.react/06.redux/05.advanced",[2081,2085,2089],{"title":2082,"path":2083,"stem":2084},"Мемоізація та Селектори: Повний Гайд по Reselect","/javascript/react/redux/advanced/selectors-reselect","03.javascript/04.react/06.redux/05.advanced/01.selectors-reselect",{"title":2086,"path":2087,"stem":2088},"RTK Query: Архітектура Серверного Кешу","/javascript/react/redux/advanced/rtk-query-intro","03.javascript/04.react/06.redux/05.advanced/02.rtk-query-intro",{"title":1936,"path":2090,"stem":2091},"/javascript/react/redux/advanced/architecture-best-practices","03.javascript/04.react/06.redux/05.advanced/03.architecture-best-practices",{"title":2093,"icon":132,"path":2094,"stem":2095,"children":2096,"page":59},"Project Kanban","/javascript/react/redux/project-kanban","03.javascript/04.react/06.redux/06.project-kanban",[2097,2101,2105,2109,2113,2117],{"title":2098,"path":2099,"stem":2100},"Проєкт: Kanban Board (Trello Clone)","/javascript/react/redux/project-kanban/project-overview","03.javascript/04.react/06.redux/06.project-kanban/01.project-overview",{"title":2102,"path":2103,"stem":2104},"Налаштування та Типізація","/javascript/react/redux/project-kanban/setup-and-types","03.javascript/04.react/06.redux/06.project-kanban/02.setup-and-types",{"title":2106,"path":2107,"stem":2108},"Board Slice: Серце Дошки","/javascript/react/redux/project-kanban/board-slice","03.javascript/04.react/06.redux/06.project-kanban/03.board-slice",{"title":2110,"path":2111,"stem":2112},"Логіка Drag & Drop","/javascript/react/redux/project-kanban/drag-and-drop-logic","03.javascript/04.react/06.redux/06.project-kanban/04.drag-and-drop-logic",{"title":2114,"path":2115,"stem":2116},"Інтеграція з RTK Query","/javascript/react/redux/project-kanban/rtk-query-integration","03.javascript/04.react/06.redux/06.project-kanban/05.rtk-query-integration",{"title":2118,"path":2119,"stem":2120},"Optimistic Updates","/javascript/react/redux/project-kanban/optimistic-updates","03.javascript/04.react/06.redux/06.project-kanban/06.optimistic-updates",{"title":2122,"icon":132,"path":2123,"stem":2124,"children":2125,"page":59},"Testing","/javascript/react/redux/testing","03.javascript/04.react/06.redux/07.testing",[2126,2130,2134,2138,2142],{"title":2127,"path":2128,"stem":2129},"Тестування Redux","/javascript/react/redux/testing/intro-testing","03.javascript/04.react/06.redux/07.testing/01.intro-testing",{"title":2131,"path":2132,"stem":2133},"Тестування Reducers","/javascript/react/redux/testing/testing-reducers","03.javascript/04.react/06.redux/07.testing/02.testing-reducers",{"title":2135,"path":2136,"stem":2137},"Тестування Селекторів","/javascript/react/redux/testing/testing-selectors","03.javascript/04.react/06.redux/07.testing/03.testing-selectors",{"title":2139,"path":2140,"stem":2141},"Тестування Компонентів (Integration)","/javascript/react/redux/testing/testing-components","03.javascript/04.react/06.redux/07.testing/04.testing-components",{"title":2143,"path":2144,"stem":2145},"Тестування Async Thunks","/javascript/react/redux/testing/testing-thunks","03.javascript/04.react/06.redux/07.testing/05.testing-thunks",{"title":2147,"icon":132,"path":2148,"stem":2149,"children":2150},"Ui Libraries","/javascript/react/ui-libraries","03.javascript/04.react/07.ui-libraries/index",[2151,2153,2157,2161,2165,2169,2173],{"title":2152,"path":2148,"stem":2149},"UI Бібліотеки в React",{"title":2154,"path":2155,"stem":2156},"Вступ до UI Бібліотек: Навіщо Винаходити Велосипед Двічі?","/javascript/react/ui-libraries/introduction-to-ui-libraries","03.javascript/04.react/07.ui-libraries/01.introduction-to-ui-libraries",{"title":2158,"path":2159,"stem":2160},"Філософія shadcn/ui: \"Not a Component Library\"","/javascript/react/ui-libraries/shadcn-philosophy","03.javascript/04.react/07.ui-libraries/02.shadcn-philosophy",{"title":2162,"path":2163,"stem":2164},"Установка та Налаштування shadcn/ui","/javascript/react/ui-libraries/shadcn-installation","03.javascript/04.react/07.ui-libraries/03.shadcn-installation",{"title":2166,"path":2167,"stem":2168},"Базові Компоненти shadcn/ui: Фундамент Інтерфейсу","/javascript/react/ui-libraries/shadcn-components-basics","03.javascript/04.react/07.ui-libraries/04.shadcn-components-basics",{"title":2170,"path":2171,"stem":2172},"Компоненти Форм: Побудова Інтерактивних Form","/javascript/react/ui-libraries/shadcn-components-forms","03.javascript/04.react/07.ui-libraries/05.shadcn-components-forms",{"title":2174,"path":2175,"stem":2176},"Складні Компоненти: Dialog, Dropdown, Table та Command","/javascript/react/ui-libraries/shadcn-components-advanced","03.javascript/04.react/07.ui-libraries/06.shadcn-components-advanced",{"title":2178,"icon":2179,"path":2180,"stem":2181,"children":2182,"page":59},"TypeScript","i-devicon-typescript","/javascript/typescript","03.javascript/05.typescript",[2183,2187,2191,2195,2199,2203,2207,2211],{"title":2184,"path":2185,"stem":2186},"TypeScript: Броня для вашого коду","/javascript/typescript/intro-and-basic-types","03.javascript/05.typescript/01.intro-and-basic-types",{"title":2188,"path":2189,"stem":2190},"Майстерність Моделювання Даних: Інтерфейси та Просунуті Типи","/javascript/typescript/interfaces-and-advanced-types","03.javascript/05.typescript/02.interfaces-and-advanced-types",{"title":2192,"path":2193,"stem":2194},"Алхімія Типів: Generics та Utility Types","/javascript/typescript/generics-and-utilities","03.javascript/05.typescript/03.generics-and-utilities",{"title":2196,"path":2197,"stem":2198},"Архітектура та Шаблони: Класи в TypeScript","/javascript/typescript/classes-and-oop","03.javascript/05.typescript/04.classes-and-oop",{"title":2200,"path":2201,"stem":2202},"Продакшн та Екосистема: Advanced Config & Workflow","/javascript/typescript/advanced-patterns-and-config","03.javascript/05.typescript/05.advanced-patterns-and-config",{"title":2204,"path":2205,"stem":2206},"TypeScript у світі React","/javascript/typescript/react-basics","03.javascript/05.typescript/06.react-basics",{"title":2208,"path":2209,"stem":2210},"React + TypeScript: Продвинуті патерни","/javascript/typescript/react-advanced","03.javascript/05.typescript/07.react-advanced",{"title":2212,"path":2213,"stem":2214},"React + TypeScript: Екосистема та бібліотеки","/javascript/typescript/react-ecosystem","03.javascript/05.typescript/08.react-ecosystem",{"title":2216,"path":2217,"stem":2218},"Atomic Design","/javascript/atomic-design","03.javascript/2.atomic-design",{"title":2220,"icon":2221,"path":2222,"stem":2223,"children":2224,"page":59},"Java","i-devicon-java","/java","04.java",[2225,2228,2231,2235,2239,2243,2247],{"title":162,"path":2226,"stem":2227},"/java/data-mapper-part1","04.java/01.data-mapper-part1",{"title":166,"path":2229,"stem":2230},"/java/data-mapper-part2","04.java/02.data-mapper-part2",{"title":2232,"path":2233,"stem":2234},"Service Layer: Організація бізнес-логіки","/java/service-layer","04.java/03.service-layer",{"title":2236,"path":2237,"stem":2238},"Rich Domain Model та State Pattern","/java/rich-domain-model","04.java/04.rich-domain-model",{"title":2240,"path":2241,"stem":2242},"Патерни для складної бізнес-логіки","/java/business-logic-patterns","04.java/05.business-logic-patterns",{"title":2244,"path":2245,"stem":2246},"Обробка помилок та валідація","/java/error-handling-validation","04.java/06.error-handling-validation",{"title":2248,"path":2249,"stem":2250,"children":2251,"page":59},"Проектування баз даних","/java/pr2","04.java/pr2",[2252,2256,2260,2264,2268,2272,2276,2280,2284,2288,2292,2296,2300,2304,2308,2312,2316,2320,2324,2328,2332,2336,2340,2344,2348],{"title":2253,"path":2254,"stem":2255},"Концептуальне моделювання: Мистецтво розуміння предметної області","/java/pr2/conceptual-modeling","04.java/pr2/01.conceptual-modeling",{"title":2257,"path":2258,"stem":2259},"Логічне моделювання: Від бізнес-ідей до структур даних","/java/pr2/logical-modeling","04.java/pr2/02.logical-modeling",{"title":2261,"path":2262,"stem":2263},"Нормалізація: Гігієна даних та боротьба з аномаліями","/java/pr2/normalization","04.java/pr2/03.normalization",{"title":2265,"path":2266,"stem":2267},"Фізична схема: Від абстракції до DDL","/java/pr2/physical-schema","04.java/pr2/04.physical-schema",{"title":2269,"path":2270,"stem":2271},"Архітектурна класифікація таблиць","/java/pr2/table-classification","04.java/pr2/05.table-classification",{"title":2273,"path":2274,"stem":2275},"Database Migrations: Версіонування схеми з Flyway","/java/pr2/database-migrations","04.java/pr2/06.database-migrations",{"title":2277,"path":2278,"stem":2279},"А що, якби це була не реляційна БД?","/java/pr2/beyond-relational","04.java/pr2/07.beyond-relational",{"title":2281,"path":2282,"stem":2283},"Object-Relational Impedance Mismatch: Два світи, що не хочуть дружити","/java/pr2/impedance-mismatch","04.java/pr2/09.impedance-mismatch",{"title":2285,"path":2286,"stem":2287},"JDBC: Перший контакт із базою даних","/java/pr2/jdbc-fundamentals","04.java/pr2/10.jdbc-fundamentals",{"title":2289,"path":2290,"stem":2291},"Якість коду: Spotless, SpotBugs та SonarQube","/java/pr2/10a.code-quality","04.java/pr2/10a.code-quality",{"title":2293,"path":2294,"stem":2295},"Connection Pool: Патерн Object Pool для JDBC-з'єднань","/java/pr2/connection-pool","04.java/pr2/11.connection-pool",{"title":2297,"path":2298,"stem":2299},"Row Data Gateway: Об'єкт як обгортка рядка таблиці","/java/pr2/row-data-gateway","04.java/pr2/12.row-data-gateway",{"title":2301,"path":2302,"stem":2303},"Table Data Gateway: Фасад таблиці як архітектурний відступ","/java/pr2/table-data-gateway","04.java/pr2/13.table-data-gateway",{"title":2305,"path":2306,"stem":2307},"Repository + Data Mapper: Правильна шарова архітектура з JDBC","/java/pr2/repository-data-mapper","04.java/pr2/14.repository-data-mapper",{"title":2309,"path":2310,"stem":2311},"Identity Map: Кешування сутностей у рамках сесії","/java/pr2/identity-map","04.java/pr2/15.identity-map",{"title":2313,"path":2314,"stem":2315},"Unit of Work: Відстеження змін і координація JDBC-транзакцій","/java/pr2/unit-of-work","04.java/pr2/16.unit-of-work",{"title":2317,"path":2318,"stem":2319},"Strategy: Замінювані SQL-стратегії для підтримки різних СУБД","/java/pr2/strategy-sql","04.java/pr2/17.strategy-sql",{"title":2321,"path":2322,"stem":2323},"Proxy: Lazy Loading для One-To-Many колекцій","/java/pr2/proxy-lazy-loading","04.java/pr2/18.proxy-lazy-loading",{"title":2325,"path":2326,"stem":2327},"Generic Repository через Java Reflection: анотації та динамічний SQL","/java/pr2/generic-repository-reflection","04.java/pr2/19.generic-repository-reflection",{"title":2329,"path":2330,"stem":2331},"Specification Pattern: Композиція бізнес-правил для складних запитів","/java/pr2/specification-pattern","04.java/pr2/20.specification-pattern",{"title":2333,"path":2334,"stem":2335},"Розширені можливості Specification Pattern: підзапити, агрегації та гібридний підхід","/java/pr2/20a.advanced-specifications","04.java/pr2/20a.advanced-specifications",{"title":2337,"path":2338,"stem":2339},"Асинхронність у JDBC: Від блокуючих викликів до CompletableFuture","/java/pr2/asynchronous-jdbc","04.java/pr2/21.asynchronous-jdbc",{"title":2341,"path":2342,"stem":2343},"Інтеграційне тестування JDBC-репозиторіїв: Embedded H2 та патерн AAA","/java/pr2/integration-testing-h2","04.java/pr2/22.integration-testing-h2",{"title":2345,"path":2346,"stem":2347},"Testcontainers: Тестування з реальною PostgreSQL у Docker-контейнерах","/java/pr2/integration-testing-testcontainers","04.java/pr2/23.integration-testing-testcontainers",{"title":2349,"path":2350,"stem":2351},"Модуль \"Проектування реляційних баз даних\" для 04.java/pr2","/java/pr2/implementation_plan","04.java/pr2/implementation_plan",{"title":2353,"icon":2354,"path":2355,"stem":2356,"children":2357,"page":59},"Бази даних","i-lucide-database","/databases","06.databases",[2358,2388,2411,2448,2477,2495,2529,2541,2550],{"title":2359,"icon":2360,"path":2361,"stem":2362,"children":2363,"page":59},"Intro","i-lucide-play","/databases/intro","06.databases/01.intro",[2364,2368,2372,2376,2380,2384],{"title":2365,"path":2366,"stem":2367},"Введення в теорію баз даних","/databases/intro/introduction-to-databases","06.databases/01.intro/01.introduction-to-databases",{"title":2369,"path":2370,"stem":2371},"Реляційна модель даних","/databases/intro/relational-model-theory","06.databases/01.intro/02.relational-model-theory",{"title":2373,"path":2374,"stem":2375},"ER-моделювання","/databases/intro/er-modeling","06.databases/01.intro/03.er-modeling",{"title":2377,"path":2378,"stem":2379},"Логічне проектування БД","/databases/intro/logical-schema","06.databases/01.intro/04.logical-schema",{"title":2381,"path":2382,"stem":2383},"Класифікація таблиць","/databases/intro/table-classification","06.databases/01.intro/05.table-classification",{"title":2385,"path":2386,"stem":2387},"PlantUML для баз даних","/databases/intro/plantuml-diagrams","06.databases/01.intro/06.plantuml-diagrams",{"title":2389,"icon":2354,"path":2390,"stem":2391,"children":2392,"page":59},"MS SQL Server Start","/databases/ms-sql-server-start","06.databases/02.ms-sql-server-start",[2393,2397,2403,2407],{"title":2394,"path":2395,"stem":2396},"Типи даних у MS SQL Server","/databases/ms-sql-server-start/data-types","06.databases/02.ms-sql-server-start/01.data-types",{"title":2398,"path":2399,"stem":2400,"children":2401},"Індекси у MS SQL Server","/databases/ms-sql-server-start/sql-indexes","06.databases/02.ms-sql-server-start/02.sql-indexes",[2402],{"title":2398,"path":2399,"stem":2400},{"title":2404,"path":2405,"stem":2406},"Системні бази даних MS SQL Server","/databases/ms-sql-server-start/system-databases","06.databases/02.ms-sql-server-start/03.system-databases",{"title":2408,"path":2409,"stem":2410},"Огляд мови SQL та запитів","/databases/ms-sql-server-start/sql-queries-overview","06.databases/02.ms-sql-server-start/04.sql-queries-overview",{"title":2412,"icon":2354,"path":2413,"stem":2414,"children":2415,"page":59},"SQL","/databases/sql","06.databases/03.sql",[2416,2420,2424,2428,2432,2436,2440,2444],{"title":2417,"path":2418,"stem":2419},"Налаштування демонстраційної бази даних","/databases/sql/sample-database-setup","06.databases/03.sql/00.sample-database-setup",{"title":2421,"path":2422,"stem":2423},"DDL - Створення таблиць (CREATE TABLE)","/databases/sql/ddl-create-table","06.databases/03.sql/01.ddl-create-table",{"title":2425,"path":2426,"stem":2427},"DDL - Зміна та видалення таблиць (ALTER, DROP)","/databases/sql/ddl-alter-drop-table","06.databases/03.sql/02.ddl-alter-drop-table",{"title":2429,"path":2430,"stem":2431},"SELECT запити - Основи","/databases/sql/select-queries-fundamentals","06.databases/03.sql/03.select-queries-fundamentals",{"title":2433,"path":2434,"stem":2435},"SELECT запити - Розширені можливості","/databases/sql/select-queries-advanced","06.databases/03.sql/04.select-queries-advanced",{"title":2437,"path":2438,"stem":2439},"INSERT запити - Додавання даних","/databases/sql/insert-queries","06.databases/03.sql/05.insert-queries",{"title":2441,"path":2442,"stem":2443},"UPDATE та DELETE запити","/databases/sql/update-delete-queries","06.databases/03.sql/06.update-delete-queries",{"title":2445,"path":2446,"stem":2447},"Транзакції в SQL","/databases/sql/transactions","06.databases/03.sql/07.transactions",{"title":2449,"icon":2354,"path":2450,"stem":2451,"children":2452,"page":59},"Multi Table Databases","/databases/multi-table-databases","06.databases/04.multi-table-databases",[2453,2457,2461,2465,2469,2473],{"title":2454,"path":2455,"stem":2456},"Зв'язки та нормалізація БД","/databases/multi-table-databases/relationships-and-normalization","06.databases/04.multi-table-databases/00.relationships-and-normalization",{"title":2458,"path":2459,"stem":2460},"INNER JOIN - З'єднання таблиць","/databases/multi-table-databases/inner-join","06.databases/04.multi-table-databases/01.inner-join",{"title":2462,"path":2463,"stem":2464},"OUTER JOINs - LEFT, RIGHT, FULL","/databases/multi-table-databases/outer-joins","06.databases/04.multi-table-databases/02.outer-joins",{"title":2466,"path":2467,"stem":2468},"CROSS та SELF JOINs","/databases/multi-table-databases/cross-self-joins","06.databases/04.multi-table-databases/03.cross-self-joins",{"title":2470,"path":2471,"stem":2472},"Підзапити (Subqueries)","/databases/multi-table-databases/subqueries","06.databases/04.multi-table-databases/04.subqueries",{"title":2474,"path":2475,"stem":2476},"Агрегації з JOIN","/databases/multi-table-databases/aggregations-with-joins","06.databases/04.multi-table-databases/05.aggregations-with-joins",{"title":2478,"icon":2479,"path":2480,"stem":2481,"children":2482,"page":59},"Aggregate Functions","i-lucide-calculator","/databases/aggregate-functions","06.databases/05.aggregate-functions",[2483,2487,2491],{"title":2484,"path":2485,"stem":2486},"Функції агрегування в MS SQL Server","/databases/aggregate-functions/introduction-aggregate-functions","06.databases/05.aggregate-functions/01.introduction-aggregate-functions",{"title":2488,"path":2489,"stem":2490},"Групування даних в MS SQL Server","/databases/aggregate-functions/grouping-data","06.databases/05.aggregate-functions/02.grouping-data",{"title":2492,"path":2493,"stem":2494},"Підзапити з агрегатними функціями","/databases/aggregate-functions/subqueries-aggregates","06.databases/05.aggregate-functions/03.subqueries-aggregates",{"title":2496,"icon":2497,"path":2498,"stem":2499,"children":2500,"page":59},"Тригери та зберігаємі процедури","i-lucide-database-zap","/databases/triggers-stored-procedures","06.databases/07.triggers-stored-procedures",[2501,2505,2509,2513,2517,2521,2525],{"title":2502,"path":2503,"stem":2504},"DML-тригери","/databases/triggers-stored-procedures/dml-triggers","06.databases/07.triggers-stored-procedures/01.dml-triggers",{"title":2506,"path":2507,"stem":2508},"DDL-тригери","/databases/triggers-stored-procedures/ddl-triggers","06.databases/07.triggers-stored-procedures/02.ddl-triggers",{"title":2510,"path":2511,"stem":2512},"Transact-SQL розширення","/databases/triggers-stored-procedures/transact-sql-extensions","06.databases/07.triggers-stored-procedures/03.transact-sql-extensions",{"title":2514,"path":2515,"stem":2516},"Транзакції","/databases/triggers-stored-procedures/transactions","06.databases/07.triggers-stored-procedures/04.transactions",{"title":2518,"path":2519,"stem":2520},"Зберігаємі процедури","/databases/triggers-stored-procedures/stored-procedures","06.databases/07.triggers-stored-procedures/05.stored-procedures",{"title":2522,"path":2523,"stem":2524},"Користувацькі функції","/databases/triggers-stored-procedures/user-defined-functions","06.databases/07.triggers-stored-procedures/06.user-defined-functions",{"title":2526,"path":2527,"stem":2528},"Безпека баз даних","/databases/triggers-stored-procedures/security","06.databases/07.triggers-stored-procedures/08.security",{"title":2526,"icon":793,"path":2530,"stem":2531,"children":2532,"page":59},"/databases/security","06.databases/08.security",[2533,2537],{"title":2534,"path":2535,"stem":2536},"Вступ до безпеки баз даних","/databases/security/introduction","06.databases/08.security/01.introduction",{"title":2538,"path":2539,"stem":2540},"Системні представлення та метадані","/databases/security/system-views","06.databases/08.security/02.system-views",{"title":2542,"icon":2543,"path":2544,"stem":2545,"children":2546,"page":59},"Резервне копіювання та відновлення","i-lucide-database-backup","/databases/backup-recovery","06.databases/09.backup-recovery",[2547],{"title":2542,"path":2548,"stem":2549},"/databases/backup-recovery/backup-restore","06.databases/09.backup-recovery/01.backup-restore",{"title":2551,"icon":2552,"path":2553,"stem":2554,"children":2555,"page":59},"Повнотекстовий пошук","i-lucide-search","/databases/full-text-search","06.databases/10.full-text-search",[2556],{"title":2551,"path":2557,"stem":2558},"/databases/full-text-search/full-text-search","06.databases/10.full-text-search/01.full-text-search",{"title":2560,"icon":2561,"path":2562,"stem":2563,"children":2564,"page":59},"Tools","i-lucide-wrench","/tools","07.tools",[2565],{"title":2566,"icon":2567,"path":2568,"stem":2569,"children":2570},"Docker","i-simple-icons-docker","/tools/docker","07.tools/01.docker/index",[2571,2573,2577,2581,2585,2589,2593,2597,2601,2605,2609,2613,2617,2621,2625,2629,2633,2637],{"title":2572,"path":2568,"stem":2569},"Docker: від нуля до production",{"title":2574,"path":2575,"stem":2576},"Контейнеризація — від проблеми до рішення","/tools/docker/containerization-concept","07.tools/01.docker/01.containerization-concept",{"title":2578,"path":2579,"stem":2580},"Docker — що це і навіщо?","/tools/docker/docker-what-and-why","07.tools/01.docker/02.docker-what-and-why",{"title":2582,"path":2583,"stem":2584},"Архітектура Docker Engine","/tools/docker/docker-architecture","07.tools/01.docker/03.docker-architecture",{"title":2586,"path":2587,"stem":2588},"Встановлення Docker","/tools/docker/installation","07.tools/01.docker/04.installation",{"title":2590,"path":2591,"stem":2592},"Перший контейнер — docker run","/tools/docker/first-container","07.tools/01.docker/05.first-container",{"title":2594,"path":2595,"stem":2596},"Життєвий цикл контейнера","/tools/docker/container-lifecycle","07.tools/01.docker/06.container-lifecycle",{"title":2598,"path":2599,"stem":2600},"Docker Images — фундаментальні концепції","/tools/docker/docker-images-fundamentals","07.tools/01.docker/07.docker-images-fundamentals",{"title":2602,"path":2603,"stem":2604},"Dockerfile — основи","/tools/docker/dockerfile-basics","07.tools/01.docker/08.dockerfile-basics",{"title":2606,"path":2607,"stem":2608},"Dockerfile — просунуті техніки","/tools/docker/dockerfile-advanced","07.tools/01.docker/09.dockerfile-advanced",{"title":2610,"path":2611,"stem":2612},"Build Context та кешування шарів","/tools/docker/build-context-and-cache","07.tools/01.docker/10.build-context-and-cache",{"title":2614,"path":2615,"stem":2616},"Реєстри Docker-образів","/tools/docker/image-registries","07.tools/01.docker/11.image-registries",{"title":2618,"path":2619,"stem":2620},"Контейнеризація .NET додатків","/tools/docker/dotnet-containerization","07.tools/01.docker/12.dotnet-containerization",{"title":2622,"path":2623,"stem":2624},"Томи та збереження даних","/tools/docker/volumes-and-data","07.tools/01.docker/13.volumes-and-data",{"title":2626,"path":2627,"stem":2628},"Основи мережі в Docker","/tools/docker/networking-basics","07.tools/01.docker/14.networking-basics",{"title":2630,"path":2631,"stem":2632},"Змінні оточення та конфігурація","/tools/docker/environment-and-configuration","07.tools/01.docker/15.environment-and-configuration",{"title":2634,"path":2635,"stem":2636},"Docker Compose — оркестрація контейнерів","/tools/docker/docker-compose-basics","07.tools/01.docker/16.docker-compose-basics",{"title":2638,"path":2639,"stem":2640},"Docker Compose — Multi-Service застосунки","/tools/docker/compose-multi-service","07.tools/01.docker/17.compose-multi-service",{"title":2642,"icon":2643,"path":2644,"stem":2645,"children":2646,"page":59},"Software Engineering","i-lucide-code-2","/software-engineering","09.software-engineering",[2647,2651,2655,2659,2663,2667,2671,2675,2679,2683,2687],{"title":2648,"path":2649,"stem":2650},"1. Аналіз предметної області. Експертні знання та складність","/software-engineering/intro.subdomains","09.software-engineering/01.intro.subdomains",{"title":2652,"path":2653,"stem":2654},"2. Обмежені контексти. Інтеграція обмежених контекстів","/software-engineering/integrating-limited-contexts","09.software-engineering/02.integrating-limited-contexts",{"title":2656,"path":2657,"stem":2658},"3. Реалізація простої бізнес-логіки","/software-engineering/simple","09.software-engineering/03.simple",{"title":2660,"path":2661,"stem":2662},"4. Опрацювання складної бізнес-логіки","/software-engineering/complex-business-logic","09.software-engineering/04.complex-business-logic",{"title":2664,"path":2665,"stem":2666},"5. Моделювання фактора часу. Подієво-орієнтована архітектура.","/software-engineering/modelling-the-time-factor","09.software-engineering/05.modelling-the-time-factor",{"title":2668,"path":2669,"stem":2670},"6. Архітектурні патерни","/software-engineering/architectural-patterns","09.software-engineering/06.architectural-patterns",{"title":2672,"path":2673,"stem":2674},"Паттерни взаємодії","/software-engineering/patterns-of-interaction","09.software-engineering/07.patterns-of-interaction",{"title":2676,"path":2677,"stem":2678},"Евристика проєктування","/software-engineering/design-heuristics","09.software-engineering/08.design-heuristics",{"title":2680,"path":2681,"stem":2682},"Еволюція проєктних рішень","/software-engineering/evolution-of-design-solutions","09.software-engineering/09.evolution-of-design-solutions",{"title":2684,"path":2685,"stem":2686},"EventStorming","/software-engineering/eventstorming","09.software-engineering/10.eventstorming",{"title":2688,"path":2689,"stem":2690},"DDD на практиці","/software-engineering/ddd-in-practice","09.software-engineering/11.ddd-in-practice",{"title":2692,"icon":943,"path":2693,"stem":2694,"children":2695,"page":59},"DDD","/ddd","10.ddd",[2696,2700,2704,2708,2712,2716,2720,2724,2728,2732,2736,2740,2744],{"title":2697,"path":2698,"stem":2699},"Аналіз предметної області","/ddd/domain-analysis","10.ddd/01.domain-analysis",{"title":2701,"path":2702,"stem":2703},"Експертні знання про предметну область","/ddd/domain-expert-knowledge","10.ddd/02.domain-expert-knowledge",{"title":2705,"path":2706,"stem":2707},"Як осмислити складність предметної області","/ddd/managing-domain-complexity","10.ddd/03.managing-domain-complexity",{"title":2709,"path":2710,"stem":2711},"Інтеграція обмежених контекстів","/ddd/bounded-context-integration","10.ddd/04.bounded-context-integration",{"title":2713,"path":2714,"stem":2715},"Реалізація простої бізнес-логіки","/ddd/simple-business-logic","10.ddd/05.simple-business-logic",{"title":2717,"path":2718,"stem":2719},"Обробка складної бізнес-логіки","/ddd/complex-business-logic","10.ddd/06.complex-business-logic",{"title":2721,"path":2722,"stem":2723},"Моделювання фактора часу","/ddd/time-modeling","10.ddd/07.time-modeling",{"title":2725,"path":2726,"stem":2727},"Глава 8. Архітектурні Патерни","/ddd/architectural-patterns","10.ddd/08.architectural-patterns",{"title":2729,"path":2730,"stem":2731},"Глава 9. Патерни Взаємодії","/ddd/interaction-patterns","10.ddd/09.interaction-patterns",{"title":2733,"path":2734,"stem":2735},"Глава 10. Проектні Евристики","/ddd/design-heuristics","10.ddd/10.design-heuristics",{"title":2737,"path":2738,"stem":2739},"Глава 11. Еволюція Проектних Рішень","/ddd/evolution-of-design-decisions","10.ddd/11.evolution-of-design-decisions",{"title":2741,"path":2742,"stem":2743},"Глава 12. EventStorming","/ddd/event-storming","10.ddd/12.event-storming",{"title":2745,"path":2746,"stem":2747},"Глава 13. DDD на Практиці","/ddd/ddd-in-practice","10.ddd/13.ddd-in-practice",{"title":2749,"icon":2750,"path":2751,"stem":2752,"children":2753,"page":59},"Media Streaming","i-lucide-video","/media-streaming","11.media-streaming",[2754,2758,2762,2766,2770,2774,2778],{"title":2755,"path":2756,"stem":2757},"01. Магія Стрімінгу: Що відбувається, коли ви натискаєте \"Play\"","/media-streaming/introduction","11.media-streaming/01.introduction",{"title":2759,"path":2760,"stem":2761},"02. Анатомія Медіа: Кодеки, Контейнери та Стиснення","/media-streaming/audio-video-anatomy","11.media-streaming/02.audio-video-anatomy",{"title":2763,"path":2764,"stem":2765},"03. The Gym: FFmpeg Deep Dive","/media-streaming/ffmpeg-gym","11.media-streaming/03.ffmpeg-gym",{"title":2767,"path":2768,"stem":2769},"04. HLS Protocol: HTTP Live Streaming у Деталях","/media-streaming/hls-protocol","11.media-streaming/04.hls-protocol",{"title":2771,"path":2772,"stem":2773},"05. DASH Protocol: Відкритий Стандарт","/media-streaming/dash-protocol","11.media-streaming/05.dash-protocol",{"title":2775,"path":2776,"stem":2777},"06. Масштабування: CDN та Adaptive Bitrate","/media-streaming/cdn-and-adaptive-bitrate","11.media-streaming/06.cdn-and-adaptive-bitrate",{"title":2779,"path":2780,"stem":2781},"07. Війна із Затримкою (Latency)","/media-streaming/realtime-latency","11.media-streaming/07.realtime-latency",{"title":2783,"icon":2784,"path":2785,"stem":2786,"children":2787,"page":59},"HTML & CSS","i-devicon-html5","/html-css","12.html-css",[2788,2792,2796,2800,2804,2808,2812,2816,2820,2824,2828,2832,2836,2840,2844,2848,2852,2856,2860,2864,2868,2872,2876,2880,2884,2888,2892,2896,2900,2904],{"title":2789,"path":2790,"stem":2791},"Вступ до HTML. Структура документа","/html-css/intro-html-structure","12.html-css/01.intro-html-structure",{"title":2793,"path":2794,"stem":2795},"Форматування тексту в HTML","/html-css/html-text-formatting","12.html-css/02.html-text-formatting",{"title":2797,"path":2798,"stem":2799},"Посилання та зображення в HTML","/html-css/html-links-images","12.html-css/03.html-links-images",{"title":2801,"path":2802,"stem":2803},"Списки та таблиці в HTML","/html-css/html-lists-tables","12.html-css/04.html-lists-tables",{"title":2805,"path":2806,"stem":2807},"Форми в HTML","/html-css/html-forms","12.html-css/05.html-forms",{"title":2809,"path":2810,"stem":2811},"Семантичні елементи HTML5","/html-css/html-semantic-elements","12.html-css/06.html-semantic-elements",{"title":2813,"path":2814,"stem":2815},"Мультимедіа та розширені елементи HTML","/html-css/html-multimedia-advanced","12.html-css/07.html-multimedia-advanced",{"title":2817,"path":2818,"stem":2819},"Мікророзмітка та SEO в HTML","/html-css/html-microdata-seo","12.html-css/08.html-microdata-seo",{"title":2821,"path":2822,"stem":2823},"Вступ до CSS. Селектори та специфічність","/html-css/css-intro-selectors","12.html-css/09.css-intro-selectors",{"title":2825,"path":2826,"stem":2827},"Блокова модель CSS. Відступи. Box Sizing","/html-css/css-box-model","12.html-css/10.css-box-model",{"title":2829,"path":2830,"stem":2831},"Розміри у CSS: повний довідник одиниць і ключових слів","/html-css/10a.css-sizing","12.html-css/10a.css-sizing",{"title":2833,"path":2834,"stem":2835},"Типографіка в CSS. Шрифти та текст","/html-css/css-typography","12.html-css/11.css-typography",{"title":2837,"path":2838,"stem":2839},"Кольори та фони в CSS","/html-css/css-colors-backgrounds","12.html-css/12.css-colors-backgrounds",{"title":2841,"path":2842,"stem":2843},"Тіні та фільтри в CSS","/html-css/12b.css-shadows-filters","12.html-css/12b.css-shadows-filters",{"title":2845,"path":2846,"stem":2847},"CSS Flexbox: Фундамент гнучких макетів","/html-css/css-flexbox-fundamentals","12.html-css/13.css-flexbox-fundamentals",{"title":2849,"path":2850,"stem":2851},"CSS Flexbox: Вирівнювання та Позиціонування","/html-css/css-flexbox-alignment-sizing-and-patterns","12.html-css/14.css-flexbox-alignment-sizing-and-patterns",{"title":2853,"path":2854,"stem":2855},"CSS Grid. Двовимірний макет. Частина 1","/html-css/css-layout-grid","12.html-css/15.css-layout-grid",{"title":2857,"path":2858,"stem":2859},"CSS Grid. Двовимірний макет. Частина 2","/html-css/css-layout-grid-advanced","12.html-css/16.css-layout-grid-advanced",{"title":2861,"path":2862,"stem":2863},"Позиціонування в CSS. Z-index. Stacking Context","/html-css/css-positioning","12.html-css/17.css-positioning",{"title":2865,"path":2866,"stem":2867},"CSS Анімації та Переходи","/html-css/css-animations-transitions","12.html-css/18.css-animations-transitions",{"title":2869,"path":2870,"stem":2871},"Адаптивний дизайн. Media Queries. Частина 1","/html-css/css-responsive-media-queries","12.html-css/19.css-responsive-media-queries",{"title":2873,"path":2874,"stem":2875},"Адаптивний дизайн. Частина 2: clamp(), Container Queries, @layer","/html-css/css-responsive-advanced","12.html-css/20.css-responsive-advanced",{"title":2877,"path":2878,"stem":2879},"CSS Custom Properties. Методології. Сучасний CSS","/html-css/css-variables-methodologies","12.html-css/21.css-variables-methodologies",{"title":2881,"path":2882,"stem":2883},"Сучасний CSS 2023–2025: Нові можливості","/html-css/css-modern-features","12.html-css/22.css-modern-features",{"title":2885,"path":2886,"stem":2887},"CSS Nesting, @layer, @scope та @property: нативний препроцесор","/html-css/22a.css-nesting-modern-syntax","12.html-css/22a.css-nesting-modern-syntax",{"title":2889,"path":2890,"stem":2891},"CSS для форм та інтерактивних станів","/html-css/css-forms-interactive-states","12.html-css/23.css-forms-interactive-states",{"title":2893,"path":2894,"stem":2895},"Доступність у CSS (CSS Accessibility)","/html-css/css-accessibility","12.html-css/24.css-accessibility",{"title":2897,"path":2898,"stem":2899},"CSS-функції та сучасні sizing primitives","/html-css/css-functions-sizing","12.html-css/25.css-functions-sizing",{"title":2901,"path":2902,"stem":2903},"Rendering Pipeline і CSS Performance","/html-css/css-rendering-performance","12.html-css/26.css-rendering-performance",{"title":2905,"path":2906,"stem":2907},"CSS Best Practices: типові ситуації та правильні рішення","/html-css/css-best-practices","12.html-css/27.css-best-practices",{"title":2909,"path":2910,"stem":2911,"children":2912,"page":59},"Tailwind","/tailwind","21.tailwind",[2913,2917,2921,2925,2929,2933,2937,2941],{"title":2914,"path":2915,"stem":2916},"Що таке Tailwind CSS і навіщо він потрібен","/tailwind/tailwind-intro-philosophy","21.tailwind/01.tailwind-intro-philosophy",{"title":2918,"path":2919,"stem":2920},"Встановлення та налаштування Tailwind CSS v4","/tailwind/tailwind-installation-setup","21.tailwind/02.tailwind-installation-setup",{"title":2922,"path":2923,"stem":2924},"Utility-класи: основи та система Tailwind","/tailwind/tailwind-utility-classes-core","21.tailwind/03.tailwind-utility-classes-core",{"title":2926,"path":2927,"stem":2928},"Layout: Flexbox та Grid через Tailwind","/tailwind/tailwind-flexbox-grid","21.tailwind/04.tailwind-flexbox-grid",{"title":2930,"path":2931,"stem":2932},"Кастомізація теми через @theme у Tailwind v4","/tailwind/tailwind-theme-customization","21.tailwind/05.tailwind-theme-customization",{"title":2934,"path":2935,"stem":2936},"Варіанти: hover, focus, responsive, dark mode та нові v4","/tailwind/tailwind-variants-states","21.tailwind/06.tailwind-variants-states",{"title":2938,"path":2939,"stem":2940},"Типографіка та система кольорів у Tailwind v4","/tailwind/tailwind-typography-colors","21.tailwind/07.tailwind-typography-colors",{"title":2942,"path":2943,"stem":2944},"Компоненти та повторюваність: @apply, @utility та патерни","/tailwind/tailwind-components-patterns","21.tailwind/08.tailwind-components-patterns",{"title":2946,"path":2947,"stem":2948},"Showcase Компонентів kostyl.dev","/test-new-components","98.test-new-components",{"id":2950,"title":1262,"body":2951,"description":8038,"extension":8039,"links":8040,"meta":8041,"navigation":3346,"path":1263,"seo":8042,"stem":1264,"__hash__":8043},"docs/01.csharp/11.aspnet/11.mvc/12.htmx.md",{"type":2952,"value":2953,"toc":8000},"minimark",[2954,2958,2971,2978,2985,2992,3000,3003,3008,3011,3120,3123,3126,3128,3132,3139,3231,3242,3266,3268,3272,3293,3304,3412,3439,3457,3459,3465,3476,3558,3564,3653,3673,3675,3682,3705,3711,4017,4050,4052,4059,4088,4093,4383,4392,4485,4501,4517,4519,4526,4532,4540,4788,4797,4799,4806,4816,4926,5041,5043,5050,5056,5114,5121,5123,5130,5148,5258,5270,5272,5276,5282,5285,5303,5319,5468,5483,5502,5515,5517,5521,5536,5539,5542,5566,5569,5700,5707,6017,6020,6022,6026,6029,6172,6175,6177,6181,6184,7691,7694,7696,7700,7704,7731,7748,7752,7781,7795,7799,7808,7844,7846,7850,7978,7996],[2955,2956,1262],"h1",{"id":2957},"htmx-інтерактивність-через-html-атрибути",[2959,2960,2961,2962,2966,2967,2970],"p",{},"Уявіть типовий застосунок на ASP.NET Core MVC: список товарів із фільтрацією за категорією. Користувач обирає «Електроніка» — і браузер перезавантажує сторінку повністю. Сервер формує весь HTML заново, від ",[2963,2964,2965],"code",{},"\u003Chtml>"," до ",[2963,2968,2969],{},"\u003C/html>",", повертає 80 кілобайт розмітки, браузер перемальовує DOM з нуля. Для зміни двох десятків рядків у таблиці.",[2959,2972,2973,2974,2977],{},"Саме цю проблему намагалися вирішити протягом останніх двадцяти років. Спочатку — jQuery і ручний AJAX: ",[2963,2975,2976],{},"$.get(\"/products?category=electronics\", function(data) { $(\"#list\").html(data); })",". Підхід працює, але вимагає JavaScript-коду для кожної взаємодії. Потім прийшли React, Vue, Angular: сервер повертає не HTML, а JSON, а весь DOM будується на клієнті. За це ми платимо сотнями кілобайтів JavaScript, архітектурним розривом між фронтендом і бекендом, складним управлінням станом на клієнті.",[2959,2979,2980,2984],{},[2981,2982,2983],"strong",{},"HTMX"," пропонує четвертий шлях — і він радикально простіший. Ідея виглядає майже банально: дозвольте будь-якому HTML-елементу робити HTTP-запити і вставляти отримані HTML-фрагменти у DOM. Без написання JavaScript. Без JSON. Без клієнтського стану. Сервер знову є джерелом правди і повертає те, що він вміє найкраще — готовий HTML.",[2959,2986,2987,2988,2991],{},"Цю концепцію автор бібліотеки Карсон Гросс (Carson Gross) назвав «",[2981,2989,2990],{},"HTML over the wire","» — HTML по дроту. На відміну від «JSON over the wire» (підхід SPA), сервер надсилає не дані для рендерингу, а вже відрендерений HTML-фрагмент. HTMX перехоплює кліки, надсилає запит і вставляє відповідь у вказане місце DOM — все це без єдиного рядку вашого JavaScript.",[2993,2994,2995,2996,2999],"note",{},"HTMX — це бібліотека розміром ~14kb (після стиснення gzip). Вона не має залежностей і підключається одним ",[2963,2997,2998],{},"\u003Cscript>","-тегом. Порівняйте: React із ReactDOM — понад 45kb, Vue 3 — близько 30kb.",[3001,3002],"hr",{},[3004,3005,3007],"h2",{"id":3006},"еволюція-веб-інтерактивності","Еволюція веб-інтерактивності",[2959,3009,3010],{},"Щоб зрозуміти місце HTMX в екосистемі, корисно простежити, як змінювалися підходи до побудови інтерактивних веб-застосунків:",[3012,3013,3014],"mermaid",{},[3015,3016,3020],"pre",{"className":3017,"code":3018,"language":3012,"meta":3019,"style":3019},"language-mermaid shiki shiki-themes light-plus dark-plus dark-plus","timeline\n    title Еволюція підходів до веб-інтерактивності\n    1990-2004 : MPA (Multi-Page Application)\n              : Кожна дія = перезавантаження сторінки\n              : Сервер повертає повний HTML\n    2005-2012 : jQuery AJAX\n              : Ручні $.get / $.post запити\n              : Серверна відповідь — HTML або JSON\n    2013-2023 : SPA-фреймворки\n              : React, Vue, Angular\n              : Сервер повертає JSON\n              : Клієнт будує DOM\n    2020-тепер : HTML over the Wire\n               : HTMX, Hotwire, Unpoly\n               : Сервер повертає HTML-фрагменти\n               : Мінімум JavaScript\n","",[2963,3021,3022,3030,3036,3042,3048,3054,3060,3066,3072,3078,3084,3090,3096,3102,3108,3114],{"__ignoreMap":3019},[3023,3024,3027],"span",{"class":3025,"line":3026},"line",1,[3023,3028,3029],{},"timeline\n",[3023,3031,3033],{"class":3025,"line":3032},2,[3023,3034,3035],{},"    title Еволюція підходів до веб-інтерактивності\n",[3023,3037,3039],{"class":3025,"line":3038},3,[3023,3040,3041],{},"    1990-2004 : MPA (Multi-Page Application)\n",[3023,3043,3045],{"class":3025,"line":3044},4,[3023,3046,3047],{},"              : Кожна дія = перезавантаження сторінки\n",[3023,3049,3051],{"class":3025,"line":3050},5,[3023,3052,3053],{},"              : Сервер повертає повний HTML\n",[3023,3055,3057],{"class":3025,"line":3056},6,[3023,3058,3059],{},"    2005-2012 : jQuery AJAX\n",[3023,3061,3063],{"class":3025,"line":3062},7,[3023,3064,3065],{},"              : Ручні $.get / $.post запити\n",[3023,3067,3069],{"class":3025,"line":3068},8,[3023,3070,3071],{},"              : Серверна відповідь — HTML або JSON\n",[3023,3073,3075],{"class":3025,"line":3074},9,[3023,3076,3077],{},"    2013-2023 : SPA-фреймворки\n",[3023,3079,3081],{"class":3025,"line":3080},10,[3023,3082,3083],{},"              : React, Vue, Angular\n",[3023,3085,3087],{"class":3025,"line":3086},11,[3023,3088,3089],{},"              : Сервер повертає JSON\n",[3023,3091,3093],{"class":3025,"line":3092},12,[3023,3094,3095],{},"              : Клієнт будує DOM\n",[3023,3097,3099],{"class":3025,"line":3098},13,[3023,3100,3101],{},"    2020-тепер : HTML over the Wire\n",[3023,3103,3105],{"class":3025,"line":3104},14,[3023,3106,3107],{},"               : HTMX, Hotwire, Unpoly\n",[3023,3109,3111],{"class":3025,"line":3110},15,[3023,3112,3113],{},"               : Сервер повертає HTML-фрагменти\n",[3023,3115,3117],{"class":3025,"line":3116},16,[3023,3118,3119],{},"               : Мінімум JavaScript\n",[2959,3121,3122],{},"Кожен із цих підходів розв'язував реальну проблему свого часу та водночас породжував нові. MPA — просто та передбачувано, але нав'язує відчуття «перемигування» сторінки. jQuery-AJAX — гнучко, але швидко перетворюється на «спагетті-код» при масштабуванні. SPA — потужно, але за ціну величезної складності та фундаментального архітектурного розриву між клієнтом і сервером.",[2959,3124,3125],{},"HTMX повертає нас до серверного рендерингу — але без відчуття перезавантаження. Сервер будує HTML (як у MPA), але клієнт вставляє лише змінений фрагмент (як у SPA). Найкраще з обох світів — за умови, що застосунок не є повноцінним клієнтським редактором на кшталт Google Docs.",[3001,3127],{},[3004,3129,3131],{"id":3130},"підключення-htmx","Підключення HTMX",[2959,3133,3134,3135,3138],{},"HTMX — це єдиний JavaScript-файл без жодних залежностей. Підключення вимагає лише одного рядка у спільному ",[2963,3136,3137],{},"_Layout.cshtml",":",[3140,3141,3142,3200],"code-group",{},[3015,3143,3148],{"className":3144,"code":3145,"filename":3146,"language":3147,"meta":3019,"style":3019},"language-html shiki shiki-themes light-plus dark-plus dark-plus","\u003Cscript src=\"https://unpkg.com/htmx.org@2.0.3\"\n        integrity=\"sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+\"\n        crossorigin=\"anonymous\">\u003C/script>\n","CDN (для розробки)","html",[2963,3149,3150,3172,3182],{"__ignoreMap":3019},[3023,3151,3152,3156,3160,3164,3168],{"class":3025,"line":3026},[3023,3153,3155],{"class":3154},"s0P7L","\u003C",[3023,3157,3159],{"class":3158},"sKtos","script",[3023,3161,3163],{"class":3162},"sa4r_"," src",[3023,3165,3167],{"class":3166},"sD7JJ","=",[3023,3169,3171],{"class":3170},"su9tN","\"https://unpkg.com/htmx.org@2.0.3\"\n",[3023,3173,3174,3177,3179],{"class":3025,"line":3032},[3023,3175,3176],{"class":3162},"        integrity",[3023,3178,3167],{"class":3166},[3023,3180,3181],{"class":3170},"\"sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+\"\n",[3023,3183,3184,3187,3189,3192,3195,3197],{"class":3025,"line":3038},[3023,3185,3186],{"class":3162},"        crossorigin",[3023,3188,3167],{"class":3166},[3023,3190,3191],{"class":3170},"\"anonymous\"",[3023,3193,3194],{"class":3154},">\u003C/",[3023,3196,3159],{"class":3158},[3023,3198,3199],{"class":3154},">\n",[3015,3201,3204],{"className":3144,"code":3202,"filename":3203,"language":3147,"meta":3019,"style":3019},"@* Завантажте htmx.min.js з htmx.org та помістіть у wwwroot/lib/htmx/ *@\n\u003Cscript src=\"~/lib/htmx/htmx.min.js\">\u003C/script>\n","Локально (для production)",[2963,3205,3206,3212],{"__ignoreMap":3019},[3023,3207,3208],{"class":3025,"line":3026},[3023,3209,3211],{"class":3210},"sHH4Y","@* Завантажте htmx.min.js з htmx.org та помістіть у wwwroot/lib/htmx/ *@\n",[3023,3213,3214,3216,3218,3220,3222,3225,3227,3229],{"class":3025,"line":3032},[3023,3215,3155],{"class":3154},[3023,3217,3159],{"class":3158},[3023,3219,3163],{"class":3162},[3023,3221,3167],{"class":3166},[3023,3223,3224],{"class":3170},"\"~/lib/htmx/htmx.min.js\"",[3023,3226,3194],{"class":3154},[3023,3228,3159],{"class":3158},[3023,3230,3199],{"class":3154},[2959,3232,3233,3234,3237,3238,3241],{},"Після підключення HTMX одразу активний для всього документа. Жодної ініціалізації, жодного ",[2963,3235,3236],{},"document.addEventListener(\"DOMContentLoaded\", ...)",". Ви просто починаєте додавати ",[2963,3239,3240],{},"hx-*"," атрибути до існуючих HTML-елементів.",[3243,3244,3245,3246,3249,3250,3253,3254,3261,3262,3265],"tip",{},"Для ",[2981,3247,3248],{},"production","-середовища завжди використовуйте локальний файл — це усуває залежність від зовнішнього CDN та гарантує стабільну версію бібліотеки. Завантажте ",[2963,3251,3252],{},"htmx.min.js"," з ",[3255,3256,3260],"a",{"href":3257,"rel":3258},"https://htmx.org",[3259],"nofollow","htmx.org"," і розмістіть у ",[2963,3263,3264],{},"wwwroot/lib/htmx/",".",[3001,3267],{},[3004,3269,3271],{"id":3270},"core-атрибути-htmx","Core атрибути HTMX",[3273,3274,3276,3279,3280,3279,3283,3279,3286,3279,3289,3292],"h3",{"id":3275},"hx-get-hx-post-hx-put-hx-patch-hx-delete-метод-і-url-запиту",[2963,3277,3278],{},"hx-get",", ",[2963,3281,3282],{},"hx-post",[2963,3284,3285],{},"hx-put",[2963,3287,3288],{},"hx-patch",[2963,3290,3291],{},"hx-delete"," — метод і URL запиту",[2959,3294,3295,3296,3299,3300,3303],{},"Це фундаментальні атрибути бібліотеки. Вони перетворюють будь-який HTML-елемент на джерело HTTP-запиту. Атрибут визначає ",[2981,3297,3298],{},"метод"," запиту, а його значення — ",[2981,3301,3302],{},"URL",", на який запит надсилається.",[3015,3305,3307],{"className":3144,"code":3306,"language":3147,"meta":3019,"style":3019},"@* GET-запит на /products при кліку на кнопку *@\n\u003Cbutton hx-get=\"/products\">Завантажити товари\u003C/button>\n\n@* POST-запит для створення нового ресурсу *@\n\u003Cbutton hx-post=\"/products/create\">Створити товар\u003C/button>\n\n@* DELETE для видалення конкретного запису *@\n\u003Cbutton hx-delete=\"/products/42\">Видалити\u003C/button>\n",[2963,3308,3309,3314,3342,3348,3353,3378,3382,3387],{"__ignoreMap":3019},[3023,3310,3311],{"class":3025,"line":3026},[3023,3312,3313],{"class":3210},"@* GET-запит на /products при кліку на кнопку *@\n",[3023,3315,3316,3318,3321,3324,3326,3329,3332,3335,3338,3340],{"class":3025,"line":3032},[3023,3317,3155],{"class":3154},[3023,3319,3320],{"class":3158},"button",[3023,3322,3323],{"class":3162}," hx-get",[3023,3325,3167],{"class":3210},[3023,3327,3328],{"class":3170},"\"/products\"",[3023,3330,3331],{"class":3154},">",[3023,3333,3334],{"class":3210},"Завантажити товари",[3023,3336,3337],{"class":3154},"\u003C/",[3023,3339,3320],{"class":3158},[3023,3341,3199],{"class":3154},[3023,3343,3344],{"class":3025,"line":3038},[3023,3345,3347],{"emptyLinePlaceholder":3346},true,"\n",[3023,3349,3350],{"class":3025,"line":3044},[3023,3351,3352],{"class":3210},"@* POST-запит для створення нового ресурсу *@\n",[3023,3354,3355,3357,3359,3362,3364,3367,3369,3372,3374,3376],{"class":3025,"line":3050},[3023,3356,3155],{"class":3154},[3023,3358,3320],{"class":3158},[3023,3360,3361],{"class":3162}," hx-post",[3023,3363,3167],{"class":3210},[3023,3365,3366],{"class":3170},"\"/products/create\"",[3023,3368,3331],{"class":3154},[3023,3370,3371],{"class":3210},"Створити товар",[3023,3373,3337],{"class":3154},[3023,3375,3320],{"class":3158},[3023,3377,3199],{"class":3154},[3023,3379,3380],{"class":3025,"line":3056},[3023,3381,3347],{"emptyLinePlaceholder":3346},[3023,3383,3384],{"class":3025,"line":3062},[3023,3385,3386],{"class":3210},"@* DELETE для видалення конкретного запису *@\n",[3023,3388,3389,3391,3393,3396,3398,3401,3403,3406,3408,3410],{"class":3025,"line":3068},[3023,3390,3155],{"class":3154},[3023,3392,3320],{"class":3158},[3023,3394,3395],{"class":3162}," hx-delete",[3023,3397,3167],{"class":3210},[3023,3399,3400],{"class":3170},"\"/products/42\"",[3023,3402,3331],{"class":3154},[3023,3404,3405],{"class":3210},"Видалити",[3023,3407,3337],{"class":3154},[3023,3409,3320],{"class":3158},[3023,3411,3199],{"class":3154},[2959,3413,3414,3415,3418,3419,3422,3423,3426,3427,3430,3431,3434,3435,3438],{},"За замовчуванням HTMX реагує на ",[2981,3416,3417],{},"природну подію"," елемента: ",[2963,3420,3421],{},"click"," для кнопок і посилань, ",[2963,3424,3425],{},"submit"," для форм, ",[2963,3428,3429],{},"change"," для ",[2963,3432,3433],{},"\u003Cselect>"," і чекбоксів. Тобто жодного ",[2963,3436,3437],{},"onclick=\"\""," — HTML-атрибут вказує що робити, браузер вирішує коли.",[2959,3440,3441,3442,3445,3446,3449,3450,3453,3454,3265],{},"Важливий нюанс: відповідь сервера за замовчуванням вставляється ",[2981,3443,3444],{},"всередину самого ініціатора"," запиту ",[2963,3447,3448],{},"(innerHTML)",". Тобто після кліку на ",[2963,3451,3452],{},"\u003Cbutton hx-get=\"/products\">"," — вміст кнопки замінюється HTML-відповіддю сервера, що рідко є бажаним результатом. Для керування місцем вставки і існує атрибут ",[2963,3455,3456],{},"hx-target",[3001,3458],{},[3273,3460,3462,3464],{"id":3461},"hx-target-куди-вставляти-відповідь",[2963,3463,3456],{}," — куди вставляти відповідь",[2959,3466,3467,3469,3470,3472,3473,3475],{},[2963,3468,3456],{}," приймає CSS-селектор елемента, у який буде вставлено відповідь сервера. Ця пара — ",[2963,3471,3278],{}," + ",[2963,3474,3456],{}," — є основним будівельним блоком більшості HTMX-взаємодій:",[3015,3477,3479],{"className":3144,"code":3478,"language":3147,"meta":3019,"style":3019},"@* Кнопка робить запит, але результат потрапляє у #product-list *@\n\u003Cbutton hx-get=\"/products\"\n        hx-target=\"#product-list\">\n    Завантажити товари\n\u003C/button>\n\n\u003Cdiv id=\"product-list\">\n    @* Сюди прийде HTML-відповідь від /products *@\n\u003C/div>\n",[2963,3480,3481,3486,3499,3511,3516,3524,3528,3545,3550],{"__ignoreMap":3019},[3023,3482,3483],{"class":3025,"line":3026},[3023,3484,3485],{"class":3210},"@* Кнопка робить запит, але результат потрапляє у #product-list *@\n",[3023,3487,3488,3490,3492,3494,3496],{"class":3025,"line":3032},[3023,3489,3155],{"class":3154},[3023,3491,3320],{"class":3158},[3023,3493,3323],{"class":3162},[3023,3495,3167],{"class":3210},[3023,3497,3498],{"class":3170},"\"/products\"\n",[3023,3500,3501,3504,3506,3509],{"class":3025,"line":3038},[3023,3502,3503],{"class":3162},"        hx-target",[3023,3505,3167],{"class":3210},[3023,3507,3508],{"class":3170},"\"#product-list\"",[3023,3510,3199],{"class":3154},[3023,3512,3513],{"class":3025,"line":3044},[3023,3514,3515],{"class":3210},"    Завантажити товари\n",[3023,3517,3518,3520,3522],{"class":3025,"line":3050},[3023,3519,3337],{"class":3154},[3023,3521,3320],{"class":3158},[3023,3523,3199],{"class":3154},[3023,3525,3526],{"class":3025,"line":3056},[3023,3527,3347],{"emptyLinePlaceholder":3346},[3023,3529,3530,3532,3535,3538,3540,3543],{"class":3025,"line":3062},[3023,3531,3155],{"class":3154},[3023,3533,3534],{"class":3158},"div",[3023,3536,3537],{"class":3162}," id",[3023,3539,3167],{"class":3210},[3023,3541,3542],{"class":3170},"\"product-list\"",[3023,3544,3199],{"class":3154},[3023,3546,3547],{"class":3025,"line":3068},[3023,3548,3549],{"class":3210},"    @* Сюди прийде HTML-відповідь від /products *@\n",[3023,3551,3552,3554,3556],{"class":3025,"line":3074},[3023,3553,3337],{"class":3154},[3023,3555,3534],{"class":3158},[3023,3557,3199],{"class":3154},[2959,3559,3560,3561,3563],{},"Окрім звичайних CSS-селекторів, ",[2963,3562,3456],{}," підтримує спеціальні відносні селектори для знаходження елементів відносно ініціатора запиту:",[3565,3566,3567,3580],"table",{},[3568,3569,3570],"thead",{},[3571,3572,3573,3577],"tr",{},[3574,3575,3576],"th",{},"Значення",[3574,3578,3579],{},"Опис",[3581,3582,3583,3594,3604,3617,3630,3643],"tbody",{},[3571,3584,3585,3591],{},[3586,3587,3588],"td",{},[2963,3589,3590],{},"#element-id",[3586,3592,3593],{},"Елемент за CSS-ідентифікатором",[3571,3595,3596,3601],{},[3586,3597,3598],{},[2963,3599,3600],{},".class-name",[3586,3602,3603],{},"Перший елемент за класом",[3571,3605,3606,3611],{},[3586,3607,3608],{},[2963,3609,3610],{},"closest tr",[3586,3612,3613,3614],{},"Найближчий батьківський ",[2963,3615,3616],{},"\u003Ctr>",[3571,3618,3619,3624],{},[3586,3620,3621],{},[2963,3622,3623],{},"next div",[3586,3625,3626,3627],{},"Наступний сусідній ",[2963,3628,3629],{},"\u003Cdiv>",[3571,3631,3632,3637],{},[3586,3633,3634],{},[2963,3635,3636],{},"previous p",[3586,3638,3639,3640],{},"Попередній сусідній ",[2963,3641,3642],{},"\u003Cp>",[3571,3644,3645,3650],{},[3586,3646,3647],{},[2963,3648,3649],{},"this",[3586,3651,3652],{},"Сам ініціатор (за замовчуванням)",[2959,3654,3655,3656,3279,3659,3279,3662,3665,3666,3669,3670,3265],{},"Відносні селектори (",[2963,3657,3658],{},"closest",[2963,3660,3661],{},"next",[2963,3663,3664],{},"previous",") особливо корисні у динамічних шаблонах, де ",[2963,3667,3668],{},"id"," невідомий наперед — наприклад, у рядках таблиці, що генеруються ",[2963,3671,3672],{},"@foreach",[3001,3674],{},[3273,3676,3678,3681],{"id":3677},"hx-swap-як-саме-вставляти-відповідь",[2963,3679,3680],{},"hx-swap"," — як саме вставляти відповідь",[2959,3683,3684,3685,3687,3688,3691,3692,3687,3694,3697,3698,3700,3701,3704],{},"Якщо ",[2963,3686,3456],{}," відповідає на питання «",[2981,3689,3690],{},"куди","», то ",[2963,3693,3680],{},[2981,3695,3696],{},"як","». Атрибут визначає спосіб вставки HTML-відповіді відносно цільового елемента. Без ",[2963,3699,3680],{}," використовується режим ",[2963,3702,3703],{},"innerHTML"," за замовчуванням — вміст цільового елемента замінюється.",[2959,3706,3707,3708,3710],{},"Розуміння всіх режимів ",[2963,3709,3680],{}," критично важливе для побудови правильних HTMX-взаємодій. Розглянемо кожен:",[3712,3713,3714,3777,3824,3872,3920,3983],"card-group",{},[3715,3716,3719,3729],"card",{"icon":3717,"title":3718},"i-heroicons-arrow-path","innerHTML (за замовчуванням)",[2959,3720,3721,3722,3725,3726,3728],{},"Замінює ",[2981,3723,3724],{},"внутрішній вміст"," ",[2963,3727,3456],{},". Сам елемент-контейнер залишається. Найпоширеніший режим для списків та контейнерів.",[3015,3730,3732],{"className":3144,"code":3731,"language":3147,"meta":3019,"style":3019},"\u003Cdiv id=\"results\" hx-get=\"/search\" hx-swap=\"innerHTML\">\n    Початковий вміст буде замінено\n\u003C/div>\n",[2963,3733,3734,3764,3769],{"__ignoreMap":3019},[3023,3735,3736,3738,3740,3742,3744,3747,3749,3751,3754,3757,3759,3762],{"class":3025,"line":3026},[3023,3737,3155],{"class":3154},[3023,3739,3534],{"class":3158},[3023,3741,3537],{"class":3162},[3023,3743,3167],{"class":3210},[3023,3745,3746],{"class":3170},"\"results\"",[3023,3748,3323],{"class":3162},[3023,3750,3167],{"class":3210},[3023,3752,3753],{"class":3170},"\"/search\"",[3023,3755,3756],{"class":3162}," hx-swap",[3023,3758,3167],{"class":3210},[3023,3760,3761],{"class":3170},"\"innerHTML\"",[3023,3763,3199],{"class":3154},[3023,3765,3766],{"class":3025,"line":3032},[3023,3767,3768],{"class":3210},"    Початковий вміст буде замінено\n",[3023,3770,3771,3773,3775],{"class":3025,"line":3038},[3023,3772,3337],{"class":3154},[3023,3774,3534],{"class":3158},[3023,3776,3199],{"class":3154},[3715,3778,3781,3789],{"icon":3779,"title":3780},"i-heroicons-arrow-path-rounded-square","outerHTML",[2959,3782,3721,3783,3725,3786,3788],{},[2981,3784,3785],{},"сам елемент",[2963,3787,3456],{}," повністю разом із його тегом. Застосовується, коли відповідь є новою версією всього елемента, наприклад оновлений рядок таблиці.",[3015,3790,3792],{"className":3144,"code":3791,"language":3147,"meta":3019,"style":3019},"\u003Ctr id=\"row-5\" hx-patch=\"/tasks/5\" hx-swap=\"outerHTML\">\n",[2963,3793,3794],{"__ignoreMap":3019},[3023,3795,3796,3798,3800,3802,3804,3807,3810,3812,3815,3817,3819,3822],{"class":3025,"line":3026},[3023,3797,3155],{"class":3154},[3023,3799,3571],{"class":3158},[3023,3801,3537],{"class":3162},[3023,3803,3167],{"class":3210},[3023,3805,3806],{"class":3170},"\"row-5\"",[3023,3808,3809],{"class":3162}," hx-patch",[3023,3811,3167],{"class":3210},[3023,3813,3814],{"class":3170},"\"/tasks/5\"",[3023,3816,3756],{"class":3162},[3023,3818,3167],{"class":3210},[3023,3820,3821],{"class":3170},"\"outerHTML\"",[3023,3823,3199],{"class":3154},[3715,3825,3828,3837],{"icon":3826,"title":3827},"i-heroicons-chevron-double-down","beforeend",[2959,3829,3830,3831,3725,3833,3836],{},"Вставляє відповідь всередину ",[2963,3832,3456],{},[2981,3834,3835],{},"у кінець",", після останнього дочірнього елемента. Ідеально для нескінченного прокручування та додавання нових елементів до списку.",[3015,3838,3840],{"className":3144,"code":3839,"language":3147,"meta":3019,"style":3019},"\u003Cul id=\"todo-list\" hx-post=\"/todo\" hx-swap=\"beforeend\">\n",[2963,3841,3842],{"__ignoreMap":3019},[3023,3843,3844,3846,3849,3851,3853,3856,3858,3860,3863,3865,3867,3870],{"class":3025,"line":3026},[3023,3845,3155],{"class":3154},[3023,3847,3848],{"class":3158},"ul",[3023,3850,3537],{"class":3162},[3023,3852,3167],{"class":3210},[3023,3854,3855],{"class":3170},"\"todo-list\"",[3023,3857,3361],{"class":3162},[3023,3859,3167],{"class":3210},[3023,3861,3862],{"class":3170},"\"/todo\"",[3023,3864,3756],{"class":3162},[3023,3866,3167],{"class":3210},[3023,3868,3869],{"class":3170},"\"beforeend\"",[3023,3871,3199],{"class":3154},[3715,3873,3876,3886],{"icon":3874,"title":3875},"i-heroicons-arrow-down","afterend",[2959,3877,3878,3879,3882,3883,3885],{},"Вставляє відповідь ",[2981,3880,3881],{},"після"," елемента ",[2963,3884,3456],{}," (як наступний сусід у DOM). Елемент-ціль залишається незмінним. Корисно для вставки нового запису поряд з існуючим.",[3015,3887,3889],{"className":3144,"code":3888,"language":3147,"meta":3019,"style":3019},"\u003Cdiv id=\"last-item\" hx-get=\"/next\" hx-swap=\"afterend\">\n",[2963,3890,3891],{"__ignoreMap":3019},[3023,3892,3893,3895,3897,3899,3901,3904,3906,3908,3911,3913,3915,3918],{"class":3025,"line":3026},[3023,3894,3155],{"class":3154},[3023,3896,3534],{"class":3158},[3023,3898,3537],{"class":3162},[3023,3900,3167],{"class":3210},[3023,3902,3903],{"class":3170},"\"last-item\"",[3023,3905,3323],{"class":3162},[3023,3907,3167],{"class":3210},[3023,3909,3910],{"class":3170},"\"/next\"",[3023,3912,3756],{"class":3162},[3023,3914,3167],{"class":3210},[3023,3916,3917],{"class":3170},"\"afterend\"",[3023,3919,3199],{"class":3154},[3715,3921,3924,3938],{"icon":3922,"title":3923},"i-heroicons-trash","delete",[2959,3925,3926,3927,3929,3930,3933,3934,3937],{},"Видаляє елемент ",[2963,3928,3456],{}," з DOM ",[2981,3931,3932],{},"незалежно"," від вмісту відповіді сервера. Зручно для кнопок «Видалити», де сервер повертає ",[2963,3935,3936],{},"200 OK"," з порожнім тілом.",[3015,3939,3941],{"className":3144,"code":3940,"language":3147,"meta":3019,"style":3019},"\u003Cli id=\"task-42\" hx-delete=\"/tasks/42\" hx-swap=\"delete\"\n    hx-target=\"this\">\n",[2963,3942,3943,3971],{"__ignoreMap":3019},[3023,3944,3945,3947,3950,3952,3954,3957,3959,3961,3964,3966,3968],{"class":3025,"line":3026},[3023,3946,3155],{"class":3154},[3023,3948,3949],{"class":3158},"li",[3023,3951,3537],{"class":3162},[3023,3953,3167],{"class":3210},[3023,3955,3956],{"class":3170},"\"task-42\"",[3023,3958,3395],{"class":3162},[3023,3960,3167],{"class":3210},[3023,3962,3963],{"class":3170},"\"/tasks/42\"",[3023,3965,3756],{"class":3162},[3023,3967,3167],{"class":3210},[3023,3969,3970],{"class":3170},"\"delete\"\n",[3023,3972,3973,3976,3978,3981],{"class":3025,"line":3032},[3023,3974,3975],{"class":3162},"    hx-target",[3023,3977,3167],{"class":3210},[3023,3979,3980],{"class":3170},"\"this\"",[3023,3982,3199],{"class":3154},[3715,3984,3987,3990],{"icon":3985,"title":3986},"i-heroicons-no-symbol","none",[2959,3988,3989],{},"Відповідь ігнорується — DOM не змінюється. Використовується для запитів, результат яких не потрібно відображати (наприклад, аналітика, пінг, тригер серверної події).",[3015,3991,3993],{"className":3144,"code":3992,"language":3147,"meta":3019,"style":3019},"\u003Cbutton hx-post=\"/analytics/click\" hx-swap=\"none\">\n",[2963,3994,3995],{"__ignoreMap":3019},[3023,3996,3997,3999,4001,4003,4005,4008,4010,4012,4015],{"class":3025,"line":3026},[3023,3998,3155],{"class":3154},[3023,4000,3320],{"class":3158},[3023,4002,3361],{"class":3162},[3023,4004,3167],{"class":3210},[3023,4006,4007],{"class":3170},"\"/analytics/click\"",[3023,4009,3756],{"class":3162},[3023,4011,3167],{"class":3210},[3023,4013,4014],{"class":3170},"\"none\"",[3023,4016,3199],{"class":3154},[2959,4018,4019,4020,4023,4024,4026,4027,4029,4030,4032,4033,4036,4037,4040,4041,4043,4044,4047,4048,3265],{},"Поширена помилка початківців — використовувати ",[2963,4021,4022],{},"hx-swap=\"innerHTML\""," там, де потрібен ",[2963,4025,3780],{},". Різниця принципова: при ",[2963,4028,3703],{}," ви оновлюєте вміст елемента-цілі, а при ",[2963,4031,3780],{}," — замінюєте сам елемент. Якщо сервер повертає ",[2963,4034,4035],{},"\u003Cli id=\"task-5\">...\u003C/li>",", а на сторінці вже є ",[2963,4038,4039],{},"\u003Cli id=\"task-5\">",", то для заміни рядка потрібен ",[2963,4042,3780],{}," — інакше отримаєте вкладений ",[2963,4045,4046],{},"\u003Cli>"," всередині ",[2963,4049,4046],{},[3001,4051],{},[3273,4053,4055,4058],{"id":4054},"hx-trigger-коли-надсилати-запит",[2963,4056,4057],{},"hx-trigger"," — коли надсилати запит",[2959,4060,4061,4062,3279,4065,4067,4068,4070,4071,4073,4074,4077,4078,4080,4081,3426,4083,3430,4085,4087],{},"Три попередні атрибути визначали ",[2981,4063,4064],{},"що",[2981,4066,3690],{}," і ",[2981,4069,3696],{},". ",[2963,4072,4057],{}," визначає ",[2981,4075,4076],{},"коли",". За замовчуванням HTMX використовує природні події: ",[2963,4079,3421],{}," для кнопок, ",[2963,4082,3425],{},[2963,4084,3429],{},[2963,4086,3433],{},". Але реальні інтерфейси часто вимагають тонкішого налаштування.",[2959,4089,4090,4091,3138],{},"Наприклад, поле пошуку, що надсилає запит при кожному натисканні клавіші — без затримки — призведе до сотень зайвих запитів за секунду. Або потрібно завантажити секцію сторінки лише тоді, коли вона з'явиться у viewport. Або оновлювати лічильник кожні 5 секунд. Для всього цього існує ",[2963,4092,4057],{},[3015,4094,4096],{"className":3144,"code":4095,"language":3147,"meta":3019,"style":3019},"@* Пошук при введенні тексту — лише якщо значення змінилося,\n   після 300мс паузи (debounce). Запобігає зайвим запитам *@\n\u003Cinput type=\"search\"\n       name=\"q\"\n       hx-get=\"/products/search\"\n       hx-target=\"#results\"\n       hx-trigger=\"input changed delay:300ms\"\n       placeholder=\"Пошук товарів...\">\n\n@* Завантажити секцію при появі у viewport (lazy loading) *@\n\u003Cdiv hx-get=\"/dashboard/stats\"\n     hx-trigger=\"revealed\"\n     hx-target=\"this\"\n     hx-swap=\"outerHTML\">\n    \u003Cdiv class=\"spinner\">Завантаження...\u003C/div>\n\u003C/div>\n\n@* Автооновлення лічильника кожні 5 секунд *@\n\u003Cspan id=\"online-count\"\n      hx-get=\"/users/online-count\"\n      hx-trigger=\"every 5s\">\n    ...\n\u003C/span>\n\n@* Реагувати на кастомну подію від іншого елемента *@\n\u003Cdiv id=\"cart-summary\"\n     hx-get=\"/cart/summary\"\n     hx-trigger=\"cartUpdated from:body\">\n\u003C/div>\n",[2963,4097,4098,4103,4108,4123,4133,4143,4153,4163,4175,4179,4184,4197,4207,4217,4228,4254,4262,4267,4273,4287,4298,4311,4317,4326,4331,4337,4351,4362,4374],{"__ignoreMap":3019},[3023,4099,4100],{"class":3025,"line":3026},[3023,4101,4102],{"class":3210},"@* Пошук при введенні тексту — лише якщо значення змінилося,\n",[3023,4104,4105],{"class":3025,"line":3032},[3023,4106,4107],{"class":3210},"   після 300мс паузи (debounce). Запобігає зайвим запитам *@\n",[3023,4109,4110,4112,4115,4118,4120],{"class":3025,"line":3038},[3023,4111,3155],{"class":3154},[3023,4113,4114],{"class":3158},"input",[3023,4116,4117],{"class":3162}," type",[3023,4119,3167],{"class":3210},[3023,4121,4122],{"class":3170},"\"search\"\n",[3023,4124,4125,4128,4130],{"class":3025,"line":3044},[3023,4126,4127],{"class":3162},"       name",[3023,4129,3167],{"class":3210},[3023,4131,4132],{"class":3170},"\"q\"\n",[3023,4134,4135,4138,4140],{"class":3025,"line":3050},[3023,4136,4137],{"class":3162},"       hx-get",[3023,4139,3167],{"class":3210},[3023,4141,4142],{"class":3170},"\"/products/search\"\n",[3023,4144,4145,4148,4150],{"class":3025,"line":3056},[3023,4146,4147],{"class":3162},"       hx-target",[3023,4149,3167],{"class":3210},[3023,4151,4152],{"class":3170},"\"#results\"\n",[3023,4154,4155,4158,4160],{"class":3025,"line":3062},[3023,4156,4157],{"class":3162},"       hx-trigger",[3023,4159,3167],{"class":3210},[3023,4161,4162],{"class":3170},"\"input changed delay:300ms\"\n",[3023,4164,4165,4168,4170,4173],{"class":3025,"line":3068},[3023,4166,4167],{"class":3162},"       placeholder",[3023,4169,3167],{"class":3210},[3023,4171,4172],{"class":3170},"\"Пошук товарів...\"",[3023,4174,3199],{"class":3154},[3023,4176,4177],{"class":3025,"line":3074},[3023,4178,3347],{"emptyLinePlaceholder":3346},[3023,4180,4181],{"class":3025,"line":3080},[3023,4182,4183],{"class":3210},"@* Завантажити секцію при появі у viewport (lazy loading) *@\n",[3023,4185,4186,4188,4190,4192,4194],{"class":3025,"line":3086},[3023,4187,3155],{"class":3154},[3023,4189,3534],{"class":3158},[3023,4191,3323],{"class":3162},[3023,4193,3167],{"class":3210},[3023,4195,4196],{"class":3170},"\"/dashboard/stats\"\n",[3023,4198,4199,4202,4204],{"class":3025,"line":3092},[3023,4200,4201],{"class":3162},"     hx-trigger",[3023,4203,3167],{"class":3210},[3023,4205,4206],{"class":3170},"\"revealed\"\n",[3023,4208,4209,4212,4214],{"class":3025,"line":3098},[3023,4210,4211],{"class":3162},"     hx-target",[3023,4213,3167],{"class":3210},[3023,4215,4216],{"class":3170},"\"this\"\n",[3023,4218,4219,4222,4224,4226],{"class":3025,"line":3104},[3023,4220,4221],{"class":3162},"     hx-swap",[3023,4223,3167],{"class":3210},[3023,4225,3821],{"class":3170},[3023,4227,3199],{"class":3154},[3023,4229,4230,4233,4235,4238,4240,4243,4245,4248,4250,4252],{"class":3025,"line":3110},[3023,4231,4232],{"class":3154},"    \u003C",[3023,4234,3534],{"class":3158},[3023,4236,4237],{"class":3162}," class",[3023,4239,3167],{"class":3210},[3023,4241,4242],{"class":3170},"\"spinner\"",[3023,4244,3331],{"class":3154},[3023,4246,4247],{"class":3210},"Завантаження...",[3023,4249,3337],{"class":3154},[3023,4251,3534],{"class":3158},[3023,4253,3199],{"class":3154},[3023,4255,4256,4258,4260],{"class":3025,"line":3116},[3023,4257,3337],{"class":3154},[3023,4259,3534],{"class":3158},[3023,4261,3199],{"class":3154},[3023,4263,4265],{"class":3025,"line":4264},17,[3023,4266,3347],{"emptyLinePlaceholder":3346},[3023,4268,4270],{"class":3025,"line":4269},18,[3023,4271,4272],{"class":3210},"@* Автооновлення лічильника кожні 5 секунд *@\n",[3023,4274,4276,4278,4280,4282,4284],{"class":3025,"line":4275},19,[3023,4277,3155],{"class":3154},[3023,4279,3023],{"class":3158},[3023,4281,3537],{"class":3162},[3023,4283,3167],{"class":3210},[3023,4285,4286],{"class":3170},"\"online-count\"\n",[3023,4288,4290,4293,4295],{"class":3025,"line":4289},20,[3023,4291,4292],{"class":3162},"      hx-get",[3023,4294,3167],{"class":3210},[3023,4296,4297],{"class":3170},"\"/users/online-count\"\n",[3023,4299,4301,4304,4306,4309],{"class":3025,"line":4300},21,[3023,4302,4303],{"class":3162},"      hx-trigger",[3023,4305,3167],{"class":3210},[3023,4307,4308],{"class":3170},"\"every 5s\"",[3023,4310,3199],{"class":3154},[3023,4312,4314],{"class":3025,"line":4313},22,[3023,4315,4316],{"class":3210},"    ...\n",[3023,4318,4320,4322,4324],{"class":3025,"line":4319},23,[3023,4321,3337],{"class":3154},[3023,4323,3023],{"class":3158},[3023,4325,3199],{"class":3154},[3023,4327,4329],{"class":3025,"line":4328},24,[3023,4330,3347],{"emptyLinePlaceholder":3346},[3023,4332,4334],{"class":3025,"line":4333},25,[3023,4335,4336],{"class":3210},"@* Реагувати на кастомну подію від іншого елемента *@\n",[3023,4338,4340,4342,4344,4346,4348],{"class":3025,"line":4339},26,[3023,4341,3155],{"class":3154},[3023,4343,3534],{"class":3158},[3023,4345,3537],{"class":3162},[3023,4347,3167],{"class":3210},[3023,4349,4350],{"class":3170},"\"cart-summary\"\n",[3023,4352,4354,4357,4359],{"class":3025,"line":4353},27,[3023,4355,4356],{"class":3162},"     hx-get",[3023,4358,3167],{"class":3210},[3023,4360,4361],{"class":3170},"\"/cart/summary\"\n",[3023,4363,4365,4367,4369,4372],{"class":3025,"line":4364},28,[3023,4366,4201],{"class":3162},[3023,4368,3167],{"class":3210},[3023,4370,4371],{"class":3170},"\"cartUpdated from:body\"",[3023,4373,3199],{"class":3154},[3023,4375,4377,4379,4381],{"class":3025,"line":4376},29,[3023,4378,3337],{"class":3154},[3023,4380,3534],{"class":3158},[3023,4382,3199],{"class":3154},[2959,4384,4385,4387,4388,4391],{},[2963,4386,4057],{}," підтримує кілька потужних ",[2981,4389,4390],{},"модифікаторів",", що можна комбінувати через пробіл:",[3565,4393,4394,4403],{},[3568,4395,4396],{},[3571,4397,4398,4401],{},[3574,4399,4400],{},"Модифікатор",[3574,4402,3579],{},[3581,4404,4405,4415,4425,4435,4445,4455,4465,4475],{},[3571,4406,4407,4412],{},[3586,4408,4409],{},[2963,4410,4411],{},"delay:300ms",[3586,4413,4414],{},"Затримка (debounce) — запит надсилається через N мс після події",[3571,4416,4417,4422],{},[3586,4418,4419],{},[2963,4420,4421],{},"throttle:1s",[3586,4423,4424],{},"Обмеження — не більше одного запиту за вказаний інтервал",[3571,4426,4427,4432],{},[3586,4428,4429],{},[2963,4430,4431],{},"changed",[3586,4433,4434],{},"Запит лише якщо значення елемента змінилося",[3571,4436,4437,4442],{},[3586,4438,4439],{},[2963,4440,4441],{},"once",[3586,4443,4444],{},"Запит лише один раз за життя елемента",[3571,4446,4447,4452],{},[3586,4448,4449],{},[2963,4450,4451],{},"revealed",[3586,4453,4454],{},"Тригер при появі елемента у viewport (Intersection Observer)",[3571,4456,4457,4462],{},[3586,4458,4459],{},[2963,4460,4461],{},"every 5s",[3586,4463,4464],{},"Polling — повторювати через вказаний інтервал",[3571,4466,4467,4472],{},[3586,4468,4469],{},[2963,4470,4471],{},"from:#other",[3586,4473,4474],{},"Слухати подію від іншого елемента за CSS-селектором",[3571,4476,4477,4482],{},[3586,4478,4479],{},[2963,4480,4481],{},"load",[3586,4483,4484],{},"Спрацьовує одразу після завантаження сторінки",[2959,4486,4487,4488,4067,4491,4494,4495,4497,4498,4500],{},"Ключова різниця між ",[2963,4489,4490],{},"delay",[2963,4492,4493],{},"throttle",": ",[2963,4496,4490],{}," — це debounce (скидає таймер при кожній новій події, надсилає запит лише коли події припинились), а ",[2963,4499,4493],{}," — це throttle (надсилає запит не частіше одного разу за інтервал, незалежно від кількості подій).",[3243,4502,4503,4504,4507,4508,4510,4511,4513,4514,4516],{},"Комбінація ",[2963,4505,4506],{},"hx-trigger=\"input changed delay:300ms\""," є найпоширенішим рецептом для live-search: ",[2963,4509,4114],{}," — подія, ",[2963,4512,4431],{}," — лише якщо значення справді змінилося, ",[2963,4515,4411],{}," — debounce 300 мс. Ця трійка запобігає надлишковим запитам при швидкому введенні тексту.",[3001,4518],{},[3273,4520,4522,4525],{"id":4521},"hx-include-включити-значення-інших-елементів-у-запит",[2963,4523,4524],{},"hx-include"," — включити значення інших елементів у запит",[2959,4527,4528,4529,4531],{},"За замовчуванням HTMX серіалізує у запит лише той елемент, що є ініціатором (або всю форму, якщо ініціатором є елемент форми). ",[2963,4530,4524],{}," дозволяє явно вказати додаткові елементи, значення яких слід додати до параметрів запиту.",[2959,4533,4534,4535,4067,4537,3138],{},"Типовий сценарій: кнопка «Застосувати фільтр», при натисканні якої потрібно включити поточне значення кількох ",[2963,4536,3433],{},[2963,4538,4539],{},"\u003Cinput>",[3015,4541,4543],{"className":3144,"code":4542,"language":3147,"meta":3019,"style":3019},"\u003Cselect id=\"category-filter\" name=\"category\">\n    \u003Coption value=\"\">Всі категорії\u003C/option>\n    \u003Coption value=\"electronics\">Електроніка\u003C/option>\n    \u003Coption value=\"clothing\">Одяг\u003C/option>\n\u003C/select>\n\n\u003Cselect id=\"sort-filter\" name=\"sort\">\n    \u003Coption value=\"price-asc\">Ціна ↑\u003C/option>\n    \u003Coption value=\"price-desc\">Ціна ↓\u003C/option>\n\u003C/select>\n\n@* При кліку — GET /products?category=electronics&sort=price-asc *@\n\u003Cbutton hx-get=\"/products\"\n        hx-target=\"#product-grid\"\n        hx-include=\"#category-filter, #sort-filter\">\n    Застосувати\n\u003C/button>\n",[2963,4544,4545,4569,4595,4619,4643,4651,4655,4677,4701,4725,4733,4737,4742,4754,4763,4775,4780],{"__ignoreMap":3019},[3023,4546,4547,4549,4552,4554,4556,4559,4562,4564,4567],{"class":3025,"line":3026},[3023,4548,3155],{"class":3154},[3023,4550,4551],{"class":3158},"select",[3023,4553,3537],{"class":3162},[3023,4555,3167],{"class":3210},[3023,4557,4558],{"class":3170},"\"category-filter\"",[3023,4560,4561],{"class":3162}," name",[3023,4563,3167],{"class":3210},[3023,4565,4566],{"class":3170},"\"category\"",[3023,4568,3199],{"class":3154},[3023,4570,4571,4573,4576,4579,4581,4584,4586,4589,4591,4593],{"class":3025,"line":3032},[3023,4572,4232],{"class":3154},[3023,4574,4575],{"class":3158},"option",[3023,4577,4578],{"class":3162}," value",[3023,4580,3167],{"class":3210},[3023,4582,4583],{"class":3170},"\"\"",[3023,4585,3331],{"class":3154},[3023,4587,4588],{"class":3210},"Всі категорії",[3023,4590,3337],{"class":3154},[3023,4592,4575],{"class":3158},[3023,4594,3199],{"class":3154},[3023,4596,4597,4599,4601,4603,4605,4608,4610,4613,4615,4617],{"class":3025,"line":3038},[3023,4598,4232],{"class":3154},[3023,4600,4575],{"class":3158},[3023,4602,4578],{"class":3162},[3023,4604,3167],{"class":3210},[3023,4606,4607],{"class":3170},"\"electronics\"",[3023,4609,3331],{"class":3154},[3023,4611,4612],{"class":3210},"Електроніка",[3023,4614,3337],{"class":3154},[3023,4616,4575],{"class":3158},[3023,4618,3199],{"class":3154},[3023,4620,4621,4623,4625,4627,4629,4632,4634,4637,4639,4641],{"class":3025,"line":3044},[3023,4622,4232],{"class":3154},[3023,4624,4575],{"class":3158},[3023,4626,4578],{"class":3162},[3023,4628,3167],{"class":3210},[3023,4630,4631],{"class":3170},"\"clothing\"",[3023,4633,3331],{"class":3154},[3023,4635,4636],{"class":3210},"Одяг",[3023,4638,3337],{"class":3154},[3023,4640,4575],{"class":3158},[3023,4642,3199],{"class":3154},[3023,4644,4645,4647,4649],{"class":3025,"line":3050},[3023,4646,3337],{"class":3154},[3023,4648,4551],{"class":3158},[3023,4650,3199],{"class":3154},[3023,4652,4653],{"class":3025,"line":3056},[3023,4654,3347],{"emptyLinePlaceholder":3346},[3023,4656,4657,4659,4661,4663,4665,4668,4670,4672,4675],{"class":3025,"line":3062},[3023,4658,3155],{"class":3154},[3023,4660,4551],{"class":3158},[3023,4662,3537],{"class":3162},[3023,4664,3167],{"class":3210},[3023,4666,4667],{"class":3170},"\"sort-filter\"",[3023,4669,4561],{"class":3162},[3023,4671,3167],{"class":3210},[3023,4673,4674],{"class":3170},"\"sort\"",[3023,4676,3199],{"class":3154},[3023,4678,4679,4681,4683,4685,4687,4690,4692,4695,4697,4699],{"class":3025,"line":3068},[3023,4680,4232],{"class":3154},[3023,4682,4575],{"class":3158},[3023,4684,4578],{"class":3162},[3023,4686,3167],{"class":3210},[3023,4688,4689],{"class":3170},"\"price-asc\"",[3023,4691,3331],{"class":3154},[3023,4693,4694],{"class":3210},"Ціна ↑",[3023,4696,3337],{"class":3154},[3023,4698,4575],{"class":3158},[3023,4700,3199],{"class":3154},[3023,4702,4703,4705,4707,4709,4711,4714,4716,4719,4721,4723],{"class":3025,"line":3074},[3023,4704,4232],{"class":3154},[3023,4706,4575],{"class":3158},[3023,4708,4578],{"class":3162},[3023,4710,3167],{"class":3210},[3023,4712,4713],{"class":3170},"\"price-desc\"",[3023,4715,3331],{"class":3154},[3023,4717,4718],{"class":3210},"Ціна ↓",[3023,4720,3337],{"class":3154},[3023,4722,4575],{"class":3158},[3023,4724,3199],{"class":3154},[3023,4726,4727,4729,4731],{"class":3025,"line":3080},[3023,4728,3337],{"class":3154},[3023,4730,4551],{"class":3158},[3023,4732,3199],{"class":3154},[3023,4734,4735],{"class":3025,"line":3086},[3023,4736,3347],{"emptyLinePlaceholder":3346},[3023,4738,4739],{"class":3025,"line":3092},[3023,4740,4741],{"class":3210},"@* При кліку — GET /products?category=electronics&sort=price-asc *@\n",[3023,4743,4744,4746,4748,4750,4752],{"class":3025,"line":3098},[3023,4745,3155],{"class":3154},[3023,4747,3320],{"class":3158},[3023,4749,3323],{"class":3162},[3023,4751,3167],{"class":3210},[3023,4753,3498],{"class":3170},[3023,4755,4756,4758,4760],{"class":3025,"line":3104},[3023,4757,3503],{"class":3162},[3023,4759,3167],{"class":3210},[3023,4761,4762],{"class":3170},"\"#product-grid\"\n",[3023,4764,4765,4768,4770,4773],{"class":3025,"line":3110},[3023,4766,4767],{"class":3162},"        hx-include",[3023,4769,3167],{"class":3210},[3023,4771,4772],{"class":3170},"\"#category-filter, #sort-filter\"",[3023,4774,3199],{"class":3154},[3023,4776,4777],{"class":3025,"line":3116},[3023,4778,4779],{"class":3210},"    Застосувати\n",[3023,4781,4782,4784,4786],{"class":3025,"line":4264},[3023,4783,3337],{"class":3154},[3023,4785,3320],{"class":3158},[3023,4787,3199],{"class":3154},[2959,4789,4790,4792,4793,4796],{},[2963,4791,4524],{}," приймає будь-який CSS-селектор — можна вказати кілька через кому, або ",[2963,4794,4795],{},"closest form"," щоб включити всю найближчу форму.",[3001,4798],{},[3273,4800,4802,4805],{"id":4801},"hx-indicator-індикатор-стану-завантаження",[2963,4803,4804],{},"hx-indicator"," — індикатор стану завантаження",[2959,4807,4808,4809,4812,4813,4815],{},"Поки HTMX-запит виконується, бібліотека автоматично додає CSS-клас ",[2963,4810,4811],{},"htmx-request"," до елемента-ініціатора. ",[2963,4814,4804],{}," дозволяє вказати окремий елемент (наприклад, спіннер), який HTMX зробить видимим на час запиту, а після — знову приховає.",[3015,4817,4819],{"className":3144,"code":4818,"language":3147,"meta":3019,"style":3019},"\u003Cbutton hx-get=\"/slow-report\"\n        hx-target=\"#report-area\"\n        hx-indicator=\"#report-spinner\">\n    Згенерувати звіт\n\u003C/button>\n\n\u003Cspan id=\"report-spinner\" class=\"htmx-indicator\">\n    \u003Cspan class=\"spinner-border spinner-border-sm\">\u003C/span>\n    Обробка...\n\u003C/span>\n",[2963,4820,4821,4834,4843,4855,4860,4868,4872,4894,4913,4918],{"__ignoreMap":3019},[3023,4822,4823,4825,4827,4829,4831],{"class":3025,"line":3026},[3023,4824,3155],{"class":3154},[3023,4826,3320],{"class":3158},[3023,4828,3323],{"class":3162},[3023,4830,3167],{"class":3210},[3023,4832,4833],{"class":3170},"\"/slow-report\"\n",[3023,4835,4836,4838,4840],{"class":3025,"line":3032},[3023,4837,3503],{"class":3162},[3023,4839,3167],{"class":3210},[3023,4841,4842],{"class":3170},"\"#report-area\"\n",[3023,4844,4845,4848,4850,4853],{"class":3025,"line":3038},[3023,4846,4847],{"class":3162},"        hx-indicator",[3023,4849,3167],{"class":3210},[3023,4851,4852],{"class":3170},"\"#report-spinner\"",[3023,4854,3199],{"class":3154},[3023,4856,4857],{"class":3025,"line":3044},[3023,4858,4859],{"class":3210},"    Згенерувати звіт\n",[3023,4861,4862,4864,4866],{"class":3025,"line":3050},[3023,4863,3337],{"class":3154},[3023,4865,3320],{"class":3158},[3023,4867,3199],{"class":3154},[3023,4869,4870],{"class":3025,"line":3056},[3023,4871,3347],{"emptyLinePlaceholder":3346},[3023,4873,4874,4876,4878,4880,4882,4885,4887,4889,4892],{"class":3025,"line":3062},[3023,4875,3155],{"class":3154},[3023,4877,3023],{"class":3158},[3023,4879,3537],{"class":3162},[3023,4881,3167],{"class":3210},[3023,4883,4884],{"class":3170},"\"report-spinner\"",[3023,4886,4237],{"class":3162},[3023,4888,3167],{"class":3210},[3023,4890,4891],{"class":3170},"\"htmx-indicator\"",[3023,4893,3199],{"class":3154},[3023,4895,4896,4898,4900,4902,4904,4907,4909,4911],{"class":3025,"line":3068},[3023,4897,4232],{"class":3154},[3023,4899,3023],{"class":3158},[3023,4901,4237],{"class":3162},[3023,4903,3167],{"class":3210},[3023,4905,4906],{"class":3170},"\"spinner-border spinner-border-sm\"",[3023,4908,3194],{"class":3154},[3023,4910,3023],{"class":3158},[3023,4912,3199],{"class":3154},[3023,4914,4915],{"class":3025,"line":3074},[3023,4916,4917],{"class":3210},"    Обробка...\n",[3023,4919,4920,4922,4924],{"class":3025,"line":3080},[3023,4921,3337],{"class":3154},[3023,4923,3023],{"class":3158},[3023,4925,3199],{"class":3154},[3015,4927,4931],{"className":4928,"code":4929,"language":4930,"meta":3019,"style":3019},"language-css shiki shiki-themes light-plus dark-plus dark-plus","/* htmx-indicator за замовчуванням прихований */\n.htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; }\n/* HTMX додає htmx-request до ініціатора — і показує індикатор */\n.htmx-request .htmx-indicator,\n.htmx-request.htmx-indicator { opacity: 1; }\n\n/* Опціонально: заблокувати повторний клік під час запиту */\n.htmx-request { pointer-events: none; opacity: 0.7; }\n","css",[2963,4932,4933,4939,4976,4981,4992,5008,5012,5017],{"__ignoreMap":3019},[3023,4934,4935],{"class":3025,"line":3026},[3023,4936,4938],{"class":4937},"spJ8K","/* htmx-indicator за замовчуванням прихований */\n",[3023,4940,4941,4945,4948,4951,4953,4957,4960,4963,4966,4969,4973],{"class":3025,"line":3032},[3023,4942,4944],{"class":4943},"sqdDX",".htmx-indicator",[3023,4946,4947],{"class":3210}," { ",[3023,4949,4950],{"class":3162},"opacity",[3023,4952,4494],{"class":3210},[3023,4954,4956],{"class":4955},"sJj4R","0",[3023,4958,4959],{"class":3210},"; ",[3023,4961,4962],{"class":3162},"transition",[3023,4964,4965],{"class":3210},": opacity ",[3023,4967,4968],{"class":4955},"200ms",[3023,4970,4972],{"class":4971},"sDUd3"," ease-in",[3023,4974,4975],{"class":3210},"; }\n",[3023,4977,4978],{"class":3025,"line":3038},[3023,4979,4980],{"class":4937},"/* HTMX додає htmx-request до ініціатора — і показує індикатор */\n",[3023,4982,4983,4986,4989],{"class":3025,"line":3044},[3023,4984,4985],{"class":4943},".htmx-request",[3023,4987,4988],{"class":4943}," .htmx-indicator",[3023,4990,4991],{"class":3210},",\n",[3023,4993,4994,4997,4999,5001,5003,5006],{"class":3025,"line":3050},[3023,4995,4996],{"class":4943},".htmx-request.htmx-indicator",[3023,4998,4947],{"class":3210},[3023,5000,4950],{"class":3162},[3023,5002,4494],{"class":3210},[3023,5004,5005],{"class":4955},"1",[3023,5007,4975],{"class":3210},[3023,5009,5010],{"class":3025,"line":3056},[3023,5011,3347],{"emptyLinePlaceholder":3346},[3023,5013,5014],{"class":3025,"line":3062},[3023,5015,5016],{"class":4937},"/* Опціонально: заблокувати повторний клік під час запиту */\n",[3023,5018,5019,5021,5023,5026,5028,5030,5032,5034,5036,5039],{"class":3025,"line":3068},[3023,5020,4985],{"class":4943},[3023,5022,4947],{"class":3210},[3023,5024,5025],{"class":3162},"pointer-events",[3023,5027,4494],{"class":3210},[3023,5029,3986],{"class":4971},[3023,5031,4959],{"class":3210},[3023,5033,4950],{"class":3162},[3023,5035,4494],{"class":3210},[3023,5037,5038],{"class":4955},"0.7",[3023,5040,4975],{"class":3210},[3001,5042],{},[3273,5044,5046,5049],{"id":5045},"hx-push-url-оновлювати-url-у-браузері",[2963,5047,5048],{},"hx-push-url"," — оновлювати URL у браузері",[2959,5051,5052,5053,5055],{},"AJAX-запити не змінюють URL у адресному рядку браузера — що ламає кнопку «Назад» і унеможливлює закладинки. ",[2963,5054,5048],{}," вирішує цю проблему: він додає запис до History API, так само як це робить навігація по посиланнях.",[3015,5057,5059],{"className":3144,"code":5058,"language":3147,"meta":3019,"style":3019},"@* При кліку на статтю URL стає /articles/42 *@\n\u003Ca hx-get=\"/articles/42\"\n   hx-target=\"#content\"\n   hx-push-url=\"/articles/42\">\n    Прочитати статтю\n\u003C/a>\n",[2963,5060,5061,5066,5079,5089,5101,5106],{"__ignoreMap":3019},[3023,5062,5063],{"class":3025,"line":3026},[3023,5064,5065],{"class":3210},"@* При кліку на статтю URL стає /articles/42 *@\n",[3023,5067,5068,5070,5072,5074,5076],{"class":3025,"line":3032},[3023,5069,3155],{"class":3154},[3023,5071,3255],{"class":3158},[3023,5073,3323],{"class":3162},[3023,5075,3167],{"class":3210},[3023,5077,5078],{"class":3170},"\"/articles/42\"\n",[3023,5080,5081,5084,5086],{"class":3025,"line":3038},[3023,5082,5083],{"class":3162},"   hx-target",[3023,5085,3167],{"class":3210},[3023,5087,5088],{"class":3170},"\"#content\"\n",[3023,5090,5091,5094,5096,5099],{"class":3025,"line":3044},[3023,5092,5093],{"class":3162},"   hx-push-url",[3023,5095,3167],{"class":3210},[3023,5097,5098],{"class":3170},"\"/articles/42\"",[3023,5100,3199],{"class":3154},[3023,5102,5103],{"class":3025,"line":3050},[3023,5104,5105],{"class":3210},"    Прочитати статтю\n",[3023,5107,5108,5110,5112],{"class":3025,"line":3056},[3023,5109,3337],{"class":3154},[3023,5111,3255],{"class":3158},[3023,5113,3199],{"class":3154},[2959,5115,5116,5117,5120],{},"Тепер кнопка «Назад» у браузері коректно повертає до попередньої URL. HTMX перехоплює ",[2963,5118,5119],{},"popstate"," і автоматично робить новий запит, щоб відновити стан сторінки.",[3001,5122],{},[3273,5124,5126,5129],{"id":5125},"hx-boost-spa-навігація-без-коду",[2963,5127,5128],{},"hx-boost"," — SPA-навігація без коду",[2959,5131,5132,5135,5136,5139,5140,5143,5144,5147],{},[2963,5133,5134],{},"hx-boost=\"true\""," — це «прискорена» навігація: HTMX перехоплює всі звичайні ",[2963,5137,5138],{},"\u003Ca href>"," та ",[2963,5141,5142],{},"\u003Cform>"," усередині елемента-контейнера і перетворює їх на HTMX-запити автоматично. Замість повного перезавантаження сторінки він робить AJAX, замінює ",[2963,5145,5146],{},"\u003Cbody>"," і оновлює URL через History API.",[3015,5149,5151],{"className":3144,"code":5150,"language":3147,"meta":3019,"style":3019},"@* Всі посилання у навбарі стають HTMX-запитами *@\n\u003Cnav hx-boost=\"true\">\n    \u003Ca href=\"/products\">Товари\u003C/a>    @* → hx-get=\"/products\" hx-target=\"body\" *@\n    \u003Ca href=\"/about\">Про нас\u003C/a>\n    \u003Ca href=\"/contact\">Контакти\u003C/a>\n\u003C/nav>\n",[2963,5152,5153,5158,5175,5202,5226,5250],{"__ignoreMap":3019},[3023,5154,5155],{"class":3025,"line":3026},[3023,5156,5157],{"class":3210},"@* Всі посилання у навбарі стають HTMX-запитами *@\n",[3023,5159,5160,5162,5165,5168,5170,5173],{"class":3025,"line":3032},[3023,5161,3155],{"class":3154},[3023,5163,5164],{"class":3158},"nav",[3023,5166,5167],{"class":3162}," hx-boost",[3023,5169,3167],{"class":3210},[3023,5171,5172],{"class":3170},"\"true\"",[3023,5174,3199],{"class":3154},[3023,5176,5177,5179,5181,5184,5186,5188,5190,5193,5195,5197,5199],{"class":3025,"line":3038},[3023,5178,4232],{"class":3154},[3023,5180,3255],{"class":3158},[3023,5182,5183],{"class":3162}," href",[3023,5185,3167],{"class":3210},[3023,5187,3328],{"class":3170},[3023,5189,3331],{"class":3154},[3023,5191,5192],{"class":3210},"Товари",[3023,5194,3337],{"class":3154},[3023,5196,3255],{"class":3158},[3023,5198,3331],{"class":3154},[3023,5200,5201],{"class":3210},"    @* → hx-get=\"/products\" hx-target=\"body\" *@\n",[3023,5203,5204,5206,5208,5210,5212,5215,5217,5220,5222,5224],{"class":3025,"line":3044},[3023,5205,4232],{"class":3154},[3023,5207,3255],{"class":3158},[3023,5209,5183],{"class":3162},[3023,5211,3167],{"class":3210},[3023,5213,5214],{"class":3170},"\"/about\"",[3023,5216,3331],{"class":3154},[3023,5218,5219],{"class":3210},"Про нас",[3023,5221,3337],{"class":3154},[3023,5223,3255],{"class":3158},[3023,5225,3199],{"class":3154},[3023,5227,5228,5230,5232,5234,5236,5239,5241,5244,5246,5248],{"class":3025,"line":3050},[3023,5229,4232],{"class":3154},[3023,5231,3255],{"class":3158},[3023,5233,5183],{"class":3162},[3023,5235,3167],{"class":3210},[3023,5237,5238],{"class":3170},"\"/contact\"",[3023,5240,3331],{"class":3154},[3023,5242,5243],{"class":3210},"Контакти",[3023,5245,3337],{"class":3154},[3023,5247,3255],{"class":3158},[3023,5249,3199],{"class":3154},[3023,5251,5252,5254,5256],{"class":3025,"line":3056},[3023,5253,3337],{"class":3154},[3023,5255,5164],{"class":3158},[3023,5257,3199],{"class":3154},[2959,5259,5260,5261,5263,5264,5267,5268,3265],{},"Ефект — SPA-подібна навігація (без перемиготіння сторінки) без жодного рядку JavaScript. ",[2963,5262,5128],{}," ідеально підходить для звичайних MVC-застосунків, де кожна сторінка рендериться сервером: ви отримуєте плавну навігацію безкоштовно, просто додавши один атрибут до ",[2963,5265,5266],{},"\u003Cnav>"," або ",[2963,5269,5146],{},[3001,5271],{},[3004,5273,5275],{"id":5274},"out-of-band-swaps-оновлення-кількох-елементів-з-однієї-відповіді","Out-of-Band Swaps: оновлення кількох елементів з однієї відповіді",[2959,5277,5278,5279,5281],{},"Стандартна HTMX-взаємодія має просту модель: один запит — одна відповідь — одна вставка в один ",[2963,5280,3456],{},". Але реальні інтерфейси часто вимагають більшого: одна дія змінює одразу кілька незалежних частин сторінки.",[2959,5283,5284],{},"Розглянемо типовий приклад: кнопка «Додати до кошика». Після натискання треба одночасно оновити:",[5286,5287,5288,5295,5300],"ol",{},[3949,5289,5290,5291,5294],{},"Лічильник товарів у кошику (навбар, ",[2963,5292,5293],{},"\u003Cspan id=\"cart-count\">",")",[3949,5296,5297,5298,5294],{},"Тіло відповіді — підтвердження додавання (там де стоїть ",[2963,5299,3456],{},[3949,5301,5302],{},"Toast-сповіщення у правому куті екрана",[2959,5304,5305,5306,5309,5310,5313,5314,5316,5317,3265],{},"Три незалежні елементи — і жодного JavaScript. Саме для цього існують ",[2981,5307,5308],{},"Out-of-Band Swaps"," (OOB-вставки): сервер повертає один HTML-документ, у якому позначає частини з атрибутом ",[2963,5311,5312],{},"hx-swap-oob",". HTMX знаходить елементи за їхнім ",[2963,5315,3668],{}," та оновлює їх незалежно від основного ",[2963,5318,3456],{},[3015,5320,5322],{"className":3144,"code":5321,"language":3147,"meta":3019,"style":3019},"@* Відповідь сервера на POST /cart/add — один HTML-документ із трьома фрагментами *@\n\n@* 1. Основний фрагмент — вставляється у hx-target ініціатора *@\n\u003Cdiv class=\"alert alert-success\">\n    Товар «Apple MacBook Pro» додано до кошика!\n\u003C/div>\n\n@* 2. OOB-фрагмент: знайти #cart-count у DOM і замінити його вміст *@\n\u003Cspan id=\"cart-count\" hx-swap-oob=\"innerHTML\">5\u003C/span>\n\n@* 3. OOB-фрагмент: оновити toast-контейнер *@\n\u003Cdiv id=\"toast-container\" hx-swap-oob=\"innerHTML\">\n    \u003Cdiv class=\"toast show\">Кошик оновлено!\u003C/div>\n\u003C/div>\n",[2963,5323,5324,5329,5333,5338,5353,5358,5366,5370,5375,5406,5410,5415,5436,5460],{"__ignoreMap":3019},[3023,5325,5326],{"class":3025,"line":3026},[3023,5327,5328],{"class":3210},"@* Відповідь сервера на POST /cart/add — один HTML-документ із трьома фрагментами *@\n",[3023,5330,5331],{"class":3025,"line":3032},[3023,5332,3347],{"emptyLinePlaceholder":3346},[3023,5334,5335],{"class":3025,"line":3038},[3023,5336,5337],{"class":3210},"@* 1. Основний фрагмент — вставляється у hx-target ініціатора *@\n",[3023,5339,5340,5342,5344,5346,5348,5351],{"class":3025,"line":3044},[3023,5341,3155],{"class":3154},[3023,5343,3534],{"class":3158},[3023,5345,4237],{"class":3162},[3023,5347,3167],{"class":3210},[3023,5349,5350],{"class":3170},"\"alert alert-success\"",[3023,5352,3199],{"class":3154},[3023,5354,5355],{"class":3025,"line":3050},[3023,5356,5357],{"class":3210},"    Товар «Apple MacBook Pro» додано до кошика!\n",[3023,5359,5360,5362,5364],{"class":3025,"line":3056},[3023,5361,3337],{"class":3154},[3023,5363,3534],{"class":3158},[3023,5365,3199],{"class":3154},[3023,5367,5368],{"class":3025,"line":3062},[3023,5369,3347],{"emptyLinePlaceholder":3346},[3023,5371,5372],{"class":3025,"line":3068},[3023,5373,5374],{"class":3210},"@* 2. OOB-фрагмент: знайти #cart-count у DOM і замінити його вміст *@\n",[3023,5376,5377,5379,5381,5383,5385,5388,5391,5393,5395,5397,5400,5402,5404],{"class":3025,"line":3074},[3023,5378,3155],{"class":3154},[3023,5380,3023],{"class":3158},[3023,5382,3537],{"class":3162},[3023,5384,3167],{"class":3210},[3023,5386,5387],{"class":3170},"\"cart-count\"",[3023,5389,5390],{"class":3162}," hx-swap-oob",[3023,5392,3167],{"class":3210},[3023,5394,3761],{"class":3170},[3023,5396,3331],{"class":3154},[3023,5398,5399],{"class":3210},"5",[3023,5401,3337],{"class":3154},[3023,5403,3023],{"class":3158},[3023,5405,3199],{"class":3154},[3023,5407,5408],{"class":3025,"line":3080},[3023,5409,3347],{"emptyLinePlaceholder":3346},[3023,5411,5412],{"class":3025,"line":3086},[3023,5413,5414],{"class":3210},"@* 3. OOB-фрагмент: оновити toast-контейнер *@\n",[3023,5416,5417,5419,5421,5423,5425,5428,5430,5432,5434],{"class":3025,"line":3092},[3023,5418,3155],{"class":3154},[3023,5420,3534],{"class":3158},[3023,5422,3537],{"class":3162},[3023,5424,3167],{"class":3210},[3023,5426,5427],{"class":3170},"\"toast-container\"",[3023,5429,5390],{"class":3162},[3023,5431,3167],{"class":3210},[3023,5433,3761],{"class":3170},[3023,5435,3199],{"class":3154},[3023,5437,5438,5440,5442,5444,5446,5449,5451,5454,5456,5458],{"class":3025,"line":3098},[3023,5439,4232],{"class":3154},[3023,5441,3534],{"class":3158},[3023,5443,4237],{"class":3162},[3023,5445,3167],{"class":3210},[3023,5447,5448],{"class":3170},"\"toast show\"",[3023,5450,3331],{"class":3154},[3023,5452,5453],{"class":3210},"Кошик оновлено!",[3023,5455,3337],{"class":3154},[3023,5457,3534],{"class":3158},[3023,5459,3199],{"class":3154},[3023,5461,5462,5464,5466],{"class":3025,"line":3104},[3023,5463,3337],{"class":3154},[3023,5465,3534],{"class":3158},[3023,5467,3199],{"class":3154},[2959,5469,5470,5471,5473,5474,5476,5477,5479,5480,5482],{},"Механізм роботи простий: HTMX парсить усю відповідь, шукає елементи з ",[2963,5472,5312],{},", знаходить відповідні елементи у поточному DOM за їхнім ",[2963,5475,3668],{}," і замінює їх вміст. Основний фрагмент (без ",[2963,5478,5312],{},") потрапляє у ",[2963,5481,3456],{}," як зазвичай.",[2959,5484,5485,5487,5488,4494,5490,5493,5494,5496,5497,3279,5499,5501],{},[2963,5486,5312],{}," приймає ті самі значення, що й ",[2963,5489,3680],{},[2963,5491,5492],{},"true"," (означає ",[2963,5495,3780],{},"), ",[2963,5498,3703],{},[2963,5500,3827],{}," тощо. Це надає точний контроль над способом вставки кожного OOB-фрагмента.",[5503,5504,5505,5506,5511,5512,5514],"warning",{},"OOB-елементи ",[2981,5507,5508,5509],{},"обов'язково мають мати ",[2963,5510,3668],{},", за яким HTMX знаходить їх у DOM. Без ",[2963,5513,3668],{}," HTMX не знає, куди вставити OOB-фрагмент, і проігнорує його.",[3001,5516],{},[3004,5518,5520],{"id":5519},"server-sent-events-sse-real-time-оновлення-з-сервера","Server-Sent Events (SSE): real-time оновлення з сервера",[2959,5522,5523,5524,5527,5528,5531,5532,5535],{},"Всі розглянуті атрибути є ",[2981,5525,5526],{},"pull","-моделлю: клієнт ініціює запит, сервер відповідає. Але що, якщо потрібна ",[2981,5529,5530],{},"push","-модель — сервер сам надсилає дані без запиту від клієнта? Для цього HTMX підтримує ",[2981,5533,5534],{},"Server-Sent Events"," (SSE) — стандарт браузера для однонаправленого потоку подій від сервера до клієнта.",[2959,5537,5538],{},"SSE ідеально підходить для: сповіщень у реальному часі, лічильників онлайн-користувачів, прогресу тривалих задач, live-оновлення стрічки подій.",[2959,5540,5541],{},"Для підключення SSE потрібно окремо завантажити офіційне розширення:",[3015,5543,5545],{"className":3144,"code":5544,"language":3147,"meta":3019,"style":3019},"\u003Cscript src=\"https://unpkg.com/htmx-ext-sse@2.2.2/sse.js\">\u003C/script>\n",[2963,5546,5547],{"__ignoreMap":3019},[3023,5548,5549,5551,5553,5555,5557,5560,5562,5564],{"class":3025,"line":3026},[3023,5550,3155],{"class":3154},[3023,5552,3159],{"class":3158},[3023,5554,3163],{"class":3162},[3023,5556,3167],{"class":3166},[3023,5558,5559],{"class":3170},"\"https://unpkg.com/htmx-ext-sse@2.2.2/sse.js\"",[3023,5561,3194],{"class":3154},[3023,5563,3159],{"class":3158},[3023,5565,3199],{"class":3154},[2959,5567,5568],{},"Синтаксис у HTML:",[3015,5570,5572],{"className":3144,"code":5571,"language":3147,"meta":3019,"style":3019},"@* Підключитися до SSE-потоку /notifications/stream *@\n\u003Cdiv hx-ext=\"sse\" sse-connect=\"/notifications/stream\">\n\n    @* Слухати подію з іменем \"new-message\" і вставляти у #messages *@\n    \u003Cdiv sse-swap=\"new-message\"\n         hx-target=\"#messages\"\n         hx-swap=\"beforeend\">\n    \u003C/div>\n\n\u003C/div>\n\n\u003Cul id=\"messages\">\n    @* Нові повідомлення будуть дописуватися сюди в реальному часі *@\n\u003C/ul>\n",[2963,5573,5574,5579,5603,5607,5612,5626,5636,5647,5656,5660,5668,5672,5687,5692],{"__ignoreMap":3019},[3023,5575,5576],{"class":3025,"line":3026},[3023,5577,5578],{"class":3210},"@* Підключитися до SSE-потоку /notifications/stream *@\n",[3023,5580,5581,5583,5585,5588,5590,5593,5596,5598,5601],{"class":3025,"line":3032},[3023,5582,3155],{"class":3154},[3023,5584,3534],{"class":3158},[3023,5586,5587],{"class":3162}," hx-ext",[3023,5589,3167],{"class":3210},[3023,5591,5592],{"class":3170},"\"sse\"",[3023,5594,5595],{"class":3162}," sse-connect",[3023,5597,3167],{"class":3210},[3023,5599,5600],{"class":3170},"\"/notifications/stream\"",[3023,5602,3199],{"class":3154},[3023,5604,5605],{"class":3025,"line":3038},[3023,5606,3347],{"emptyLinePlaceholder":3346},[3023,5608,5609],{"class":3025,"line":3044},[3023,5610,5611],{"class":3210},"    @* Слухати подію з іменем \"new-message\" і вставляти у #messages *@\n",[3023,5613,5614,5616,5618,5621,5623],{"class":3025,"line":3050},[3023,5615,4232],{"class":3154},[3023,5617,3534],{"class":3158},[3023,5619,5620],{"class":3162}," sse-swap",[3023,5622,3167],{"class":3210},[3023,5624,5625],{"class":3170},"\"new-message\"\n",[3023,5627,5628,5631,5633],{"class":3025,"line":3056},[3023,5629,5630],{"class":3162},"         hx-target",[3023,5632,3167],{"class":3210},[3023,5634,5635],{"class":3170},"\"#messages\"\n",[3023,5637,5638,5641,5643,5645],{"class":3025,"line":3062},[3023,5639,5640],{"class":3162},"         hx-swap",[3023,5642,3167],{"class":3210},[3023,5644,3869],{"class":3170},[3023,5646,3199],{"class":3154},[3023,5648,5649,5652,5654],{"class":3025,"line":3068},[3023,5650,5651],{"class":3154},"    \u003C/",[3023,5653,3534],{"class":3158},[3023,5655,3199],{"class":3154},[3023,5657,5658],{"class":3025,"line":3074},[3023,5659,3347],{"emptyLinePlaceholder":3346},[3023,5661,5662,5664,5666],{"class":3025,"line":3080},[3023,5663,3337],{"class":3154},[3023,5665,3534],{"class":3158},[3023,5667,3199],{"class":3154},[3023,5669,5670],{"class":3025,"line":3086},[3023,5671,3347],{"emptyLinePlaceholder":3346},[3023,5673,5674,5676,5678,5680,5682,5685],{"class":3025,"line":3092},[3023,5675,3155],{"class":3154},[3023,5677,3848],{"class":3158},[3023,5679,3537],{"class":3162},[3023,5681,3167],{"class":3210},[3023,5683,5684],{"class":3170},"\"messages\"",[3023,5686,3199],{"class":3154},[3023,5688,5689],{"class":3025,"line":3098},[3023,5690,5691],{"class":3210},"    @* Нові повідомлення будуть дописуватися сюди в реальному часі *@\n",[3023,5693,5694,5696,5698],{"class":3025,"line":3104},[3023,5695,3337],{"class":3154},[3023,5697,3848],{"class":3158},[3023,5699,3199],{"class":3154},[2959,5701,5702,5703,5706],{},"На стороні сервера ASP.NET Core SSE-endpoint надсилає події у стандартному форматі (",[2963,5704,5705],{},"event:\\ndata:\\n\\n","):",[3015,5708,5713],{"className":5709,"code":5710,"filename":5711,"language":5712,"meta":3019,"style":3019},"language-csharp shiki shiki-themes light-plus dark-plus dark-plus","[HttpGet(\"notifications/stream\")]\npublic async Task Stream(CancellationToken ct)\n{\n    Response.ContentType = \"text/event-stream\";\n    Response.Headers[\"Cache-Control\"] = \"no-cache\";\n    Response.Headers[\"X-Accel-Buffering\"] = \"no\"; // для nginx\n\n    while (!ct.IsCancellationRequested)\n    {\n        var html = $\"\u003Cli>{DateTime.Now:HH:mm:ss} — нова подія\u003C/li>\";\n        // Формат SSE: event-name, потім дані\n        await Response.WriteAsync($\"event: new-message\\ndata: {html}\\n\\n\", ct);\n        await Response.Body.FlushAsync(ct);\n\n        await Task.Delay(3000, ct); // нова подія кожні 3 секунди\n    }\n}\n","Controllers/NotificationsController.cs","csharp",[2963,5714,5715,5734,5762,5767,5786,5808,5831,5835,5854,5859,5906,5911,5955,5977,5981,6007,6012],{"__ignoreMap":3019},[3023,5716,5717,5720,5724,5727,5731],{"class":3025,"line":3026},[3023,5718,5719],{"class":3210},"[",[3023,5721,5723],{"class":5722},"sN1BT","HttpGet",[3023,5725,5726],{"class":3210},"(",[3023,5728,5730],{"class":5729},"sbdoH","\"notifications/stream\"",[3023,5732,5733],{"class":3210},")]\n",[3023,5735,5736,5740,5743,5746,5750,5752,5755,5759],{"class":3025,"line":3032},[3023,5737,5739],{"class":5738},"su1O8","public",[3023,5741,5742],{"class":5738}," async",[3023,5744,5745],{"class":5722}," Task",[3023,5747,5749],{"class":5748},"s8Opu"," Stream",[3023,5751,5726],{"class":3210},[3023,5753,5754],{"class":5722},"CancellationToken",[3023,5756,5758],{"class":5757},"siwwj"," ct",[3023,5760,5761],{"class":3210},")\n",[3023,5763,5764],{"class":3025,"line":3038},[3023,5765,5766],{"class":3210},"{\n",[3023,5768,5769,5772,5774,5777,5780,5783],{"class":3025,"line":3044},[3023,5770,5771],{"class":5757},"    Response",[3023,5773,3265],{"class":3210},[3023,5775,5776],{"class":5757},"ContentType",[3023,5778,5779],{"class":3210}," = ",[3023,5781,5782],{"class":5729},"\"text/event-stream\"",[3023,5784,5785],{"class":3210},";\n",[3023,5787,5788,5790,5792,5795,5797,5800,5803,5806],{"class":3025,"line":3050},[3023,5789,5771],{"class":5757},[3023,5791,3265],{"class":3210},[3023,5793,5794],{"class":5757},"Headers",[3023,5796,5719],{"class":3210},[3023,5798,5799],{"class":5729},"\"Cache-Control\"",[3023,5801,5802],{"class":3210},"] = ",[3023,5804,5805],{"class":5729},"\"no-cache\"",[3023,5807,5785],{"class":3210},[3023,5809,5810,5812,5814,5816,5818,5821,5823,5826,5828],{"class":3025,"line":3056},[3023,5811,5771],{"class":5757},[3023,5813,3265],{"class":3210},[3023,5815,5794],{"class":5757},[3023,5817,5719],{"class":3210},[3023,5819,5820],{"class":5729},"\"X-Accel-Buffering\"",[3023,5822,5802],{"class":3210},[3023,5824,5825],{"class":5729},"\"no\"",[3023,5827,4959],{"class":3210},[3023,5829,5830],{"class":4937},"// для nginx\n",[3023,5832,5833],{"class":3025,"line":3062},[3023,5834,3347],{"emptyLinePlaceholder":3346},[3023,5836,5837,5841,5844,5847,5849,5852],{"class":3025,"line":3068},[3023,5838,5840],{"class":5839},"sCDza","    while",[3023,5842,5843],{"class":3210}," (!",[3023,5845,5846],{"class":5757},"ct",[3023,5848,3265],{"class":3210},[3023,5850,5851],{"class":5757},"IsCancellationRequested",[3023,5853,5761],{"class":3210},[3023,5855,5856],{"class":3025,"line":3074},[3023,5857,5858],{"class":3210},"    {\n",[3023,5860,5861,5864,5867,5869,5872,5875,5878,5880,5883,5885,5888,5890,5893,5895,5898,5901,5904],{"class":3025,"line":3080},[3023,5862,5863],{"class":5738},"        var",[3023,5865,5866],{"class":5757}," html",[3023,5868,5779],{"class":3210},[3023,5870,5871],{"class":5729},"$\"\u003Cli>",[3023,5873,5874],{"class":3166},"{",[3023,5876,5877],{"class":5757},"DateTime",[3023,5879,3265],{"class":3166},[3023,5881,5882],{"class":5757},"Now",[3023,5884,3138],{"class":3210},[3023,5886,5887],{"class":5757},"HH",[3023,5889,3138],{"class":3210},[3023,5891,5892],{"class":5757},"mm",[3023,5894,3138],{"class":3210},[3023,5896,5897],{"class":5757},"ss",[3023,5899,5900],{"class":3166},"}",[3023,5902,5903],{"class":5729}," — нова подія\u003C/li>\"",[3023,5905,5785],{"class":3210},[3023,5907,5908],{"class":3025,"line":3086},[3023,5909,5910],{"class":4937},"        // Формат SSE: event-name, потім дані\n",[3023,5912,5913,5916,5919,5921,5924,5926,5929,5933,5936,5938,5940,5942,5945,5948,5950,5952],{"class":3025,"line":3092},[3023,5914,5915],{"class":5738},"        await",[3023,5917,5918],{"class":5757}," Response",[3023,5920,3265],{"class":3210},[3023,5922,5923],{"class":5748},"WriteAsync",[3023,5925,5726],{"class":3210},[3023,5927,5928],{"class":5729},"$\"event: new-message",[3023,5930,5932],{"class":5931},"sjcCO","\\n",[3023,5934,5935],{"class":5729},"data: ",[3023,5937,5874],{"class":3166},[3023,5939,3147],{"class":5757},[3023,5941,5900],{"class":3166},[3023,5943,5944],{"class":5931},"\\n\\n",[3023,5946,5947],{"class":5729},"\"",[3023,5949,3279],{"class":3210},[3023,5951,5846],{"class":5757},[3023,5953,5954],{"class":3210},");\n",[3023,5956,5957,5959,5961,5963,5966,5968,5971,5973,5975],{"class":3025,"line":3098},[3023,5958,5915],{"class":5738},[3023,5960,5918],{"class":5757},[3023,5962,3265],{"class":3210},[3023,5964,5965],{"class":5757},"Body",[3023,5967,3265],{"class":3210},[3023,5969,5970],{"class":5748},"FlushAsync",[3023,5972,5726],{"class":3210},[3023,5974,5846],{"class":5757},[3023,5976,5954],{"class":3210},[3023,5978,5979],{"class":3025,"line":3104},[3023,5980,3347],{"emptyLinePlaceholder":3346},[3023,5982,5983,5985,5987,5989,5992,5994,5997,5999,6001,6004],{"class":3025,"line":3110},[3023,5984,5915],{"class":5738},[3023,5986,5745],{"class":5757},[3023,5988,3265],{"class":3210},[3023,5990,5991],{"class":5748},"Delay",[3023,5993,5726],{"class":3210},[3023,5995,5996],{"class":4955},"3000",[3023,5998,3279],{"class":3210},[3023,6000,5846],{"class":5757},[3023,6002,6003],{"class":3210},"); ",[3023,6005,6006],{"class":4937},"// нова подія кожні 3 секунди\n",[3023,6008,6009],{"class":3025,"line":3116},[3023,6010,6011],{"class":3210},"    }\n",[3023,6013,6014],{"class":3025,"line":4264},[3023,6015,6016],{"class":3210},"}\n",[2959,6018,6019],{},"З'єднання підтримується браузером автоматично: якщо воно обривається — браузер перезапускає підключення через кілька секунд без будь-якого коду з вашого боку.",[3001,6021],{},[3004,6023,6025],{"id":6024},"htmx-vs-alpinejs-vs-react-коли-що-обрати","HTMX vs Alpine.js vs React: коли що обрати",[2959,6027,6028],{},"Важливо розуміти, що HTMX — не конкурент React чи Vue. Це інструменти для різних задач. Ухвалення правильного рішення залежить від характеру застосунку:",[3565,6030,6031,6046],{},[3568,6032,6033],{},[3571,6034,6035,6038,6040,6043],{},[3574,6036,6037],{},"Критерій",[3574,6039,2983],{},[3574,6041,6042],{},"Alpine.js",[3574,6044,6045],{},"React / Vue",[3581,6047,6048,6062,6076,6090,6104,6117,6130,6144,6158],{},[3571,6049,6050,6053,6056,6059],{},[3586,6051,6052],{},"Розмір бібліотеки",[3586,6054,6055],{},"~14kb",[3586,6057,6058],{},"~15kb",[3586,6060,6061],{},"45kb+",[3571,6063,6064,6067,6070,6073],{},[3586,6065,6066],{},"JavaScript, який пишете ви",[3586,6068,6069],{},"Мінімум",[3586,6071,6072],{},"Небагато",[3586,6074,6075],{},"Багато",[3571,6077,6078,6081,6084,6087],{},[3586,6079,6080],{},"Стан на клієнті",[3586,6082,6083],{},"Відсутній",[3586,6085,6086],{},"Локальний",[3586,6088,6089],{},"Складний",[3571,6091,6092,6095,6098,6101],{},[3586,6093,6094],{},"Рендеринг",[3586,6096,6097],{},"Завжди сервер",[3586,6099,6100],{},"Гібрид",[3586,6102,6103],{},"Переважно клієнт",[3571,6105,6106,6109,6112,6114],{},[3586,6107,6108],{},"SEO «з коробки»",[3586,6110,6111],{},"✅",[3586,6113,6111],{},[3586,6115,6116],{},"Потребує SSR",[3571,6118,6119,6122,6125,6128],{},[3586,6120,6121],{},"Складні SPA",[3586,6123,6124],{},"❌",[3586,6126,6127],{},"Частково",[3586,6129,6111],{},[3571,6131,6132,6135,6138,6141],{},[3586,6133,6134],{},"Real-time (WebSocket)",[3586,6136,6137],{},"Через ext",[3586,6139,6140],{},"Вручну",[3586,6142,6143],{},"Бібліотеки",[3571,6145,6146,6149,6152,6155],{},[3586,6147,6148],{},"Крива навчання",[3586,6150,6151],{},"Мінімальна",[3586,6153,6154],{},"Середня",[3586,6156,6157],{},"Висока",[3571,6159,6160,6163,6166,6169],{},[3586,6161,6162],{},"Ідеально для",[3586,6164,6165],{},"MVC, форми, таблиці",[3586,6167,6168],{},"Мікро-інтерактивність",[3586,6170,6171],{},"Повноцінний SPA",[2959,6173,6174],{},"Практичне правило: якщо вашому застосунку на MVC потрібні пошук з фільтрацією, live-таблиці, модальні форми, inline-редагування — HTMX є природним і мінімалістичним вибором. Якщо ж ви будуєте Figma, Google Sheets або складний дашборд із реактивним станом — React або Vue доцільніші.",[3001,6176],{},[3004,6178,6180],{"id":6179},"демо-живий-список-задач","Демо: живий список задач",[2959,6182,6183],{},"Побудуємо повністю функціональний список задач (Todo List) — без єдиного рядку власного JavaScript. Усі операції: додавання, позначення виконаним, видалення — через HTMX. Серверна сторона — ASP.NET Core MVC.",[6185,6186,6187,6191,6194,6260,6264,6683,6706,6710,6717,7024,7046,7050,7395,7405,7409,7685],"steps",{},[3273,6188,6190],{"id":6189},"крок-1-модель-даних","Крок 1: Модель даних",[2959,6192,6193],{},"Оскільки це демонстраційний приклад, зберігатимемо задачі у статичному списку в пам'яті. У реальному застосунку це була б база даних:",[3015,6195,6198],{"className":5709,"code":6196,"filename":6197,"language":5712,"meta":3019,"style":3019},"namespace HtmxDemo.Models;\n\n// record — незмінний тип даних, зручний для in-memory колекцій\npublic record TodoItem(int Id, string Text, bool IsCompleted);\n","Models/TodoItem.cs",[2963,6199,6200,6215,6219,6224],{"__ignoreMap":3019},[3023,6201,6202,6205,6208,6210,6213],{"class":3025,"line":3026},[3023,6203,6204],{"class":5738},"namespace",[3023,6206,6207],{"class":5722}," HtmxDemo",[3023,6209,3265],{"class":3210},[3023,6211,6212],{"class":5722},"Models",[3023,6214,5785],{"class":3210},[3023,6216,6217],{"class":3025,"line":3032},[3023,6218,3347],{"emptyLinePlaceholder":3346},[3023,6220,6221],{"class":3025,"line":3038},[3023,6222,6223],{"class":4937},"// record — незмінний тип даних, зручний для in-memory колекцій\n",[3023,6225,6226,6228,6231,6234,6236,6239,6242,6244,6247,6250,6252,6255,6258],{"class":3025,"line":3044},[3023,6227,5739],{"class":5738},[3023,6229,6230],{"class":5738}," record",[3023,6232,6233],{"class":5722}," TodoItem",[3023,6235,5726],{"class":3210},[3023,6237,6238],{"class":5738},"int",[3023,6240,6241],{"class":5757}," Id",[3023,6243,3279],{"class":3210},[3023,6245,6246],{"class":5738},"string",[3023,6248,6249],{"class":5757}," Text",[3023,6251,3279],{"class":3210},[3023,6253,6254],{"class":5738},"bool",[3023,6256,6257],{"class":5757}," IsCompleted",[3023,6259,5954],{"class":3210},[3273,6261,6263],{"id":6262},"крок-2-controller-читання-та-створення","Крок 2: Controller — читання та створення",[3015,6265,6268],{"className":5709,"code":6266,"filename":6267,"language":5712,"meta":3019,"style":3019},"using HtmxDemo.Models;\nusing Microsoft.AspNetCore.Mvc;\n\nnamespace HtmxDemo.Controllers;\n\npublic class TodoController : Controller\n{\n    // Статичний список — спільний для всіх запитів у межах процесу\n    private static readonly List\u003CTodoItem> _todos =\n    [\n        new(1, \"Вивчити HTMX-атрибути\", false),\n        new(2, \"Побудувати live-search\", false),\n        new(3, \"Зробити каву\", true),\n    ];\n    private static int _nextId = 4;\n\n    // GET /todo → повна сторінка з _Layout\n    public IActionResult Index() => View(_todos.AsReadOnly());\n\n    // POST /todo/create?text=Нова+задача\n    // Повертає лише Partial View нового рядка — HTMX вставляє його у список\n    [HttpPost]\n    public IActionResult Create(string text)\n    {\n        if (string.IsNullOrWhiteSpace(text))\n            return BadRequest();\n\n        var item = new TodoItem(_nextId++, text.Trim(), false);\n        _todos.Add(item);\n\n        // Повертаємо HTML лише одного рядка — HTMX вставить через hx-swap=\"beforeend\"\n        return PartialView(\"_TodoItem\", item);\n    }\n}\n","Controllers/TodoController.cs",[2963,6269,6270,6283,6302,6306,6319,6323,6338,6342,6347,6375,6380,6402,6422,6442,6447,6466,6470,6475,6504,6508,6513,6518,6529,6547,6551,6574,6585,6589,6625,6642,6647,6653,6673,6678],{"__ignoreMap":3019},[3023,6271,6272,6275,6277,6279,6281],{"class":3025,"line":3026},[3023,6273,6274],{"class":5839},"using",[3023,6276,6207],{"class":5722},[3023,6278,3265],{"class":3210},[3023,6280,6212],{"class":5722},[3023,6282,5785],{"class":3210},[3023,6284,6285,6287,6290,6292,6295,6297,6300],{"class":3025,"line":3032},[3023,6286,6274],{"class":5839},[3023,6288,6289],{"class":5722}," Microsoft",[3023,6291,3265],{"class":3210},[3023,6293,6294],{"class":5722},"AspNetCore",[3023,6296,3265],{"class":3210},[3023,6298,6299],{"class":5722},"Mvc",[3023,6301,5785],{"class":3210},[3023,6303,6304],{"class":3025,"line":3038},[3023,6305,3347],{"emptyLinePlaceholder":3346},[3023,6307,6308,6310,6312,6314,6317],{"class":3025,"line":3044},[3023,6309,6204],{"class":5738},[3023,6311,6207],{"class":5722},[3023,6313,3265],{"class":3210},[3023,6315,6316],{"class":5722},"Controllers",[3023,6318,5785],{"class":3210},[3023,6320,6321],{"class":3025,"line":3050},[3023,6322,3347],{"emptyLinePlaceholder":3346},[3023,6324,6325,6327,6329,6332,6335],{"class":3025,"line":3056},[3023,6326,5739],{"class":5738},[3023,6328,4237],{"class":5738},[3023,6330,6331],{"class":5722}," TodoController",[3023,6333,6334],{"class":3210}," : ",[3023,6336,6337],{"class":5722},"Controller\n",[3023,6339,6340],{"class":3025,"line":3062},[3023,6341,5766],{"class":3210},[3023,6343,6344],{"class":3025,"line":3068},[3023,6345,6346],{"class":4937},"    // Статичний список — спільний для всіх запитів у межах процесу\n",[3023,6348,6349,6352,6355,6358,6361,6363,6366,6369,6372],{"class":3025,"line":3074},[3023,6350,6351],{"class":5738},"    private",[3023,6353,6354],{"class":5738}," static",[3023,6356,6357],{"class":5738}," readonly",[3023,6359,6360],{"class":5722}," List",[3023,6362,3155],{"class":3210},[3023,6364,6365],{"class":5722},"TodoItem",[3023,6367,6368],{"class":3210},"> ",[3023,6370,6371],{"class":5757},"_todos",[3023,6373,6374],{"class":3210}," =\n",[3023,6376,6377],{"class":3025,"line":3080},[3023,6378,6379],{"class":3210},"    [\n",[3023,6381,6382,6385,6387,6389,6391,6394,6396,6399],{"class":3025,"line":3086},[3023,6383,6384],{"class":5738},"        new",[3023,6386,5726],{"class":3210},[3023,6388,5005],{"class":4955},[3023,6390,3279],{"class":3210},[3023,6392,6393],{"class":5729},"\"Вивчити HTMX-атрибути\"",[3023,6395,3279],{"class":3210},[3023,6397,6398],{"class":5738},"false",[3023,6400,6401],{"class":3210},"),\n",[3023,6403,6404,6406,6408,6411,6413,6416,6418,6420],{"class":3025,"line":3092},[3023,6405,6384],{"class":5738},[3023,6407,5726],{"class":3210},[3023,6409,6410],{"class":4955},"2",[3023,6412,3279],{"class":3210},[3023,6414,6415],{"class":5729},"\"Побудувати live-search\"",[3023,6417,3279],{"class":3210},[3023,6419,6398],{"class":5738},[3023,6421,6401],{"class":3210},[3023,6423,6424,6426,6428,6431,6433,6436,6438,6440],{"class":3025,"line":3098},[3023,6425,6384],{"class":5738},[3023,6427,5726],{"class":3210},[3023,6429,6430],{"class":4955},"3",[3023,6432,3279],{"class":3210},[3023,6434,6435],{"class":5729},"\"Зробити каву\"",[3023,6437,3279],{"class":3210},[3023,6439,5492],{"class":5738},[3023,6441,6401],{"class":3210},[3023,6443,6444],{"class":3025,"line":3104},[3023,6445,6446],{"class":3210},"    ];\n",[3023,6448,6449,6451,6453,6456,6459,6461,6464],{"class":3025,"line":3110},[3023,6450,6351],{"class":5738},[3023,6452,6354],{"class":5738},[3023,6454,6455],{"class":5738}," int",[3023,6457,6458],{"class":5757}," _nextId",[3023,6460,5779],{"class":3210},[3023,6462,6463],{"class":4955},"4",[3023,6465,5785],{"class":3210},[3023,6467,6468],{"class":3025,"line":3116},[3023,6469,3347],{"emptyLinePlaceholder":3346},[3023,6471,6472],{"class":3025,"line":4264},[3023,6473,6474],{"class":4937},"    // GET /todo → повна сторінка з _Layout\n",[3023,6476,6477,6480,6483,6486,6489,6492,6494,6496,6498,6501],{"class":3025,"line":4269},[3023,6478,6479],{"class":5738},"    public",[3023,6481,6482],{"class":5722}," IActionResult",[3023,6484,6485],{"class":5748}," Index",[3023,6487,6488],{"class":3210},"() => ",[3023,6490,6491],{"class":5748},"View",[3023,6493,5726],{"class":3210},[3023,6495,6371],{"class":5757},[3023,6497,3265],{"class":3210},[3023,6499,6500],{"class":5748},"AsReadOnly",[3023,6502,6503],{"class":3210},"());\n",[3023,6505,6506],{"class":3025,"line":4275},[3023,6507,3347],{"emptyLinePlaceholder":3346},[3023,6509,6510],{"class":3025,"line":4289},[3023,6511,6512],{"class":4937},"    // POST /todo/create?text=Нова+задача\n",[3023,6514,6515],{"class":3025,"line":4300},[3023,6516,6517],{"class":4937},"    // Повертає лише Partial View нового рядка — HTMX вставляє його у список\n",[3023,6519,6520,6523,6526],{"class":3025,"line":4313},[3023,6521,6522],{"class":3210},"    [",[3023,6524,6525],{"class":5722},"HttpPost",[3023,6527,6528],{"class":3210},"]\n",[3023,6530,6531,6533,6535,6538,6540,6542,6545],{"class":3025,"line":4319},[3023,6532,6479],{"class":5738},[3023,6534,6482],{"class":5722},[3023,6536,6537],{"class":5748}," Create",[3023,6539,5726],{"class":3210},[3023,6541,6246],{"class":5738},[3023,6543,6544],{"class":5757}," text",[3023,6546,5761],{"class":3210},[3023,6548,6549],{"class":3025,"line":4328},[3023,6550,5858],{"class":3210},[3023,6552,6553,6556,6559,6561,6563,6566,6568,6571],{"class":3025,"line":4333},[3023,6554,6555],{"class":5839},"        if",[3023,6557,6558],{"class":3210}," (",[3023,6560,6246],{"class":5738},[3023,6562,3265],{"class":3210},[3023,6564,6565],{"class":5748},"IsNullOrWhiteSpace",[3023,6567,5726],{"class":3210},[3023,6569,6570],{"class":5757},"text",[3023,6572,6573],{"class":3210},"))\n",[3023,6575,6576,6579,6582],{"class":3025,"line":4339},[3023,6577,6578],{"class":5839},"            return",[3023,6580,6581],{"class":5748}," BadRequest",[3023,6583,6584],{"class":3210},"();\n",[3023,6586,6587],{"class":3025,"line":4353},[3023,6588,3347],{"emptyLinePlaceholder":3346},[3023,6590,6591,6593,6596,6598,6601,6603,6605,6608,6611,6613,6615,6618,6621,6623],{"class":3025,"line":4364},[3023,6592,5863],{"class":5738},[3023,6594,6595],{"class":5757}," item",[3023,6597,5779],{"class":3210},[3023,6599,6600],{"class":5738},"new",[3023,6602,6233],{"class":5722},[3023,6604,5726],{"class":3210},[3023,6606,6607],{"class":5757},"_nextId",[3023,6609,6610],{"class":3210},"++, ",[3023,6612,6570],{"class":5757},[3023,6614,3265],{"class":3210},[3023,6616,6617],{"class":5748},"Trim",[3023,6619,6620],{"class":3210},"(), ",[3023,6622,6398],{"class":5738},[3023,6624,5954],{"class":3210},[3023,6626,6627,6630,6632,6635,6637,6640],{"class":3025,"line":4376},[3023,6628,6629],{"class":5757},"        _todos",[3023,6631,3265],{"class":3210},[3023,6633,6634],{"class":5748},"Add",[3023,6636,5726],{"class":3210},[3023,6638,6639],{"class":5757},"item",[3023,6641,5954],{"class":3210},[3023,6643,6645],{"class":3025,"line":6644},30,[3023,6646,3347],{"emptyLinePlaceholder":3346},[3023,6648,6650],{"class":3025,"line":6649},31,[3023,6651,6652],{"class":4937},"        // Повертаємо HTML лише одного рядка — HTMX вставить через hx-swap=\"beforeend\"\n",[3023,6654,6656,6659,6662,6664,6667,6669,6671],{"class":3025,"line":6655},32,[3023,6657,6658],{"class":5839},"        return",[3023,6660,6661],{"class":5748}," PartialView",[3023,6663,5726],{"class":3210},[3023,6665,6666],{"class":5729},"\"_TodoItem\"",[3023,6668,3279],{"class":3210},[3023,6670,6639],{"class":5757},[3023,6672,5954],{"class":3210},[3023,6674,6676],{"class":3025,"line":6675},33,[3023,6677,6011],{"class":3210},[3023,6679,6681],{"class":3025,"line":6680},34,[3023,6682,6016],{"class":3210},[2959,6684,6685,6686,6689,6690,6692,6693,3279,6695,6697,6698,6701,6702,6705],{},"Розберемо ключові рішення. ",[2963,6687,6688],{},"PartialView(\"_TodoItem\", item)"," повертає лише HTML-фрагмент одного ",[2963,6691,4046],{}," — без ",[2963,6694,2965],{},[2963,6696,5146],{}," чи ",[2963,6699,6700],{},"_Layout",". Саме такий фрагмент HTMX вставить у потрібне місце DOM через ",[2963,6703,6704],{},"hx-swap=\"beforeend\"",". Контролер не знає нічого про HTMX — він просто повертає Partial View. Це чіткий розподіл відповідальності.",[3273,6707,6709],{"id":6708},"крок-3-controller-toggle-та-delete","Крок 3: Controller — Toggle та Delete",[2959,6711,6712,6713,6716],{},"Доповнимо ",[2963,6714,6715],{},"TodoController"," двома методами:",[3015,6718,6721],{"className":5709,"code":6719,"filename":6720,"language":5712,"meta":3019,"style":3019},"// POST /todo/{id}/toggle — змінити статус виконання\n[HttpPost, Route(\"todo/{id}/toggle\")]\npublic IActionResult Toggle(int id)\n{\n    var item = _todos.FirstOrDefault(t => t.Id == id);\n    if (item is null) return NotFound();\n\n    // record підтримує синтаксис \"with\" — створює копію з зміненим полем\n    var index = _todos.IndexOf(item);\n    _todos[index] = item with { IsCompleted = !item.IsCompleted };\n\n    // Повертаємо оновлений рядок — HTMX замінить весь \u003Cli> через outerHTML\n    return PartialView(\"_TodoItem\", _todos[index]);\n}\n\n// DELETE /todo/{id}/delete — видалити задачу\n[HttpDelete, Route(\"todo/{id}/delete\")]\npublic IActionResult Delete(int id)\n{\n    _todos.RemoveAll(t => t.Id == id);\n    // Порожня відповідь 200 OK + hx-swap=\"outerHTML\" = елемент зникне з DOM\n    return Ok();\n}\n","Controllers/TodoController.cs — методи Toggle та Delete",[2963,6722,6723,6728,6746,6763,6767,6805,6831,6835,6840,6862,6896,6900,6905,6927,6931,6935,6940,6958,6975,6979,7006,7011,7020],{"__ignoreMap":3019},[3023,6724,6725],{"class":3025,"line":3026},[3023,6726,6727],{"class":4937},"// POST /todo/{id}/toggle — змінити статус виконання\n",[3023,6729,6730,6732,6734,6736,6739,6741,6744],{"class":3025,"line":3032},[3023,6731,5719],{"class":3210},[3023,6733,6525],{"class":5722},[3023,6735,3279],{"class":3210},[3023,6737,6738],{"class":5722},"Route",[3023,6740,5726],{"class":3210},[3023,6742,6743],{"class":5729},"\"todo/{id}/toggle\"",[3023,6745,5733],{"class":3210},[3023,6747,6748,6750,6752,6755,6757,6759,6761],{"class":3025,"line":3038},[3023,6749,5739],{"class":5738},[3023,6751,6482],{"class":5722},[3023,6753,6754],{"class":5748}," Toggle",[3023,6756,5726],{"class":3210},[3023,6758,6238],{"class":5738},[3023,6760,3537],{"class":5757},[3023,6762,5761],{"class":3210},[3023,6764,6765],{"class":3025,"line":3044},[3023,6766,5766],{"class":3210},[3023,6768,6769,6772,6774,6776,6778,6780,6783,6785,6788,6791,6793,6795,6798,6801,6803],{"class":3025,"line":3050},[3023,6770,6771],{"class":5738},"    var",[3023,6773,6595],{"class":5757},[3023,6775,5779],{"class":3210},[3023,6777,6371],{"class":5757},[3023,6779,3265],{"class":3210},[3023,6781,6782],{"class":5748},"FirstOrDefault",[3023,6784,5726],{"class":3210},[3023,6786,6787],{"class":5757},"t",[3023,6789,6790],{"class":3210}," => ",[3023,6792,6787],{"class":5757},[3023,6794,3265],{"class":3210},[3023,6796,6797],{"class":5757},"Id",[3023,6799,6800],{"class":3210}," == ",[3023,6802,3668],{"class":5757},[3023,6804,5954],{"class":3210},[3023,6806,6807,6810,6812,6814,6817,6820,6823,6826,6829],{"class":3025,"line":3056},[3023,6808,6809],{"class":5839},"    if",[3023,6811,6558],{"class":3210},[3023,6813,6639],{"class":5757},[3023,6815,6816],{"class":5738}," is",[3023,6818,6819],{"class":5738}," null",[3023,6821,6822],{"class":3210},") ",[3023,6824,6825],{"class":5839},"return",[3023,6827,6828],{"class":5748}," NotFound",[3023,6830,6584],{"class":3210},[3023,6832,6833],{"class":3025,"line":3062},[3023,6834,3347],{"emptyLinePlaceholder":3346},[3023,6836,6837],{"class":3025,"line":3068},[3023,6838,6839],{"class":4937},"    // record підтримує синтаксис \"with\" — створює копію з зміненим полем\n",[3023,6841,6842,6844,6847,6849,6851,6853,6856,6858,6860],{"class":3025,"line":3074},[3023,6843,6771],{"class":5738},[3023,6845,6846],{"class":5757}," index",[3023,6848,5779],{"class":3210},[3023,6850,6371],{"class":5757},[3023,6852,3265],{"class":3210},[3023,6854,6855],{"class":5748},"IndexOf",[3023,6857,5726],{"class":3210},[3023,6859,6639],{"class":5757},[3023,6861,5954],{"class":3210},[3023,6863,6864,6867,6869,6872,6874,6876,6879,6881,6884,6887,6889,6891,6893],{"class":3025,"line":3080},[3023,6865,6866],{"class":5757},"    _todos",[3023,6868,5719],{"class":3210},[3023,6870,6871],{"class":5757},"index",[3023,6873,5802],{"class":3210},[3023,6875,6639],{"class":5757},[3023,6877,6878],{"class":5738}," with",[3023,6880,4947],{"class":3210},[3023,6882,6883],{"class":5757},"IsCompleted",[3023,6885,6886],{"class":3210}," = !",[3023,6888,6639],{"class":5757},[3023,6890,3265],{"class":3210},[3023,6892,6883],{"class":5757},[3023,6894,6895],{"class":3210}," };\n",[3023,6897,6898],{"class":3025,"line":3086},[3023,6899,3347],{"emptyLinePlaceholder":3346},[3023,6901,6902],{"class":3025,"line":3092},[3023,6903,6904],{"class":4937},"    // Повертаємо оновлений рядок — HTMX замінить весь \u003Cli> через outerHTML\n",[3023,6906,6907,6910,6912,6914,6916,6918,6920,6922,6924],{"class":3025,"line":3098},[3023,6908,6909],{"class":5839},"    return",[3023,6911,6661],{"class":5748},[3023,6913,5726],{"class":3210},[3023,6915,6666],{"class":5729},[3023,6917,3279],{"class":3210},[3023,6919,6371],{"class":5757},[3023,6921,5719],{"class":3210},[3023,6923,6871],{"class":5757},[3023,6925,6926],{"class":3210},"]);\n",[3023,6928,6929],{"class":3025,"line":3104},[3023,6930,6016],{"class":3210},[3023,6932,6933],{"class":3025,"line":3110},[3023,6934,3347],{"emptyLinePlaceholder":3346},[3023,6936,6937],{"class":3025,"line":3116},[3023,6938,6939],{"class":4937},"// DELETE /todo/{id}/delete — видалити задачу\n",[3023,6941,6942,6944,6947,6949,6951,6953,6956],{"class":3025,"line":4264},[3023,6943,5719],{"class":3210},[3023,6945,6946],{"class":5722},"HttpDelete",[3023,6948,3279],{"class":3210},[3023,6950,6738],{"class":5722},[3023,6952,5726],{"class":3210},[3023,6954,6955],{"class":5729},"\"todo/{id}/delete\"",[3023,6957,5733],{"class":3210},[3023,6959,6960,6962,6964,6967,6969,6971,6973],{"class":3025,"line":4269},[3023,6961,5739],{"class":5738},[3023,6963,6482],{"class":5722},[3023,6965,6966],{"class":5748}," Delete",[3023,6968,5726],{"class":3210},[3023,6970,6238],{"class":5738},[3023,6972,3537],{"class":5757},[3023,6974,5761],{"class":3210},[3023,6976,6977],{"class":3025,"line":4275},[3023,6978,5766],{"class":3210},[3023,6980,6981,6983,6985,6988,6990,6992,6994,6996,6998,7000,7002,7004],{"class":3025,"line":4289},[3023,6982,6866],{"class":5757},[3023,6984,3265],{"class":3210},[3023,6986,6987],{"class":5748},"RemoveAll",[3023,6989,5726],{"class":3210},[3023,6991,6787],{"class":5757},[3023,6993,6790],{"class":3210},[3023,6995,6787],{"class":5757},[3023,6997,3265],{"class":3210},[3023,6999,6797],{"class":5757},[3023,7001,6800],{"class":3210},[3023,7003,3668],{"class":5757},[3023,7005,5954],{"class":3210},[3023,7007,7008],{"class":3025,"line":4300},[3023,7009,7010],{"class":4937},"    // Порожня відповідь 200 OK + hx-swap=\"outerHTML\" = елемент зникне з DOM\n",[3023,7012,7013,7015,7018],{"class":3025,"line":4313},[3023,7014,6909],{"class":5839},[3023,7016,7017],{"class":5748}," Ok",[3023,7019,6584],{"class":3210},[3023,7021,7022],{"class":3025,"line":4319},[3023,7023,6016],{"class":3210},[2959,7025,7026,7027,7030,7031,7034,7035,7038,7039,7042,7043,3265],{},"Зверніть увагу на асиметрію: ",[2963,7028,7029],{},"Toggle"," повертає оновлений фрагмент HTML, а ",[2963,7032,7033],{},"Delete"," — просто ",[2963,7036,7037],{},"Ok()"," з порожнім тілом. HTMX з ",[2963,7040,7041],{},"hx-swap=\"outerHTML\""," та порожньою відповіддю видалить цільовий елемент з DOM — ніякого JavaScript, ніякого ",[2963,7044,7045],{},"element.remove()",[3273,7047,7049],{"id":7048},"крок-4-view-indexcshtml","Крок 4: View Index.cshtml",[3015,7051,7054],{"className":3144,"code":7052,"filename":7053,"language":3147,"meta":3019,"style":3019},"@model IReadOnlyList\u003CHtmxDemo.Models.TodoItem>\n@{ ViewData[\"Title\"] = \"Мої задачі\"; }\n\n\u003Cdiv class=\"container mt-4\" style=\"max-width: 600px\">\n    \u003Ch1 class=\"mb-4\">Мої задачі\u003C/h1>\n\n    @* Форма додавання: POST через HTMX, результат додається наприкінці списку *@\n    \u003Cform hx-post=\"/todo/create\"\n          hx-target=\"#todo-list\"\n          hx-swap=\"beforeend\"\n          hx-on::after-request=\"this.reset()\"\n          class=\"d-flex gap-2 mb-4\">\n        \u003Cinput type=\"text\" name=\"text\"\n               class=\"form-control\"\n               placeholder=\"Нова задача...\"\n               required autocomplete=\"off\">\n        \u003Cbutton type=\"submit\" class=\"btn btn-primary\">\n            \u003Cspan class=\"htmx-indicator spinner-border spinner-border-sm\">\u003C/span>\n            Додати\n        \u003C/button>\n    \u003C/form>\n\n    @* Список задач — початковий стан рендериться сервером *@\n    \u003Cul id=\"todo-list\" class=\"list-group\">\n        @foreach (var item in Model)\n        {\n            \u003Cpartial name=\"_TodoItem\" model=\"item\"/>\n        }\n    \u003C/ul>\n\u003C/div>\n","Views/Todo/Index.cshtml",[2963,7055,7056,7069,7074,7078,7101,7125,7129,7134,7148,7158,7168,7178,7190,7211,7221,7231,7246,7268,7288,7293,7302,7310,7314,7319,7340,7345,7350,7374,7379,7387],{"__ignoreMap":3019},[3023,7057,7058,7061,7063,7067],{"class":3025,"line":3026},[3023,7059,7060],{"class":3210},"@model IReadOnlyList",[3023,7062,3155],{"class":3154},[3023,7064,7066],{"class":7065},"se1LK","HtmxDemo.Models.TodoItem",[3023,7068,3199],{"class":3154},[3023,7070,7071],{"class":3025,"line":3032},[3023,7072,7073],{"class":3210},"@{ ViewData[\"Title\"] = \"Мої задачі\"; }\n",[3023,7075,7076],{"class":3025,"line":3038},[3023,7077,3347],{"emptyLinePlaceholder":3346},[3023,7079,7080,7082,7084,7086,7088,7091,7094,7096,7099],{"class":3025,"line":3044},[3023,7081,3155],{"class":3154},[3023,7083,3534],{"class":3158},[3023,7085,4237],{"class":3162},[3023,7087,3167],{"class":3210},[3023,7089,7090],{"class":3170},"\"container mt-4\"",[3023,7092,7093],{"class":3162}," style",[3023,7095,3167],{"class":3210},[3023,7097,7098],{"class":3170},"\"max-width: 600px\"",[3023,7100,3199],{"class":3154},[3023,7102,7103,7105,7107,7109,7111,7114,7116,7119,7121,7123],{"class":3025,"line":3050},[3023,7104,4232],{"class":3154},[3023,7106,2955],{"class":3158},[3023,7108,4237],{"class":3162},[3023,7110,3167],{"class":3210},[3023,7112,7113],{"class":3170},"\"mb-4\"",[3023,7115,3331],{"class":3154},[3023,7117,7118],{"class":3210},"Мої задачі",[3023,7120,3337],{"class":3154},[3023,7122,2955],{"class":3158},[3023,7124,3199],{"class":3154},[3023,7126,7127],{"class":3025,"line":3056},[3023,7128,3347],{"emptyLinePlaceholder":3346},[3023,7130,7131],{"class":3025,"line":3062},[3023,7132,7133],{"class":3210},"    @* Форма додавання: POST через HTMX, результат додається наприкінці списку *@\n",[3023,7135,7136,7138,7141,7143,7145],{"class":3025,"line":3068},[3023,7137,4232],{"class":3154},[3023,7139,7140],{"class":3158},"form",[3023,7142,3361],{"class":3162},[3023,7144,3167],{"class":3210},[3023,7146,7147],{"class":3170},"\"/todo/create\"\n",[3023,7149,7150,7153,7155],{"class":3025,"line":3074},[3023,7151,7152],{"class":3162},"          hx-target",[3023,7154,3167],{"class":3210},[3023,7156,7157],{"class":3170},"\"#todo-list\"\n",[3023,7159,7160,7163,7165],{"class":3025,"line":3080},[3023,7161,7162],{"class":3162},"          hx-swap",[3023,7164,3167],{"class":3210},[3023,7166,7167],{"class":3170},"\"beforeend\"\n",[3023,7169,7170,7173,7175],{"class":3025,"line":3086},[3023,7171,7172],{"class":3162},"          hx-on::after-request",[3023,7174,3167],{"class":3210},[3023,7176,7177],{"class":3170},"\"this.reset()\"\n",[3023,7179,7180,7183,7185,7188],{"class":3025,"line":3092},[3023,7181,7182],{"class":3162},"          class",[3023,7184,3167],{"class":3210},[3023,7186,7187],{"class":3170},"\"d-flex gap-2 mb-4\"",[3023,7189,3199],{"class":3154},[3023,7191,7192,7195,7197,7199,7201,7204,7206,7208],{"class":3025,"line":3098},[3023,7193,7194],{"class":3154},"        \u003C",[3023,7196,4114],{"class":3158},[3023,7198,4117],{"class":3162},[3023,7200,3167],{"class":3210},[3023,7202,7203],{"class":3170},"\"text\"",[3023,7205,4561],{"class":3162},[3023,7207,3167],{"class":3210},[3023,7209,7210],{"class":3170},"\"text\"\n",[3023,7212,7213,7216,7218],{"class":3025,"line":3104},[3023,7214,7215],{"class":3162},"               class",[3023,7217,3167],{"class":3210},[3023,7219,7220],{"class":3170},"\"form-control\"\n",[3023,7222,7223,7226,7228],{"class":3025,"line":3110},[3023,7224,7225],{"class":3162},"               placeholder",[3023,7227,3167],{"class":3210},[3023,7229,7230],{"class":3170},"\"Нова задача...\"\n",[3023,7232,7233,7236,7239,7241,7244],{"class":3025,"line":3116},[3023,7234,7235],{"class":3162},"               required",[3023,7237,7238],{"class":3162}," autocomplete",[3023,7240,3167],{"class":3210},[3023,7242,7243],{"class":3170},"\"off\"",[3023,7245,3199],{"class":3154},[3023,7247,7248,7250,7252,7254,7256,7259,7261,7263,7266],{"class":3025,"line":4264},[3023,7249,7194],{"class":3154},[3023,7251,3320],{"class":3158},[3023,7253,4117],{"class":3162},[3023,7255,3167],{"class":3210},[3023,7257,7258],{"class":3170},"\"submit\"",[3023,7260,4237],{"class":3162},[3023,7262,3167],{"class":3210},[3023,7264,7265],{"class":3170},"\"btn btn-primary\"",[3023,7267,3199],{"class":3154},[3023,7269,7270,7273,7275,7277,7279,7282,7284,7286],{"class":3025,"line":4269},[3023,7271,7272],{"class":3154},"            \u003C",[3023,7274,3023],{"class":3158},[3023,7276,4237],{"class":3162},[3023,7278,3167],{"class":3210},[3023,7280,7281],{"class":3170},"\"htmx-indicator spinner-border spinner-border-sm\"",[3023,7283,3194],{"class":3154},[3023,7285,3023],{"class":3158},[3023,7287,3199],{"class":3154},[3023,7289,7290],{"class":3025,"line":4275},[3023,7291,7292],{"class":3210},"            Додати\n",[3023,7294,7295,7298,7300],{"class":3025,"line":4289},[3023,7296,7297],{"class":3154},"        \u003C/",[3023,7299,3320],{"class":3158},[3023,7301,3199],{"class":3154},[3023,7303,7304,7306,7308],{"class":3025,"line":4300},[3023,7305,5651],{"class":3154},[3023,7307,7140],{"class":3158},[3023,7309,3199],{"class":3154},[3023,7311,7312],{"class":3025,"line":4313},[3023,7313,3347],{"emptyLinePlaceholder":3346},[3023,7315,7316],{"class":3025,"line":4319},[3023,7317,7318],{"class":3210},"    @* Список задач — початковий стан рендериться сервером *@\n",[3023,7320,7321,7323,7325,7327,7329,7331,7333,7335,7338],{"class":3025,"line":4328},[3023,7322,4232],{"class":3154},[3023,7324,3848],{"class":3158},[3023,7326,3537],{"class":3162},[3023,7328,3167],{"class":3210},[3023,7330,3855],{"class":3170},[3023,7332,4237],{"class":3162},[3023,7334,3167],{"class":3210},[3023,7336,7337],{"class":3170},"\"list-group\"",[3023,7339,3199],{"class":3154},[3023,7341,7342],{"class":3025,"line":4333},[3023,7343,7344],{"class":3210},"        @foreach (var item in Model)\n",[3023,7346,7347],{"class":3025,"line":4339},[3023,7348,7349],{"class":3210},"        {\n",[3023,7351,7352,7354,7357,7359,7361,7363,7366,7368,7371],{"class":3025,"line":4353},[3023,7353,7272],{"class":3154},[3023,7355,7356],{"class":7065},"partial",[3023,7358,4561],{"class":3162},[3023,7360,3167],{"class":3210},[3023,7362,6666],{"class":3170},[3023,7364,7365],{"class":3162}," model",[3023,7367,3167],{"class":3210},[3023,7369,7370],{"class":3170},"\"item\"",[3023,7372,7373],{"class":3154},"/>\n",[3023,7375,7376],{"class":3025,"line":4364},[3023,7377,7378],{"class":3210},"        }\n",[3023,7380,7381,7383,7385],{"class":3025,"line":4376},[3023,7382,5651],{"class":3154},[3023,7384,3848],{"class":3158},[3023,7386,3199],{"class":3154},[3023,7388,7389,7391,7393],{"class":3025,"line":6644},[3023,7390,3337],{"class":3154},[3023,7392,3534],{"class":3158},[3023,7394,3199],{"class":3154},[2959,7396,7397,7400,7401,7404],{},[2963,7398,7399],{},"hx-on::after-request=\"this.reset()\""," — єдиний JavaScript у всьому демо. Це inline-обробник HTMX-події, що очищує форму після успішного запиту. Зверніть на подвійне двокрапкове ",[2963,7402,7403],{},"::"," — так в HTMX записуються власні події бібліотеки.",[3273,7406,7408],{"id":7407},"крок-5-partial-view-_todoitemcshtml","Крок 5: Partial View _TodoItem.cshtml",[3015,7410,7413],{"className":3144,"code":7411,"filename":7412,"language":3147,"meta":3019,"style":3019},"@model HtmxDemo.Models.TodoItem\n\n@* id=\"todo-{id}\" дозволяє hx-target=\"closest li\" або #todo-{id} знайти саме цей рядок *@\n\u003Cli id=\"todo-@Model.Id\"\n    class=\"list-group-item d-flex align-items-center gap-3\">\n\n    @* Чекбокс: POST /todo/{id}/toggle при зміні → замінює весь \u003Cli> *@\n    \u003Cinput type=\"checkbox\"\n           class=\"form-check-input flex-shrink-0\"\n           @(Model.IsCompleted ? \"checked\" : \"\")\n           hx-post=\"/todo/@Model.Id/toggle\"\n           hx-target=\"#todo-@Model.Id\"\n           hx-swap=\"outerHTML\">\n\n    @* Текст задачі — перекреслений якщо виконано *@\n    \u003Cspan class=\"@(Model.IsCompleted ? \"text-decoration-line-through text-muted\" : \"\")\">\n        @Model.Text\n    \u003C/span>\n\n    @* Кнопка видалення: DELETE → порожня відповідь → outerHTML видаляє \u003Cli> *@\n    \u003Cbutton class=\"btn btn-sm btn-outline-danger ms-auto\"\n            hx-delete=\"/todo/@Model.Id/delete\"\n            hx-target=\"#todo-@Model.Id\"\n            hx-swap=\"outerHTML\"\n            hx-confirm=\"Видалити «@Model.Text»?\">\n        ×\n    \u003C/button>\n\u003C/li>\n","Views/Todo/_TodoItem.cshtml",[2963,7414,7415,7420,7424,7429,7442,7454,7458,7472,7485,7495,7512,7522,7532,7543,7547,7552,7580,7585,7593,7597,7610,7623,7633,7642,7652,7664,7669,7677],{"__ignoreMap":3019},[3023,7416,7417],{"class":3025,"line":3026},[3023,7418,7419],{"class":3210},"@model HtmxDemo.Models.TodoItem\n",[3023,7421,7422],{"class":3025,"line":3032},[3023,7423,3347],{"emptyLinePlaceholder":3346},[3023,7425,7426],{"class":3025,"line":3038},[3023,7427,7428],{"class":3210},"@* id=\"todo-{id}\" дозволяє hx-target=\"closest li\" або #todo-{id} знайти саме цей рядок *@\n",[3023,7430,7431,7433,7435,7437,7439],{"class":3025,"line":3044},[3023,7432,3155],{"class":3154},[3023,7434,3949],{"class":3158},[3023,7436,3537],{"class":3162},[3023,7438,3167],{"class":3210},[3023,7440,7441],{"class":3170},"\"todo-@Model.Id\"\n",[3023,7443,7444,7447,7449,7452],{"class":3025,"line":3050},[3023,7445,7446],{"class":3162},"    class",[3023,7448,3167],{"class":3210},[3023,7450,7451],{"class":3170},"\"list-group-item d-flex align-items-center gap-3\"",[3023,7453,3199],{"class":3154},[3023,7455,7456],{"class":3025,"line":3056},[3023,7457,3347],{"emptyLinePlaceholder":3346},[3023,7459,7460,7463,7465,7467,7469],{"class":3025,"line":3062},[3023,7461,7462],{"class":3210},"    @* Чекбокс: POST /todo/{id}/toggle при зміні → замінює весь ",[3023,7464,3155],{"class":3154},[3023,7466,3949],{"class":3158},[3023,7468,3331],{"class":3154},[3023,7470,7471],{"class":3210}," *@\n",[3023,7473,7474,7476,7478,7480,7482],{"class":3025,"line":3068},[3023,7475,4232],{"class":3154},[3023,7477,4114],{"class":3158},[3023,7479,4117],{"class":3162},[3023,7481,3167],{"class":3210},[3023,7483,7484],{"class":3170},"\"checkbox\"\n",[3023,7486,7487,7490,7492],{"class":3025,"line":3074},[3023,7488,7489],{"class":3162},"           class",[3023,7491,3167],{"class":3210},[3023,7493,7494],{"class":3170},"\"form-check-input flex-shrink-0\"\n",[3023,7496,7497,7500,7503,7506,7509],{"class":3025,"line":3080},[3023,7498,7499],{"class":3162},"           @(Model.IsCompleted",[3023,7501,7502],{"class":3162}," ?",[3023,7504,7505],{"class":7065}," \"checked\"",[3023,7507,7508],{"class":3162}," :",[3023,7510,7511],{"class":7065}," \"\")\n",[3023,7513,7514,7517,7519],{"class":3025,"line":3086},[3023,7515,7516],{"class":3162},"           hx-post",[3023,7518,3167],{"class":3210},[3023,7520,7521],{"class":3170},"\"/todo/@Model.Id/toggle\"\n",[3023,7523,7524,7527,7529],{"class":3025,"line":3092},[3023,7525,7526],{"class":3162},"           hx-target",[3023,7528,3167],{"class":3210},[3023,7530,7531],{"class":3170},"\"#todo-@Model.Id\"\n",[3023,7533,7534,7537,7539,7541],{"class":3025,"line":3098},[3023,7535,7536],{"class":3162},"           hx-swap",[3023,7538,3167],{"class":3210},[3023,7540,3821],{"class":3170},[3023,7542,3199],{"class":3154},[3023,7544,7545],{"class":3025,"line":3104},[3023,7546,3347],{"emptyLinePlaceholder":3346},[3023,7548,7549],{"class":3025,"line":3110},[3023,7550,7551],{"class":3210},"    @* Текст задачі — перекреслений якщо виконано *@\n",[3023,7553,7554,7556,7558,7560,7562,7565,7568,7571,7573,7575,7578],{"class":3025,"line":3116},[3023,7555,4232],{"class":3154},[3023,7557,3023],{"class":3158},[3023,7559,4237],{"class":3162},[3023,7561,3167],{"class":3210},[3023,7563,7564],{"class":3170},"\"@(Model.IsCompleted ? \"",[3023,7566,7567],{"class":3162},"text-decoration-line-through",[3023,7569,7570],{"class":3162}," text-muted",[3023,7572,5947],{"class":7065},[3023,7574,7508],{"class":3162},[3023,7576,7577],{"class":7065}," \"\")\"",[3023,7579,3199],{"class":3154},[3023,7581,7582],{"class":3025,"line":4264},[3023,7583,7584],{"class":3210},"        @Model.Text\n",[3023,7586,7587,7589,7591],{"class":3025,"line":4269},[3023,7588,5651],{"class":3154},[3023,7590,3023],{"class":3158},[3023,7592,3199],{"class":3154},[3023,7594,7595],{"class":3025,"line":4275},[3023,7596,3347],{"emptyLinePlaceholder":3346},[3023,7598,7599,7602,7604,7606,7608],{"class":3025,"line":4289},[3023,7600,7601],{"class":3210},"    @* Кнопка видалення: DELETE → порожня відповідь → outerHTML видаляє ",[3023,7603,3155],{"class":3154},[3023,7605,3949],{"class":3158},[3023,7607,3331],{"class":3154},[3023,7609,7471],{"class":3210},[3023,7611,7612,7614,7616,7618,7620],{"class":3025,"line":4300},[3023,7613,4232],{"class":3154},[3023,7615,3320],{"class":3158},[3023,7617,4237],{"class":3162},[3023,7619,3167],{"class":3210},[3023,7621,7622],{"class":3170},"\"btn btn-sm btn-outline-danger ms-auto\"\n",[3023,7624,7625,7628,7630],{"class":3025,"line":4313},[3023,7626,7627],{"class":3162},"            hx-delete",[3023,7629,3167],{"class":3210},[3023,7631,7632],{"class":3170},"\"/todo/@Model.Id/delete\"\n",[3023,7634,7635,7638,7640],{"class":3025,"line":4319},[3023,7636,7637],{"class":3162},"            hx-target",[3023,7639,3167],{"class":3210},[3023,7641,7531],{"class":3170},[3023,7643,7644,7647,7649],{"class":3025,"line":4328},[3023,7645,7646],{"class":3162},"            hx-swap",[3023,7648,3167],{"class":3210},[3023,7650,7651],{"class":3170},"\"outerHTML\"\n",[3023,7653,7654,7657,7659,7662],{"class":3025,"line":4333},[3023,7655,7656],{"class":3162},"            hx-confirm",[3023,7658,3167],{"class":3210},[3023,7660,7661],{"class":3170},"\"Видалити «@Model.Text»?\"",[3023,7663,3199],{"class":3154},[3023,7665,7666],{"class":3025,"line":4339},[3023,7667,7668],{"class":5738},"        ×\n",[3023,7670,7671,7673,7675],{"class":3025,"line":4353},[3023,7672,5651],{"class":3154},[3023,7674,3320],{"class":3158},[3023,7676,3199],{"class":3154},[3023,7678,7679,7681,7683],{"class":3025,"line":4364},[3023,7680,3337],{"class":3154},[3023,7682,3949],{"class":3158},[3023,7684,3199],{"class":3154},[2959,7686,7687,7690],{},[2963,7688,7689],{},"hx-confirm"," відображає нативний браузерний діалог підтвердження перед надсиланням запиту. Без JavaScript, без модальних вікон — один атрибут.",[2959,7692,7693],{},"Весь список задач працює без єдиного рядка JavaScript, написаного вами. HTMX обробляє всі запити, оновлює DOM, очищує форму, показує індикатор завантаження.",[3001,7695],{},[3004,7697,7699],{"id":7698},"практичні-завдання","Практичні завдання",[3273,7701,7703],{"id":7702},"рівень-1-базовий","Рівень 1 — Базовий",[2959,7705,7706,7709,7710,7713,7714,7717,7718,7721,7722,7725,7726,5139,7729,3265],{},[2981,7707,7708],{},"Завдання 1.1."," Розширте Todo-демо функцією ",[2981,7711,7712],{},"«Позначити всі виконаними»",": додайте кнопку з ",[2963,7715,7716],{},"hx-post=\"/todo/complete-all\"",". Controller повертає повний список через ",[2963,7719,7720],{},"PartialView(\"_TodoList\", _todos)",", де ",[2963,7723,7724],{},"_TodoList.cshtml"," рендерить усі рядки. Використайте ",[2963,7727,7728],{},"hx-target=\"#todo-list\"",[2963,7730,4022],{},[2959,7732,7733,7736,7737,3725,7740,7743,7744,7747],{},[2981,7734,7735],{},"Завдання 1.2."," Додайте до Todo-демо ",[2981,7738,7739],{},"лічильник невиконаних задач",[2963,7741,7742],{},"\u003Cspan id=\"pending-count\">"," у заголовок. При кожній операції (Create/Toggle/Delete) сервер повертає OOB-фрагмент ",[2963,7745,7746],{},"\u003Cspan id=\"pending-count\" hx-swap-oob=\"innerHTML\">N\u003C/span>"," з актуальним числом.",[3273,7749,7751],{"id":7750},"рівень-2-логіка","Рівень 2 — Логіка",[2959,7753,7754,7757,7758,7761,7762,7765,7766,7769,7770,7773,7774,7776,7777,7780],{},[2981,7755,7756],{},"Завдання 2.1."," Реалізуйте ",[2981,7759,7760],{},"live-search"," для списку статей: ",[2963,7763,7764],{},"\u003Cinput hx-get=\"/articles/search\" hx-trigger=\"input changed delay:300ms\" hx-target=\"#articles-list\" name=\"q\">",". Controller ",[2963,7767,7768],{},"ArticlesController.Search(string? q)"," повертає ",[2963,7771,7772],{},"PartialView(\"_ArticleList\", filteredArticles)",". Додайте ",[2963,7775,4804],{}," зі спіннером та ",[2963,7778,7779],{},"hx-push-url=\"true\""," щоб URL оновлювався і пошук можна було закладинкувати.",[2959,7782,7783,7786,7787,7790,7791,7794],{},[2981,7784,7785],{},"Завдання 2.2."," Побудуйте ",[2981,7788,7789],{},"нескінченний scroll"," для таблиці товарів: перша сторінка рендериться при завантаженні сервером, наприкінці списку — порожній ",[2963,7792,7793],{},"\u003Cdiv hx-get=\"/products?page=2\" hx-trigger=\"revealed\" hx-swap=\"outerHTML\">",". При скролі донизу HTMX підвантажує наступну порцію та замінює sentinel-div на нові рядки і новий sentinel.",[3273,7796,7798],{"id":7797},"рівень-3-архітектура","Рівень 3 — Архітектура",[2959,7800,7801,7757,7804,7807],{},[2981,7802,7803],{},"Завдання 3.1.",[2981,7805,7806],{},"real-time лічильник онлайн-користувачів"," через SSE:",[3848,7809,7810,7819,7831],{},[3949,7811,7812,7815,7816],{},[2963,7813,7814],{},"GET /realtime/online"," — SSE-endpoint, що кожні 5 с надсилає ",[2963,7817,7818],{},"event: count\\ndata: \u003Cstrong>N\u003C/strong> online\\n\\n",[3949,7820,7821,7822,7824,7825,5139,7828],{},"В ",[2963,7823,3137],{}," підключіться через ",[2963,7826,7827],{},"hx-ext=\"sse\" sse-connect=\"/realtime/online\"",[2963,7829,7830],{},"sse-swap=\"count\" hx-target=\"#online-count\"",[3949,7832,7833,7834,7837,7838,7841,7842],{},"На сервері — ",[2963,7835,7836],{},"IHostedService"," що зберігає кількість активних з'єднань через ",[2963,7839,7840],{},"Interlocked.Increment/Decrement"," при connect/disconnect через ",[2963,7843,5754],{},[3001,7845],{},[3004,7847,7849],{"id":7848},"резюме","Резюме",[3848,7851,7852,7857,7865,7878,7900,7923,7930,7939,7946,7959,7969],{},[3949,7853,7854,7856],{},[2981,7855,2983],{}," — JavaScript-бібліотека (~14kb) що реалізує філософію «HTML over the wire»: сервер повертає готовий HTML-фрагмент, а не JSON",[3949,7858,7859,7864],{},[2981,7860,7861],{},[2963,7862,7863],{},"hx-get/post/put/patch/delete"," — перетворюють будь-який HTML-елемент на джерело HTTP-запиту",[3949,7866,7867,7871,7872,3279,7874,3279,7876],{},[2981,7868,7869],{},[2963,7870,3456],{}," — CSS-селектор елемента куди вставляти відповідь; підтримує відносні селектори ",[2963,7873,3658],{},[2963,7875,3661],{},[2963,7877,3664],{},[3949,7879,7880,7884,7885,7887,7888,7890,7891,7893,7894,7896,7897,7899],{},[2981,7881,7882],{},[2963,7883,3680],{}," — спосіб вставки: ",[2963,7886,3703],{}," (вміст), ",[2963,7889,3780],{}," (весь елемент), ",[2963,7892,3827],{}," (в кінець), ",[2963,7895,3923],{}," (видалити), ",[2963,7898,3986],{}," (ігнорувати)",[3949,7901,7902,7906,7907,3279,7909,3279,7912,3279,7914,3279,7916,3279,7919,3279,7921],{},[2981,7903,7904],{},[2963,7905,4057],{}," — коли надсилати: ",[2963,7908,3421],{},[2963,7910,7911],{},"input delay:300ms",[2963,7913,4451],{},[2963,7915,4461],{},[2963,7917,7918],{},"from:#id",[2963,7920,4481],{},[2963,7922,4441],{},[3949,7924,7925,7929],{},[2981,7926,7927],{},[2963,7928,4524],{}," — включити значення інших елементів у запит за CSS-селектором",[3949,7931,7932,7936,7937],{},[2981,7933,7934],{},[2963,7935,4804],{}," — елемент що з'являється під час запиту через CSS-клас ",[2963,7938,4811],{},[3949,7940,7941,7945],{},[2981,7942,7943],{},[2963,7944,5048],{}," — оновлює URL у браузері через History API без перезавантаження",[3949,7947,7948,7952,7953,4067,7956,7958],{},[2981,7949,7950],{},[2963,7951,5128],{}," — автоматично перетворює всі ",[2963,7954,7955],{},"\u003Ca>",[2963,7957,5142],{}," у межах елемента на HTMX-запити",[3949,7960,7961,6558,7964,7966,7967],{},[2981,7962,7963],{},"OOB Swaps",[2963,7965,5312],{},") — оновлення кількох елементів DOM з однієї HTTP-відповіді за ",[2963,7968,3668],{},[3949,7970,7971,6558,7974,7977],{},[2981,7972,7973],{},"SSE",[2963,7975,7976],{},"hx-ext=\"sse\"",") — підписка на серверні події для real-time потоку",[2959,7979,7980,7981,7984,7985,7988,7989,5139,7992,7995],{},"У наступній статті — ",[2981,7982,7983],{},"HTMX у MVC",": виявлення HTMX-запитів через ",[2963,7986,7987],{},"HX-Request",", CSRF-захист, response headers ",[2963,7990,7991],{},"HX-Redirect",[2963,7993,7994],{},"HX-Trigger",", а також практичні патерни: live-search, lazy loading таблиці, inline edit.",[7997,7998,7999],"style",{},"html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s0P7L, html code.shiki .s0P7L{--shiki-light:#800000;--shiki-default:#808080;--shiki-dark:#808080}html pre.shiki code .sKtos, html code.shiki .sKtos{--shiki-light:#800000;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .sa4r_, html code.shiki .sa4r_{--shiki-light:#E50000;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .sD7JJ, html code.shiki .sD7JJ{--shiki-light:#000000FF;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .su9tN, html code.shiki .su9tN{--shiki-light:#0000FF;--shiki-default:#CE9178;--shiki-dark:#CE9178}html pre.shiki code .sHH4Y, html code.shiki .sHH4Y{--shiki-light:#000000;--shiki-default:#D4D4D4;--shiki-dark:#D4D4D4}html pre.shiki code .spJ8K, html code.shiki .spJ8K{--shiki-light:#008000;--shiki-default:#6A9955;--shiki-dark:#6A9955}html pre.shiki code .sqdDX, html code.shiki .sqdDX{--shiki-light:#800000;--shiki-default:#D7BA7D;--shiki-dark:#D7BA7D}html pre.shiki code .sJj4R, html code.shiki .sJj4R{--shiki-light:#098658;--shiki-default:#B5CEA8;--shiki-dark:#B5CEA8}html pre.shiki code .sDUd3, html code.shiki .sDUd3{--shiki-light:#0451A5;--shiki-default:#CE9178;--shiki-dark:#CE9178}html pre.shiki code .sN1BT, html code.shiki .sN1BT{--shiki-light:#267F99;--shiki-default:#4EC9B0;--shiki-dark:#4EC9B0}html pre.shiki code .sbdoH, html code.shiki .sbdoH{--shiki-light:#A31515;--shiki-default:#CE9178;--shiki-dark:#CE9178}html pre.shiki code .su1O8, html code.shiki .su1O8{--shiki-light:#0000FF;--shiki-default:#569CD6;--shiki-dark:#569CD6}html pre.shiki code .s8Opu, html code.shiki .s8Opu{--shiki-light:#795E26;--shiki-default:#DCDCAA;--shiki-dark:#DCDCAA}html pre.shiki code .siwwj, html code.shiki .siwwj{--shiki-light:#001080;--shiki-default:#9CDCFE;--shiki-dark:#9CDCFE}html pre.shiki code .sCDza, html code.shiki .sCDza{--shiki-light:#AF00DB;--shiki-default:#CE92A4;--shiki-dark:#CE92A4}html pre.shiki code .sjcCO, html code.shiki .sjcCO{--shiki-light:#EE0000;--shiki-default:#D7BA7D;--shiki-dark:#D7BA7D}html pre.shiki code .se1LK, html code.shiki .se1LK{--shiki-light:#CD3131;--shiki-default:#F44747;--shiki-dark:#F44747}",{"title":3019,"searchDepth":3032,"depth":3032,"links":8001},[8002,8003,8004,8022,8023,8024,8025,8032,8037],{"id":3006,"depth":3032,"text":3007},{"id":3130,"depth":3032,"text":3131},{"id":3270,"depth":3032,"text":3271,"children":8005},[8006,8008,8010,8012,8014,8016,8018,8020],{"id":3275,"depth":3038,"text":8007},"hx-get, hx-post, hx-put, hx-patch, hx-delete — метод і URL запиту",{"id":3461,"depth":3038,"text":8009},"hx-target — куди вставляти відповідь",{"id":3677,"depth":3038,"text":8011},"hx-swap — як саме вставляти відповідь",{"id":4054,"depth":3038,"text":8013},"hx-trigger — коли надсилати запит",{"id":4521,"depth":3038,"text":8015},"hx-include — включити значення інших елементів у запит",{"id":4801,"depth":3038,"text":8017},"hx-indicator — індикатор стану завантаження",{"id":5045,"depth":3038,"text":8019},"hx-push-url — оновлювати URL у браузері",{"id":5125,"depth":3038,"text":8021},"hx-boost — SPA-навігація без коду",{"id":5274,"depth":3032,"text":5275},{"id":5519,"depth":3032,"text":5520},{"id":6024,"depth":3032,"text":6025},{"id":6179,"depth":3032,"text":6180,"children":8026},[8027,8028,8029,8030,8031],{"id":6189,"depth":3038,"text":6190},{"id":6262,"depth":3038,"text":6263},{"id":6708,"depth":3038,"text":6709},{"id":7048,"depth":3038,"text":7049},{"id":7407,"depth":3038,"text":7408},{"id":7698,"depth":3032,"text":7699,"children":8033},[8034,8035,8036],{"id":7702,"depth":3038,"text":7703},{"id":7750,"depth":3038,"text":7751},{"id":7797,"depth":3038,"text":7798},{"id":7848,"depth":3032,"text":7849},"HTMX — бібліотека для побудови динамічних інтерфейсів без JavaScript-фреймворків. Філософія «HTML over the wire»: hx-get/post/put/delete, hx-target, hx-swap (всі режими), hx-trigger, hx-include, hx-indicator, hx-push-url, hx-boost. Out-of-band swaps. Server-Sent Events. Порівняння з Alpine.js та React. Демо: живий список задач.","md",null,{},{"title":1262,"description":8038},"Wa51lwn-Eo2CpZoWDW6wLjhqcQkPTOXmLVXDMwfykog",[8045,8047],{"title":1258,"path":1259,"stem":1260,"description":8046,"children":-1},"Просунута валідація в ASP.NET Core MVC: IValidatableObject для cross-field правил, Remote validation через [Remote], власні ValidationAttribute, інтеграція FluentValidation з MVC. Демо: форма реєстрації з [Remote] та FluentValidation для складних бізнес-правил замовлення.",{"title":1266,"path":1267,"stem":1268,"description":8048,"children":-1},"Інтеграція HTMX з ASP.NET Core MVC: виявлення HTMX-запитів через HX-Request, AntiForgery token, response headers HX-Redirect та HX-Trigger. Практичні патерни: live-search, lazy loading таблиці, inline edit клітинки.",1777912455968]