Номера телефонов на многих сайтах вставлены плохо, даже на сайтах, якобы оптимизированных под телефон. Прямо невозможно пользоваться.

Вот дизайнер убрал код страны и вынес за скобки код города — сделал вёрстку поопрятнее:

...и лишил меня возможности позвонить по номеру в один клик:

«Неправильно набран номер. Пожалуйста, уточните номер и перезвоните».

Дальше два пути:

1. Записать номер на оперативную память в голове и руками набрать его, добавив нужный префикс.
2. Попробовать обойтись телефоном.

Выбираю второй путь, копирую:

С третьей попытки вставляю номер в «Телефон», но отредактировать не могу — курсора нет, удалять и добавлять цифры можно только с конца:

Ладно, иду в блокнот:

Эээ — tel:(812)%20234-2646 — фигня какая-то. За несколько попыток исправляю номер — +7 (812) 234-26-46. Не был бы разработчиком, не справился бы, ведь простые пользователи не знают, что %20 — это пробел.

Плохо.

Совет. Показывайте на сайтах полные номера, это нормально:

Наш телефон: +7 (812) 234-26-46

Ну или прячьте их в атрибут href, вот так:

Наш телефон в СПб: <a href="tel:+78122342646">234-26-46</a>

С номерами 8 800 xxx-xx-xx обычно всё хорошо.

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

Недавно Илья выпустил новую Эгею 2.4, в которой куча всего и новая базовая тема «без дизайна». Теперь можно написать свою тему практически с нуля, не наследуя развесистую «Классику».

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

Теперь не стыдно:

**http://artpolikarpov.github.io/fresh/**

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

Перед использованием темы заплатите. Сколько хотите. Можно ничего.

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

.life {
  margin: ≈9999pc;
}

Не лучший способ, но бывает пригождается и нам:

.hidden {
  position: absolute;
  left: -9999px;
}

Никакое специальное приложение для проверки размеров в вёрстке, вроде Икс-скоупа, у меня не прижилось. Слишком большая погрешность:

Правильный размер 198×68

Когда мне нужно что-то проверить приблизительно, я использую стандартную маковскую скриншотилку, cmd shift 4:

После измерений нажимаю esc, чтобы не сохранять скриншот.

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

Идеальная измерялка должна вести себя так:

• жмёшь cmd shift M (или другой хоткей),
• экран замирает и поверх появляется фотошопный Rectangular Marquee Tool,
• работает зум,
• выход по эскейпу.

А как вы проверяете размеры элементов и отступов в вёрстке?

С удивлением обнаружил, что Покет не распознаёт заметки в этом блоге, как заметки:

Обернул текст в <article></article>:

Немодным браузерам дал прививку от модного тега:

<!--[if lt IE 9]>
  <style> article { display: block; } </style>
  <script> document.createElement('article'); </script>
<![endif]-->

И — помогло.

Теперь Покет всё парсит правильно. А бонусом появилась кнопочка «режим чтения» в мобильном Сафари.

Это не совет. Какие-то сайты работают и без <article>. Ни Покет, ни Сафари, не раскрывают подноготную механизмов, не указывают какие теги использовать и обещают самостоятельно приспосабливаться к сайтам. В тех немногочисленных статьях, что я нагуглил, разработчики гадают на кофейной гуще, и подбирают разметку методом тыка.

Полдня делал знак рубля для Калибри. Последний час работы заскринкастил, ужал до двух минут и получилось кино:

Посмотреть в браузере и скачать шрифт

Спасибо Мише Нозику за помощь.

Соорудил гармошку на ЦСС и джаваскрипте.

Кроссбраузерностью не заморачивался, должно играть в современных браузерах.

Особых чудес в коде нет, но мне нравится, как умно считается градус сгиба мехов, и что аудио включается мягко, без пуков. Посмотрите сами, как там всё устроено.

Если есть идеи по развитию игрушки, добро пожаловать в репозиторий на Гитхабе. Жду пулреквестов.

Двигайте меха!

Обновил спрайт с пиктограммами государственных флагов до версии 0.2.

Изменился синтаксис вставки флажка в ХТМЛ, было:

<i class="b-fg b-fg_RU"><img src="fg.png"></i>

Стало в два раза короче:

<i class="flag-RU"></i>

Пустой флаг-заглушка:

<i class="flag-NOWHERE"></i>

Никита Иванов, автор пиктограмм, перерисовал флаг Ливии (LY) и добавил Южный Судан (SS), а я внёс эти изменения в спрайт и массив названий.

В зипе теперь лежит тестовая страница, снимающая все вопросы подключения.

Пользуйтесь на здоровье:

http://artpolikarpov.ru/projects/flags/

В следующей версии хочется добавить SQL-дамп базы данных, он уже почти готов — осталось добавить русские названия и некоторые непризнанные государства и несуверенные регионы с нестандартными кодами. У кого есть несколько часов на эту задачу?

Я часто расставляю неразрывные пробелы руками.

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

Удобно.