linch.me — аннотации к картинкам

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

На название меня вдохновил Бизнес-линч Лебедева.

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

Аналоги

www.pixtick.com — флеш.

www.marqueed.com — регистрация.

www.bounceapp.com — только текст и без сносок.

Кроме того, их объединял один фатальный недостаток.

Резюме: нужен свой велосипед.

Создание

Отброшены были возможные решения с канвасом, флешем и прочими новыми технологиями и сделана ставка на тёплые ламповые изображения и html. Хостингов изображений сейчас много, и использовать можно любой. При помощи некоторых инструментов можно получать ссылки на изображения, загруженные на Dropbox.

Сначала хотелось использовать аккуратные треугольники для стрелок, но вылез неприятный баг в фаерфоксе:

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

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

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

Когда внешняя составляющая начала работать, я обратился к другу, который помог сделать бекенд. Прикрутили сохранение аннотаций и генерацию изображений. Добавили генерацию уникального URL.

Видео использования

Видео

Результат

http://linch.me/ — пользуйтесь на здоровье!

P.S. Бонус: если нашим сайтом будут пользоваться больше, чем фейсбуком — то мы добавим веселый фон!