разработка — CSS Guru

IE10+ и нелюбовь. Небольшой хак для CSS для IE10+

admin — Tue, 07 Apr 2015 07:04:22 +0000

Моя нелюбовь как разработчика к Internet Explorer насчитывает уже много лет. Но уже достаточно долго я не ругался на него так, как за последние недели. В очередном проекте со навороченными интерфейсами ??Е проявил себя во всей красе. ?? мне пришлось, как и много лет назад, искать хаки для ??Е. Благо на проекте поддерживается ??Е только в версиях от 10-го и выше. Найденный хак @media -ms-high-contrast очень облегчил мне жизнь:


@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
   /* стили только для IE10+ */
}

Update: Мне нужен был хак, чтобы разоброться с багами в ??Е с flexbox. Вместо долгого и пространного описания дам ссылку на известные баги с flexbox’ом.

Маскирование данных

admin — Sun, 03 Nov 2013 21:33:20 +0000

В заголовке написал «маскирование», но точнее будет «форматирование данных по заданной маске». Это бывает удобно использовать для форматирования того, что вводит в форму пользователь, например, номера телефона. Скажем, посетитель вводит подряд цифры своего номера, например, +79041234567 а мы на лету преобразуем этот номер в более удобный для восприятия и привычный формат +7 (904) 123-45-67. По службе возникла необходимость отформатировать данные, вводимые пользователями, в частности, номер кредитной карты и телефон. Поначалу стал писать свой велосипед, но к счастью наткнулся на весьма и весьма годный jquery-плагин для маскирования данных, коим и не преминул воспользоваться! Если у вас есть необходимость в форматировании данных по маске, то, думаю, jQuery-Mask-Plugin легко решит эту задачу. На сайте хороший набор примеров и краткая, но вполне исчерпывающая документация.
�? простой пример с форматированием номера кредитной карты:

CSS3 selectors. Частный случай

admin — Sun, 01 Sep 2013 09:29:22 +0000

Люблю, знаете ли, селекторы в CSS3. Позволяют делать очень удобные штуки.
Вот, например, есть блок с иконками, расстояния между которыми не одинаковые (лого соц.сетей). Можно было бы каждой иконке дать свой класс, чтобы регулировать расстояния. Но я воспользовался селектором, проверяющим наличие строки в атрибуте элемента, а именно:

E[foo*="bar"]

Я проверял атрибут SRC у тега IMG для иконки Фейсбука, назвав иконку fb.png. Получилось что-то в этом роде:

img[src*="/assets/i/ico/fb.png"]

Таким образом, не имея доступа в шаблон, есть возможность с легкостью менять отображение документа. Для, собственно, CSS и предназначен)

P.S. Правда в этом частном случае я просто поленился сделать из иконок спрайт, что по умолчанию привело бы к наличию у каждой иконки своего класса. Грешен, каюсь.

Origin null is not allowed by Access-Control-Allow-Origin

admin — Thu, 13 Jun 2013 13:11:08 +0000

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


Failed to load resource: Origin null is not allowed by Access-Control-Allow-Origin. 
XMLHttpRequest cannot load file:///C:/some-file. Origin null is not allowed by Access-Control-Allow-Origin.

Для решения проблемы есть два пути. Всё-таки развернуть сервер локально, хоть тот же denwer, или же запускать Chrome со следующим параметром:


--allow-file-access-from-files

Для добавления этого параметра к запуску сделайте так:

кликните по иконке Chrome правой кнопкой мыши
выберите пункт Свойства
во всплывшем окне в закладке Ярлык в поле Объект к строке запуска Chrome, например, C:\Users\user-name\AppData\Local\Google\Chrome\Application добавьте вышеприведенную строчку ‐‐allow-file-access-from-files. В итоге должно получиться C:\Users\user-name\AppData\Local\Google\Chrome\Application ‐‐allow-file-access-from-files
перезапустите браузер

Теперь можно спокойно проверять свои ajax-запросы на локальных файлах.
�?сточник знания. Очень помогло. Долго тупил, почему не работает. Вроде всё правильно написано, но ничего не происходит!

Stylus перестал развиваться?

admin — Tue, 11 Jun 2013 13:20:06 +0000

Создалось ощущение, что мой любимый css-препроцессор Stylus перестал развиваться. Последние коммиты несколько месяцев назад сделаны. Мой любимый IDE phpStorm как не поддерживал Stylus, так и не собирается. Учитывая использование в повседневной работе phpStorm’а, плотно пересел на LESS. �?, кажется, так на нём и останусь. В версии 1.4 обещаны несколько дополнений, которых не хватало в LESS … Читать далее

Комментарии в JSON

admin — Sat, 08 Jun 2013 16:38:08 +0000

Плохо не знать теории. Взялся за работу с JSON. Передаются на клиент данные в виде JSON, на клиенте шаблонизируем с помощью handlebars, всё красиво вроде. Тестовый объект с данными был написан в теле HTML страницы. Всё работало.
Перенёс код копипастом в отдельный файл .json, стучусь к нему аяксом, запрос проходит, но ничего не происходит. Смотрю в ответ, а там parsererror. Ничего не понимаю. Удаляю всё, создаю простенький тестовый json-файл.


{
    "test" : "value"
}

Всё работает.
А вся разница между тестовым и рабочим JSON’ом, что в в тестовом нет комментариев. В рабочем я закомментировал лишнее. Стоило убрать комментарии и всё заработало. Буду знать.

SSH доступ на SWEB.RU

admin — Sun, 21 Apr 2013 18:51:36 +0000

У меня не очень большой опыт общения с хостерами, кроме трех лет работы на одного из них, а именно на sweb.ru.
Поэтому не могу сравнить с возможностями других указанное в заголовке. Но раньше, для того, чтобы получить ssh-доступ к своим ресурсам на свебе, приходилось писать запрос в поддержку.
Теперь же получение ssh-доступа возможно в один клик в панели управления хостингом. А вот к её созданию ваш покорный слуга имеет самое непосредственное отношение. Правда, в мою бытность верстальщиком свеба, такой возможности (включение ssh через панель управления) не было.
Что ж, честь и хвала sweb.ru!

SSH доступ к EC2 на Амазоне

admin — Thu, 14 Feb 2013 09:23:48 +0000

Для отслеживания задач по проекту решили использовать Редмайн. Самым простым и быстрым показался вариант с разворачиванием редмайна на амазоне. После развертывания пришлось доступ по SSH к созданному инстансу. Делал всё, как расписано в Амазоновой консоли.
В частности, там приведена следующая строка:
ssh -i sshkeyname.pem ubuntu@public_dns

Обратите внимание на имя пользователя ubuntu. Но у меня редмайн был развернут из маркета AWS Marketplace. А редмайн на рынке, что называется, Redmine powered by BitNami :)

Так вот. �?мя пользователя для SSH будет для подобных продуктов bitnami. В противном случае вам не удастся достучаться до своего развернутого на EC2 сервера с сообщением вроде «Host key verification failed» или «Server refused our key (server sent: publickey)».

Форма заказа хостинга на sweb.ru

admin — Sat, 13 Oct 2012 13:12:56 +0000

Уже больше двух лет наверно прошло после запуска, а мне по-прежнему очень нравится как получилась форма заказа на свебе. Тем более приятно, что в её создании принимал непосредственное участие.
Всё просто, очевидно, быстро работает.
Да и не видел пока еще форм заказа проще.

P.S. Свеб обновился, и форма канула в лету.