yurikhan: (Default)

Если при наведении мышью в какую-то точку кнопки или пункта меню ты эту кнопку или пункт подсветил или поменял курсор мыши на «палец» — ты обязан реагировать на клик в этой конкретной точке.

Типичная схема нарушения: на клики реагирует ссылка с текстом, а подсветка по :hover’у и вообще всё оформление кнопки висит на контейнере-обёртке с margin’ом в пол-эма. Попадаешь в margin — подсветка есть, реакции на клик нет.

Лучи поноса в общем направлении Tiny Tiny RSS и Atlassian Crucible.

yurikhan: (Default)

В предыдущих сериях: иконочные шрифты, отсутствие хинтинга в SVG-иконках.

Новый идиотский тренд: мало того, что иконки запихивают в шрифт, так ещё и задают как лигатуры. То есть слово search, набранное шрифтом Material Icons, превращается в иконку лупы.

При отсутствии соответствующего шрифта всё это выглядит как ужас:

yurikhan: (Default)

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

yurikhan: (Default)

Четыре года назад я жаловался на тенденцию запихивать векторные иконки в кастомные шрифты и стучал ногами, что надо использовать 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 }

}
yurikhan: (Default)

Когда я пришёл в веб, считалось дурным тоном делать сайты, не помещающиеся в 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.

(Персональные лучи поноса — Альфа-Клику, Гитхабу, Гуглу, Джире, Пейпэлу, библиотеке Сафари Букс Онлайн, всей сети Стек Эксчендж и Яндекс-Погоде.)

yurikhan: (Default)

В вебе опасная мода: рисовать кастомный шрифт и использовать символы из него в качестве иконок. Вон GitHub уже заразился.

Почему это плохо: Чтобы это работало, пользователю приходится загрузить шрифт (а без шрифта вместо иконок показываются какие-то буквы/слоги хангылем). А для этого пользователю приходится разрешить браузеру загружать шрифты. Но этого нельзя делать, потому что тогда некоторые сайты будут отображаться чем-нибудь ещё похуже Comic Sans’а, просто потому, что какому-нибудь «дизайнеру» кажется, что его сайт лучше смотрится этим шрифтом или этот шрифт основа корпоративного стиля.

В Unicode довольно много символов, которые можно использовать в качестве иконок. Нет, котоосьминога среди них нет. Вы можете попробовать это изменить в следующей версии Unicode или же нарисовать классическую иконку в PNG или даже SVG.

Алсо внёс |http://*.2gis.ru/media/js/Neo_Sans_Pro_Cyr_400.font.js в список AdBlock’а. Это вообще за гранью добра и зла — притащить на клиента даже не шрифт, а джаваскрипт, который отрисовывает надписи на canvas’е.

И нет, дизайнер сайта не имеет права на индивидуальность в части шрифтов для основного текста. Удобство для пользователя — первично, личные предпочтения дизайнер может засунуть себе в личные настройки браузера, а корпоративный стиль можно ограничить логотипом.

yurikhan: (Default)

Понадобилось вот прикрутить к <textarea> фичу Indent/Unindent block. Достаточно простую: выделяем блок, жмём клавишу — в начале каждой строчки в блоке добавляется/удаляется пробел.

Для простоты предполагаем, что браузер реализует стандарты DOM в части выделения :)

Read more... )

Итого, финальный код:

Read more... )

Чёрт возьми, оно мне нравится. Я, пожалуй, поставлю GreaseMonkey, и пусть привязывает это ко всем <textarea> вообще.

yurikhan: (Default)

Вздумалось это нашему начальству перестать выдавать нам зарплату наличкой, а переводить её на карточки.

Ну вздумалось и вздумалось. Собрали имена-фамилии, паспортные данные. Через время приходят конверты. Карточка, PIN-код, договор на подпись.

Вот только на карточке выбито — Yuriy Han. Две ошибки в восьми буквах. А я очень болезненно реагирую на неправильное написание и произношение моего имени (и ника).

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

Каждый человек имеет право на своё имя.

Сходил в банк. В банке спросили: «А это существенно?» — «Дело принципа.» — «У вас загранпаспорт есть?» — «Ещё нет.» — «За границу собираетесь?» — «В ближайшее время нет.» — «А тогда в чём проблема?» — «Хочу, чтоб на карточке было моё имя, а это я как своё имя не воспринимаю.» — «500 рублей и две недели на перевыпуск.»

А ещё у них интернет-банкинг (от faktura.ru) работает только под Internet Explorer’ом. И никто не хочет поговорить об этом. И это в наш двадцать первый век, когда космические корабли поездят просторы Большого театра, а предприятия массово мигрируют на свободное программное обеспечение. (Написал по этому поводу письмо в faktura.ru.)

В то время, как ведущие эксперты по информационной безопасности рекомендуют не пользоваться IE вообще, требовать его для банковских операций — как минимум несколько странно.

yurikhan: (Default)

У 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;
}

Вот теперь можно жить.

yurikhan: (Default)

А что, товарищи, не знает ли кто правильного движка для web-форума?

Точка отсчёта: phpBB 2.0.x. Не нравится следующее:

  • По умолчанию всё работает (для русскоязычных пользователей) в windows-1251. Если переключаешь его в UTF-8, он тихо отключает быстрый поиск по таблице слов и включает тормозной перебор всех сообщений. Разбираться, почему так сделано — в принципе можно, но неохота. Хотелка №1: полный Unicode в UTF-8.
  • Чтобы нарисовать к нему скин, который будет целиком и полностью XHTML 1.1 Strict — нужно потратить минимум неделю фуллтайма, при этом жестоко пилить внутренности. Каждый раз, когда приспичит проапгрейдиться. Хотелка №2: чтобы внутренности не мешали нарисовать нормальную шкурку.

Ну и конвертация из существующей базы phpBB была бы весьма кстати.

Ставить предполагается на PHP 4 и PostgreSQL 8. На худой конец, MySQL 4.1.

То есть я так понимаю, что phpBB 3 должен бы подойти, но он ещё глубокая бета…

yurikhan: (Default)
Все стандартные браузеры похожи друг на друга; каждый глючный браузер глючит по-своему.
yurikhan: (Default)

Прикрутил к нашему аниме-форуму автоматическую распознавалку спамных топиков. Теперь бо́льшая часть спама сразу уходит мусорку. Мелочь, а приятно.

Read more... )

Upd. Ах да. Кажется, они называют это «поисковой оптимизацией».

Profile

yurikhan: (Default)
Yuri Khan

June 2017

S M T W T F S
    123
45678910
1112 1314151617
18192021222324
252627282930 

Links

Syndicate

RSS Atom

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated 2017-07-22 04:45
Powered by Dreamwidth Studios