React JS

«Сделай, чтобы работало одинаково во всех браузерах». Фронтендеры знают, что эта фраза звучит проще, чем выполняется. Мы попросили ИИ-помощника ГигаЧат составить спокойный и понятный ответ менеджеру, который объясняет реальность кроссбраузерности без лишних эмоций.

Совет по Javascript 💡 Возможно, вы не знаете об этом простейшем способе таймаута запроса на выборку.

JavaScript-разработчик набирает npm install:

🔍 Обнаружение React Server Components (RSC) в Chrome Расширение для Chrome, позволяющее автоматически и активно обнаруживать отпечатки React Server Components и Next.js App Router на веб-страницах. Подходит для образовательных и исследовательских целей, с акцентом на безопасность. 🚀 Основные моменты: - Автоматическое сканирование страниц на наличие RSC - Активное отправление запросов для анализа ответов сервера - Множественные методы обнаружения, включая анализ заголовков - Обновление значка расширения при обнаружении RSC 📌 GitHub: https://github.com/mrknow001/RSC_Detector #javascript

🔍📡 Инструмент для сканирования уязвимостей в Next.js приложениях react2shell-scanner помогает выявлять уязвимости CVE-2025-55182 и CVE-2025-66478 в приложениях на React Server Components. Он использует различные методы проверки, включая безопасный режим и обход WAF, чтобы обеспечить точное обнаружение без выполнения кода на целевых системах. 🚀Основные моменты: - Обнаружение уязвимостей в Next.js с помощью RCE PoC. - Поддержка безопасного режима проверки без выполнения кода. - Возможность обхода WAF для повышения эффективности сканирования. - Поддержка Windows и Unix-подобных систем. - Вывод результатов в формате JSON для дальнейшего анализа. 📌 GitHub: https://github.com/assetnote/react2shell-scanner #python

⚡️ Annotation Toolkit помогает дизайнерам прямо в макете объяснить, как должны работать элементы интерфейса. Проще говоря, он позволяет: - подписывать элементы: что кликается, что меняется, как ведёт себя при разной ширине экрана; - сразу указать требования по доступности: например, какой alt-текст нужен или что должно быть доступно с клавиатуры; - убрать путаницу при передаче макета разработчикам, чтобы они точно понимали задумку. Почему это важно: Почти половина ошибок по доступности появляется только потому, что дизайнеры и разработчики по-разному понимают поведение элемента. Если зафиксировать эти детали заранее - проблемы просто не возникнут. https://github.blog/enterprise-software/collaboration/level-up-design-to-code-collaboration-with-githubs-open-source-annotation-toolkit/

Совет по CSS 💡 Возможно, вы не знаете об этом новом и самом простом способе вертикального центрирования содержимого в box layout

Если JavaScript у вас пока живёт в консоли и учебных задачках, самое время вытащить его в «настоящий мир». На открытом вебинаре соберём мини-приложение, которое очень похоже на реальный продуктовый интерфейс: каталог с карточками, фильтрами и поиском по данным с внешнего API. Что будем делать на вебинаре: - Подключим внешний API и загрузим реальные данные — без фейковых «заглушек». - Построим каталог с карточками: изображение, название, описание — как в интернет-магазинах или сервисах подбора. - Добавим поиск, фильтры и индикатор загрузки, чтобы интерфейс выглядел и вёл себя живо. - Покажем, как обрабатывать ошибки и показывать корректные UI-состояния, а не просто «ничего не происходит».- Разберём структуру приложения на чистом JS: где хранятся данные, где бизнес-логика, как устроен рендеринг. 9 декабря, 20:00 МСК. Открытый урок проходит в преддверии старта курса «JavaScript Developer. Basic».  Регистрация открыта: https://otus.pw/r2w8/?erid=2W5zFGhvdfn Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

✔️ Anthropic покупает создателей скоростного JavaScript-рантайма. Компания объявила о приобретении Bun - популярного инструментария для запуска и сборки JavaScript-приложений. Технологии и команда стартапа станут фундаментом для дальнейшего масштабирования платформы Claude Code. Bun, основанный Джаредом Самнером в 2021 году, завоевал популярность как экстремально быстрая альтернатива Node.js, объединяющая в себе рантайм, пакетный менеджер, бандлер и тестовый раннер. Bun останется опенсорсным проектом под лицензией MIT. Anthropic обещает продолжить инвестировать в инструмент, сохраняя его статус независимого и универсального решения для JS/TS-экосистемы. anthropic.com

🎨 Dembrandt: Извлечение дизайна с сайтов Dembrandt — это CLI-инструмент для извлечения дизайнерских токенов и брендовых активов с любых веб-сайтов. Используя Playwright, он обходит защиту от ботов и предоставляет полную информацию о дизайне. 🚀Основные моменты: - Извлечение логотипов и фавиконов - Анализ цветовой палитры и типографики - Определение отступов и границ - Поддержка популярных CSS-фреймворков - Быстрая и точная обработка данных 📌 GitHub: https://github.com/thevangelist/dembrandt #javascript

VoCSSels - Easily create 3D CSS & HTML Voxel Models Это JavaScript-приложение, разработанное для упрощения создания трехмерных воксельных моделей с использованием CSS и HTML. Это приложение использует библиотеку dom-to-image для преобразования ваших творческих идей в потрясающие изображения, делая его неотъемлемым инструментом для дизайнеров и разработчиков. 🌐Ссылка на код

Spectral.js - это библиотека для смешивания красок, использующая теорию Кубелки-Мунка. Используя возможности теории Кубелки-Мунка, надежной научной модели, имитирующей взаимодействие света с краской, Spectral.js гарантирует, что ваши проекты будут иметь яркие и реалистичные цвета. Благодаря использованию 7 различных спектральных каналов, включая белый, голубой, пурпурный, желтый, красный, зеленый и синий, Spectral.js может быть эффективно использован в различных веб-проектах, таких как: Веб-дизайн: Насыщайте свои веб-дизайны реалистичными цветовыми палитрами благодаря способности Spectral.js к реалистичному смешиванию цветов. Графика: Повысьте качество графики, используя реалистичное смешивание цветов, которое точно отражает взаимодействие света с различными оттенками. Генеративное искусство: Создавайте захватывающее генеративное искусство, используя мощные возможности смешивания цветов Spectral.js, в результате чего получаются визуально ошеломляющие и динамичные творения. Воспользуйтесь гибкостью и точностью, которые предлагает Spectral.js, и преобразуйте свои проекты с помощью обширной и яркой цветовой палитры, имитирующей реальное взаимодействие цветов. https://github.com/rvanwijnen/spectral.js

CSS трюк для раскрытия текста при прокрутке? ✨ Объедините position: sticky с анимацией прокрутки. Разделите текст на слова. Используйте значение «Pixel per character» для расчета начальной и конечной позиции прокрутки для каждого слова 🤙

Drag&Drop-конструктор интерфейсов на чистом JavaScript. Хватит писать калькуляторы и «todo-листы». Пора собрать что-то, что выглядит и ведёт себя как реальный UI-конструктор. На открытом уроке вы создадите полноценный мини-конструктор с интерактивными элементами. Без фреймворков и библиотек — только чистый JS, события мыши и немного архитектурной логики. Разберём механику drag&drop: как двигать элементы по экрану, управлять DOM, координатами и рендерингом, а также организовать плавный отклик интерфейса. Вы поймёте, как работает визуальное взаимодействие в браузере, как создавать живые интерфейсы, которые «реагируют» на пользователя, и почему архитектура даже простого проекта важнее кода. Занятие будет полезно начинающим разработчикам, которые хотят почувствовать JavaScript и перейти от теории к практике. 27 ноября, 20:00 МСК. Открытый урок проходит в преддверии старта курса «JavaScript Developer. Basic».  Регистрация открыта: https://otus.pw/LA5e/?erid=2W5zFHj7kZe Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

🚀 Holo2 - новое поколение мультимодальных моделей, созданных для понимания интерфейсов, навигации и рассуждений в вебе, на десктопах и в мобильных средах. 📈 Результаты Holo2 обновляет рекорды на ключевых бенчмарках UI-grounding: - 66.1% (+3%) на ScreenSpot-Pro - 76.1% (+5%) на OSWorld-G Модель уверенно превосходит все существующие аналоги. 🧠 Архитектура Holo2 построена на Qwen3-VL. Модель показывает сильное понимание интерфейсов и заметно улучшает навигацию и способность рассуждать, в отличие от предыдущих версий. Модель одинаково хорошо запускается в браузере, на Ubuntu и Android. 🔀 Mixture of Experts Флагманская версия 30B-A3B активирует только 3B параметров в каждом шаге - выдавая качество 30B-модели при гораздо меньшей себестоимости вычислений. Модель сама генерирует reasoning-токены - это повышает точность и устойчивость к контексту. Holo2 полностью совместима с архитектурой Surfer 2 и ReAct-пайплайнами - подходит для создания продвинутых UI-агентов. ⚙️ Развёртывание Запускается напрямую через vLLM и любой фреймворк, совместимый с Qwen3-VL. 📜 Лицензии - 4B и 8B — Apache-2 - 30B-A3B — только для некоммерческого использования 🔥 Блог: http://hcompany.ai/blog/holo2 🍳 Cookbook: https://github.com/hcompai/hai-cookbook/blob/main/holo2/holo_2_localization_huggingface.ipynb 🤗 HuggingFace: https://huggingface.co/collections/Hcompany/holo2

🚀 Сбер открыл доступ к передовым русскоязычным нейросетям Теперь разработчики могут использовать флагманские модели Сбера для работы с текстом, речью и визуальным контентом на русском языке. Это готовый фундамент для интеграции ИИ в проекты и экспериментов с локальными данными. 🚀 Основные моменты: - GigaChat Ultra-Preview - самая мощная модель Сбера. Лучше DeepSeek V3.1 и GigaChat Max 2 в русскоязычных задачах. Подходит для бизнеса, аналитики, разработки и дообучения на своих данных - GigaChat Lightning - лёгкая, компактная и быстрая. Конкурирует с Qwen3-4B, по скорости сравнима с Qwen3-1.7B, но намного умнее и больше по параметрам - GigaAM-v3 — распознавание речи с пунктуацией и нормализациейять моделей, которые превращают голос в текст с пунктуацией, понимают акценты, спонтанную речь и даже музыкальные запросы. - Kandinsky 5.0 — генерация изображений и видео с поддержкой кириллицы - K-VAE 1.0 — сжатие визуальных данных для обучения моделей 📌 Хабр: https://habr.com/ru/companies/sberdevices/articles/968904/

🚀 Интерактивный помощник для VSCode с Claude Code Claudix — это расширение для Visual Studio Code, которое интегрирует Claude AI прямо в ваш редактор. Оно предлагает интерактивный интерфейс для общения, управление сессиями и анализ кода, что делает процесс программирования более удобным и эффективным. 🚀 Основные моменты: - Интерактивный чат с Claude Code - Управление сессиями и история разговоров - Интеллектуальный анализ кода - Поддержка нескольких моделей Claude - Реакция в реальном времени 📌 GitHub: https://github.com/Haleclipse/Claudix #typescript

🧩 Визуализируй свой код с CodeVisualizer! CodeVisualizer — это расширение для VS Code, которое помогает разработчикам мгновенно понимать и навигировать по коду. Оно предлагает интерактивные графики зависимостей и красивые блок-схемы, позволяя быстро анализировать сложные логические структуры и архитектуру проектов. 🚀 Основные моменты: - Интерактивные графики зависимостей для анализа модулей - Блок-схемы для понимания логики функций - Поддержка более 7 языков программирования - Локальный анализ кода для повышения конфиденциальности - Мгновенные визуализации без ручного диаграммирования 📌 GitHub: https://github.com/DucPhamNgoc08/CodeVisualizer

View Transitions — это подарок 🎁 Один набор CSS keyframes и одна локальная пользовательская переменная для ::view-transition-old/new(body) 🚀