Заметки с тегом «hint» (страница 4)

Экранирование русских символов

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

<script src="my-cool-app.js" charset="windows-1251">

Если заранее экранировать такие символы, то в дальнейшем уже будет неважно в какой кодировке «сервируется» ваш файл.

Mathias Bynens описал различные варианты экранирования и даже сделал утилиту, которая может экранировать так, чтобы результирующая строка была наименьшей длинны.

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

escape("Привет").replace(/%(u[0-9a-f]{4})/ig, "\\$1")

В результате получим экранированную строку:

"\u041F\u0440\u0438\u0432\u0435\u0442"

У этого метода есть один недостаток: символы с кодом меньше 128 нужно обрабатывать отдельным регэкспом.


escape("Hello!").replace(/%([0-9a-f]{2})/ig, "\\x$1")
Комментарии к заметке: 2

Особенности @param в JsDoc

В комментариях я использую разметку JsDoc. Есть утилиты, которые автоматически строят документацию, основываясь на этой разметке. Ещё она польза заключается в том, что статические анализаторы в IDE умею проверять использование прокомментированных функций.

С перечнем аннотаций , их параметрами и примерами использования можно ознакомиться, например, в документации к генератору jsdoc-toolkit.

Самой популярной, пожалуй, аннотацией является @param.


@param {paramType} paramName paramDescription
  • paramType — опциональный: ожидаемый тип параметра;
  • paramName — обязательный: название параметра;
  • paramDescription — опциональный: описание параметра.

В JS нет строгой типизации параметров функции. В одном случае, например, тип параметра может быть числом, а в другом — строка. Все ожидаемые типы перечисляются с разделителем | .

/**
 * @param {Number|String} value
 */
function showValue(value) {
    alert(value);
}

А ещё параметры функции могут быть опциональными. В этом случае название параметра заключаются в квадратные скобки.


var uidx = 1;
/**
 * Generate an id that is unique among the application
 * @param {String} [prefix] optional guid prefix
 */
function guid(prefix) {
    return (prefix || 'app') + '-' + uidx++;
}

Теперь статический анализатор не будет требовать, чтобы функция guid обязательно вызывалась с параметром. Но покажет предупреждение, если будет указано больше одного параметра.

Комментарии к заметке: 3

Копирование файлов по SSH

Традиционным способом копирования файлов по SSH является команда scp.

scp *.js user@remote-host.com:~/folder/

Все файлы с расширением js из текущей папки будут скопированы на сервер remote-host.com в папку folder в домашней директории пользователя user.

Можно так же копировать папку вместе со всеми файлам и вложенными папками:

scp -r src user@remote-host.com:~/folder/

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


tar -c src | ssh user@remote-host.com "cd ~/folder/ && tar -x"

Папка src архивируется утилитой tar . Затем этот архив передается на сервер по SSH, где выполняется команда cd с указанными параметрами и распаковывается полученный архив.

Пример чуть сложнее:


npm run build && \
DEPLOY_TARGET=$(date +%Y%m%d-%H%M%S) && \
tar -c build | \
ssh -t mista_k@slim.local \
  `cd /var/www && \
  mkdir -p $DEPLOY_TARGET && \
  tar -x -C $DEPLOY_TARGET --strip-components 1 -v && \
  ln -sfn $DEPLOY_TARGET build`
Комментарии к заметке: 4

Нелинейная шкала слайдера

Когда слайдере нужно использовать для ввода несоизмеримых по величине данных (например, от 1 тысячи до 10 миллионов рублей), то разумнее использовать какую-то нелинейную шкалу. В частности, для ввода сумм подходящей шкалой будет логарифмическая (по основанию 10).

Для сравнения приведу два слайдера с линейной и нелинейной шкалой.

Нелинейная система координат

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


function fromSlider(value) {
    return Math.round(Math.pow(10, value));
}

function toSlider(value) {
    return Math.log(value) / Math.log(10);
}

Теперь там где нужно установить значение в слайдер используем toSlider, а там где получаем значение из слайдера — fromSlider.


$(".logarithmic__slider").slider({
    min: toSlider(1000),
    max: toSlider(10000000),
    step: 0.01,
    value: toSlider(initialValue),
    slide: function (e, ui) {
        $(".logarithmic__value").html(fromSlider(ui.value));
    }
});

Округление и форматирование

Чтобы данные выглядели презентабельно их хорошо бы ещё округлить и отформатировать.


function round(n, threshold) {
    var digits, out;

    n = n.toFixed(0);
    digits = n.length;
    out = n.substr(0, Math.min(digits, threshold));

    if (digits > threshold) {
        out = out + "000000000000".substr(0, digits - threshold);
    }

    return parseInt(out);
}

Функция оставляет только указанное количество значимых разрядов в числе. Остальные будут обнулены.


function splitGroups(n, delim) {
    var digits;

    delim = delim || '<span class="tsp"> </span>';

    n = n.toFixed(0);
    digits = n.length > 3 ? n.length % 3 : 0;

    return (digits ? n.substr(0, digits) + delim : '') +
        n.substr(digits).replace(/(\d{3})(?=\d)/g, "$1" + delim);
}

А эта функция разделяет группы разрядов числа. В качестве разделителя по умолчанию я использую пробел половинной ширины.


.tsp {
    font-size: 50%;
    line-height: 1;
}

Или можно указать требуемый разделитель вторым параметром функции.

Комментарии к заметке: 1

Вертикальные метрики у веб-шрифтов

Работая с веб-шрифтами можно натолкнуться на серьёзную проблему с вертикальными метриками на разных платформах (OS X и Windows). Это может проявляется в том, что назначив цвет фону строчного элемента, расцвеченный прямоугольник во всех OS X браузерах будет смещен вниз.

У Font Squirrel есть решение этой проблемы.

Исправление вертикальных метрик шрифта с помощью Font Squirrel

Приведу примеры с использованием PT Sans до и после исправления вертикальных метрик.

Отображение в OS X

Safari 5.1

PT Sans в Safari 5.1 (OS X)

Firefox 13

PT Sans в Firefox 13 (OS X)

Chrome 19

PT Sans в Chrome 19 (OS X)

Opera 12

PT Sans в Opera 12 (OS X)

Отображение в Windows

Interner Explorer 9

PT Sans в Internet Explorer 9 (Windows)

Firefox 13

PT Sans в Firefox 13 (Windows)

Chrome 19

PT Sans в Chrome 19 (Windows)

Opera 12

PT Sans в Opera 12 (Windows)

Интересное наблюдение

Любопытно, но рендеринг текста в Windows версиях Opera, Firefox, Chrome оказывается поразительно идентичен между собой вплоть до межбуквенных и межстроковых интервалов. Увы, но такого же постоянства нет в OS X браузерах.

Комментарии к заметке: 2