Если при наведении мышью в какую-то точку кнопки или пункта меню ты эту кнопку или пункт подсветил или поменял курсор мыши на «палец» — ты обязан реагировать на клик в этой конкретной точке.
Типичная схема нарушения: на клики реагирует ссылка с текстом, а подсветка по :hover’у и вообще всё оформление кнопки висит на контейнере-обёртке с margin’ом в пол-эма. Попадаешь в margin — подсветка есть, реакции на клик нет.
Лучи поноса в общем направлении Tiny Tiny RSS и Atlassian Crucible.
В предыдущих сериях: иконочные шрифты, отсутствие хинтинга в SVG-иконках.
Новый идиотский тренд: мало того, что иконки запихивают в шрифт, так ещё и задают как лигатуры. То есть слово search, набранное шрифтом Material Icons, превращается в иконку лупы.
При отсутствии соответствующего шрифта всё это выглядит как ужас:
Четыре года назад я жаловался на тенденцию запихивать векторные иконки в кастомные шрифты и стучал ногами, что надо использовать SVG. В этом году ГитХаб это сделал.
Ну и что же мы теперь имеем: мыло.
Потому что в шрифтах есть хинтинг, привязывающий тонкие линии к пиксельной сетке. А в SVG его ещё нет.
Поэтому вот они нарисовали иконки, выровняли их так, чтоб при дефолтных стилях было чётко, ну и всё. А я предпочитаю шрифт достаточного размера и интерлиньяж посвободнее, и у меня на рабочем месте они съезжают на полпикселя. Причём не все. (На домашней машине у меня HiDPI, поэтому SVG-иконки выглядят просто отлично.)
По-правильному, надо в SVG для тех линий, которые важно привязать к сетке, указывать атрибут shape-rendering="crispEdges". Но в качестве костыля можно накладывать его сверху при помощи юзерстиля. Только для тех иконок, где есть тонкие вертикальные или горизонтальные линии.
@namespace svg url(http://www.w3.org/2000/svg);
@-moz-document domain("github.com") {
.octicon-plus, .octicon-file-directory, .octicon-file-text,
.octicon-graph, .octicon-book, .octicon-trashcan, .octicon-repo,
.octicon-comment
{ shape-rendering: crispEdges !important; position: relative; left: 0.1px }
}Когда я пришёл в веб, считалось дурным тоном делать сайты, не помещающиеся в 800×600.
Потом распространились разрешения 1024×768, 1152×864, 1280×1024 и, наконец, 1600×1200. В какой-то момент вебостроители решили, что 1024 пикселя в ширину есть у всех. А у кого нет, тот лох.
Потом пошла мода на 16:10 и 16:9 и разрешения типа 1920×1080. И вот про это разрешение поговорим подробнее.
Дело в том, что при 24 дюймах диагонали, формате 16:9 и разрешении 1920×1080 CSS-пикселей (тех, которые 1/96 дюйма, а не обязательно один минимальный элемент изображения) уже начинает быть удобно работать не с одним развёрнутым на весь экран окном, а с двумя неперекрывающимися половинками. И в такой конфигурации сайту в браузере остаётся 960px ширины, с поправкой на скроллбар — ≈940px.
Сто́ит вспомнить правила приличия девяностых и двухтысячных. Сайт не должен вызывать горизонтального скроллинга при ширине окна в 940px.
(Персональные лучи поноса — Альфа-Клику, Гитхабу, Гуглу, Джире, Пейпэлу, библиотеке Сафари Букс Онлайн, всей сети Стек Эксчендж и Яндекс-Погоде.)
В вебе опасная мода: рисовать кастомный шрифт и использовать символы из него в качестве иконок. Вон GitHub уже заразился.
Почему это плохо: Чтобы это работало, пользователю приходится загрузить шрифт (а без шрифта вместо иконок показываются какие-то буквы/слоги хангылем). А для этого пользователю приходится разрешить браузеру загружать шрифты. Но этого нельзя делать, потому что тогда некоторые сайты будут отображаться чем-нибудь ещё похуже Comic Sans’а, просто потому, что какому-нибудь «дизайнеру» кажется, что его сайт лучше смотрится этим шрифтом или этот шрифт основа корпоративного стиля.
В Unicode довольно много символов, которые можно использовать в качестве иконок. Нет, котоосьминога среди них нет. Вы можете попробовать это изменить в следующей версии Unicode или же нарисовать классическую иконку в PNG или даже SVG.
Алсо внёс |http://*.2gis.ru/media/js/ в список AdBlock’а. Это вообще за гранью добра и зла — притащить на клиента даже не шрифт, а джаваскрипт, который отрисовывает надписи на canvas’е.
И нет, дизайнер сайта не имеет права на индивидуальность в части шрифтов для основного текста. Удобство для пользователя — первично, личные предпочтения дизайнер может засунуть себе в личные настройки браузера, а корпоративный стиль можно ограничить логотипом.
Понадобилось вот прикрутить к <textarea> фичу Indent/Unindent block. Достаточно простую: выделяем блок, жмём клавишу — в начале каждой строчки в блоке добавляется/удаляется пробел.
Для простоты предполагаем, что браузер реализует стандарты DOM в части выделения :)
( Read more... )Итого, финальный код:
( Read more... )Чёрт возьми, оно мне нравится. Я, пожалуй, поставлю GreaseMonkey, и пусть привязывает это ко всем <textarea> вообще.
Вздумалось это нашему начальству перестать выдавать нам зарплату наличкой, а переводить её на карточки.
Ну вздумалось и вздумалось. Собрали имена-фамилии, паспортные данные. Через время приходят конверты. Карточка, PIN-код, договор на подпись.
Вот только на карточке выбито — Yuriy Han. Две ошибки в восьми буквах. А я очень болезненно реагирую на неправильное написание и произношение моего имени (и ника).
Начинаю возмущаться. Начальник говорит, что типа правила транслитерации и всё такое, и что если написать не так, то у меня будут проблемы из-за несовпадения с загранпаспортом. Эммм, если оставить так, то у меня уже проблемы — на карточке написано чужое имя. А загранпаспорта у меня нет и в ближайшее время не планируется.
Каждый человек имеет право на своё имя.
Сходил в банк. В банке спросили: «А это существенно?» — «Дело принципа.» — «У вас загранпаспорт есть?» — «Ещё нет.» — «За границу собираетесь?» — «В ближайшее время нет.» — «А тогда в чём проблема?» — «Хочу, чтоб на карточке было моё имя, а это я как своё имя не воспринимаю.» — «500 рублей и две недели на перевыпуск.»
А ещё у них интернет-банкинг (от faktura.ru) работает только под Internet Explorer’ом. И никто не хочет поговорить об этом. И это в наш двадцать первый век, когда космические корабли поездят просторы Большого театра, а предприятия массово мигрируют на свободное программное обеспечение. (Написал по этому поводу письмо в faktura.ru.)
В то время, как ведущие эксперты по информационной безопасности рекомендуют не пользоваться IE вообще, требовать его для банковских операций — как минимум несколько странно.
У Google есть почта. У неё есть фича: рекламный блок. Это было бы ничего, если бы он был внизу. Но он справа и отнимает 189px ширины окна. К счастью, во многих браузерах есть возможность задать дополнительный stylesheet.
Открываем DOM Inspector, тыкаем в рекламу. Поднимаясь по дереву, видим, что ближайший адресуемый блок имеет класс yxEQwb. Открываем $(profile)/chrome/userContent.css (для Firefox; в IE положение дополнительного CSS настраивается через диалог Internet Options), пишем:
/*
* GMail ads 2007-11
*/
.yxEQwb { display: none !important; }Перезапускаем Firefox. Рекламы больше нет, но остался блок с ссылками New window и Print all. Их можно было бы убрать аналогичным образом, но они могут когда-нибудь понадобиться. Так что мы их уберём в другое место. Скажем, в правый нижний угол окна. Кроме того, пусть им будет какая-нибудь ненавязчивая рамочка.
Если верить DOM Inspector’у, они лежат в блоке с классом yMuNaf (всегда поражаюсь, как в Google умеют точно, кратко и понятно выразить назначение блока).
.yMuNaf
{
position: fixed !important;
bottom: 0px !important;
right: 0px !important;
border: 1px solid silver !important;
}Ещё раз перезапускаемся. Кнопки уехали на место, но колонка свободного места осталась.
Смотрим в дерево. Видим, что там таблица на три колонки, из которых нам мешает третья. Но выделить её из трёх ни по классу, ни по id’у не получается.
Спускаемся внутрь, видим там <div> класса XoqCub с явно заданной шириной: style="width: 189px;". XoqCub’ов на странице полно. Попробуем подобрать правильный селектор:
.XoqCub[style] { border: 3px solid red !important; }Ууу, сколько их много.
.eWTfhb>.XoqCub[style] { border: 3px solid red !important; }А вот так уже нормально.
.eWTfhb>.XoqCub[style] { width: 0px !important; }Ооо. Much better. Только правый край письма просвечивает через кнопки. И кнопки неплохо бы отбить чуть-чуть по краям.
.yMuNaf
{
position: fixed !important;
bottom: 0px !important;
right: 0px !important;
border: 1px solid silver !important;
background: white !important;
padding: 0px 3px !important;
}Вот теперь можно жить.
А что, товарищи, не знает ли кто правильного движка для web-форума?
Точка отсчёта: phpBB 2.0.x. Не нравится следующее:
Ну и конвертация из существующей базы phpBB была бы весьма кстати.
Ставить предполагается на PHP 4 и PostgreSQL 8. На худой конец, MySQL 4.1.
То есть я так понимаю, что phpBB 3 должен бы подойти, но он ещё глубокая бета…
Прикрутил к нашему аниме-форуму автоматическую распознавалку спамных топиков. Теперь бо́льшая часть спама сразу уходит мусорку. Мелочь, а приятно.
( Read more... )Upd. Ах да. Кажется, они называют это «поисковой оптимизацией».
