React JS

Не пропусти МТС True Tech Champ — масштабный фестиваль 21 ноября для тех, кто живет технологиями 🔥 Тебя ждут: ▫️ Конференция с международными спикерами. Эксперты расскажут о трендах в ИИ и инновациях в индустрии. ▫️ ИТ-качалка. Наращивай экспертизу на воркшопах. ▫️ Шоу-финал ИТ-чемпионата. Более 250 талантов со всей России сразятся в лайв-кодинге и программировании роботов на скоростное прохождение лабиринтов со спецэффектами. Выбирай и болей за фаворитов. ▫️ Айтивности. Тебя ждут бои роботов, кодерские челленджи, пайка плат и не только. Заработай True Coins и обменяй их на стильный мерч. ▫️ HR-Hub. Команда МТС расскажет о возможностях для развития в компании и поможет перезагрузить карьерный трек. ▫️ Афтепати со звездными хэдлайнерами. Зажги под популярные хиты. Когда: 21 ноября, МТС Live Холл в Москве и онлайн. Регистрируйся на сайте. Участие бесплатно, количество мест ограничено.

Трюк по CSS ⭐ Вы можете создать этот сверкающий фон с помощью одного элемента, используя mask-composite, при этом анимируя mask-position.

.canvas {
  background: var(--gradient);
  mask:  var(--dots), var(--noise);
  mask-composite: intersect /* source-in, xor */;
  animation: flicker;
}
@​keyframes flicker {
  to { mask-position: 50% 50% , 0 50%; }
}

Хитрость заключается в том, чтобы наложить маски друг на друга, а затем использовать значение intersect для mask-composite✨. Intersect работает так же, как и в SVG, объединяя маски и беря их пересечение. Маска dots — это базовый radial-gradient, который повторяется по всему элементу. Маска noise — сгенерированное изображение шума Перлина.

mask: radial-gradient(circle at 50% 50%, white 2px, transparent 2.5px) 50% 50% / 40px 40px;

mask: url("noise.png") 50% 50% / 256px 256px;

https://codepen.io/jh3y/pen/ExrWOJe @react_tg

👨‍💻 Пишете на JS, но чувствуете, что инструментов уже не хватает? На практическом курсе от OTUS вы разберёте продвинутый React (Hooks, Redux Toolkit, Zustand, Query), SSR на Next.js, познакомитесь с Vue 3 и Nuxt 3, укрепите типизацию в TypeScript и выйдете на fullstack-уровень с Node/Nest.js. ❗️Программа составлена практикующими разработчиками, а занятия проходят в формате живых лекций и практики на реальных задачах. Вы научитесь проектировать REST API, подключать PostgreSQL, собирать и деплоить проекты с Docker и CI/CD. После обучения вы сможете уверенно работать в командах, разрабатывать сложные web-приложения и прокачаете навыки, которые востребованы в крупных компаниях. 🏃‍♂️‍➡️🏃‍♂️‍➡️🏃‍♂️‍➡️ Остались последние места. Пройдите короткое вступительное тестирование, получите скидку 5% по промокоду JSPRO_10 и закрепите за собой участие: https://otus.pw/4dXc/?erid=2W5zFGz1P5J Подробности уточняйте у менеджеров Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

🪄 Открытая альтернатива Firebase — на стероидах PostgreSQL Платформа, которая даёт всё, чтобы собрать современное веб-, мобильное или AI-приложение — без проприетарных SDK и боли. Что внутри: ⚙️ Хостинг Postgres с realtime-синхронизацией 🧩 Автогенерация REST и GraphQL API 🔐 Аутентификация и авторизация через JWT ⚡ Edge-функции и серверные триггеры 📦 Хранилище файлов с поддержкой S3 🧠 AI-инструменты: векторные индексы, эмбеддинги, семантический поиск 🪶 Всё open source и доступно для self-host. По сути это Firebase-опыт, но построенный на «взрослых» open-source технологиях: PostgreSQL, Elixir, GoTrue, PostgREST, pg_graphql. Платформа, где можно запустить идею, вырастить продукт и не упереться в чьи-то закрытые лимиты. #Postgres #OpenSource #Backend #AI #GraphQL #Realtime #FirebaseAlternative https://github.com/supabase/supabase

🖨️📄 BentoPDF: Мощный инструмент для работы с PDF в браузере BentoPDF — это клиентский PDF-редактор, который позволяет редактировать, объединять и обрабатывать PDF-файлы без загрузки на сервер. Все операции выполняются локально, обеспечивая полную конфиденциальность ваших данных. 🚀 Основные моменты: - Полная конфиденциальность: обработка происходит в браузере. - Без ограничений: работайте с любым количеством файлов. - Высокая производительность: быстрое и эффективное выполнение задач. - Бесплатно и с открытым исходным кодом. 📌 GitHub: https://github.com/alam00000/bentopdf

CSS Swirl Версияна чистом CSS. 400 квадратов, с использованием sibling-index и count, кучи тригонометрических функций и немного типизированной арифметики. (Пока работает только в Chrome 140+). https://codepen.io/amit_sheen/full/PwZoLBG

🎹 Умный Keyer для удобного ввода текста Keyer — это уникальная клавиатура с минимальным движением пальцев, позволяющая набирать текст одной рукой. Она поддерживает множество аккордов и арпеджио, а также предлагает оптимизированные раскладки для удобства. Легко собрать самостоятельно из доступных материалов. 🚀 Основные моменты: - Минимальные движения пальцев для быстрой печати - Возможность использовать вторую руку для других задач - Эргономичный дизайн, подстраивающийся под форму вашей руки - Долговечная работа от аккумулятора, до месяца без подзарядки - Доступная стоимость сборки — менее 50 USD 📌 GitHub: https://github.com/mafik/keyer

🖥 React победил по умолчанию - и это убивает инновации во фронтенде ⚔️ Автор статьи Loren Stewart пишет, что React больше не побеждает за счёт технологий - он побеждает по привычке разработчиков выбирать его. Когда команда начинает новый проект, вопрос звучит не «что лучше под задачу?», а «какую версию React взять?». Так рождается самоподдерживающийся цикл, где «дефолт» заменяет выбор. Между тем фреймворки вроде Svelte, Solid и Qwik давно показывают архитектурные преимущества: - Svelte компилирует реактивность на этапе сборки - Solid даёт точечные обновления без виртуального DOM - Qwik поднимает страницу мгновенно за счёт resumability Но им редко дают шанс — React уже выбран заранее. React стал экосистемой, которая добавляет всё новые абстракции (hooks, useEffectEvent, signals), чтобы закрыть слабости своего же подхода. При этом API становится всё сложнее, кривая обучения растёт, а фронтенд застыл в привычной парадигме. Вывод автора: React победил не потому, что он лучший, а потому что он - самый безопасный выбор. И пока индустрия выбирает комфорт, она теряет инновации. Что думаете по этому поводу? 🟢Полный текст: https://www.lorenstew.art/blog/react-won-by-default

😨 Асинхронность в JavaScript — главный источник боли у разработчиков. Callback hell, ошибки в промисах, непредсказуемое поведение кода… знакомо?  ❗️ На открытом уроке курса мы разложим по полочкам всю эволюцию подходов к асинхронности: от первых колбэков до современного Async/Await. Вы научитесь работать с Event Loop, свободно комбинировать Promises и async-функции, обрабатывать ошибки правильно и писать код, который не ломается в продакшене. А ещё узнаете, как параллелить операции без ловушек и антипаттернов. 👉 Подключайтесь 20 октября в 20:00 МСК. Урок проходит в преддверие старта курса «JavaScript Developer. Professional». Все участники получат скидку на обучение. Регистрация открыта: https://otus.pw/xUAW/?erid=2W5zFHRXe88 Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

🎮 На SQL Doom уже запускали, пришло время Chatgpt Разработчик взял шаблон ChatGPT App на Next.js, добавил инструмент play_doom и задеплоил всё на Vercel. Chatgpt не просто *описывает* игру, а реально запускает рабочий Doom прямо в чат: серверный и клиентский рендеринг работают одновременно. 🟢 starter kit: http://vercel.com/templates/ai/chatgpt-app-with-next-js @ai_machinelearning_big_data #chatgpt #doom

Жиза

🎸 It's MyTabs: Your Self-Hosted Tab Viewer It's MyTabs — это веб-приложение для просмотра и воспроизведения гитарных и басовых табулатур. Поддерживает синхронизацию с аудиофайлами и видео на YouTube, а также предлагает простой интерфейс и мобильную совместимость. 🚀 Основные моменты: - Открытый исходный код (MIT License) - Поддержка различных форматов табулатур - Синхронизация с аудио и видео - Многофункциональный MIDI синтезатор - Настраиваемые режимы курсора 📌 GitHub: https://github.com/louislam/its-mytabs #javascript

💡 Репозиторий, где собрано 100+ проектов с нуля - от веба до ИИ. Всё максимально практично 👇 - 100+ готовых проектов: сайты, игры, нейросети, тулзы - Современные технологии: ReactJS, NodeJS, VueJS, Flutter, Unity, TensorFlow, OpenCV и другие - Пошаговые гайды с разными уровнями сложности — подойдёт даже новичку - У каждого проекта указан технологический стек Без воды - только практика и понятные объяснения. 🚀 https://github.com/Xtremilicious/projectlearn-project-based-learning

МТС приглашает всех, кто пишет на С++, Go, Python, JS, Java, C# и других языках, на True Tech Champ — всероссийский чемпионат по программированию. Соревнование будет проходить в двух треках. Трек 1. Алгоритмический. Индивидуальный зачет [призовой фонд 2 750 000 рублей] Реши задачи, которые помогут прокачаться в работе с алгоритмами и структурами данных. Похожие задания встречаются на собеседованиях в МТС и других крупных компаниях. До 240 лучших участников попадут в финал и сразятся в лайв-кодинге. Трек 2. Программирование роботов. Командный формат [призовой фонд 7 500 000 рублей] Проведи робота по виртуальному лабиринту, затем управляй им дистанционно на офлайн-полигоне, а в финале — пройди испытания на реальной площадке и выбей соперников с платформы. 🎁 Организаторы отправят командам финалистов по одному роботу Waveshare Cobra Flex для кастомизации. После соревнований они останутся у участников в качестве подарка. 📍 Зрелищный шоу-финал с ИИ-технологиями, кодерскими челленджами и выступлениями международных и российских спикеров пройдет 21 ноября в МТС Live Холл. Стоит участвовать, чтобы: — Освежить знания и прокачать новые навыки. — Заявить о себе на всю страну, получить карьерный буст и шанс лично пообщаться с HR-специалистами МТС. ⏰ Регистрация участников до 20 октября на сайте.

👩‍💻 FullCalendar — библиотека для простого создания календаря с настраиваемым управлением событиями, функцией перетаскивания и представлениями в виде временной шкалы на вашем сайте! 🔗 Ссылка: *клик* @react_tg

🛠️ Синхронизация Zustand хранилищ zustand-sync — это легковесное middleware для синхронизации Zustand хранилищ между несколькими клиентами с использованием JSON Patch. Идеально подходит для проектов на React, позволяя передавать изменения состояния через WebSocket. 🚀 Основные моменты: - Легкая интеграция с Zustand - Поддержка WebSocket для передачи данных - Генерация и применение JSON Patch для обновлений - Планы на расширение с дополнительными транспортными провайдерами - Поддержка аутентификации и разрешения конфликтов 📌 GitHub: https://github.com/ryanntannn/zustand-sync #typescript

🛡TypeScript: почему без него не обойтись фронтендеру? Фронтенд-разработка уже не мыслится без TypeScript. Сегодня это стандарт, который фигурирует почти в каждой вакансии и позволяет писать код, где ошибки ловятся до запуска. На открытом уроке OTUS «TypeScript простым языком: зачем он нужен и как с ним подружиться» вы узнаете: –  зачем компании требуют TS и какую пользу он даёт; –  как типизировать примитивы, интерфейсы, функции и компоненты; –  как добавить типы в рабочий код и сразу увидеть результат. ❗️ Будет полезен разработчикам на JavaScript, React и Vue, а также всем, кто готовится к собеседованиям. 📆 Урок пройдет 8 октября в 20:00 МСК в преддверие старта курса «JavaScript Developer. Professional». Все участники получают скидку на обучение. 👉 Регистрируйтесь и приходите — это ваш шаг к сильному портфолио: *ссылка* https://otus.pw/Loi8/?erid=2W5zFFv2MNx Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.

🚀 Интенсивный курс по JavaScript и веб-разработке JSCamp — это bootcamp, который охватывает все от основ до продвинутых технологий JavaScript, включая HTML, CSS, Node.js и Docker. Участники создадут полноценный проект, применяя полученные знания, и получат доступ к видео и материалам на платформе JSCamp.dev. 🚀Основные моменты: - Полный курс по JavaScript и веб-разработке - Практический проект от начала до конца - Доступ к видео и материалам на JSCamp.dev - Опциональный сертификат и поддержка в Discord - Обратная связь по CV и участие в воркшопах 📌 GitHub: https://github.com/midudev/jscamp #javascript

FlyCut Caption — это React-компонент для распознавания речи и редактирования субтитров в видео. 🔍 Главное - Локальное распознавание речи на базе Whisper - Визуальное редактирование и синхронный предпросмотр - Экспорт в SRT / JSON - Кастомизация стилей и поддержка разных языков 👉 Репозиторий: https://github.com/x007xyz/flycut-caption

🚀 Углубленное изучение промисов в JavaScript Этот репозиторий предлагает практические упражнения для освоения промисов и асинхронного программирования. Он предназначен для разработчиков с базовыми знаниями, желающих углубить свои навыки и научиться решать более сложные задачи. 🚀 Основные моменты: - Упражнения разделены на категории: графовые, конкретные и базовые. - Каждое упражнение имеет три уровня сложности: начальный, средний и продвинутый. - Проект включает объяснения и контекст для каждой задачи. - Подходит для разработчиков, стремящихся улучшить свои навыки работы с промисами. 📌 GitHub: https://github.com/henriqueinonhe/promises-training #javascript