Привет, Хабр! Меня зовут Алексей Гмитрон, я наставник на курсе «Веб-разработчик» Яндекс Практикума, а также работаю фулстек-разработчиком. Я начал программировать шесть лет назад, и обучение не сразу давалось легко. Одна из главных проблем — не умел выяснять, почему мой код не работает. Это долго тормозило развитие, но когда я начал понимать принцип, как думать при поиске ошибок — процесс сдвинулся с мертвой точки. Сейчас я преподаю в Практикуме, и ко мне на индивидуальные консультации часто п…
Станислав БыковFrontend разработчик в компании UsetechСегодня я бы хотел рассказать о библиотеке redux-saga. Она уже достаточно давно используется во frontend-программировании, но не является интуитивно понятной, что может помешать начинающим разработчикам освоить её быстро и начать применять в своих проектах. В данной статье я максимально просто постараюсь объяснить максимально основные принципы этой технологии и некоторые полезные возможности. Намеренно отказываюсь от сравнительного анализа …
Я являюсь создателем проекта, который кормит меня уже больше четырех лет.Проект находится в открытом доступе и распространяется по лицензии MIT. К сожалению, он так и не дорос до широкой публики, по причине того, что у меня не остается времени на его разработку.Иногда приходится наблюдать статьи про разного рода автоматизацию - умный дом, локальная автоматизация, работа с разными устройствами. Каждый раз в голове всплывает мысль, что люди бы могли использовать мой проект для реализации своих и…
Мы разрабатываем веб‑приложение, позволяющее обсуждать задачи в реальном времени и поддерживающее совместное редактирование сообщений. Мы используем React, ProseMirror и AWS AppSync.В этой статье мы расскажем о нашем использовании ProseMirror для создания редактора сообщений. ProseMirror предоставляет инструменты для создания WYSIWYG‑редактора текста в веб‑интерфейсе. Мы рассмотрим, те возможности, которые использовали сами: как создавать в ProseMirror свои простые типы узлов (для приложенных …
Вы используете TypeScript, но впадаете в ступор перед, когда видите типы в сторонних библиотеках? Generics, generic constraint, infer, rest infer, conditional и recursive types, satisfies вызывают головную боль? Мы постараемся снизить градус сложности и напишем типы для роутинга в React. Данный материал будет полезен как фронтендерам, так и бекендерам.Статья предполагает, что вы уже знакомы с TypeScript, знаете основы и используете в повседневной разработке.Все ключевые слова и концепции TS и …
Недавно, в процессе реализации одного из модулей проекта, над которым я работаю - возникла проблема воспроизведения видео на web странице, а также возникли проблемы с его адаптацией под iPhone и iPad.Проблема была в следующем:Создал веб-страницу HTML5, на которой есть небольшое видео, создал свою control-panel для плейера, и все отлично работает в Chrome и FireFox, но совсем не работает ни на iPhone, ни на iPad. Получаю просто пустую страницу.Реализация была следующей:<div> <div d…
TL;DR для тех, кому некогда читать™: Три года реального времени, ~340 дней разработки, 2 423 часа. 106 849 строк кода (62% JavaScript, 32% PHP, 6% CSS). Собственный парсер формата .h3m (h3m2json.php). Неограниченные возможности для создания модификаций. Мультиплеер на WebSockets без блокировок — не нужно ждать, пока другой игрок закончит ход или битву. Любое разрешение экрана и платформа — хоть 4K, хоть телефоны (но пока нет вёрстки). Неограниченное число участников и размер поля в битве (вд…
Появилась однажды задача - сделать область для загрузки файлов, с помощью drag-and-drop.Была выбрана библиотека react-dnd, по причине её простоты, минималистичности и низкого порога входа.Фича реализуется с помощью это либы и двух кастомных компонентов:DndContainer - компонент обёртка, для того, чтобы прокидывать вниз контекст для работы react-dndDropTarget - компонент для непосредственной реализации drag-and-drop функционалаИтак, рецепт!react-dndДокументация: react-dnd.Примеры использования: …
ПредисловиеОригинальная продуктовая задача, помимо непосредственной загрузки файлов и dnd, включала в себя ещё 2 больших куска логики:Динамическая галерея для отображения загружаемых и загруженных файлов с их статусами.Резолв конфликтов дубликатов имён файлов при загрузке. Т.е. надо было при загрузке файлов дать пользователю возможность выбрать один из возможных сценариев загрузки:переименовать загружемые файлы;переименовать уже загруженные файлы;остановить загрузку.Реализация функционала резо…