17266
React программирование @haarrp - admin @itchannels_telegram - 🔥лучшие ит-каналы @javascriptv - продвинутый javascript @programming_books_it - бесплатные it книги @ai_machinelearning_big_data - ml № 5037566384
Pizza Loader
Это svg-картинка, которая анимируется при помощи библиотеки gsap.
https://codepen.io/chrisgannon/details/abaEbaG
#js
✨ Craft.js — React-фреймворк от prevwong для создания drag-and-drop редакторов страниц с полным контролем над UI и логикой.
● Построй свой редактор с нуля: компоненты, состояние, перетаскивание, JSON-экспорт/импорт
● Абсолютно гибкий
● Уже 8k+ ⭐ на GitHub и ~800 форков
● В разработке новая система Reka — позволит создавать компоненты с props и state как в настоящем React
👉 https://github.com/prevwong/craft.js
@react_tg
🔥 Успех в 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_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
Разработка игр: /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
Подпишись, если хочешь быть в числе тех, кого зовут в топовые проекты!
🖥 node-google-backup — утилита командной строки, разработанная для автоматического резервного копирования данных из сервисов Google: почты (Gmail), календаря (Google Calendar) и контактов (Google Contacts)!
🌟 Она загружает эти данные в локальные файлы, синхронизируя только новые письма, контакты и события. Структура создаваемых директорий выглядит следующим образом:
🔐 Лицензия: GPL-3.0
🖥 Github
@react_tg
🚀 Promises-Training — практикуй промисы в JavaScript
Promises-Training — это коллекция упражнений по промисам с автоматическими тестами, где можно прокачать работу с async/await, .then/.catch, конкурентным выполнением и ограничением параллельности.
⏩ Почему полезно:
- Пошаговый рост сложности: от простых примеров до нетривиальных сценариев.
- Автотесты сразу показывают, правильно ли решена задача.
- Хорошо подходит, чтобы глубже понять асинхронность и промисы.
- Есть упражнения по реальным случаям: parallelMaxConcurrency, concurrencyOverride, extractingResolvers и др.
📦 Как начать:
npm create promises-training@latest
🚀Claudable!
Claudable — это мощный конструктор веб-приложений на базе Next.js, который позволяет создавать и развертывать приложения, просто описывая их идею. Используя возможности AI-агента Claude Code, вы мгновенно получаете рабочий код и живой превью вашего приложения.
🚀 Основные моменты:
- Генерация кода на основе естественного языка
- Мгновенный просмотр изменений с функцией горячей перезагрузки
- Легкое развертывание на Vercel с одним кликом
- Интеграция с Supabase для работы с базами данных
- Автоматическое обнаружение и исправление ошибок
📌 GitHub: https://github.com/opactorai/Claudable
🍓 React-joyride — удобное решение для создания интерактивных туров по интерфейсу.
Основанный на react-floater проект позволяет гибко настраивать внешний вид и поведение туров. Можно использовать как готовые компоненты, так и создавать собственные элементы оформления.
Проект очень просто интегрировать с react-приложениями. Достаточно определить шаги тура и подключить компонент в нужном месте.
🤖 GitHub
@react_tg
📑 Landy — бесплатный шаблон лендинга на React с TypeScript
Он используется для быстрого создания профессиональных лендингов без глубоких знаний React. Шаблон использует хуки, TypeScript и код-сплиттинг. Всё содержимое хранится в JSON-файлах — тексты можно править, не копаясь в коде.
Интересные детали:
— Мультиязычность без перезагрузки страницы
— Готовые анимированные секции
— Идеальные показатели в Google Lighthouse
— Встроенная контактная форма с валидацией
🤖 GitHub
@react_tg
SourceCraft от Яндекса прокачал комьюнити-функции, и теперь опенсорс здесь — это не только репозитории и коммиты, но и настоящая система признания.
Теперь опенсорс на платформе — это не только код, но и система признания. Вместо обычных звёзд — рейтинги с многоуровневыми градациями, которые позволяют точнее оценивать проекты и показывают авторам, что заходит аудитории.
Добавились ачивки с индивидуальным дизайном от нейросети — каждая награда отражает личный вклад разработчика. А связь рейтингов с грантами упрощает поиск перспективных проектов и даёт им шанс на поддержку.
До 31 августа проходит конкурс: перенесите свой проект на SourceCraft, наберите больше лайков и получите эксклюзивный мерч.
Информация об организаторе Акции, о правилах проведения Акции, количестве призов, сроках, месте и порядке их получения размещена по ссылке
✔️ Перед вами — ультимативный учебник по JavaScript на русском, который смело можно назвать лучшим пособием по этому языку.
Полный охват: от базового синтаксиса до замыканий, ООП, событий, промисов и других сложных тем.
Десятки наглядных примеров кода в каждой главе — материал усвоит даже новичок.
Практика на каждом шагу: задачи и контрольные после глав и больших разделов.
Регулярные обновления с пометкой даты и времени — всегда актуальный контент.
Это must-have для любого, кто пишет на JavaScript:
https://learn.javascript.ru/
⚙️🚀 Как работают децентрализованные приложения и что такое Web3?
👉 На открытом уроке 14 августа в 20:00 МСК мы разберём, почему смарт-контракты и блокчейн лежат в основе успешных децентрализованных приложений. Вы увидите реальные кейсы, узнаете, как использовать Solidity для создания безопасных и эффективных приложений, а также разберете перспективы Web3 и развития децентрализованных технологий.
💪 Этот урок откроет для вас новые горизонты в мире блокчейна и Web3. Вы получите актуальные знания, которые помогут вам в освоении Solidity и создании ваших первых dApp.
🎁 Присоединяйтесь к уроку и получите специальное предложение на курс «Solidity Developer».
👉 Для участия зарегистрируйтесь: https://otus.pw/h9xw/?erid=2W5zFJ38f4c
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
📊 react-pivottable — React-библиотека для создания интерактивных сводных таблиц с drag-and-drop интерфейсом, вдохновлённым старыми версиями Excel.
Проект разработан Plotly и позволяет анализировать данные, визуализируя их в виде таблиц или графиков Plotly.js. Поддерживает гибкую настройку, работу с разными форматами данных и интеграцию в React-приложения через NPM.
🤖 GitHub
@react_tg
💪 Хотите работать в финтехе? Освойте Solidity!
👉 Востребованное обучение для разработчиков с опытом программирования от года, которые хотят получить навыки написания кода и аудита безопасности, чтобы попасть в одну из самых перспективных и высокооплачиваемых сфер IT.
Освойте разработку децентрализованных приложений на профессиональном уровне всего за 5 месяцев на онлайн-курсе «Solidity Developer» от OTUS!
Забудьте о скучном обучении — здесь вас ждут настоящие челленджи и нестандартные практические решения. А еще крутые проекты для портфолио!
👉 Пройдите вступительные тест для оценки подходит ли вам курс: https://otus.pw/7cQ8/?erid=2W5zFJEppGx
🎁 Получите welcome скидку для успешное прохождение теста. Подробности уточняйте у менеджера.
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
🚀 DevDocs
Это универсальная платформа с документацией по различным технологиям (JS, Vue, React, CSS и другим).
Все документации в одном месте без необходимости гуглить.
🟠 Ссылка
@react_tg
Хотите научиться создавать привлекательные карточки товара без Bootstrap и готовых шаблонов?
📅 9 сентября в 20:00 МСК на открытом уроке мы разберём, как из базовых тегов и CSS-свойств собрать мини-проект, достойный портфолио. Вы увидите, как блок <article> превратить в интерактивную витрину: текст, изображение, кнопка «Купить» и эффекты при наведении.
❗️ Вы поймёте, какие CSS-свойства (margin, padding, background-color, border) отвечают за композицию, а :hover добавит лёгкую анимацию при наведении. В реальном времени создадим карточку, применим шрифты, цвета и узнаем, как обеспечить кросс-браузерность без библиотек и фреймворков.
Урок проходит в преддверие старта курса «JavaScript Developer. Basic» и все участники получат скидку на обучение.
👉 Запишитесь на открытый урок → https://otus.pw/bbqp/?erid=2W5zFJVTHZJ
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
🌊 Эффект жидкого стекла для React Native
Liquid Glass добавляет эффект жидкого стекла iOS 26 в приложения React Native. Позволяет настраивать цвета и использовать два режима эффекта: прозрачный и обычный. Идеально подходит для создания стильных интерфейсов.
🚀 Основные моменты:
- Эффект жидкого стекла для iOS 26
- Настраиваемые цвета и режимы
- Поддержка взаимодействия с элементами
📌 GitHub: https://github.com/callstack/liquid-glass
#javascript
🔥 lightweight-charts — библиотека для отображения финансовых графиков и диаграмм, которая оптимизирована для использования в веб-приложениях!
🌟 Она предоставляет простой и быстрый способ визуализации данных в виде интерактивных графиков, например, свечных графиков, линейных графиков, OHLC и других типов финансовых графиков. Библиотека предназначена для того, чтобы работать с большим объемом данных, обеспечивая быструю отрисовку даже при интенсивных обновлениях данных в реальном времени.
🔐 Лицензия: Apache-2.0
🖥 Github
@react_tg
🖥 node-google-backup — утилита командной строки, разработанная для автоматического резервного копирования данных из сервисов Google: почты (Gmail), календаря (Google Calendar) и контактов (Google Contacts)!
🌟 Она загружает эти данные в локальные файлы, синхронизируя только новые письма, контакты и события. Структура создаваемых директорий выглядит следующим образом:
🔐 Лицензия: GPL-3.0
🖥 Github
@javascriptv
🎮 Освой Vim с VIM Master!
VIM Master — это легкая браузерная игра, которая обучает основным командам и движениям Vim через короткие уровни. Просто откройте index.html и начните практиковаться без установки.
🚀 Основные моменты:
- Интерактивные уровни для изучения команд Vim.
- Поддержка нормального и вставного режимов.
- Лог команд для отслеживания нажатий клавиш.
- Режим вызова задач для проверки навыков под давлением времени.
📌 GitHub: https://github.com/renzorlive/vimmaster
#html
💡 Полезный совет по React + CSS
Когда стили в компоненте начинают разрастаться, используйте CSS Modules или styled-components, чтобы избежать конфликтов классов.
Пример с CSS Modules
import styles from "./Button.module.css";
export default function Button() {
return <button className={styles.primary}>Нажми меня</button>;
}
/* Button.module.css */
.primary {
background: #007bff;
color: white;
border: none;
padding: 10px 15px;
border-radius: 8px;
cursor: pointer;
}
.primary:hover {
background: #0056b3;
}
🎉 Создайте свой AI-чат с Open-Fiesta!
Open-Fiesta — это открытая платформа для экспериментов с многомодельным AI-чатом, построенная на Next.js. Пользователи могут переключаться между различными провайдерами и моделями, сравнивать результаты и использовать веб-поиск с возможностью прикрепления изображений.
🚀 Основные моменты:
- Множество провайдеров: Gemini, OpenRouter и другие
- Выбор до 5 моделей для одновременного использования
- Поддержка веб-поиска и вложений изображений
- Удобный интерфейс с поддержкой клавиатуры
📌 GitHub: https://github.com/NiladriHazra/Open-Fiesta
📄 Vectorless PDF Chatbot — новый подход к работе с документами
Интересный проект, который предлагает альтернативу традиционным чат-ботам с векторными базами данных. Вместо преобразования документов в эмбеддинги, система использует LLM для интеллектуального анализа PDF-файлов прямо в браузере пользователя.
Решение полностью статично и ориентируется на приватность. Документы не покидают браузер, не требуют предварительной обработки и не хранятся на серверах. При этом бот сохраняет контекст и может анализировать до 100 PDF-файлов одновременно.
🤖 GitHub
@react_tg
🧩 10 принципов для React-разработчиков
Недавно наткнулся на полезную статью с базовыми правилами работы в React. Вот главные рекомендации, которые стоит взять на заметку:
1. Чистый код с JSX — используй HTML-подобный синтаксис для лучшей читаемости.
2. Функциональные компоненты + хуки — современный подход вместо классовых компонентов.
3. Ключи в списках — помогают эффективно обновлять только изменённые элементы.
4. Переиспользуемые компоненты — разбивай интерфейс на мелкие части для удобства поддержки.
5. Управление состоянием — useState для простых случаев, useReducer для сложной логики.
6. Оптимизация — предотвращай лишние перерендеры вычислений и функций.
7. Валидация пропсов — проверяй типы пропсов для раннего обнаружения ошибок.
8. Глобальное состояние — удобный способ передавать данные без пропс-дриллинга.
9. Обработка ошибок — заранее перехватывай ошибки в компонентах.
10. Следить за обновлениями экосистемы — важно быть в курсе новых возможностей.
🔗 Ссылка - *клик*
@react_tg
🎯 Browserable — открытый инструмент для автоматизации браузера с помощью AI-агентов.
Что делает:
• Управляет браузером как человек: переходит по сайтам, кликает, заполняет формы, вытаскивает данные.
• Достигает 90.4 % на тесте Web Voyager — один из лучших результатов среди подобных решений.
• Работает локально (self-hosted) или через удалённые браузеры.
• Запуск в 1 команду (`npx browserable`) или в полном окружении через Docker.
• В комплекте: админ-панель, REST API, JavaScript/TypeScript SDK, интеграция с LLM (OpenAI, Claude, Gemini и др.).
Зачем полезно:
— Автопарсинг и мониторинг сайтов
— Автоматизация тестирования веб-приложений
— Интеграция с агентами для сложных сценариев в интернете
GitHub: https://github.com/browserable/browserable
☁️ MistCSS — стилизация без JavaScript. Необычный подход к созданию UI-компонентов: вместо JS-обёрток использует чистый HTML и CSS с автодополнением типов. Генерирует .d.ts-файлы на основе CSS, обеспечивая проверку атрибутов прямо в JSX.
Особенность инструмента в нулевой JS-нагрузка. Стили работают через data-атрибуты, а вложенный CSS позволяет создавать сложные компоненты. Совместим с Tailwind и другими CSS-фреймворками.
🤖 GitHub
@react_tg
💨 Вышло новое крупное обновление на React Router — v.7.8.0
Команда React продолжает улучшать библиотеку, и новое обновление принесло несколько важных изменений. Одно из самых заметных — унификация именования данных загрузчиков. Теперь везде используется loaderData вместо смешанных вариантов, что делает API более предсказуемым.
Особое внимание в этом релизе уделено middleware-функциям, которые пока помечены как unstable. Их API дорабатывается перед стабилизацией, и разработчики просят тестировщиков делиться обратной связью. Также появились небольшие, но полезные правки: например, добавлен пропс nonce для <Link> и улучшена обработка ошибок в ErrorBoundary.
Тем, кто использует экспериментальные фичи вроде RSC или middleware, стоит обратить внимание на breaking changes — некоторые API были переименованы или изменили поведение.
🔗 Полный список правок - *клик*
@react_tg
⚛️ React.js Cheat Sheet — удобная шпаргалка по основным концепциям и API React. В ней собраны ключевые паттерны: от базовых компонентов и работы с состоянием до современных хуков и проверки типов пропсов.
Материал охватывает как классический подход с классами, так и актуальные функциональные компоненты с useState и useEffect. Особенно полезны примеры по работе с DOM, списками и условиями рендеринга. Шпаргалка пригодится как новичкам для быстрого старта, так и опытным разработчикам для сверки синтаксиса.
🔗 Ссылка - *клик*
@react_tg
🎣 Pullstate — минималистичный стейт-менеджер для React, который превращает управление состоянием в прогулку с хуками. В отличие от Redux, здесь не нужны редьюсеры или контексты, достаточно создать Store и напрямую мутировать его через update(), благодаря интеграции с Immer.
Проект весит всего 7 КБ и особенно удобен для сценариев, где глобальное состояние нужно обновлять из разных уголков приложения. Например, переключение темы оформления реализуется буквально в паре строк кода без лишних абстракций.
🤖 GitHub
@react_tg
⌨️ Хотите научиться создавать полноценные API-серверы с использованием Node.js и TypeScript?
Приглашаем на открытый урок «Как создать API-сервер с TypeScript и Node.js».
🗓 4 августа в 20:00 МСК
🆓 Бесплатно. Урок в рамках старта курса «Node.js Developer».
На открытом уроке мы покажем, как быстро настроить сервер с помощью Express, создать маршруты для работы с данными и обрабатывать запросы от клиентов. Вы освоите основы TypeScript и API-разработки, получите знания для работы с типами данных и ошибок.
🎯 Погрузитесь в мир востребованной backend-разработки: создайте API-сервер, научитесь писать чистый и безопасный код и откройте для себя возможности Node.js.
🔗 Ссылка на регистрацию: https://otus.pw/60Ta/