И снова о внимательности и аккуратности

В очередном проекте необходимо было использовать кросс-доменный аякс. Конечно, воспользовался решением предлагаемым библиотекой jQuery.

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


XMLHttpRequest cannot load http://domain-name.example/test?params. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://test.local' is therefore not allowed access.

А вот приблизительный вид запросов:

$.ajax({
    url : 'http://domain-name.example/test?params',
    dataType : 'jsonp',
    jsonp : 'callbackFuncName',
});

и

$.ajax({
    url : ' http://domain-name.example/test?params2',
    dataType : 'jsonp',
    jsonp : 'callbackFunc2Name',
});

И вот второй вызов и давал ошибку.

Если внимательно посмотреть, то видно, что вся разница в вызовах — это пробел в значении url перед http.

Не знаю ж откуда он там взялся, это пробел. Но мне он стоил нескольких часов гугления и экспериментов. Узнал за это время что-то новое для себя по ajax, jsonp etc.

Когда заметил пробел и убрал его, то всё замечательно заработало!

Так что вот. Очередной призыв быть внимательным и аккуратным со своим кодом :)

P.S. А вообще удивительно, хотя я могу не охватывать все варианты, но почему в строке url не выразается на уровене библиотеки jQuery пробел в начале строки.

Лень или безразличие разработчиков 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 будут восприниматься гораздо легче. И не будут выглядеть, как что-то недоделанное.

Не могу заблокировать экран в свежепоставленной Ubuntu 13.10

Ну что ты будешь делать с этой мегасистемой? Ни привычное сочетание CTRL+ALT+L, ни через верхнее меню не позволяют блокировать экран. Ни тот, ни другой способ ни к чему не приводит!
Оказывается, чтобы иметь возможность блокировать экран, необходимо доустанавливать пакет gnome-screensaver.

sudo apt-get install gnome-screensaver

Я не понимаю логики создателей Ubuntu.

Как добавить кнопки создания таблиц в визуальный редактор TinyMCE в MODX Revo

Для добавления кнопок создания таблиц в редакторе TinyMCE необходимо сделать следующее:

  1. Изменить две настройки, которые вы найдёте в Система-> Настройки системы (System -> System Settings). Выберите tinymce в выпадающем списке пространств имён (по умолчанию там выбрано core).
  2. Таблица настроек изменится и в ней вам надо изменить следующее:
    1. Найдите строку tiny.custom_plugins  и отредактируйте её, добавив слово table через запятую. Важно, чтобы список дополнений был строго через запятую
    2. Найдите строки tiny.custom_buttonsN. В этих строках с первой по пятую располагаются кнопки управления визуальным редактором. Выберите, например, строку tiny.custom_buttons3 и измените этот параметр, добавив в него слово tablecontrols. Важно, чтобы список возможных кнопок так же был строго через запятую.

Источник

Незнание закона не освобождает от ответственности, или почему надо читать документацию jQuery… И не только :)

Мелочь, но отняла время: оказывается, читать доки по jQuery полезно :)
Задача простая: если длина значения в текстовом поле меньше некой величины, то кнопка остаётся неактивной, то есть disabled. Действовал по доступной мне логике:


if( length >= someValue ) {
    btn.removeProp( 'disabled' );
} else {
    btn.prop( 'disabled' , true );
}

И вот если первое условие отрабатывало, то второе, то есть при удалении символов из поля, когда длина значения становилась меньше someValue, нет! И кнопка оставалась «включённой». Потыкался, потыкался, полез в гугл, первая же ссылка, весьма давняя, дала ответ с отсылкой на документацию.
А там оказывается написано:

Note: Do not use this method to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use .prop() to set these properties to false instead.

То есть метод removeProp() полностью удаляет такое свойство, и добавить его методом prop() не представляется возможным. Всё просто и очевидно.
И вышеприведенный код должен быть таким:


if( length >= someValue ) {
    btn.prop( 'disabled', false);
} else {
    btn.prop( 'disabled', true );
}

Надо чаще читать доки!

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

В заголовке написал «маскирование», но точнее будет «форматирование данных по заданной маске». Это бывает удобно использовать для форматирования того, что вводит в форму пользователь, например, номера телефона. Скажем, посетитель вводит подряд цифры своего номера, например, +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-запросы на локальных файлах.
Источник знания. Очень помогло. Долго тупил, почему не работает. Вроде всё правильно написано, но ничего не происходит!