Drag&Drop-конструктор интерфейсов на чистом JavaScript.

Хватит писать калькуляторы и «todo-листы». Пора собрать что-то, что выглядит и ведёт себя как реальный UI-конструктор. На открытом уроке вы создадите полноценный мини-конструктор с интерактивными элементами. Без фреймворков и библиотек — только чистый JS, события мыши и немного архитектурной логики. Разберём механику drag&drop: как двигать элементы по экрану, управлять DOM, координатами и рендерингом, а также организовать плавный отклик интерфейса.

Вы поймёте, как работает визуальное взаимодействие в браузере, как создавать живые интерфейсы, которые «реагируют» на пользователя, и почему архитектура даже простого проекта важнее кода. Занятие будет полезно начинающим разработчикам, которые хотят почувствовать JavaScript и перейти от теории к практике.

27 ноября, 20:00 МСК. Открытый урок проходит в преддверии старта курса «JavaScript Developer. Basic». 

Регистрация открыта: https://otus.pw/LA5e/?erid=2W5zFHj7kZe

Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

CSS трюк для раскрытия текста при прокрутке? ✨

Объедините position: sticky с анимацией прокрутки.

Разделите текст на слова. Используйте значение «Pixel per character» для расчета начальной и конечной позиции прокрутки для каждого слова 🤙

Spectral.js - это библиотека для смешивания красок, использующая теорию Кубелки-Мунка.

Используя возможности теории Кубелки-Мунка, надежной научной модели, имитирующей взаимодействие света с краской, Spectral.js гарантирует, что ваши проекты будут иметь яркие и реалистичные цвета.

Благодаря использованию 7 различных спектральных каналов, включая белый, голубой, пурпурный, желтый, красный, зеленый и синий, Spectral.js может быть эффективно использован в различных веб-проектах, таких как:

Веб-дизайн: Насыщайте свои веб-дизайны реалистичными цветовыми палитрами благодаря способности Spectral.js к реалистичному смешиванию цветов.
Графика: Повысьте качество графики, используя реалистичное смешивание цветов, которое точно отражает взаимодействие света с различными оттенками.
Генеративное искусство: Создавайте захватывающее генеративное искусство, используя мощные возможности смешивания цветов Spectral.js, в результате чего получаются визуально ошеломляющие и динамичные творения.
Воспользуйтесь гибкостью и точностью, которые предлагает Spectral.js, и преобразуйте свои проекты с помощью обширной и яркой цветовой палитры, имитирующей реальное взаимодействие цветов.

https://github.com/rvanwijnen/spectral.js

🎨 Dembrandt: Извлечение дизайна с сайтов

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

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

📌 GitHub: https://github.com/thevangelist/dembrandt

#javanoscript

Если JavaScript у вас пока живёт в консоли и учебных задачках, самое время вытащить его в «настоящий мир». На открытом вебинаре соберём мини-приложение, которое очень похоже на реальный продуктовый интерфейс: каталог с карточками, фильтрами и поиском по данным с внешнего API.

Что будем делать на вебинаре:
- Подключим внешний API и загрузим реальные данные — без фейковых «заглушек».
- Построим каталог с карточками: изображение, название, описание — как в интернет-магазинах или сервисах подбора.
- Добавим поиск, фильтры и индикатор загрузки, чтобы интерфейс выглядел и вёл себя живо.
- Покажем, как обрабатывать ошибки и показывать корректные UI-состояния, а не просто «ничего не происходит».- Разберём структуру приложения на чистом JS: где хранятся данные, где бизнес-логика, как устроен рендеринг.

9 декабря, 20:00 МСК. Открытый урок проходит в преддверии старта курса «JavaScript Developer. Basic». 

Регистрация открыта: https://otus.pw/r2w8/?erid=2W5zFGhvdfn


Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

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

#javanoscript

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