17266
React программирование @haarrp - admin @itchannels_telegram - 🔥лучшие ит-каналы @javascriptv - продвинутый javascript @programming_books_it - бесплатные it книги @ai_machinelearning_big_data - ml № 5037566384
📍 Залипательное движение радужной полосы на время загрузки вашего сайта или приложения
#прелоадер #ожидание #загрузка
https://codepen.io/jkantner/pen/mdKOpbe
@react_tg
👩💻 В этой статье автор объясняет ключевые хуки React 19: useFormState() для управления состоянием форм, useFormStatus() для отслеживания статуса отправки, useActionState() для обработки асинхронных действий, useOptimistic() для оптимистичных обновлений UI и use() для работы с промисами в компонентах!
🔗 Ссылка: *клик*
@react_tg
🌐 Plyr — это легковесный и доступный медиаплеер с открытым исходным кодом, поддерживающий HTML5 Video, HTML5 Audio, а также интеграцию с YouTube и Vimeo!
🌟 Он разработан для работы во всех современных браузерах и предоставляет разработчикам возможность легко встраивать и настраивать воспроизведение мультимедийного контента на веб-страницах.
🔐 Лицензия: MIT
🖥 Github
@javascriptv
📝 Remirror — react-библиотека для создания текстовых редакторов. Этот open-source проект, предлагающий готовые решения для WYSIWYG-редактирования с поддержкой мобильных устройств и доступностью.
Библиотека имеет модульную архитектуру: можно использовать готовые расширения или создавать собственные на низком уровне. Для старта достаточно установить пакет и собрать редактор из 30+ доступных компонентов.
🤖 GitHub
@react_tg
🚀 Почему пользователи платят $30 за простой конвертер картинок? Давайте разберемся.
Кирилл из комьюнити создал простой продукт всего за один месяц, внедрив метод, которой уже принес результат.
Как он это сделал:
1️⃣ Анализ спроса: через поисковые запросы он увидел, что много людей ищут конвертацию «HEIC to JPG».
2️⃣ Фокус на главном: удалил всё лишнее, оставив только функцию конвертации в один клик.
3️⃣ Скорость внедрения: за 30 дней сделал запуск без перфекционизма.
Посты про конвертер (ч.1, ч.2)
Что из этого получилось:
— Доход $500 в месяц с тенденцией роста.
— Более $10K заработано на конвертере.
— $0 на рекламу, всего $40 в месяц на сервер.
Выводы:
— Люди платят за удобство, даже если есть бесплатные аналоги.
— Продукт функционирует автоматически с минимальной поддержкой.
— Быстрая и экономичная проверка идеи может быть успешной.
Результаты из комьюнити билдеров:
— Более 400 запусков по этой методике.
— Некоторые продукты уже набрали от 50К до 100К+ пользователей.
Присоединяйтесь к @its_capitan — следите за процессом разработки, продвижения и узнайте, сколько можно заработать на таких микро-продуктах.
Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2Vtzqv2URv4
🌧️ Graphic Walker — это легковесный React-компонент для встраивания в веб-приложения, который превращает структурирование данных в интуитивный процесс с drag-and-drop интерфейсом.
Проект ориентируется на простоту реализации. В отличие от других решений, здесь можно в несколько строк кода добавить приятную визуализацию в свое приложение. При этом поддерживаются продвинутые функции: от объяснения аномалий в данных до пространственной визуализации геоданных.
🤖 GitHub
@react_tg
CSS совет 💡
Для лучшего UX используйте :focus-visible вместо :focus для изменения стиля обводки ✅
👉 @frontend_1
Используйте свойство columns, чтобы разделить статью на отзывчивые колонки 🚀.
Читать полностью…
🌐 Plate — это мощный редактор форматированного текста (WYSIWYG), созданный на основе React и Slate, с поддержкой интеграции AI!
🌟 Он предоставляет гибкую платформу для создания настраиваемых редакторов с возможностью расширения с помощью плагинов. Plate подходит для различных сценариев, таких как редактирование документов в стиле Notion, обработка Markdown и коллаборативные инструменты.
🔐 Лицензия: MIT
🖥 Github
@react_tg
🌐 Эта статья объясняет, как настроить React-библиотеку для тестирования приложений на Next.js!
🌟 В статье пошагово описывается процесс установки Jest, конфигурации и написания первых тестов. Рассматриваются преимущества тестирования, включая уверенность при рефакторинге кода и упрощение поиска ошибок. В качестве примера приведен тест компонента игры 2048, который проверяет правильность рендеринга игрового поля.
🔗 Ссылка: *клик*
@react_tg
👩💻 В этой статье автор объясняет ключевые хуки React 19: useFormState() для управления состоянием форм, useFormStatus() для отслеживания статуса отправки, useActionState() для обработки асинхронных действий, useOptimistic() для оптимистичных обновлений UI и use() для работы с промисами в компонентах!
🔗 Ссылка: *клик*
@react_tg
👩💻 react-responsive — это React-библиотека, позволяющая использовать CSS media queries непосредственно в компонентах React, обеспечивая адаптивный дизайн!
🔐 Лицензия: MIT
🖥 Github
@react_tg
🌐 Gradienty — это онлайн-инструмент, предназначенный для создания и настройки градиентов, текстовых градиентов, эффектов glassmorphism и других визуальных элементов с поддержкой Tailwind CSS!
🔗 Ссылка: *клик*
@react_tg
🖥 Совет по HTML 💡
Знаете ли вы, что можно разместить кнопку отправки формы вне самой формы?
@react_tg
👩💻 Mantine — это современная библиотека компонентов и хуков для React, созданная для ускорения разработки веб-приложений! Она включает более 100 настраиваемых компонентов и свыше 50 хуков, обеспечивая разработчикам широкий инструментарий для создания функциональных и доступных интерфейсов.
🔗 Ссылка: *клик*
@react_tg
Frontend + Летний митап + Суббота = Я.Субботник по разработке интерфейсов 💛
7 июня в Москве Яндекс Go проводит Я.Субботник по разработке интерфейсов. В программе 4 доклада и воркшоп:
👉 Артемий Карпов расскажет, как команда выстраивает взаимодействие между разработкой и тестированием при написании автотестов и улучшении семантики приложения
👉 Миша Колосовский покажет, как сделать статические схемы интерактивными и причем тут SVG
👉 Давид Давыдов объяснит, что мы сделали с серверным API и как пришли к одной строчке кода вместо сотни
👉 Серёжа Алейников поделится опытом портирования нативного BDUI в вебе
На воркшопе участники в командах будут исправлять некорректные интерфейсы, стараясь учесть требования дизайнеров, бэкенд-разработчиков и тестировщиков. Вместе обсудим варианты решений, а коллеги из Яндекса помогут найти самое оптимальное.
Регистрируйтесь и зовите друзей!
Мероприятие бесплатное. Количество мест в офлайне ограничено — пожалуйста, дождитесь нашего подтверждения.
Формошлёп — сотни хаков для фронтендеров в одном месте
Никакой скучной теории, воды и прочей шляпы, только практические примеры, которые работают.
👉 Подписывайся на @frontbox — стань тем, кто знает, как решить проблему, пока остальные ищут ответ на Stack Overflow.
🗣️ Astuto — open-source платформа для сбора фидбэка пользователей. С помощью инструмента можно публиковать roadmap, модерировать предложения пользователей и интегрироваться с Jira/Slack через webhooks.
Проект имеет гибкие настройки доступа от анонимных предложений до обязательной модерации. В отличие от аналогов, здесь нет ограничений на количество проектов или пользователей, а развёртывание через Docker занимает минуты.
🤖 GitHub
@react_tg
🎨 Origin UI — готовая коллекция компонентов для React и Tailwind CSS. Библиотека предлагает разработчикам набор готовых UI-элементов, которые можно просто скопировать и вставить в свой проект. Компоненты созданы с учётом современных тенденций дизайна и поддерживают темную и светлую темы.
Особенность проекта в глубокой интеграции с Tailwind CSS и React, включая Next.js. Компоненты следуют тем же принципам, что и shadcn, но с расширенными возможностями кастомизации. Поддержка Tailwind v4 обеспечивает доступ к новейшим функциям фреймворка.
🤖 GitHub
@react_tg
🌐 Mastra — это TypeScript-фреймворк для создания AI-приложений!
🌟 Он предоставляет инструменты для работы с LLM, агентами, рабочими процессами, RAG, интеграциями и оценками. Фреймворк поддерживает запуск как локально, так и в облаке. Среди ключевых возможностей: маршрутизация моделей (OpenAI, Anthropic, Gemini), автоматизированные агенты, инструменты для выполнения функций, графовые конечные автоматы состояний, RAG для построения баз знаний и API-клиенты для сторонних сервисов.
🔐 Лицензия: ELv2
🖥 Github
@react_tg
🌐 Stack Auth — это открытая альтернатива Auth0 и Clerk, предназначенная для аутентификации пользователей в веб-приложениях!
🌟 Она поддерживает OAuth, вход через email/пароль, magic links, а также предоставляет удобные готовые компоненты для Next.js. Разработчики могут использовать REST API для интеграции с любым серверным стеком.
🔐 Лицензия: AGPL-3.0
🖥 Github
@react_tg
🌐 LinguiJS — легковесная библиотека для интернационализации. Этот инструмент предлагает элегантное решение, для адаптации проекта под несколько языков без головной боли.
В отличие от громоздких аналогов, Lingui весит всего 3 КБ и поддерживает React-компоненты прямо внутри переводимых строк. В коде используется ICU MessageFormat — тот же стандарт, что и в популярных i18n-библиотеках, но с более простым синтаксисом. А встроенный CLI автоматически извлекает фразы для перевода из кода.
🤖 GitHub
@react_tg
👾 ReasonReact — проект, предлагающий писать React-компоненты на ReasonML — типизированном языке c безупречным выводом типов и синтаксисом, вдохновлённым OCaml.
Это не новый фреймворк, а скорее "обёртка" над обычным React, которая добавляет автоматическую проверку типов и минимальный рантайм. Вы по-прежнему можете использовать существующие JavaScript-библиотеки, но с гарантией, что пропсы и состояния компонентов будут корректны на этапе компиляции.
🤖 GitHub
@react_tg
Изображение преобразуется в информационную карточку при нажатии на значок ➡️
#карточки
https://codepen.io/chandrashekhar/pen/vrddgg
@react_tg
Приглашаем на Frontend Mix — бесплатный митап ЮMoney для всех, кто интересуется фронтенд-разработкой 🔥
🕓 24 апреля, в четверг, в 19:00 (мск) приходите на митап в Санкт-Петербурге или подключайтесь онлайн.
Спикеры из ЮMoney и Сбера расскажут, как работают над задачами и улучшают процессы в команде.
Темы докладов:
🟣 Рефакторинг за 10 секунд. Как с помощью консольной утилиты производить автоматизированный рефакторинг крупных приложений за считанные секунды.
🟣 Подходы и практики тестирования во фронтенде. Зачем нужно тестирование во фронтенде, какие стандарты и подходы существуют и как мы применяем их в своей работе.
🟣 Уязвимости фронтенда в финтехе. Топ-3 атаки, или как построить защиту по всем фронтам — от планирования до релиза.
🟣 Анимация до кончиков пальцев. Поговорим про анимацию в целом и на вебе. Рассмотрим все способы сделать анимацию. Узнаем про композитные слои и как их посмотреть в Dev Tools — на примере одинаковых анимаций, но с использованием разных подходов.
Чтобы попасть на митап, нужна регистрация. Все подробности — на сайте Frontend Mix ❤️
Как стать профи в JavaScript? Вебинар для разработчиков, которые хотят расти
JavaScript — это не только язык программирования. Это целый мир, где важно уметь выбирать правильные инструменты и фреймворки, которые действительно помогут вам двигаться вперед.
На открытом вебинаре 21 апреля в 20:00 мск мы разберемся, как стать профессионалом, а не просто джуном. Обсудим:
— Почему одного знания JavaScript недостаточно для роста.
— Как фреймворки (React, Vue, Angular, Svelte) влияют на вашу карьеру и как выбрать тот, который подходит именно вам.
— Почему Node.js полезен фронтенд-разработчикам и как он ускоряет ваш путь в мире технологий.
— Как научиться быстро осваивать новые фреймворки и не бояться перемен.
Этот вебинар — не о коде, а о том, как осознанно развивать свою карьеру. Присоединяйтесь и получите скидку на большое обучение «JavaScript Developer. Professional»: https://otus.pw/a9L1/?erid=2W5zFGnNqbN
Реклама. ООО "ОТУС ОНЛАЙН-ОБРАЗОВАНИЕ". ИНН 9705100963.
🚀 SaaS Starter Kit — готовый шаблон для корпоративных SaaS-приложений на Next.js. Этот open-source проект включает всё необходимое для enterprise-решений: аутентификацию, платежи через Stripe, аудит-логи и даже синхронизацию с корпоративными каталогами.
Основанный на Next.js и TypeScript, шаблон уже настроен для работы с PostgreSQL через Prisma и покрыт end-to-end тестами на Playwright. Особенно удобна встроенная поддержка Docker Compose для быстрого развёртывания.
🤖 GitHub
@react_tg
🌐 Developer Icons — это бесплатный и открытый набор оптимизированных и настраиваемых иконок для ваших проектов!
🌟 Иконки разработаны с учетом производительности и минимального размера, обеспечивая при этом высокое качество и масштабируемость без потери четкости. Пользователи могут легко изменять размер, цвет, толщину линий и другие параметры иконок в соответствии с требованиями своих проектов.
🔗 Ссылка: *клик*
@react_tg
👩💻 Это — подробное руководство по созданию настраиваемого хука useSearch в React!
💡 Автор объясняет, как разработать высокопроизводительную систему поиска, которую можно интегрировать в любой React-проект, независимо от сложности данных. В статье представлены пошаговые инструкции по созданию хука, который обрабатывает ввод пользователя, фильтрует данные и возвращает результаты поиска в реальном времени. Кроме того, рассматриваются оптимизационные техники для повышения эффективности поиска и улучшения пользовательского опыта.
🔗 Ссылка: *клик*
@react_tg
🌐 Headless UI — это набор полностью доступных UI-компонентов для React и Vue, разработанных для интеграции с Tailwind CSS!
🌟 Эти компоненты предоставляют функциональность без предопределённого стиля, что позволяет разработчикам полностью контролировать их внешний вид.
🔗 Ссылка: *клик*
@react_tg