Какое-то время я хотел убрать комментарии из своего блога; в основном, потому что здесь вообще мало комментариев, да и не хочется возиться с лишними «тормозами» от Disqus. Посмотрев на время загрузки Disqus, я был потрясён тем, что приходится терпеть посетителям сайта по моей вине (кроме тех, кто использует блокировщики вроде Privacy Badger и uBlock Origin.

Эта статья заточена под Hugo, но код легко адаптируется для любого сайта.

Что не так с Disqus?


Вот как выглядит типичный журнал запросов с включенным Disqus.


А вот лог после отключения Disqus.


ЧЕГО!?

Важные моменты здесь следующие:

  • Время загрузки снижается с 6 до 2 секунд.
  • Количество сетевых запросов снижается со 105 до 16.
  • По сети идёт масса нерелевантных запросов для слежки за пользователем.

Среди сетевых запросов вы можете обнаружить такие:
  • disqus.com — Очевидно!
  • google-analytics.com — Многочисленные запросы; без понятия, кто следит за вами.
  • connect.facebook.net — Если вы авторизованы на Facebook, то они знают о вашем посещении этого сайта.
  • accounts.google.com — Google также отслеживает ваше посещение этого сайта через любой из ваших аккаунтов Google.
  • pippio.com — Идентификация LiveRamp для сбора информации о вас с коммерческими целями.
  • bluekai.com — Трекинг отдельного пользователя для маркетинговых кампаний.
  • crwdcntrl.net — Довольно подозрительный сайт, который упоминается в связи с распространением вирусов и шпионского ПО.
  • exelator.com — Ещё один сайт для слежки за пользователями, в честь него даже назван вирус!
  • doubleclick.net — Этого мы все знаем: реклама и слежка за действиями пользователя, принадлежит Google.
  • tag.apxlv.net — Очень подозрительно и выглядит хитростью, что владелец обфусцировал свой домен (я даже не знал, что такой приём работает!). Добавляет на ваш сайт пиксель для слежки.
  • adnxs.com — Ещё больше следящего мусора, хотя немного более обильного.
  • adsymptotic.com — Реклама и слежка, которая предположительно использует машинное обучение.
  • rlcdn.com — Обфусцированная реклама/трекинг от Rapleaf.
  • adbrn.com — «Обеспечиваем пернализированное путешествие пользователя по устройствам, каналам и платформам с помощью технологии соответствия через пользовательский идентификатор Adbrain».
  • nexac.com — Datalogix от Oracle, их собственная дрянь для слежки и поведенческого анализа.
  • tapad.com — Всё, мне надоело искать про них информацию.
  • liadm.com — Ещё? Ох, ладно, тогда…
  • sohern.com — Мда. Слежка.
  • demdex.net — Слежка. От Adobe.
  • bidswitch.net — Дам ещё одну подсказку…
  • agkn.com — …
  • mathtag.com — Забавное название, может быть, это… нет. Оно следит за вами.

Я не могу посетить многие из этих сайтов, потому что они заблокированы в uBlock Origin, так что информацию пришлось собирать из результатов поиска Google и со сторонних сайтов. Нечего и говорить — довольно противно видеть, как некоторые бесплатные продукты превращают вас самого в продукт. Ещё больше опасений вызывают сервисы, которые пытаются скрыть своё предназначение и цель, зачем они следят за вашими действиями.

В любом случае, удаляйте это. Прошу прощения перед всеми за то, что отравил свой сайт этими сетями. Перейдём к лучшим вещам.

Используем Github для комментариев


Я обсуждал удаление Disqus, и @HarryDenholm упомянул, что его друг умудрился реализовать комментарии на своём статичном блоге Github, используя пулл-реквесты. Я подумал, что это гениальная идея, и решил выяснить, можно ли сделать что-то такое для Hugo на внешнем сайте.

Ответ содержится в Github Issue API. Процесс довольно простой и он уже работает для этого поста в блоге:

  1. Для каждого опубликованного поста открывайте Issue в каком-нибудь репозитории на Github. Например, для этого поста он открыт здесь.
  2. Все комментарии публикуются напрямую на Github.
  3. Добавьте на сайт код Javascript, который считывает описание JSON комментариев этого Issue и отображает их.

Преимущества такого подхода вы получаете немедленно:

  • Трекинг посетителей сайта сводится к нулю. Сам Github видит только сетевые запросы на чтение с безымянных IP.
  • Все комментарии написаны на Markdown, с поддержкой встроенного кода, изображений, списков и форматирования.
  • Вы можете использовать уведомления Github об ответах; не требуется даже заходить на этот сайт, чтобы читать комментарии и участвовать в обсуждении.
  • Хотя это кажется лишним, но вы можете интегрировать эмодзи Github Reactions (может быть полезно для более крупных сайтов).

Для чтения данных Github JSON не требуется ключ API; они полностью открыты для доступа. Комментарии к этому посту можно считать в виде JSON здесь. Первый комментарий выглядит так:

{
    "url": "https://api.github.com/repos/dwilliamson/donw.io/issues/comments/295004846",
    "html_url": "https://github.com/dwilliamson/donw.io/issues/1#issuecomment-295004846",
    "issue_url": "https://api.github.com/repos/dwilliamson/donw.io/issues/1",
    "id": 295004846,
    "user": {
        "login": "dwilliamson",
        "id": 1532903,
        "avatar_url": "https://avatars3.githubusercontent.com/u/1532903?v=3",
        "gravatar_id": "",
        "url": "https://api.github.com/users/dwilliamson",
        "html_url": "https://github.com/dwilliamson",
        "followers_url": "https://api.github.com/users/dwilliamson/followers",
        "following_url": "https://api.github.com/users/dwilliamson/following{/other_user}",
        "gists_url": "https://api.github.com/users/dwilliamson/gists{/gist_id}",
        "starred_url": "https://api.github.com/users/dwilliamson/starred{/owner}{/repo}",
        "subscriptions_url": "https://api.github.com/users/dwilliamson/subscriptions",
        "organizations_url": "https://api.github.com/users/dwilliamson/orgs",
        "repos_url": "https://api.github.com/users/dwilliamson/repos",
        "events_url": "https://api.github.com/users/dwilliamson/events{/privacy}",
        "received_events_url": "https://api.github.com/users/dwilliamson/received_events",
        "type": "User",
        "site_admin": false
    },
    "created_at": "2017-04-18T22:39:16Z",
    "updated_at": "2017-04-18T22:39:16Z",
    "body": "This is a comment"
},  

Первым делом следует добавить новый шаблон в свой каталог с частями шаблонов. Он будет считывать и отображает комментарии Github (comments.html). Вот код, который я использовал:

var url = "https://github.com/dwilliamson/donw.io/issues/" + {{ $.Params.ghcommentid }}
var api_url = "https://api.github.com/repos/dwilliamson/donw.io/issues/" + {{ $.Params.ghcommentid }} + "/comments"

$(document).ready(function () {
    $.ajax(api_url, {
        headers: {Accept: "application/vnd.github.v3.html+json"},
        dataType: "json",
        success: function(comments) {
            $("#gh-comments-list").append("Visit the <b><a href='" + url + "'>Github Issue</a></b> to comment on this post");
            $.each(comments, function(i, comment) {

                var date = new Date(comment.created_at);

                var t = "<div id='gh-comment'>";
                t += "<img src='" + comment.user.avatar_url + "' width='24px'>";
                t += "<b><a href='" + comment.user.html_url + "'>" + comment.user.login + "</a></b>";
                t += " posted at ";
                t += "<em>" + date.toUTCString() + "</em>";
                t += "<div id='gh-comment-hr'></div>";
                t += comment.body_html;
                t += "</div>";
                $("#gh-comments-list").append(t);
            });
        },
        error: function() {
            $("#gh-comments-list").append("Comments are not open for this post yet.");
        }
    });
});

Его можно вызвать со страницы поста:

{{ partial "comments.html" . }}

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

Резюме


Добавить больше нечего. Технически, вы можете вообще публиковать свои посты как Github Issues и забыть о блог-движке. Но это кажется использованием системы не по назначению.

Этот веб-сайт управляется на Github как dwilliamson/donw.io. Там есть полный код для использования Github в качестве движка комментариев.
Поделиться с друзьями
-->

Комментарии (65)


  1. nick_volynkin
    26.04.2017 13:31
    +22

    Спасибо, выглядит очень перспективно. Просто поразительно, сколько слежки напихал в свои комментарии Disqus.


    1. lolhunter
      27.04.2017 12:08
      +4

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


      1. batyrmastyr
        27.04.2017 13:22

        Для посещаемых сайтов — вполне себе платный, как и Гитхаб.


    1. ArtVol
      27.04.2017 19:54

      Когда юзаешь noscript видно сразу сколько disqus тянет с собой всякого…
      Блочил, блочу и буду блочить disqus.


  1. Areso
    26.04.2017 13:46
    +2

    Про Disqus далеко не новость для тех, кто хоть раз смотрел как загружается его сайт с их модулем комментирования; про GitHub — большое спасибо. Надо будет попробовать ради интереса.


  1. justboris
    26.04.2017 14:18
    -2

    Для того, чтобы откомментировать пост, придется переходить на отдельный сайт. Неочевидно, как это сделать и просто неудобно переходить.


  1. kx13
    26.04.2017 14:19
    +13

    А кроме Disqus разве не существует подобных сервисов?
    Вариант с GitHub технически, конечно, интересный. Но по сути это костыль какой-то.


    1. UksusoFF
      26.04.2017 16:27
      +3

      Cackle, но что-то он подзагнулся.


    1. kukaew
      27.04.2017 12:57

      Попробуйте http://w3j.ru/faq#vidjet


  1. justboris
    26.04.2017 14:23
    +3

    Кстати, БЭМ-форум Яндекса в таком режиме уже работает давно.
    Вот форум: https://ru.bem.info/forum/
    А сами темы хранятся в issues тут: https://github.com/bem-site/bem-forum-content-ru/issues


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


    1. vintage
      26.04.2017 14:34

      Идеально было бы обойтись вообще без серверной стороны. Этим Дискус и хорош — его можно подключить к любой статической странице.


      1. justboris
        26.04.2017 14:38

        Конечно. Но в статье все верно описано, Дискус тащит много лишнего барахла на страницу. А на Гитхабе авторизация через OAuth2, которую целиком на клиенте не сделать. Вот сервер и тащится.


    1. aynur_safin
      26.04.2017 18:33
      +2

      Вот еще пример.
      Статья на сайте с комментариями:
      https://frontender.info/document-outlines-in-html-5-1/

      Эта статья и комментарии к ней в виде issue на гитхабе:
      https://github.com/FrontenderMagazine/document-outlines-in-html-5-1/


  1. IvaYan
    26.04.2017 14:39
    +5

    Есть же ещё HyperComments, которые одно время той же лентой использовались, так что на Disqus свет клином не сошелся. С другой стороны, все бесплатные сервисы так или иначе собирают данные о пользователях, так как если вы не заплатили за товар, то товар — это вы.


    1. Regis
      26.04.2017 21:00
      +17

      если вы не заплатили за товар, то товар — это вы
      А сейчас еще нередко бывает, что вы и за товар заплатили, и сами остались товаром :(


      1. sav1812
        27.04.2017 11:38

        А сейчас еще нередко бывает, что вы и за товар заплатили, и сами остались товаром

        Я бы сказал, что иногда всё ещё (пока что?) не бывает… :)


      1. vintage
        27.04.2017 12:07

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


  1. vics001
    26.04.2017 14:57

    Может есть уже решения на Firebase, большинство сайтов впишутся в бесплатный план (если не держать соединение постоянно). 100 connection в секунду должно хватить.


  1. NeuroHunter
    26.04.2017 15:22
    +1

    Раньше у сайтов были форумы, в которые направлялась после (а иногда и до) прочтения статьи почтенная публика и обсуждала текст/автора/etc.
    Потом появился Disqus и отправляться более никуда не надо было.
    Возвращаемся к форумам?


    1. arvitaly
      26.04.2017 15:36

      reddit?


      1. NeuroHunter
        26.04.2017 15:38

        Для того, чтобы комментировать на Reddit, не нужен какой-то сторонний аккаунт (как в случае с форумом/Github)


    1. kx13
      27.04.2017 13:07

      У уногих CMS есть плагины или стандартный функционал для комментирования статей. Ничего подключать не надо. Установил модуль или подправил настройки и можно комментировать.


      1. nitso
        27.04.2017 23:06
        +1

        Особенно хорошо, когда плагины подключают disqus ;)


      1. NeuroHunter
        28.04.2017 07:26

        Плюс Disqus — в том, что вместо того, чтобы регистрироваться на сотне сайтов, чтобы оставить там по одному комментарию, достаточно зарегистрироваться всего один раз.


  1. tishevich
    26.04.2017 15:22
    +7

    Минусы:
    — чтобы оставить комментарий надо переходить на другой сайт (GitHub)
    — до формы ответа надо листать всю страницу вниз
    — для того чтобы отправить комментарий — надо иметь аккаунт на гитхабе.

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


    1. LynXzp
      26.04.2017 16:28
      +4

      + (2) Может некоторые все-таки прочитают комментарии до того как писать свой.
      + Для гиковского сайта это может оказаться плюсом. Комментирующие оценят красоту решения.


      1. justboris
        26.04.2017 16:50

        Имеется в виду, что придется еще и Github проскроллить до конца, перед тем как написать комментарий


      1. tishevich
        26.04.2017 16:52

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


    1. Zverik
      26.04.2017 16:45
      +1

      Ждём, когда кто-нибудь напишет плагин для прямой вставки и отправки комментариев через GitHub API.


      1. tishevich
        26.04.2017 16:54
        +1

        Но ведь от необходимости иметь аккаунт на Гитхабе это не избавляет? У меня есть достаточно знакомых даже программистов, у кого его нет)


        1. Zverik
          26.04.2017 17:34

          Это так. Но чтобы комментировать на disqus, тоже нужно регистрироваться.


          1. NeuroHunter
            26.04.2017 17:47
            +2

            1) это можно сделать буквально в 2 клика с помощью существующего аккаунта Google/Twitter/Facebook (и это увеличивает порог вхождения)
            2) после регистрации, помимо возможности комментировать статьи там, где есть Disqus (т.е. почти везде), появляется удобная веб-морда управления всеми своими комментариями, оставленными через Disqus (с GitHub-комментариями это, конечно, тоже можно делать, но отделять зерна от плевел уже ощутимо сложнее)


            1. Zverik
              26.04.2017 18:01

              Я согласен, что система с гитхабом подойдёт только для специфичной публики, которой так и так стоит регистрироваться на гитхабе. И поскольку тут прикручивается сервис к задаче, для которой он не предназначен, всяко он будет менее удобен.

              Но идея-то хороша. Немного работы молотком и напильником, немного колёс и костылей — и система комментирования без регистрации и смс на базе данных гитхаба готова :)


              1. vintage
                26.04.2017 18:33
                +2

                Если говорить о статьях, то их можно сразу публиковать на гитхабе и не париться. Например: https://github.com/nin-jin/habhub


                1. Zverik
                  26.04.2017 18:36

                  Хорошо придумано. Кажется, в статье про это упоминали. Мне было неудобно читать длинный текст внутри тикета, для подобного блога лучше подошёл бы GitHub Pages с каким-нибудь приятным шаблоном. Но тогда не было бы комментариев.


                  1. vintage
                    26.04.2017 18:39

                    Там есть ссылка и на GitHub Pages :-) http://mol.js.org/app/habhub/ Комменты правда ещё не прикрутил. Но без возможности тут же их и писать — как-то грустно.


            1. Aingis
              26.04.2017 19:36

              1) это можно сделать буквально в 2 клика с помощью существующего аккаунта Google/Twitter/Facebook (и это увеличивает порог вхождения)

              Если б всё так просто было. Нельзя, там надо e-mail, и его верификация, скорее всего. А регистрироваться в системе, следящей за пользователями, не самая умная идея.


              1. Azoh
                27.04.2017 08:07

                Нельзя, там надо e-mail, и его верификация, скорее всего.

                Зачем? Вся инфа идет уже из вашего аккаунта, доступ к которому вы сами и разрешите. Сейчас как-раз регистрацию через email сложнее встретить, чем через социалки.


    1. j_wayne
      26.04.2017 16:50

      Чтобы не переходить на др. сайт, можно слегка заморочиться с GitHub API.
      P.S. опоздал


  1. NeuroHunter
    26.04.2017 15:46

    Кстати, а как у сторонних систем с поддержкой такой удобной фичи Discus, как «reply-by-email»?
    В контексте глючности их мобильного приложения — очень удобная штука.


  1. Solexid
    26.04.2017 16:02

    Тоже самое для тех кто ненавидит jquery и левые зависимости
    Рабочий пример кода.
    Делает аж 1 вызов.


    1. iborzenkov
      26.04.2017 20:28

      Тогда уж fetch вместо xmlhttp


  1. Zverik
    26.04.2017 16:47
    +1

    Пока читал заметку, поставил uBlock и увидел по два заблокированных запроса к mc.yandex.ru/webvizor на каждую прокрутку страницы.


  1. dom1n1k
    26.04.2017 17:47
    +7

    Я конечно догадывался, что Disqus набит слежкой и рекламой, но чтобы настолько


    1. sheknitrtch
      26.04.2017 18:11
      +5

      Да, у расширение Ghostery есть список того, что собирает Disqus — https://apps.ghostery.com/en/apps/disqus
      И что они могут с этими данными сделать: «Aggregate data is shared with 3rd parties., Anonymous data is shared with 3rd parties., PII data is shared with 3rd parties.»

      Я лично столкнулся с тем, что Disqus перехватывает клики на странице и перенаправляет их через левые сервера. То есть, при клике на ссылку, ведущую на сайт Samsung, браузер проходит через 5 редиректов, пока не попадёт наконец на официальный сайт Samsung. При заблокированном виджете Disqus никаких промежуточных редиректов нет. После этого Я удалил свой аккаунт на Disqus и навечно заблокировал его в Ghostery.


      1. dom1n1k
        26.04.2017 18:19
        +1

        Редиректы через левые сервера (если это правда) — вообще за гранью. За такое надо банить пожизненно. Лучше бы РКН за такими вот умниками смотрел.


        1. sheknitrtch
          26.04.2017 18:42

          Поищите по фразе «disqus hijacking links» и увидите множество жалоб разъярённых пользователей.


        1. xenon
          27.04.2017 02:32
          +4

          За гранью — да. Но лучше уж как-то без РКН. Захотел админ сайта поставить дискус — поставил. Захотел (например, после этой статьи) — убрал. Захотел пользователь — заблочил его. Где проблема решается сама, без принуждения и дополнительных механизмов — так она и должна решаться сама. А призывание темных сил всегда оканчивается плачевно.

          Дискус — молодец в том, что он создал и продвинул эту идею, комментов «где угодно», малыми усилиями. И то что он при этом такой вот гадкий — ну и ладно. Это возможность для следующего движка делать то же самое, но без лишнего мусора. Это часть эволюционного пути, где каждый этап важен. Так что, спасибо кистеперым рыбам за Скарлетт Йохансон.

          Если уж хочется надеть строгую темную фуражку с металлическими декорациями от хьюго босса — можно написать аддон который будет блокировать сайты. Опциональный. И если он окажется таким полезным — люди сами его будут ставить «как по стандарту», примерно как адблок ставят.


          1. dom1n1k
            27.04.2017 16:18

            Вот именно что «после этой статьи» — потому что ранее не знал, не думал об этом.
            И более того, даже если админ и думал (ему-то пофиг скорее всего) — то пользователь точно нет.


    1. batyrmastyr
      27.04.2017 13:36

      Всё ещё хуже:

      Разрешить приложению DISQUS использовать вашу учетную запись? Это приложение сможет:
      Читать твиты из вашей ленты.
      Рекомендовать новых пользователей.
      Обновлять ваш профиль.
      Публиковать твиты от вашего имени.

      Когда-то им хватало почты.

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


  1. cepera_ang
    26.04.2017 17:55
    +1

    Что-то у меня ничего подобного с disqus'ом не загружается. Зашёл на сайт, где стоит disqus, обновил с выключенными ublock'aми — показывает сам сайт, дискас и гугловую аналитику, но она отдельно стоит image


  1. immaculate
    26.04.2017 19:14
    +3

    Есть еще альтернативный вариант: https://posativ.org/isso/


    И другие:
    [0] https://staticman.net/
    [1] https://github.com/netlify/gotell
    [2] https://mademistakes.com/articles/jekyll-static-comments/


    1. Plinio
      26.04.2017 20:47

      Вы не подскажите что у них с производительностью, чем хуже или лучше?


      1. immaculate
        26.04.2017 21:56

        Думаю, что лучше. isso — это self-hosted сервис, очень простой.


  1. yazyk_na_nojkah
    26.04.2017 19:49

    Чем сгенерированы такие таблицы с графиками загрузки? Не похоже ни на Chrome dev tools, ни на Firefox dev tools.



  1. Beholder
    26.04.2017 23:12
    +9

    Github не будет рад, что его превращают в CDN.


    1. bitrixworkshop
      27.04.2017 04:16
      +1

      Определенно. И работает это до поры до времени. Ну а потом, либо прикроют, либо займутся монетизацией в том же виде, что Disqus.

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


    1. Areso
      27.04.2017 06:06

      После того, как я увидел хостинг картинок и видеороликов первоначального ютубовского формата на гитхабе, я в этом почти уверен. Вопрос лишь в том, как быстро это дело распухнет до того объема, что гитхаб вежливо попросит прекратить так делать. По отзывам других людей, это происходит в районе ~80-100 мегабайт.
      Но, в 1 мегабайт текста комментариев можно впихнуть 10500 строчек, в отличие от картинок / видео.


  1. D_Mitrich
    27.04.2017 11:04

    … еще один повод создать свой велосипед)))


  1. IonDen
    01.05.2017 14:11

    А кто пользовался MUUT?
    На вид неплохой аналог, интересно как там у них?

    Еще есть Spot.IM, но они уже год как инвайт не шлют.


  1. ZitRo
    02.05.2017 01:04

    Я не могу посетить многие из этих сайтов, потому что они заблокированы в uBlock Origin
    Но ведь эту кнопку так старались сделать заметной…
    Картинка


  1. verydima
    02.05.2017 11:40

    Опишу свой опыт. У меня есть сайт, на котором много комментариев и ежедневно прибавляется обычно несколько комментариев. Стоит дискус. Однажды я решил заменить его на платный аналог, который не хранит у себя комментарии, а использует базу сайта. Купил, заменил. Функционал вроде и аналогичный дискусу, и социальный логин есть. Но вот за месяц использования люди оставили всего 2 комментария. Естественно, я вернул всё обратно. И снова начали комментировать и задавать вопросы ежедневно.Скорость загрузки страницы не страдает, если для дискуса использовать отложенную загрузку и загружать его, например, по началу скролла.


  1. coocheenin
    02.05.2017 12:57

    Может проще просто деактивировать рекламу в Disqus?
    Человек автору об этом написал вот здесь:
    https://github.com/dwilliamson/donw.io/issues/1#issuecomment-298496581


  1. NLO
    05.05.2017 08:59

    НЛО прилетело и опубликовало эту надпись здесь