22 Aug 2026, 12:42 UTC668 views25 reactionsread 22 August 2026 Photo
Получаем порядковый номер элемента прямо в CSS!
Для каскадной анимации списка часто приходится передавать индекс из JavaScript или прописывать :nth-child() для каждого элемента.
<div style={{ "--i": index }} />
В CSS появились функции sibling-index() и sibling-count(): первая возвращает позицию элемента среди всех дочерних элементов родителя, начиная с 1, вторая — их общее количество.
Поэтому задержку от 0ms можно…
❤10🔥8👍5🤝2
22 Aug 2026, 10:42 UTC779 views6 reactionsread 22 August 2026 Video
Очнись, нас готовят к цифровому ГУЛАГу
Уже в десятках регионов России отключают мобильный интернет (даже когда нет атак БПЛА), тестируют «белые списки» и замедляют Телегу.
90% людей тупо смотрят на уплывающий корабль свободного Интернета. Люди поумнее готовятся к новой реальности и читают «Пакет Безопасности».
Здесь дают самые свежие связки для приватности: приложения и утилиты на случай вайтлистов, прокси, браузе…
👎5🔥1
22 Aug 2026, 06:12 UTC910 views20 reactionsread 22 August 2026 Video
🐱 Awesome Frontend Dev — большая подборка материалов и инструментов для frontend-разработчика!
Здесь собраны учебники, справочники, курсы и полезные сервисы по HTML, CSS, JavaScript, TypeScript, React, Next.js, Node.js и SQL. Есть отдельные подборки для изучения Flexbox и Grid, тренировки задач на Codewars и LeetCode, подготовки к собеседованиям, работы с GitHub, размещения проектов и использования AI-инструментов в…
👍9❤6🔥5
21 Aug 2026, 11:12 UTC895 views20 reactionsread 22 August 2026 Element.toggleAttribute() — нативное переключение DOM-атрибутов!
В DOM многие состояния элементов представлены через наличие или отсутствие атрибутов: disabled, hidden, required и пользовательские атрибуты состояния компонентов. Element.toggleAttribute() предоставляет нативный механизм для управления такими состояниями без ручной проверки текущего значения.
До появления toggleAttribute() подобные операции обычно ре…
👍9🤝6🔥5
21 Aug 2026, 09:12 UTC≈1,060 views4 reactionsread 22 August 2026 Что фронтенд может, а что не может, когда лёг хостинг
Недавно натыкался на новость — у одного из хостеров случился короткий сбой на уровне энергоснабжения дата-центра. Задело часть их инфраструктуры и клиентские сервисы. Восстановили быстро, но ЛК и часть сайтов на их хостинге минут на 40 ушли в недоступность.
В этот момент пользователь видит именно фронт. И самое неприятное — ты физически не можешь повлиять на сит…
👍4
21 Aug 2026, 06:12 UTC≈1,150 views21 reactionsread 22 August 2026 Photo
Попалась супер интересная статья на Хабре: «Как я собрал сайт на 30 000 SEO-страниц за месяц»!
В этой статье:
• Показывается, как в одиночку с помощью Claude и GPT за месяц собрать полноценный веб-проект почти без ручного написания кода;
• Разбирается архитектура на Astro со статической генерацией, серверным поиском, PWA и сборкой десятков тысяч лёгких страниц;
• Рассказывается, как построить и отладить автоматическ…
🔥11❤5👍5
20 Aug 2026, 11:12 UTC≈1,090 views28 reactionsread 22 August 2026 innerText vs textContent — как обычное чтение DOM может заставить браузер пересчитать layout!
DOM хранит структуру документа отдельно от того, как эта структура отображается пользователю. textContent работает на уровне DOM-дерева. Он проходит по текстовым узлам и собирает содержимое без анализа CSS, размеров элементов или текущего состояния отображения.
const text = element.textContent;
innerText работает иначе. Чт…
❤16👍8🔥4
20 Aug 2026, 06:12 UTC≈1,200 views20 reactionsread 22 August 2026 Video
👩💻 Связываем подпись с полем формы с помощью атрибута for!
Атрибут for используется у тега <label> и указывает, к какому элементу формы относится подпись.
А ещё не каждый элемент подойдёт для связи, годятся только из категории «связываемых»:
• <button>;
• <input>;
• <meter>;
• <progress>;
• <select>;
• <textarea>;
• И даже сам <output>.
Кроме удобства, правильная связка <label for="..."> улучшает доступность форм…
👍11🔥6❤3
19 Aug 2026, 06:12 UTC≈1,450 views29 reactionsread 22 August 2026 Photo
📱 Intersection Observer API — отслеживание видимости элементов!
В этой шпаргалке собраны основные методы и свойства Intersection Observer API для асинхронного отслеживания пересечения элементов с viewport или заданным root. Здесь показано, как подключать и отключать наблюдение, определять факт и степень пересечения, получать геометрию элемента, области пересечения и root, а также применять observer для lazy loading,…
👍14❤6🤝6🔥3
18 Aug 2026, 06:12 UTC≈1,700 views32 reactionsread 22 August 2026 Photo
Храним собственные данные прямо в HTML с помощью data-*!
Дата-атрибут — это пользовательский атрибут на HTML-элементе, название которого начинается с data-. Это встроенная возможность стандарта HTML5. В дата-атрибутах можно хранить дополнительную информацию в стандартных HTML-элементах и работать с этой информацией в JS при помощи собственного API.
После data- указывается произвольное имя, описывающее значение:
• d…
👍14❤11🔥7
17 Aug 2026, 06:12 UTC≈1,950 views29 reactionsread 22 August 2026 Video
✍️ React от нуля до архитектора — большое руководство по React-разработке!
Материал начинается с основ JavaScript и постепенно переходит к компонентам, JSX, хукам, формам и роутингу. Дальше разбираются TanStack Query, Redux Toolkit и Zustand, TypeScript, тестирование, безопасность, оптимизация производительности, архитектурные паттерны, Next.js, SSR и React Server Components. Получается полноценный маршрут от основ …
👍12❤10🔥7
15 Aug 2026, 12:10 UTC≈1,800 views27 reactionsread 22 August 2026 TreeWalker — последовательный обход DOM без создания промежуточной коллекции!
При обходе DOM часто используют рекурсию или querySelectorAll(). Это рабочие подходы, но они подходят не для всех задач: рекурсивный обход требует дополнительной логики, а querySelectorAll() сразу формирует статический NodeList со всеми найденными элементами.
DOM API предоставляет интерфейс TreeWalker, который позволяет последовательно об…
🔥15❤6👍6
Showing the 12 most recent of 41 posts we hold for @code_ready. View and reaction counts are the latest single reading for each post, not a live figure, and a recent post is still accumulating both. A view count marked ≈ was rounded by Telegram before we ever saw it — t.me prints views in full below 1,000 and to three significant figures above, so ≈1,200,000 means somewhere between 1,150,000 and 1,249,999. Unmarked counts are exact. Text is reproduced from the public post preview and truncated for length.