Практичні матеріали про клієнтську частину вебзастосунків: CSS, JavaScript, Vue.js, побудову інтерфейсів, адаптивність, поведінку браузера та проблеми, які виникають у реальних проєктах. Тут я збираю не абстрактні приклади, а ситуації, які довелося діагностувати й виправляти під час розробки.
Одна платформа може вже показувати нове Open Graph-зображення, а інша ще тримати старий попередній перегляд. Це не завжди означає помилку в meta tags. Перевіряти потрібно окремо HTML, SSR, доступність og:image, HTTP-відповідь і кеш конкретного робота.
Клік по кнопці "Копіювати посилання" показує намір користувача, але не доводить, що посилання справді потрапило до буфера обміну. Якщо дія може завершитися помилкою, подію успіху варто записувати лише після фактичного завершення операції.
У SPA лічильник unread notifications може бути правильним під час активної роботи й застаріти після sleep, background tab або повернення через browser cache. WebSocket добре доставляє зміни в реальному часі, але після повернення у вкладку state треба звірити з сервером.
Інтерфейс може виглядати правильно, але Vue все одно попереджає про значення default slot. Причина проста: для компонента третій аргумент h() не варто передавати звичайним рядком. Показую різницю між h('a', ...) і h(Link, ...).
Коли користувач змінює фільтр, поточна сторінка старої вибірки більше не має сенсу. Але просте скидання pageIndex усередині спостерігача може запустити два однакові запити. Розбираю, як розділити ці реакції без дублювання завантаження.
Змінила margin або padding у SCSS, оновила сторінку, а результату немає. Показую мій практичний порядок перевірок: source, build, compiled CSS, DOM, cascade, порядок стилів і лише потім cache.
У MessageAttachments.vue я зіткнулася з вкладеним <a>: вся картка відкривала вкладення, а окреме посилання всередині мало завантажувати файл. Пояснюю, чому @click.stop не виправляє невалідний HTML, як браузер може перебудувати DOM і чому дві дії краще робити сусідніми елементами.
Після перетягування Content Blocks у Vue-редакторі службові підписи блока інколи опинялися всередині Rich Text: locale, позиція, ID якоря, назва редактора й інший текст інтерфейсу. Розбираю, чому drag-and-drop поруч із contenteditable потребує стабільних Vue keys, чітких DOM-меж, правильного життєвого циклу редактора та окремого контракту синхронізації контенту.
У редакторі ICanUp Media Explorer відкривався поверх Content Blocks, але частина елементів редактора все одно могла опинятися над модальним шаром. Показую, чому великий z-index не завжди вирішує таку проблему, як працюють CSS stacking contexts і чому для overlay потрібен чіткий контракт шарів, а не випадкові числа.