React JS

Section design with hover effect Адаптивные карточки с красивым анимированным фоном при наведении. Реализованы с помощью CSS и JavaScript. https://codepen.io/uiswarup/pen/BaaexdO

Хакатон на космических данных. Санкт-Петербург, Красноярск или онлайн из любой точки страны. Стартуем 18 сентября. За выходные участники доводят одну из задач до рабочего решения. Санкт-Петербург. К 2035 году над Землёй должен работать топливный узел, у которого заправляются корабли, и откуда он будет получать топливо - с Земли, с Луны или из резерва - пока не решил никто. Команде предстоит собрать схему поставок, посчитать резервы и решить, во что вкладываться сразу. Призовой фонд 1,2 млн ₽. Красноярск. Спутник видит горящий лес раньше любого наземного поста, но вместе с пожаром ловит нагретые крыши, факелы на месторождениях и блики на воде. Команде предстоит научить сервис отличать настоящий очаг от шума, обвести гарь и выдать площадь в гектарах. Призовой фонд 600 тыс. ₽. Лучшие забирают приз на площадке и билет в московский финал 25–27 сентября, где разыграют ещё 2,4 млн рублей. Команда 3–5 человек, недостающих можно найти на платформе. Регистрация по ссылке космохакатон.рф

⚡️ Вышел 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

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

⚡️ 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/

✔️ 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

Жиза

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

🖥 Shopping UI - красивый каталог товаров и корзина, сделанные при помощи JS библиотеки - Vue.js https://codepen.io/mo-ro/pen/jObjGJm

LosslessCut Это кроссплатформенный графический интерфейс FFmpeg для быстрой работы с видео, аудио, субтитрами и другими медиафайлами без потерь. Основная функция - обрезка и нарезка видео- и аудиофайлов без потерь, что очень удобно для экономии места за счет черновой обрезки больших видеофайлов, снятых с видеокамеры, GoPro, дрона и т. д. Она позволяет быстро извлечь из видео хорошие фрагменты и избавиться от многих гигабайт данных, не прибегая к медленному повторному кодированию и, как следствие, к потере качества. Вы также можете добавить к видео музыкальную дорожку или дорожку субтитров, не прибегая к кодированию. Все происходит очень быстро, потому что программа выполняет почти прямое копирование данных, подпитываемая потрясающим FFmpeg, который выполняет всю основную работу. https://github.com/mifi/lossless-cut

Игра камень, ножницы, бумага на чистом CSS. https://codepen.io/alvaromontoro/pen/BaaBYyz

🔥 Хочешь быстрее расти в IT? Хватит учиться в одиночку Окружение решает больше, чем кажется. Собрал папки и каналы, где можно быстрее влиться в нужное направление, следить за трендами и не вариться в своём пузыре. AI: t.me/ai_machinelearning_big_data Python: t.me/pythonl Linux: t.me/linuxacademiya Хакинг: t.me/linuxkalii DevOps: t.me/DevOPSitsec Docker: https://t.me/+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: https://t.me/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: https://t.me/addlist/2Ls-snqEeytkMDgy Папка Frontend: https://t.me/addlist/mzMMG3RPZhY2M2Iy Полезное сверху: ИТ-мемы: t.me/memes_prog Английский для программистов: t.me/english_forprogrammers ИИ и технологии: t.me/vistehno 954 ГБ open-source курсов: https://t.me/+rKBQEMccAA01MTcy ИТ-книги бесплатно: https://t.me/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 Подписывайся на нужные направления и собирай себе ленту, которая реально двигает вперёд.

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

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

25 августа встречаемся на Agentic Coding Meetup в Сбер.Среде и в онлайне⚡️ AI-агенты уже умеют писать код. Но самое интересное начинается дальше — когда вместе с инструментами меняются роли инженеров, команды и сам процесс разработки. 🔥 Поговорим о том, как agentic coding выглядит на практике: новые инженерные роли и модели команд, SDD и трансформация процессов, coding-агенты и инструменты, подходы к постановке задач и управлению контекстом, а также опыт внедрения AI в разработку больших технологических компаний. ⏳ Начало в 17:00, встреча очных гостей — в 16:00. Количество очных мест ограничено — успейте зарегистрироваться!

⚡️ Rainbow cloud trail — переливающееся облако, следующее за курсором. Реализована с помощью CSS и JavaScript https://codepen.io/creativeocean/pen/LYMmbvZ

🎯 CSS @scope: способ ограничить область действия стилей До сих пор в CSS не было простого и надёжного способа ограничить действие стилей внутри конкретного контейнера. Мы полагались на такие приёмы, как уникальные классы, переопределение селекторов или CSS-in-JS. Но теперь у нас есть @scope. Что такое @scope? @scope — это новая директива в CSS, которая позволяет задать область применения стилей. Она похожа на @media, но вместо условий она ограничивает, где стили будут применяться в DOM.

@scope (.card) {
  h2 {
    color: red;
  }
}

Этот код применит красный цвет только к h2, находящимся внутри .card. Всё просто. Почему это важно? Ограничение области действия стилей: - делает код изолированным и предсказуемым, - предотвращает конфликты между компонентами, - упрощает поддержку и масштабирование CSS. Более сложный пример

@scope (.card) to (.card-footer) {
  a {
    text-decoration: none;
  }
}

Здесь мы ограничиваем действие от .card до .card-footer. Стили будут применяться только к a, находящимся между этими двумя элементами в иерархии. Итого @scope — это шаг вперёд для масштабируемого CSS. Больше не нужно изобретать велосипеды с уникальными классами и перегрузками. Пишите локализованные стили — просто и прозрачно. https://12daysofweb.dev/2023/css-scope/

Это один из самых изобретательных проектов, которые я видел на этой неделе. Передаёт файлы между двумя устройствами, используя только экран и камеру. Использует Fountain Codes (LT Codes). Вместо разделения файла на последовательные фрагменты, каждый QR-код содержит математическую комбинацию (XOR) блоков файла. Разработчик достиг скорости до 129 КБ/с. Всё работает в браузере с WebAssembly, без установки каких-либо приложений. https://github.com/bashalarmistalt/decimen-optical-transfer

Совет по JavaScript 💡 Используйте параметр rest вместо объекта arguments для приема переменного количества аргументов ✅