Чем занимаются ленивые стартаперы вечерами или кратко об обновлении проекта GML

Никогда не писал в блог и вот опять. Уже целый год обещаю выпустить большое обновление, но постоянно возникают две проблемы: то одно, то другое... Я попытаюсь вкратце рассказать что нового ждет пользователей сервиса GML, с какими проблемами мы столкнулись и как их решили.

Ради чего все задумывалось

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

Для хранения превью и аватарок пользователей был выбран сервис Amazon S3. У него хорошая репутация недорогого и отказоустойчивого сервиса, который идеально подходил для моей задачи.

Но в самый последний момент все-таки решили пока оставить картинки на локальном диске, пока место позволяет, но реализация с амазоном готова и в любой момент может быть задействована.

Аппетит приходит во время еды

Особо внимательные пользователи заметили что сервис сделан по методологии REST, а те кто не заметил - прочитал это в блоге ). Но чтоб rest был совсем трушный, мы решили сделать все по фен-шую, и разнесли бекэнд и фронтэнд на разные серверы (на самом деле только на разные домены =) но суть в том, что теперь клиент полностью независимый от сервера, он просто посылает на api сервера запрос, и получает ответ. И что же нам это дает!? - многое дает), а самое главное что у нас один api сервер может использоваться для разных приложений, хоть для мобильных клиентов, хоть для сторонних веб-сервисов, и это очень удобно.

Красив душой и телом

Пусть хоть гном крутит динамо-машину под капотом сервиса, конечный пользователь этих изменений не заметит. Значит пришло время обновить интерфейс!

Теги

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

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

Так же поиск по списку (который на самом деле фильтр) оказался бесполезной штукой. Не потому что он не работал должным образом, а потому что кейс его использования слишком долгий (если так можно выразиться). Было быстрее найти глазами искомый тег, чем набирать его по буквам в поле фильтра.

(Наконец-то я заполнил текстом этот абзац, который сопровождается вытянутой картинкой)

Решение далось не сразу, а путем экспериментов. И вот обновленный список тегов, встречайте!

Перед нами стояла главная проблема - быстрый поиск нужного тега. Наши лучшие умы команды искали решение долгие годы, проводились социологические опросы и эксперименты. И вот оно решение - отсортировать список по алфавиту! ) Теперь ваши теги выглядят аккуратно и гармонично вписываются в общий стиль.

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

Слишком сложно для новичка

Именно так выглядел элемент поиска и добавления нового линка, поиска и добавления линка! Карл!

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

Проведя N-ое кол-во часов в своей секретной лаборатории я вывел новый интерфейс добавления линка и поиска!

когда мы нажали на кнопку (анимация, магия, единороги, и кнопка превращается...)

Да, теперь у нас два отдельных поля: для поиска и для добавления линка! Кстати, на радость любителям перформенса (не путать с преферансом) поиск ищет по мере ввода текста, нет никакой кнопки "найти", которую нужно нажимать при каждом изменении. Так же про power юзеров я не забыл, попробуйте применить старый кейс добавления линка к новому интерфейсу - вы не будете разочарованы ).

Два подхода, два веселых друга

Есть два подхода в интерфейсо-строении. Первый путь выбрала компания microsoft для своей windows, а второй путь выбрала Apple для macOS. Эти подходы заключаются в сохранении результата. В случае с windows любое изменение требует явного сохранения результата или с подтверждением действия. В случае OSx результат сохраняется сразу без подтверждения. Хорошая аналогия - это сохранение настроек в osx и в windows 7.

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

А как же теперь сохранить, спросите вы? Очень просто, достаточно кликнуть вне пределов редактируемого линка (то есть на сером полупрозрачном фоне) и у вас закроется форма редактирования, а все изменения будут сохранены.

Что однообразно - то не безобразно

Линки и дайджесты довольно похожие сущности, хоть и одно является контейнером для другого. Но эти обе сущности мы можем редактировать, удалять, создавать и выводить в виде карточек. И тут я подумал, если они на столько похожи, почему бы не сделать один UX (пользовательский опыт / ожидаемая реакция сущности на действие пользователя) на обе сущности.

Теперь работа с дайджестами будет аналогичной работе с линками! Включая создание, редактирование и удаление.

Бывалые пользователи сразу заметят, что список дайджестов доступен только в разделе "Дайджесты", где выводятся вообще все дайджесты и найти именно свои будет мягко говоря затруднительно. И об этом - следующий раздел.

Разделяй и властвуй

Да, да, вы совершенно правы, теперь вы можете просмотреть не только все линки пользователя, но и все его дайджесты!

В новой версии мы можем переключаться со списка линков на список дайджестов и это несомненно удобно.

Не всякая фича - фича

Известные баги

1. Далеко не каждое сообщение об ошибке выводиться визуально
2. Проблемы с поочередным редактированием линков при смене дайджестов
3. Изредка багует кнопка добавления линка
4. Неверные счетчики кол-ва линков у пользователей и у дайджестов
5. Строка поиска не подхватывает искомое значение из адресной строки при перезагрузке страницы
6. Если кол-во линков кратно тридцати - то ожидайте бесконечный прогресс загрузки

Запланированые фиксы текущего релиза

1. Исправление багов
2. Добавление формы обратной связи
3. Оформление письма для восстановления пароля

Дальнейшие планы по развитию сервиса

1. Расширение для браузеров
2. Сортировка дайджестов и пользователей по кол-ву подписчиков/кол-ву линков/дате добавления
3. Форма редактирования пользователя

Итоги

Вот мы с вами и выяснили, чем занимаются стартаперы )

Тут возникают два главных вопроса:

1. Почему так долго?

- Над проектом работают два человека, собственно я и Кирилл, который помогает мне по серверной части, за что ему большая благодарность. Работа над проектом ведется в свободное от основной работы время, то есть обычно с 22 часов. Не всегда хочется работать вечером после работы, особенно если ты на работе занимаешься тем же (фронтенд/бекенд разработка). Проект полностью реализован на собственные средства (Amazon S3, хостинг, домен) без привлечения инвесторов и прочих меценатов. Соответственно мотивацией являются ваши немногочисленные отзывы и активность на сервисе (новые пользователи, новые линки), что несомненно радует.

2. Когда же уже обновится сервис GML?

- Собственно уже ) welcome!

Небольшая галерея

p.s. Хоть я планировал статью сделать краткой выдержкой, она оказалась довольно обширной и подробной. Сделаем так, если кого-то заинтересовал какой-то конкретный момент, спрашивайте в комментариях. А если вопрос будет интересный, то возможно разберу его в следующей статье.