Your  local computer Git repo <-> AWS CodeCommit Git repo <-> Any path and folders for site(his copy another domain names) on server Git repo

AWS CodeCommit service is central repository for Git.

You can check it in local Git version.

#git remote -v

origin ssh://git-codecommit.us-east-1.amazonaws.com/v1/repos/laravel (fetch)
origin ssh://git-codecommit.us-east-1.amazonaws.com/v1/repos/laravel (push)

CLI CodeCommit docs — https://docs.aws.amazon.com/cli/latest/reference/codecommit/index.html

Short instruction for use AWS CLI for simple projects

This is list minimum commands for console «aws»:

list-repositories

create-repository

get-repository

list-branches

create-branch

get-branch

get-comment

delete-branch

delete-repository

The most Important command

#git [any command] —help

and

#aws codecommit [any-command] help

and first look EXAMLPE command in this help!

Sometimes aws pass through branches after push, then you can upload specific branch

#git push —set-upstream origin any-branch-name

Основные проблемы при установке на 2020 год были с ssl
Для этого после установки и запуска виртуалки копируем его себе на ПК и добавляем в доверенные сертификаты, кликнув на него два раза.
$ vagrant ssh -c ‘cat /etc/nginx/ssl/ca.homestead.homestead.crt’ > ca.homestead.homestead.crt
Примерно с 2021-2022 все локальные домены желательно, чтобы находились в доменной зоне .local, чтобы избежать непредвиденных багов в браузерах на клиентских машинах в момент разработки. К примеру разрабатываем сайт в PHPStorm на домене mysite.local и прописываем его в /etc/hosts по стандарту на vagrant внешний IP интерфейс.

Вообще не плохая идея после установки и сборки образа по официальной документации потренероваться на этом сервере установкой phpmyadmin, чтобы поднять уверенности в том, что с образом все в порядке.
В настройка nginx не была прописана директива минимально загружаемго файла, от этого через phpmyadmin не проходил импорт.
Если вы хотите сделать нескольво виртуальных машин на разные большие проекты, чтобы их отделить, то нужно задать разные имена этим машина через конифиг в дериктиве «name:».
Если вы постоянно в ходе работы передвигаетесть с места на место, где разные сети(роутеры), то конфигурация сетевого моста Вам скорее всего не подойдет и нужно прописать ip для виртуальной машины ОТЛИЧНОЙ от СЕТИ РОУТЕРА(предположим 192.168.1.1/24) ip: «192.168.10.13», но настройка дебага будет уже сложнее, если вы хотите отлаживать на профессиональном уровне через Charles, тут уже без заворота портов средствами фаервола в разных сетях Вам не обойтись и нужно погрузиться в эту тему и досконально все изучить.

Если у Вас не Intel или AMD архитектура на метеллическом процессоре, а Apple Silicon — ARM, то нужно посмотреть в листинге через консоль последнюю доступную для Вас версию HomeStead — вот такой вот командой.
~: vagrant box list
laravel/homestead (parallels, 14.0.2, (arm64))
laravel/homestead-arm (parallels, 13.0.0)

Вот пример Тру конфига:

—
memory: 2048
cpus: 2
provider: virtualbox

version: 14.0.2
name: yourvirtualmachinename

authorize: ~/.ssh/id_rsa.pub

keys:
— ~/.ssh/id_rsa

folders:
— map: /Users/joker/Downloads/websites/com2.all-uk.dev
to: /home/vagrant/code
type: «nfs»

sites:
— map: heart.loc
to: /home/vagrant/code/public/heart.uk
php: «7.2»
— map: heart.com.loc
to: /home/vagrant/code/public/heart.com
type: «apache»
— map: heart.loc
to: /home/vagrant/code/phpmyadmin

databases:
— homestead
— laravel3
— laravel4
— tuc
— tuc2

features:
— mariadb: false
— ohmyzsh: false
— webdriver: false

networks:
— type: «public_network»
ip: «192.168.1.13»
bridge: «en1: Wi-Fi (AirPort)»

# ports:
# — send: 50000
# to: 5000
# — send: 7777
# to: 777
# protocol: udp

В чем заключается что он тру?
Если мак то включаем для ускорения вот эту штуку
type: «nfs»
В название файла .loc. Если поставить .dev или .app на 2020 год на последнем образе, то могут быть разные глюки!
site.loc — вполне нормальный домен для правильной работы
По умолчанию создается пользователь базы дынных homestead с паролем secret
Для того, чтобы из локалки было удобно с помощью мобилок заходить по вай-фай на сайты на этой виртуалке включаем сетевой мост, а не нат, как это идет по умолчанию вот этой директивой:
networks:
— type: «public_network»
ip: «192.168.1.13»
bridge: «en1: Wi-Fi (AirPort)»

Ну, а далее вот основные команды для постоянного использования
#vagrant up — запуст виртуалки
#vagrant halt — остановка
#vagrant list — список других команд
#vagrant destroy —force — грохнуть образ

#vagrant reload —provision — перечитать правленный конфиг без гроханья образа — виртуальной машины с базами данных и т.п. или #vagrant provision

Бывает нужна пересборка образа после обновления, не забывает перед обновлением сохранить все базы данных, которые находятся на виртуальном образе, так как он будет полностью уничтожен. Если все конфиги, которые разварачиваются в vagrant установятся по умолчанию, то базы данных которые были на старом образе никто Вам не развернет!

1.1) and you can always destroy your old vagrant box from your vagrant folder usually ~/homestead by running — заходим в активную папку с ваши vagrant образом виртуалки

vagrant destroy 

2) create a new vagrant box by running собираем новую конфигруцию

vagrant up --provision Далее пользуемся всем как обычно.

Далее источник — https://github.com/RomanSarvarov/larastorm/blob/master/homestead/ru.md

Laravel + Homestead + PHPStorm + XDebug

Инструкция для простого разворачивания Laravel 7 на Vagrant Homestead и связки его с IDE PHPStorm для комфортной работы.

Требования к установке

• Composer — https://getcomposer.org
• GIT — https://git-scm.com/downloads

Инструкция

1. Установка виртуальной машины

1. Скачать и установить Oracle VirtualBox — https://www.virtualbox.org/wiki/Downloads
2. Скачать и установить Vagrant — https://www.vagrantup.com/downloads.html

2. Установка Homestead и Laravel

1. Перейти в папку с проектом
2. Выполнить composer create-project --prefer-dist laravel/laravel . (точка на конце — не ошибка)
3. Выполнить composer require laravel/homestead --dev
4. Выполнить vendor\\bin\\homestead make (Windows) или php vendor/bin/homestead make (Linux/macOS)
5. (НЕ ОБЯЗАТЕЛЬНО) В Homestead.yaml поменять директиву map в разделе sites c homestead.test на какой-то абстрактный домен, который будет использоваться в будущем (например test.loc). Должно получится так:

sites:
    -
        map: test.loc
        to: /home/vagrant/code/public

5. Добавить новую запись 192.168.10.10 test.loc (вместо test.loc — ваш домен) в файле /etc/hosts (в Windows файл расположен в папке по данному пути: C:\Windows\System32\drivers\etc)
6. В файле .env (в корневой папке проекта) внести настройки подключения к БД:

Настройки подключения к БД Mysql

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=33060
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

Настройки подключения к БД PostgreSQL

DB_CONNECTION=pgsql
DB_HOST=127.0.0.1
DB_PORT=54320
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

3. Настройка PHPStorm

1. Активировать плагин Laravel (Settings > Plugins > Laravel (активировать)). Затем включить его для проекта (Settings > Languages & Frameworks > Laravel > Enable plugin for this project
2. Установить стиль PHP кода на стиль Laravel (Settings > Editor > Code Style > PHP)
3. Подключиться к БД, используя параметры для подключения к БД (которые в файле .env)
4. Перейти в Settings > Languages & Frameworks > PHP
5. Изменить PHP Language Level на текущую версию PHP (узнать версию PHP можно, выполнив сначала vagrant ssh, а затем php -v)
6. Нажать на […] в CLI Interpreters > Нажать на [+] (добавить) > From Docker, Vagrant… > Vagrant > OK
7. Перейти в Settings > Command Line Tool Support > Нажать на [+] (добавить)
8. В Choose Tool выбрать Tool Based On Symphone Console, для Visibility — выбрать Project, в Alias поставить artisan, в Path To Script поставить путь к файлу artisan (который в корневой папке проекта)

4. Установка и настройка Laravel Ide Helper

1. Выполнить composer require --dev barryvdh/laravel-ide-helper
2. В config/app.php добавить Barryvdh\LaravelIdeHelper\IdeHelperServiceProvider::class (в блок Package Service Providers)
3. Добавить в composer.json в директиву scripts:

"post-update-cmd": [
    "Illuminate\\Foundation\\ComposerScripts::postUpdate",
    "@ide-helper"
],
"ide": [
    "@ide-helper"
],
"ide-helper": [
    "@php artisan clear-compiled",
    "@php artisan ide-helper:generate",
    "@php artisan ide-helper:meta",
    "@php artisan ide-helper:models -N"
]

4. Выполнить composer ide-helper

Более подробно о библиотеке — https://github.com/barryvdh/laravel-ide-helper

5. Настройка Xdebug

1. Перейти в Settings > Languages & Frameworks > PHP > Servers > Нажать на [+]
2. В поле Name и поле Host ввести название хоста (которое в Homestead.yaml)
3. Поставить галочку на Use path mappings
4. В File/Directory установить значение Absolute Path для поля с корневой папкой проекта в /home/vagrant/code/и папкой public /home/vagrant/code/public/

Дополнительно

1. Заменить содержимое .gitignore:

# Laravel gitignore
/node_modules
/public/hot
/public/storage
/storage/*.key
/vendor
/.idea
/.vagrant
Homestead.json
Homestead.yaml
npm-debug.log
.env

# Larave IDE Helper
_ide_helper.php
_ide_helper_models.php
.phpstorm.meta.php

# misc
.DS_Store
reports/*
!reports/.gitkeep
npm-debug.log
yarn-error.log
.phpunit.result.cache
/user-customizations.sh
/postgres_backup
/mysqldump.sql.gz
/mysql_backup
/aliases
/after.sh
/Homestead.yaml
/Homestead.json/.idea
/vendor
/.vagrant
phpunit.xml
.buildpath
.settings
.project

2. Пометить папки в PHPStorm — правой кнопкой по папке > Mark directory as (папку public => Resource root, папку tests => Test Sources Root, папку vendor и storage => Excluded)

Полезные фичи (устанавливать по желанию)

1. Установить Laravel Debugbar, выполнив команду composer require barryvdh/laravel-debugbar --dev Более подробно про библиотеку — https://github.com/barryvdh/laravel-debugbar
2. Сгенерировать функционал для входа/регистрации пользователей: установить специальный пакет composer require laravel/ui, выполнить команду php artisan ui <тип> --auth (<тип> заменить на bootstrap, vue, react)
3. Установить удобное средство для отладки Laravel Telescope: выполнить composer require laravel/telescope, выполнить php artisan telescope:install, выполнить php artisan migrate

На заметку

1. Если после установки выдает ошибку — выполнить php artisan config:clear
2. Чтобы дебажить с помощью Chrome — необходимо установить расширение Xdebug helper —https://chrome.google.com/webstore/detail/xdebug-helper/eadndfjplgieldjbigjakmdgkmoaaaoc

Управление виртуальной машиной

1. Запуск машины — vagrant up
2. Остановка машины — vagrant halt
3. Подключние через SSH — vagrant ssh (отключение — vagrant exit)
4. Удалить виртуальную машину — vagrant destroy -f <название/ID машины>
5. Посмотреть список машин — vagrant global-status

Все команды можно посмотреть в документации к Vagrant — https://www.vagrantup.com/docs/cli/

4- shh to the vagrant machine

vagrant ssh

5- flip the server, by running:

flip

you’ll get this message:

nginx stopped
apache started

или в конфиги нужного домена прописать директиву настройки
type: «apache» — как сказано в официальной документации ларавел
НО на последних версиях виртуальных машин Homestead, есть глюк, по умолчанию апатч не в автозагрузке, поэтому при этом методе после сборки образа заходим на него по ssh и
#sudo update-rc.d apache2 enable
Так мы добавим Apache в автозагрузку.

My LinkedIn Blog

Только после этого можно приступать к установке Laravel Aimeos

1) Создаем новый хост site.com
2) Заходим в PHP настройки модулей сайта и устанавливаем модуль intl. Должно быть у сайта минимум PHP 7.2
3) Заходи через Линукс консоль в корневую папку сайтов, где и видим эту папку с сайтом, которую создал ISPManager. Удаляем ее #rm -rf site.com
4) Устанавливаем сразу этот пакет, он уже включает в себя Laravel ядро. ДОЛЖНА БЫТЬ В КОНСОЛИ PHP 7.2 минимум и MySQL более чем 5.7.8 или MariaDB более 10.2.2
#composer create-project aimeos/aimeos site.com

Внимательно заполняем эти пункты при инсталляции пакета — если решили использовать как базу данных MySQL, то

DB_CONNECTION=mysql
DB_HOST=164.132.2.2
DB_PORT=3310
DB_DATABASE=YourBaseName
DB_USERNAME=root
DB_PASSWORD=YourPassowrd

Далее надо ручками подправить все конфиги Апатча и Nginx, а именно по стандарту Laravel указать корневую директорию root и $root_path — /public
/var/www/user/data/www/site.com/public — так должно быть, где:
DocumentRoot, Directory у апатча и set $root_path для http и https у Nginx
и сделать вот так с этой настройкой Apache на вашу новую консольную версию PHP — php_admin_value open_basedir «/opt/php73/:/var/www/joker/data»

При таких не сложных пунктах магазин должен заработать.
Данная инструкция напоминалка для себя любимого.))

TOP 10 CMS based Laravel

#lsof -i
#lsof -n -P | grep 1723 //1723 anyport
#lsof -i tcp

#nmap -sT -O localhost
#nmap -sU localhost

webpack — webpack.config.js — конфигурационный файл данного пакета, где моно добовлять разные зависимости и настройки по документации пакетов npm. Руководствуемся актуальными гайдами  на официальной странице webpack.

Старт процесса:

#npm install webpack —save-dev

#npm install webpack- cli —save-dev (Возможность параметров команд из консоли)

Предварительное ознакомление:
https://webpack.js.org/concepts/
https://www.youtube.com/watch?v=kLMjOd-x0aQ&list=PLDyvV36pndZHfBThhg4Z0822EEG9VGenn
https://tproger.ru/translations/configure-webpack4/

Делаем так.
src — исходная рабочая папка с js файлами и index.js(указываем в package.json) — входная точка.
dict или build — выходная, куда будем складывать всю переработку — webpack.config.js
package.json — конфигурационный файл любого node.js приложения
webpack.config.js — файл в ктором создаем объект конфигурации, предположим стандартный выходной файл — bundle.js и все остальное.
папка node_modules — с архивом всем приложений которые зависят от конфигурационного файла.
webpack —mode development позволяет не оптимизировать исходный файл bundle.js и будет проще отлаживать. Можно задать не через консоль, а через конфигурационный файл webpack.config.js в объекте module.exports параметр mode: ‘production’ — режим оптимизации или можно задать в package.json в объект ‘scripts’
«scripts»: {
«dev»: «webpack —mode development», //npm run dev набрать в консоли в этой активной папке//
«build»: «webpack —mode production»
},

Одна из основных проблем — глобальная область видемости из html файлов (причина — бандл оборачивает все своей функцией)

http://qaru.site/questions/2338112/export-global-function-using-webpack

работа с html шаблонами, предположим у нас несколько точек входа в  конфигурационном файле, тогда можно на выходе получить несколько банделов и разместить их в любой точке страницы по примеру такого шаблона.

<script async defer src=»<%= htmlWebpackPlugin.files.chunks.language.entry %>»></script>
<script async defer src=»<%= htmlWebpackPlugin.files.chunks.index.entry %>»></script>
<script async defer src=»<%= htmlWebpackPlugin.files.chunks.scriptmailjson.entry %>»></script>
<script async defer src=»<%= htmlWebpackPlugin.files.chunks.tablesort.entry %>»></script>
… т.д.

Выделено название бандлов(несколько точек входа), которые лежат в папке src

webpack.config.js — шпора с комментариями — без официальной документации и доп. поисков по сети по каждой строчке не разберешься. Помни нормальные конфиги за день не пишутся! Даже за неделю!!!

const HtmlWebpackPlugin = require('html-webpack-plugin'); //Work with HTML page: generation, copy, templete.
const UglifyJsPlugin = require('uglifyjs-webpack-plugin'); //minify code
const webpack = require('webpack'); // Install Local - main Object webpack - look to oficeal site about plugins metod.
const path = require('path');
console.log (getRandomInt(99, 99999999)); //You can add yourself logic in this config. AND console.log can show main object webpack.config.js
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

module.exports = {
    entry: { //You can use any entry points files in yourself config
        index: [
            '@babel/polyfill', //add polyfill in this "entry" file
            './src/index.js'
        ], // Anothe entry files:
        scriptmailjsonar: './src/scriptmailjsonar.js',
        tablesortar: './src/tablesortar.js',
        languagear: './src/languagear.js'
    },
    output: {
        filename: '[name].bundle.js?hash=[hash]',   //I use parameter hash for CDN tehnology. [name] - It's name entry point - key object entry.
        path: path.resolve(__dirname, './build'), //root path JS - __dirname
        library: "[name]" // Name Global variable will have been viewing into HTML file from main webpack entry functions. All function parametrs will be property(var) or method(var) - don't fogot with exports.nameVariable = anyArray [rst, rstr, ...] then you can take console.log ([name].nameVariable.var)
    },
    devtool: "source-map", //Source-map for JS. SCSS into IDE or webpack plugins
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    optimization: {
         minimizer: [
            new UglifyJsPlugin({
                test: /\.js(\?.*)?$/i, //Default options for minify scripts and intelect guard.
                }),
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            hashhtml: getRandomInt(99, 99999999), //I have cache in browser then i use link *.css?hash=someunicnumber
            filename: "../index.html",
            template: "./src/index.html",
            inject: false,
            minify: { // #npm install html-minifier // For this functional
                html5                          : true,
                minifyCSS                      : true,
                minifyJS                       : true,
                collapseWhitespace: true,
                removeComments: true,
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true, //Maybe that was delete type="name" input - MaterializeCSS
                removeStyleLinkTypeAttributes: true,
                useShortDoctype: true
            }
        } )
    ]
};

Скачать файл для редактирования и распечатывания можно ниже по ссылке.

Эксель таблица с понятными для пониманиями схемами в картинках.
ENGLISH TENSE в эксель таблице.

Список частотных слов от Оксфард 3000 — USA Oxford 3000 слов.

Список частотных слов от Оксфард 5000 — USA Oxford 5000 слов.

Список частотных слов для печати 7000 в эксель USA 7000 слов распечатать.

Список частотных слов для печати 7000 в PDF 46 листов или 46/2 = 23 листа А4 формата USA 7000 слов распечатать PDF.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <title>Example SASS -SCSS</title>
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>Hello world!</h1>
<h2 class="one">Hello world 2!</h2>
<h3 class="two">Hello world 3!</h3>
</body>
</html>

/* Так делаются комментарии */

@import "reset"; //импорт других разных блоков в один файл: хедер, футер, сайдбар, меню, контент и т.п. То что начинается на _reset по умолчанию не создается файл .css с таким же названием.
@import "variables";

body {
  color: $fontcolor;
  background: $arcolor;
}
nav {
  color: white;
    li {
      color: yellow;
    }
}
.link {
  color: greenyellow;
  &:hover{
    color: yellow;
  }
}
.borradbott {
  @include bradius(10px); //Миксины задаются "@mixin bradius($rad)" - с парраметрами - переменно, что облегчает интегрирование больших кусков кода.
  @extend .link; //расширяется - тоесть наследует стили указанного селлектора.
}
.one {
 color: $colorte;
 widows: $w;
 margin: 0 auto;
 @include bradius(5px) { //Расширили Миксин, потому что в нем прописано свойство @content
  background: #6c97aa;
 }
}
.two {
 @extend .one;
 color: darken($colorte, 15%); // В SASS существует множество готовых функций, чтобы выполнять самые разнообразные цели, предположим эта затемняет цвет на 15 процентов.
 width: $w/3;
}
@debug -(10px - 15px);

$arcolor: #7ed8e2;
$fontcolor: #fdfbfb;
$fsb: 14px; //базовый размер шрифта темы, делается для того, чтобы изменить шрифт разом
$ff: Roboto, Helvetica, Arial, sans-serif;
$colorte: #507f9b; //тестовый цвет
$w: (70% + 5%); //ширина // Все математические операции оборачиваем в скобки!!! Одна единица измерения: пиксели, проценты и т.п.

* {
  margin: 0;
  padding: 0;
}

@mixin bradius($rad: 3px){ // Параметры можно задавать со значением по умолчанию
  -webkit-border-radius: $rad;
  border-radius: $rad;
  @content; //можно не пладить миксины из-за пару свойств, а создать этот парметр, тога к месту где инклюдится данный микс можно добовлят дополнительные свойства через {css свойства}
}
@mixin padd($padd...) { // чтобы можно было передавать несколько значений в парметр, ставим "..." @include padd (20px 22px 27px 2px)
  padding: $padd;
}

@mixin grid($cols, $margin){
  float: left;
  background: blueviolet;
  margin-right: $margin;
  margin-bottom: $margin;
  height: 150px;

  @if($cols >=5 ) { //можно задавать условные операторы
    width: 100%;
    margin-right: 0;
  }
  @else {
    width: ((100% -(($cols - 1) * $margin)) / $cols) // можно задавать сложные математические функции для высчита колонок в процентах на гридах, где можно будет потом легко менять их колличество и дизайн.
}

  &:nth-child(#{$cols}n) { //высчитывает колличество дочерних эллементов и проставляет последний.
    margin-right: 0;
  }
}
@for $i from 24 to 29 {}

По мотивам этой сказки —

SASS and LESS

ВСЕ ВОЗМОЖНОСТИ LESS НА ПРОФЕССИОНАЛЬНОМ УРОВНЕ.

Коротко о самом используемом:

Что такое препроцессор CSS?

CSS препроцессоры не заменяют CSS. На самом деле, препроцессоры просто дают нам дополнительные функциональные возможности, такие как переменные,  операторы и функции, с которыми мы можем упростить создание и управление файлами CSS.

Препроцессоры позволяют определить свойства один раз и затем повторно использовать их в нашем проекте, что в гораздо более функционально, чего простой CSS делать не может.

Что такое LESS?

LESS относительно новый препроцессор, ему около 4 лет. Его часто сравнивают с SASS, более старым препроцессором. Как и LESS, так и SASS, имеют свои корни в языке программирования Ruby, но в настоящее время используются гораздо шире. LESS теперь основан на Javascript.

Люди, использующие LESS, могут создать заранее определенный набор цветов для своего сайта. Они могут определить особый стиль один раз и затем многократно использовать его везде, где необходимо.

Использование LESS

Чтобы воспользоваться тем, что LESS может предложить, мы сначала должны сохранить наш CSS-код в файл с расширением .less. Использовать LESS очень просто. Он работает как на веб-сервере, так и на стороне клиента.

Самый простой способ начать работу на стороне клиента. Добавьте ссылку на less-файл на вашей веб-странице, так же как добавляете CSS-файл, но с атрибутом rel установленным как «stylesheet/less», а затем файл less.js, который можно загрузить с www.lesscss.org

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

Некоторые из инструментов сторонних производителей:

• WinLess
• Simpless
• Crunch
• и многие другие …

LESS Синтаксис: Переменные

Одни из вещей, которые часто повторяются в файле CSS — это цвета. Одни и те же цвета повторяются в файлах CSS для разных элементов, заголовков, ссылок и т.д.

В LESS, мы можем просто объявить переменную для сохранения цвета, вот так:

И затем повторно использовать это так:

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

LESS Синтаксис: Mixins

Переменные полезны для повторного использования отдельных значений, таких как цвет, размер шрифта. В LESS с mixins мы можем использовать набор свойств из одного или нескольких правил. Mixins могут быть использованы, например, для определения стиля границ, размер шрифта и т.д.

В приведенном выше коде мы определили верхнюю и нижнюю границу внутри класса border_top_bottom. Теперь, когда мы хотим добавить эти стили к другими элементами, мы можем использовать их так:

Приведенный выше код выведет следующее:

Чтобы добавить больше гибкости, mixins также позволят нам передавать переменные (называемые здесь параметры). Например:

В приведенном выше примере, мы задали параметр для радиуса. Мы также дали ему значение по умолчанию равное 5px, которое не является обязательным. Теперь мы хотим добавить это для класса button:

Если мы уберем 6px из приведенного выше примера, границы радиуса будут заданы по умолчанию, который указан в нашем классе border-radius и равен 5px.

Синтаксис LESS: Nesting

Одна из вещей, распространеных в CSS, это длинные селекторы, которые нам часто приходится писать для стилей дочерних элементов:

И если у вас есть несколько подуровней выпадающего меню, то это становится более сложным для понимания. В LESS это может быть записано как:

Символ «&» используется перед псевдо-классами в нашей вложенной структуре. Описанную выше конструкцию гораздо легче понять и показать иерархию именно так, как она есть.

Синтаксис LESS: Операции

LESS также позволяет нам выполнять такие операции как сложение, вычитание, умножение и деление числовых значений, цветов и переменных в таблице стилей. Допустим, мы объявили переменную padding, которая применяется ко всем нашим элементам H1. Но теперь мы хотим добавить дополнительный отступ для нашего заголовка на главной странице. Мы можем сделать это следующим образом:

Значение по умолчанию будет умножено на 2, что задаст заголовку на главной странице padding равный 10px. Операции должны выполняться в круглых скобках, однако они могут также работать без скобок.

Синтаксис LESS: Scope

Область действия в LESS похожа на область действия в других языках программирования. Переменные и mixins сначала ищутся на локальном уровне, и если они не найдены, то компилятор будет искать их в родительской области и так далее.

Заключение

Эта статья не охватывает все что LESS может предложить. Цель состоит в том, чтобы объяснить, как используя LESS можно помочь нам сделать наш CSS более динамичным. CSS препроцессоры позволяют нам создавать и управлять CSS более эффективно. Даже имея хорошее понимание CSS, LESS позволит нам использовать его более продуктивно.

SASS and LESS

Чтобы уменьшить время до начала взаимодействия, рекомендуем использовать принцип lazy loading для скрытых изображений после того, как все важные ресурсы будут загружены

Не вопрос, сделаем отложенную загрузку скрытых изображений.

Напоминалка самому себе, как сделать под требовательный Google Page Speed, одну из его задач. Никаких разных версий jQuery, а то устанешь следить за ПО от версии к версии, только js по возможности. Увы плагин писать не целесообразно, только правка тем. И так, вот схема:

1) img стандарт — тег в html

Используем Lazysizes — https://github.com/aFarkas/lazysizes
Можно в тело темы вставить и CDN — ссылку на скрипт

<script src="https://unpkg.com/lazysizes@4.1.7/lazysizes.js"></script>

Основной массив настроечек, который мы видим в опенсорс коде:

var lazySizesDefaults = {
lazyClass: 'lazyload',
loadedClass: 'lazyloaded',
loadingClass: 'lazyloading',
preloadClass: 'lazypreload',
errorClass: 'lazyerror',
//strictClass: 'lazystrict',
autosizesClass: 'lazyautosizes',
srcAttr: 'data-src',
srcsetAttr: 'data-srcset',
sizesAttr: 'data-sizes',
//preloadAfterLoad: false,
minSize: 40,
customMedia: {},
init: true,
expFactor: 1.5,
hFac: 0.8,
loadMode: 2,
loadHidden: true,
ricTimeout: 0,
throttleDelay: 125,
};

Наглядный пример ленивого тега img с разными извращенными настройками перечисленными в верхнем массиве — http://afarkas.github.io/lazysizes/
Короче скрипт реально крут, чего там только нельзя залЭзить. )))

Ну, а если по самому легкому, то подправить тег img и crs меняем на data-src, на примере популярно CMS Вебасист, со ставкой смарти кода.

<img class="lazyload" data-src="https://site.com/wa-data/public/shop/img/2019/01/beautyview/{if $wa->isMobile()}mobile/{/if}topshort.jpg" alt="Я ленивая картинка">

2) CSS — Background url

Кто-то уверял, что для сайта лучше по возможности использовать не тег img, а background через css url правило для вставки изображений. Вот так появляется лишняя работа, очередной горе СЕО специалист бредил, лучше бы программирование учил и зачем я уши развесил))). Один стандарт везде — стандартизация, вот сила. В итоге оказались в такой ситуации, что для бэкграунда нужно сделать совсем не так, как в первом пункте, а по другому и подцепить еще один скрипт.

Подсоединяем вот этот, только минифицированый скрипт https://github.com/aFarkas/lazysizes/blob/gh-pages/plugins/bgset/ls.bgset.js в тело страницы, он лежит там же в родительской директории, где его не сжатая версия, либо сожмите этот сами.
<script src="https://site.com/wa-content/js/lazyload/ls.bgset.min.js"></script>

Для того, чтобы было проще Вам понять суть, мы выносим url стиль из css в нужный нам тег, у меня это сделано опять в комбинации со smarty

<div class="advantage__content" style="background: url(https://site.com/wa-data/public/shop/img/2019/01/advartages/{if $wa->isMobile()}AdvartageMobile.jpg{else}AdvartageDesctop.jpg{/if}) no-repeat center;">

и приводим этот код к нужному виду, для этого второго подсоединенного js скрипта на html страницу.

<div class="advantage__content lazyload" data-bgset="https://www.fvsport.com/wa-data/public/shop/img/2019/01/advartages/{if $wa->isMobile()}AdvartageMobile.jpg{else}AdvartageDesctop.jpg{/if}">

Все проверяем эти две интеграции через консоль Chrome DevTools вкладка «Network»
Обновляем страницу. Ждем в шапке пока она вся прогрузица, зачищаем табло нажатием на значек clear(кружок перечеркнутый линией), крутим вниз до фоток.
Ура, инициатор загрузок картинок скрипт lazysizes! У меня получилось, надеюсь и у Вас.

3) Формат изображений webp.

Допустим нужно интегрировать в ленивую подгрузку также изображения формата webp.

Вес так же просто как в первом и втором пункте. Вот такой код:

<picture>

</picture>

Преобразуем к такому:

<picture>

</picture>

Мне просьба не писать и вопросы умные не задавать, а если задаете, то донат вперед!)