React JS

🎯 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/

Это один из самых изобретательных проектов, которые я видел на этой неделе. Передаёт файлы между двумя устройствами, используя только экран и камеру. Использует Fountain Codes (LT Codes). Вместо разделения файла на последовательные фрагменты, каждый QR-код содержит математическую комбинацию (XOR) блоков файла. Разработчик достиг скорости до 129 КБ/с. Всё работает в браузере с WebAssembly, без установки каких-либо приложений. https://github.com/bashalarmistalt/decimen-optical-transfer

Совет по JavaScript 💡 Используйте параметр rest вместо объекта arguments для приема переменного количества аргументов ✅

Rust, который наконец становится понятным 🦀 Давно хочешь выучить Rust, но ownership, borrowing и lifetimes выглядят как отдельный вид боли? Этот курс проведёт тебя с самого начала до уровня, где ты уже пишешь реальные системные и сетевые программы. Ты разберёшь: Ownership → Borrowing → ошибки → коллекции → Generics → Traits → модули → тесты → сетевой код Никакого бесконечного чтения документации. После каждого урока ты сразу пишешь код, проходишь тесты и решаешь задачу с автопроверкой. 🔥 Rust с нуля 🔥 5–6 часов в неделю 🔥 Практика после каждого урока 🔥 Подойдёт после Python, JavaScript, Java и других языков 🔥 Можно начать сразу В конце у тебя будет понимание Rust, с которым уже можно писать быстрые backend-сервисы, сетевые приложения и системные утилиты, а не смотреть на borrow checker как на врага. Пора добавить Rust в свой стек. Начинай курс и пиши первый код уже сегодня: https://stepik.org/a/294885/

Совет по HTML 💡 Знаете ли вы, что можно разместить кнопку отправки формы вне самой формы?

JavaScript становится понятнее, когда из него получается не учебный фрагмент, а живое приложение. Трекер привычек — хороший формат для такой практики: есть интерфейс, данные, события, состояние, прогресс и сохранение результата в браузере. 29 июля в 20:00 МСК на открытом вебинаре OTUS соберём трекер привычек на чистом JavaScript — без библиотек и фреймворков. За 90 минут пройдём полный цикл фронтенд-задачи: создадим разметку, опишем данные массивом объектов, отрисуем список привычек из кода, обработаем клики, добавим растущий прогресс-бар и анимацию конфетти. Отдельно разберём localStorage: как сохранить прогресс после перезагрузки страницы и почему этот же подход используется в реальных продуктах. По ходу занятия будет видно, как связаны HTML, CSS и JavaScript. Урок проходит в преддверии старта курса «JavaScript-разработчик. Базовый уровень». 👉 Регистрируйтесь: https://otus.pw/1nZr/?erid=2W5zFKA4ykV Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

📌Как работает Javascript: шпаргалка для разработчика 🔹 Интерпретируемый язык JavaScript выполняется браузером или движком JavaScript, а не компилируется заранее в машинный код. Это делает его высоко портируемым между платформами. Современные движки, такие как V8, используют технологию Just-In-Time (JIT) для компиляции кода непосредственно в исполняемый машинный код. 🔹 Функции — объекты первого класса В JavaScript функции рассматриваются как объекты первого класса, что означает, что их можно хранить в переменных, передавать в качестве аргументов другим функциям и возвращать из функций. 🔹 Динамическая типизация JavaScript — это язык с динамической (слабой) типизацией, что означает, что тип переменной можно не объявлять заранее, и он может изменяться во время выполнения программы. 🔹 Клиентская (асинхронная) обработка JavaScript поддерживает асинхронное программирование, позволяя выполнять операции, такие как чтение файлов, HTTP-запросы или взаимодействие с базами данных, в фоновом режиме. Эти операции запускают коллбэки или промисы по завершении, что особенно полезно для веб-разработки, повышая производительность и удобство использования. 🔹 Прототипное ООП В отличие от классического объектно-ориентированного программирования, JavaScript использует прототипное наследование. Это означает, что объекты могут наследовать свойства и методы от других объектов, а не от классов. 🔹 Автоматическая сборка мусора JavaScript автоматически управляет памятью, удаляя объекты, которые больше не используются программой. Это помогает предотвращать утечки памяти и оптимизировать производительность приложения. 🔹 Сравнение с другими языками JavaScript отличается от таких языков, как Python или Java, своей ключевой ролью в веб-разработке. - Python известен своей читаемостью кода и универсальностью. - Java славится строгой структурой и надежностью. - JavaScript, в свою очередь, является интерпретируемым языком, который работает непосредственно в браузере без необходимости компиляции, что делает его гибким и динамичным. 🔹 Связь с TypeScript TypeScript является надмножеством JavaScript, добавляя в него новые возможности, в том числе аннотации типов. Это означает, что любой корректный JavaScript-код также будет валидным TypeScript-кодом. 🔹 Популярные фреймворки JavaScript - React — гибкий, с большим количеством плагинов, созданных сообществом. - Vue — чистый и интуитивно понятный, с хорошо интегрированными реактивными возможностями. - Angular — строгий в плане структуры, идеально подходит для корпоративной разработки.

🔍Тестовое собеседование с ТимЛидом Frontend-разработки в этот четверг 23 июля(уже завтра!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Алексей Романов, Teamlead в Underhood.dev с опытом 6+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Алексей будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Алексею Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.

Card :hover spotlight effect with background-attachment 🤙 Используем background-attachment, чтобы прикрепить фон к области просмотра https://codepen.io/jh3y/pen/RwqZNKa

📌 Как работать с 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? Напишите в комментариях!

🔥 Хочешь быстрее расти в IT? Хватит учиться в одиночку В IT прокачивается тот, кто каждый день видит сильные идеи, новые инструменты, реальные задачи, вакансии и разборы. Окружение решает больше, чем кажется. Собрал папки и каналы, где можно быстрее влиться в нужное направление, следить за трендами и не вариться в своём пузыре. AI: t.me/ai_machinelearning_big_data Python: t.me/pythonl Linux: t.me/linuxacademiya Хакинг: t.me/linuxkalii DevOps: t.me/DevOPSitsec Docker: t.me/DevopsDocker Golang: t.me/Golang_google Rust: t.me/rust_code C++: t.me/cpluspluc C#: t.me/csharp_1001_notes Java: t.me/java_library JavaScript: t.me/javascriptv React: t.me/react_tg Frontend: t.me/front PHP: t.me/phpshka Android: t.me/android_its Мобильная разработка: t.me/mobdevelop Базы данных: t.me/sqlhub Data Science: t.me/data_analysis_ml Big Data: t.me/bigdatai Математика: t.me/data_math Физика: t.me/fizmat Kubernetes: t.me/kubernetc GameDev: https://t.me/gamedev Haskell: t.me/haskell_tg Собеседования и карьера: DS собеседования: t.me/machinelearning_interview Python собеседования: t.me/python_job_interview Папка с вакансиями: t.me/addlist/_zyy_jQ_QUsyM2Vi Папка Go разработчика: t.me/addlist/MUtJEeJSxeY2YTFi Папка Python разработчика: t.me/addlist/eEPya-HF6mkxMGIy Папка ML: https://t.me/addlist/2Ls-snqEeytkMDgy Папка Frontend: https://t.me/addlist/mzMMG3RPZhY2M2Iy Полезное сверху: ИТ-мемы: t.me/memes_prog Английский для программистов: t.me/english_forprogrammers ИИ и технологии: t.me/vistehno 954 ГБ open-source курсов: @courses ИТ-книги бесплатно: https://t.me/addlist/BkskQciUW_FhNjEy Max Ai: https://max.ru/ai_machinelearning_big_data Max python: https://max.ru/pythonl ТЕХНО: https://max.ru/vistehno Max Go: https://max.ru/Golang_google Max Linux: https://max.ru/linuxkalii Devops: https://max.ru/DevOPSitsec C#: https://max.ru/csharp_ci C++: https://max.ru/cpluspluc SQL: https://max.ru/sqlhub Java: https://max.ru/javatg Подписывайся на нужные направления и собирай себе ленту, которая реально двигает вперёд. Пока кто-то листает шум, ты будешь видеть инструменты, задачи и идеи, которые помогают расти в профессии.

🌟 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 #Million

💡 Простой кейс создания закругленных углов в CSS

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%). • Можно оплатить частями, а начать даже с одного модуля. • Если вы бизнес, можно прокачать всю команду разом.

200 тысяч строк чужого кода — и ноль понимания, с чего начинать Вот это боль любого разработчика, который приходит в новую команду. Understand-Anything пытается решить её не ещё одним чатиком поверх репозитория, а интерактивным графом знаний. Он разбирает кодовую базу и показывает связи между файлами, функциями, классами и зависимостями. Можно искать нужные части, проваливаться по связям и задавать вопросы обычным языком. Главная ценность тут не в “ИИ прочитал код за вас”. А в том, что он даёт карту проекта. Когда перед тобой легаси, монорепа или просто большой продукт, контекст важнее автокомплита. Нужно быстро понять, где что лежит, какие модули завязаны друг на друга и куда лучше не лезть с топором. Работает с Claude Code, Codex, Cursor, Copilot, Gemini CLI и другими coding-инструментами. https://github.com/Egonex-AI/Understand-Anything

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/

Runtime Compatibility: Инструмент для проверки совместимости JavaScript-кода с окружением Это полезный инструмент, который позволяет проверить, какие JavaScript-фичи поддерживаются в разных средах выполнения (Node.js, браузеры и т. д.). Что он умеет? 🔹 Анализирует ваш код и определяет, какие функции и синтаксис могут быть несовместимы с заданным окружением. 🔹 Поддерживает Node.js, браузеры, Cloudflare Workers, Deno и другие рантаймы. 🔹 Может использоваться как CLI или в виде онлайн-инструмента. Кому это полезно? ✅ Разработчикам, которым нужно убедиться, что их код работает на разных платформах. ✅ Тем, кто использует ES модули, топ-уровневый await, новые API и хочет избежать проблем с несовместимостью. ✅ Разработчикам библиотек, чтобы проверять поддержку своих пакетов. Если пишете код, который должен работать в разных окружениях — попробуйте Runtime Compatibility! 🚀 https://runtime-compat.unjs.io/

✔️ curl - один из самых недооценённых проектов в истории софта. Первый релиз вышел 20 марта 1998 года. Его запустил один разработчик - Daniel Stenberg. Прошло больше 27 лет, а он всё ещё поддерживает проект. Сегодня curl работает на миллиардах устройств и поставляется почти везде: * macOS * основные Linux-дистрибутивы * Windows 10 и новее * серверы * контейнеры * embedded-системы * CI/CD пайплайны Ирония в том, что многие пользуются curl каждый день, даже не думая об этом. Одна маленькая CLI-утилита стала невидимой инфраструктурой интернета. Вот так выглядит настоящий open source: без хайпа, без миллиардных раундов, но с кодом, который держит половину мира.

Подборка для тех, кто устал от «зарегистрируйтесь, чтобы скачать файл» 😈 FckSignups здесь 170+ веб-инструментов, которые работают прямо в браузере: без установки, без аккаунта и без оплаты. Внутри конвертеры, PDF-редакторы, утилиты для изображений и видео, аналоги CapCut, инструменты для текста, файлов, разработки и даже панели для мониторинга мировых событий. Открыл, сделал задачу, закрыл. Без почты, паролей и вечного «начните бесплатный trial». https://github.com/BraveOPotato/FckSignups