Поговорим о скрипте выделения комментария автора статьи в топике, который в своё время был крайне популярным, судя по количеству скачиваний с 2008 года на сайте userscripts.org (4433 на момент написания этого отзыва). Функция простая, но удивительно, как она могла набрать в несколько раз больше скачиваний, чем другие скрипты, с другими функциями. Давайте разберём факторы, которые могли приобрести популярность этого скрипта и не способствовать популярности других.

Впервые за 2 года, а может, и более, Хабр повёл себя неестественным образом. Никто не ожидал, но в поле ввода пришли изменения — поле ввода тега SOURCE с языками для подсветки синтаксиса. Одновременно, появилась поддержка гораздо большего числа языков, чем было раньше описано в «хелпе».

Для некоторых юзерскриптов начинает иметь значение, каким способом пользователь установит его в браузер Оперу. Если сделать установку, не разрешив доступ к некоторым доменам, работа будет неполноценной, а при установке кроссдоменного скрипта, да ещё использующего защищённый протокол (HTTPS), такое запросто может случиться. Например, для юзерскрипта HabrAjax, кроме основного сайта Хабра, используется доступ к кнопкам Google Plus на plusone.google.com и проверяются обновления скрипта на домене userscripts.org. Всё это требует дополнительных настроек, которые были описаны прямо в юзерскрипте (ссылка в настройках "примеч.для Оперы"), но сделаны довольно кратко и с одной иллюстрацией. Здесь посмотрим на вопрос шире, чтобы пользователи Оперы и разработчики юзерскриптов для неё имели инструкции под рукой и полностью понимали широту вопроса. Заодно, описаны места установки юзерстилей. Для тех, кто всё это знает, полезно будет посмотреть абзац выводов с 2 замечаниями в самом низу.

Реинкарнация кнопки «Читать все хабы» с возможностью вернуться к чтению избранных хабов (блогов); работает при авторизации; настройки выбора переносимы через JSON.

Эту кнопку «сломали» и пообещали, что «насовсем», разработчики сайта 14 марта 2012 года. Но свято место пусто не бывает, и появился её ослабленный клиентский «дух».

Скрипт сохраняет все ваши настройки блогов в одной большой JSON-строке, которая запоминается в хранилище браузера (не потеряется при сбое питания) и которая может быть вытащена для экспорта (кнопка «Импорт-экспорт») в другие браузеры и компьютеры (ею же можно воспользоваться, чтобы «посмотреть глазами других»). По кнопке-переключателю «Все/Свои» делается лёгкий выбор между всеми блогами или своими избранными. Фактически, это замена прежнему режиму «Читать все», убранному с сайта. Другие имеющиеся решения требуют чем-то пожертвовать: выбрать «всё» вручную (это означает — потерять свои избранные блоги), читать habrahabr.ru/posts/collective и habrahabr.ru/posts/collective/new (будут пропускаться блоги компаний) — обсуждение в QA.

Перейти на страницу скрипта. Сразу скачать скрипт habrAllHub.

Выкладываю обещанный небольшой обзор нововведений и небольших, на мой взгляд, недоделок (не багов), которые постарался исправить в пользовательском скрипте.

1) Рассмотрение сайта под углом вёрстки и скриптов породило ряд замечаний и наблюдений, которые будут интересны всем — и разработчикам фронтенда, и остальным пользователям сайта.

2) Небольшое, чисто деловое сообщение: скрипт, поддерживающий вёрстку и делающий различные улучшения интерфейсов на Хабре, HabrAjax, уже выложен на свой хостинг с исправлениями, учитывающими новую вёрстку. Подверглись обновлениям, конечно, и стили ZenComment.

Всем известны проблемы работы с революционной средой рабочего стола Unity в Linux Ubuntu. В пользовательском интерфейсе происходят значительные изменения и эксперименты, приводящие к очередным «волнам эмиграции» на другие системы и сборки. После некоторого периода работы в среде Unity в Ubuntu 10.04 LTS (Long Time Support) и вполне успешного привыкания к реалиям Unity, пришлось вернуться в среду новой сборки — 11.10. Тут ожидал сюрприз, поскольку число поддерживаемых тем рабочего стола уменьшилось и настройки системы стали как-то более обрубленными. В перечне тем отсутствовали виды окон с правым расположением кнопок закрывания, что привело к поиску других оболочек, каким бы прогрессивным ни выглядело существование в среде Unity. Более года назад вышла версия рабочей среды Xfce 4.8 со стабильными положительными отзывами, поэтому логично было попробовать её вместо Unity. Как альтернатива, опробовалась среда LXDE, сравнимая по легковесности с Xfce и весьма похожая на неё по организации работы со столом.

Речь пойдёт о проблеме кроссбраузерного представления многострочных данных в javascript. Это могло не быть проблемой, если бы Firefox умел работать с функциями так же, как другие браузеры. Единый кроссбраузерный способ представления так и не найден, несмотря на 2-дневные усилия. Если бы он был, его, наверное, уже стали применять на сайте userscripts.org. Пока что имеется раздельный способ представления: один — для юзерскриптов Firefox, другой — для всех остальных. Также, для Scriptish существует возможность чтения формата метаданных (директив), что не охватывает произвольного формата, но решает задачу, чаще всего встречающуюся в юзерскриптах. Не рассматриваем решение с 2 запросами на сервер, с обращением к внешним HTML, XML и с дублированием данных, потому что хотим данные и скрипт получить в одном запросе, в одном файле, и файл этот — типа «text/javascript».

Разработка юзерскрипта HabrAjax преодолела свои очередные проблемы с кроссбраузерной поддержкой новых функций и создала плеяду статей (7 штук, ещё не опубликованных) по разным вопросам, связанным в основном с юзерскриптами и их кроссдоменным доступом. Все эти статьи нетривиальны, в интернете их темы освещаются частично, а некоторые не освещаются даже в описаниях багов браузеров (или автору неизвестны иноязычные решения). Статьи придётся выкладывать в произвольном порядке, потому что нет оснований как-либо их упорядочивать — каждая связана с другой лишь по тематике. Сейчас я приведу анонсы статей, без ссылок, чтобы сложить представление, о чём пойдёт речь в дальнейшем. Реализация — в HabrAjax, но там довольно много прикладного кода, не слишком хороший пример для демонстрации. Поэтому для каждой статьи будут коды с более адаптированными примерами, насколько возможно.

Была на Хабре статья о реализации табов на чистом CSS, которую автор удалил (видимо, из-за незавершённости решения), скрыв при этом все комментарии. Благодаря авторской наработке я устранил один из недостатков юзабилити в решении и опубликовал его в комментарии. Поведение табов стало обычным, по клику на табе (или кнопке, смотря как назвать), он выделялся и оставался выделенным после отведения мыши. Чтобы не терять из виду то и другое решение и для продолжения их развития, приведу копии их. Решение автора makzimko скопировано в песочницу (IE9+), сохранив все необходимые свойства. Дополнение — в модификации там же (от IE9+). Новое (UPD3) кроссбраузерное решение с поддержкой от IE6 — на jsfiddle.net и единым файлом. Наконец, при том, что Opera 11.61 работает, для поддержки Оперы 11.50 и младше понадобилось небольшое исправление (UPD4).

(Опыт успешной борьбы с ветряными мельницами.)

C завидной регулярностью в комментариях встречаются оборванные на полуслове сообщения с приписками о том, что «извините, само отправилось», "сорвалось", и продолжением мысли. Иногда говорят, что разгадали причину такого поведения сайта. Поэтому хочу сообщить, что я не одинок в своей догадке, и более того, около полугода назад я решил эту проблему с помощью юзерскрипта. С тех пор ложные отправки у меня прекратились, но я не мог быть уверен, что причина ложных отправок только в этом, поэтому опыт использования скрипта и догадки других пользователей должны были это подтвердить.

Во время анализа стилей сайта в своё время было обнаружено, что в стилях и скриптах предусмотрено то, что должно быть по правилам юзабилити — показ режима ожидания ответа от сервера — но оно никак не проявляется визуально. Работает это только на страницах с новой вёрсткой — почти на всех, исключая некоторые специально оформленные (в старой вёрстке, принятой до октября 2011) страницы блогов компаний. Так давайте же использовать то, что сделано!

Поэтому при создании юзерстилей ZenComment был задействован стиль ожидания. Он появляется после того как пользователь нажал на отправку оценки и исчезает в момент прихода успешного ответа от сервера. Выглядит он не очень впечатляюще, нет крутящихся стрелок, потому что создавать особые эффекты — уже нет места в файле, который должен быть ограничен 65 КБ на все стили по правилам хостинга. Признак проявляется просто в виде бледно-жёлтого фона кнопки оценивания. Если, например, связь с сервером потерялась, фон кнопки ответа так и останется жёлтым. Без юзерстилей в этом случае ничего не происходит визуально.

В сборнике скриптов для сайта HabrAjax 0.79 появилась возможность сворачивания аннотаций в ленте для указанных читателем авторов и по совпадению указанных строк (можно назвать, сворачивающих строк). Например, если читатель хочет выделить произведения некоторого автора, показывая только название статьи в любой ленте (главная, избранное, поиск), он вносит имя автора в специальный список и включает настройку сворачивания. Или — сворачивать аннотации, если в названии или в тексте аннотации встречается некоторая последовательность символов (не слов, а символов). Второй фильтр работает на регулярных выражениях, поэтому читатель фактически задаёт не строки, разделённые запятыми, а тела регулярных выражений, с игнорированием размера букв, но с учётом всех символов и пробелов.

В ночь перед последним выходным длинных зимних каникул замечена самая низкая температура посещаемости сайта. В ленте «Все — новые» — 10 статей (это число зависит от подписок на ряд закрытых блогов, но, всё же — показатель). Но главный показатель рекорда — это порог вхождения в список «Лучшие за 24 часа» из 10 статей. В эту тёмную зимнюю ночь порог вхождения в этот список «Топ10» спустился до 13 единиц! Скриншот, зарегистрировавший это событие в 6 часов утра, находится ниже.

Перечитывая блог «Иконосказ» и имея в виду первых трёх авторов, я подумал, что мир идёт к упрощению и все соревнуются в простоте. Уходя от Яблочного и плиточного стилей, в которых нет ничего плохого :), я обратил внимание на записную книжку и за 8.5 минут нарисовал, нет, подарил миру ещё одну непревзойдённую коллекцию. На этот раз я решил отказаться от цветов, потому что какие же в блокноте цвета? Любители минимализма могут сразу уменьшить полученное на 50%, а если не знают, пускай пишут письма, я им расскажу, как это делать.

С удовольствием выслушаю критику, отвечу на вопросы и дорисую другие необходимые вам буквы.

Как известно, Хабр использует «олдскульные» атрибуты тегов, допускающие форматирование текста и рисунков в статьях и комментариях авторами. Среди таких тегов оказался один, отсутствующий в стандартах W3C. Это — <img align=«center»>. Обнаружилось, что часть авторов «наивно» пользуется этим атрибутом, потому что другого редактор Хабра просто не предоставляет. Как ни странно, в части браузеров этот атрибут на Хабре поддерживается, хотя эксперименты с чистыми тестовыми страницами показывают, что чудес нет, в img он не работает.

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

Скрипт HabrAjax, который задуман для поддержки юзерстилей, в котором реализованы функции, совпадающие с пожеланиями об интерфейсе, за последние несколько дней после публикации стремительно приближается к релизу. Сделана и сносно работает вся основная функциональность на страницах с различной вёрсткой, что составляло основную долю трудоёмкости. Работают QA и старые страницы (Избранное, Свои, блоги компаний, поиск) — везде работает подгрузка статей и комментариев без перезагрузки ленты анонсов.

Добавлена ещё одна важная часть скриптов — возможность корректной работы без применения особых стилей ZenComment (в заметке ниже проливается свет на этот загадочный режим), в старом (существующем сейчас) дизайне страниц. Именно этого не хватало 90% пользователей, которые были не готовы перейти на новый дизайн вместо привычных очертаний и размеров старого.

Поскольку администрация сейчас внимательно смотрит за предложениями, чтобы некоторые из них реализовать, а системы тикетов на сайте нет, я решил собрать популярные чужие предложения и некоторые свои в один список, обосновать и предъявить на суд читателей в одном месте. Предложения сгруппированы, чтобы создать какую-то видимость системы тикетов и было удобно называть проблемы в сокращённом виде. (Список не претендует на полноту, истину и всеохватность.)

Скрипт и стили для Хабра выложены в пользование и дальнейшее развитие. Количество «фич» довольно большое, поэтому, чтобы не затягивать дальнейшую разработку, скрипты и стили проработаны до необходимого минимума. Бесконечно улучшать просто нет смысла, потому что на сайте постоянно добавляются новые коды и вёрстка, старое ломается, функции приходится восстанавливать. Поэтому идея выкладки в формате «беты» — в том, чтобы различные пользователи, вдохновлённые возможностями оболочки (скриптов и стилей), прониклись идеей небольших доработок «под себя» этого основного скрипта, и тогда общая работа пошла бы заметно быстрее. Ведь совсем нетрудно и интересно потратить вечер для красивой «фичи» на 30-50 строк кода, но когда таких фич набирается 20 — стольких вечеров становится не хватать и требуется подключение сил других разработчиков.

В сети и на github появилась разработка парсера Esprima, позиционированного на парсинг вообще и для javascript в частности. Он написан на Javascript и переводит скармливаемый текст в структуру JSON, которую затем можно анализировать, например, для препроцессирования кодов, создания сахарных обёрток для JS, автоматизированного поиска ошибок без запуска кода, преобразования языков (кросс-компиляции), преобразования серверного JS в клиентский или наоборот, для минификации кода или наоборот, для разбора обфусцированного. Но это — всё идеи для будущего. Появился архив совсем недавно (в середине ноября — первый коммит с 2000 строк кода), но уже приобрёл своих иследователей, судя по форкам. Формат парсинга совместим с Mozilla SpiderMonkey Parser API.

Константно-переменный дуализм.

Настройки у программ существуют давно, от самых древних ассемблерных программ, имеющих в своём коде константы в качестве настроек. Обновление таких программ происходило с полной заменой кода, поэтому изменение системы настроек не влекло отрицательных последствий. В худшем случае, приходилось переучиваться пользованию интерфейсом. Положение стало меняться при преемственности типов данных и настроек программ. В своё время Microsoft уделяла огромное внимание совместимости программ и данных в операционных системах, в чём была их сильная сторона. Да и сейчас поддержка режима XP Mode — это продолжение политики совместимости. Применительно к веб, пользователям часто встречаются ситуации, когда данные и настройки у них остаются от прежних версий (в куках, в сторонних базах данных), а версия программы — на сервере или скрипт на клиенте — изменяется. Возникает проблема совместимости версий программ и данных и необходимость выработки некоторой политики поддержки совместимости. Новая версия может не устроить по совместимости с браузерами (из-за багов или неполной поддержки), тогда откат к прежней на время исправления багов не должен сопровождаться потерей или искажением настроек, при том, что количество их может меняться с изменением версии.

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