lazy loading. черновик

1. Нативная ленивая загрузка встроенная в браузер.
Ван не надо писать никакой код, кроме добавления атрибута  в <img loading='lazy'> браузер
и браузер Chrome всё сделает за вас. Однако этот атрибут поддерживают не все браузеры.
Например Safary(декстоп и мобильный), а также android FireFox - не поддержижвает.

https://mathiasbynens.be/demo/img-loading-lazy - страница с кучей картнок кошек. Пример поддержки гугл хрома с встроенной поддержкой lazyloading.
Подбробнее об этом: https://web.dev/native-lazy-loading/ и https://css-tricks.com/a-native-lazy-load-for-the-web-platform/


2. Пишем сами.
https://css-tricks.com/tips-for-rolling-your-own-lazy-loading/
https://habr.com/ru/company/ruvds/blog/448914/ - использование нативной загрузки описанной в п1. и стороннего скрипта (для тех браузеров, кто не поддерживает)


https://siteclinic.ru/blog/internal-optimization/lazy-load/

IE11 - как объявить class? Решение ошибки SCRIPT 1002

 class myClass {
     myfunction() {
         return true;
     }
 }
var mes = new myClass;
mes.myfunction(); // return true;




Дело в том, что IE, а точнее встроенный в него стандарт javascript ES5 не поддерживает классы (а объявление классов уже относится к ES6) и соответственно вышеприведенный код будет выдавать ошибку . Таблицу совместимости можно посмотреть тут

Что же делать?
Первый вариант. Переписать код без объявления классов, согласно стандарту ES5. Например:


mes = {};
mes.myfunction = function(){
    return true;
}



mes.myfunction(); // return true;



Или второй вариант. Использовать babel https://babeljs.io/repl
вставить ваш код с классом и получить сгенерированный код такойже функциональности для es5. (слева необходимо отметить в Presets es2015)
Полученный сгенерированный код приводить не буду, т.к. он занимает очень много строк. Вы сами можете его сгенерировать и посмотреть.

Задать регион для гугла в KeyCollector

По умолчанию KeyCollector наначает регион для съема позиций для гугла исходя из текущего вашего ip.
Однако если вы, например, из Новосибирска, а хотите снять позиции для Москвы, то необходимо указать следующее значение параметра UULE(как на скрине).
Как узнать uule для любого региона.
1. Зайти на https://padavvan.github.io/ и указать ваш регион. Для Москвы это будет выглядеть так: Moscow,Moscow,Russia
Соответственно, нужно нам значение UULE для вставки в настройку KeyCollector: uule=w+CAIQICIUTW9zY293LE1vc2NvdyxSdXNzaWE
2. Посмотреть таблицу регионов (я так и не понял, это все регионы перечислены или только некоторые) можно узнать тут: https://developers.google.com/adwords/api/docs/appendix/geotargeting (Download Geo Target CSV file)




PS. Указание региона через lr=213 (для Москвы) - результа не принесет в 2020 году =)

Разворачиваем LAMP на ubuntu 18.04

https://www.digitalocean.com/community/tutorials/how-to-install-linux-apache-mysql-php-lamp-stack-ubuntu-18-04
https://www.digitalocean.com/community/tutorials/how-to-install-and-secure-phpmyadmin-on-ubuntu-18-04

И настраиваем виртуальные хосты:
https://www.digitalocean.com/community/tutorials/apache-ubuntu-16-04-ru

Ине забываем про символические ссылки:

sudo ln -s /etc/apache2/sites-available/example.com /etc/apache2/sites-enabled/



Тоже самое но с nginx на примере buntu 14.04
http://devacademy.ru/posts/nginx-ubuntu-1404/

Изменяем php.ini:
display_startup_errors  = On
short_open_tag = On
max_execution_time = 240
max_input_time = 120
upload_max_filesize = 100M

Устанавливаем Imagick
$ sudo apt-get install imagemagick
$ sudo apt-get install php-imagick

Как установить modx на локальный сервер через git

Рассмотрю пример как быстро размернуть Modx на локальном сервере.
У меня это получилось не с первого раза, потому что установка modx через git не такая быстрая в одно касание. А приходится делать дополнительные обязательные действия (зачем и почему так сделано, когда можно было обойтится и без них - хз, такой вот Modx).

1. Вам нужно подготовить рабочее окружение,а это: nginx/apache + php + mysql
Кратко я изложил это в данном посте. Я делал окружение через Docker в Windows. Вы можете ипользовать любое другое окружение.
Создайте элементарный скрипт, разместите его и зайдите на http://localhost - чтобы убедиться что он у вас работает.
2. Скачиваем modx.
Переходим на страницу https://docs.modx.com/revolution/2.x/getting-started/installation/git-installation
Читаем и обязательно выполняем пункт Run the Build! - Если его пропустить то modx при установке выдаст ошибку и работать не будет
Итак, я тут все опишу что надо делать.
Все делаем через терминал:
1. переходим в пустую папку, в которой у вас будет размещен сайт.
2. Выполняем:
git clone http://github.com/modxcms/revolution.git .


Обратите внимание что на конце "пробел и точка" - чтобы репозитория клонировалась в текущую папку. (можно и по другому, но мне так удобней)
git fetch --all
git checkout v2.7.1-pl  (стабильная последняя версия на момент 07.05.2019)
docker-compose up -d


3. Переименовываем _build/build.config.sample.php to _build/build.config.php и прописываем настройки нужные в нем
4. Переименовываем _build/build.properties.sample.php to _build/build.properties.php и прописываем настройки нужные в нем
5. Запускаем transport.core.php (из командной строки или из браузера)
cd _build
php transport.core.php



6. Проверяем файлы и папки, которые создались в результате п.5.
core/packages/core.transport.zip, core/packages/core/, core/packages/core/manifest.php
7. И только теперь можно переходить к устанвоке через localhost/setup/
Алилуя!!!

Ошибки, которые могут появится

1. Не удалось установить MODX /core/packages/core.transport.zip - данный файл отсутствует

Выглядит так: Не удалось установить MODX, поскольку MODX не смог распаковать пакет /var/www/html/core/packages/core.transport.zip
Да, все правильно, этот файл отсутствует в репозитории Modx на гитхабе.
Что делать? Выполнять пункты 3, 4, 5, 6 - которые написаные чуть выше!

2. Parse error: syntax error, unexpected '{' in /var/www/html/core/config/config.inc.php on line 13

Да, это прям обязательная ошибка, без которой ну никак я не мог обойтись
Что делать? Открываем данный файл, находим 13 строчку и ставим значение в 'кавычки'. Тоже самое делаем и с 14 строкой (вроде бы 14 строка, пишу по памяти)

Если все сделал по данной инструкции, но по прежнему возникают ошибка
1. Удаляете всё из папки core/cache/*
2. Удаляете бд и создаете её заново
3. установите с нуля через  /setup

Вроде всё! Вопросы? пишите в комментариях, постараюсь помочь!

Docker для windows - php apache mysql phpmyadmin сборка

Мне понадобилась рабочая сборка именно с apache2, тк важно было наличие файла .htaccess, чтобы симитировать окружение как на боевом хостинге.
Отличный образ linux php apache mysql phpmyadmin docker с предустановленными настройками по умолчанию https://github.com/sprintcube/docker-compose-lamp
можно выбрать любую версию php: 5.6, 7.1, 7.2
Сразуже можно развернуть, что очень удобно!

Заходим на сервер через командную строку
Для входа в контейнер, в котором у вас установлен web server. Набрать в консоли:
docker exec -it 7.2.x-webserver /bin/bash

Как подключиться к бд mysql из командной строки
Из контейнера веб сервера к mysql с комощью командной строки мне не удалось подключиться.
Это можно сделать из командной строки windows. Но! надо обязательно установить mysql shell. (При установке mysql для windows выберите данный пункт)
Далее открываете это приложение (будет выглядеть как окно терминала) и если отображается в строке mysql js. То необходмимо ввести команду:
\sql
- чтобы переключить командную строку в данный режим работы.
И дальше:
\connect root@localhost
вводите пароль и далее все стандартно: например, show databases;. и тд


Узнать какие контейнеры запущены:
docker ps

Остановить не нужные контейнеры
docker stop 9038 f15c

Запустить контейнеры из текущей категории:
 docker-compose  up -d

Шпаргалка по modx

Get resource id
{if $_modx->resource.id == 407}

Вывести результат сниппета в плейсхолдер
{$_modx->runSnippet('!msProducts', [
'parents' => '-9,-6,-7,-3',
...
'toPlaceholder' => 'anyproducts'
])}


{if $_modx->getPlaceholder('anyproducts') != ''}
    {$_modx->getPlaceholder('anyproducts')}
{/if}


Создаем сниппет


В шаблоне:
[[num_format? &num=`[[*price]]` &dec=`2` &sep=`,` &tho=` `]]


В самом снипете обращаемся напрямую к переменным


if ($num == '') // Значение из TV параметра
    $num = 0;

if ($dec == '') // число знаков после запятой
    $dec = 2;

if ($sep == '') // разделитель дробной части
    $sep = ',';

if ($tho == '') // разделитель тысячого разряда
    $tho = ' ';

$output = number_format( $num, $dec, $sep, $tho);
return $output;


Вызов чанка через pdoTools
$pdo = $modx->getService('pdoTools');
$tpl = '@INLINE

[[+tag]]

{C} <!--pdotools_!tag значение, если тег пуст, появилось только в версии 1.9.3, выпущенной сегодня-->'; $res = $pdo->getChunk($tpl, $pls);


Работа с плейсхолдером

{$_modx->runSnippet('!similar_prod', [
                  'id' => '3025',
                  'template_items' => '3,31',
                  'is_hide_current' => '1',
                   'toPlaceholder' => 'similar_prodd'
              ])}
              <div data-block="item" data-title="Другие мощности">
                  {$_modx->getPlaceholder('similar_prodd')}
              </div>

[[+similar_prod:is=``:then=``:else=`<div data-block="item" data-title="Другие мощности">[[+similar_prod]]</div>`]]