React JS

⚡️ Как устроен React, если собрать его с нуля

Этот гайд показывает, как написать упрощённый React своими руками.
Использовать такой код в продакшне не будешь, зато становится понятно,
как внутри работают рендеринг, состояние и обновления.

В статье есть и разбор, и ссылка на GitHub с готовым примером — можно покопаться и поэкспериментировать.

Подробнее:
https://www.rob.directory/blog/react-from-scratch

Совет по JavaScript 💡

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

🔍 Ваши данные под микроскопом

YourInfo — это демонстрация осведомленности о конфиденциальности, показывающая, какую информацию сайты могут собирать о вас через отпечатки браузера и поведенческий анализ. Интерактивная 3D-карта позволяет видеть других посетителей в реальном времени, а AI помогает выявлять личные данные.

🚀Основные моменты:
- Отпечатки браузера: анализ Canvas, WebGL, шрифтов и т.д.
- Отслеживание поведения: движения мыши, прокрутка, ввод текста
- Обнаружение устройства: информация о GPU, CPU, RAM
- AI-профилирование: использование Grok AI для анализа данных
- Реальное время: взаимодействие через WebSocket и CesiumJS

📌 GitHub: https://github.com/siinghd/yourinfo

Классика

🚀 Исследуйте React Server Components с RSC Explorer

RSC Explorer — это инструмент для изучения и экспериментов с протоколом React Server Components. Он позволяет запускать серверную и клиентскую части RSC в браузере, просматривать поток RSC шаг за шагом и наблюдать за деревом React в реальном времени. В проекте также представлены примеры, демонстрирующие взаимодействие функций сервера и клиента.

🚀 Основные моменты:
- Интерактивный просмотр RSC потока
- Поддержка примеров для обучения
- Работает в браузере без зависимостей от React
- Открытый проект с возможностью улучшений

📌 GitHub: https://github.com/gaearon/rscexplorer

#javascript

Совет по CSS 💡

Полезный сниппет, позволяющий скрыть содержимое, но сохранить его доступным для пользователей программ для чтения

Пишете на JavaScript, но всё ещё завязаны на фреймворки и готовые компоненты? Хотите понимать, как работает браузер, и создавать свои элементы, а не только использовать чужие?

На открытом уроке разберём, как JavaScript взаимодействует с DOM, как с помощью классов и ООП собирать структурированные компоненты и что такое Web Components на практике. Шаг за шагом создадим кастомный HTML-тег с нуля и подключим его к странице так, чтобы элемент можно было переиспользовать.

Урок будет полезен начинающим фронтенд-разработчикам и тем, кто хочет уйти от фреймворков к осознанному пониманию браузерного API. Вебинар проходит в преддверие старта курса «JavaScript Developer. Basic».

Встречаемся 22 декабря в 20:00 МСК.

Регистрация открыта: https://otus.pw/yxOub/?erid=2W5zFHpsJSt
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

🎶 Управляй ИИ на Mac с Chorus!

Chorus - это мощный инструмент для работы с ИИ, созданный для Mac. Он позволяет интегрировать различные модели ИИ в одном приложении, упрощая доступ и управление ими. Идеально подходит для разработчиков и исследователей.

🚀Основные моменты:
- Интуитивный интерфейс для работы с ИИ
- Поддержка множества моделей
- Оптимизирован для Mac
- Легкая интеграция с другими инструментами

📌 GitHub: https://github.com/meltylabs/chorus

@react_tg

Муки совести SEOшника

«Сделай, чтобы работало одинаково во всех браузерах». Фронтендеры знают, что эта фраза звучит проще, чем выполняется.

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

Совет по 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