HabrAjax идёт навстречу старому дизайну

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

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

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

    Для совместимости пришлось дописать небольшую группу переходных стилей, которые подгоняют нововведения скрипта под старый дизайн, потому что все они изначально заточены под новый. Кое-где получилось не очень изящно — например, горизонтальная полоса прокрутки в фрейме половинной высоты, но что делать, если взялись использовать старый вид страницы — не менять же её полностью на новый. Зато, получилось так, что, включив Sylish со стилями (в Firefox), мы одним движением руки переходим к новому дизайну, построенному на стилях ZenComment. (В других браузерах будет то же, но с несколько большим числом манипуляций с переключением стилей.)

    Что такое «Дзен»?


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

    1. Старый дизайн со скриптом HabrAjax. Он посеет сомнения в правильности смотрения через призму бытия.

    2. Новый дизайн в стиле «Компакт» — он тоже заложен в стили ZenComment и включается в них 2 способами — правкой 1 символа в стилях или переключением режима через HabrAjax. И только после этого, после освоения «Компакта» и уверенной работы в нём, рекомендуется постигать «Дзен». И мне тоже больше нравится Компакт — видимо, я не дорос ещё до Дзена.

    3. Что такое «Дзен»? Как и все подобные аллегории, Дзен в нашем случае — это состояние показа комментариев, когда на экране не остаётся ничего лишнего — только серое поле и текст. И линии, описывающие структуру.

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

    «Север» — самый скрытный режим. Виден текст сообщений и серые поля зазоров между ними. Ни имён, ни дат, ни оценок. Мышь нужно навести на тонкую полоску слева от колонки комментариев, примерно 6 пикс. шириной. (Или на заголовок комментариев.)


    «Восток» — белые поля. К комментариям добавляются имена авторов и больше ничего. Если не считать тех же вспомогательных линий для структуры дерева комментариев. Мышь надо наводить справа или убрать совсем из окна.


    «Юг» — наибольшее благоприятствование информации, видим всё для сообщения и предыдущих сообщений ветви, если навели мышь на заголовок сообщения. Оценки, кнопки, дата, подпись — всё есть. Соседние ветки покрыты серым мраком, только текст, как для «Севера».


    «Запад» — если навести не на тонкую полоску слева, а чуть правее, до 20 пикселей, высветится только первый уровень с автором и датой, остальные имена будут скрыты, но показаны все оценки ветви. Да, это то же, что «Юг», но для корня ветви.


    Для наглядности, показаны области различных режимов Дзена различными цветами. Обращаем внимание, что «Восток» охватывает всё вокруг, а «Север» занимает две прямоугольных области, а не одну, поэтому прокруткой мыши легко находиться в режиме «Север» (равно как и «Запад»).


    Вот такая философия, очень непривычная с этим мельканием серых полей. Может быть, в конце концов, мы остановимся на белом фоне Дзена. Ничто не мешает переписать несколько цветов полей, чтобы «Север» был таким же белым, как «Восток», но исчезли бы имена авторов.

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

    Можно заметить, что старая вёрстка у блогов компаний не содержит режима Дзен. Совершенно верно, потому что он создавался в октябре 2011-го, с момента появления новой вёрстки и на базе неё. Новая вёрстка Вопросов-Ответов тоже его не содержит. Возможно, этого будет не нужно.

    Но это потом. Сейчас мы — на первой стадии постижения Дзена. Мы включаем старый дизайн. Точнее, его не надо включать, он есть, и новые стили ничего к нему не добавят. Нужно установить HabrAjax версии 0.73 и выше. Если новые стили ZenComment установлены, отключите их строкой меню Stylish «Turn all styles off». Перезагружать страницу не нужно, всё новое исчезнет. Останутся только скрипты HabrAjax.

    Дао старого дизайна


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

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

    Даже в нынешней реализации предполагается некоторое развитие функциональности. Скрипт будет работать как основа для скриптов-плагинов, пользующихся базовыми функциями основного скрипта. Даже существующий набор функций хорошо было бы разбить на 5-6 плагинов, чтобы ломка строения сайта не приводила к долгим провалам в работоспособности. Тогда плагины восстанавливались бы по очереди, и каждый плагин был бы проще одной целой программы. Новые функции также будет проще добавлять через плагины, а трогать старые — только по необходимости подстройки к сайту.

    Дизайн сквозь призму HabrAjax — классический вариант


    Пусть мы стремились сохранить старый дизайн, но в некоторых местах его пришлось подправить, чтобы изменения смотрелись не так плохо. Самое заметное изменение — это расцвечивание комментариев по авторам и по их количеству. Это свойство успело собрать много комментариев из-за своей пестроты. Если мы хотим оставить (не отключать) это свойство, надо как-то распорядиться с расцвеченными кнопками «Ответить», чтобы они не смешивали своим видом структуру ответов. Не придумано ничего нового, как то же решение, что было в Дзен-комменте: поставить кнопки слева и вертикально. Они своим видом создают «стенку» у сообщения и хорошо выделяют сдвиги уровней. Можно мириться с пестротой, если ничего нового не придумано.

    Прежние фото были из Firefox, теперь перейдём для разнообразия, к Хрому. Выглядят страницы с комментариями приблизительно так:


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

    Когда вы ощутили в себе силы ступить на следующую ступеньку, для начала потребуется включить настройку «встроенные стили ZenComment» (или вместо этого подключить внешние стили), а чтобы не попасть в сложный режим «Дзен» — ещё включить "режим комментариев «компакт» ". (Всё это пока что из-за версии «беты» нужно делать прямо в коде скрипта, ставя 0 или 1 для переменных настроек.) Будет всегда белый фон во всех положениях мыши. От движений мыши зависит только появление кнопок ответов. Так выглядит режим "Компакт":


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

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

    UPD 6.01, 12.00: Выложена версия 0.74 HabrAjax и 2.04 ZenComment.
    Кроме плановых доработок, основные из которых — завершение покрытия скриптом вопросов и ответов (QA) и сохранение настроек — несколько правок багов, которые подсказали комментаторы и багрепорты в Реформале. Так, сделаны замеченные баги в Опере, поправлен небольшой баг в Хроме по автоопределению наличия юзерстилей и вёрстка в нём.

    Ниже — вид ленты QA с подгруженным вопросом и ответами (после того как кликнули по кнопке «N ответов»).
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

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

    Комментарии 24

      +18
      Хорошо работает. Но выглядит неприятно, простите. Мне как человеку с расстройствами цветовосприятия просто больно смотреть.
        0
        Если Вы про гамму расцветки авторов, то это все упоминают. Её можно в настройках отключить и не пользоваться. Если же хочется, но с другими цветами, то в скрипте есть переменная — colors. Она содержит 20 цветов. Можно заменить её на оттенки серого или взять закомментированные 8 цветов, или выбрать некоторый оттенок. Проблема будет в том, что чем меньше размер палитры (на цветовом кубе), тем хуже различимы цвета, а для экспериментов я решил выбрать побольше цветов, а эстетику навести потом. Были бы очень полезны конструктивные предложения по выбору палитры или по другому способу различения авторов (рамки, подчёркивания, курсив), через кнопку «баги», висящую справа или как-нибудь ещё. Ещё важно понять — а нужен ли такой способ сортировки вообще? Мне он лично помогает сразу определить, кто общался в ветке наиболее активно, писал ли что-то автор (первый цвет).
          +5
          А вы не пробовали спросить у людей, которые занимаются графикой? Есть даже предмет такой — колористика, на нем учат правильно подбирать приятные цвета.
            +1
            Отправил раньше, чем хотелось.
            Еще, мне кажется, слишком тесно блоки текста расположены.
              0
              То, что Вы спрашиваете — это о генераторе цветовых схем. Вот один из них: colory.ru/colorgenerator. Но у меня первая задача была другой — запрограммировать максимальное число различий простым способом, не усложняя алгоритм, не вводя 2 параметров, а только один — цвет подложки светлых оттенков. Это ограничивает число гармоничных палитр. Но в конечном счёте, думаю, надо будет кодировать различия комбинацией 2-3 параметров. Например, 1 параметр — цвет подложки (4-5 цветов), другой — сочетаемый цвет подчёркивания. Достигнуть приятного вида будет легче при большом числе комбинаций.

              Блоки текста сделать ближе — в этом была и есть основная задача стиля. Найти читаемый предел, убирая воздух из страницы. Там даже вертикальные пробелы сжаты, потому что воздух. Причина? Представим, что мы когда-то можем позволить себе пустоты, и прекрасно. А когда-то не можем. Вопрос на засыку: что будем делать во втором случае? Сможем лучше ответить, потренировавшись заранее.
                0
                Слишком уж много воздуха убрали, имхо — нереально и неприятно читать стало.
          0
          В Opera 11.60, сразу после окончания загрузки, выскакивает alert с текстом: "habrAjax = h;_err_"
            0
            В FF 9.0.1, обрезана почти целая буква в комментариях. С текстом самой статьи все в порядке.
            i41.tinypic.com/2cwlk7m.jpg
              0
              Только не пойму. При установке приложения в Chrome:
              «Ваши личные данные на всех веб-сайтах»

              Объясните параноикам: зачем приложению данные на веб-серверах кроме habrahabr.ru?
                0
                На самом деле это проблема хрома. Он игнорирует директиву @include, для хрома надо заменять на @match.
                  0
                  Проверил сейчас прямой тестовой установкой алерта в скрипт для Хабра в Хроме (после того как он загружен в браузер, но, наверное, разницы нет). Открываю, например, Яндекс. Этого алерта не вижу. Открываю Хабр — вижу. Следовательно, в Яндексе скрипт для Хабра не запускается, следовательно, директива @include работает, значит, @match писать не нужно (?). В каких случаях @include не срабатывает, не могли бы Вы дать прямую ссылку на описание проблемы?
                +4
                ИМХО…

                У Вас нагромождение получилось — нет свободного места. Пространоство между строками, и вокруг параграфов слишком мало. Какие-то цвета противные… Вообщем, впечатление не очень.

                Все эти «Северы», «Запады» и прочее мне тоже не очень нравится. Они создают излишнюю сложность в такой простой по-сути вещи, как комментарии; отвлекают.
                Продемонстрирую. На этой www.fighunter.com/?page=blog_page&b=42 странице есть комментарии. Вокруг понаклеено всякого мусора, который действительно отвлекает. «5C», флажок, возраст, какие-то мордочки, непонятная голосовалка «FLIGS», и пр. Разве это нужно?
                  0
                  Про нагромождение я писал выше, это идейный подход, убрать пустоты. А стили Дзен для того и придуманы, чтобы скрыть многочисленные значки на Хабре (примерно как по ссылке вашего примера), но ведь когда-то они нужны. Поэтому есть режим скрытия, а есть режим полного просмотра. Чтобы это вживую увидеть и попользоваться, были написаны стили (дописаны правила в имевшиеся юзер-стили), а не скрипт с кнопками и режимами, что было бы сложнее и больше подвержено поломкам. Это не обязательно окончательная моя точка зрения на дизайн, всё развивается.
                  +1
                  Привет, Хабрякс!
                    0
                    Простите, вы предлагаете использовать мышь?! Что за атавизм? А как же тачскрины? А как же ноуты? Я вообще мышью почти не пользуюсь.
                      0
                      Но ведь тачскрин эмулирует мышь? Достаточно протянуть или коснуться определённой области (вне ссылок), и будет тот же эффект. Единственное, узкая полоса «Севера» слева заточена под мышь, она 6 пикселей всего, а для тачскринов надо пошире. Но пока нет времени и возможностей поддерживать всё сразу. Код открыт, каждый может принять участие в развитии, я добавлю функции к себе или можно дописать корректирующие стили и скрипты самостоятельно и независимо. Я стремлюсь к стабилизации API своего скрипта.
                      0
                      А ваш скрипт habracut — он ещё жив? Он занимался практически тем же, чем занимается и этот скрипт, только не имел всю эту массу всяких ненужностей.
                      Нынешний скрипт поломал мои юзерстили. Я-то их подправить могу, но очень не хочется этого делать.
                      Скрипт и стиль, считаю, должны быть разделены.
                      Мне не нужны не север-юг-запад-восток, ни дзены, ни какие-то индикаторы кто сколько комментов оставил. Мне удобны комментарии в таком виде, в каком они есть на хабре.
                      Я отключил все галки кроме подгрузки статей — и всё равно стиль комментариев не такой как на сайте.

                      Вердикт: unusable.

                      дуров верни стену [x]
                        0
                        Привет, помню Вас по многочисленным полезным багрепортам. Это он и есть, а все ненужности отключаются. Заложено даже отключение функции «Хабраката», но пока не работает, просто руки не дошли, а настройка такая висит.
                        Вердикт: unusable.
                        Конечно, это всё-таки бета, а функций очень много. Кто может смириться и учитывать баги, тот юзает. Переключать настройки нужно пока вручную прямо в скрипте, а не галками, как я везде написал (на странице скрипта тоже).
                          0
                          Если можно тогда до конца доразделите функции в скрипте, чтобы стили никакие особенные не применялись по умолчанию, мне вот пока только HabraCut из всего набора функций нравится.
                          Монитор у меня огромный и стиль написан для хабра, чтобы был по всей ширине. Мне экономия места ни к чему.
                          И да, вердикт всё-таки лучше так: unusable… yet :)
                          Буду следить за развитием вашего скрипта и слать баг-репорты по нему, если найду какие-то неизвестные пока вам баги. Кстати, для таких дел можно было бы и страничку на гитхабе для скрипта завести — всё же удобней, когда все issues открыты и известны для всех, чтоб не было многократного повторения известных вещей разными людьми (юзеров то у скрипта много).
                            0
                            слать баг-репорты по нему

                            Я для этого завёл страницу на Реформале, туда пишут (кнопка «баги», висящая справа, тоже можно отключить и ходить напрямую).
                            чтобы стили никакие особенные не применялись по умолчанию

                            стили по умолчанию, всё-таки, нужны, потому что скрипты делают то, что не предусмотрено в стилях, и хабракат тоже. Вся эта группа стилей написана как раз под совместимость скрипта с традиционным дизайном Хабра и начинается в коде со слов "//поддержка отсутствия стилей:". Если всё же и это плохо — давайте скриншоты, версию браузера и будем смотреть (версию браузера удобно вызвать через окошко Реформала, это моя добавка к их виджету).
                        0
                        Комментарии немного обрезаются справа. (Chrome 16.0.912.63 m)
                          0
                          Спасибо, дело было в одном стилевом правиле в скрипте,
                          .comment_holder > .entry-content, .comment_item .message {
                              border-left: 4px solid transparent;
                              margin-left: -4px !important;
                              margin-right: -3px !important;
                              padding: 7px 0 5px 3px !important;
                          }
                          

                          Нужно — padding: 7px 3px 5px !important;
                          В ближайшем следующем обновлении версии юзерскрипта будет исправлено.
                          0
                          Выложена версия 0.74 HabrAjax и 2.04 ZenComment.
                          Настройки можно сохранять через интерфейс.
                          С технической стороны, в Fx настройки сохраняются и видны в about:config, в остальных — в хранилище.
                          Но заглядывать туда не обязательно — кнопка ">" внизу приобрела функции экспорта-импорта-удаления настроек. По ней можно увидеть всё, что лежит в хранилище (сериализованный хеш).

                          Кроме того, что сделаны плановые правки, спасибо замечаниям о багах здесь и в Реформале.
                          Опера стала работать не менее нормально, чем остальные.
                            0
                            Выложена 0.75 (0.751). В ней:
                            1) центрированные рисунки при принудительном кате — прилеплены слева;
                            2) фикс бага Firefox по показу центрированных изображений — теперь они по центру и в Fx;
                            3) отключение режима хабраката в настройках (подгрузки статьи без перезагрузки страницы).
                            В общем, всё написано на странице скрипта.

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

                            Самое читаемое