Обновить
110.11

ReactJS *

JavaScript-библиотека для создания интерфейсов

Сначала показывать
Порог рейтинга
Уровень сложности

Как я создал аналог западной обучающей платформы — Quaize

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели6.7K

Меня зовут Артём. Я — fullstack-разработчик уровня Middle, работаю с проектами на Python, JavaScript, Golang, Rust. В этой статье хочу рассказать о том, как я, подсмотрев западное приложение Kahoot, решил с нуля разработать собственную платформу для интерактивного обучения с огромным количеством ИИ-функций.

Читать далее

Новости

Отображение Excel в React: экспериментальный прототип с merge и изначальной структурой

Уровень сложностиСредний
Время на прочтение14 мин
Охват и читатели6.5K

Снова на связи я –Дмитрий, React-разработчик, и в этот раз мы поговорим о создании фундамента для дальнейшей разработки.

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

Казалось бы, задача простая: берёшь любую библиотеку, читаешь файл и показываешь. На практике всё оказалось гораздо интереснее.

Читать далее

Критическая уязвимость безопасности в React Server Components

Время на прочтение4 мин
Охват и читатели10K

Важное обновление безопасности для React-разработчиков 🛡️

Обнаружена RCE-уязвимость связанная с некорректным декодированием пейлоадов в Server Functions. Это позволяет неаутентифицированным пользователям выполнять код на сервере.

Что нужно сделать:

Проверьте, используете ли вы React Server Components.

Если да (например, в Next.js 15+), выполните обновление пакетов немедленно. Исправления доступны в версиях 19.0.1, 19.1.2 и 19.2.1.

Читать далее

FlashcardsLoop — или как я делал свой Quizlet

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели7K

По традиции статей Хабра начну с описания проблемы.

Я изучаю C#, .NET, ASP.NET и ищу работу Backend-разработчика. Сейчас дело дошло до собеседований и фундаментальных вещей (синтаксис, паттерны проектирования, принципы SOLID), я понял, что информации море и она вываливается из головы.

Вспомнил про метод карточек (Flashcards), который обычно используют для иностранных языков. Пошел на популярные ресурсы: Quizlet, RemNote и прочие. Зарегистрировался, начал создавать колоды, мне понравилось, вошел во вкус и каково было мое разочарование когда я везде натыкался на платные подписки. Где-то ограниченное количество карточек, где-то постоянная реклама, где-то очень замудренный интерфейс сделанный вообще не понятно для кого (привет Anki).
Хочешь больше функций? Плати. — Хочешь учить без рекламы? Плати. — Хочешь добавить картинку? Ну, ты понял...

Я смотрел на эти интерфейсы и во мне кипела злость: «Ну это же обычное CRUD-приложение! Две таблицы в базе, простейший API. Что тут сложного? Я сам могу такое сделать!»

Так родилась идея: написать свой сервис. Бесплатный. Без ограничений. Для себя. Это и проблема решится, и пет-проект для резюме будет.

Читать далее

Грани полиморфизма React: полиморфные декораторы

Время на прочтение6 мин
Охват и читатели6K

Привет, снова Костя из Cloud.ru. Мы поговорили уже про as для типобезопасного полиморфизма, asChild для композиции и FACC для вариативного дизайна. Но что, если я скажу, что есть способ комбинировать логику ещё элегантнее и не смешивать ее с отрисовкой? Сегодня разбираем полиморфные декораторы - HOC'и на стероидах.

Интересно

Как Jotai хранит состояние в React?

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели5.1K

Устали использовать Redux / Zustand / Jotai как чёрный ящик? Хотите наконец понять, что за магия там под капотом?

Мне самому надоело вайбкодить синтаксис Redux-like библиотек. Пора уже понять чё за зверь такой – state manager. Это заняло у меня несколько месяцев, и сейчас пройдём этот путь вместе.

Буквально изобретём концепцию Jotai за семь дней.

Читать далее

Музыкальный блокнот. Приложение разбора игры на гитаре по видео (вайб кодинг 1 день)

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели7.4K

Несколько раз в жизни мне случайно попадалась в руки гитара, и я начинал учить песни Стинга. Shape of my heart, Fragile — любимые с детства. Их я легко нашел на ютубе, подробные разборы, понятные для чайников — где какую страну зажимать и в каком порядке дергать.

А вот с Desert Rose возникли трудности — я не смог найти по ней внятный урок. Только примитивный набор аккордов типа Am, Dm, C. Но я нашел исполнение одной девушки, которое понравилось, и решил разобрать его. Сначала я просто смотрел на видео и повторял. Но дальше нескольких аккордов не получилось выучить — объем информации слишком большой. Я пытался в тетрадке делать записи, но тоже не осилил. Смотрел несколько приложений для составления табулатур и счел их крайне неудобными. Я пытался отказаться от записей и «вербализации», а двигаться на чувствах и интуиции — и тоже не смог

В итоге я сделал скриншоты всех перестановок руки (их получилось 75). И в редакторе изображений отметил перебор. Получилось такое:

Читать далее

Как правильно обновлять зависимости в проекте

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели5K

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

Читать далее

Я сделал сайт с Claude Code вместо админки — и это очень удобно

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели34K

Раньше у меня был сайт на Тильде. Стандартные шаблоны Тильды скучные, поэтому его делал дизайнер на zero-блоках. И каждый раз, когда надо было что-то на этом сайте добавить, приходилось дергать дизайнера в духе «Привет, добавь этот отзыв на сайт, пожалуйста».

Статьи добавлять поудобнее, но тоже не идеально. На том же Вордпрессе можно просто скопировать статью из гуглдока — и все, она вместе улетит вместе со всеми скриншотами. На Тильде надо тыкать каждую картинку руками, это бесит.

И вот я решил, что сайт устарел, его надо полностью переделать, а раз уж этим занимаюсь, можно и с Тильды заодно переехать. Например, на Вордпресс, к которому я как-то больше привык.

Стало интересно, а может ли Claude Code сделать сайт на Вордпрессе. С этим вопросом я к нему и пришел.

Claude сказал, что конечно может, но Вордпресс это скучно, и лучше делать сайт на Next.js + headless CMS. Я на тот момент даже не знал, что это такое. Ну так, слышал что на Next.js сайты делают — и все. Решил, что будет интересно разобраться и попробовать.

Спойлер — у нас (у меня и Claude Code) все получилось, сайт работает, мне нравится, даже трафик из SEO не просел.

Читать далее

Фронтенд обгоняет бек или как мы написали 200_000 строк кода на моках

Время на прочтение14 мин
Охват и читатели9.5K

Я работаю старшим фронтенд-разработчиком в it-отделе одного из крупнейших федеральных застройщиков. Специфика разработки в такой непрофильной компании — сроки спускаемые сверху и вообще не имеющие корреляции с реальными ресурсами и возможностями команды. Именно поэтому мы работаем очень быстро, постоянно пытаясь получить (максимум результата)*3 за (минимум времени)/4.

В этих условиях мы делали большие интеграции с headless CMS Directus и непосредственно с бекендом, используя моковые данные на фронте.
Интеграции были большие и быстрые — и вот тут-то и стало видно, что большинство фронтенд-разработчиков не очень понимают, как подготовить интеграцию, чтобы потом было быстро и не больно заменять моки на реальные ответы. В этой статье пойдет речь о таких подходах на фронтенде,

Читать далее

Как оптимизировать и поднять эффективность AI-Кодинга от 2 до 8 раз используя стек MCP серверов

Уровень сложностиСредний
Время на прочтение46 мин
Охват и читатели14K

От красивых демок к законченным проектам: что я понял за полтора года работы с Claude Code

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

В общем с чем я столкнулся. С тем, что с виду все в ИИ кодинге красиво, но по факту большой проект, например свою LMS ты не соберешь, ИИ сдохнет.

Проблема была не в промптах и не в архитектуре. Просто процесс разработки с ИИ постоянно буксовал: Claude выдавал код с API прошлого года, поиск нужной функции занимал по 15 минут, после третьего рефакторинга я терял нить и бросал проект, начинал терять что было сделано, сколько не суй ему to-do листы.

Потом я нашёл свой стек из MCP-серверов, которые действительно повысили эффективность в разных случаях от 2 до 8 раз, позволили экономить до 80% токенов, не терять контекст и совершать на 8 из 10 ошибок меньше.

Читать далее

Как выбраться из гравитации фреймворков

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели7.3K

Команда JavaScript for Devs подготовила перевод статьи о том, почему веб-команды застревают на орбите фреймворков и забывают о возможностях самой платформы. Автор убеждён: браузеры развиваются быстрее, чем экосистемы вокруг них, а зависимость от React и других инструментов тормозит инновации. Пора снова смотреть на веб как на платформу, а не как на “внутренность” фреймворка.

Читать далее

Грани полиморфизма React: паттерн FACC

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели8.5K

Привет, с вами снова Костя из Cloud.ru. Мы поговорили про паттерн as для типа безопасного полиморфизма и asChild для чистой композиции. Но сегодня поговорим о подходе, который даёт такую гибкость в вариативном дизайне, что дизайнеры будут гордиться вами - FACC (Function as Child Component).

Читать статью

Ближайшие события

3D-таймлайн-слайдер под React

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели4.8K

Продолжение истории с 3D-таймлайном. Я допилил исходный слайдер из прошлой статьи, завёл его под React, добавил форму для настройки параметров в реальном времени и показываю, как встроить всё это в проект одной строкой.

Читать далее

О дивный новый анимированный мир — ViewTransition в React

Уровень сложностиПростой
Время на прочтение8 мин
Охват и читатели11K

Всем привет. Я Артем Курочкин, frontend разработчик компании DD Planet.

Сегодня я расскажу об одном из ключевых нововведений в React, представленных на React Conf 2025. Прошу любить и жаловать ViewTransition - нативная поддержка view transition api в экосистеме реакта.

Что это значит для React-разработчиков и как нам всем это поможет, мы и разберем в этой статье.

Читать далее

Хватит писать CSS с нуля: как Chakra UI экономит время и нервы разработчика

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели20K

В сфере фронтенд‑разработки каждый день приходится решать однотипные задачи: создавать и настраивать внешний вид компонентов, обеспечивать адаптивность и доступность UI без вреда для производительности. Чтобы избавить нас от этой рутины, были созданы библиотеки стилизации.

В данной статье мы рассмотрим одну из таких библиотек — Chakra UI V3 в связке с React, так как она не особо большая и проста в изучении. В разных библиотеках синтаксис может немного отличаться, но в основном они все решают одни и те же проблемы. Давайте разберёмся, как она способна помочь нам в разработке.

Читать далее

За два дня после Хабра: как из пет-проекта выросло почти полноценное приложение

Уровень сложностиСредний
Время на прочтение3 мин
Охват и читатели11K

После публикации предыдущей статьи я решил провести эксперимент: сколько крупных фич можно сделать за пару вечеров с помощью ИИ. В итоге в приложении появились PWA, офлайн-режим, полноценный кабинет клиники и восстановление пароля. Рассказываю, как это собиралось и где ИИ действительно помогает, а где всё равно приходится думать самому.

И вот что получилось

Анализ аудио потока HLS с помощью Web Audio API и hls.js

Время на прочтение7 мин
Охват и читатели11K

В современных веб-приложениях для потокового видео всё чаще требуется не просто воспроизводить контент, но и анализировать аудиодорожку в реальном времени. Например, строить индикаторы уровня громкости (VU/PPM метры), визуализировать спектрограммы или детектировать тишину. В этой статье разберём, как корректно объединить hls.js и Web Audio API для анализа аудио из HLS-потока в браузере, избежав типичных подводных камней.

Читать далее

Структура против хаоса — практическая валидация форм с помощью Zod

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели6.3K

Всем привет, с вами Артем Леванов, Front Lead в компании WebRise.

В прошлой статье мы разобрали, как навести порядок в создании форм — выделили примитивы, ячейки и типовые поля.

Следующая проблема, с которой сталкивается любая форма — валидация.

Формы могут быть красивыми и структурными, но без единого подхода к валидации они быстро превращаются в хаос.

В этой статье поговорим о том, почему встроенные и кастомные проверки плохо масштабируются, особенно в динамических формах, и как Zod решает эту проблему, превращая валидацию в декларативную и типобезопасную систему.

Читать далее

Как я добавил on-chain награды и NFT в Solana Quiz: практические находки, ошибки и рабочие советы

Уровень сложностиСредний
Время на прочтение6 мин
Охват и читатели4.8K

В прошлой статье на Хабре я рассказывал о том, как построил небольшое приложение - Solana Quiz, где пользователи отвечают на ежедневные вопросы и получают награды.

Вот ссылка на ту статью - чтобы не повторять архитектуру и базовые вещи:

👉 https://habr.com/ru/articles/956186/

С тех пор я значительно расширил функционал: я добавил on-chain награды, 7-дневные стрики и самое интересное - NFT за серию полностью правильных ответов.

Казалось бы, задача простая: получил событие - начислил токены - иногда выдал NFT.

Но за этим "иногда" скрывается целая гора нюансов: от Solana PDA до порядка вызовов в метадате и странных ошибок, которые не объяснены ни в одном официальном гайде.

Читать далее
1
23 ...

Вклад авторов