React JS

описание

React программирование @haarrp - admin @itchannels_telegram - 🔥лучшие ит-каналы @javascriptv - продвинутый javascript @programming_books_it - бесплатные it книги @ai_machinelearning_big_data - ml № 5037566384

← к каналу @react_tg

16 429

подписчиков

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

14,0%

ERR

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

0,43%

442 на 33 постов

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

1,27%

1 287

Постов в день

0,1

всего 33

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

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

14 авг.🎯 CSS @scope: способ ограничить область действия стилей До сих пор в CSS не было простого и надёжного способа ограничить действие стилей внутри конкретного контейнера. Мы полагались на такие приёмы, как уникальные классы, переопределение селекторов или CSS-in-JS. Но теперь у нас есть @scope. Что такое @scope? @scope — это новая директива в CSS, которая позволяет задать область применения стилей. Она похожа на @media, но вместо условий она ограничивает, где стили будут применяться в DOM. @scope (.card) { h2 { color: red; } } Этот код применит красный цвет только к h2, находящимся внутри .card. Всё просто. Почему это важно? Ограничение области действия стилей: - делает код изолированным и предсказуемым, - предотвращает конфликты между компонентами, - упрощает поддержку и масштабирование CSS. Более сложный пример @scope (.card) to (.card-footer) { a { text-decoration: none; } } Здесь мы ограничиваем действие от .card до .card-footer. Стили будут применяться только к a, находящимся между этими двумя элементами в иерархии. Итого @scope — это шаг вперёд для масштабируемого CSS. Больше не нужно изобретать велосипеды с уникальными классами и перегрузками. Пишите локализованные стили — просто и прозрачно. https://12daysofweb.dev/2023/css-scope/2,15%
11 июл.TypeScript 7.0 переписали на Go Microsoft выкатила один из самых важных апдейтов TypeScript за всю историю проекта. Главное изменение - новый нативный компилятор и tooling на Go. Что это даёт: * full builds быстрее в 8–12 раз * меньше расход памяти * быстрее отклик IDE * параллельная обработка parsing, type-checking и emit * более комфортная работа с большими monorepo Пример из бенчмарков Microsoft: VS Code собирался 125,7 секунды на TypeScript 6.0 и 10,6 секунды на TypeScript 7.0. Это не релиз про новый синтаксис. Это релиз про скорость, масштабирование и нормальную работу TypeScript на больших кодовых базах. https://linuxiac.com/typescript-7-0-rewrites-the-compiler-in-go-for-up-to-12x-faster-builds/1,53%
9 июл.✔️ curl - один из самых недооценённых проектов в истории софта. Первый релиз вышел 20 марта 1998 года. Его запустил один разработчик - Daniel Stenberg. Прошло больше 27 лет, а он всё ещё поддерживает проект. Сегодня curl работает на миллиардах устройств и поставляется почти везде: * macOS * основные Linux-дистрибутивы * Windows 10 и новее * серверы * контейнеры * embedded-системы * CI/CD пайплайны Ирония в том, что многие пользуются curl каждый день, даже не думая об этом. Одна маленькая CLI-утилита стала невидимой инфраструктурой интернета. Вот так выглядит настоящий open source: без хайпа, без миллиардных раундов, но с кодом, который держит половину мира.1,39%
22 июл.Card :hover spotlight effect with background-attachment 🤙 Используем background-attachment, чтобы прикрепить фон к области просмотра https://codepen.io/jh3y/pen/RwqZNKa0,87%
15 июл.NAITION AI: Спрос на разработку с ИИ-агентами вырос в сотни раз за год. Свежий Stanford AI Index 2026 показал, что навык AI Agents стал №1 среди самых востребованных инженерных скиллов. • Упоминания «Agentic systems» в вакансиях за год выросли на 10854% (!) — это не опечатка. • «AI agents» — +2113%. • Вывод простой: компаниям массово нужны не «написатели кода», а архитекторы мультиагентных систем.Главный скилл в 2026 году — строить долгоживущие автономные процессы, управлять контекстом и верифицировать работу десятков агентов. Рынок можно догнать! Naition запускает новый, обновленный в июле поток буткемпа по AI-driven разработке уже 21 июля. Максимум пользы получат middle+ разработчики и команды, нацеленные на апгрейд производительности инженерного процесса. IT-специалисты других профессий тоже могут себя попробовать. За 12 недель вы встроите ИИ во все процессы: • Соберёте своё ядро — MCP под задачи, RAG, мультиагентную систему с сабагентами и оркестрацией. • Внедрите агентов в кодовые базы на 100К+ строк — автоматизируете индексацию кода, рефакторинг и изменение архитектуры. • Научитесь масштабировать AI-практики на всю команду. Ведут практики с 15-20 годами опыта: ex-Yandex Cloud, staff-инженер Google, CEO Symbioway (центр по найму разработчиков) — люди из эпицентра трансформации рынка. Формат: 17 уроков, 5 модулей, живые вечерние эфиры + практика между ними. Минимум теории, максимум разборов кейсов и групповой практики прямо на вебинаре. 👉 Забронировать место — naition.ai А по промокоду REACT для подписчиков — скидка 20% до 17 июля. Что ещё стоит знать: • Приведёте друга или коллегу — вы вместе получите доп. скидку 10% сверху (в сумме 30%). • Можно оплатить частями, а начать даже с одного модуля. • Если вы бизнес, можно прокачать всю команду разом.0,76%
14 июл.200 тысяч строк чужого кода — и ноль понимания, с чего начинать Вот это боль любого разработчика, который приходит в новую команду. Understand-Anything пытается решить её не ещё одним чатиком поверх репозитория, а интерактивным графом знаний. Он разбирает кодовую базу и показывает связи между файлами, функциями, классами и зависимостями. Можно искать нужные части, проваливаться по связям и задавать вопросы обычным языком. Главная ценность тут не в “ИИ прочитал код за вас”. А в том, что он даёт карту проекта. Когда перед тобой легаси, монорепа или просто большой продукт, контекст важнее автокомплита. Нужно быстро понять, где что лежит, какие модули завязаны друг на друга и куда лучше не лезть с топором. Работает с Claude Code, Codex, Cursor, Copilot, Gemini CLI и другими coding-инструментами. https://github.com/Egonex-AI/Understand-Anything0,75%
27 мая 2024 г.без подписи0,72%
30 авг. 2025 г.без подписи0,66%
27 июл.Совет по HTML 💡 Знаете ли вы, что можно разместить кнопку отправки формы вне самой формы?0,63%
15 июл.💡 Простой кейс создания закругленных углов в CSS0,57%
17 июл.🌟 ReactBench: инструмент оценки агентов при работе с кодом на React Команда Million, известная инструментами React Doctor, React Scan и Million.js, представила тест для агентов, пишущих код на React. Актуальность ReactBench зеркальна реальному положению дел - около 70% сайтов на JavaScript используют React, а мелкие ошибки в сгенерированном коде тиражируются в огромных масштабах. Например, сбой Cloudflare в сентябре 2025 года - панель управления и API компании легли из-за одной неверной зависимости в useEffect, которую не поймали ни ревью, ни тесты. Философия проекта в том, что общие кодинг-бенчмарки проверяют лишь поведение по принципу "тесты прошли - задача засчитана". В ReactBench каждое решение должно ещё и пройти проверку React Doctor, анализатора с более чем 400 правилами, который ищет в коде лишние перерисовки, сломанные эффекты, проблемы с доступностью и сопровождаемостью. 🟡Набор состоит из задач двух типов Write React - реализовать настоящую функцию. Задания этого типа собраны из принятых PR в открытых репозиториях. Агент получает кодовую базу и описание задачи, а скрытые тесты и эталонное решение видит только проверяющая система. Fix React - найти и исправить все баги в существующем компоненте, обнаруженные React Doctor, не создавая при этом новых проблем. Причём агента еще и лишают доступа к линтерам. 🟡Результаты прогонов Само собой, созданием бенча не ограничились и запустили его на топовых моделях. Тут важен небольшой дисклеймер: Бенчмарк сравнивает не модели в чистом виде, а связки модель+агентская оболочка (Codex CLI, Claude Code и другие), и оболочка влияет на итог. По итогам лидируют с минимальным отрывом GPT-5.6 Sol (43,1%) и Fable 5 (41,2%), но важнее разница в цене - прогон Fable 5 обходится в среднем в 5,8 раза дороже, чем Sol. Оптимальным по соотношению стоимость-качество авторы называют GPT-5.6 Terra на средних настройках. Замыкают таблицу GLM 5.2, Sonnet 5, GPT-5.6 Luna и Kimi K2.7 Code. Набор полностью открыт на Github. #AI #ML #Agents #Benchmark #ReactBench #Million0,56%
19 июл.📌 Как работать с em и rem в CSS? Данный пост о двух важных единицах измерения в CSS — em и rem. Часто новички путаются в их использовании, а ведь это мощные инструменты для адаптивного дизайна! 🔹 em — зависит от родительского элемента em — это относительная единица, которая зависит от размера шрифта родителя. Например: .parent { font-size: 20px; } .child { font-size: 1.5em; /* 30px */ } Здесь 1.5em означает 1.5 * 20px = 30px. ⚠️ Будьте осторожны! Использование em для вложенных элементов может привести к неожиданному увеличению шрифта. 🔹 rem — зависит от корневого элемента В отличие от em, rem (root em) всегда рассчитывается относительно font-size у <html>. Например: html { font-size: 16px; } .child { font-size: 1.5rem; /* 24px */ } Здесь 1.5rem означает 1.5 * 16px = 24px, независимо от родителя! 🧐 Что выбрать? ✔ rem — удобен для глобального масштабирования (например, для всей страницы). ✔ em — полезен для элементов внутри компонентов (например, padding, margin). А вы чаще используете em или rem? Напишите в комментариях!0,49%