В отличие от "Как я сломал Хабрахабр", известно, что ломать — не строить. Ломка известного ресурса вызывает традиционно большой интерес. То, что все считали, что сделать нельзя, оказалось, что можно. Как же идут дела со строительством? И что вообще можно построить, если всё уже есть из коробки: открыл сайт и пользуешься? Есть некоторые пользователи-разработчики, которые видят, что на сайте можно достроить, но до чего дело не сразу дойдёт, если просто просить администрацию. И они достраивают сами, а затем делятся результатами с сообществом, благодаря чему мы их знаем, и их работа тоже вызывает большой интерес. Давайте для начала вспомним строителей, пусть им инвайтов за улучшения, насколько я знаю, за достройку не дают и премий не выписывают.
Как показывает опыт последних лет, ряд недостатков интерфейса исправляются, появляются новые официальные возможности, которые сделали штатные разработчики сайта. К примеру, за последние 2 года:
⚫ не пропадает набранная заготовка статьи — все поля сохраняются в хранилище;
⚫ предусмотрено редактирование комментариев в течение 3 минут после публикации;
⚫ для некоторых читателей доступна кнопка «Пожаловаться» на статью или комментарий;
⚫ над полем ввода комментариев появился селектор с выбором языка кода и список языков расширен с 16 до 42;
⚫ над анархией блогов проведена работа и они систематизированы в хабы;
⚫ из блогов компаний убраны «Похожие посты»
и многое другое.
Исправляются баги интерфейса и уязвимости. В общем, работа идёт, и сайт становится всё удобнее. Ходят слухи о появлении Habrahabr API (источник — статья с новогодними пожеланиями в конце 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 — стиль для чтения (тоже старый) — скрывает всё, сайдбар и даже комментарии; оставляет статьи.
☀ юзерскрипты, меняющие расположение информационных блоков на страницах сайта.
⚫ userscripts.org/scripts/show/71427 — сворачивание комментариев с сортировкой по оценкам при них;
⚫ userscripts.org/scripts/show/162360 — просмотр активности комментаторов на сайте по дням года, как на GitHub;
⚫ userscripts.org/scripts/show/60674 — просмотр комментария, на который отвечает выбранный комментарий без прокрутки страницы;
⚫ userscripts.org/scripts/show/132273 — просмотр показателей пользователя по имеющемуся Habr API;
⚫ userscripts.org/scripts/show/85482 — добавление кнопок форматирования (вставка псевдотегов) в поле ввода комментариев.
… и некоторые другие.
Как видно, интерес к преобразованиям и доработкам сайта есть. Если посмотреть на число пользователей, то их немного. Они появляются из тех, кто не боится запустить чужой скрипт на своём браузере, понимает, скорее всего, процесс, и вероятно, может сам кое-что в скрипте или в стилях подправить.
Результат измерений одного скрипта показывал, что постоянных пользователей набирается человек 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
