Code Ready | Frontend
Kanalga Telegram’da o‘tish
Авторский канал по Frontend разработке. Ресурсы, гайды, задачи, шпаргалки. Информация ежедневно пополняется! Автор: @energy_c РКН: https://clck.ru/3NJCKs Реклама на бирже: https://telega.in/c/code_ready
Ko'proq ko'rsatish📈 Telegram kanali Code Ready | Frontend analitikasi
Code Ready | Frontend (@code_ready) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 21 699 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 5 997-o'rinni va Rossiya mintaqasida 30 482-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 21 699 obunachiga ega bo‘ldi.
25 Avgust, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni 192 ga, so‘nggi 24 soatda esa 18 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 7.98% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.56% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 1 731 marta ko‘riladi; birinchi sutkada odatda 990 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 23 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent css, браузер, интерфейс, загрузка, api kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Авторский канал по Frontend разработке.
Ресурсы, гайды, задачи, шпаргалки.
Информация ежедневно пополняется!
Автор: @energy_c
РКН: https://clck.ru/3NJCKs
Реклама на бирже: https://telega.in/c/code_ready”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 26 Avgust, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.
21 699
Obunachilar
+1824 soatlar
+827 kunlar
+19230 kunlar
Ma'lumot yuklanmoqda...
O'xshash kanallar
![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}
Taglar buluti
Kirish va chiqish esdaliklari
---
---
---
---
---
---
Obunachilarni jalb qilish
Avgust '26
Avgust '26
+544
285 kanalda
Iyul '26
+63
38 kanalda
Get PRO
Iyun '26
+123
19 kanalda
Get PRO
May '26
+159
31 kanalda
Get PRO
Aprel '26
+90
31 kanalda
Get PRO
Mart '26
+234
68 kanalda
Get PRO
Fevral '26
+220
22 kanalda
Get PRO
Yanvar '26
+1 062
125 kanalda
Get PRO
Dekabr '25
+433
124 kanalda
Get PRO
Noyabr '25
+1 202
266 kanalda
Get PRO
Oktabr '25
+733
100 kanalda
Get PRO
Sentabr '25
+1 126
108 kanalda
Get PRO
Avgust '25
+1 117
240 kanalda
Get PRO
Iyul '25
+897
55 kanalda
Get PRO
Iyun '25
+1 017
87 kanalda
Get PRO
May '25
+2 027
323 kanalda
Get PRO
Aprel '25
+117
1 kanalda
Get PRO
Mart '25
+130
2 kanalda
Get PRO
Fevral '25
+125
0 kanalda
Get PRO
Yanvar '25
+130
3 kanalda
Get PRO
Dekabr '24
+234
5 kanalda
Get PRO
Noyabr '24
+259
7 kanalda
Get PRO
Oktabr '24
+2 497
247 kanalda
Get PRO
Sentabr '24
+3 493
269 kanalda
Get PRO
Avgust '24
+337
2 kanalda
Get PRO
Iyul '24
+140
1 kanalda
Get PRO
Iyun '24
+793
7 kanalda
Get PRO
May '24
+2 442
26 kanalda
Get PRO
Aprel '24
+2 945
37 kanalda
Get PRO
Mart '24
+1 802
42 kanalda
Get PRO
Fevral '24
+1 591
37 kanalda
Get PRO
Yanvar '24
+4 288
28 kanalda
Get PRO
Dekabr '23
+795
23 kanalda
Get PRO
Noyabr '23
+693
31 kanalda
Get PRO
Oktabr '23
+443
12 kanalda
| Sana | Obunachilarni jalb qilish | Esdaliklar | Kanallar | |
| 26 Avgust | +9 | |||
| 25 Avgust | +26 | |||
| 24 Avgust | +50 | |||
| 23 Avgust | +8 | |||
| 22 Avgust | +8 | |||
| 21 Avgust | +10 | |||
| 20 Avgust | +18 | |||
| 19 Avgust | +34 | |||
| 18 Avgust | +48 | |||
| 17 Avgust | +43 | |||
| 16 Avgust | +10 | |||
| 15 Avgust | +5 | |||
| 14 Avgust | +3 | |||
| 13 Avgust | +7 | |||
| 12 Avgust | +19 | |||
| 11 Avgust | +87 | |||
| 10 Avgust | +138 | |||
| 09 Avgust | 0 | |||
| 08 Avgust | +5 | |||
| 07 Avgust | +3 | |||
| 06 Avgust | +7 | |||
| 05 Avgust | +2 | |||
| 04 Avgust | +1 | |||
| 03 Avgust | +2 | |||
| 02 Avgust | +1 | |||
| 01 Avgust | 0 |
Kanal postlari
+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 |
