React JS – Telegram
React JS
17.5K subscribers
601 photos
73 videos
5 files
693 links
React программирование

@haarrp - admin

@itchannels_telegram - 🔥лучшие ит-каналы

@javanoscriptv - продвинутый javanoscript

@programming_books_it - бесплатные it книги

@ai_machinelearning_big_data - ml

№ 5037566384
Download Telegram
🌐 Docusaurus — генератор статических сайтов на основе React с понятной документацией!

🌟 Он поддерживает Markdown, компоненты React, управление версиями, переводы и SEO-оптимизацию.

🔐 Лицензия: CC-BY-4.0

🖥 Github

@react_tg
Please open Telegram to view this post
VIEW IN TELEGRAM
5👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Вы можете использовать CSS-анимацию с прокруткой, например, IntersectionObserver от JavaScript 🤙


img {
animation: reveal;
animation-timeline: view();
animation-range: entry 0% entry 150%;
}
@​keyframes reveal { 0% {
opacity: 0;
filter: brightness(2);
scale: 0.9;
}}
👍20
⚡️ Новый проект: DeepSeek OCR — React + FastAPI

Открыли репозиторий с современным веб-приложением OCR: фронтэнд на React, бэкенд на FastAPI.

Что умеет:
- Plain OCR — извлечение текста из изображения
- Describe — генерация описания изображения
- Find — поиск заданного термина с отображением рамки
- Freeform — задаёшь кастомный prompt и получаешь результат

Почему круто:
- Drag-and-drop загрузка изображений до 100 МБ, визуализация bounding boxes
- Конфигурация через .env (порт, размер файла, модель)
- Стек: React 18 + Vite + TailwindCSS + FramerMotion + FastAPI + PyTorch + Transformers
- Всё контейнеризовано через Docker + Docker Compose → можно быстро запустить

Как начать:
1. Клонируй репозиторий
2. Cкопируй .env.example в .env и настрой параметры
3. Запусти: docker compose up --build
4. Открой: фронтэнд (по умолчанию http://localhost:3000) & API (http://localhost:8000)

https://github.com/rdumasia303/deepseek_ocr_app/
12
🌐 Интерактивная визуализация данных для SVI

SVI — это инструмент для интерактивной визуализации данных, который позволяет пользователям легко исследовать и анализировать сложные наборы данных. Он предлагает интуитивно понятный интерфейс и мощные функции для создания наглядных графиков и диаграмм.

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

📌 GitHub: https://github.com/samihadouaj/svi

#javanoscript
😐73🔥3
📹 Загрузчик медиа из Twitter 🚀

TwitterXDownload — это мощный инструмент для скачивания видео и других медиа из Twitter. Он идеально подходит для контент-креаторов и маркетологов, позволяя эффективно переводить и перепубликовывать контент. Также проект служит отличной основой для изучения Next.js и других технологий.

🚀 Основные моменты:
- 🎥 Извлечение медиа из твитов с поддержкой пакетной загрузки
- 🔍 Умный поиск по твитам по автору, дате и типу медиа
- 🌐 Однокнопочный перевод и перепубликация твитов
- 🌍 Поддержка 12 языков для глобальной доступности
- 📦 Оптимизация для SEO и AdSense

📌 GitHub: https://github.com/imtonyjaa/twitterxdownload

#javanoscript
1
Записываем музыку при помощи CSS Grid

Слишком часто я наблюдал за тем, как импровизирующий музыкант трясущимися руками пытается увеличить pdf размером A4 на крошечном экране телефона в самом разгаре исполнения. Мы обязаны создать плавный и отзывчивый рендеринг музыки для веба!

В вебе нотная запись должна быть столь же доступной и плавной, как текст; однако пока это не так, и это уязвляет мои чувства. Давайте решим эту актуальную проблему.

https://cruncher.ch/blog/printing-music-with-css-grid/
👍7🔥61🥰1
🚀 Ищем HTML-верстальщика (лендинги) в вертикаль «инвестиции».
Только с опытом.
Нужен тот, кто быстро и качественно создает одностраничники.
Большой объём задач — постоянная загрузка для того, кто любит темп.
Ждем от тебя адаптив, аккуратность, скорость.

💰 Предлагаем хорошие условия по оплате
🌍 Работа полностью удалённая
Если умеешь быстро и качественно верстать — напиши 👉 @sueta_v_gorode
🤣20🌚21👍1🖕1
🛠️ Улучшаем коммиты с AI

Git Rewrite Commits — это инструмент для автоматического улучшения сообщений коммитов с помощью AI. Он помогает привести в порядок историю коммитов, создавая более осмысленные и структурированные сообщения, что особенно полезно перед публикацией проектов или для повышения удобства работы с репозиториями.

🚀Основные моменты:
- AI-генерация сообщений для коммитов
- Поддержка локальных моделей и оффлайн-работы
- Установка git hooks одним командой
- Оценка качества коммитов и автоматическое исправление
- Возможность настройки формата и языка сообщений

📌 GitHub: https://github.com/f/git-rewrite-commits

#javanoscript
😁64👍3🥰2
🧩 Davia: Интерактивная документация для вашего кода

Davia — это инструмент с открытым исходным кодом, который генерирует интерактивную внутреннюю документацию для вашего локального кода. Просто укажите путь к проекту, и он создаст документацию с визуализациями, которые можно редактировать в стиле Notion или в вашем IDE.

🚀 Основные моменты:
- Генерация документации для локальных проектов
- Интерактивные визуализации и редактирование
- Открытый исходный код
- Поддержка нескольких AI-провайдеров

📌 GitHub: https://github.com/davialabs/davia
7👍5
🔥 Подборка полезных ресурсов для программистов.

Здесь ты найдёшь всё это - коротко, по делу и без воды.
Пока другие ищут, где “подглядеть решение”, ты уже используешь самые свежие инструменты!

AI: t.me/ai_machinelearning_big_data
Python: t.me/pythonl
Linux: t.me/linuxacademiya
Devops: t.me/DevOPSitsec
Собеседования DS: t.me/machinelearning_interview
C++ t.me/cpluspluc
Docker: t.me/DevopsDocker
Хакинг: t.me/linuxkalii
Data Science: t.me/data_analysis_ml
Javanoscript: t.me/javanoscriptv
C#: t.me/csharp_1001_notes
Java: t.me/java_library
Базы данных: t.me/sqlhub
Python собеседования: t.me/python_job_interview
Мобильная разработка: t.me/mobdevelop
Golang: t.me/Golang_google
React: t.me/react_tg
Rust: t.me/rust_code
ИИ: t.me/vistehno
PHP: t.me/phpshka
Android: t.me/android_its
Frontend: t.me/front
Big Data: t.me/bigdatai
МАТЕМАТИКА: t.me/data_math
Kubernets: t.me/kubernetc
Разработка игр: https://news.1rj.ru/str/gamedev
Haskell: t.me/haskell_tg
Физика: t.me/fizmat

💼 Папка с вакансиями: t.me/addlist/_zyy_jQ_QUsyM2Vi
Папка Go разработчика: t.me/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: t.me/addlist/eEPya-HF6mkxMGIy
Папка ML: https://news.1rj.ru/str/addlist/2Ls-snqEeytkMDgy
Папка FRONTEND: https://news.1rj.ru/str/addlist/mzMMG3RPZhY2M2Iy
Папка Linux:https://news.1rj.ru/str/addlist/w4Doot-XBG4xNzYy

😆ИТ-Мемы: t.me/memes_prog
🇬🇧Английский: t.me/english_forprogrammers
🧠ИИ: t.me/vistehno

🎓954ГБ ОПЕНСОРС КУРСОВ: @courses
📕Ит-книги бесплатно: https://news.1rj.ru/str/addlist/BkskQciUW_FhNjEy

Сохрани себе, чтобы не потерять!
4👍2
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Отличный гайд по тому, как прокачать навык работы с дейтпикерами в JavaScript.

В нём есть примеры, ясные объяснения и наглядный формат, который помогает быстро разобраться во всех нюансах создания собственных дейтпикеров на чистом JS.

Читать здесь 👍
🔥12
This media is not supported in your browser
VIEW IN TELEGRAM
View Transitions — это подарок 🎁

Один набор CSS keyframes и одна локальная пользовательская переменная для ::view-transition-old/new(body) 🚀
🔥13🌚3👍2
🧩 Визуализируй свой код с CodeVisualizer!

CodeVisualizer — это расширение для VS Code, которое помогает разработчикам мгновенно понимать и навигировать по коду. Оно предлагает интерактивные графики зависимостей и красивые блок-схемы, позволяя быстро анализировать сложные логические структуры и архитектуру проектов.

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

📌 GitHub: https://github.com/DucPhamNgoc08/CodeVisualizer
3
🚀 Интерактивный помощник для VSCode с Claude Code

Claudix — это расширение для Visual Studio Code, которое интегрирует Claude AI прямо в ваш редактор. Оно предлагает интерактивный интерфейс для общения, управление сессиями и анализ кода, что делает процесс программирования более удобным и эффективным.

🚀 Основные моменты:
- Интерактивный чат с Claude Code
- Управление сессиями и история разговоров
- Интеллектуальный анализ кода
- Поддержка нескольких моделей Claude
- Реакция в реальном времени

📌 GitHub: https://github.com/Haleclipse/Claudix

#typenoscript
3👍2🕊1
🚀 Сбер открыл доступ к передовым русскоязычным нейросетям

Теперь разработчики могут использовать флагманские модели Сбера для работы с текстом, речью и визуальным контентом на русском языке. Это готовый фундамент для интеграции ИИ в проекты и экспериментов с локальными данными.

🚀 Основные моменты:
- 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/
🔥5🖕53🕊1🐳1
🚀 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
3👍1🔥1
Drag&Drop-конструктор интерфейсов на чистом JavaScript.

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

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

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

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

Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
1
This media is not supported in your browser
VIEW IN TELEGRAM
CSS трюк для раскрытия текста при прокрутке?

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

Разделите текст на слова. Используйте значение «Pixel per character» для расчета начальной и конечной позиции прокрутки для каждого слова 🤙
18👍6🔥5
This media is not supported in your browser
VIEW IN TELEGRAM
Интерактивное объяснение CSS calc()
👍101
Spectral.js - это библиотека для смешивания красок, использующая теорию Кубелки-Мунка.

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

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

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

https://github.com/rvanwijnen/spectral.js
5👍2🔥2