Появилась однажды задача - сделать область для загрузки файлов, с помощью drag-and-drop.Была выбрана библиотека react-dnd, по причине её простоты, минималистичности и низкого порога входа.Фича реализуется с помощью это либы и двух кастомных компонентов:DndContainer - компонент обёртка, для того, чтобы прокидывать вниз контекст для работы react-dndDropTarget - компонент для непосредственной реализации drag-and-drop функционалаИтак, рецепт!react-dndДокументация: react-dnd.Примеры использования: …
ПредисловиеОригинальная продуктовая задача, помимо непосредственной загрузки файлов и dnd, включала в себя ещё 2 больших куска логики:Динамическая галерея для отображения загружаемых и загруженных файлов с их статусами.Резолв конфликтов дубликатов имён файлов при загрузке. Т.е. надо было при загрузке файлов дать пользователю возможность выбрать один из возможных сценариев загрузки:переименовать загружемые файлы;переименовать уже загруженные файлы;остановить загрузку.Реализация функционала резо…
ПриветЯ давно пишу код, а React использую более пяти лет.За это время у меня возникло несколько идей о том, как можно было бы улучшить React.К реализации этих идей я приступил около трех лет назад. Сначала проверил концепцию, потом решил оформить всё в виде библиотеки.А о том, что из этого вышло, я бы хотел рассказать в этой статье.Чем хорош ReactВо-первых, это подход React в объединении Javascript и HTML в одном коде. У остальных это получилось не так хорошо.Например, для некоторых фреймворко…
В рамках своей работы, я не раз сталкивался с проблемой, что нужно отслеживать изменение в LocalStorage в совершенно независимых компонентах. Были попытки отслеживания изменений через "window.addEventListener", но и тут меня ждала неудача, так как в этом случае отслеживание будет происходить только в другой вкладке браузера и тем самым я дошел до создания своего хука, назвал его - useLocalStorageEffect. Далее уже будем говорить о нем.Какие проблемы решает хук useLocalStorage…
Статья о том, как я в 15 лет облегчил работу с электронным дневником, представленным правительством Кировской области в 2022 году.Что получилось сделать и как это было реализовано.ПредысторияДолгое время во всех школах моей области использовался устаревший АИАС АВЕРС. В 2022 году сообщили, что все школы переходят на новый электронный дневник. Я надеялся, что представят нечто вроде дневник.ру с приложением, уведомлениями, мобильной адаптацией и удобными фичами, а на деле мы получили устаревший …
Фото предоставлено Маркусом СпискомВступлениеJavaScript является мощным языком программирования широко применяемым для веб‑разработки, написания серверных скриптов и много чего еще. Несмотря на простоту обучения для новичков, JavaScript также используется для создания сложных приложений и систем, требующих множества передовых концепций программирования.В этой статье я буду объяснять некоторые из продвинутых концепций JavaScript, которые должны быть известны каждому опытному разработчику. Я нач…
Эта статья — перевод оригинальной статьи «New in Chrome 113»Также я веду телеграм канал «Frontend по‑флотски», где рассказываю про интересные вещи из мира разработки интерфейсов.ВступлениеЧто вы узнаете:WebGPU уже здесь, он позволяет использовать высокопроизводительную 3D-графику и параллельные вычисления в вебе.С помощью инструментов разработчика теперь можно переопределять заголовки ответов сети.Начинает распространяться First Party Sets, часть Privacy Sandbox, которая позволяет организациям…
Недавно столкнулся с интересной задачей: нужно создать модальные окна, которые бы рендерились с помощью вызовов функций. После ресерча различных библиотек и статей собрал все ведомые мне способы в одной статье. Под катом подробнее.Мы специально не будем рассматривать стандартное размещение попапов с помощью teleport и v-show с реактивным состоянием внутри родительского компонента. Данная статья рассматривает случаи, когда попапы не должны засорять другие компоненты данными для своих пропсов. Т…
В современных реалиях разработки программного обеспечения бывает достаточно трудно быстро и качественно написать техническую документацию к проекту, особенно когда данному процессу уделяется недостаточно времени по разным причинам: от временных ограничений, до индивидуальной непереносимости монотонного процесса участниками проектной группы, который, порой, может тормозить рабочие процессы.Уже сейчас существуют инструменты, которые позволяют ускорить процесс документирования программного обеспе…