17266
React программирование @haarrp - admin @itchannels_telegram - 🔥лучшие ит-каналы @javascriptv - продвинутый javascript @programming_books_it - бесплатные it книги @ai_machinelearning_big_data - ml № 5037566384
🧩 Как собрать приложение Playground: React + .NET Aspire
Если вы хотите быстро создать SPA на React (через Vite) вместе с backend’ом на ASP.NET Core, .NET Aspire делает это очень просто.
➡️ Новый пример на GitHub показывает, как интегрировать React-приложение и ASP.NET Core API в единую .NET Aspire‑архитектуру.
Что внутри:
- AspireJavaScript.AppHost — проект‑оркестратор на .NET Aspire
- AspireJavaScript.MinimalApi — API на ASP.NET Core (возвращает тестовые данные)
- AspireJavaScript.React — фронтенд на React (Vite), потребляющий API
- Также есть варианты на Angular и Vue
⚙️ Преимущества:
- Авто‑конфигурация сервисов и портов через Aspire Dashboard
- Простое связывание frontend/backend без ручной настройки
- Visual Studio или CLI (dotnet run) запускают всю систему сразу
Для запуска понадобится:
- .NET 8 SDK (или новее), Node.js (≥ 20.x), Docker Desktop/Podman
- В каждом клиентском (React/Angular/Vue) каталоге выполнить npm install, затем запустить через Aspire
📦 Структура запуска:
# из папки с AppHost
dotnet run
# откроется Aspire Dashboard
# через него можно перейти в React‑frontend, вызвав API
❓ Как создавать смарт-контракты и писать свой токен на Solidity?
👉 На открытом уроке 31 июля в 20:00 МСК мы разберём основы блокчейна и смарт-контрактов, а также познакомим вас с возможностями тестирования проектов. Вы сможете написать свой первый токен на Solidity и получите чёткое представление о том, как блокчейн работает на практике.
Урок будет полезен всем новичкам, которые хотят быстро погрузиться в мир блокчейна, а также программистам с опытом работы с языками, готовым освоить смарт-контракты.
🎁 Посетите вебинар и получите специальное предложение на большой курс «Solidity Developer».
👉 Для участия зарегистрируйтесь https://otus.pw/uWFP/?erid=2W5zFGzNqcU
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
Заголовок: JavaScript Engineer (Browser Fingerprinting & Security R&D)
Формат: Удаленная работа, полный день
Зарплата: 80 000 - 180 000 руб. на руки (возможна оплата в USDT)
О проекте:
Мы ищем JS-разработчика, которому надоело "двигать кнопки" и хочется по-настоящему сложных задач. Наш проект — это система для anti-fraud, которая занимается низкоуровневым фингерпринтингом браузеров. Мы копаем глубоко: анализируем QUIC-хендшейки, вычисляем RTT, изучаем особенности WebRTC и DNS для выявления прокси.
Если вам интересно глубоко погружаться в сетевые протоколы, читать исходники Chromium и искать нетривиальные способы обойти защиту — эта вакансия для вас.
Чем предстоит заниматься:
• Разработка JS SDK: Написание модулей на чистом (vanilla) JavaScript для сбора уникальных отпечатков (WebRTC, Canvas/WebGL, DNS, QUIC).
• Frontend (React/Next.js): Разработка личного кабинета для визуализации данных и управления сервисом.
• R&D (Исследования и разработка): Поиск и реализация новых техник детектирования VPN/Proxy. Это значительная часть работы, требующая самостоятельности и умения вести задачу от гипотезы до готового решения.
• Защита кода: Применение обфускации и других техник для защиты нашего SDK от реверс-инжиниринга.
• Реверс-инжиниринг, деобфускация для поиска новых методик.
Требования:
• Отличное знание нативного JavaScript и понимание асинхронности.
• Опыт работы с React.
• Подтвержденный интерес к кибербезопасности: участие в CTF, pet-проекты (браузерные расширения, сетевые утилиты), статьи, профильное образование в области ИБ, хакинг. (Это самое важное!)
• Хорошее понимание сетевого стека (TCP/IP, UDP, DNS, QUIC).
• Желание и способность самостоятельно разбираться в том, как работают браузеры "под капотом".
Желательно:
• Опыт работы с WebRTC, WebSocket.
• Умение читать C++ (для анализа кода браузерных движков).
• Опыт анализа трафика в Wireshark.
• Опыт работы с Next.js.
Мы предлагаем:
Работу над уникальными задачами, которые вы не найдете в 99% компаний. Сильную команду, свободу в принятии технических решений и возможность стать экспертом в узкой, но очень востребованной нише.
Как откликнуться:
Вместе с резюме, пожалуйста, пришлите сопроводительное письмо, в котором кратко расскажите о вашем бэкграунде в кибербезопасности. Нас интересует все:
• Ссылки на ваши pet-проекты (GitHub и др.).
• Ваш никнейм и достижения на CTF-платформах.
• Ссылки на ваши статьи, доклады или заметки.
• Любой другой релевантный опыт, который показывает ваш интерес к этой сфере.
Отклики без этого пункта рассматриваться не будут. Мы ищем человека, который действительно "горит" этой темой.
Контакт: /channel/Siemons8
⚙️ Что такое Intersection Observer в JavaScript и зачем он используется?Intersection Observer — это API, которое позволяет отслеживать, когда элемент входит или выходит из области видимости (viewport). Оно полезно для оптимизации ленивой загрузки изображений, бесконечной прокрутки или анимаций при прокрутке.
➡️ Пример:
// Целевой элемент для наблюдения
const target = document.querySelector('.observe-me');
// Callback-функция для обработки пересечений
const observerCallback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
console.log('Элемент видим:', entry.target);
observer.unobserve(entry.target); // Останавливаем наблюдение
}
});
};
// Настройки наблюдателя
const observerOptions = {
root: null, // Вся область видимости
threshold: 0.5 // 50% видимости элемента
};
// Создаем наблюдатель
const observer = new IntersectionObserver(observerCallback, observerOptions);
// Начинаем наблюдение за элементом
observer.observe(target);
В этом примере API отслеживает, когда .observe-me становится видимым на 50%. Intersection Observer делает прокрутку более производительной, так как избавляет от необходимости использовать события scroll.
🔥 Nhost — свежий взгляд на backend-разработку с открытым исходным кодом. Этот проект предлагает готовую облачную платформу или возможность самому развернуть альтернативу Firebase, но с GraphQL и PostgreSQL под капотом. Вместо NoSQL — привычный SQL, вместо REST — мощный GraphQL API на базе Hasura, а также встроенные аутентификация, хранилище и serverless-функции.
При этом Nhost не привязывает разработчика к конкретному фронтенд-фреймворку. Один и тот же SDK работает с React, Vue, Next.js и даже Flutter. Локальная разработка упрощена благодаря CLI, а для продакшна можно выбрать как managed-решение от создателей, так и развернуть всё на своих серверах через Docker.
🤖 GitHub
@react_tg
🌼 react-daisyui — библиотека React-компонентов, построенная на daisyUI и Tailwind CSS. Она предлагает готовые UI-элементы с поддержкой темl и минимальным количеством кастомного CSS.
Проект идеально подходит для быстрого прототипирования: кнопки, карточки и формы работают из коробки с адаптивным дизайном. Есть глубокая интеграция с Tailwind: можно кастомизировать компоненты через утилитарные классы, не покидая HTML.
🤖 GitHub
@react_tg
Топ лайфхак для HR: как получить дополнительный заработок.
Настоящая ловушка для айтишников.
Он всего лишь только что выпустился из университета
#ithumor
🍉 WatermelonDB — гибкая база данных для React. Эта СУБД предлагает необычный подход к работе с данными в React-приложениях. Вместо загрузки всей информации при старте, она подгружает только то, что действительно нужно пользователю прямо сейчас.
Инструмент обладает гибридной архитектурой: SQLite на низком уровне обеспечивает надежность, а прослойка на React автоматически обновляет интерфейс при изменениях. Например, новое сообщение в чате мгновенно появится во всех открытых списках без ручного обновления.
🤖 GitHub
@sqlhub
⚡️ Почему лучшие разработчики всегда на шаг впереди?
Потому что они знают, где брать настоящие инсайд!
Оставь “программирование в вакууме” в прошлом, выбирай свой стек — подпишись и погружайся в поток идей, лайфхаков и знаний, которые не найдёшь в открытом доступе.
ИИ: t.me/ai_machinelearning_big_data
Python: t.me/pythonl
Linux: t.me/linuxacademiya
Мл собес t.me/machinelearning_interview
C++ t.me/cpluspluc
Docker: t.me/DevopsDocker
Хакинг: t.me/linuxkalii
МЛ: t.me/machinelearning_ru
Devops: t.me/DevOPSitsec
Data Science: t.me/data_analysis_ml
Javascript: t.me/javascriptv
C#: t.me/csharp_ci
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
Физика: t.me/fizmat
Папка Go разработчика: t.me/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: t.me/addlist/eEPya-HF6mkxMGIy
Папка ML: /channel/addlist/2Ls-snqEeytkMDgy
Папка FRONTEND: /channel/addlist/mzMMG3RPZhY2M2Iy
🎓954ГБ ОПЕНСОРС КУРСОВ: @courses
😆ИТ-Мемы: t.me/memes_prog
🇬🇧Английский: t.me/english_forprogrammers
🧠ИИ: t.me/vistehno
🖥 Chatgpt для кода в тг: @Chatgpturbobot -
📕Ит-книги: /channel/addlist/BkskQciUW_FhNjEy
💼ИТ-вакансии t.me/addlist/_zyy_jQ_QUsyM2Vi
Подпишись, чтобы всегда знать, куда двигаться дальше!
📘 React-подсказка: как работает `useState`
Хук useState добавляет состояние в функциональный компонент, позволяя создавать интерактивные интерфейсы.
🔹 Что делает `useState`?
Добавляет состояние в функциональный компонент. Ты можешь отслеживать и изменять значения прямо внутри компонента.
🔧 1. Импорт
import { useState } from 'react';
const [count, setCount] = useState(0);
count — текущее значение setCount — функция для обновления 0 — начальное значение
const [name, setName] = useState('Alice'); // строка
const [isActive, setIsActive] = useState(false); // булево
const [user, setUser] = useState({ id: 1, name: 'Bob' }); // объект
const [items, setItems] = useState([]); // массив
setCount(count + 1);
setName('Charlie');
setIsActive(!isActive);
setUser({ ...user, name: 'David' });
setItems([...items, 'New']);
setCount(prev => prev + 1);
function MyComponent() {
const [count, setCount] = useState(0);
const [text, setText] = useState('');
return (
<>
<button onClick={() => setCount(count + 1)}>+1</button>
<input value={text} onChange={e => setText(e.target.value)} />
<p>Счётчик: {count}</p>
<p>Текст: {text}</p>
</>
);
}
useState возвращает массив [значение, функция].
🐔 ikun-ui — минималистичная UI-библиотека на Svelte и UnoCSS. Необычный проект, сочетающий простоту Svelte с мощью UnoCSS для создания лёгких и настраиваемых интерфейсов. Вместо тяжёлых компонентов здесь есть атомарные стили и интеграция с Iconify, позволяющая использовать тысячи иконок без лишнего бандла.
В библиотеке стили применяются через атрибуты, как в UnoCSS, а конфигурация темы меняется на лету. Библиотека вдохновлена Onu-ui и Naive-ui, но предлагает более компактное решение.
🤖 GitHub
@react_tg
✨ react-hook — коллекция удобных и строго типизированных хуков для React-компонентов. Этот проект предлагает более 20 готовых решений для распространённых задач: от работы с асинхронными операциями через useAsync() до отслеживания изменений DOM с помощью useResizeObserver().
Библиотека имеет продуманную типизацию и автоматическую очистка ресурсов. Например, useEvent() сам удаляет слушатели при размонтировании, а useMousePosition() корректно работает как на touch-, так и на desktop-устройствах.
🤖 GitHub
@react_tg
Скачайте гайд по тестированию сайтов и приложений для веб-студий бесплатно!
Обращаемся к тем, кто делает сайты и приложения на заказ, руководит командами коммерческой разработки 💻
❓Как думаете, есть ли секрет успеха у топовых веб-студий? Может быть, безудержный креатив? Или огромные бюджеты на продакшн? Да, не без этого, но основная причина того, что их выбирают «жирные» клиенты — это обязательное профессиональное тестирование на всех этапах.
😒Можно продолжать работать, думая, что на клиентах и пользователях тестировать дешевле. Но помните, что вы сознательно оставляете свою компанию плестись в хвосте. Согласны быть середнячком с нестабильным потоком клиентов?
🚀Если нет, то прямо сейчас скачивайте бесплатный гайд по тестированию для веб-студий через бот и переходите на новый уровень.
💻А ещё записывайтесь на консультацию с экспертами «Лаборатории Качества». Ни к чему не обязывающая получасовая встреча абсолютно бесплатна: обсудим боли и подберём решения под конкретные сроки и бюджет. Бронируйте слоты здесь!
#реклама
О рекламодателе
erid: 2W5zFJSsnat
⚛️ Felte — минималистичный менеджер форм для React. Библиотека предлагает React-разработчикам простой способ работы с формами через хук useForm. В отличие от Formik или React Hook Form, Felte не требует оберток в виде компонентов — форма становится реактивной сразу после подключения ref.
Инструмент поддерживает валидацию через Zod/Yup/Superstruct и удобная интеграция с существующей разметкой. Подходит для проектов, где важна легковесность и минимальное количество boilerplate-кода.
🤖 GitHub
@react_tg
🌐 BrowserOS — операционная система внутри браузера на базе AI
BrowserOS — это экспериментальный проект, превращающий браузер в полноценную AI‑среду с "живущими" агентами. По сути, это OS-слой внутри вкладки браузера, где ИИ-агенты могут взаимодействовать с интерфейсами как пользователи.
🧠 Основные идеи:
— Агент может кликать, печатать, читать и взаимодействовать с окнами внутри браузера
— Поддержка многозадачности: можно открыть несколько окон, как в реальной ОС
— Простое API для создания интерфейсов и запуска ИИ-агентов
— Можно подключать LLM и наделять их возможностью выполнять действия
📦 Особенности:
— UI построен на React
— Использует WebAssembly и Web Workers
— Позволяет тестировать и запускать агента в контролируемой "песочнице"
💡 Подходит для:
— Исследований в области AI-агентов
— Прототипирования мультимодальных систем
— Демонстрации взаимодействия LLM с интерфейсами
🔗 GitHub
@react_tg
🧩 Masonic — React-библиотека для создания высокопроизводительных masonry-гридов с виртуализацией. Основана на react-virtualized, но предлагает более гибкий API и автоматическую адаптацию под размеры контейнера.
Библиотека экспортирует не только готовый компонент, но и низкоуровневые хуки (useMasonry, usePositioner), позволяя кастомизировать поведение. Поддерживает TypeScript и оптимизирована для работы с тысячами элементов.
🤖 GitHub
@react_tg
⚡️ Почему лучшие разработчики всегда на шаг впереди?
Потому что они знают, где брать настоящие инсайд!
Оставь “программирование в вакууме” в прошлом, выбирай свой стек — подпишись и погружайся в поток идей, лайфхаков и знаний, которые не найдёшь в открытом доступе.
ИИ: t.me/ai_machinelearning_big_data
Python: t.me/pythonl
Linux: t.me/linuxacademiya
Devops: t.me/DevOPSitsec
Базы данных: t.me/sqlhub
Мл собес t.me/machinelearning_interview
C++ t.me/cpluspluc
Docker: t.me/DevopsDocker
Хакинг: t.me/linuxkalii
МЛ: t.me/machinelearning_ru
Data Science: t.me/data_analysis_ml
Javascript: t.me/javascriptv
C#: t.me/csharp_ci
Java: t.me/java_library
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
Физика: t.me/fizmat
SQL: t.me/databases_tg
Папка Go разработчика: t.me/addlist/MUtJEeJSxeY2YTFi
Папка Python разработчика: t.me/addlist/eEPya-HF6mkxMGIy
Папка ML: /channel/addlist/2Ls-snqEeytkMDgy
Папка FRONTEND: /channel/addlist/mzMMG3RPZhY2M2Iy
🎓954ГБ ОПЕНСОРС КУРСОВ: @courses
😆ИТ-Мемы: t.me/memes_prog
🇬🇧Английский: t.me/english_forprogrammers
🧠ИИ: t.me/vistehno
🖥 Chatgpt для кода в тг: @Chatgpturbobot -
📕Ит-книги: /channel/addlist/BkskQciUW_FhNjEy
💼ИТ-вакансии t.me/addlist/_zyy_jQ_QUsyM2Vi
Подпишись, чтобы всегда знать, куда двигаться дальше!
🌀 Reatom — необычный стейт-менеджер, который совмещает простоту Redux с мощью реактивных систем. Вместо привычных редьюсеров здесь работают атомы — изолированные кусочки состояния с автоматической подпиской на изменения.
При этом под капотом у инструмента всего три базовые сущности: контекст, атомы и действия. При этом система поддерживает сложные асинхронные сценарии, кеширование и отмену запросов. Разработчики обещают идеальную типизацию и вес всего 2 КБ в сжатом виде.
🤖 GitHub
@react_tg
«Да у нас нормальный интерфейс»
- Также их интерфейс:
@React_tg
🎠 Nuka Carousel — доступная и настраиваемая карусель для React. Это лёгкая библиотека для создания каруселей с акцентом на доступность и кастомизацию. Позволяет быстро собрать слайдер, который будет соответствовать дизайну вашего продукта — от анимаций до управления с клавиатуры.
Инструмент имеет минималистичный API с поддержкой TypeScript и удобной системой пропсов для тонкой настройки поведения. Под капотом — современный React без лишних зависимостей.
🤖 GitHub
@react_tg
🔅 Vibe Kanban — оркестрация AI-кодеров в одном окне
Позволяет можно запускать и управлять сразу несколькими AI-агентами для кодинга: Claude Code, Gemini CLI, Codex — всё в одном дашборде.
▶️Что умеет:
- параллельный запуск агентов
- визуальный трекинг задач
- переключение между моделями на лету
— встроенный review и контроль над результатами
— backend на Rust, frontend на React, всё разворачивается локально
Полностью open-source
🟡 Репозиторий: https://github.com/BloopAI/vibe-kanban
🟡Документация: https://www.vibekanban.com/
@ai_machinelearning_big_data
#ai #aiagent #opensource #Claude #Gemini
Я, конечно, многое могу стерпеть…
Но называть HTML языком программирования — это уже за гранью
ChatGPT остановись)
📊 Tremor — готовые React-компоненты для дашбордов. Библиотека предлагает более 35 предварительно стилизованных компонентов на базе Tailwind CSS и Radix UI — от графиков и таблиц до сложных интерактивных элементов. Все компоненты можно копировать и вставлять в проект, быстро получая рабочие элементы интерфейса.
Проект фокусируется на доступности и кастомизации: все элементы адаптированы под требования WCAG, но при этом легко перекрашиваются и адаптируются под дизайн-систему. Компоненты заранее оптимизированы для работы с большими наборами данных без потерь производительности.
🤖 GitHub
@react_tg
🔮 fresnel — элегантное решение для адаптивного рендеринга в React. Этот проект переосмысливает работу с медиазапросами, перенося их логику прямо в React-компоненты. Вместо ручного управления условиями рендера через CSS или JS, проект предлагает декларативный подход: вы определяете breakpoints, а библиотека автоматически рендерит нужную версию интерфейса.
Инструмент имеет поддержку SSR, благодаря чему рендерит все breakpoints на сервере, а клиент уже после гидратации отключает лишнее через matchMedia. Это не только ускоряет загрузку, но и избавляет от проблем с мерцанием стилей при CSR.
🤖 GitHub
@react_tg
📈 Пора повышать грейд! 10 июля в 20:00 пройдет бесплатный вебинар по теме "Как стать уверенным JavaScript-разработчиком: план от джуна до мидла". Запись ограничена: https://tglink.io/e0f647326a9a
Что будет на вебинаре?
🗝 Что отличает джуна от сильного специалиста: структура знаний, подходы, ответственность.
🗝 Какие технологии важны в 2025 году: React, TypeScript, API, архитектура.
🗝 Почему "копипастить с GitHub" недостаточно — нужно понимать, как и зачем работает код.
🗝 Как избежать «плато развития» и начать расти — по-настоящему.
🗝 Как выстроить план обучения и выйти на следующий уровень — без метаний и хаоса.
Чему вы научитесь:
✅ Как сформировать ядро необходимых навыков и убрать лишнее.
✅ Какие инструменты и технологии действительно ускоряют рост.
✅ Как распознать “синдром джуна” и избавиться от него через практику.
✅ Почему важна архитектура, а не просто знание синтаксиса.
💥 Оставляйте заявку на бесплатный урок и получите спец. предложение: https://tglink.io/e0f647326a9a
erid: 2W5zFHuWGvU
🎨 Oh‑My‑Logo — «волшебный» генератор логотипов от shinshin86
Oh‑My‑Logo — утилита с простым интерфейсом для создания уникальных логотипов прямо в терминале. Работает быстро, без лишнего визуального шума.
🛠️ Как это работает:
- Пользователь вводит название бренда (например, “MyStartup”) и краткое описание
- Утилита генерирует цветные ASCII- или Unicode‑логотипы с эффектом паддинга, обводки, рамки или градиента
- Вы можете пробовать разные стили и цвета прямо из командной строки
💡 Зачем это нужно:
- Быстро придумать временное оформление для README, скрипта или учебного проекта
- Стильно оформить вывод утилиты или CI-лог
- Упростить создание ASCII-баннера для скриптов или серверных инструментов
⚙️ Кому понравится:
- Разработчикам и DevOps инженерам, любящим CLI-стайл
- Авторам технической документации и проектных README
- Всем, кто хочет быстро и красиво оформить свои утилиты
✨ Вывод:
Oh‑My‑Logo — лёгкий способ добавить индивидуальности проектам в текстовом интерфейсе. Без GUI, без лишних шагов — просто командный стиль и творческий подход.
https://github.com/shinshin86/oh-my-logo
@react_tg
Загрузка в виде танцующих частиц, похожих на снежинки.
Примеры применения:
🔶 загрузка расчета стоимости доставки;
🔶 загрузка вывода документа на печать.
#прелоадер #ожидание #загрузка
https://codepen.io/rikhnovets/pen/RwXgqjQ
@react_tg