Статья описывает практический пример удаления длинных теней с иконок с помощью юзерстилей или юзерскриптов. Имеются ссылки на работающие на сайтах (habrastorage.org, toster.ru, tmtm.ru) стили и скрипты. UPD 31.05.2014: добавлены стили на habr.ru и freelansim.ru. Загружать здесь — найти среди файлов, выбрать Raw, прямая ссылка.

Пришельцы (длинные тени) появились на окраинах нашего города. Если представить их высоту в лучах заходящего солнца, сознание отказывается строить эту картину.

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

Было время разбрасывать сайты и есть время собирать сайты. Сайты собраны в Tmfeed, Tmfeed собран в HabraDarkAge. Так, получил целостность Инь, как раньше получил его Янь. Янь (Ян, ZenComment) также доработан до лучшего представления информационного блока с числами просмотров и оценок.geek.ya

Вот как это выглядит.

В скрипте HabrAjax (113.2013.04.20) добавлено удобное редактирование исправлений в собственных статьях. Достаточно просто выделить уникальный участок текста и среди контекстных кнопок выбрать кнопку <E>. В фрейме половинной высоты откроется поле ввода с выделением именно на том месте, которое было выделено.

Также, обеспечена поддержка браузеров Iceweasel (на основе Fx3.6) в Дебиане и возвращена поддержка Firefox 3.6 в остальных ОС (но там будет иметься проблема установки старой версии Greasemonkey, актуальной для 3.6). Потенциальная аудитория — 1% от остальных пользователей Firefox.

Аудитория пользователей HabrAjax и направленность статьи

Среднее число пользователей скрипта — 40-60 человек. Поэтому, если статью прочитает 3000 человек, то практический интерес она может иметь только для 1.5% читателей. Пусть, ещё 10% будут иметь желание попробовать скрипт. Но не более. Потому что скриптами вообще пользуются немного людей. Остальным — достаточно узнать, что функции, сделанные для удобства пользования, имеются в том или ином скрипте.

Если надо что-то почитать с Хабра, а сайт не работает (как было за последние пару часов), раньше было только ожидание или переход на другие ресурсы. Сейчас в скрипт HabrAjax добавилось распознавание пустой страницы, которая бывает при 500-й ошибке, и предложение посетить страницы копировщиков. Страница — совсем без оформления, потому что стили сайта ведь тоже не подгружены. Но это — лучше, чем наблюдение пустой страницы и поиск аналогичных решений самостоятельно. Если просматривается статья, лежащая в Гугло-кеше, она читается (со стилями ZenComment, если они установлены). Как показывает опыт, страницы довольно быстро попадают в гугло-кеш (минуты — десятки минут), поэтому имеем слепок сайта незадолго до аварии.

Разница лишь в том, что «заход» на сайт через Гугло-кеш происходит из-под неавторизованного пользователя. Поэтому ленту /feed так просмотреть будет невозможно, а переход по ссылкам каждый раз будет сопровождаться предупреждением, что сайт не работает.

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

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

В последнее время очень большие кнопки, предусмотренные для пальцевого интерфейса на телефонах и планшетах, занимают не всегда традиционную для себя нишу компьютерных мониторов. Для удобства работы с сайтом Хабра в традиционной десктопно-ноутбучной среде, оттуда удалён плиточный дизайн с помощью новой редакции юзерстилей ZenComment 4+. Все новые меню поместились 3 невыразительных кнопки в верхних уголках окна, постоянно находящиеся на виду. Такой подход был традиционен для юзерстилей ZenComment. И в новом дизайне Хабра они традиционно пережёвывают громоздкое управление, оставляя раскрывающиеся меню.

Движение интерфейса сайта к бесшапочному — похвально, но вместе с ним на сайте появилось «левое меню» — широкая вертикальная полоса с несколькими кнопками во всю высоту окна, заслуживающее лавры интерфейса Unuty в Ubuntu.

Лавры лаврами, а место на экране эта полоса съедает, которое не бывает лишним. Ведь к кнопкам обращения происходят, по опыту работы с сайтом, относительно нечасто, поэтому уменьшение площади открытых кнопок не сильно проигрывает в затратах на их нажатие, но даёт больше полезной площади экрана. Кроме того, юзерстили опровергают мнение авторов сайта, что ему для просмотра нужно ширины не менее 1030 пикселей, не считая полосы прокрутки. Сайт легко укладывается в 380-400 пикселей ширины, даже с сайдбаром.

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

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

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

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

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

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

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

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

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

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

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

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

Одновременно эти кнопки Гугла — лайк и шаринг — немного избыточны, хотя выполняют разные функции. По новой кнопке сайта читатель может быстро написать отзыв (поле ввода — высотой не более 7 строчек, рассчитано на небольшие комментарии), к которому прикреплены ссылка и 2 строчки начала статьи.

Обновление. Как известно, раньше потоки статей и вопросов-ответов существовали раздельно, а теперь авторизованные пользователи могут использовать вкладку «Всё» для просмотра смеси заголовков тех и других потоков. С юзерскриптом HabrAjax новой версии 0.85, от 25 апреля возможно смотреть не только заголовки, но и содержание без перезагрузки страниц. Достаточно кликнуть по заголовку или по кнопке ответов. Просмотрев статью, вопрос или комментарии к ним, по широкой кнопке «Свернуть» сворачиваем просмотренное.

Необходимые переделки затронули и ZenComment — юзерстили для Хабра.

Решение рассматривается (пока) только для одного сайта — того, на котором мы находимся. Идея появилась в результате того, что один пользователь сделал юзерскрипт, который переадресует страницу на кеш Гугла, если вместо статьи видим «Доступ к публикации закрыт». Понятно, что это решение будет работать лишь частично, но полного решения пока не существует. Можно повысить вероятность нахождения копии выбором результата из нескольких сервисов. Этим стал заниматься скрипт HabrAjax (наряду с 3 десятками других функций). Теперь (с версии 0.859), если пользователь увидел полупустую страницу, с которой можно перейти лишь на главную, в личную страницу автора (если повезёт) и назад, юзерскрипт предоставляет несколько альтернативных ссылок, в которых можно попытаться найти потерю. И тут начинается самое интересное, потому что ни один сервис не заточен на качественное архивирование одного сайта.

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

Иногда об этом удаётся забыть, если размер поля ввода предоставлен в основном удовлетворительный. В 3 браузерах из 5 есть даже место для изменения размеров, которое верстальщик, оглушённый указанием свыше, иногда отключает (textarea{resize: none}). Есть и другие способы затруднить жизнь пользователю. И тогда он уходит берётся за скрипты и стили.

Все, кто привык к полноценно оформленным страницам сайтов, предпочитает вид «прибитого» (прилипающего, sticky) к низу футера страницы. Но есть в интернете две беды: нерастущие вниз поля ввода и неприбитые (к низу окна) футеры. Например, когда открываем короткие по высоте страницы типа habrahabr.ru/settings/social — сразу бросается в глаза, что информация, призванная быть в нижней части окна просмотра, прилипает к содержанию и находится где-то посередине, а то и в верхней части окна, когда внизу — пусто.

Так, вместо того, чтобы .
Данное пособие для начинающих верстальщиков покажет, как за 45 минут сделать «прибитый» футер, исправив недоработки даже такого уважаемого издания, как Хабр, потягаться с ним в качестве исполнения своего перспективного проекта.

Из-за того, что под название каждой статьи в футере отводится 33%, а длина названий различна, появляется пара-тройка неприятных эффектов:
1) пустоты, если названия короткие, а соседнее — длинное;
2) названия прилипают к верхней кромке блока;
3) кликать нужно только на текст, а не на весь блок.

Например, здесь в средней ссылке, как и во всех, надо целиться в текст.

HabAjax — скрипт, который существует около года, выполняет много мелкой и крупной работы по оформлению страниц сайта. Начавшись приблизительно с 20 функций обработки страниц, он развивался и получал новые возможности. Поддерживается 3 основными браузерами — Firefox, Opera, Chrome и несколько отошёл от поддержки 4-го браузера — Safari. Его основная цель — представить страницы более компактными и с меньшим количеством графического мусора — элементов, без которых можно обойтись.