Используя силу JS во всех аспектах веб-проекта

Содержание

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

4501ae1eec1d5b828e972eb920904fd6

 

Предисловие

Меня всегда удручали закладки браузера или любые другие сервисы своей не информативностью. Довольно затруднительно найти нужную ссылку имея только фавиконку и заголовок. А если нужно найти конкретное видео или картинку в разросшейся коллекции закладок?
Одно время я просто сохранял URL-ы в txt файл, вел скрытую группу Вконтакте, делал заметки в Evernote, пользовался кучей сервисов. Все это привело меня к созданию Raindrop.io.

Под катом подробности и немного закулисья.

О проекте

a66d68da3c1082edb37ef38af96aeabd   a3dbab8e38f9ba7df209097fd94f508b   3d9ff8e893323a828b3b6b5e53465388
Raindrop.io сохраняет не просто закладки, но и связанный с ними контент в зависимости от типа страницы. Если это статья например с хабра или лента.ру, она будет вырезана и сохранена вместе с закладкой.
Тоже самое касается видео, фото, коуба с Coub.com или презентации например c SlideShare.
Таким образом вы можете организовывать тематические коллекции с разным контентом.
Коллекции можно делать публичными и использовать в ваших приложениях или на сайте с помощью простого API. Мне очень интересно какие коллекции создадите вы! Примеры использования можно посмотреть здесь.

С мобильного вы можете использовать Raindrop например как сервис отложенного чтения статьей. Клиент для iOS доступен вAppStore. Для других платформ в скором времени.

Что скрыто под капотом?

 

f14e437288b7da4528ca34b17b59a17f

 

  • На сервере работает Node.js+Express который выдает только статику и данные в JSON, на клиенте AngularJS, а мобильная версия на Appcelerator Titanium. Он позволяет писать нативные кроссплатформенные приложения под iOS, Android, Blackberry и др.
    Никаких проблем с одобрение в AppStore замечено не было. Понадобилась ровно неделя на апрув со стороны Apple.
  • Для парсинга статей модуль Node-Readibility. Изначально использовал открытое API от Readability но не ясно во сколько оно обойдется при большом количестве запросов, т.к открытого прайса у них нет. Есть еще Diffbot. Цены не кусаются, широкое API, возможность кастомизации парсера. Но вот скорость зачастую очень не радует. В среднем на одну страницу 3-5 сек и до бесконечности.
  • Так-же для точного определения типа страницы смотрятся мета-теги Open Graph и Twitter Cards. Они используются довольно часто и несут много полезной информации, например iframe плеера или превью, не говоря уже о заголовке и описание.
  • Написав расширение для Google Chrome очень просто портировать его в Safari. Единственное браузер от Apple не позволяет использовать куки для iframe в всплывающем окне расширения. Он их просто не сохраняет.
    Для оперы можно добавлять расширение от Chrome без изменений.

О каких то других аспектах могу рассказать подробнее в комментариях.

Аналоги

 

  • Pinterest — социальная сеть, ориентирована преимущественно на картинки, Raindrop же скорее ваша личная копилка любого контента
  • Pocket — сервис отложенного чтения статей, т. е имеет более узкое применение
  • http://kippt.com — похожий функционал, но визуальное отображение по моему мнению не очень удобное. Бесплатная версия с ограничениями.
  • https://icebergs.com — скорее для креативных людей. Имеет более широкий функционал (заметки, файлы). Бесплатная версия с ограничениями.
  • https://springpad.com — вместо коллекций записные книжки. Мне кажется имеет довольно излишний функционал. Кроме контента доступно создание рецептов, списков задач, точек на карте и мн. др.

Буду признателен любой обратной связи!

Гениальный автор: habrahabr.ru/users/exentrich