Code Ready | Frontend
رفتن به کانال در Telegram
Авторский канал по Frontend разработке. Ресурсы, гайды, задачи, шпаргалки. Информация ежедневно пополняется! Автор: @energy_c РКН: https://clck.ru/3NJCKs Реклама на бирже: https://telega.in/c/code_ready
نمایش بیشتر📈 تحلیل کانال تلگرام Code Ready | Frontend
کانال Code Ready | Frontend (@code_ready) در بخش زبانی روسی بازیگری فعال است. در حال حاضر جامعه شامل 21 699 مشترک است و جایگاه 5 997 را در دسته فناوری و برنامهها و رتبه 30 482 را در منطقه روسيا دارد.
📊 شاخصهای مخاطب و پویایی
از زمان ایجاد در невідомо، پروژه رشد سریعی داشته و 21 699 مشترک جذب کرده است.
بر اساس آخرین دادهها در تاریخ 25 اوت, 2026، کانال فعالیت پایداری دارد. در ۳۰ روز گذشته تغییر اعضا برابر 192 و در ۲۴ ساعت گذشته برابر 18 بوده و همچنان دسترسی گستردهای حفظ شده است.
- وضعیت تأیید: تأیید نشده
- نرخ تعامل (ER): میانگین تعامل مخاطب 7.98% است و در ۲۴ ساعت نخست پس از انتشار، محتوا معمولاً 4.56% واکنش نسبت به کل مشترکان کسب میکند.
- دسترسی پستها: هر پست به طور میانگین 1 731 بازدید دریافت میکند. در اولین روز معمولاً 990 بازدید جمعآوری میشود.
- واکنشها و تعامل: مخاطبان بهطور فعال حمایت میکنند؛ میانگین واکنش به هر پست 23 است.
- علایق موضوعی: محتوا بر موضوعات کلیدی مانند css, браузер, интерфейс, загрузка, api تمرکز دارد.
📝 توضیح و سیاست محتوایی
نویسنده این فضا را محل بیان دیدگاههای شخصی توصیف میکند:
“Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!
Автор: @energy_c
РКН: https://clck.ru/3NJCKs
Реклама на бирже: https://telega.in/c/code_ready”
به لطف بهروزرسانیهای پرتکرار (آخرین داده در تاریخ 26 اوت, 2026)، کانال همواره بهروز و دارای دسترسی بالاست. تحلیلها نشان میدهد مخاطبان بهطور فعال با محتوا تعامل دارند و آن را به نقطه اثرگذاری مهم در دسته فناوری و برنامهها تبدیل کردهاند.
21 699
مشترکین
+1824 ساعت
+827 روز
+19230 روز
در حال بارگیری داده...
کانالهای مشابه
![Frontender's notes [ru]](https://cdn.tlmtr.io/_next/image?url=https%3A%2F%2Fimg.tlmtr.io%2Fc%2F1qrVZ3%2F5348049928330532677%3Fty%3Dx&w=96&q=75){kind=small}
ابر برچسبها
اشارات ورودی و خروجی
---
---
---
---
---
---
جذب مشترکین
اوت '26
اوت '26
+544
در 285 کانالها
ژوئیه '26
+63
در 38 کانالها
Get PRO
ژوئن '26
+123
در 19 کانالها
Get PRO
مه '26
+159
در 31 کانالها
Get PRO
آوریل '26
+90
در 31 کانالها
Get PRO
مارس '26
+234
در 68 کانالها
Get PRO
فوریه '26
+220
در 22 کانالها
Get PRO
ژانویه '26
+1 062
در 125 کانالها
Get PRO
دسامبر '25
+433
در 124 کانالها
Get PRO
نوامبر '25
+1 202
در 266 کانالها
Get PRO
اکتبر '25
+733
در 100 کانالها
Get PRO
سپتامبر '25
+1 126
در 108 کانالها
Get PRO
اوت '25
+1 117
در 240 کانالها
Get PRO
ژوئیه '25
+897
در 55 کانالها
Get PRO
ژوئن '25
+1 017
در 87 کانالها
Get PRO
مه '25
+2 027
در 323 کانالها
Get PRO
آوریل '25
+117
در 1 کانالها
Get PRO
مارس '25
+130
در 2 کانالها
Get PRO
فوریه '25
+125
در 0 کانالها
Get PRO
ژانویه '25
+130
در 3 کانالها
Get PRO
دسامبر '24
+234
در 5 کانالها
Get PRO
نوامبر '24
+259
در 7 کانالها
Get PRO
اکتبر '24
+2 497
در 247 کانالها
Get PRO
سپتامبر '24
+3 493
در 269 کانالها
Get PRO
اوت '24
+337
در 2 کانالها
Get PRO
ژوئیه '24
+140
در 1 کانالها
Get PRO
ژوئن '24
+793
در 7 کانالها
Get PRO
مه '24
+2 442
در 26 کانالها
Get PRO
آوریل '24
+2 945
در 37 کانالها
Get PRO
مارس '24
+1 802
در 42 کانالها
Get PRO
فوریه '24
+1 591
در 37 کانالها
Get PRO
ژانویه '24
+4 288
در 28 کانالها
Get PRO
دسامبر '23
+795
در 23 کانالها
Get PRO
نوامبر '23
+693
در 31 کانالها
Get PRO
اکتبر '23
+443
در 12 کانالها
| تاریخ | رشد مشترکین | اشارات | کانالها | |
| 26 اوت | +9 | |||
| 25 اوت | +26 | |||
| 24 اوت | +50 | |||
| 23 اوت | +8 | |||
| 22 اوت | +8 | |||
| 21 اوت | +10 | |||
| 20 اوت | +18 | |||
| 19 اوت | +34 | |||
| 18 اوت | +48 | |||
| 17 اوت | +43 | |||
| 16 اوت | +10 | |||
| 15 اوت | +5 | |||
| 14 اوت | +3 | |||
| 13 اوت | +7 | |||
| 12 اوت | +19 | |||
| 11 اوت | +87 | |||
| 10 اوت | +138 | |||
| 09 اوت | 0 | |||
| 08 اوت | +5 | |||
| 07 اوت | +3 | |||
| 06 اوت | +7 | |||
| 05 اوت | +2 | |||
| 04 اوت | +1 | |||
| 03 اوت | +2 | |||
| 02 اوت | +1 | |||
| 01 اوت | 0 |
پستهای کانال
+4
📱 Range API — работа с фрагментами DOM!
В этой шпаргалке собраны основные методы Range API для программной работы с диапазонами и фрагментами DOM. Здесь показано, как задавать начальную и конечную границы диапазона, выбирать узел целиком или только его содержимое, копировать и извлекать выбранные фрагменты, вставлять новые DOM-узлы в заданную позицию, а также получать текстовое содержимое диапазона.
📣 Code Ready | #шпора| 2 |  👩💻 Выделяем элементы в фокусе и их родителей!
Псевдокласс :focus-within применяется к элементам, которые либо сами находятся в фокусе, либо имеют дочерние элементы в фокусе. Срабатывает, когда фокус получает сам элемент или любой из его потомков. Например, можно изменить оформление всей формы, когда пользователь перешёл в одно из её полей.
Примеры использования:
• подсветить контейнер с <input> при вводе;
• изменить рамку всей формы;
• выделить пункт меню при фокусе на вложенной ссылке;
• показать дополнительные элементы управления.
В отличие от :focus, который реагирует только на фокус самого элемента, :focus-within учитывает фокус и на всех элементах внутри него.
📣 Code Ready | #свойство | 1 066 |
| 3 | Разбираем HTMLDialogElement — нативная модель модальных интерфейсов в браузере!
Несмотря на большое количество UI-библиотек, модальные окна часто остаются одним из компонентов, где разработчики повторяют одну и ту же инфраструктуру: создание overlay, блокировку прокрутки, управление focus lifecycle, обработку Escape, восстановление фокуса и синхронизацию состояния компонента.
HTMLDialogElement решает эту задачу на уровне платформы. Элемент <dialog> является частью HTML Standard и предоставляет браузерную модель поведения для диалоговых интерфейсов без необходимости вручную воспроизводить базовую механику. Базовая структура:
<dialog id="confirmDialog">
<p>Удалить запись?</p>
<button value="cancel">
Отмена
</button>
<button value="confirm">
Удалить
</button>
</dialog>
После получения ссылки на элемент становится доступен полный API HTMLDialogElement:
const dialog = document.querySelector(
'#confirmDialog'
);
У элемента есть два принципиально разных режима открытия.show() переводит <dialog> в состояние отображения без модального поведения:
dialog.show();
Такой режим используется для немодальных сценариев, когда пользователь может продолжать взаимодействовать с остальным интерфейсом.
showModal() создаёт настоящий modal dialog:
dialog.showModal();
В этом режиме браузер добавляет элемент в специальный top layer, устанавливает модальное состояние, ограничивает взаимодействие с остальным документом и управляет фокусом внутри диалога.
Это отличается от обычного display: block, поскольку модальное поведение реализуется самим браузером, а не JavaScript-кодом приложения. Закрытие выполняется через:
dialog.close();
При необходимости можно передать результат завершения операции:
dialog.close('confirmed');
console.log(
dialog.returnValue
);
returnValue позволяет отделить состояние интерфейса от бизнес-логики. Например, один компонент диалога может использоваться для подтверждения удаления, отмены действия или выбора варианта.
Для форм внутри <dialog> существует специальный механизм method="dialog":
<form method="dialog">
<button value="cancel">
Отмена
</button>
<button value="confirm">
Подтвердить
</button>
</form>
При отправке такой формы браузер автоматически закрывает диалог и записывает значение активной кнопки в returnValue. Состояние элемента доступно через стандартное свойство:
console.log(
dialog.open
);
Для интеграции с состоянием приложения используются события жизненного цикла. После закрытия:
dialog.addEventListener(
'close',
() => {
console.log(
dialog.returnValue
);
}
);
Попытка закрытия через Escape вызывает событие cancel:
dialog.addEventListener(
'cancel',
event => {
event.preventDefault();
}
);
Это позволяет реализовать сценарии, где пользователь должен явно подтвердить действие перед закрытием.
Визуальное оформление модального слоя также предусмотрено платформой:
dialog::backdrop {
background: rgb(0 0 0 / 0.5);
}
Главное преимущество <dialog> заключается в переносе части ответственности из прикладного кода в браузерный runtime: управление фокусом, modal top layer, клавиатурное взаимодействие и базовая интеграция с accessibility.
🔥 Для стандартных модальных сценариев HTMLDialogElement позволяет избежать реализации собственного modal framework. Дополнительная логика требуется только там, где интерфейс выходит за пределы поведения, предусмотренного HTML Standard.
📣 Code Ready | #практика | 929 |
| 4 |  Если вы уже используете ChatGPT, Claude или Cursor в разработке, но всё равно большую часть работы делаете руками — вы используете ИИ далеко не на максимум.
25 августа Хекслет проведёт бесплатный воркшоп, где покажут, как встроить AI-агента непосредственно в процесс разработки.
За 2 часа на реальном репозитории:
— настроите контекст проекта и AGENTS.md;
— дадите агенту задачу от issue до готового кода;
— подключите тесты и CI;
— автоматизируете code review;
— подключите RAG и MCP для работы с документацией, тикетами и API.
В результате — не набор промптов, а готовый процесс работы с AI-агентом.
25 августа, 19:00
Бесплатно.
👉 Записаться на вебинар
#реклама
О рекламодателе | 917 |
| 5 |  👩💻 Нативный раскрывающийся блок с контентом без JavaScript!
Теги <details> и <summary> позволяют создавать интерактивные блоки, содержимое которых пользователь может раскрывать и скрывать прямо средствами HTML.
Каждый из тегов выполняет свою роль:
• <details> — содержит скрываемый и раскрываемый контент;
• <summary> — задаёт видимый заголовок, по которому можно кликнуть для переключения состояния блока.
По умолчанию содержимое <details> скрыто. Если добавить атрибут open, блок будет изначально раскрыт. Такая конструкция отлично подходит для FAQ, дополнительной информации, настроек, примечаний и других элементов интерфейса, которые не нужно постоянно держать на экране.
При этом базовое раскрытие и сворачивание работает без единой строки JS.
📣 Code Ready | #атрибут | 1 163 |
| 6 |  Получаем порядковый номер элемента прямо в CSS!
Для каскадной анимации списка часто приходится передавать индекс из JavaScript или прописывать :nth-child() для каждого элемента.
<div style={{ "--i": index }} />
В CSS появились функции sibling-index() и sibling-count(): первая возвращает позицию элемента среди всех дочерних элементов родителя, начиная с 1, вторая — их общее количество.
Поэтому задержку от 0ms можно вычислить автоматически:
.item {
animation-delay: calc((sibling-index() - 1) * 80ms);
}
Добавили десятый элемент — ничего менять не нужно. Его индекс вычислится из DOM автоматически.
Общее количество элементов тоже доступно прямо в выражении:
.item {
--total: sibling-count();
}
Это можно использовать для stagger-анимаций, распределения элементов и вычислений, которые раньше требовали --i, :nth-child() или генерации CSS из JavaScript.
🔥 Функции учитывают все соседние элементы одного родителя, а не только элементы с классом .item. Поддержка пока ограничена, поэтому перед использованием нужно проверить целевые браузеры.
📣 Code Ready | #совет | 1 370 |
| 7 |  Очнись, нас готовят к цифровому ГУЛАГу
Уже в десятках регионов России отключают мобильный интернет (даже когда нет атак БПЛА), тестируют «белые списки» и замедляют Телегу.
90% людей тупо смотрят на уплывающий корабль свободного Интернета. Люди поумнее готовятся к новой реальности и читают «Пакет Безопасности».
Здесь дают самые свежие связки для приватности: приложения и утилиты на случай вайтлистов, прокси, браузеры, сервисы — чего тут только нет.
Без шуток, сейчас это один из самых полезных каналов в Телеге. Надеемся на лучшее, но к чему нужно готовиться — вы и сами понимаете: @package_security | 1 064 |
| 8 |  🐱 Awesome Frontend Dev — большая подборка материалов и инструментов для frontend-разработчика!
Здесь собраны учебники, справочники, курсы и полезные сервисы по HTML, CSS, JavaScript, TypeScript, React, Next.js, Node.js и SQL. Есть отдельные подборки для изучения Flexbox и Grid, тренировки задач на Codewars и LeetCode, подготовки к собеседованиям, работы с GitHub, размещения проектов и использования AI-инструментов в разработке.
Оставляю ссылочку: GitHub 📱
📣 Code Ready | #репозиторий | 1 350 |
| 9 | Element.toggleAttribute() — нативное переключение DOM-атрибутов!
В DOM многие состояния элементов представлены через наличие или отсутствие атрибутов: disabled, hidden, required и пользовательские атрибуты состояния компонентов. Element.toggleAttribute() предоставляет нативный механизм для управления такими состояниями без ручной проверки текущего значения.
До появления toggleAttribute() подобные операции обычно реализовывались через отдельную проверку наличия атрибута и последующее добавление либо удаление:
const button = document.querySelector('button');
if (button.hasAttribute('disabled')) {
button.removeAttribute('disabled');
} else {
button.setAttribute('disabled', '');
}
Element.toggleAttribute() объединяет эту логику в один вызов. Метод проверяет текущее состояние атрибута и выполняет противоположное действие.
button.toggleAttribute('disabled');
Если атрибут отсутствует — он будет добавлен. При повторном вызове — удалён.
Для boolean HTML-атрибутов важно учитывать, что браузер анализирует сам факт присутствия атрибута, а не его значение.
<button disabled>
Submit
</button>
а также
<button disabled="">
Submit
</button>
имеют одинаковое поведение.
Метод возвращает boolean, отражающий состояние атрибута после выполнения операции:
const isDisabled = button.toggleAttribute('disabled');
console.log(isDisabled); // true
Дополнительно toggleAttribute() поддерживает второй аргумент force, который позволяет явно задать требуемое состояние вместо переключения.
button.toggleAttribute('disabled', true); // добавить атрибут
button.toggleAttribute('disabled', false); // удалить атрибут
Этот вариант удобен при синхронизации DOM с состоянием приложения, когда итоговое значение уже вычислено:
input.toggleAttribute('required', isRequired);
toggleAttribute() работает с любыми валидными DOM-атрибутами, включая пользовательские флаги состояния компонентов:
const card = document.querySelector('.card');
card.toggleAttribute('data-selected');
После выполнения:
<div class="card" data-selected></div>
На практике метод используется для управления простыми состояниями интерфейса: переключение видимости элементов, изменение доступности контролов, управление режимами компонентов и другие сценарии, где состояние выражается наличием атрибута.
Например, управление видимостью через стандартный атрибут hidden:
const block = document.querySelector('.details');
block.toggleAttribute('hidden');
🔥 Element.toggleAttribute() определён в DOM Standard и предоставляет единый API для добавления и удаления атрибутов без необходимости вручную комбинировать hasAttribute(), setAttribute() и removeAttribute(). Полезный метод, который делает работу с DOM-состояниями более лаконичной и предсказуемой. Поддерживается всеми современными браузерами.
📣 Code Ready | #практика | 1 224 |
| 10 | Что фронтенд может, а что не может, когда лёг хостинг
Недавно натыкался на новость — у одного из хостеров случился короткий сбой на уровне энергоснабжения дата-центра. Задело часть их инфраструктуры и клиентские сервисы. Восстановили быстро, но ЛК и часть сайтов на их хостинге минут на 40 ушли в недоступность.
В этот момент пользователь видит именно фронт. И самое неприятное — ты физически не можешь повлиять на ситуацию. Весь стек упирается в то, что происходит на площадке, которую ты даже и не видел никогда.
Такие истории — повод присмотреться к площадкам с продуманной инфраструктурой, а не разбираться постфактум. В рамках своих задач недавно зацепился за ЦОД Московского кластера видеоигр и анимации.
По питанию там два независимых ввода, ИБП, умные PDU. Охлаждение с изоляцией горячих/холодных коридоров. Сеть и хранение тоже задублированы — резервирование коммутаторов, диски арендных серверов в RAID-массивах. По площадке — 21 стойка, до 20 кВт на каждую, SLA 99,95%. Из железа — GPU-серверы (RTX Ada, H100). Там же и колокейшн от юнита за 4 000 р/мес до стойки 42U от 105 000 р/мес.
Кому интересно, вот страница ЦОДа с характеристиками. Я, например, после всех историй со сбоями начал смотреть на дата-центры иначе.
А если площадка все-таки легла, в ход идут инструменты фронта:
• offline-страница через Service Worker — только для тех, кто уже открывал сайт раньше и SW успел закешироваться;
• закешированные данные из localStorage/IndexedDB вместо пустого экрана — тоже нужен предыдущий визит;
• retry с backoff нужны не ради выживания в простой. Их цель — поберечь лежащий бэкенд и вовремя выдать вменяемую ошибку вместо бесконечной загрузки;
• статус-страница на отдельном хостинге/CDN.
Все остальное зависит от того, что происходит на стороне инфраструктуры.
📣 Code Ready | 1 347 |
| 11 |  Попалась супер интересная статья на Хабре: «Как я собрал сайт на 30 000 SEO-страниц за месяц»!
В этой статье:
• Показывается, как в одиночку с помощью Claude и GPT за месяц собрать полноценный веб-проект почти без ручного написания кода;
• Разбирается архитектура на Astro со статической генерацией, серверным поиском, PWA и сборкой десятков тысяч лёгких страниц;
• Рассказывается, как построить и отладить автоматический конвейер наполнения, который после настройки генерирует около 14 000 страниц в неделю;
🔊 Продолжайте читать на Habr!
📣 Code Ready | #статья | 1 378 |
| 12 | innerText vs textContent — как обычное чтение DOM может заставить браузер пересчитать layout!
DOM хранит структуру документа отдельно от того, как эта структура отображается пользователю. textContent работает на уровне DOM-дерева. Он проходит по текстовым узлам и собирает содержимое без анализа CSS, размеров элементов или текущего состояния отображения.
const text = element.textContent;
innerText работает иначе. Чтобы вернуть текст в том виде, в котором его видит пользователь, браузеру необходимо учитывать CSS, видимость элементов, переносы строк и актуальное состояние компоновки.
const text = element.innerText;
Именно поэтому простое чтение свойства иногда может быть дорогой операцией:
element.style.width = '400px';
const text = element.innerText;
После изменения стиля браузер помечает компоновку как устаревшую. Если следующая операция требует данных о визуальном состоянии страницы, браузеру может потребоваться немедленно выполнить перерасчёт. Это называется принудительным синхронным перерасчётом layout.
Похожий механизм работает с другими свойствами, зависящими от текущей геометрии страницы:
element.style.width = '400px';
const width = element.offsetWidth;
К этой же категории относятся offsetHeight, getBoundingClientRect() и чтение некоторых свойств прокрутки (scrollTop, scrollHeight и другие).
Проблема обычно появляется не из-за одного вызова, а из-за постоянного смешивания операций записи и чтения:
elements.forEach(element => {
element.style.width = '400px';
console.log(element.innerText);
});
В таком случае браузер может постоянно выполнять цикл: запись — устаревшая компоновка — чтение — расчёт компоновки.
Это приводит к частым лишним перерасчётам компоновки (layout thrashing). Гораздо эффективнее разделять изменение состояния и чтение данных:
elements.forEach(element => {
element.style.width = '400px';
});
const values = elements.map(
element => element.innerText
);
Важно понимать: innerText не является медленным сам по себе. Если состояние компоновки уже актуально, чтение может быть дешёвым. Проблема возникает тогда, когда браузеру приходится синхронизировать DOM с текущим визуальным состоянием страницы.
Если нужно получить данные из DOM, обычно достаточно textContent. Если нужен текст именно в том виде, в котором его воспринимает пользователь, используется innerText.
🔥 Разница между ними не только в возвращаемой строке. textContent работает с моделью документа, а innerText — с моделью отображения. В производительных интерфейсах это различие может определить, будет ли чтение обычным получением текстового содержимого или причиной перерасчёта компоновки.
📣 Code Ready | #практика | 1 310 |
| 13 |  40 собесов и оффер за 1 месяц
Алексей разработчик.
Искал работу с декабря - написание сопроводов и отклики занимали очень много времени.
Выхлоп - почти нулевой.
В какой-то момент понял:
так можно искать бесконечно.
И по совету друга попробовал ии-ассистента для автооткликов - Софи.
▫️За ~1 месяц прошел около 40 собеседований
▫️Получил оффер с вакансии, на которую, по его словам, не откликнулся бы сам
В описании она выглядела скучно, а по факту - одна из самых интересных компаний, с которыми я общался.
Весь процесс - от первого собеседования до оффера - занял 4 дня.
Зарегистрироваться и попробовать Софи можно здесь.
3 дня - бесплатно. | 1 116 |
| 14 |  👩💻 Связываем подпись с полем формы с помощью атрибута for!
Атрибут for используется у тега <label> и указывает, к какому элементу формы относится подпись.
А ещё не каждый элемент подойдёт для связи, годятся только из категории «связываемых»:
• <button>;
• <input>;
• <meter>;
• <progress>;
• <select>;
• <textarea>;
• И даже сам <output>.
Кроме удобства, правильная связка <label for="..."> улучшает доступность формы, поскольку вспомогательные технологии могут определить, какая подпись относится к конкретному полю.
📣 Code Ready | #атрибут | 1 374 |
| 15 |  +4📱 Intersection Observer API — отслеживание видимости элементов!
В этой шпаргалке собраны основные методы и свойства Intersection Observer API для асинхронного отслеживания пересечения элементов с viewport или заданным root. Здесь показано, как подключать и отключать наблюдение, определять факт и степень пересечения, получать геометрию элемента, области пересечения и root, а также применять observer для lazy loading, аналитики и UI-эффектов.
📣 Code Ready | #шпора | 1 841 |
| 16 |  Храним собственные данные прямо в HTML с помощью data-*!
Дата-атрибут — это пользовательский атрибут на HTML-элементе, название которого начинается с data-. Это встроенная возможность стандарта HTML5. В дата-атрибутах можно хранить дополнительную информацию в стандартных HTML-элементах и работать с этой информацией в JS при помощи собственного API.
После data- указывается произвольное имя, описывающее значение:
• data-id — идентификатор объекта;
• data-theme — тема оформления;
• data-status — состояние элемента;
• data-user-id — идентификатор пользователя.
data-* полезен, когда элементу нужно передать дополнительные данные для поведения интерфейса, не отображая их пользователю.
📣 Code Ready | #атрибут | 1 828 |
| 17 |  ✍️ React от нуля до архитектора — большое руководство по React-разработке!
Материал начинается с основ JavaScript и постепенно переходит к компонентам, JSX, хукам, формам и роутингу. Дальше разбираются TanStack Query, Redux Toolkit и Zustand, TypeScript, тестирование, безопасность, оптимизация производительности, архитектурные паттерны, Next.js, SSR и React Server Components. Получается полноценный маршрут от основ React до разработки и архитектуры крупных приложений.
Оставляю ссылочку: GitHub 📱
📣 Code Ready | #репозиторий | 2 064 |
| 18 | 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 | #практика | 1 872 |
| 19 |  Верстаешь?
Оцени 7 причин пройти наш бесплатный интенсив по Frontend-разработке:
1. Без опыта сделаешь реальный сайт сервиса доставки с нуля;
2. Добавишь JavaScript-логику, расчёты и трекинг;
3. Подключишь карты и маршрут доставки через API;
4. Превратишь сайт в Angular-приложение;
5. Подключишь backend и выложишь проект в продакшен;
6. Научишься использовать ChatGPT и Giga во Frontend-разработке;
7. Узнаешь 9 способов найти первый заказ на фрилансе даже без опыта.
А главное, ты проведёшь 7 дней в приятной компании Fullstack-разработчика с 12-летним стажем – Романа Чернова и получишь живую помощь по проекту.
👉 Проскочить на интенсив бесплатно
Начинаем уже завтра.
🔥 С нас обучение, практика и помощь с выходом на фриланс или собеседованием. | 1 148 |
| 20 |  😎 FrontSkill Docs — большая база знаний по Frontend-разработке!
Это онлайн-справочник, где собраны материалы по Frontend: HTML, CSS, JavaScript, TypeScript, React и другим технологиям. Документация построена по темам, что позволяет последовательно изучать материал или быстро находить нужную информацию во время разработки.
📌 Оставляю ссылочку: frontskill.ru
📣 Code Ready | #сайт | 1 758 |
