Как записывать имя пользователя в лог файл на web сервере?

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

Почему не всегда изменяется изображение в блоке при наведении указателя мыши?

aliasmark, можно еще через currentTarget вместо eventTarget сделать. Первый - элемент, на котором висит обработчик, второй может быть дочерним, это — элемент, который инициировал событие. Это заметно со сложным html, когда обработчик навешивается на родителя, но фактически срабатывает на дочернем элементе

Почему не всегда изменяется изображение в блоке при наведении указателя мыши?

У вас обработчик event.target указывает на любой элемент, на который наведен курсор. Например, на текст внутри блока, а не на сам блок .motionPlitka

Можно ли задать свой шаблон фрейма в фигме?

А у вас самого этот плагин работает? Я пробовала, у меня он, честно говоря, вообще ниего не создает. Судя по комментам на странице не у меня одной.

Какие возможные варианты сделать такую кнопку, чтобы границы кнопок подстраивались под размер текста внутри?

MortSith тогда динамически отрисовать скошенные параллелепипеды и использовать их как маски для готового фона.

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

Какие возможные варианты сделать такую кнопку, чтобы границы кнопок подстраивались под размер текста внутри?

Можно подсчитать по количеству символов длину кнопки + отступы. По этому размеру отрисовать динамически кнопку и хаполнить штриховкой боковую и нижние строны проекции. Заливку примерно так сделать

.striped-background {
    background: repeating-linear-gradient(
      -45deg,         /* угол наклона */
      white,          /* начало белого цвета */
      white 10px,     /* белая линия 10px */
      black 10px,     /* начало черной */
      black 15px      /* толщина черной 5px */
    );
  }

При этом если будете менять угол наклона, может появиться лесенка. Или сделать штриховку в svg

Как поставить картинку на один уровень с текстом?

dvrr, поправила немного. Попробуйте так.

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

<a href="/servers">Servers</a>
<a href="/logout">Logout</a>

у вас пока просто идут друг за другом и образуют одну строку. Я бы предложила обернуть

<div class="navbar-item">
<a href="/logout">Logout</a>
</div>

Как поставить картинку на один уровень с текстом?

dvrr, давьте свой код, который есть сейчас, будем разбираться

Как оценить влияние динамических единиц измерения на рендеринг в css (rem, vw)?

Можно потестировать влияние каждого компанента изолированно:

1. Убрать плавающие точки
   
2. Убрать calc, заменить вычисления на фиксированные числа в px
   
3. Изолировать использование vw: сравните производительность с использованием vw при изменении размера окна и без него
   
4. Оцените влияние rem, меняя корневой размер шрифта
   

Я ставлю на то, что наибольшее влияние окажет изменение размера окна при использовании calc() с vw потому что потребуется пересчет всех элементов.
Влияние на производительность от вычисления rem с плавающей точкой будет незначительным. Вряд ли у вас в действительности часто будет изменяться размер шрифта корневого элемента в рамках одной сессии.