17266
React программирование @haarrp - admin @itchannels_telegram - 🔥лучшие ит-каналы @javascriptv - продвинутый javascript @programming_books_it - бесплатные it книги @ai_machinelearning_big_data - ml № 5037566384
Пачка вариантов анимирования кнопки меню при нажатии на нее
#меню #бургеркнопки
https://codepen.io/mblode/pen/YzozOm
@react_tg
Video To ASCII Art
Энтузиаст сделал проект, который превращает короткие видео в ASCII-арт. Проект реализован с помощью CSS и JavaScript.
По ссылке можно посмотреть код проекта и попробовать воспроизвести различные видео: https://codepen.io/konstantindenerz/pen/YzgRQZj
#codepen
💎 Liquid Glass для React — современный UI-эффект в духе Appleliquid-glass-react — это эффект "жидкого стекла", теперь как компонент для React. Поддерживает преломление, размытие, хроматическую аберрацию и реакцию на курсор. Стильно, плавно и нативно выглядит в интерфейсе.
🧪 Что умеет:
• Преломление и искажение (`displacementScale`, blurAmount, `saturation`)
• Хроматическая аберрация и глянцевый блик
• Эффект "жидкой реакции" на курсор (`elasticity`)
• Реалистичный визуальный стиль как у macOS/iOS
• Кастомизация: cornerRadius, padding, onClick, mouseContainer
📦 Установка:
npm install liquid-glass-react
<LiquidGlass
displacementScale={64}
blurAmount={0.1}
saturation={130}
aberrationIntensity={2}
elasticity={0.35}
cornerRadius={100}
>
<span className="text-white font-medium">Click Me</span>
</LiquidGlass>
🔥 Успех в IT = скорость + знания + окружение
Здесь ты найдёшь всё это — коротко, по делу и без воды.
Пока другие ищут, где “подглядеть решение”, ты уже используешь самые свежие инструменты!
AI: t.me/ai_machinelearning_big_data
Python: t.me/pythonl
Linux: t.me/linuxacademiya
Собеседования DS: t.me/machinelearning_interview
C++ t.me/cpluspluc
Docker: t.me/DevopsDocker
Хакинг: t.me/linuxkalii
Devops: t.me/DevOPSitsec
Data Science: t.me/data_analysis_ml
Javascript: t.me/javascriptv
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_interview
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
Разработка игр: /channel/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: /channel/addlist/2Ls-snqEeytkMDgy
Папка FRONTEND: /channel/addlist/mzMMG3RPZhY2M2Iy
😆ИТ-Мемы: t.me/memes_prog
🇬🇧Английский: t.me/english_forprogrammers
🧠ИИ: t.me/vistehno
🎓954ГБ ОПЕНСОРС КУРСОВ: @courses
📕Ит-книги бесплатно: /channel/addlist/BkskQciUW_FhNjEy
Подпишись, если хочешь быть в числе тех, кого зовут в топовые проекты!
Совет по веб-доступности 💡
Лучший способ сделать ваши ссылки, состоящие только из иконок, удобными для экранных читалок.
@react_tg
💡 Клевый ресурс для веб-разработчиков: 12 удобных инструментов в одном месте.
Внутри — генераторы треугольников, теней, градиентов, оптимизация SVG, конвертеры и многое другое.
Все инструменты простые, визуальные и доступны бесплатно.
https://omatsuri.app/
@react_tg
🚀 React Virtuoso — виртуализация списков в React на максимум. Этот набор компонентов умеет всё: от простых списков до чатов, таблиц и masonry-раскладок. Все функции работают из коробки — не нужно вручную рассчитывать размеры элементов или изобретать бесконечную прокрутку.
Проект поддерживает группировку с липкими заголовками и адаптивность под разные сценарии. Хотите плавную прокрутку при подгрузке сообщений в чате? Нужна таблица с виртуализацией строк? Virtuoso справляется с этим минимальным количеством кода.
🤖 GitHub
@react_tg
Стань частью масштабного ИТ-события от МТС
True Tech Day 2025 — третья технологическая конференция МТС для профессионалов ИТ‑индустрии. Одна из главных тем в этом году — тренды и практики искусственного интеллекта.
В программе:
— Доклады от ученых и зарубежных спикеров с индексом Хирша более 50.
— Кейсы применения современных ИИ‑решений — от AI‑агентов, тестов LLM и бенчмарков до вопросов регулирования.
— AI-интерактивы и технологические квесты.
— Пространство для нетворкинга,
…а еще after-party со звездным лайн-апом.
Когда: 6 июня
Где: Москва, МТС Live Холл и онлайн
Участие бесплатное, но мест мало. Регистрируйся по ссылке.
⚒️ Как освоить работу с API и научиться интегрировать реальные данные на веб-страницу?
На открытом вебинаре вы разберетесь:
▸Что такое API, как с ним работать;
▸Как получать данные с реальных серверов с помощью JavaScript и fetch();
▸ Мы покажем, как создавать простые приложения с реальными API: погода, курсы валют, случайные цитаты.
❗️ Получите практические навыки работы с API, которые помогут вам быстро создать полезные веб-приложения. Это отличный старт для начинающих разработчиков и верстальщиков, которые хотят выйти на новый уровень.
📅 Урок 3 июня в 20:00 МСК проходит в преддверие старта курса «Fullstack Developer»: https://tglink.io/48c0f73ee7b2?erid=2W5zFJ1SDSY
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
Магистратура, после которой работа найдёт тебя сама 🎓
Программа «Запуск высокотехнологичных продуктов» — совместная магистратура МФТИ и Сбера.
Здесь студенты сразу работают над реальными проектами, получают бизнес-навыки и учатся у тех, кто уже делает технологии будущего.
Что ты получаешь 👇
✔️ работу над своим проектом с 1-го дня
✔️ экспертизу МФТИ + бизнес-практику от Сбера
✔️ комьюнити и менторов
✔️ шанс выиграть грант на 100% стоимости обучения
Если тебе важна практика, а не только теория — это твой путь.
Подавай документы до 15 августа 📆
🔧Хотите научиться создавать собственные, повторно используемые компоненты для веб-приложений?
Откройте для себя мощь веб-компонентов и Shadow DOM!
На открытом уроке вы узнаете:
▸ Как создавать изолированные UI-компоненты с помощью чистого JavaScript,
▸ Как использовать их в любых проектах, независимо от фреймворка,
▸ Сравнение веб-компонентов и React-компонентов — плюсы и минусы каждого подхода.
🔹 Узнайте, как быстро разрабатывать универсальные компоненты для интерфейсов, которые легко интегрируются в любые веб-приложения. Вы получите практические знания по созданию UI-kit с нуля и сможете использовать их в реальных проектах.
🎓Урок пройдет в преддверие старта курса «Fullstack Developer»
📅 Встречаемся 28 мая в 20:00 МСК.
➡️ Регистрация открыта: https://otus.pw/HGEk/?erid=2W5zFHBybpt
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
📥 Stoplight Elements — это мощный инструмент для создания элегантной и удобной документации API. Он поддерживает OpenAPI и Markdown, позволяя не только описывать endpoints, но и добавлять обучающие статьи, руководства и примеры использования.
В репозитории есть примеры для разных фреймворков: React, Angular и даже чистый HTML. Можно быстро развернуть демо и посмотреть, как это работает. Проект доступен в виде React-компонентов или Web Components, что делает его гибким для интеграции в любые проекты — будь то многостраничный портал в стиле Stripe или простая документация для CMS.
🤖 GitHub
@react_tg
Frontend + Летний митап + Суббота = Я.Субботник по разработке интерфейсов 💛
7 июня в Москве Яндекс Go проводит Я.Субботник по разработке интерфейсов. В программе 4 доклада и воркшоп:
👉 Артемий Карпов расскажет, как команда выстраивает взаимодействие между разработкой и тестированием при написании автотестов и улучшении семантики приложения
👉 Миша Колосовский покажет, как сделать статические схемы интерактивными и причем тут SVG
👉 Давид Давыдов объяснит, что мы сделали с серверным API и как пришли к одной строчке кода вместо сотни
👉 Серёжа Алейников поделится опытом портирования нативного BDUI в вебе
На воркшопе участники в командах будут исправлять некорректные интерфейсы, стараясь учесть требования дизайнеров, бэкенд-разработчиков и тестировщиков. Вместе обсудим варианты решений, а коллеги из Яндекса помогут найти самое оптимальное.
Регистрируйтесь и зовите друзей!
Мероприятие бесплатное. Количество мест в офлайне ограничено — пожалуйста, дождитесь нашего подтверждения.
Формошлёп — сотни хаков для фронтендеров в одном месте
Никакой скучной теории, воды и прочей шляпы, только практические примеры, которые работают.
👉 Подписывайся на @frontbox — стань тем, кто знает, как решить проблему, пока остальные ищут ответ на Stack Overflow.
🗣️ Astuto — open-source платформа для сбора фидбэка пользователей. С помощью инструмента можно публиковать roadmap, модерировать предложения пользователей и интегрироваться с Jira/Slack через webhooks.
Проект имеет гибкие настройки доступа от анонимных предложений до обязательной модерации. В отличие от аналогов, здесь нет ограничений на количество проектов или пользователей, а развёртывание через Docker занимает минуты.
🤖 GitHub
@react_tg
✨ TWC — React-компоненты с Tailwind CSS в одну строку. Этот проект упрощает создание переиспользуемых UI-компонентов, заменяя многословные объявления классов на лаконичный синтаксис. Вместо ручного прописывания className и TWC — React-кдостаточно вызватьоненты с Taс Tailwind-классами.
Под капотом сохраняется полная совместимость с RSC и поддержка автодополнения в редакторах. Размер библиотеки — всего 0.5 КБ, что делает её одной из самых лёгких альтернатив styled-components для экосистемы Tailwind. Проект вдохновлён классическими CSS-in-JS решениями, но использует преимущества utility-подхода.
🤖 GitHub
@react_tg
🚀 Multiwoven — удобный reverse ETL-инструмент в облаке. Этот проект позволяет развернуть полноценную платформу для синхронизации данных между хранилищами и бизнес-приложениями (Salesforce, HubSpot, Slack) прямо в вашей инфраструктуре. Поддержка AWS, Azure и GCP делает развёртывание простым, а открытая архитектура даёт свободу для кастомизации.
Инструмент построен как монорепозиторий, состоящий из нескольких основных частей: бэкенд-сервис, React-интерфейс и фреймворк для создания коннекторов на Ruby. Для локального тестирования достаточно Docker’а, а для прода доступен вариант с Kubernetes и облачными виртуальными машинами.
🤖 GitHub
@react_tg
Эффект появления персонажа при наведении на карточку с ним
#hover #карточки
📌 Код
@react_tg
🔮 Ring UI — официальная библиотека компонентов от JetBrains для веб-интерфейсов. Набор включает готовые React-компоненты, которые используются во внутренних продуктах компании и доступны для сторонних разработчиков плагинов.
Библиотека предлагает два варианта использования: предсобранная версия через npm или интеграция исходного кода в свой Webpack-сборщик. Компоненты следуют фирменному стилю JetBrains, включая интерактивные элементы вроде кнопок, алертов и индикаторов загрузки.
🤖 GitHub
@react_tg
🎨 Веб-дизайнерам на заметку — сервис Pixie позволяет генерировать любые пиксель-арт изображения для проектов.
Внутри — несколько мощных моделей на выбор, включая Gemini 2.0 и Flux 1. Генерирует всё: от персонажей и объектов до динозавров и поп-культуры.
Работает по промптам, понимает контекст, выдаёт готовую пиксельную графику.
🧪 Доступен бесплатно — можно протестировать по ссылке.
https://pixie.haus/
@react_tg
⚡️ Re.Pack — новый бандлер для React Native с поддержкой Rspack и Webpack. Проект особенно полезен для микрофронтендов благодаря встроенной поддержке Module Federation.
Проект позиционируется как drop-in replacement для Metro, то есть обещает совместимость с существующими RN-приложениями без болезненной миграции.
🤖 GitHub
@react_tg
🎥 Cap — open-source проект Cap, предлагающий функционал, аналогичный популярному сервису Loom. Инструмент уже сейчас позволяет записывать и редактировать видео прямо с рабочего стола, а в ближайших планах — запуск self-hosted версий для Vercel и Render.
Гибридная архитектура проекта сочетает Rust для десктоп-приложения и Next.js для веб-версии, с единой системой компонентов на React. Разработчики активно привлекают сообщество к доработке, особенно в части создания инструкций по самостоятельному развертыванию.
🤖 GitHub
@react_tg
Прелоадер, который отлично подойдёт для сайта доставки еды
#прелоадер #ожидание #загрузка
https://codepen.io/jkantner/pen/OJGBYJG
@react_tg
👩💻 В этой статье автор предлагает использовать пользовательские события для управления состоянием в React-приложениях!
🌟 Автор объясняет, что, хотя популярные решения, такие как Context API, Redux или Zustand, эффективны, можно воспользоваться встроенной возможностью браузера — Custom Events — для облегчения коммуникации между компонентами без необходимости в пропс-дриллинге или сложных библиотек управления состоянием.
🔗 Ссылка: *клик*
@react_tg
🚀 FastUI — фреймворк, позволяющий собирать React-интерфейсы, описывая их декларативно на Python. Под капотом у проекта набор Pydantic-моделей, которые автоматически преобразуются в TypeScript-типы и React-компоненты.
Хотя инструмент еще находится в стадии активной разработки, он уже демонстрирует интересный подход — бэкенд полностью определяет UI, а фронтенд становится исполнителем без собственной бизнес-логики.
🤖 GitHub
@python_job_interview
👩💻 Эта статья обсуждает ключевые принципы работы компонентов в React, такие как однонаправленный поток данных, подъем состояния (lifting state up) и обновление UI в зависимости от изменений данных!
🔗 Ссылка: *клик*
@react_tg
📍 Залипательное движение радужной полосы на время загрузки вашего сайта или приложения
#прелоадер #ожидание #загрузка
https://codepen.io/jkantner/pen/mdKOpbe
@react_tg
👩💻 В этой статье автор объясняет ключевые хуки React 19: useFormState() для управления состоянием форм, useFormStatus() для отслеживания статуса отправки, useActionState() для обработки асинхронных действий, useOptimistic() для оптимистичных обновлений UI и use() для работы с промисами в компонентах!
🔗 Ссылка: *клик*
@react_tg
🌐 Plyr — это легковесный и доступный медиаплеер с открытым исходным кодом, поддерживающий HTML5 Video, HTML5 Audio, а также интеграцию с YouTube и Vimeo!
🌟 Он разработан для работы во всех современных браузерах и предоставляет разработчикам возможность легко встраивать и настраивать воспроизведение мультимедийного контента на веб-страницах.
🔐 Лицензия: MIT
🖥 Github
@javascriptv
📝 Remirror — react-библиотека для создания текстовых редакторов. Этот open-source проект, предлагающий готовые решения для WYSIWYG-редактирования с поддержкой мобильных устройств и доступностью.
Библиотека имеет модульную архитектуру: можно использовать готовые расширения или создавать собственные на низком уровне. Для старта достаточно установить пакет и собрать редактор из 30+ доступных компонентов.
🤖 GitHub
@react_tg