Code Ready | Frontend

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 | #практика

Верстаешь? Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке: 1. Без опыта сделаешь реальный сайт сервиса доставки с нуля; 2. Добавишь JavaScript-логику, расчёты и трекинг; 3. Подключишь карты и маршрут доставки через API; 4. Превратишь сайт в Angular-приложение; 5. Подключишь backend и выложишь проект в продакшен; 6. Научишься использовать ChatGPT и Giga во Frontend-разработке; 7. Узнаешь 9 способов найти первый заказ на фрилансе даже без опыта. А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 12-летним стажем – Романа Чернова и получишь живую помощь по проекту. 👉 Проскочить на интенсив бесплатно Начинаем уже завтра. 🔥 С нас обучение, практика и помощь с выходом на фриланс или собеседованием.

😎 FrontSkill Docs — большая база знаний по Frontend-разработке! Это онлайн-справочник, где собраны материалы по Frontend: HTML, CSS, JavaScript, TypeScript, React и другим технологиям. Документация построена по темам, что позволяет последовательно изучать материал или быстро находить нужную информацию во время разработки. 📌 Оставляю ссылочку: frontskill.ru 📣 Code Ready | #сайт

👩‍💻 Стилизуют элементы формы по валидности! :user-valid и :user-invalid — псевдоклассы, которые совпадают с элементами форм по их валидности, но только после того, как пользователь изменил значение поля (элемент стал «грязным»). Это позволяет показывать обратную связь не сразу при загрузке страницы, а лишь после действия пользователя. Как они работают: • :user-valid — пользователь ввёл корректное значение; • :user-invalid — введённые данные не прошли валидацию. Главное преимущество — форма не показывает ошибку сразу при загрузке страницы. Это удобно для более аккуратной UX-валидации без JavaScript. 📣 Code Ready | #свойство

Проверяй возможности браузера прямо в 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 | #совет

Код, микросервисы и LLM: чему можно научиться на онлайн-магистратуре Завершается прием на магистратуру ИТМО в партнерстве с Яндексом «Фронтенд-, бэкенд-разработка и ИИ-решения». В программе: • 9 треков: 4 базовых (JS, Python, Java, C++) и 5 продвинутых – с асинхронностью, микросервисами, высоконагруженными системами, Kafka, C++/Boost, NestJS и Spring Boot. • Практика на реальных задачах партнеров программы и сервисов Яндекса, а также возможность работать над собственным проектом. В портфолио будет больше десятка кейсов. • На всех треках: автоматизация задач разработчика с помощью ИИ (код, дебаггинг, тесты, документация и промпт-инжиниринг) • Отдельный трек «ИИ-решения в разработке» – LLM-системы, RAG-пайплайны, мультиагентные сети, создание AI-систем и внедрение AI-компонентов в продакшен. Обучение длится два года и полностью проходит онлайн: лекции идут по вечерам, нагрузку можно заранее планировать. А выпускники получают диплом магистра ИТМО и диплом о профпереподготовке от Яндекса. Подать заявление можно онлайн. Поступление по рекомендательному письму для выпускников Практикума или через вступительные экзамены. Подробнее о программах и поступлении

👩‍💻 Блок для видео, аудио и прочего контента! Блок для вставки на страницу контента в сторонних форматах, которые браузер отображает с помощью плагинов. Чаще всего используется для видео- и аудиоконтента. Отображение вставленного контента будет зависеть от атрибутов тега <embed>, типа загружаемого контента и плагинов, установленных в браузере. Атрибуты: • src — ссылка на загружаемый контент; • type — тип загружаемого контента в формате MIME. Тип указывать не обязательно, но желательно. Так браузер будет точно знать, какой плагин использовать для отображения контента; • width — ширина в пикселях; • height — высота в пикселях. <embed> не заменяет универсальное решение для всех типов контента. Например, для видео лучше использовать <video>, для аудио — <audio>, а для документов чаще применяют <iframe>. 📣 Code Ready | #атрибут

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() не объединяет весь текст элемента в один узел, если между текстовыми узлами находятся другие узлы. <p>Hello <strong>DOM</strong>!</p> Здесь текст до и после <strong> останется в разных 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 | #практика

Издательский дом «Новые отраслевые медиа» собрал для вас лучшие каналы из сферы искусственного интеллекта и интернет-технологий, которые помогают своим подписчикам быть в курсе всех важных профессиональных новостей. Здесь - всё про ключевых игроков отрасли, государственное регулирование, инсайды и кейсы от отраслевых лидеров. ✅Серверная - канал об индустрии дата-центров: технологиях, инфраструктуре, облачных решениях, энергоэффективности и применении ЦОД в ключевых отраслях экономики. ✅Робосфера - канал об индустрии робототехники: технологии и тренды. Промышленные и сервисные роботы, коботы, автоматизация, ИИ, машинное зрение, автономные системы. ✅AI для бизнеса - всё об AI-решениях для бизнеса: внедрение, автоматизация, корпоративный ИИ, агенты. ✅ТехноРитейл - канал о производстве и продаже бытовой техники и электроники в России: бренды, e-com, маркетинг, retail tech. Подписывайтесь, и эти каналы смогут изменить вашу жизнь к лучшему! Реклама. Харламов А.Е. ИНН 712803816807. erid: 2W5zFJRaaAD

Крутая статья недавно вышла на Хабре: «Заменяем JavaScript с помощью HTML и CSS» В этой статье: • использование `:has()` для управления состояниями компонентов; • создание модальных окон и подсказок через Popover API; • валидация форм с помощью встроенных возможностей браузера; • стилизация сложных интерактивных состояний только средствами CSS. 🔊 Продолжайте читать на Habr! 📣 Code Ready | #статья

Почему 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 | #совет

🔴 Тестовое собеседование на Frontend-разработчика со старшим разработчиком ex. Сбер 13 августа(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Даниил Дмитриев, старший разработчик в R-Vision, ex. Сбер, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Даниил будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Даниилу Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

👩‍💻 Тег для рисования графики и анимаций прямо в браузере! Тег <canvas> добавляет растровый холст на страницу. Этот холст можно использовать для отрисовки 2D- или 3D-графики, анимаций, видео. Он используется для: • интерактивных графиков и диаграмм; • анимаций и визуальных эффектов; • браузерных игр; • обработки изображений; • 2D- и 3D-графики через Canvas API и WebGL. Для работы с холстом обычно получают один из контекстов: • 2d — обычная двумерная графика; • webgl — аппаратно ускоренная 3D-графика. Элементы, нарисованные внутри <canvas>, не являются отдельными DOM-элементами — браузер воспринимает их как единое изображение 📣 Code Ready | #атрибут

🤔 Путь HTML/CSS — полезный ресурс для изучения верстки! Здесь разобраны основы создания веб-страниц: структура HTML-документа, теги, семантика, CSS-свойства, блочная модель, позиционирование, формы, адаптивная верстка и работа с реальными макетами. Нужно не просто читать материал, а выполнять задания: сверстать блоки, меню, формы, вкладки и полноценную страницу по макету. Оставляю ссылочку: GitHub 📱 📣 Code Ready | #репозиторий

👩‍💻 Правильный способ расшифровать аббревиатуры! Тег <abbr> используется для обозначения аббревиатур и сокращений. Благодаря атрибуту title можно указать их полную расшифровку, которую браузер обычно показывает при наведении курсора. Чаще всего <abbr> используют для: • технических терминов (HTML, CSS, API); • названий организаций; • единиц измерения; • общепринятых сокращений. Для максимальной пользы рекомендуется всегда указывать атрибут title с полной расшифровкой сокращения. 📣 Code Ready | #атрибут

Вышла интересная статья на Хабре: «TAMA-90: тамагочи из 90-х своими руками на JavaScript»! В этой статье: • Показывается, как создать современную версию тамагочи на чистом JavaScript без фреймворков и сторонних библиотек; • Разбирается архитектура проекта, работа с Canvas, localStorage, игровой логикой, случайными событиями и мини-играми; • Объясняется, как программно рисовать пиксельных питомцев, организовать сохранения, коллекцию персонажей и систему развития без готовых спрайтов. 🔊 Продолжайте читать на Habr! 📣 Code Ready | #статья

URL.canParse() — нативная проверка URL без try...catch! При работе с пользовательскими данными часто требуется проверить, может ли строка быть разобрана как URL. Распространённый подход — использовать конструктор URL внутри try...catch, поскольку при некорректной строке он выбрасывает исключение: try { new URL(value); } catch { console.log('Не удалось разобрать URL'); } Современный Web API предоставляет более удобный способ — статический метод URL.canParse(). Он проверяет, может ли строка быть разобрана по алгоритму URL Standard, и возвращает true или false без использования try...catch: URL.canParse('https://example.com'); // true URL.canParse('not-a-url'); // false Для относительных адресов необходимо передать базовый URL: URL.canParse('/users/1', 'https://example.com'); // true Без базового URL такой вызов вернёт false, поскольку относительный адрес невозможно разрешить без контекста. Если нужен только результат проверки, URL.canParse() — оптимальный выбор. Если после проверки требуется объект URL, удобнее сразу использовать URL.parse(), чтобы не выполнять разбор дважды: const url = URL.parse(value); if (url) { console.log(url.hostname); } URL.parse() возвращает объект URL при успешном разборе и null при ошибке. Например, для проверки пользовательского ввода: const input = document.querySelector('input'); if (!URL.canParse(input.value)) { input.setCustomValidity('Введите абсолютный URL'); } else { input.setCustomValidity(''); } Если приложение допускает относительные адреса, передайте document.baseURI вторым аргументом. Важно понимать, что URL.canParse() проверяет только возможность разбора строки. Метод не проверяет существование ресурса, доступность сервера, допустимость протокола для приложения или безопасность адреса. Например, URL с протоколом javascript: или data: может успешно пройти проверку. Если приложение принимает только HTTPS, протокол необходимо проверить отдельно: const url = URL.parse(value); if (url?.protocol === 'https:') { // дальнейшая обработка } Перед выполнением запроса удобно сразу получить объект URL: const url = URL.parse(apiUrl, document.baseURI); if (!url || !['http:', 'https:'].includes(url.protocol)) { throw new Error('Недопустимый адрес API'); } await fetch(url); document.baseURI учитывает базовый адрес документа, включая значение элемента <base>. Проверка протокола также не защищает от SSRF, поэтому на сервере необходима дополнительная валидация адресов. 🔥 URL.canParse() подходит для случаев, когда нужна только проверка возможности разбора URL, а URL.parse() — когда требуется сразу получить объект URL. При использовании этих методов в проектах с поддержкой старых браузеров и устаревших WebView следует учитывать совместимость. 📣 Code Ready | #практика

👩‍💻 Можно ли одной строкой сбросить все CSS-свойства элемента? Свойство all позволяет одновременно сбросить или переопределить почти все CSS-свойства элемента. Это удобно, когда нужно убрать влияние внешних стилей и начать оформление с чистого листа. Основные значения: • initial — сбрасывает свойства к значениям по умолчанию; • inherit — наследует все свойства от родителя; • unset — сочетает initial и inherit в зависимости от свойства; • revert — возвращает стили, заданные браузером или пользовательскими стилями. all часто используют при создании собственных компонентов, кнопок и виджетов, чтобы быстро избавиться от нежелательных стилей без перечисления каждого свойства отдельно. 📣 Code Ready | #свойство

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('<strong>Text</strong>'); В контейнер будет добавлен обычный текст: <strong>Text</strong> Если требуется вставить HTML-разметку, можно использовать innerHTML или insertAdjacentHTML(), но только для доверенной либо предварительно санитизированной разметки. Более безопасный вариант — сформировать необходимое дерево DOM-узлов программно. 🔥 replaceChildren() определён в DOM Standard и позволяет заменить всё содержимое одним вызовом. Это делает намерение кода более явным и избавляет от необходимости отдельно очищать контейнер перед добавлением новых узлов. 📣 Code Ready | #практика

👩‍💻 Создаём списки терминов с помощью <dl>, <dt> и <dd>! Эти три тега используются для создания списков описаний, где каждому термину соответствует его определение или пояснение. Каждый тег выполняет свою роль: • <dl> — контейнер для всего списка. • <dt> — термин или название. • <dd> — описание или значение термина. Использование этих тегов делает разметку более семантичной и помогает браузерам, поисковым системам и вспомогательным технологиям правильно интерпретировать содержимое. 📣 Code Ready | #атрибут