react_tg | Unsorted

Telegram-канал react_tg - React JS

17266

React программирование @haarrp - admin @itchannels_telegram - 🔥лучшие ит-каналы @javascriptv - продвинутый javascript @programming_books_it - бесплатные it книги @ai_machinelearning_big_data - ml № 5037566384

Subscribe to a channel

React JS

Circular Progress Bar

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

Примеры использования такой круговой диаграммы могут включать отображение процента выполнения загрузки файла, уровень заряда батареи или прогресс выполнения определенной задачи на веб-сайте.

Это стильное и интуитивно понятное решение для визуализации информации о ходе выполнения задачи.

🌐Ссылка на видео

Читать полностью…

React JS

Всплывающие скроллеры изображений с анимацией, управляемой прокруткой CSS 🤙

.pop {
view-timeline-name: --pop;
}
img {
animation: slide both;
animation-timeline: --pop;
animation-range: entry 100% cover 50%;
}
.skateboarder {
--x: 0;
--y: -45%;
}
@ keyframes slide {
to { translate: var(--x) var(--y); }
}


https://codepen.io/jh3y/pen/abPgrGR

Читать полностью…

React JS

Совет по JavaScript💡

Легко и правильно отображайте цены.

Читать полностью…

React JS

Temperature displays

Индикаторы - это svg-картинки, параметры которых задаются в JS.

https://codepen.io/uchardon/pen/GRRRQpK

Читать полностью…

React JS

JavaScript. Что будет выведено в консоль?

Ответ: 40

Читать полностью…

React JS

Переключение тем

Темы оформления с возможностью переключения, реализованные с помощью PostCSS и JavaScript.

https://codepen.io/argyleink/pen/vYxrrpd

Читать полностью…

React JS

JavaScript. Что будет выведено в консоль?

Ответ: 20

Читать полностью…

React JS

Команды нет — это не причина пропустить КосмоХакатон

18–20 сентября, Санкт-Петербург, Красноярск или онлайн из любой точки страны. На платформе есть подбор команды: регистрируетесь один, указываете, что умеете, и находите недостающих

К двум задачам, о которых писали раньше, добавились ещё две.

Санкт-Петербург - космонавт в открытом космосе. Солнечные вспышки, геомагнитные бури, радиация меняются по часам, решение о выходе принимают по прогнозу. Команде предстоит выделить ключевые угрозы и собрать техническое решение для их анализа. Данные, физика, инженерия.

Красноярск - зелёные финансы. Углеродные кредиты продаются под обещание, что где-то растёт лес, и проверить это обещание можно со спутника. Команде предстоит собрать платформу для токенизации и продажи кредитов, привязанных к реальному состоянию лесного массива. Данные, финансы, продукт.

Фонд площадок — 1,2 млн ₽ и 600 тыс. ₽. Лучшие забирают приз и билет в московский финал 25–27 сентября на 2,4 млн рублей.

Подробности и регистрация

Читать полностью…

React JS

Хакатон на космических данных. Санкт-Петербург, Красноярск или онлайн из любой точки страны.

Стартуем 18 сентября.

За выходные участники доводят одну из задач до рабочего решения.

Санкт-Петербург. К 2035 году над Землёй должен работать топливный узел, у которого заправляются корабли, и откуда он будет получать топливо - с Земли, с Луны или из резерва - пока не решил никто. Команде предстоит собрать схему поставок, посчитать резервы и решить, во что вкладываться сразу. Призовой фонд 1,2 млн ₽.

Красноярск. Спутник видит горящий лес раньше любого наземного поста, но вместе с пожаром ловит нагретые крыши, факелы на месторождениях и блики на воде. Команде предстоит научить сервис отличать настоящий очаг от шума, обвести гарь и выдать площадь в гектарах. Призовой фонд 600 тыс. ₽.

Лучшие забирают приз на площадке и билет в московский финал 25–27 сентября, где разыграют ещё 2,4 млн рублей.

Команда 3–5 человек, недостающих можно найти на платформе.

Регистрация по ссылке космохакатон.рф

Читать полностью…

React JS

JavaScript. Напишите функцию order, которая принимает строку и возвращает её вариант, очищенный от цифр, вшитых в каждое слово, и отсортированный на основе этих цифр.

Ответ

Читать полностью…

React JS

JavaScript. Что будет выведено в консоль?

Ответ

Читать полностью…

React JS

🖥 Planck.js

Planck.js – небольшой физический 2D движок на JavaScript, что отлично подойдет для написания HTML5-игр. Интересный для ознакомления проект.

🖥 Github
✔️ Документация

Читать полностью…

React JS

Игра камень, ножницы, бумага на чистом CSS.

https://codepen.io/alvaromontoro/pen/BaaBYyz

Читать полностью…

React JS

Совет по JavaScript 💡

Одна строка кода, чтобы определить, есть ли в массиве дубликаты 🤩

Читать полностью…

React JS

25 августа встречаемся на Agentic Coding Meetup в Сбер.Среде и в онлайне⚡️

AI-агенты уже умеют писать код. Но самое интересное начинается дальше — когда вместе с инструментами меняются роли инженеров, команды и сам процесс разработки.

🔥 Поговорим о том, как agentic coding выглядит на практике: новые инженерные роли и модели команд, SDD и трансформация процессов, coding-агенты и инструменты, подходы к постановке задач и управлению контекстом, а также опыт внедрения AI в разработку больших технологических компаний.

⏳ Начало в 17:00, встреча очных гостей — в 16:00.

Количество очных мест ограничено — успейте зарегистрироваться!

Читать полностью…

React JS

🔥 Claude Code теперь можно менять изнутри

Anthropic представила Mods: небольшие функции на TypeScript, которые вмешиваются в работу Claude Code. Мод может изменить промпт до отправки модели, заблокировать или повторить вызов инструмента, скрыть секрет из ответа и добавить элементы интерфейса. Работает в CLI и настольном приложении.

Моды распространяются через плагины. По сути, разработчик может настроить поведение самого агента под свой процесс, а не только давать ему инструкции. Устанавливать стоит из доверенных источников: мод выполняется с тем же доступом к компьютеру, что и Claude Code.


https://claude.com/blog/claude-code-mods

Читать полностью…

React JS

👨‍💻 Фронтенд с AI: что можно делегировать агентам

5 октября, стартует конференция Podlodka Frontend Crew — сезон о том, как применять AI во фронтенд-разработке на практике.

Участники конференции узнают:


• Как находить prompt injection и противостоять таким атакам;
• Какие подходы помогают повысить доверие к результатам агентской разработки;
• Как проводить ревью кода, созданного AI-агентами;
• Как AI помогает упростить починку багов.

В программе ещё много практических кейсов. Также нужно отметить, что у конференции очень удобный формат. Это пять дней Zoom-сессий по утрам и вечерам и закрытое Telegram-комьюнити, где можно обсудить новый опыт и узнать от единомышленников то, что не догадаешься спросить у своей LLM.

Приходите, чтобы разобраться, какие задачи уже можно делегировать AI, где важно сохранять контроль и как выстроить системную работу с AI в команде или проекте.

🔗 Программа и билеты: https://podlodka.io/fecrew

Читать полностью…

React JS

🌦️ Красивый пример того, как может выглядеть современное приложение на Aspire

Команда показала полноценную интерактивную карту погоды на Node.js с живыми прогнозами и анимированным радаром.

Под капотом:

⚡ Express + OpenTelemetry API
⚛️ React 19 + Vite
🗺️ Leaflet для карты
🛰️ анимированный погодный радар и актуальные прогнозы
🧩 всё приложение оркестрируется через TypeScript AppHost

Хороший пример Aspire не в виде очередного Hello World, а как основа для полноценного приложения из нескольких сервисов.

https://aspire.dev/reference/samples/

@csharp_ci

Читать полностью…

React JS

Участвуй во всероссийском ИТ-чемпионате МТС True Tech Champ 2026 c призовой фондом 10 250 000 рублей.

Если тебе нравятся алгоритмы, структуры данных и задачи на чистую логику — участвуй в алгоритмическом треке с индивидуальным зачетом.

Решай задачи разного уровня сложности: от базовых до тех, что проверяют скорость мышления и умение оптимизировать решения за ограниченное время.

В финале лучшие 120 участников алгоритмического трека сразятся в лайв-кодинге за шесть призовых мест и 2 750 000 рублей. Всех финалистов ждут:
— Лимитированный мерч;
— Сертификаты об участии;
— Масштабное мероприятие с выступлениями хэдлайнеров и фестивальными активностями.

Успей зарегистрироваться и пройти отборочный этап до 27 сентября

Читать полностью…

React JS

⚡️5 фундаментальных курсов по ИБ по цене одного

Это предложение для тех, кто готов войти в новую профессию прямо сейчас!

🔥Пакет курсов за 50 000 ₽ вместо 250 000 ₽:
▪️ Linux CyberPunk - обычная цена 49 500 ₽ (+ Курс идет с официальным дипломом системного администратора!)
▪️ SQL для хакера - обычная цена 15 000 ₽
▪️ HackerPoint - обычная цена ~70 000 ₽
▪️ HackerPoint (Blue vs Red Team) - обычная цена 43 500 ₽
▪️ AI-помощники на Python - обычная цена 71 500 ₽

Вы экономите 200 000 ₽ и получаете полную базу: от работы с терминалом и базами данных до разработки ИИ-агентов и взлома систем.

🔒 Квота: набор на программу ограничен по количеству мест.

🦔Отправь промокод ReactJS в чат с менеджером, чтобы закрепить за собой скидку и узнать подробности:
👉@cyacademy_support

Читать полностью…

React JS

Сегодня последний день регистрации на КосмоХакатон

18–20 сентября, Петербург, Красноярск или онлайн из любой точки страны. Четыре задачи на выбор: снабжение орбитального топливного узла и безопасность космонавта в открытом космосе в Петербурге (фонд 1,2 млн ₽), мониторинг лесных пожаров и верификация углеродных кредитов по спутниковым снимкам в Красноярске (600 тыс. ₽). Есть и для тех, кто про данные и ML, и для тех, кто про стратегию и экономику.

Лучшие забирают приз на площадке и билет в московский финал 25–27 сентября, где разыграют ещё 2,4 млн рублей.

Команду можно собрать на платформе.

Подробности и регистрация

Читать полностью…

React JS

Совет по CSS 💡

Знаете ли вы, что можно упростить длинные списки селекторов в CSS с помощью :where()? 🤩

Читать полностью…

React JS

Section design with hover effect

Адаптивные карточки с красивым анимированным фоном при наведении. Реализованы с помощью CSS и JavaScript.

https://codepen.io/uiswarup/pen/BaaexdO

Читать полностью…

React JS

⚡️ Вышел React 19.3 - View Transitions и Fragment Refs стали стабильными

Что добавили:

• Анимации через `<ViewTransition>`
Появление, исчезновение, перемещение и изменение размеров элементов через браузерный View Transition API. По умолчанию - плавное затухание, свои эффекты задаются через CSS или Web Animations API.

Анимации запускаются для Transition-обновлений, включая startTransition, раскрытие Suspense и useDeferredValue. Обычные срочные обновления отображаются сразу.

• `ref` у `<Fragment>`
Можно управлять фокусом, обработчиками событий, измерениями и наблюдением за группой DOM-элементов без дополнительного `<div>`, который мог бы повлиять на вёрстку.

• `use(browser())` для компонентов, которым нужен браузер
Позволяет пропустить серверный рендеринг компонента, зависящего, например, от localStorage. На сервере показывается ближайший Suspense fallback, в браузере компонент продолжает рендеринг.

• Поддержка Trusted Types
React больше не превращает соответствующие объекты в строки перед передачей в DOM API. Политики Trusted Types теперь могут работать корректно.

• Меньше обёрток для Context
Server Components могут напрямую рендерить контекст, импортированный из модуля с 'use client'.

Также медленный Transition больше не задерживает другие, не связанные с ним переходы.

https://react.dev/blog/2026/09/09/react-19-3

@react_tg

Читать полностью…

React JS

⚡️ React Compiler переписали на Rust - сборка ускорилась в 17 раз

Команда Master.dev перевела React Router-проект на новый нативный React Compiler из экосистемы oxc и получила очень заметный прирост скорости.

На кодовой базе из 1 036 файлов:

- Babel-версия компилятора - 14,3 с
- Rust-версия - 0,81 с
- ускорение компилятора - примерно 17,6×
- вся сборка ускорилась с 22,1 до 9,3 с, то есть примерно в 2,4 раза

Важно: 17× относится именно к работе React Compiler, а не ко всему build pipeline.

Новый вариант построен вокруг oxc-transform-react. В @vitejs/plugin-react 6.1 появилась экспериментальная поддержка нативного компилятора:


import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
plugins: [react({ compiler: true })],
});


После перехода можно убрать Babel-слой и @rolldown/plugin-babel, что делает конфигурацию не только быстрее, но и проще.

Есть и функциональные улучшения: Rust-версия уже поддерживает некоторые конструкции, на которых старый Babel-компилятор делал bailout, включая часть логики в try/catch, computed property keys и отдельные случаи с destructured props.

Для больших React-проектов это особенно интересно из-за CI: меньше времени на компиляцию - меньше GitHub Actions minutes и быстрее feedback loop.

https://blog.master.dev/react-now-rusted-all-the-way-out/

@react_tg

Читать полностью…

React JS

✔️ Alibaba отсудила домен alibabа.ai

Китайский техгигант официально вернул контроль над международным доменным именем alibaba.ai.

Спор рассматривался в Чешском арбитражном суде, который принял решение принудительно передать права корпорации.

В июле 2026 года доменный инвестор из арабского региона выкупил имя на вторичном рынке за $3 333. Практически сразу он выставил его на перепродажу, но уже с десятикратной наценкой - за $33 333.

Юристы Alibaba, которые к тому моменту начали процесс защиты бренда в рамках международной процедуры UDRP, заблокировали сделку и довели дело до суда.

Защита ответчика выглядела весьма оригинально. Киберсквоттер пытался доказать арбитражу, что термин "Али-Баба" не имеет отношения к китайскому маркетплейсу, а выбрано исключительно из-за его глубокого культурного и литературного значения в арабском мире, намекая на сказку про сорок разбойников.

Но международного арбитра такой аргумент не впечатлил. Суд указал на очевидные маркеры недобросовестности:

🟠Перекупщик не планировал создавать литературный или культурный сайт;

🟠На домене висела пустая заглушка исключительно ради спекулятивной перепродажи;

🟠Доменная зона .ai уже прочно ассоциируется во всем мире с Artificial Intelligence.

Alibaba сейчас активно инвестирует в собственную разработку ИИ, поэтому покупка такого имени сторонним лицом - это прямое паразитирование на бренде.

В итоге суд признал действия сквоттера оппортунистическими, и теперь домен послужит официальным ИИ-проектам Alibaba Group.


@ai_machinelearning_big_data

#news #ai #ml

Читать полностью…

React JS

🖥 Shopping UI - красивый каталог товаров и корзина, сделанные при помощи JS библиотеки - Vue.js

https://codepen.io/mo-ro/pen/jObjGJm

Читать полностью…

React JS

🔥 Хочешь быстрее расти в IT? Хватит учиться в одиночку

Окружение решает больше, чем кажется.

Собрал папки и каналы, где можно быстрее влиться в нужное направление, следить за трендами и не вариться в своём пузыре.

AI: t.me/ai_machinelearning_big_data
Python: t.me/pythonl
Linux: t.me/linuxacademiya
Хакинг: t.me/linuxkalii
DevOps: t.me/DevOPSitsec
Docker: /channel/+90Z5TAyfuNU5YmRi
Golang: t.me/Golang_google
Rust: t.me/rust_code
C++: t.me/cpluspluc
C#: t.me/csharp_1001_notes
Java: t.me/javatg
JavaScript: t.me/javascriptv
React: t.me/react_tg
Frontend: t.me/front
PHP: t.me/phpshka
Android: t.me/android_its
Мобильная разработка: t.me/mobdevelop
Базы данных: t.me/sqlhub
Data Science: t.me/data_analysis_ml
Big Data: t.me/bigdatai
Математика: t.me/data_math
Физика: t.me/fizmat
Kubernetes: t.me/kubernetc
GameDev: /channel/gamedev
Haskell: t.me/haskell_tg

Собеседования и карьера:

DS собеседования: t.me/machinelearning_interview
Python собеседования: t.me/python_job_interview

Папка с вакансиями: 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 ГБ open-source курсов: /channel/+rKBQEMccAA01MTcy
ИТ-книги бесплатно: /channel/addlist/BkskQciUW_FhNjEy

Max Ai: https://max.ru/ai_machinelearning_big_data
Max python: https://max.ru/pythonl
ТЕХНО: https://max.ru/vistehno
Max Go: https://max.ru/Golang_google
Max Linux: https://max.ru/linuxkalii
Devops: https://max.ru/DevOPSitsec
C#: https://max.ru/csharp_ci
C++: https://max.ru/cpluspluc
SQL: https://max.ru/sqlhub
Java: https://max.ru/javatg

Подписывайся на нужные направления и собирай себе ленту, которая реально двигает вперёд.

Читать полностью…

React JS

JavaScript. Что будет выведено в консоль?

Ответ

Читать полностью…

React JS

⚡️ Rainbow cloud trail — переливающееся облако, следующее за курсором. Реализована с помощью CSS и JavaScript

https://codepen.io/creativeocean/pen/LYMmbvZ

Читать полностью…
Subscribe to a channel