Владимир Проскурин

Для сафари одним overflow: hidden не обойтись, он все равно будет скроллить боди, если у него большое содержимое. Нужно костылить. Чаще всего пишу что-то типа этого

const bodyEl = document.body;
let lastScrollPos = 0;
const scrollBodyLock = () => {
    lastScrollPos = window.pageYOffset;
    bodyEl.style.overflow = 'hidden';
    bodyEl.style.position = 'fixed';
    bodyEl.style.top = `-${lastScrollPos}px`;
    bodyEl.style.width = '100%';
}

const scrollBodyUnlock = () => {
    bodyEl.style.removeProperty('overflow');
    bodyEl.style.removeProperty('position');
    bodyEl.style.removeProperty('top');
    bodyEl.style.removeProperty('width');
    window.scrollTo(0, lastScrollPos);
}

(можно часть свойств переписать на css класс, и просто его добавлять/удалять, так код получится чуток проще).

Просто дергаете scrollBodyLock во время показа меню, и scrollBodyUnlock когда закрываете меню.

Анимации в canvas достаточно быстрые, особенно если нет никаких манипуляций типа даунскейла и прочего.
У вас же ошибка в том, что вы во время отрисовки анимации загружаете картинки, еще и ждете загрузку 512 мс. Или я не так понял код.
Нужно предзагрузить в Image все картинки, и после загрузки включать попеременный drawImage на эти картинки.

Собрал на коленке простой пример. Возможно где-то плохо написал, но время позднее, главное суть и демонстрация.

https://codesandbox.io/s/cut-canvas-animation-k6liw8 (кошак на анимации прыгает, я просто не очень удачно гифку на png порезал).

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

Вариантов несколько.

1) Итерировать по currLangKeys, так получится, что вы не меняете итерируемое значение.
2) Добавить на эту строчку // eslint-disable-next-line no-param-reassign
3) Прописать в ignorePropertyModificationsFor название вашей переменной. Можно придумать какой-то общее название htmlElement, на которое не будет действовать это lint правило. Но это крайне неявный способ, сложно будет держать в голове как должна называться переменная, чтобы на нее не ругалось правило.

Я за второй вариант, т.к. он явно в коде выражает, что в этой строчке автор понимает что делает. Еще стоит правда подумать над выпиливанием этого правила, если вы на это можете влиять. Оно слишком категорично, и если человек захочет так накосячить с переопределением аргумента/итерируемого массива, он просто скопирует ссылку на объект отдельной строчкой, и eslint правило не заметит подвоха. От дураков не защищает, а не дуракам лишь мешает.

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

Можно поступить так - программист декомпозирует задачу, описывает какие компоненты ему нужны на выходе, а верстальщик верстает их без логики (в storybook например).

Но мое ИМХО - фронтендеры должны уметь хорошо верстать. Верстка это ведь не просто psd/figma to html, это еще и доступность, сложные анимации, это производительность, размер бандлов и куча всего, что нужно учитывать при разработке приложений.

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

Фриланс тоже неплохой вариант, если брать заказы, в которых на 80% понимаете что делать. Сделав 3-4 реальных проекта, на собеседовании будет о чем рассказать, да и вы будете лучше на фоне других джуниоров без опыта. Но на фрилансе получить заказ без опыта еще сложнее, чем оффер :) Поэтому лучше придумать себе задачу, реализовать ее и преподносить как реальные проекты.

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

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

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

vertical-align (который работает при inline-block) дефолтное значение baseline, установите в top
vertical-align: top
чтобы выровнить не по линии родительского элемента, а по верхнему краю

padding не исчезает, у вас просто вертикальное выравнивание центрирует текст. Вот так проще понять https://jsfiddle.net/Vlad_IT/rm6uz1hx/ я убрал overflow: hidden/scroll и добавил margin. С вертикальным выравниваем симметричный padding ничего не дает. Уберите align-items и все будет ок https://jsfiddle.net/Vlad_IT/rm6uz1hx/2/