tp4

Если чисто по коду, сам гит у меня лежит в корневой папке WordPress. `.gitignore` файл выглядит примерно вот так:

# PHPStorm
.idea

# WordPress
*.log
/wp-*.php
/index.php
/xmlrpc.php
/license.txt
/readme.html
/sitemap.xml
/sitemap.xml.gz

/backup*

wp-admin/
wp-includes/

wp-content/*
!wp-content/themes/
wp-content/themes/*

!wp-content/plugins/
wp-content/plugins/*

!wp-content/themes/ei/
!wp-content/themes/ei-child/

!wp-content/plugins/realty-export

# Frontend tools
wp-content/themes/ei-child/node_modules/

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

По бэкапам.
Бекап делаю через плагин BackUpWordPress (очень удобная вещь, можно делать бекапы всего сайта и базы по расписанию, Вам на почту приходит письмо с ссылкой на скачивание бекапа), экспорт базы на другой сервер делаю с помощью WP Migrate DB (он не просто заменяет пути в базе но и правит под них сериаллизованые массивы, таким образом некоторые настройки не слетают). Знаю что можно все делать через wp-cli, но он далеко не на каждом сервере стоит, и так уже привычнее. Мне обычно чтобы слить клиентский сайт для работы на локалке даже фтп не нужен, только доступ в админку.

При работе с сервером заливаю файлы прогой WinSCP, она может как FTP так и SFTP, так же умеет синхронизировать папки (заливать только то, что изменилось), на крупных проектах настраиваю синхронизацию в PHPStorm.

Многие графические пакеты от Adobe активно используют видеокарту для вычислений
из виртуалок более менее адекватно эмулирует видеокарту насколько знаю только VMWare

Но лучше все таки сделать так:
1. В качестве хост-ОС поставить гипервизор (например Xen)
2. Создать в нем 2 виртуалки (под линь и под винду)
3. настроить, чтоб при старте ПК стратовали обе
4. разделить между ними оперативу (самому гипервизору хватит 256-512МБ, остальное между виртуалками по нуждам)
5. на виртуалку с виндой пробросить дескретную видяху
6. на виртуалку с линем пробросить встройку от i5 (после всех основных настроек гипервизора и открытие ssh сервера в его VNet)
7. на винде поднимаем VNC сервер и добавляем в автозагрузку
8. врубаем моник на встройку, виндой управляем через VNC

Решил проблему полностью. Ниже мануал.

Чтобы все заработало, (SSH-доступ, + доступ к локальным сайтам виртуалки):

1) Создаем виртуалку. По-вкусу настраиваем веб-сервер, с установленным к примеру сайтом example.com на локалхосте. / Еще ставим OpenSSH сервер:
sudo apt-get install -y openssh-server

2)Выключаем виртуалку, идем в Машина - Настроить - Сеть - Адаптер 1 (выбираем тип подключения NAT) - Проброс Портов. Там ставим такие настройки:

Где Rule 1 позволят подключатся по SSH/SFTP к виртуалке из под хост-системы по порту 2222. Rule 2 перебрасывает все соединения по порту 80 (http) хост-системы в виртуалку на порт 80.
С такими настройками уже будет работать SSH, но локальные сайты веб-сервера виртуалки в хост-системе еще показываться не будут.

3) Далее в том же окне Сеть настроек виртуалки, подключаем второй сетевой адаптер (Адаптер 2) с внутренней сетью:

Все сохраняем, запускаем виртуалку.

4) Далее правим файл hosts хост-системы. В винде это обычно Windows\System32\drivers\etc\hosts . Добавляем туда запись типа 127.0.0.1 example.com (это значит что при переходе на example.com нас должно перенаправлять на localhost)

Собственно все. По адресу example.com в браузере хост-системы должен открываться наш локальный сайт на веб-сервере виртуалки.
Если стоит виртуалка linux-desktop, и мы хотим чтобы и там наш локальный сайт example.com открывался в браузере, тогда добавляем аналогичную запись 127.0.0.1 example.com в файл hosts виртуалки по адресу /etc/hosts

Ссылки для раздумий leonid.shevtsov.me/ru/installing-ubuntu-linux-on-v... и leonid.shevtsov.me/ru/virtuabox-ubuntu-configurati...

Пойдет? jsdo.it/alvarobyrne/crumpled_paper

В зависимости от задач
1. gulp.spritesmith - собирает png в один спрайт
2. gulp-svg-sprite - собирает svg в один спрайт
3. Вставка svg спрайтов на страницу

Сейчас возможно уже и не актуально, но к моей практике не прижились
Фоновые svg (плохая кроссбраузерность, нельзя стилизовать из внешних стилей)
base64 (Распирает вёрстку, изменилась картинка - во всех местах везде надо менять картинку, использую крайне редко)

Вставку svg спрайтов на страницу, делаю по такой практике:
На странице делаю контейнер куда группирую все спрайты

<div data-ui="resources" style="display: none;">
   <svg data-ui="icon-pack">
      <g id="svg-search"><path d="M61.8,56.6l-15.1-15C50,37.2,52,31.8,52,26C52,11.7,40.3,0,26,0C11.7,0,0,11.7,0,26c0,14.3,11.7,26,26,26 c6,0,11.5-2,15.9-5.4l15,15L61.8,56.6z M26,44.9c-10.5,0-19-8.5-19-19C7,15.5,15.5,7,26,7c10.5,0,19,8.5,19,19 C45,36.4,36.4,44.9,26,44.9z"></path></g>
      <g id="svg-img"><path d="M0.8,0C0.4,0,0,0.4,0,0.8v22.9c0,0.4,0.4,0.8,0.8,0.8h24.7c1.2,1.5,3,2.5,5,2.5c3.5,0,6.4-2.9,6.4-6.5c0-2.7-1.7-5.1-4-6.1V0.8C33,0.4,32.6,0,32.2,0H0.8z M1.6,1.6h29.8V14c-0.3,0-0.5-0.1-0.8-0.1c-1.2,0-2.3,0.4-3.3,0.9l-3-3.2c-0.2-0.2-0.4-0.3-0.7-0.2 c-0.2,0-0.3,0.1-0.5,0.2l-5.7,5.1l-7.2-8.3c-0.2-0.2-0.5-0.3-0.7-0.3c-0.2,0-0.3,0.1-0.5,0.2l-7.5,7.9V1.6z M17.7,3.3 c-1.8,0-3.2,1.5-3.2,3.3c0,1.8,1.4,3.3,3.2,3.3c1.8,0,3.2-1.5,3.2-3.3C20.9,4.7,19.5,3.3,17.7,3.3z M17.7,4.9 c0.9,0,1.6,0.7,1.6,1.6c0,0.9-0.7,1.6-1.6,1.6c-0.9,0-1.6-0.7-1.6-1.6C16.1,5.6,16.8,4.9,17.7,4.9z M9.6,10.2l11.1,12.7H1.6v-4.2 L9.6,10.2z M23.7,13.4l2.3,2.5c-1.1,1.2-1.9,2.8-1.9,4.6c0,0.9,0.2,1.7,0.5,2.5h-1.7L18.6,18L23.7,13.4z M30.6,15.5 c2.7,0,4.8,2.2,4.8,4.9c0,2.7-2.2,4.9-4.8,4.9s-4.8-2.2-4.8-4.9C25.7,17.7,27.9,15.5,30.6,15.5z M30.6,16.8c-0.4,0-0.8,0.4-0.8,0.8 v2h-2c-0.4,0-0.8,0.4-0.8,0.8c0,0.5,0.4,0.8,0.8,0.8h2v2c0,0.5,0.4,0.8,0.8,0.8c0.4,0,0.8-0.4,0.8-0.8v-2h2c0.4,0,0.8-0.4,0.8-0.8 c0-0.5-0.4-0.8-0.8-0.8h-2v-2C31.4,17.1,31,16.8,30.6,16.8z"></path></g>
      <g id="svg-plus"><path d="M15.6,7.1l-5.1,0c0,0,0,0-0.1,0c0,0,0,0-0.1,0c-0.2,0-0.4-0.2-0.4-0.5l0,0l0-5.1l0-0.3C9.8,0.6,9.2,0,8.5,0 C7.7,0,7.1,0.6,7.1,1.3l0,0.2l0,5.1c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0.3-0.2,0.5-0.5,0.5c0,0,0,0,0,0 c0,0,0,0,0,0l-5,0l-0.3,0C0.6,7.1,0,7.7,0,8.5c0,0.7,0.6,1.4,1.3,1.4h0.2l5.1,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0 c0.3,0,0.5,0.2,0.5,0.5c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0c0,0,0,0,0,0l0,5.1l0,0.2C7.2,16.4,7.8,17,8.5,17 c0.8,0,1.4-0.6,1.4-1.4l0,0l0-5.2c0,0,0,0,0,0c0,0,0,0,0,0c0-0.3,0.2-0.5,0.5-0.5l0,0l5.1,0l0.2,0C16.4,9.9,17,9.2,17,8.5 C17,7.7,16.4,7.1,15.6,7.1L15.6,7.1z"></path></g>
   </svg>
</div>

В документе использую так (для svg передаю ид. спрайта в аттрибуте xlink:href="..."):

<button data-ui="search">
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 61.8 61.5"><use x="0" y="0"  xlink:href="#svg-search"></use></svg>
</button>

На счёт раста и dpi, использую 2 вида спрайта для каждой иконки (обычный монитор и ретина).
Если требуется поддержка 3х и более разновидностей плотности в ход идёт svg.
Но в основном и для мобильных девайсов (пример 120dpi) использую ретиновские спрайты, проблем с качеством иконки не замечал, единственное объём трафика на иконки повышается до ~5-10%

Вот еще инструмент
https://code.highcharts.com/mapdata/

Как и думалось. Всё было придумано давным-давно. Всего-то надо было заглянуть в файлик
C:\Program Files\Corel\Corel Graphics xxx\Draw\GMS\FileConverter.gms

https://github.com/vuejs/awesome-vue#ui-components

Держите codepen.io/delphinpro/pen/BWJEgG
Простая линейная структура. В определенных пределах можно менять положение плиток, не меняя css код.
Если еще помозговать, можно расширить эти пределы, добавить другие размеры плиток. Но на это нужно время, которого у меня нет.