strelok011

Любая динамика с данными в окне браузера - нужен js. Работа в асинхронном режиме - таки да, это AJAX. Только сам термин ничего не объясняет.

Писать можно хоть на нативном js, можно подключать фреймворки типа jQuery, Vue, React и проч.
Вам придется хранить состояние формы (значения полей, ответы от бэкенда, служебные данные типа шага формы и др.), писать / использовать готовые модули для работы с календарем, отправлять запросы на эндпойнты бэкенда в асинхронном режиме, вешать крутилки (спиннеры) пока ожидается завершение запроса, перестраивать структуру документа чтоб отображать / скрывать шаги формы, писать валидацию заполнения данных, чтобы пользователь вводил только ожидаемые значения.
Готового "воткнул - работает" не найти, такие решения исключительно под конкретные требования пишутся.

Как уже посоветовали - табуляция и знак пробела - это разные символы. IDE при нажатии на кнопку tab заменяют символ табуляции на то количество пробелов, которое стоит по умолчанию, либо! прописано в настройках текущего проекта (в конфиге воркспейса например).
Вообще правильно - использовать пробелы. 2 или 4 - зависит от соглашений на проекте. Если пишете для души - ставьте так, как нагляднее. Я бы предпочел 2, т.к. иногда строка не влезает в видимую часть экрана.
Вертикальные черты - обычно IDE подсвечивает уровни вложенности структур кода с возможностью их сворачивания для удобства. Настроите один раз на воркспейс или глобально - будет вам счастье :)

Гугл, яндекс дают инструменты для расчета.
Яндекс - по дорогам
https://tech.yandex.ru/maps/jsbox/2.1/multiroute_d...

Гугл, если я не ошибся, по прямой
https://stackoverflow.com/questions/39765526/how-c...

Вы можете и сами посчитать, но для этого нужны формулы длины дуги для эллипсоида и справочные данные по размерам земли и ее форме :) слишком много математики.

Не довелось применять, только слышал о новом подходе в использовании css, причем эта технология позволяет очень значительно сжать итоговый файл со стилями (на больших проектах).
Суть такова - проект создается в классическом произвольном режиме, именуете классы как удобно, на выходе компилятор разбирает все классы, приводит к набору базовых атрибутов. То есть на выходе будет стиль вида 'a ab sc o', каждый класс отвечает только за один атрибут. Их конечное и не очень большое число, выгода на больших проектах очевидна, так же смысл парсить результат сводится к 0. В итоге, если не ошибаюсь, размер css файла порядка сотни кб, тогда как на крупных проектах может достигать не одного мегабайта, размер html разметки остается вполне вменяемым.
Годится только для продакшн-релиза.

P.S. Источник не подскажу.

Не уверен на счет php, но вот статья о реализации подобного на nodejs. На английском правда.
https://medium.com/@brianshaler/on-the-fly-video-r...

Суть в том, что сценарий видео передается с фронта на бэк, в дальнейшем на бэке используется canvas (такой же, как и на фронте в браузере), результат обсчета изображения одного кадра скармливается универсальному обработчику видео ffmpeg, в дальнейшем создается видеофайл.
Очень грубо, но общий смысл передает. Я не видел реализацию канвы для php, не стояло цели искать, но похожий функционал на ноде точно действует. Можно запускать серверную версию хромиума, к примеру, в нем рендерить собственно хоть html страницу хоть канву.

Если по секретному ключу необходима подпись формы, то сделайте его одноразовым. Генерите по какому-либо алгоритму при обращении к странице и проверяйте его валидность при возврате формой на бэке.

Есть еще такая штука как Dynamic DNS.

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