Code Ready | Frontend

описание

Авторский канал по Frontend разработке. Ресурсы, гайды, задачи, шпаргалки. Информация ежедневно пополняется! Автор: @energy_c РКН: https://clck.ru/3NJCKs Реклама на бирже: https://telega.in/c/code_ready

← к каналу @code_ready

21 540

подписчиков

Охват к подписчикам

7,2%

ERR

Реакции к просмотрам

1,53%

1 200 на 48 постов

Пересылки к просмотрам

1,94%

1 524

Постов в день

1,9

всего 280

Где отзываются чаще

доля реакций к просмотрам

15 авг.TreeWalker — последовательный обход DOM без создания промежуточной коллекции! При обходе DOM часто используют рекурсию или querySelectorAll(). Это рабочие подходы, но они подходят не для всех задач: рекурсивный обход требует дополнительной логики, а querySelectorAll() сразу формирует статический NodeList со всеми найденными элементами. DOM API предоставляет интерфейс TreeWalker, который позволяет последовательно обходить дерево документа и получать только нужные узлы по мере обхода. Например, создадим объект для обхода элементов: { const walker = document.createTreeWalker( document.body, NodeFilter.SHOW_ELEMENT ); let node; while ((node = walker.nextNode())) { console.log(node.tagName); } } Обход начинается с потомков переданного корневого узла, поэтому сам document.body в цикл не попадёт. TreeWalker поддерживает фильтрацию узлов. Например, можно возвращать только кнопки во время обхода дерева: { const walker = document.createTreeWalker( document.body, NodeFilter.SHOW_ELEMENT, { acceptNode(node) { return node.tagName === 'BUTTON' ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP; } } ); let node; while ((node = walker.nextNode())) { console.log(node); } } Фильтр вызывается для узлов во время обхода, поэтому отдельная коллекция найденных элементов не создаётся. FILTER_SKIP пропускает текущий узел, но продолжает обход его потомков. Если необходимо исключить всё поддерево целиком, используется FILTER_REJECT. TreeWalker также поддерживает навигацию в разных направлениях: walker.parentNode(); walker.firstChild(); walker.lastChild(); walker.previousSibling(); walker.nextSibling(); walker.previousNode(); walker.nextNode(); Например, можно найти первый элемент с атрибутом data-error и сразу прокрутить страницу к нему: { const walker = document.createTreeWalker( document.body, NodeFilter.SHOW_ELEMENT ); let node; while ((node = walker.nextNode())) { if (node.hasAttribute('data-error')) { node.scrollIntoView({ behavior: 'smooth', block: 'center' }); break; } } } В отличие от querySelectorAll(), TreeWalker не создаёт промежуточную коллекцию найденных элементов, а возвращает узлы по мере обхода дерева. При этом TreeWalker не обязательно будет быстрее querySelectorAll() в каждом конкретном случае. Выбор зависит от задачи: для простого поиска по CSS-селектору обычно удобнее querySelector() или querySelectorAll(), а для управляемого последовательного обхода дерева — TreeWalker. 🔥 TreeWalker определён в DOM Standard и предоставляет низкоуровневый механизм навигации по DOM с возможностью фильтрации узлов во время обхода. Он подходит для реализации редакторов, инструментов анализа DOM и библиотек, которым требуется последовательный обход дерева с полным контролем над процессом навигации. 📣 Code Ready | #практика3,03%
14 авг.👩‍💻 Стилизуют элементы формы по валидности! :user-valid и :user-invalid — псевдоклассы, которые совпадают с элементами форм по их валидности, но только после того, как пользователь изменил значение поля (элемент стал «грязным»). Это позволяет показывать обратную связь не сразу при загрузке страницы, а лишь после действия пользователя. Как они работают: • :user-valid — пользователь ввёл корректное значение; • :user-invalid — введённые данные не прошли валидацию. Главное преимущество — форма не показывает ошибку сразу при загрузке страницы. Это удобно для более аккуратной UX-валидации без JavaScript. 📣 Code Ready | #свойство2,51%
13 авг.👩‍💻 Блок для видео, аудио и прочего контента! Блок для вставки на страницу контента в сторонних форматах, которые браузер отображает с помощью плагинов. Чаще всего используется для видео- и аудиоконтента. Отображение вставленного контента будет зависеть от атрибутов тега <embed>, типа загружаемого контента и плагинов, установленных в браузере. Атрибуты: • src — ссылка на загружаемый контент; • type — тип загружаемого контента в формате MIME. Тип указывать не обязательно, но желательно. Так браузер будет точно знать, какой плагин использовать для отображения контента; • width — ширина в пикселях; • height — высота в пикселях. <embed> не заменяет универсальное решение для всех типов контента. Например, для видео лучше использовать <video>, для аудио — <audio>, а для документов чаще применяют <iframe>. 📣 Code Ready | #атрибут2,44%
11 авг.Почему CSS-переменные раньше не анимировались? Многие пытаются сделать так: .box { transition: --angle .3s; } Но обычная CSS-переменная — это просто строка. Браузер не знает, как плавно перейти от 0deg к 180deg, поэтому анимация не работает. Регистрируем переменную через @property. @property --angle { syntax: "<angle>"; } Теперь браузер знает тип значения и умеет интерполировать его. Остаётся использовать переменную как обычно. .box { transform: rotate(var(--angle)); } И менять её значение. .box:hover { --angle: 180deg; } Теперь поворот происходит плавно без JS. 🔥 @property превращает CSS-переменные из обычных строк в типизированные значения, которые можно валидировать и анимировать. 📣 Code Ready | #совет2,31%
13 авг.Проверяй возможности браузера прямо в CSS! Многие делают такие проверки через JavaScript: if ("container" in document.documentElement.style) { // включаем новую логику } Но CSS уже давно умеет сам проверять поддержку возможностей. @supports (display: grid) { .layout { display: grid; } } Это особенно полезно при постепенном внедрении новых CSS API. Например, можно безопасно добавить современные возможности: @supports (interpolate-size: allow-keywords) { .accordion { interpolate-size: allow-keywords; } } Старые браузеры просто проигнорируют этот блок. Для больших проектов это позволяет мигрировать постепенно. @supports not (selector(:has(*))) { /* fallback */ } 🔥 @supports позволяет внедрять новые CSS-возможности без JS-проверок и не ломать поддержку старых браузеров. 📣 Code Ready | #совет2,30%
15 авг.😎 FrontSkill Docs — большая база знаний по Frontend-разработке! Это онлайн-справочник, где собраны материалы по Frontend: HTML, CSS, JavaScript, TypeScript, React и другим технологиям. Документация построена по темам, что позволяет последовательно изучать материал или быстро находить нужную информацию во время разработки. 📌 Оставляю ссылочку: frontskill.ru 📣 Code Ready | #сайт2,16%
25 июл.без подписи2,12%
29 июл.без подписи2,10%
12 авг.Node.normalize(): восстановление нормализованной формы текстовых узлов в DOM! После операций с Text, Range и точечной модификации DOM содержимое элемента может оказаться фрагментировано на несколько соседних текстовых узлов. const container = document.createElement('div'); const text = document.createTextNode('Hello'); container.append(text); const tail = text.splitText(2); console.log([...container.childNodes].map(node => node.data)); // ['He', 'llo'] Для рендеринга это обычно не имеет значения: console.log(container.textContent); // Hello Но для кода, который анализирует структуру дерева через childNodes, firstChild, nextSibling или хранит ссылки на конкретные Text-узлы, такая фрагментация уже существенна. Метод Node.normalize() приводит всё поддерево узла к нормализованной форме: container.normalize(); console.log(container.childNodes.length); // 1 console.log(container.firstChild.data); // Hello Нормализация выполняется рекурсивно и гарантирует, что в обработанном поддереве: не останется пустых текстовых узлов; не останется соседних текстовых узлов без разделяющего их элемента, комментария или другого типа узла. При объединении данные последующих Text-узлов добавляются к первому узлу группы, а сами последующие узлы удаляются из дерева. console.log(tail.parentNode); // null Сохранённая ссылка tail при этом не становится невалидной: объект продолжает существовать, но больше не является частью DOM-дерева. Важно и другое: normalize() не объединяет весь текст элемента в один узел, если между текстовыми узлами находятся другие узлы. Hello DOM! Здесь текст до и после останется в разных Text-узлах и после нормализации. Метод особенно полезен после splitText(), операций с Range и редакторских сценариев, где текстовые узлы регулярно разрезаются и склеиваются: const paragraph = document.createElement('p'); const text = document.createTextNode('Hello world'); paragraph.replaceChildren(text); text.splitText(5); console.log(paragraph.childNodes.length); // 2 paragraph.normalize(); console.log(paragraph.childNodes.length); // 1 🔥 Node.normalize() не меняет текстовое содержимое элемента, но приводит его поддерево к нормализованной форме: без пустых и соседних текстовых узлов. Это полезно перед обходом DOM, сериализацией, сравнением структуры или выполнением алгоритмов, которые рассчитывают на предсказуемую организацию Text-узлов. 📣 Code Ready | #практика2,06%
12 авг.Крутая статья недавно вышла на Хабре: «Заменяем JavaScript с помощью HTML и CSS» В этой статье: • использование `:has()` для управления состояниями компонентов; • создание модальных окон и подсказок через Popover API; • валидация форм с помощью встроенных возможностей браузера; • стилизация сложных интерактивных состояний только средствами CSS. 🔊 Продолжайте читать на Habr! 📣 Code Ready | #статья2,00%
4 авг.Element.replaceChildren() — полная замена содержимого элемента через DOM API! Для полной замены содержимого элемента часто сначала очищают контейнер, а затем добавляют новые узлы либо используют innerHTML. Для этой задачи DOM API предоставляет специализированный метод replaceChildren(). Очистить элемент можно одним вызовом: const list = document.querySelector('.list'); list.replaceChildren(); Метод удаляет все дочерние узлы элемента независимо от их типа. Одновременно можно передать новое содержимое, которое заменит существующее: const list = document.querySelector('.list'); const item = document.createElement('li'); item.textContent = 'JavaScript'; list.replaceChildren(item); После вызова прежние дочерние узлы будут удалены, а переданный элемент станет единственным дочерним узлом контейнера. Метод принимает любое количество DOM-узлов: const container = document.querySelector('.container'); const title = document.createElement('h2'); title.textContent = 'Статьи'; const description = document.createElement('p'); description.textContent = 'Последние публикации'; container.replaceChildren(title, description); Также можно передавать строки: container.replaceChildren('Загрузка...'); Они автоматически преобразуются в текстовые узлы. Если передать существующий DOM-узел, он будет не скопирован, а перемещён: const card = document.querySelector('.card'); const sidebar = document.querySelector('.sidebar'); sidebar.replaceChildren(card); Это соответствует общей модели DOM: один узел не может одновременно находиться в нескольких местах дерева. В отличие от innerHTML, метод не разбирает переданные строки как HTML-разметку: container.replaceChildren('Text'); В контейнер будет добавлен обычный текст: Text Если требуется вставить HTML-разметку, можно использовать innerHTML или insertAdjacentHTML(), но только для доверенной либо предварительно санитизированной разметки. Более безопасный вариант — сформировать необходимое дерево DOM-узлов программно. 🔥 replaceChildren() определён в DOM Standard и позволяет заменить всё содержимое одним вызовом. Это делает намерение кода более явным и избавляет от необходимости отдельно очищать контейнер перед добавлением новых узлов. 📣 Code Ready | #практика1,95%
4 авг.👩‍💻 Создаём списки терминов с помощью <dl>, <dt> и <dd>! Эти три тега используются для создания списков описаний, где каждому термину соответствует его определение или пояснение. Каждый тег выполняет свою роль: • <dl> — контейнер для всего списка. • <dt> — термин или название. • <dd> — описание или значение термина. Использование этих тегов делает разметку более семантичной и помогает браузерам, поисковым системам и вспомогательным технологиям правильно интерпретировать содержимое. 📣 Code Ready | #атрибут1,94%