Category Archives: Web

JavaScript печать элемента на странице

Для вызова печати контента средствами JS реализуем такую функцию:

function printElement(selector) {
    const WinPrint = window.open('','','left=50,top=50,width=800,height=640,toolbar=0,scrollbars=1,status=1');
    WinPrint.document.write('');
    WinPrint.document.write(prtContent.innerHTML);
    WinPrint.document.write('');
    WinPrint.document.close();
    WinPrint.focus();
    WinPrint.print();
}

function printElement(selector) {

const WinPrint = window.open('','','left=50,top=50,width=800,height=640,toolbar=0,scrollbars=1,status=1');

WinPrint.document.write('');

WinPrint.document.write(prtContent.innerHTML);

WinPrint.document.write('');

WinPrint.document.close();

WinPrint.focus();

WinPrint.print();

}

И вызовем ее:

printElement(document.querySelector('.qr-code-view-page .area-qr-code'));

1	printElement(document.querySelector('.qr-code-view-page .area-qr-code'));

JavaScript поиск массива в массиве

Дано: Фильтр по услугам: клейка обоев, выравнивание полов, покраска стен. Список работников, работник может делать что-то одно или несколько услуг. Фильтр (множество чекбоксов) Результаты (множество) Нужно вывести работников которые соответствуют хотя бы одному из фильтров по услугам. Представим что в фильтре выбраны некие услуги [1,2,3,5,6] Трансформации массива map

// вернет [true, undefined, undefined, undefined, undefined]
[1,2,3,5,6].map(function (element) {
	if ([1,10].indexOf(element) !== -1) {
		return true;
	}
});

// вернет [true, undefined, undefined, undefined, undefined]

[1,2,3,5,6].map(function (element) {

if ([1,10].indexOf(element) !== -1) {

return true;

}

});

// вернет [undefined, undefined, undefined, undefined, undefined]
[1,2,3,5,6].map(function (element) {
	if ([21,10].indexOf(element) !== -1) {
		return true;
	}
});

// вернет [undefined, undefined, undefined, undefined, undefined]

[1,2,3,5,6].map(function (element) {

if ([21,10].indexOf(element) !== -1) {

return true;

}

});

findIndex Вернет индекс из… Read More »

Composer шпаргалка

Установка пакетов

composer install --prefer-dist --no-dev

1	composer install --prefer-dist --no-dev

Имитация установки пакетов(безопасное тестирование пакетов без физического обновления/установки)

composer update --dry-run --profile --verbose

1	composer update --dry-run --profile --verbose

composer install --dry-run --profile --verbose

1	composer install --dry-run --profile --verbose

Рекомендую к прочтению https://habr.com/ru/post/258891/

Js пример класса для slick Slider

Js ООП Class Slick slider

class SlickSlider {
    constructor(id, countShow, countScroll, idArrows, idDots) {
        this.elem = id;
        this.slidesToShow = countShow;
        this.slidesToScroll = countScroll;
        this.appendArrows = $(idArrows);
        this.appendDots = $(idDots);
        this.responsives = [];
    }

    get initSlider() {
        return this.init();
    }

    init() {
        let options = this.slider();
        if (this.responsives) {
            options.responsive = this.responsives;
        }
        $(this.elem).slick(options);
    }
    slider() {
        return {
            slidesToShow: this.slidesToShow,
            slidesToScroll: this.slidesToScroll,
            dots: true,
            appendArrows: this.appendArrows,
            appendDots: this.appendDots,
            touchThreshold: 10
        }
    }
    addResponsive(weight, mobileShow, mobileScroll) {
        let obj =  {
            breakpoint: weight,
            settings: {
                slidesToShow: mobileShow,
                slidesToScroll: mobileScroll
            }
        };

        this.responsives.push(obj);
    }
}

let slider = new SlickSlider('.slider-item-four', 4, 1, '.slider-control-four', '.slider-control-four .slider-dots');

slider.addResponsive(1680,3,1);
slider.addResponsive(1580, 2, 1);

slider.initSlider;

class SlickSlider {

constructor(id, countShow, countScroll, idArrows, idDots) {

this.elem = id;

this.slidesToShow = countShow;

this.slidesToScroll = countScroll;

this.appendArrows = $(idArrows);

this.appendDots = $(idDots);

this.responsives = [];

}

get initSlider() {

return this.init();

}

init() {

let options = this.slider();

if (this.responsives) {

options.responsive = this.responsives;

}

$(this.elem).slick(options);

}

slider() {

return {

slidesToShow: this.slidesToShow,

slidesToScroll: this.slidesToScroll,

dots: true,

appendArrows: this.appendArrows,

appendDots: this.appendDots,

touchThreshold: 10

}

addResponsive(weight, mobileShow, mobileScroll) {

let obj = {

breakpoint: weight,

settings: {

slidesToShow: mobileShow,

slidesToScroll: mobileScroll

}

};

this.responsives.push(obj);

}

let slider = new SlickSlider('.slider-item-four', 4, 1, '.slider-control-four', '.slider-control-four .slider-dots');

slider.addResponsive(1680,3,1);

slider.addResponsive(1580, 2, 1);

slider.initSlider;

jQuery check init plugin for element

Проверка плагина примененного к элементу jQuery

$('.catalog_filter_list:data(flickity)')

1	$('.catalog_filter_list:data(flickity)')

Нужно применить атрибут

$('ELEMENT:data(ПЛАГИН)')

1	$('ELEMENT:data(ПЛАГИН)')

Docker example for yii2

# https://phptoday.ru/post/gotovim-lokalnuyu-sredu-docker-dlya-razrabotki-na-php
# Версия docker-compose
version: '2'
# Список наших сервисов (контейнеров)
services:
    nginx:
        container_name: nginx
        # используем последний стабильный образ nginx
        image: nginx:latest
        networks:
            application_nerwork:
                ipv4_address: 172.18.18.2
        # маршрутизируем порты
        ports:
            - "80:80"
            - "443:443"
        # монтируем директории, слева директории на основной машине, справа - куда они монтируются в контейнере
        volumes:
            - ./hosts:/etc/nginx/conf.d
            - ./www:/var/www
            - ./logs:/var/log/nginx
        # nginx должен общаться с php контейнером
        links:
            - php
    php:
        container_name: php
        # у нас свой образ для PHP, указываем путь к нему и говорим что его надо собрать
        build: ./images/php
        networks:
            application_nerwork:
                ipv4_address: 172.18.18.3
        # этот образ будет общаться с mysql
        links:
            - mariadb
        depends_on:
            - mariadb
        # монтируем директорию с проектами
        volumes:
            - ./www:/var/www
    mariadb:
        container_name: mariadb
        image: mariadb:10.3
        expose:
            - 3312
        networks:
            application_nerwork:
                ipv4_address: 172.18.18.4
        ports:
          - 3312:3306
        volumes:
          - ./mariadb:/var/lib/mysql
        environment:
            MYSQL_ROOT_PASSWORD: root_password_security
    phpmyadmin:
        container_name: phpmyadmin
        image: phpmyadmin/phpmyadmin
        networks:
            application_nerwork:
                ipv4_address: 172.18.18.5
        ports:
          - 8765:80
        environment:
            MYSQL_ROOT_PASSWORD: root_password_security
        links:
          - mariadb:db
        depends_on:
          - mariadb

networks:
    application_nerwork:
        driver: bridge
        driver_opts:
          com.docker.network.enable_ipv6: "false"
        ipam:
          driver: default
          config:
          - subnet: 172.18.18.0/24
            gateway: 172.18.18.1

# https://phptoday.ru/post/gotovim-lokalnuyu-sredu-docker-dlya-razrabotki-na-php

# Версия docker-compose

version: '2'

# Список наших сервисов (контейнеров)

services:

nginx:

container_name: nginx

# используем последний стабильный образ nginx

image: nginx:latest

networks:

application_nerwork:

ipv4_address: 172.18.18.2

# маршрутизируем порты

ports:

- "80:80"

- "443:443"

# монтируем директории, слева директории на основной машине, справа - куда они монтируются в контейнере

volumes:

- ./hosts:/etc/nginx/conf.d

- ./www:/var/www

- ./logs:/var/log/nginx

# nginx должен общаться с php контейнером

links:

- php

php:

container_name: php

# у нас свой образ для PHP, указываем путь к нему и говорим что его надо собрать

build: ./images/php

networks:

application_nerwork:

ipv4_address: 172.18.18.3

# этот образ будет общаться с mysql

links:

- mariadb

depends_on:

- mariadb

# монтируем директорию с проектами

volumes:

- ./www:/var/www

mariadb:

container_name: mariadb

image: mariadb:10.3

expose:

- 3312

networks:

application_nerwork:

ipv4_address: 172.18.18.4

ports:

- 3312:3306

volumes:

- ./mariadb:/var/lib/mysql

environment:

MYSQL_ROOT_PASSWORD: root_password_security

phpmyadmin:

container_name: phpmyadmin

image: phpmyadmin/phpmyadmin

networks:

application_nerwork:

ipv4_address: 172.18.18.5

ports:

- 8765:80

environment:

MYSQL_ROOT_PASSWORD: root_password_security

links:

- mariadb:db

depends_on:

- mariadb

networks:

application_nerwork:

driver: bridge

driver_opts:

com.docker.network.enable_ipv6: "false"

ipam:

driver: default

config:

- subnet: 172.18.18.0/24

gateway: 172.18.18.1

server {
    server_name yii2docker.dev;

    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;

    root /var/www/yii2docker.dev/web;
    index index.php;

    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }

    location / {
        # Перенаправляем все запросы к несуществующим директориям и файлам на index.php
        try_files $uri $uri/ /index.php?$args;
    }

    location ~ /\.(ht|svn|git) {
        deny all;
    }
}

server {

server_name yii2docker.dev;

error_log /var/log/nginx/error.log;

access_log /var/log/nginx/access.log;

root /var/www/yii2docker.dev/web;

index index.php;

location ~ \.php$ {

try_files $uri =404;

fastcgi_split_path_info ^(.+\.php)(/.+)$;

fastcgi_pass php:9000;

fastcgi_index index.php;

include fastcgi_params;

fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;

fastcgi_param PATH_INFO $fastcgi_path_info;

}

location / {

# Перенаправляем все запросы к несуществующим директориям и файлам на index.php

try_files $uri $uri/ /index.php?$args;

}

location ~ /\.(ht|svn|git) {

deny all;

}

FROM php:7.1-fpm-alpine

# intl, zip, soap
RUN apk add --update --no-cache libintl icu icu-dev libxml2-dev \
    && docker-php-ext-install intl zip soap

# mysqli, pdo, pdo_mysql
RUN docker-php-ext-install mysqli pdo pdo_mysql

# mcrypt, gd, iconv
RUN apk add --update --no-cache freetype-dev libjpeg-turbo-dev libmcrypt-dev libpng-dev \
    && docker-php-ext-install iconv mcrypt \
    && docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/ \
    && docker-php-ext-install gd

# gmp, bcmath
RUN apk add --update --no-cache gmp gmp-dev \
    && docker-php-ext-install gmp bcmath

# redis, apcu
RUN docker-php-source extract \
    && apk add --no-cache --virtual .phpize-deps-configure $PHPIZE_DEPS \
    && pecl install redis \
    && pecl install apcu \
    && docker-php-ext-enable redis apcu \
    && apk del .phpize-deps-configure \
    && docker-php-source delete

# imagick
RUN apk add --update --no-cache autoconf g++ imagemagick-dev libtool make pcre-dev \
    && pecl install imagick \
    && docker-php-ext-enable imagick \
    && apk del autoconf g++ libtool make pcre-dev

# git client, mysql-client
RUN apk add --update --no-cache git mysql-client

# pcntl
RUN docker-php-ext-install pcntl

RUN sed -i -e 's/listen.*/listen = 0.0.0.0:9000/' /usr/local/etc/php-fpm.conf

RUN echo "expose_php=0" > /usr/local/etc/php/php.ini

WORKDIR /var/www

CMD ["php-fpm"]

FROM php:7.1-fpm-alpine

# intl, zip, soap

RUN apk add --update --no-cache libintl icu icu-dev libxml2-dev \

&& docker-php-ext-install intl zip soap

# mysqli, pdo, pdo_mysql

RUN docker-php-ext-install mysqli pdo pdo_mysql

# mcrypt, gd, iconv

RUN apk add --update --no-cache freetype-dev libjpeg-turbo-dev libmcrypt-dev libpng-dev \

&& docker-php-ext-install iconv mcrypt \

&& docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/ \

&& docker-php-ext-install gd

# gmp, bcmath

RUN apk add --update --no-cache gmp gmp-dev \

&& docker-php-ext-install gmp bcmath

# redis, apcu

RUN docker-php-source extract \

&& apk add --no-cache --virtual .phpize-deps-configure $PHPIZE_DEPS \

&& pecl install redis \

&& pecl install apcu \

&& docker-php-ext-enable redis apcu \

&& apk del .phpize-deps-configure \

&& docker-php-source delete

# imagick

RUN apk add --update --no-cache autoconf g++ imagemagick-dev libtool make pcre-dev \

&& pecl install imagick \

&& docker-php-ext-enable imagick \

&& apk del autoconf g++ libtool make pcre-dev

# git client, mysql-client

RUN apk add --update --no-cache git mysql-client

# pcntl

RUN docker-php-ext-install pcntl

RUN sed -i -e 's/listen.*/listen = 0.0.0.0:9000/' /usr/local/etc/php-fpm.conf

RUN echo "expose_php=0" > /usr/local/etc/php/php.ini

WORKDIR /var/www

CMD ["php-fpm"]

в config/db host прописываем IP mariadb или название контейнера в данном случае mariadb

PHP код в одну строку

function oneLine($string)
{
    $string = str_replace(["\r", "\n", "\t"], null, $string);
    $string = mb_ereg_replace('[\s]+', ' ', $string);
    $string = trim($string);
    return $string;
}

function oneLine($string)

{

$string = str_replace(["\r", "\n", "\t"], null, $string);

$string = mb_ereg_replace('[\s]+', ' ', $string);

$string = trim($string);

return $string;

}

Webp apache/nginx сжимаем изображения

Для апача

<ifModule mod_rewrite.c>
  RewriteEngine On 
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_URI}  (?i)(.*)(\.jpe?g|\.png)$ 
  RewriteCond %{DOCUMENT_ROOT}%1.webp -f
  RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R] 
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

RewriteEngine On

RewriteCond %{HTTP_ACCEPT} image/webp

RewriteCond %{REQUEST_URI} (?i)(.*)(\.jpe?g|\.png)$

RewriteCond %{DOCUMENT_ROOT}%1.webp -f

RewriteRule (?i)(.*)(\.jpe?g|\.png)$ %1\.webp [L,T=image/webp,R]

</IfModule>

Header append Vary Accept env=REDIRECT_accept

</IfModule>

AddType image/webp .webp

pjax reload containter

$.pjax.reload({container: '#pjax-shops-list', timeout: 5000, data: {city:id}, replace:false});

1	$.pjax.reload({container: '#pjax-shops-list', timeout: 5000, data: {city:id}, replace:false});

htaccess редирект поддоменов на основной домен

RewriteCond %{HTTP_HOST} ^sub1.example.com [OR]
RewriteCond %{HTTP_HOST} ^sub2.example.com [OR]
RewriteCond %{HTTP_HOST} ^old.example.com [OR]
RewriteCond %{HTTP_HOST} ^forum.example.com
RewriteRule ^(.*)$ https://www.example.com%{REQUEST_URI} [L,R=301]

RewriteCond %{HTTP_HOST} ^sub1.example.com [OR]

RewriteCond %{HTTP_HOST} ^sub2.example.com [OR]

RewriteCond %{HTTP_HOST} ^old.example.com [OR]

RewriteCond %{HTTP_HOST} ^forum.example.com

RewriteRule ^(.*)$ https://www.example.com%{REQUEST_URI} [L,R=301]

Используем ключевой параметр [OR], для задачи условия нескольким элементам. Тем самым мы добьемся, что старые поддомены будут редиректить на основной домен