Webrium
Подписаться

Frontend

Материалов: 19 в этом направлении.

Схема совпадения: браузер с куки распознаётся сайтом, без куки — нетБраузер с кукиБраузер без куки
Просто8 минут

Что такое куки (cookie) и почему сайт вас помнит

Куки — это текстовые метки браузера, которые помогают сайтам запоминать ваши действия и настройки без паролей

Элемент пересекает порог прокрутки и фиксируется (position: sticky)Порог прилипанияПрокрутка страницы
Практика10 минут

position: sticky не работает — где искать причину

Как диагностировать прилипание элемента при прокрутке и устранить ошибки в разметке или стилях

Из нескольких CSS-правил применяется только одно, остальные отфильтрованы каскадомПравила CSSПрименено
Практика9 минут

Стиль не применяется: кто победил в каскаде

Как диагностировать и исправлять проблемы с неприменяемыми стилями в CSS пошагово и без ошибок

Вложенный элемент с z-index 9999 оказывается ниже из-за контекста предка с z-index 19999 внутри 1
Практика10 минут

z-index растёт, а элемент всё равно внизу

Как работают контексты наложения и почему z-index иногда игнорирует даже огромные числа

Вложенные очереди задач: стек вызовов внутри цикла событий, микроочереди и макроочереди с выделенной текущей задачейЦикл событий
Разбор13 минут

Цикл событий в JavaScript простыми словами

Как избежать ошибок при работе с асинхронным кодом и оптимизировать выполнение задач в JavaScript

Сравнение одномерной и двумерной раскладки: Flexbox и Grid как разделённые части одного поляFlexbox (одна ось)Grid (две оси)
Практика9 минут

Flexbox или Grid: как выбрать раскладку

Как выбрать между Flexbox и Grid для разных элементов интерфейса и эффективно совмещать их в одном макете

Три ключевые метрики Core Web Vitals: две в норме, одна выходит за пределы допустимогоЗадержка реакции
Практика7 минут

Core Web Vitals: что действительно двигает оценку

Как устранить задержки при взаимодействии со страницей и сделать её отзывчивой для пользователей

Две части валидации: клиентская для удобства, серверная для безопасности, пересекающие границу системыУдобствоБезопасность
Практика8 минут

Валидация форм: на клиенте, на сервере или везде

Как сделать валидацию удобной для пользователя и безопасной для системы без лишних ошибок и путаницы

Три показателя веса страницы: HTML, CSS, JS в норме, изображения превышают допустимый весИзображения
Практика8 минут

Картинки на сайте: форматы, размеры и ленивая загрузка

Как уменьшить вес изображений на сайте и ускорить загрузку страниц без потери качества

Схема совпадения заголовков CORS: разрешённый и заблокированный запросЗапрос разрешёнЗапрос заблокирован
Разбор9 минут

CORS: почему браузер блокирует запрос и что менять на сервере

Как браузер проверяет безопасность запросов и почему сервер должен правильно настраивать CORS

Ответ из кеша совпадает с источником или разошёлся с нимсовпалоустарело
Практика6 минут

Кеширование по HTTP: заголовки, которые действительно работают

Срок годности и проверка — разные механизмы, и путают их чаще всего

Состояние бывает четырёх видов, и библиотека нужна только одному из нихвиды состояниянужна библиотека
Разбор6 минут

Состояние в React: когда нужна библиотека, а когда нет

Состояние бывает четырёх видов, и библиотека нужна только для одного. Как понять, для какого именно, и когда решение вообще пора принимать.

Цепочка шагов аудита доступности: автоматические проверки разметки лежат внутри границы, а последний шаг — поведение по Tab с реальными барьерами — выходит за евидит автоматбарьер в поведении
Практика12 минут

Доступность как инженерная задача, а не как галочка

Почему чек-листы и оверлеи не делают сайт доступным, где на самом деле живут барьеры и как найти их обычной клавиатурой

Два стыка: CSS встроен в конвейер рендеринга и совпадает с кадром, JS-наблюдатель стоит снаружи и разошёлся — опаздывает на кадрCSS в конвейереJS опаздывает
Разбор9 минут

Что современный CSS убрал из вашего JS

Почему JavaScript-наблюдатели за внешним видом опаздывают на кадр, какие механизмы CSS решают эти задачи внутри конвейера рендеринга и где скрипты остаются обязательными

На шкале времени жизни экрана величина — момент, когда становятся известны входные данные, — пробивает пороговую линию между сервером и клиентом: если данные изсервер/клиентвремя жизни экрана
Практика9 минут

Где проходит граница клиент — сервер

Почему границу между клиентом и сервером нужно проводить не по типам компонентов, а по моменту, когда становятся известны входные данные

Сетка ячеек с заполненной частью изображает вес сборки, а рядом стоит отдельный счётчик другой величины — путь до первого действия: одно число больше не определпуть до действия
Мнение9 минут

Размер бандла больше не главная метрика

Почему война с общим весом сборки не ускоряет приложение и при каких условиях размер бандла всё-таки важен

Поле разделено швом «use client»: элементы-пропсы пересекают границу между сервером и клиентом и становятся сетевым контрактомсерверклиент
Разбор8 минут

Серверные компоненты: год в продакшене

Вы узнаете, как серверные компоненты пересылают дерево по проводам, почему проп через границу становится частью сетевого контракта и какие поломки модели предсказуемы заранее

Два маршрута к тексту: короткий путь сайта-документа и длинная цепочка шагов сайта-программыРаньше: один шагТеперь: цепь шагов
Просто8 минут

Почему сайты стали такими тяжёлыми

Почему сайты превратились из документов в программы, отчего пустой экран стал нормой и кто на самом деле платит за сборку страницы

Шесть ровных по высоте столбцов — скорость WebAssembly — идут выше пунктирной линии плана с самого первого столбца: коду не нужен разогревСкорость со старта
Разбор10 минут

WebAssembly: где он уже окупается

Откуда у WebAssembly берётся скорость, какой ценой она достаётся и почему переписать самую тяжёлую функцию — не решение, а тупик

Письмо по вторникам

Один разбор недели и короткий список того, что изменилось. Без дайджестов на сорок ссылок.

Начните вводить — материалы появятся здесь.

↑↓ выбрать · Enter открыть · Esc закрыть