Code Ready | Frontend

navigator.sendBeacon для отправки данных при закрытии страницы! Если нужно отправить аналитику или финальные данные сессии, обычные HTTP-запросы могут не успеть выполниться — пользователь закрыл вкладку или перешёл на другую страницу. Для таких случаев есть navigator.sendBeacon. Метод ставит данные в очередь на отправку и не блокирует закрытие страницы. Базовый пример: navigator.sendBeacon('/analytics', JSON.stringify({ event: 'page_close' })); Метод принимает URL и данные. Запрос отправляется м...

👩‍💻 Кнопка с эффектом заливки при наведении! Иногда интерфейс выглядит слишком статичным. Небольшие анимации делают элементы более живыми и помогают пользователю быстрее распознавать интерактивность. Как работает: • псевдоэлемент ::before создаёт увеличенный слой внутри кнопки; • форма волны формируется через border-radius; • изначально слой расположен ниже кнопки и скрыт; • при :hover волна поднимается вверх, создавая эффект заполнения. Так можно добавить акцент CTA-кнопкам или карточкам без ...

Почему ellipsis не срабатывает во flex и grid? Во flex и grid элементы по умолчанию не хотят сжиматься меньше своего контента, из-за этого текст может выталкивать соседей и ломать layout: .title { overflow: hidden; text-overflow: ellipsis; } Даже с ellipsis элемент может не обрезаться, потому что ему не разрешено сжиматься: .item { min-width: 0; } Эта строка явно разрешает элементу ужиматься по доступному пространству, и всё начинает работать как ожидается: .item { min-width: 0; } Особенно крити...

Проверка условий в массиве без явного цикла! Когда нужно проверить элементы массива, многие пишут цикл и флаги: let hasEven = false; for (const n of numbers) { if (n % 2 === 0) { hasEven = true; break; } } В JS для таких проверок есть нативные методы — some() и every(), которые позволяют обойтись без явного цикла. Метод some() проверяет, выполняется ли условие хотя бы для одного элемента массива: const hasEven = numbers.some(n => n % 2 === 0); Метод every() проверяет, выполняется ли условие для ...

👩‍💻 Динамичный фон карточки! Иногда обычной рамки недостаточно — элементу не хватает динамики и акцента. В этом приёме граница становится анимированной и вращается вокруг элемента. Как работает: • conic-gradient формирует круговой градиент; • псевдоэлемент выносится за пределы карточки через inset; • анимация вращает слой через transform, не затрагивая layout; • вся интерактивность реализована без скриптов. Градиент вынесен в отдельный слой, поэтому эффект не влияет на содержимое карточки и мо...

Почему “едут” размеры некоторых элементов? По умолчанию (box-sizing: content-box) width и height задают только размер контента, без учёта padding и border. Из-за этого элементы становятся больше, чем ожидаешь, и layout ломается: .box { width: 200px; padding: 20px; } Фактическая ширина здесь будет 240px, что часто приводит к переполнениям: .box { box-sizing: border-box; } Теперь padding и border учитываются внутри заданной ширины, и итоговый размер остаётся 200px: , ::before, *::after { box-sizin...

Как читать элементы массива с конца через at()! Раньше доступ к элементам с конца массива требовал ручных вычислений длины и это ухудшало читаемость кода. Например, чтобы получить последний и предпоследний элементы, обычно писали так. Традиционный способ: const arr = ["a", "b", "c", "d"]; const last = arr[arr.length - 1]; const prev = arr[arr.length - 2]; console.log(last); // "d" console.log(prev); // "c" При сложных выражениях или частых обращениях к последним элементам такой код становится ме...

📂 Напоминалка по объектам в JavaScript! Например, объект помогает хранить данные в формате ключ-значение, а через dot notation, bracket notation и destructuring можно быстро получать и использовать нужные свойства. На картинке — базовые приёмы работы с объектами: создание, доступ к свойствам, изменение значений, добавление новых полей, деструктуризация и методы. Сохрани, чтобы не забыть! 📣 Code Ready | #ресурсы