Архив рубрики: WEB

gif2webp : крнвертация gif в формат webp

Задача: увеличить скорость загрузки анимации на одном из сайтов

Решение: переведем анимацию в формат webp. Для этого используем утилиту gif2webp :

npm install gif2webp

Далее собственно конвертируем:

gif2webp dostavka_s33k-z4.gif -o dostavka_s33k-z4.webp

Javascript: конвертация даты и строки в тип Date

Задача: преобразовать строку вида 18.02.2021 10:12 в переменную javascript типа дата.

Решение: создадим универсальный прототип конвертирования для строки:

String.prototype.toDateFromat = function(format){
  var normalized      = this.replace(/[^a-zA-Z0-9]/g, '-');
  var normalizedFormat= format.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-');
  var formatItems     = normalizedFormat.split('-');
  var dateItems       = normalized.split('-');

  var monthIndex  = formatItems.indexOf("mm");
  var dayIndex    = formatItems.indexOf("dd");
  var yearIndex   = formatItems.indexOf("yyyy");
  var hourIndex     = formatItems.indexOf("hh");
  var minutesIndex  = formatItems.indexOf("ii");
  var secondsIndex  = formatItems.indexOf("ss");

  var today = new Date();

  var year  = yearIndex>-1  ? dateItems[yearIndex]    : today.getFullYear();
  var month = monthIndex>-1 ? dateItems[monthIndex]-1 : today.getMonth()-1;
  var day   = dayIndex>-1   ? dateItems[dayIndex]     : today.getDate();

  var hour    = hourIndex>-1      ? dateItems[hourIndex]    : today.getHours();
  var minute  = minutesIndex>-1   ? dateItems[minutesIndex] : today.getMinutes();
  var second  = secondsIndex>-1   ? dateItems[secondsIndex] : today.getSeconds();

  return new Date(year,month,day,hour,minute,second);
};
dt="18.02.2021 10:35:00".toDateFromat("dd.mm.yyy hh:ii:ss");

Результат:

Список выбора с checkbox на карте yandex

Чтобы получилось примерно такое:

 

Нужно выполнить довольно много телодвижений:

    // кнопка фильтров
  var listBoxItems = ['111', '222']
       .map(function(title) {
            return new ymaps.control.ListBoxItem({
                data: {
                    content: title
                },
                state: {
                    selected: false
                }
            })
        }),
        // Список 
        listBoxControl = new ymaps.control.ListBox({
            data: {
                content: 'Фильтр',
                title: 'Фильтр'
            },
            items: listBoxItems,
            state: {
                // Признак, развернут ли список.
                expanded: false,
                filters: listBoxItems.reduce(function(filters, filter) {
                    filters[filter.data.get('content')] = filter.isSelected();
                    return filters;
                }, {})
            }
        });
    myMap.controls.add(listBoxControl);   
    listBoxControl.events.add(['select', 'deselect'], function(e) {
        var listBoxItem = e.get('target');
        console.log(e);
        var filters = ymaps.util.extend({}, listBoxControl.state.get('filters'));
        filters[listBoxItem.data.get('content')] = listBoxItem.isSelected();
        console.log(filters);
        listBoxControl.state.set('filters', filters);
    });

JavaScript: Проверка пароля на сложность

Задача: необходимо проверить пароль на сложность по критериям:

  •  есть маленькие буквы
  • есть большие буквы
  • есть специальные символы
  • пароль длиннее 7 символов

Ну в принципе подойдет чтото-вроде:

function PasswordValidTest(pass){
        var count = 0;    
        count += /[a-z]/.test(pass) ? 1 : 0; //есть маленькие буквы
        count += /[A-Z]/.test(pass) ? 1 : 0; //есть большие буквы
        count += /\d/.test(pass) ? 1 : 0;   
        count += /[^\w\d\s]/.test(pass) ? 1 : 0;
        (count>2 & !/[\s]+/.test(pass)) ? res=true:res=false;    
        if ((res==true)&&(pass.length<7)) res=false;
     return res;   
}

Ну и в нагрузку проверка Email:

function EmailValidTest(email){
 var re = /^[\w-\.]+@[\w-]+\.[a-z]{2,4}$/i;   
 return re.test(email);
};
function EmailValidRulesTest(email){
  validmails=['@mail.ru','@yandex.ru','@ya.ru','@list.ru','@inbox.ru','@gmail.com','@icloud.com','@bk.ru'];  
  re=false;  
  validmails.forEach(function(item, i, validmails){
    if (email.indexOf(item)!==-1) re=true;
  });   
  return re;
};

Символ рубля на сайте

Шел конец 2020 года, а мы всё еще не умеем штатно отображать символ рубля. Вот одно из решений:

1) Устанавливаем вот этот шрифт в css:

@font-face { 
    font-family: "rouble";
    src: url("/fonts/rouble.otf") format("opentype");
}
.rub { font-family: "rouble"; }

2) В коде прописываем:

<span class="rub">i</span>