Архивы WEB - Страница 19 из 54

CSS: Выравнивание содержимого блоков по вертикали

05.03.2021 Павел Грибов WEB

Чтобы получилось нечто подобное:

HTML:

    <div class="tile2">
        <div class="icons_left"><img height="32px" src="/images/list.png"></div>
        <div class="icons_right" ><img height="32px" src="/images/heart.png"></div>
    </div>

</div>

CSS:

.tile2{
    grid-template-columns: 50% 50%;
    display: flex;
    height: 100%;    
}
.tile2>.icons_left {
    color: #003264;
    font-weight: bold;
    font-size: xx-large;
    text-align: end;
    margin:  auto;
    cursor: pointer;
} 
.tile2>.icons_right {
    color: #003264;
    font-weight: bold;
    font-size: xx-large;
    text-align: left;
    margin:  auto;
    cursor: pointer;
}

.tile2{

grid-template-columns: 50% 50%;

display: flex;

height: 100%;

}

.tile2>.icons_left {

color: #003264;

font-weight: bold;

font-size: xx-large;

text-align: end;

margin: auto;

cursor: pointer;

}

.tile2>.icons_right {

color: #003264;

font-weight: bold;

font-size: xx-large;

text-align: left;

margin: auto;

cursor: pointer;

}

Оставить комментарий css, vertical-alling, выравнивание по вертикали

Нагрузочное тестирование сайта с помощью Jmeter

01.03.2021 Павел Грибов WEB

Задача: провести нагрузочное тестирование сайта. Выяснить сколько пользователей в минуту, он может обслужить.

Дополнительно: тестирование сервера WEBSocket, так-же используемого на том-же сервере, где и расположен сайт.

Решение: используем инструмент Jmeter от фонда Apache.

1) Скачиваем, распаковываем, запускаем из папки bin или файл jmeter.bat (Windows) или jmeter.sh (Linux)

2) На сайте плагинов скачиваем плагины Plugins Manager и JMeterWebSocketSamplers. Ложим их в папку lib\ext, Jmeter перезапускаем. При помощи Plugins Manage, в дальнейшем (если захотите) сможете устанавливать дополнительные плагины.

3) Правой клавишей щелкаем по TestPlan, и создаем поток тестирования.

Далее в настройках выставляем количество потоков, время тестирования и количество циклов

4) Добавляем авторизацию на сайте (ну или просто открытие страницы — тогда POST запрос не заполняем)

К этому же узлу добавим и отчетность:

5) По тому-же принципу последовательно добавляем задачи WebSocketOpen,WebSocketSingleWrite и WebSocketClose. Т.е. после авторизации пользователя мы откроем соединение, пошлем что-то на сервер и закроем соединение.

Далее играем циферками количества поток, чтобы выяснить на скольких потоках сайт упадет отдохнуть..

Оставить комментарий jmeter, WebSocket, нагрузочное тестирование

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

27.02.2021 Павел Грибов WEB

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

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

npm install gif2webp

1	npm install gif2webp

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

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

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

Оставить комментарий gif2webp

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

18.02.2021 Павел Грибов WEB

Задача: преобразовать строку вида 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&gt;-1  ? dateItems[yearIndex]    : today.getFullYear();
  var month = monthIndex&gt;-1 ? dateItems[monthIndex]-1 : today.getMonth()-1;
  var day   = dayIndex&gt;-1   ? dateItems[dayIndex]     : today.getDate();

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

  return new Date(year,month,day,hour,minute,second);
};

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");

1	dt="18.02.2021 10:35:00".toDateFromat("dd.mm.yyy hh:ii:ss");

Результат:

Оставить комментарий javascript, дата, строка, строка в дату

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

16.02.2021 Павел Грибов WEB

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

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

    // кнопка фильтров
  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);
    });

// кнопка фильтров

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);

});

Оставить комментарий api, checkbox, input, listbox, map.yandex, yandex, список

« 1 … 17 18 19 20 21 … 54 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31