Pull to refresh

Вышла «бета» скрипта HabrAjax

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

Что заложено в скрипты и стили?


0. Идея раздельного пользования стилями и скриптом.
Да, можно загрузить только стили (ZenComment) в Stylish (Firefox, Chrome) или в настройки Оперы, или В IE, или в Safari, а можно вдобавок к ним или ВМЕСТО них — установить юзерскрипт (HabrAjax, тоже в любой браузер, но не IE), который позволяет запустить и оценить все стили (включив настройку), но будет заметно срабатывание скрипта в первые 1-2 секунды после загрузки, так что качественнее, всё же — то и другое ВМЕСТЕ.

1. Идея компактности текстов.
Много белого места — тоже хорошо и даже отлично, но лишнее нажатие кнопки PageDown начинает отвлекать от содержания. Под лозунгом «Читать, а не скроллить!» построены стили и преобразован внешний вид сайта. Например, на нужды заголовка отведена ровно одна строка (22 пикселя) — а зачем больше? Там помещается логотип, поиск по сайту, два меню и все ссылки из них.

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

3. Подгрузка статей без перезагрузки страницы.
Основная возможность скрипта, с которой он начинался. Кликая на «Читать далее», мы прямо в тексте страницы получаем просмотр статьи и комментариев (по отдельности) и возможность сворачивания их. (Некоторые страницы — QA, избранное, «Моё» — пока это делают не очень качественно, но читаемо; доделать их — вопрос времени.)

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

5. Убрать кнопки «лайков», добавить кнопку «Гугл Плюс».
Как в аннотациях, так и в отдельные статьи добавляется кнопка G+, если такая возможность включена в настройках. Интересно наблюдать, что много людей «плюсуют» статьи (через аддон браузера), хотя кнопки такой на Хабре нет.

6. Убрать цифры текущего года.
В дате текущего года или последних 8 месяцев удаляется год. Ведь мы же все его знаем? (Нет? Тогда отключается в настройках.)

7. Поиск на сайте по Гуглу и Яндексу.
Был у кого-то такой аддон, давно уже не работающий. Насколько полезна будет такая возможность — неизвестно, но можно попробовать. Заодно, по нажатию Ctrl или Shift результаты поиска на любой из 3 кнопок откроются в новом окне. (А по Enter — в своём окне, а по клику на кнопке — в фрейме половинной высоты.)

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

9. Компактный режим просмотра комментариев.
Под тем же девизом «Читать, а не скроллить!» комментарии беспощадно ужаты. По поводу представления комментариев можно делать различные доработки в скрипте, но пока существует 3 режима их просмотра. Первый — совсем без стилей (не загружать или отключить аддон стилей «ZenComment»), скрипты работать будут, но кое-где потребуется доработка для качества. Второй — режим «Дзен» — комментарии очень компактны, оценки не видны и просматриваются только по наведению мыши. Третий — режим «Компакт» — чуть менее компактный и с оценками.

(К сожалению, на сайте изобилует количество вёрсток разных типов комментариев, и настраивать их все — довольно трудоёмко и бесполезно, лучше побольше пользоваться. Типы вёрсток такие: основная лента, статья из блога компании, статья из вопросов-ответов, Избранное (или свои статьи). Поэтому то, что некоторые страницы выглядят по-разному, а некоторые недоделаны — заслуга разных вёрсток и довольно частой их смены в последние 2-3 месяца. Но это не избавляет от желания читать более качественную подачу текста, поэтому они понемногу делаются.)

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

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

Ряд более мелких возможностей (все — отключаемые):


11. Сворачивание подкастов;
12. принудительный кат (в ещё большей бете и идей больше, чем сделано);
13. подкраска переводов, имён компаний;
14. расцветка авторов комментариев (до 20 цветов);
15. замена вертикальных пробелов невысокими серыми блоками в 3 пикс.;
16. скрыть отдельные блоки сайдбара (до 4);
17. скрыть весь сайдбар;
18. сайдбар не скрывать, перенести в низ страницы;
19. Замена надписей «про НЛО» более понятными мелкими текстами на сером фоне, не занимающими места. Уменьшение шрифта «внутреннего голоса».

20. Кнопки для ввода в поле ввода тегов SOURCE с языками, тегов цвета и цитаты.


21. Крайне компактный режим просмотра страниц с шириной окна от 320 пикс.
22. Отключение показа аватаров.

Где находятся настройки и как с ними работать?


Доступ к настройкам в Firefox возможен 2 способами, в остальных браузерах — одним. Ссылка под именем «HabrAjax» находится в меню пользователя (если навести на правый угол мышью). По клику — откроется список настроек. После нажатия кнопки «Сохранить» они начнут действовать после перезагрузки окна браузера или в любом другом новом окне того же браузера.

В Firefox есть дополнительно пункт меню в статусбаре, открывающийся правыым кликом мыши по иконке Greasemonkey или Scriptish. Далее — «User Scripts Commands», далее — «HabrAjax: settings».

Опыт тестирования этого интерфейса


Опыт моего пользования данными стилями — с октября 2010 и ранее месяцев 4-6 — прототипом. Опыт работы с цветовыми подсветками авторов — около 6 месяцев. Помогает различать авторов без присматривания к их нику или аватару, что, в результате, создаёт более упорядоченное восприятие информации (позволяет уменьшить шрифт для имён и отказаться от просмотра аватаров). Стили ZenComment, режим «Дзен» (серые поля) в использовании — около 3 месяцев. По отзывам добавил более разреженный стиль «Компакт» приблизительно месяц назад и пользовался им. По ощущениям, «Дзен» ограничивает просмотр оценок, поэтому кажется, что чего-то не хватает, «Компакт» не создаёт такого ощущения.

Каковы дальнейшие планы и есть ли они?


Они, конечно, есть, как близкие, так и отдалённые и не связанные с сайтом. Говорить можно долго и когда-то нужно сделать этот «роадмап», чтобы скоординировать работу с возможными энтузиастами. Сейчас не готов последовательно рассказать всё, но об основном надо упомянуть.

1. Доработка стилей QA и Избранного + Своего.
2. Управление настройками через интерфейс, а не через код, как сейчас.
3. Достичь переносимости настроек с изменением версий программы.
4. Сделать механизм плагинов — небольшие скрипты, запускающиеся при обнаружении основного скрипта, поддерживающего базовые возможности: работу с DOM, c версиями и плагинами. Определить точки подключения плагинов для различных событий (например, подгрузка статьи по Ajax).

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

Не случайно скрипт выложен перед длительными выходными — наверняка, у желающих потренироваться в скриптах и стилях найдётся время в эти долгие дни.

Ссылки:
* Стили для Хабра: ZenComment;
* Юзерскрипт для Хабра: HabrAjax.
Tags:
Hubs:
-1
Comments 13
Comments Comments 13

Articles