aarty20

Без SVG, картинок и псевдоэлементов,
CSS only

<style>a:hover, a:hover h2 {color:lime;}	h2 {color:green;}	</style>

По пунктам:
1. Используйте современные форматы изображений - гугл хочет чтобы на сайте использовались более легкие(не всегда, но в большинстве случаев) варианты изображений в формате допустим .webp
2. Настройте эффективную кодировку изображений - значит что изображения слишком много весят
4. И самое главное, что влияет на все предыдущие пункты - некорректное соотношение размера отображаемого изображения - его визуальному размеру. К примеру - у вас изображение 2500px, действительно ли его нужно отображать на смартфонах в полный размер. или достаточно превью?

<article>
  <img srcset="https://dummyimage.com/2560x400/333/fff 2x,
               https://dummyimage.com/1280x400/333/fff 1x"
       sizes="(min-width: 1280px) 1280px, 100vw"
       alt="A title">
</article>

По вышеописанному коду для современных мобильных используется srcset=https://dummyimage.com/2560x400/333/fffтак как у них плотность пикселей 2x. PageSpeedInsights эмулирует отображение на аналогичном смартфоне.
Для более гибкого подхода в html5 появился элемент picture. Подробнее посмотреть советую у Вадима Макеева в этом же видео подробно разбирается оптимизация графики для сайта.
На примере вашего кода можно сделать набросок

<picture>
    <!-- source для браузеров поддерживающих webp, соответственно srcset тоже должен указывать на webp-->
    <source type="image/webp" srcset="https://dummyimage.com/575x150/333/fff 1x, https://dummyimage.com/1150x300/333/fff 2x," media="(max-width: 575px)">
     <!-- source для браузеров не поддерживающих webp -->
     <source srcset="https://dummyimage.com/575x150/333/fff 1x, https://dummyimage.com/1150x300/333/fff 2x," media="(max-width: 575px)">
    ...  <!-- все остальные необходимые размеры, вроде планшетов и т.д. -->
    <!-- fallback для браузеров не поддерживающих элемент picture -->
    <img src="https://dummyimage.com/2560x400/333/fff" alt="A title">
</picture

Как объяснить налоговой про Upwork?

Никак. В этом нет необходимости.

С какими банками и как работаете?

Приват. Все просто и легко.
Вот презенташка для работы с Пейониром, но с Апворком аналогично.

Можно ли себе оставить валюту или всё нужно продавать?

Нельзя. 50% автоматом продается, остальные по желанию.
Есть какие-то схемы через оформление командировки, но там как-то геморно и мутно, как по мне.

Какую документацию нужно вести?

Я все веду через Таксер, 10 минут раз в квартал потратить отправить отчеты и добавить записи в Книгу доходов.

www.chartjs.org/samples/latest

но которую можно реализовать и с помощью css, и с помощью javascript...
ваше мнение хотел услышать

Мне самому нравится делать все на CSS, но... Если анимация должна быть интерактивной и нужно ее останавливать в процессе, откатывать в изначальное положение и.т.д., или некоторые ее части зависят от данных (в широком смысле - это и движение по сложной траектории, и построение графиков и.т.д.) и их проще рассчитать скриптом, чем подбирать коэффициенты в CSS keyframes, то JS будет лучшим выбором. Если это последовательность мало связанных между собой изменений, то опять же скрипты почти всегда будет проще реализовать. Если речь идет о CSS-анимациях с фильтрами (особенно SVG-фильтрами), то можно влететь в очень сильные проблемы с производительностью на слабом железе. И никакие хаки с GPU тут не помогут - все равно будет тормозить. В такой ситуации может иметь смысл не просто писать на JS, но и подключить WebGL и все делать руками на шейдерах.

В остальных случаях стоит смотреть по ситуации - разные :hover / :focus эффекты обычно легко реализуются на CSS, и, если это так, то зачем что-то придумывать? CSS в последнее время очень даже неплох. Но если, например, в проекте вся анимация делается на JS, то может иметь смысл продолжать делать так же, сохраняя единообразие в коде.

Вариантов снять нагрузку - несколько (речь про AJAX):
1. Запрашивайте (раз в 5 секунд) только тогда, когда пользователь: водит мышку, скролит страницу, уходит или возвращается на вкладку в браузере, если блок с обновляемой информацией находится внутри границ viewport'a (или оказывается там).
Т.е., все случаи, когда пользователь не следит за обновлением информации, то и не нужно "мучить" сервер по-пусту...
2. На стороне сервера - кладите информацию (предназначенную для всех) в общий кэш: в память и затем проверяйте оттуда без обращения к БД.
3. Используйте проверку и обновление данные по cron, чтобы обновлять кэш (как для контента, предназначенного для всех, так и по-пользовательскому контенту) для всех, находящихся в данный момент on-line.

Или используйте сокеты (и, конечно, про кеш - не забывайте).

VanillaJS, очень хороший фреймворк. Перешел на него с jQuery и всем советую.

Не особо понятно, что вы подразумеваете под словом "правильно". Берёте GIT и просто используйте. У нас все проекты делятся две ветки (SPA. Vue + Laravel):
1) master
2) develop

Разработка ведётся в develop, когда всё протестировано, делается merge в master. Если у вас какая-то большая фича, то можно ответвляться от develop и когда она закончена сливать и удалять её.

Смотрите ситуацию. Я человек с плохим зрением. В моём браузере стоит увеличенный размер шрифта. Я открываю сайт в котором верстальщик шрифты указал как надо, в rem, а на размеры/отступы забил и задал их в пикселях. Получается уродство:



Потом верстальщик стал умнее, и переписал размеры/отступы в rem'ы и сразу всё стало очень хорошо:



Понятно?

В jsfiddle.net есть кнопочка "Collaborate "

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