Заметки по тэгу «JS»
11 March 2018, 03:40 MSK
Я долго думал, стоит ли публиковать в блоге не свой код, и решил, что иногда всё-таки стоит, потому что решение описываемой в этом посте проблемы в рунете мне найти не удалось.
Сразу к делу. В мобильном Сафари уже несколько Айосов подряд есть такая замечательная кнопка (вызывается по долгому нажатию на значок перезагрузки страницы в адресной строке):
request-desktop-site
Такая же кнопка есть в Хроме на Андроиде и Айосе. В английском интерфейсе называется «Request Desktop Site».
К сожалению, работает она по-дурацки: когда нажимаешь эту кнопку, браузер просто подменяет свой юзер-агент с мобильного на десктопный, и всё. Кто-нибудь верстает сайты так, чтобы подсовывать браузерам разные стили в зависимости от юзер-агента? Обычно нет.
Тэги: JSwebdev
27 July 2017, 11:28 MSK
Часто в интернете на сайтах можно встретить тексты вроде «2 комментариев» или «в вашей корзине 3 товаров». Так происходит, потому что веб-мастерам лень заморачиваться и писать нормально, склоняя слова по числам: они выводят переменную с количеством записей и пишут слово в какой-то одной форме рядом.
В английском языке эта проблема решается проще — нужно всего лишь проверить переменную на единственное или множественное число и, при необходимости, подставить букву «s» (1 comment, >1 comments). В русском языке слова приходится склонять. Но, на самом деле, это делается не сложнее проверки на множественное число. Для этого можно использовать простую функцию. Код на PHP:
function sklonyalka($n, $v1, $v2, $v5)
{
    return $n % 100 < 10 || $n % 100 > 20 ? ($n % 10 == 1 ? $v1 : ($n % 10 >= 2 && $n % 10 <= 4 ? $v2 : $v5)) : $v5;
}
Сюда нужно передать параметры: $n — число записей, $v1 — форма слова для количества «1», $v2 — форма слова для количества «2», $v5 — форма слова для количества «5». Ниже пример использования:
В вашей корзине <b><?php echo $items_number; ?></b> <?php echo sklonyalka($items_number, 'товар', 'товара', 'товаров'); ?>.
Естественно, разумнее использовать шаблонизатор, а не встраивать php-тэги в html-код, но пример приведён чисто для того, чтобы показать принцип работы.
Функция легко переписывается на другие языки. Например, на JavaScript:
function sklonyalka(n, v1, v2, v5)
{
    return n % 100 < 10 || n % 100 > 20 ? (n % 10 == 1 ? v1 : (n % 10 >= 2 && n % 10 <= 4 ? v2 : v5)) : v5;
}
На этом всё, спасибо за внимание. Делайте сайты для людей. :-)
Тэги: JSPHPwebdev
13 July 2017, 13:32 MSK
Год назад я писал, как Мегафон списывает деньги просто так. На этот раз расскажу об ещё одном вопиющем случае.
Началось всё с того, что мне позвонил один старый клиент и сообщил, что у него на айпаде не работает его сайт. Я попросил скриншот, посмотрел его и понял, что на сайте как будто бы отключён джаваскрипт. Причём, такая проблема возникала только у клиента, у меня всё было нормально, многочисленные попытки воспроизвести ошибку не приводили к успеху. Программистам знакомо такое понятие как Гейзенбаг (в честь принципа неопределённости Гейзенберга) — ошибка, которая меняет свои свойства при попытке её обнаружения.
В процессе долгих мучительных поисков было установлено, что эта ошибка возникает на мобильных девайсах, на которых оператор — Мегафон. Причём мне ещё пришлось отключить VPN на айфоне и айпаде, чтобы увидеть этот баг. Сначала я думал, что это на сайт пробрался какой-то хитрый вирус, но всё оказалось куда проще.
Оказалось, что Мегафон вставляет свои скрипты в незащищённый HTTP-трафик своих клиентов.
Тэги: JSVPNМегафонненависть
10 September 2014, 03:52 MSK
Как вы уже, наверное, успели заметить (см. предыдущий пост), в моем блоге фрагменты исходного кода подсвечиваются согласно синтаксису языков. Для этого я использую небезызвестный скрипт Ивана Сагалаева highlight.js. Оказалось, что этот скрипт не работает в Internet Explorer 8. Пришлось написать следующую обёртку для скрипта:
if (!navigator.userAgent.match(/MSIE [1-8]/ig)) { … }
Таким образом, посетители, использующие IE8, увидят сайт, но у них просто не сработает подсветка синтаксиса.
Тэги: JSwebdev
10 September 2014, 03:17 MSK
Всем привет. Предлагаю довольно простой способ показать посетителю сайта время некоего события с учётом часового пояса посетителя. Способ используется во многих рабочих проектах уже несколько лет.
В качестве примера рассмотрим время создания этой заметки. По Москве — 10 сентября 2014, 03:17. При этом посетитель из Финляндии увидит время 02:17. Проверить это легко — достаточно перевести время на вашем компьютере на час назад.
К сожалению, без помощи джаваскрипта не обойтись — браузеры ничего не сообщают серверу о часовом поясе клиента. И так, в базе данных время этой заметки хранится в виде «2014-09-10 03:17:00» (время на сервере — московское, но это не имеет никакого значения). PHP-скрипт преобразовывает эту строку в таймштамп, а затем в следующий HTML-код:
<span class="fg-time" data-time="xxxxx" data-format="j F Y, H:i">
    9 September 2014, 23:17 GMT
</span>
Здесь xxxxx — это разница между текущим временем и таймштампом. j F Y, H:i — это формат, в котором выводится дата, а внутри тэга span — время по Гринвичу (выведено через PHP-функцию gmdate).
Далее при помощи следующего джаваскрипта (используется jQuery) проходимся по всем таким тэгам и выполняем преобразование:
$('.fg-time').each(function(){
     var time = $(this).data('time'),
          format = $(this).data('format');
     $(this).text(fgDate(format, time));
});
Исходный код функции fgDate, позволяющей красиво оформить дату и время (аналог PHP-функции date) можно скачать из моего github-репозитория.
Таким образом, суть метода заключается в том, чтобы на сервере посчитать разницу между временем события и текущим временем, передать эту разницу клиенту и при помощи джаваскрипта вывести время с учётом часового пояса клиента (для этого нужно вычесть переданную разницу от текущего времени).
Тэги: JSPHPwebdev