Frontosaur помогает ставить задачи разработчикам через браузер
Постановка задачи веб-разработчикам на удалёнке сродни игре в крокодила: объясни, что хочешь, не сказав ни слова. В итоге менеджеру приходится придумывать множество способов объяснить задачу: скриншоты, записи экранов. А важно не только поставить задачу, но и проверить её.
Кейс о том, как нам это надоело и при помощи плагина мы перестали терять время менеджеров и разработчиков на мискоммуникацию.
Около года назад я работала менеджером интернет-проектов в отраслевом онлайн-СМИ, в котором веб-разработчики были на удалёнке (думаю, многим читающим знакома эта ситуация).
Поскольку команда была маленькая, тестировщика у нас не было, и проверка выполненной программистом работы была на мне. Как человека, которому хочется ткнуть в экран и максимум сопроводить это парой слов, меня подбешивало, что нужно для каждой правки сделать скриншот, описать проблему, поставить задачу в Trello или скинуть в чат.
Звучит просто, но это приносило массу затруднений как мне, так и разработчикам: в чате было трудно найти давний скриншот, диалоги из комментариев в Trello всё равно перекочёвывали в мессенджеры, а на одном мониторе переключаться между окнами мессенджера, Trello или чата и самим интерфейсом было неудобно. Но хуже всего было увидеть сообщения вроде:
А это где?
Не вижу у себя такого.
- Не понимаю, о чём ты.
Неудобство при переключении между окнами на экране частично ушло, когда на работе мне поставили второй монитор. Теперь, когда предстояло проверить выполнение правок, на одном мониторе я открывала все правки, на втором — сам интерфейс. Но внимание всё равно приходилось переключать, что со временем стало раздражать.
Точкой кипения стал момент, когда нам пришлось нанять аутсорс-агентство фронтендеров для вёрстки 20 страниц под редизайн сайта. Теперь правки нужно было высылать по почте большим документом со скриншотами и урлами в определённый срок. А после их исправления, естественно, уже забыв всё написанное, вновь поднимать документ и самой разбираться в своих же скриншотах и описаниях.
Тогда мне стало интересно, какие способы постановки задач используют другие менеджеры. Все, с кем я пообщалась, на вопрос «а как вы ставите задачи удалённым фронтам» отвечали, что их арсенал такой же: скриншоты, чаты, почта и таск-трекеры. На вопрос об удобстве многие опрошенные менеджеры задумывались, говорили, что «уже привыкли» и «а как иначе?».
При этом с дизайнерами мы давно пользовались Invision, Figma, MarvelApp или Zeplin, и это было невероятно удобно: кликнул на экран — оставил комментарий — дизайнер увидел и отметил как выполненный — всё! Никаких скриншотов, чатов и таск-трекеров — только команда и сам интерфейс.
Вопрос «как иначе» не давал мне покоя, и в один день решение пришло. Основательно погуглив, я поняла, что на рынке есть только сервисы, которые в итоге тоже сводились к скриншотам или скринкастам. Некоторые из них существенно упрощали процесс постановки задач в таск-трекерах, например, Marker.io. Но в моём представлении это должно было выглядеть иначе:
В результате, обсудив идею со своим другом — основателем веб-студии, которому была отлично знакома боль общения с удалёнными заказчиками, — мы решили попробовать реализовать расширение, позволяющее оставлять комментарии прямо на странице. Так у нас появился pet-project, который мы делали больше для себя, чтобы стало комфортнее работать.
Сперва мы сделали простенький скрипт, встраиваемый на сайт и позволяющий нажать на появляющийся плюс, после чего кликнуть мышкой на конкретный элемент на странице и написать комментарий во всплывающем окне. Выглядело это так:
Написание кода заняло примерно неделю во внерабочее время. Так мы решили первую проблему и практически исключили скриншоты из рабочего процесса.
Вскоре выявились и минусы такого решения — сами ссылки на страницы мы всё равно скидывали в чат или Trello, плюс для появления задач URL должен был в точности совпадать с тем, на котором ставились задачи.
Однозначным минусом решения было отсутствие приватности, так как все, кто пользовался плагином, могли видеть как свои, так и чужие задачи, поскольку они никак не разделялись.
Так удалённые разработчики могли случайно наткнуться на задачи, которые были поставлены не им, а другим подрядчикам. Да и когда работают несколько менеджеров, было не очень удобно натыкаться на чужие задачи.
Поэтому мы сделали систему проектов, в каждый из которых можно было добавить нужные веб-страницы. И дать доступ к проекту удалённым разработчикам и, например, дизайнеру.
Постепенно знакомые и друзья из ИТ-сферы, которые узнавали об этой идее, просили дать доступ и им. В конечном счёте мы сделали бесплатное расширение, назвав его Frontosaur — сервис, позволяющий отметить элемент на свёрстанном интерфейсе, написать комментарий — после другие члены команды увидят его у себя в браузере.
При этом проектов и, как следствие, команд может быть сколько угодно, что было необходимо для фрилансеров и менеджеров, ведущих сразу несколько проектов.
Что сегодня умеет плагин:
- Отмечать задачи прямо на веб-странице ровно в той точке, которую отметил пользователь. Работает в том числе и с SPA.
- Даёт возможность комментировать поставленные задачи.
- Группировать страницы в проекты и приглашать членов команды в проект.
- Работает в Chrome, Opera и Яндекс Браузере
Прямо сейчас учим плагин интегрироваться в самые популярные таск-менеджеры.
Сайт проекта: frontosaur.com. Будем рады, если пригодится и вам!
Так вы просто категорически непригодны для этой работы. Это видно по вашим деструктивным формулировкам – "поменьше, побольше, поярче". Это все не задачи для разработчиков, вы им нервы треплете только, разработчик должен получать конкретно сформулированный запрос. Не можете сами на скриншоте нарисовать линии, количество пикселей указать, код цвета, как это делают все, нанимайте дизайнера (хотя в вашем случае, тут надо вообще целого менеджера нанимать, вместо себя). Ставить задачи, ясные, четкие, однозначные и корректно адресованные – это и есть работа нормального менеджера, а вы похоже из категории "работать не хочу, хочу руководить".
Уважаемый M Bot, себя поменяйте.
Суть кейса в том, что менеджер выявил проблему, а после этого предложил и реализовал ее силами команды. В этом, собственно, и состоит одна из основных задач менеджера. Это раз.
Кроме того, у вас чуть-чуть путается понимание "идеального" мира и реального, в котором обычно присутствует большое количество самых разных багов и хотфикса. И, как следствие, кроме "конкретно сформулированного вопроса" они получают список правок.
А чтобы вы понимали (потому что вы, вероятно, с этим мало сталкивались, раз у вас столько желчи): как для менеджера, так и для разработчика/дизайнера/who-ever составить и принять в работу док с правками занимает, порой, очень много времени.
А, в конечном счете, сервис экономит именно время на выполнение рутинных операций с формированием и передачей правок в работу. Это два.
Третье.
К слову, большая часть известных ныне продуктов появилась именно в результате того, что кому-то в голову приходит превентивное решение какой-то рутинной проблемы. Но всегда найдется куча ретроградов, которые говорят: "Да ну, это ж говно! И ты - говно, а не специалист!".
Так что M Bot - идите и набирайте правки.
Наталья, все круто - выкатывайте новую версию не обращая внимание на ботов)
Удачи!
Внимательно перечитала, но не нашла ничего про "побольше" или "поярче" в задачах, которые ставила.
Вы явно не читали текст: проблема, которую я хотела решить - это создание и отправка скриншотов как таковых в отдельном от самого интерфейса месте. Зачем писать количество пикселей, рисовать линии и стрелки на скриншоте, когда можно указать это прямо на интерфейсе (и рисовать линии на скриншотах, к слову, никак не задача дизайнера).
Ключевое в вашем сообщении - фраза "как делают все". Когда-то все делали скриншоты с файлов psd и отправляли дизайнерам, однако появились Invisionapp и Marvel и упростили жизнь всем, кто не слушал наставлений вроде вашего "делай скриншоты детально, как все, тыжеменеджер". А пока ваш совет больше похож на советское "все так делают и ты не жалуйся" 🤷🏻♀️
Я был и программистом и руководителем проекта. Работал много и с удаленщиками и с штатными
Всегда, когда общаются люди между собой, есть риск недопонимания. И чем мельче правка, тем больше времени уходит на ее согласование и пояснение.
Лучше один раз показать, чем сто раз объяснить :-)
Согласен с @M Bot. Такие мелкие задачи, как в тексте, обычно нарезаются в одну задачу, зачастую на звонке между менеджером и разработчиком, список лучше составлять самим разработчиком, и потом выполняются за раз, более крупные оформляются в отдельные таски. Всё. Так же у созвона с разработчиком есть куча других плюсов: он может предложить другой, более простой способ реализации из-за чего экономится время, деньги, качество реализации и достигается понимание.
ЗЫ: способ возможно не подходит для галер, очень больших команд или если плохая самоорганизация в команде.
От себя скажу: Хороший и отличный плагин, в реальности убирает много сообщений о не понятных задачах. Удивляет отношения людей к реализованной идеи, аргументов в многих комментариях нет. У ребят была проблема, они своими силами ее решили, и дали возможность использовать свою разработку другим командам, разработчикам и т.п. лицам. Рекомендую вам делать продукт и дальше, главное не убейте его сотнями возможностей, лучше позвольте их отключать.
P.S. Решил написать просто, без "Умных" слов. Развивайте проект, реально получится годный продукт, особенно сейчас.
Спасибо за добрые слова! Будем рады отзывам и предложениям
Очень крутое и нужное расширение, не понимаю хейта в других комментариях.
Спасибо! Будем очень рады отзывам по итогам использования.
без хейта создатели были бы уж больно сильно окрылёнными, не понимая, что делают ещё одну тулзу отстранённого угнетения без необходимости разобраться в деталях.
Отличный плагин, спасибо большое
Спасибо! Будем рады отзывам. Если возникнут проблемы - можно писать мне в телеграм @klimenkoyuri
круто! протестим с командой
Буду рада отзывам! Можно в тг @napest
Кто может видеть комментарии? Их можно разделить как-то для разных разработчиков в рамках одного проекта?
Комментарии могут видеть все участники проекта, сейчас можно указать для кого задача в тексте, но мы работаем над функционалом упоминания. Выкатим его в следующем обновлении. Спасибо!
Пока даже, к сожалению, нельзя поставить для кого задача :((
Но скоро будет интеграция в трелло и с этим же обнолвением добавим для кого задача
Комментарий недоступен
Вот только сплошь и рядом в таких местах процессы нифига не оптимальны.
А как быть, если у разработчика и менеджера разные расширения мониторов? Сместится ли комментарий от этого?
Мы специально в комментарии делаем пометку расширения, на котором найдена ошибка.
+ Комментарий сдивгается вместе с элементом при адаптивной верстке
Давно мечтаю о расширении или сервисе, с помощью которого можно делать пометки, выделять текст на определённых страницах и сохранять это как закладки. С возможностью пошерить.
Часто из-за одной фразы или картинки сохраняю в закладках всю страницу. А потом надо ещё вспомнить, зачем её сохранил.
Если расширить функциональность вашего сервиса до описанного, получится очень востребованная штука для широкой аудитории.
Спасибо за идею! Функциональность сейчас позволяет сохранить страницы с комментариями и для себя, можно назвать проект "Сохраненное" или вроде того и добавлять туда страницы с комментариями. Согласна, что для задачи сохранить страницу, возможно, просится что-то проще, подумаем над этим. Но как временное решение проблемы - почему бы и нет :)
Разве расширение evernote не умеет это делать?
Комментарий недоступен
Для корректировки контента наверное ок, а вот для тестирования верстки скорее нет.
80% проблем возникают в сложных ситуациях - мобильные браузеры, непопулярные браузеры (IE, Safari, FF и т.п.), разные версии браузеров, ОС и устройств, разные размеры и разрешения экранов. Если плагин работать даже на половине браузеров, вторую половину всё равно придётся комментировать скриншотами и скринкастами... А современные скриншотилки позволяют быстро и удобно делать пометки и текстовые замечания прямо на скриншоте, это обычно снимает недопонимание.
Приветствую!
То, что касается разных размеров у хрома и сафари есть отличная встроенная функция для тестирования разных размеров. + мы специально пишем размер на котором найдена ошибка
У сафари вообще можно настроить просмотр в режиме IE7, что очень удобно
1. не работает, см. видео
2. на чём гифки делали?
Извините за неудобства! :( Как можно с вами связаться? Пока такого бага не наблюдалось у других, буду рада разобраться
Гифки делала сама из картинок, нарисованных в Figma и дальше https://ezgif.com/
Вообще можно в фигму скриншот вставить и потом уже по этому скриншоту комментить.
PrintScreen -> Ctrl+V -> comment -> можно упомянуть человека
И уже есть сервисы для комментирования веб-приложений, которые встраиваются в сайты
https://usepastel.com/
И другие альтернативы https://alternativeto.net/software/pastel/
Мы пользовались Pastel и TrackDuck
Не предлагаю остановить вашу разработку, а проанализировать их работу и бизнес-модели и возможно применить у себя.
Павел, большое спасибо, изучим!
Забавно, у нас в начале была идея сделать подобное Pastel, когда ссылка открывается во внутреннем фрейме. У них только есть существенный недостаток: если url закрытый или домен на локальном сервере они не подходят, слышали от многих знакомых такой запрос
приложение только для Хрома. А другие браузеры?
Олег, плагин не только для Хрома, сейчас работает также в Opera и Яндекс Браузер, что уже составляет 81% десктопных устройств в РФ. Добавила об этом упоминание в статье. Работаем сейчас над Firefox и Safari :)
Не могу зарегистрироваться и войти(
Павел, добрый день!
После публикации у нас зарегистрировалось много пользователей, поэтому понадобилось переехать на новый хостинг помощнее. Увы, не обошлось без казусов, в течение дня обещают восстановить работоспособность сервера. Напишу Вам, как только это произойдет
Успешно все починили. Простите за неудобства. Пришолсь резко перезжать на нвый сервер