Совет по CSS 💡

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

⚡️ Annotation Toolkit помогает дизайнерам прямо в макете объяснить, как должны работать элементы интерфейса.

Проще говоря, он позволяет:

- подписывать элементы: что кликается, что меняется, как ведёт себя при разной ширине экрана;

- сразу указать требования по доступности: например, какой alt-текст нужен или что должно быть доступно с клавиатуры;

- убрать путаницу при передаче макета разработчикам, чтобы они точно понимали задумку.

Почему это важно:
Почти половина ошибок по доступности появляется только потому, что дизайнеры и разработчики по-разному понимают поведение элемента. Если зафиксировать эти детали заранее - проблемы просто не возникнут.

https://github.blog/enterprise-software/collaboration/level-up-design-to-code-collaboration-with-githubs-open-source-annotation-toolkit/

🔍📡 Инструмент для сканирования уязвимостей в 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

🔍 Обнаружение React Server Components (RSC) в Chrome

Расширение для Chrome, позволяющее автоматически и активно обнаруживать отпечатки React Server Components и Next.js App Router на веб-страницах. Подходит для образовательных и исследовательских целей, с акцентом на безопасность.

🚀 Основные моменты:
- Автоматическое сканирование страниц на наличие RSC
- Активное отправление запросов для анализа ответов сервера
- Множественные методы обнаружения, включая анализ заголовков
- Обновление значка расширения при обнаружении RSC

📌 GitHub: https://github.com/mrknow001/RSC_Detector

#javascript

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

Совет по Javascript 💡

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

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

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

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

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

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

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

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

@react_tg

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

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

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

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

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

Совет по CSS 💡

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

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

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

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

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

#javascript

Классика

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

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

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

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

Совет по JavaScript 💡

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

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

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

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

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

⚡️ React.GG Visualized - интерактивная визуализация экосистемы React

Это сайт, который показывает всё вокруг React в виде графа: библиотеки, инструменты, плагины, экосистему.

Каждый узел - это проект, ссылка, зависимость или связка.

Ты можешь:
• видеть, какие пакеты связаны между собой
• исследовать экосистему на лету
• находить полезные инструменты вокруг React
• смотреть, какие решения чаще всего используются

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

Ссылка: https://react.gg/visualized

Я увидел эту замечательную технику CSS Video Masking на сайте iPad.

Довольно аккуратное использование CSS - не то, что я ожидал!