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

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

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’а указана эта особенность фреймворка.

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

Если вы пользователь брузера 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

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

  1. кликните по иконке Chrome правой кнопкой мыши
  2. выберите пункт Свойства
  3. во всплывшем окне в закладке Ярлык в поле Объект к строке запуска 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
  4. перезапустите браузер

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

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

Создалось ощущение, что мой любимый css-препроцессор Stylus перестал развиваться. Последние коммиты несколько месяцев назад сделаны. Мой любимый IDE phpStorm как не поддерживал Stylus, так и не собирается.
Учитывая использование в повседневной работе phpStorm’а, плотно пересел на LESS. И, кажется, так на нём и останусь. В версии 1.4 обещаны несколько дополнений, которых не хватало в LESS по сравнению со Stylus, например, :extends(.rule) и data-uri.

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

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


{
    "test" : "value"
}

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

Как вручную переустановить пароль в админскую часть MODX 2.1+

В MODX 2.1+ пользователи по умолчанию создаются с паролем, хешированным по алгоритму PBKDF2. MySQL или SQL Serve обычно не умеют вычислять такой хеш. Поэтому, для ручного изменения пароля необходимо изменить хеширующий класс с hashing.modPBKDF2 на hashing.modMD5. После чего можно использовать привычную для MySQL функцию MD5() для пароля. Вот пример подобного запроса:


UPDATE modx_users SET hash_class = 'hashing.modMD5', password = MD5('tqwerty') WHERE username = 'admin';

Источник
P.S. Не буду утверждать, что мне всё понятно в вышеизложенном, но оно работает. Было бы странно, если бы было не так) А понадобилось мне искать такую возможность, потому как забыл админский пароль на MODX, развернутый локально. И восстановление пароля по почте не работало.

Поиск по сайту на MODX

Чтобы организовать поиск на сайте, можно воспользоваться сниппетом SimpleSearch.
Код добавления обычный для сниппетов MODX, вот простой вариант:


[[!SimpleSearchForm? &landing=10 &tpl=search-form]]

Где параметр &landing указывает на страницу, где будут выведены результаты поиска, а &tpl — это имя чанка, в котором вы можете переопределить шаблон поисковой формы.
По умолчанию код чанка такой:


<form class="sisea-search-form" action="[[~[[+landing:default=`[[*id]]`]]]]" method="[[+method:default=`get`]]">
    <fieldset>
        <label for="[[+searchIndex]]">[[%sisea.search? &namespace=`sisea` &topic=`default`]]</label>
        <input type="text" name="[[+searchIndex]]" id="[[+searchIndex]]" value="[[+searchValue]]" />
        <input type="hidden" name="id" value="[[+landing:default=[[*id]]]]" />
        <input type="submit" value="[[%sisea.search? &namespace=`sisea` &topic=`default`]]" />
    </fieldset>
</form>

На странице для результатов достаточно разместить код

[[!SimpleSearch]]

Этого достаточно, чтобы всё заработало. А используя параметры сниппета SimpleSearch, можно настроить вывод результатов как вам заблагорассудится.

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

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

Добавление Ant Bulider в Артану

В Aptana, в отличие от Eclipse, по умолчанию Ant не установлен. Но он же может быть нужен?
Для его установки необходимо выполнить несколько действий:

  1. Идём в Help -> Install New Software
  2. Далее в выпадающем списке выбираем Eclipse Indigo Update Site — http://download.eclipse.org/releases/indigo (на момент написания этих строк. Это может быть и другая версия Eclipse)
  3. В появившемся списке раскрываем пункт Programming Languages и отмечаем для установки Eclipse Java Development Tools.
  4. Далее Next и Finish. После чего перезапускаем Aptana.

После окончания установки можно проверить наличие Ant: Window >> Show View >> Other.

А понадобился мне Ant Builder для автоматического объединения и минификации стилей и скриптов при работе с thrubet.com. Подобные манипуляции вместе с некоторыми мерами на сервере позволили повысить оценку сайта thrubet с помощью YSlow с 70 баллов до более 85! Ещё есть, что поправить, и уровень в 90 вполне достижим.

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

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