Ivan Bogachev

По сути нужно применить фильтр к канвасу, который там спрятан среди элементов карты. Так что если взять разметку вроде:

<div class='my-super-map'>
    <script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A07be0313631167b7c9034cf92574b147daa12b122f3d938bc90aa67df29c81ac&amp;width=600&amp;height=449&amp;lang=ru_RU&amp;scroll=true"></script>
</div>

то останется только добавить:

.my-super-map canvas {
    filter: invert(100%);
}

Не то, чтобы это было красивым решением, но оно работает.

CSS трансформации: rotate пластинке - чтобы крутить, translate обертке - чтобы подвинуть на :hover.
CSS анимации - чтобы крутить бесконечно долго.

Вы можете в графическом редакторе переместить и масштабировать всю свою карту в SVG так, чтобы она была грубо говоря не от 0 до 100 (или какая она у вас там) по горизонтали, а от 19 до 169 (вроде бы, не силен в географии). И по вертикали так же подвинуть. И исходить из соображений, что координаты X/Y в SVG буквально равны нашим обычным координатам по широте и долготе. На восток и север - в плюс, на запад и юг - в минус. А перемещение на экране и масштабирование можно сделать с помощью атрибута viewbox, меняя его по ходу дела. Если вы руками рисуете, то таким образом можно получить точность в 1/4 градуса без умственных усилий, просто представив циферблат (0'/15'/30'/45' -> 0/.25/.50/.75), так что думаю, что для ваших задач, где точность не столь важна, это вполне подойдет.

Делать временные заглушки/плейсхолдеры (называйте как хотите) для картинок с теми же пропорциями. Удобно для этих целей использовать SVG - если сервер знает размер картинки, то можно сгенерировать прямоугольник и вставить SVG с ним в то место, где должна быть картинка, а потом саму картинку абсолютным позиционированием положить на нее сверху. Имеет смысл эти заглушки генерировать заранее (один раз) для загружаемых на сервер картинок. В некоторых случаях можно еще сильнее заморочиться и сделать все не только функционально, но и красиво.

Потому, что for...in перебирает не совсем то, что вы ожидаете. В вашем случае будет удобнее использовать какой-нибудь другой вариант цикла - тот же for...of к примеру.

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

Стали бы вы им пользоваться? Если нет, то почему? Перспективно ли это направление вообще и перспективно ли конкретно это приложение?

Минификация кода должна производиться автоматически в процессе сборки. В 2019 году никто уже не ходит куда-то и не делает это вручную. Есть gulp, webpack, parcel и.т.д. - целая куча инструментов, которые могут по ходу дела минифицировать все, что через них проходит. Нужно лишь сказать им - минифицируй! В наше время все, что можно автоматизировать, люди стараются автоматизировать, а ваш сервис - это шаг назад на этом пути.

Подобные штуки строятся на анимации transform: scale(...), ну а вариантов с разной длительностью и количеством кругов можно придумать много, тут уж на вкус и цвет...

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

У меня такое было, когда я только перешел во фронтенд и пытался держать слишком много деталей о языках и инструментах в голове. Со временем понял, что это не имеет смысла - все меняется быстрее, чем я запоминаю. Перешел от мысли "я использую инструменты" к мысли "я делаю штуки" и сразу полегчало, стал держать в голове только общие идеи о том, как что-то делается, или что вообще бывает в какой-то области, а конкретные инструкции по применению отдельных инструментов изучаю по ходу дела. Изменил фокус своего самообразования, если это можно так назвать. В результате все препроцессоры слились в один, новые библиотеки становятся все менее сложными в освоении, поскольку идеи везде плюс-минус одинаковые и.т.д. Решения стало принимать гораздо проще. И аргументировать тоже. Иногда складывается такое впечатление, что у нас в отрасли совсем ничего не появляется нового уже лет пять, а то и больше. Да, я забываю как использовать флексы, путаю call() и apply(), гуглю свои же ответы на тостере, но это не важно. Голова занята решением проблем, в ней теперь нет никакой второстепенной информации и это очень здорово. Статьи писать тоже полезно оказалось - написал, "поставил на полочку", и забыл. А если будет нужно - можно достать и посмотреть. Таким образом вот эта вся фигня с закипанием мозгов практически ушла.

Вы много раз используете такие штуки, как use и clip-path, указывая там id елементов. Но сами id на странице не уникальны. Вот и ломается все. Используйте уникальные id для элементов.

Это один из багов отображения SVG-картинок во flex-контейнерах. Это вообще больная тема, там эти картинки то схлопываются по ширине, то получают странные отступы в отдельных браузерах. Можно решить, обернув картинку в div с явным указанием display=block для него:

<div class="test">
    <img src="https://123.svg"/>
</div>

.test {
    display: block;
}

Есть такая штука, как gulp-tap, с ее помощью можно решить вашу задачу.

А в целом - содержимое файлов можно получать вне зависимости от сборщиков и таск-раннеров с помощью fs.readFile или fs.readFileSync (пример).

Обычно в таких дизайнах просто много абсолютного позиционирования. Классическая N-колоночная сетка может использоваться в отдельных блоках, а может и не использоваться - по вкусу верстальщика. Сами дизайнеры часто используют не деление на колонки, а "художественную" сетку с диагоналями (пример можно загуглить по запросу golden canon grid). Специального названия у всего этого вроде как нет, лично мне кажется уместным называть это "журнальной" версткой (так многие модные оффлайновые журналы рисуют).

Верстать такое не сложно, важно просто аккуратно определять откуда считать позицию того или иного элемента (к чему он логически привязан в дизайне). Адаптируется медиа-запросами, как и любая другая верстка. Иногда бывают сложности, если дизайнер намалевал что-то под большой размер экрана и не удосужился написать, как все уместить на маленьком - но это решается или обсуждением с ним или влоб все в столбик перестраивается, если мобильная версия не так важна. Обычно подобная верстка уместна в рекламных сайтах, которые больше рассчитаны на привлечение внимания и оказание впечатления на посетителя. Часто все это снабжается большим количеством анимаций и плавными переходами между страницами.

В черновиках Selectors Level 4 есть мысль о псевдоклассе :has, который мог бы дать возможность проверять такие связи и писать что-то вроде

.tab-position:has(> .pinned) {
    /* . . . */
}

но на сегодняшний день ни один браузер это не поддерживает. Так что нет, такой селектор в CSS сделать пока нельзя.