Пользователь
0,4
рейтинг
16 октября 2013 в 11:03

Разработка → Как я достроил Хабрахабр

В отличие от "Как я сломал Хабрахабр", известно, что ломать — не строить. Ломка известного ресурса вызывает традиционно большой интерес. То, что все считали, что сделать нельзя, оказалось, что можно. Как же идут дела со строительством? И что вообще можно построить, если всё уже есть из коробки: открыл сайт и пользуешься? Есть некоторые пользователи-разработчики, которые видят, что на сайте можно достроить, но до чего дело не сразу дойдёт, если просто просить администрацию. И они достраивают сами, а затем делятся результатами с сообществом, благодаря чему мы их знаем, и их работа тоже вызывает большой интерес. Давайте для начала вспомним строителей, пусть им инвайтов за улучшения, насколько я знаю, за достройку не дают и премий не выписывают.

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

не пропадает набранная заготовка статьи — все поля сохраняются в хранилище;
предусмотрено редактирование комментариев в течение 3 минут после публикации;
для некоторых читателей доступна кнопка «Пожаловаться» на статью или комментарий;
над полем ввода комментариев появился селектор с выбором языка кода и список языков расширен с 16 до 42;
над анархией блогов проведена работа и они систематизированы в хабы;
из блогов компаний убраны «Похожие посты»
и многое другое.

Исправляются баги интерфейса и уязвимости. В общем, работа идёт, и сайт становится всё удобнее. Ходят слухи о появлении улучшений интерфейса (источник — статья с новогодними пожеланиями в конце 2012-го и про мобильные приложения). Чего ещё желать?

Сторонние разработчики желают и реализуют. Если поискать по названию сайта на ресурсах юзерскиптов, юзерстилей и приложений, то можно найти:

несколько скриптов и программ, позволяющих удобно оформлять письма-сообщения авторам об ошибках в их статьях (чаще всего их делали для Хрома и один для старой Оперы) — 1, 2, 3;

несколько Хром-расширений (могут воспользоваться только 55% читателей — источник):

chrome.google.com/webstore/detail/habrahabr-more/glaccbllkhielccdhfbbpilnlbemgaji — различные улучшения сайта, подгрузка лент;
chrome.google.com/webstore/detail/habrahabr-reader/nnbjhfplkknimonkomifaleclogojjjd — чтение заголовков новостей/статей и переход к ним;
ХабраРедизайнер, меняет внешний вид ленты и заголовка;
ХабраПанель, аналогично;
chrome.google.com/webstore/detail/habrinfo/kbfcbifjdpbmcolhlpjdbojffhnmkaia — HabrInfo, добавляет навигацию по страницам из кнопки тулбара.

несколько стилей, преобразующих вид сайта;

userstyles.org/styles/78393/habrahabr — серый стиль страниц сайта (10 мес. не обновлялся);
userstyles.org/styles/19827/habrahabr-inversion-compact-skin — компактный традиционный стиль;
userstyles.org/styles/11900/habrahabr-prettifier — компактный светлый стиль;
(есть чёрный стиль, но вызывает большие сомнения в свежести)
userstyles.org/styles/55161/habrahabr-reader — стиль для чтения (тоже старый) — скрывает всё, сайдбар и даже комментарии; оставляет статьи.

юзерскрипты, меняющие расположение информационных блоков на страницах сайта.

сворачивание комментариев с сортировкой по оценкам при них;
просмотр активности комментаторов на сайте по дням года, как на GitHub;
просмотр комментария, на который отвечает выбранный комментарий без прокрутки страницы;
просмотр показателей пользователя по имеющемуся Habr API;
добавление кнопок форматирования (вставка псевдотегов) в поле ввода комментариев.
… и некоторые другие.

Как видно, интерес к преобразованиям и доработкам сайта есть. Если посмотреть на число пользователей, то их немного. Они появляются из тех, кто не боится запустить чужой скрипт на своём браузере, понимает, скорее всего, процесс, и вероятно, может сам кое-что в скрипте или в стилях подправить.

Результат измерений одного скрипта показывал, что постоянных пользователей набирается человек 50, попробовавших — 100-200 за период 2-3 месяца. Тысячи скачиваний, указанных на userscripts.org — показывает скачивание новых версий, которые менять приходится с каждой переделкой сайта. И, конечно, со временем приходят новые люди или прежние люди устанавливают скрипты и стили на другие компьютеры — человек один, а скачиваний несколько. Кроме того, с марта 2013 счётчик на userscripts.org вообще сломали или остановили — теперь никак, без специальных усилий, нельзя определить даже интерес пользователей к различным скриптам. Скорее всего, это приведёт к потере интереса к хостингу вообще.

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

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

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

Некоторое время назад я тоже начал пользоваться скриптами и стилями для устранения недостатков некоторых посещаемых мной сайтов. Сразу обнаружился основной недостаток пользовательских скриптов — изменчивость сайтов, их вёрстки. Довольно трудно пользоваться чужими скриптами и стилями, когда они перестают работать. Естественно, возникает желание переделать скрипты и стили под свои нужды. Судя по количеству переделок сайта, которые я хотел бы иметь, ожидалось порядка 20 и более функций. На Хабре я видел примерно в 2010 или в 2011 году только одного человека, который агрегировал много функций в один скрипт. Он продержался месяцев 8 и затем забросил публикацию его на userscripts.org. И вот, вроде тоже агрегатор функций из списка выше. Но ни тем, ни другим я не пользовался, потому что примерно с середины 2011 у меня был свой агрегатор. Изначально он делался как юзерскрипт, а не как приложение. Почему? У юзерскрипта немного меньше прав, но в нём меньшими усилиями можно достичь кроссбраузерности. Долгое время скрипт поддерживал 4 браузера со всеми функциями — Firefox, Opera, Chrome, Safari. Последний год Safari отвалилась, т.к. перестала поддерживать себя в Windows, а на Маке мне негде запускать скрипт.

Опыт показывает, что поддержка кроссбраузерности не занимает много дополнительных сил. Но этого нельзя сказать о стилях. Стили, пусть они похожи, но становятся неряшливо выглядящими то в одном, то в другом браузере, когда юзерстили стараются поддержать внешний вид везде. Приходится выбирать — поддержка везде или качество. Меня больше интересовала поддержка везде. Не нужно до сих пор выбирать браузер, чтобы посмотреть сайт через скрипты и стили — они работают везде. И в Сафари могли бы, но с ним — отдельная история.

Можно поддерживать и приложения для разных браузеров, включая IE. Для этого есть специальные фреймворки (Kango). Или в самодельном фреймворке это выглядело бы так: ядро обрабатывается загрузчиком, который за 1-3 секунды пересобирает приложение и подставляет его в нужное место файловой системы. Затем требуется (или нет) перезагрузка вкладки, иногда — браузера, смотря какая схема отладки — и тестирование изменений в данном браузере. Из ядра сборщик собирал бы целевое приложение, и затем оно доводится до кроссбраузерности. Единый код в приложении будет составлять порядка 90% каждого архива, но будет растворён среди особенностей браузерных приложений. Такая схема разработки — несколько избыточна даже для кода размером в несколько тысяч строк. Но была бы необходима, если бы захотелось использовать браузерные особенности приложений — кнопки и информеры в таскбаре, всплывающие сообщения, например.

Для неусложнения подхода и для поддержки 3 браузеров код организован был так:

юзерстили, порядка 1000 строк — в виде кода, готового для установки в Firefox, и основная масса которого готова для установки в 2 (ранее 3) других браузера — Chrome и Opera.

Основная идея этих стилей — компактность, выпуск «воздуха». Сайт может просматриваться при ширине окна от 320 пикс., адаптивные поля: чем меньше ширина, тем больше экономии на пустотах. Устраняются места с шумом: подчеркивания в сайдбаре, скрыты ненужные слова; некоторые из них дополнительно сокращаются скриптом, чтобы получить элементы интерфейса, а не их описания (ответить — отв, комментарий был изменён — изм.). Компактность оформления — заголовок, футер, сайдбар. Между комментариями — зазор в 1 строку (вариант без него (режим Zen) был уже перебором и хуже читался). Всегда видимое главное и пользовательское меню в углах и пагинатор ленты внизу.

юзерскрипты, полностью поддерживаемые единым кодом для всех браузеров. В них же вставляется сжатая строка юзерстилей, чтобы их можно было запускать из юзерскриптов (задержка на 0.5-1 с, но для примерки годится, а установка без скриптов применяет стили сразу, без мелькания страницы со стилями сайта).

Кратко, что они умеют (ссылки ведут на описания деталей):
подгрузка статей в ленты по Ajax — просматривает статьи и комментарии без перезагрузки страницы по клику на «читать дальше» или заголовке аннотации статьи в любой ленте (главная, все, песочница, избранное, поиск, вопросы).
включение юзерстилей ZenComment — применяются встроенные в скрипт юзерстили, которые отдельно существуют, но требуют установки расширения Stylish. Они преобразуют текст в более плотный и имеют 2 особых режима чтения комментариев (дзен и компакт).
ограничение или убирание сайдбара — решение для узких окон и экрана или убирание избыточной информации целыми блоками (много лишнего скрывает также ZenComment).
принудительный кат — ограничивает высоту любой аннотации в ленте до 240 (для ZenComment) — 290 пикселей, уменьшает картинки и видео до 240 на 120, сжимает вертикальные пустоты, предоставляет тегам не более 1 строки — всё, чтобы в окно поместилось несколько аннотаций и побольше текста.
фильтр по авторам и ключевым словам — сворачивает аннотации до одного заголовка для указанного списка авторов и для указанного списка регулярных выражений — фильтров по тексту и по заголовкам.
короткие даты текущего года — не показывает год, если он текущий или дата — не старее 8 месяцев.
поиск Гугла по сайту — дополнительные кнопки для поиска Гугла и Яндекса по сайту и 3 режима вывода: в окно, в фрейм или в текущую страницу. Если ничего не введено — поиск по заголовку статьи среди избранного на сайте.
корректировка ссылок — ссылки на переводы — в новом окне, ссылка «лента» — это «лента-новые», поправка ссылок в сайдбаре — на статьи, а не на сообщения.
установка/скрытие кнопок Google+ и других — неиспользуемые шаринг-кнопки можно удалить настройками и поставить Google+, если она используется или для информирования о популярности статьи.
ввод тегов source, font, blockquote — вносятся теги одним кликом над полем ввода; корректируется поведение некоторых других кнопок (нет блокирующего попапа).
регулировка размеров длинных заголовков — уменьшается шрифт, если заголовок длинный; сокращаются длинные имена блогов в ленте и в сайдбаре.
расцветка и подсчёт активности комментаторов — каждый комментатор получает цвет по числу ответов, которым отмечаются его комментарии узкой полосой слева и в заголовке ответов.
фрейм половинной высоты для просмотра профилей, избранного, поиска и составления писем. Открывается выше или ниже места клика, чтобы не закрывать контекст и показывает данные, не уходя со страницы.
Shift-Tab — для ввода символа табуляции в textarea, Ctrl+пробел — для "&+nbsp;".
ссылки на кеши со страницы отбоя — если статья удалена или Хабр недоступен («профилактические работы») — ряд ссылок на кеш страницы на крупных и мелких сервисах.
авторост полей ввода — рамки многострочных полей ввода (textarea) расширяются автоматически, если позволяет высота окна.
просмотр картинок без перезагрузки — в увеличенном размере, с масштабированием колесом мыши и перемещением по экрану.
выделение цитаты для комментариев и личных сообщений (ЛС, писем) (выделяем текст, нажимаем контекстную кнопку «Письмо» — видим вложенный фрейм половинной высоты с формой составления письма автору и с цитатой);
комментирование подгруженных статей и комментариев через контекстную цитату и фрейм (в подгрузке статью комментировать нельзя; но можно выделить фрагмент, нажать контекстную кнопку «Ответ» рядом с выделением и увидеть во вложенном фрейме поле ввода с выбранной цитатой — не надо специально открывать статью в новой вкладке и искать цитату или комментарий);
редактирование своей статьи в фрейме, другой вкладке или непосредственно — по выделению цитат (выделил в предпросмотре то, что нужно редактировать, нажал контекстную кнопку «E» рядом с выделением — перешёл к выделению того же самого в поле ввода).
Ссылки на внешние источники — в новой вкладке. В подсказке местных ссылок — месяц и год публикации.
Дублирование даты и автора статьи вверху и внизу статьи.
Прибитый к низу футер. Подгрузка 3 нижних статей. Компактный футер.

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

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

Последнее дополнение скриптов (заливка картинок перетаскиванием) я предложил делать краудсорсингово — кто-то предложит дизайн, я сделаю реализацию. Опрос показывает, что могли бы сделать дизайн 14 человек из 87, принявших участие в опросе. Вышли на связь — 0 человек. Сейчас вот есть нарисованная мной конструкция в UPD6, в конце статьи. Возможно, реализация кому-то не понравится. Но так и делаются стили — каждый может принять участие, но делается то, что делается, а не существует в возможностях.
spmbt @spmbt
карма
157,5
рейтинг 0,4
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

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

  • +3
    Стили можно применять безбоязненно, в отличии от скриптов.
    userstyles.org поддерживает установку в расширения stylish и stylebot
    В Stylebot есть своя коллекция стилей для разных сайтов, вот например stylebot.me/styles/3741
  • +7
    для некоторых читателей доступна кнопка «Пожаловаться» на статью или комментарий

    Извиняюсь за оффтоп, но для кого именно?
    • 0
      Для тех, кто имеет то ли 10, то ли 20 публикаций с рейтингом не менее 50.
      • 0
        От блин, а я в неё время от времени тыкаю случайно. Надеялся, что в силу массовости такие ошибки будут незаметны.
      • 0
        Видимо, таки 10, т.к. у меня двадцати таких топиков не наберется, а кнопка есть.
  • +45
    Ждём статью: «Как я не трогал Хабрахабр»
    • +3
      А потом: «Как я игнорировал Хабрахабр».
    • +4
      Лучше уж от одного юзера, «Как я построил Хабр».
      • –1
        «Как я ушел с Хабра»
  • +1
    Ждём статью: «Как я прописал в локалхост 127.0.0.1 habrahabr.ru»
  • НЛО прилетело и опубликовало эту надпись здесь
  • +15
    Неделя хабра на хабре?
    • +7
      Количество хабра увеличилось вдвое?
      • +13
        мы прокачали хабр

      • +2
        Количество вдвое увеличилось в хабра.
  • +1
    Ещё в поиске нельзя найти «SENTENCE» и «PARAGRAPH» (покуда это ключевые слова в языке запросов сфинкса), и что? Ну да, системная бага. Может, тоже написать статью по этому поводу?
  • +3
    Интересно, я один попробовал поискать в поиске «SENTENCE» и «PARAGRAPH»?
  • +3
    Очень, очень не хватает Хабр API и соответственно нормального мобильного приложения.
  • +6
    К упоминаниям недавних улучшений, появившихся на сайте по мере его развития в последние годы, хочу прибавить упоминание ещё одного, и прибавлю.

    В головной части страницы (между «<head>» и «</head>») появились такие элементы:

    <meta property="og:type"        content="article"> 
    <meta property="og:url"         content="(URL страницы)"> 
    <meta property="og:title"       content="(заголовок страницы)"> 
    <meta property="og:image"       content="http://habrahabr.ru/i/habralogo.jpg">
    <meta property="og:description" content="(первые несколько слов основного текста страницы)">
    <meta name="twitter:card"       content="summary">
    <meta name="twitter:site"       content="@habrahabr">
    

    Благодаря этому всякая гиперссылка, на Хабрахабр ведущая, раскрывается в Твиттере «карточкою страницы».

    Ну или почти всякая.
  • +1
    Очень не хватает адаптивности, сидеть с телефона жутко неудобно: мобильная версия страшно обрезана по функционалу, сторонние приложения кривоваты.
  • 0
    В Safari я использую NinjaKit для подключения JS. Это работает. Есть ещё GreaseKit, но он работает через SIMBL, так что нафиг его, не вижу смысла.
    А для подключения CSS использую Stylish. Это тоже работает.
    Так что не надо говорить плохие вещи о Safari. Всё ок.
    • 0
      Да, я тоже запускал через NinjaKit. GreaseKit никогда на Windows не был доступен. Плохие вещи говорю не я, они сами говорят о себе:
      1) из Windows Safari ушёл (его ушли);
      2) даже последняя 5.07-я версия от мая 2012 на среднесложных сайтах типа Хабра падала у меня в среднем раз в 5 минут. Всё остальное работало днями, так что дело не в железе. И проверял для интереса на разных компьютерах. Если бы она была хотя бы в состоянии Оперы 12 и с поддержкой — не было бы проблем. Другие люди имеют похожие мнения о стабильности.

      Посмотрев, что и она падает (что с моими скриптами, что без), пришёл к закономерному выводу, что пытаться использовать её не имеет смысла. Единственную возможность вернуться к нему вижу в случае, если когда-то будет доступна МакОС.
      • 0
        Я в JS совсем ничего не понимаю, но всё же задам вопрос: неужели с ним всё настолько сложнее, что JS в Safari, будучи запущенным на современной версии WebKit, сильно иначе работает, чем в Chrome? Сомневаюсь. Тут дело в качестве JS, я думаю. Я использую довольно давно расширение vkPatch, и он, я думаю, работает на JS, и каких-либо проблем с ним нет.
        • 0
          Дело совсем не в JS, а в реализации версии браузера на Windows. Причём, до 4-й версии было всё в порядке, но она сильно устаревшая для скриптов. Это подтверждалось недавно в какой-то статье на Хабре о том, какие версии браузеров как часто выходят из теста по падению браузера (может быть. подскажут ссылку, была не так давно). И лидер падений — именно 5-й Safari. У меня Safari падала с таким же успехом, как и на сайтах — на собственной заставке (SpeedDial). На Маках, очевидно, такого нет. Они тихо закрыли свой браузер на Win и стараются не вспоминать, и ссылка на скачивание спрятана очень далеко, в отличие от Мак-версий.
          • 0
            Потому что на Mac уже Safari 6. И правильно прикрыли, я б на месте Apple и с iTunes так же поступил, оставив этот вопрос на совесть сторонних разработчиков.

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