Code Ready | Frontend

ResizeObserver — отслеживание размеров элементов на уровне разметки! Размер DOM-элемента не всегда связан с размером окна браузера. Компонент может менять свои размеры из-за изменения родительского контейнера, перестроения flex или grid-разметки, открытия боковой панели или изменения структуры интерфейса. window.resize отслеживает только изменение размеров viewport и не позволяет узнать, что изменился конкретный элемент. window.addEventListener( 'resize', () => { updateLayout(); } ); Например, открытие sidebar может уменьшить рабочую область компонента с 1100px до 900px, при этом размер окна останется прежним. Событие resize не сработает, хотя компоненту уже нужен перерасчёт. Для отслеживания размеров конкретных DOM-элементов используется ResizeObserver: const observer = new ResizeObserver(([entry]) => { const width = entry.contentRect.width; renderChart(width); }); observer.observe(chart); Компонент получает информацию о собственном размере и не зависит от того, где он находится: внутри модального окна, боковой панели или полноэкранного блока. При работе с ResizeObserver важно учитывать возможность цикла изменений. Если внутри обработчика менять размер наблюдаемого элемента, это может вызвать повторное изменение и новый вызов наблюдателя: const observer = new ResizeObserver(([entry]) => { const width = entry.contentRect.width; element.style.width = `${width + 10}px`; }); Браузер может обнаружить такой цикл и ограничить дальнейшую доставку уведомлений. Обычно измерение и изменение интерфейса разделяют, например перенося обновление DOM в следующий кадр отрисовки: const observer = new ResizeObserver(([entry]) => { const width = entry.contentRect.width; requestAnimationFrame(() => { updateUI(width); }); }); requestAnimationFrame помогает разделить чтение размеров и изменение DOM, но не исправляет ситуацию, когда логика постоянно изменяет размеры наблюдаемого элемента. Наблюдатель должен иметь собственный жизненный цикл. Создание новых экземпляров при каждом обновлении компонента приводит к лишним подпискам: const observer = new ResizeObserver(callback); observer.observe(element); // очистка observer.disconnect(); Для современных браузеров доступны более точные способы измерения через contentBoxSize и borderBoxSize: const observer = new ResizeObserver(([entry]) => { const width = entry.borderBoxSize?.[0]?.inlineSize ?? entry.borderBoxSize?.inlineSize ?? entry.contentRect.width; updateLayout(width); }); borderBoxSize учитывает padding и border, поэтому подходит для случаев, когда расчёты должны соответствовать фактическому размеру блока. ResizeObserver не заменяет CSS-механизмы адаптивности. Если изменение касается только отображения, лучше использовать container queries: @container (min-width: 600px) { .card { display: grid; } } ResizeObserver нужен там, где размер элемента влияет на логику приложения: перерасчёт графиков, размеры canvas, виртуализация списков и другие операции, требующие данных о размере DOM-элемента в js. 🔥 ResizeObserver позволяет синхронизировать логику приложения с реальными размерами элементов и является более точным инструментом для компонентной архитектуры, чем отслеживание только изменения окна. 📣 Code Ready | #практика

📱 Iterator API — управление итерацией и ленивые преобразования! Шпаргалка по основным возможностям Iterator API: ручное управление итерацией, досрочное завершение и передача ошибок, создание iterable-объектов и ленивые преобразования через Iterator Helpers. Полезная база для углубления знаний об итераторах, генераторах и обработке последовательностей данных. 📣 Code Ready | #шпора

<template> — храним HTML-разметку без её отображения на странице Когда структура элемента известна заранее, собирать её вручную через createElement() не всегда удобно: разметка смешивается с логикой и увеличивает объём js. Для таких случаев в HTML существует <template> — элемент для хранения готовой DOM-заготовки без её отображения на странице: const card = document.createElement('article'); const title = document.createElement('h2'); const button = document.createElement('button'); card.className = 'card'; title.className = 'card__title'; button.className = 'card__button'; card.append(title, button); Ту же структуру можно описать декларативно непосредственно в HTML: <template id="card-template"> <article class="card"> <h2 class="card__title"></h2> <button class="card__button"> Открыть </button> </article> </template> Браузер парсит содержимое <template> как HTML, но не отображает его и не включает в активное дерево документа: <template> <h2>Карточка пользователя</h2> </template> Содержимое шаблона доступно через свойство content, которое представляет собой DocumentFragment: const template = document.querySelector( '#card-template' ); console.log(template.content); // DocumentFragment Поэтому искать элементы шаблона необходимо внутри content, а не через сам <template>: template.querySelector('.card'); // null template.content.querySelector('.card'); // <article class="card">...</article> Для создания независимого экземпляра содержимое шаблона можно импортировать в текущий документ с глубоким копированием: const fragment = document.importNode( template.content, true ); document.body.append(fragment); Аргумент true означает глубокое копирование вместе со всеми вложенными узлами. До вставки экземпляр можно заполнить данными, не изменяя исходный шаблон: const fragment = document.importNode( template.content, true ); fragment.querySelector('.card__title').textContent = 'JavaScript'; document.body.append(fragment); Один шаблон можно использовать многократно, каждый раз получая независимую DOM-структуру: function createCard(title) { const fragment = document.importNode( template.content, true ); fragment.querySelector('.card__title').textContent = title; return fragment; } document.body.append( createCard('JavaScript'), createCard('TypeScript'), createCard('Node.js') ); <template> не следует путать с обычным скрытым контейнером: hidden скрывает элемент визуально, но его содержимое остаётся частью документа: <div hidden> <video src="video.mp4" autoplay></video> </div> У <template> содержимое хранится отдельно и становится частью активного DOM только после создания и вставки экземпляра: <template id="video-template"> <video src="video.mp4" autoplay></video> </template> Есть важный нюанс с событиями: обработчики, зарегистрированные через addEventListener(), при копировании DOM-структуры не переносятся: const button = template.content.querySelector('.card__button'); button.addEventListener('click', handler); const fragment = document.importNode( template.content, true ); Обработчик необходимо назначить уже созданному экземпляру либо использовать делегирование событий: const button = fragment.querySelector('.card__button'); button.addEventListener('click', handler); На практике <template> подходит для карточек, строк таблицы, элементов списка, уведомлений и других повторяемых частей интерфейса с заранее известной структурой: function createUser(user) { const fragment = document.importNode( template.content, true ); fragment.querySelector('.card__title').textContent = user.name; return fragment; } 🔥 <template> позволяет хранить HTML-заготовку вне активного DOM и создавать из неё независимые экземпляры по мере необходимости, оставляя структуру в HTML, а работу с данными и поведением — в js. 📣 Code Ready | #практика

🎓 Как гарантированно войти в сферу кибербезопасности с официальным дипломом? Самостоятельное обучение в ИБ - это месяцы хаоса и разрозненных роликов с YouTube. Покупка курсов по отдельности на популярных платформах легко переваливает за 300 000 ₽. 🔥CyberYozh Academy собрали цельный карьерный трек в один пак: 5 фундаментальных программ + официальный Диплом системного администратора за 50 000 ₽ (вместо ~250 000 ₽) Что входит в программу: ▪️ Linux CyberPunk - системное администрирование с выдачей диплома, открывающего двери в корпоративный сектор. ▪️ SQL для хакера - глубокое понимание архитектуры баз данных и векторов атак. ▪️ HackerPoint - продвинутый уровень пентеста и анализа уязвимостей. ▪️ HackerPoint (Blue vs Red Team) - база сетевой безопасности, защиты и атак. ▪️ AI-помощники на Python - автоматизация рутины безопасника при помощи нейросетей. Вы получаете законченную квалификацию: от администрирования защищенных облачных решений до проведения тестов на проникновение. ⚠️ Обратите внимание: Из-за персональной проверки заданий и официального оформления дипломов на каждый поток действует жесткий лимит - не более 15 мест. 🦔Отправь промокод FrontendReady в чат с менеджером, чтобы закрепить за собой скидку и узнать подробности: 👉@cyacademy_support

👩‍💻 Создаём плавные анимации при переходе между страницами! Правило @view-transition позволяет управлять поведением View Transition API при навигации между документами. С его помощью можно включить плавные переходы между страницами без необходимости вручную запускать их через JS. Основные параметры: • navigation: auto — включает переходы при навигации между страницами; • types — задаёт типы переходов, которые затем можно использовать для разных анимаций. @view-transition полезно для многостраничных сайтов: смену страниц можно сделать визуально плавной, а сами анимации настроить через CSS-псевдоэлементы View Transition. 📣 Code Ready | #свойство

Не используй overflow: hidden, если нужно только обрезать контент! overflow: hidden часто ставят просто для обрезки того, что выходит за границы блока. .wrapper { overflow: hidden; } Но у него есть побочный эффект: элемент становится контейнером прокрутки, даже если полос прокрутки нет. Это может влиять на поведение position: sticky, программную прокрутку и поиск ближайшего скролл-контейнера. Если прокрутка вообще не нужна, есть более точное значение. .wrapper { overflow: clip; } Контент по-прежнему обрезается, но контейнер прокрутки не создаётся. Поэтому sticky внутри такого блока может ориентироваться на внешний скролл-контейнер, а не останавливаться на .wrapper. Разница особенно заметна в такой структуре. <div class="wrapper"> <aside class="sidebar">...</aside> </div> .wrapper { overflow: clip; } .sidebar { position: sticky; top: 16px; } Есть ещё полезная деталь: расстояние, на котором происходит обрезка, можно увеличить отдельно. .wrapper { overflow: clip; overflow-clip-margin: 8px; } Это удобно, когда содержимое нужно обрезать, но хочется сохранить несколько пикселей для визуального эффекта вроде тени. 🔥 overflow: clip широко доступен в современных браузерах. Важно только не считать его полной заменой hidden: если элемент действительно должен программно прокручиваться, нужен overflow: hidden или другое прокручиваемое значение. 📣 Code Ready | #совет

😎 CSS Interview Cheatsheet — 100 вопросов для подготовки к собеседованиям! В репозитории собраны вопросы по CSS и CSS-фреймворкам, которые помогают проверить не только знание синтаксиса, но и понимание более сложных нюансов верстки и стилизации. Удобно использовать для самопроверки и поиска тем, которые стоит повторить перед техническим интервью. Оставляю ссылочку: GitHub 📱 📣 Code Ready | #репозиторий

🤔 Типичный верстальщик — база материалов по frontend-разработке! Сайт с большой подборкой статей, руководств и справочных материалов для веб-разработчиков. Основное внимание уделено HTML, CSS, JavaScript и современной вёрстке — от базовых принципов до практических приёмов, которые используются в проектах. На сайте можно найти материалы по Flexbox и Grid, адаптивной вёрстке, типографике, доступности, оптимизации сайтов, работе с изображениями, CSS-анимациям и др. 📌 Оставляю ссылочку: tpverstak.ru 📣 Code Ready | #сайт

👩‍💻 Псевдокласс, который отражает состояние чекбокса или радиокнопки! Псевдокласс :checked в CSS применяется к отмеченным элементам формы — например, checkbox и radio. Он позволяет менять их оформление в зависимости от текущего состояния. Примеры использования: • менять цвет выбранного элемента; • создавать кастомные чекбоксы и радиокнопки; • стилизовать связанные элементы через CSS-селекторы; • создавать простые переключатели без JavaScript. По задумке должен работать и с <option>, но поскольку выпадающий список сильно отличается от системы к системе и от браузера к браузеру, то пока работает только в браузере Chrome на Windows. 📣 Code Ready | #свойство

❤️ iu5git/Web — практический курс по созданию полноценного веб-приложения! В репозитории собраны материалы по всему циклу разработки: от проектирования архитектуры и базы данных до создания REST API, frontend-приложения на React, авторизации, Docker-развертывания и подготовки технической документации. Отличный материал для изучения разработки. Оставляю ссылочку: GitHub 📱 📣 Code Ready | #репозиторий