Метка: частное мнение

Лень или безразличие разработчиков Vaio Care

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

Сегодня в очередной раз обновилась мало нужная, на мой взгляд, предустановленная на  мой Vaio софтина (намеренно так, не очень уважительно) Vaio Care. После обновления оно самозапустилось и предстало во всей красе:

vaio-care

 

Обратите внимание на ярко-голубой прямоугольник с надписью 0 Проблем(а/о) и ниже на белом фоне продолжение Обнаруженные в системе на данный момент. Не правда ли, звучит очень не по-русски: 0 Проблем(а/о) Обнаруженные в системе на данный момент, — но разработчики предусмотрели все сразу варианты, не заморачиваясь на падежи и всё остальное. У меня такой подход вызывает сильное неприятие.

Ведь насколько было бы лучше, если бы было  предусмотрено несколько вариантов:

  1. Если проблем нет, то написать: Проблем не обнаружено. Не добавляя ни количество 0, не несущее никакой полезной информации, ни добавление, что 0 проблем в некоей системе, что тоже излишне и усложняет ненужным образом сообщение. Проблем не обнаружено. �? точка :)
  2. А далее немного поиграть с окончаниями при разном количестве проблем:
    1. 1 проблема,
    2. 2, 3, 4 проблемы,
    3. 5, 6, 7 и так далее проблем обнаружено.

�? опять же без упоминания некой системы.

Ведь так сообщения Vaio Care будут восприниматься гораздо легче. �? не будут выглядеть, как что-то недоделанное.

Bootstrap и универсальный селектор *

Есть в CSS универсальный селектор. Он позволяет выбрать все элементы на странице или же все элементы, вложенные в какой-либо другой, например:

* {
margin: 0;
padding: 0;
}

Эта запись обнуляет все отступы у всех элементов на странице. �?ли же так:


.classname * {
    color: red;
}

Так мы задаем красный цвет всем элементам, вложенным в блок с классом classname.
Первый вариант раньше был весьма популярен для глобального так называемого reset’а.
Но у универсального селектора есть недостаток — низкая производительность. �? сейчас не рекомендуется использовать такой селектор. Для reset’а стилей в браузерах сейчас принято использовать различные варианты, например такой, как используется в шаблоне html5boilerplate.
Каково же было мое удивление обнаружить вот такую запись


*,
*:before,
*:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

в очень популярном сейчас фреймворке, как Bootstrap. Мало того, что здесь использован универсальный селектор, так здесь ещё происходит глобальная перезагрузка боксовой модели CSS. На моей практике необходимость переключать боксовую модель возникала не очень часто и для весьма ограниченного набора элементов. В Bootstrap же без этого правила не будет работать даже их сетка (grid).
Я уважаю опыт и знания разработчиков Bootstrap и последнее время часто использую их наработки, но в этом случае я совершенно с ними не согласен. �? настоятельно не рекомендую использовать это стилевое правило.
Лучшим вариантом было бы добавить в таблицу стилей отдельные классы, например:


.border-box {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.border-box__before:before {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.border-box__after:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.border-box__all,
.border-box__all:before
.border-box__all:after {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

Я намеренно разделил правила на отдельные классы, потому как не всегда будет необходимость обрабатывать элементы и псевдо-элементы одинаково.
В общем, я сильно удивлен решением разработчиков Bootstrap.
P.S. Справедливости ради отмечу, что на стартовой странице Bootstrap’а указана эта особенность фреймворка.

Дизайн превыше всего?

В Рунете идёт постоянный спор, какой лучше макет для сайта: фиксированный или тянущийся. Media queries позволяют сверстать макет, приспосабливающийся к устройствам или к ширине экрана. Но зачем все это, если можно общему контейнеру задать ширину в 1240 пикселей, и не думать, что у кого-то экран может быть и уже=) (хотя бы по этой статистике). Зато можно вставить в шапку мегакартинку.

Не касаюсь содержания, но статья, на которую я перешел из твиттера, была  по делу, неважно (smashingmagazin похвалил… хотя скорее smashingmagazin’у понравилась форма обратной связи  — прокрутить почти до дна, а там, кроме красивой формы, еще одна мегакартинка, да еще разрезанная на несколько частей). Не знаю, что вдруг так меня задело, дизайнерский сайт, и ладно. Стало просто интересно, как сверстано=) (так себе, в общем-то (не сравнивайте с версткой стархака=))

Хотя, конечно, надо смотреть на статистику по посетителям сайта. Может быть на указанный сайт не заходят посетители, у которых мониторы с меньшим разрешением. Но для меня такой поход — хорошая иллюстрация к заголовку этой моей реплики, когда дизайн превыше всего.

Несильно информативная статья, но может быть это растолкает меня на продолжение написательства.

Я бы сделал лучше

Студия Лебедева порадовала нас новым творением — обновился интернет-магазин Техносилы. Все мило и, как обычно в последнее время у Лебедева, лаконично, но…

Что мы видим на первой же странице:

technosila1

Названия товаров не помещаются и просто обрезаются свойством overflow: hidden
Не очень красиво, я бы сказал. Но ведь есть же замечательное, но крайне редко используемое (мне ни разу не попадалось на глаза его использование) свойство text-overflow: ellipsis. Что удивительно, его (это свойство) поддерживает дружное семейство браузеров по имени Internet Explorer. Это свойство имеет два (согласно с сайтом MS) значения: clip (по умолчанию) и   ellipsis, что в сочетании со свойством  overflow: hidden дает замечательный результат: текст, который не помещается в каком-либо элементе обрезается с заменой последних символов на многоточие!!! Получается очень аккуратно и симпатично.
А вот и примеры:

Без применения overflow и text-overflow

Съешь еще этих мягких французских булок

Теперь установим overflow: hidden и text-overflow:clip; (поведение по умолчанию)

Съешь еще этих мягких французских булок

�? наконец требуемый результат в результате применения overflow: hidden и text-overflow:ellipsis;

Съешь еще этих мягких французских булок

Некоторые браузеры, в частности Opera, требуют своего префикса для этого свойства. MSDN рекомендует так же использовать префикс -ms для IЕ8, но понимает это свойство и без него.

Проверил, что Хром 2 и Сафари 4 понимают без префиксов, а ФайрФокс 3 не понимает вовсе

Но если не использовать это свойство, то хотя бы снабдить заголовок соответствующей всплывающей подсказкой, хотя бы в виде title