Сергей delphinpro

https://www.php.net/manual/ru/function.htmlspecial...

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

Но сделать можно. Стиль видимости применить только на мелких экранах.

.menu {
  display: none;
}

@media (max-width: 600px) {
  .menu.open {
    display: block;
  }
}

obj - это объект.
К полям объекта можно обращаться через точку или квадратные скобки

например

const obj = { prop: 123 }

// Это два одинаковых выражения
obj.prop // 123
obj['prop'] // 123

Строка 'prop' тоже может быть переменной

const obj = { prop: 123 }
const name = 'prop';
obj[name] // 123

Круглые скобки - это вызов функции.
Функция может содержаться в переменной

const my_func = function() {}
// чтобы ее вызвать
my_func();

И все это может комбинироваться.
Функция может быть частью объекта

const obj = {
  my_func: function(){}
}

Может передаваться в объект через переменную

const my_other_func = function() {}
const obj = {
  my_func: my_other_func
}

И может быть вызвана
при обращении к свойству объекта через точку
obj.my_func()
при обращении к свойству объекта через квадратные скобки

obj['my_func']()
// или
const name = 'my_func';
obj[name]()

Как минимум, в коде не видно подключения jquery

Нет. Парсер у mpdf очень примитивный. Там не работают гриды, флексы. Не поддерживается box-sizing и вообще всё довольно плохо.
Готовые сетки специально для mmpdf скорее всего отсуствуют.

Пишите сами. Варианта всего два – флоаты и таблицы.

https://codepen.io/delphinpro/pen/bGjpKWY
https://codepen.io/delphinpro/pen/BEZgwR

Можно просто использовать переменную в замыкании

document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', () => {
     button.toggleClass('active');
  });
});

Ну или референс из события

document.querySelectorAll('.button').forEach(button => {
  button.addEventListener('click', event => {
     event.target.toggleClass('active');
     // Или так, если есть вложенные элементы
     // event.target.closest('.button').toggleClass('active');
  });
});

Хотите делать spa - делайте. блэйд будет не нужен.
spa может использовать аутентификацию через токены, обычно так и делается. Тут уж никакую "авторизацию через php" не прикрутишь, ибо нет никакой сессии, состояние не хранится на сервере.
spa также может использовать аутентификацию на сессиях. Немного не "как у всех", но имеет место быть. здесь можете прикрутить отдельные страницы/шаблоны логина, если очень хочется.

Заменить на $request['content']

Вообще мне не понятно, для чего сделан объектный доступ к переменным запроса. Возможно это используется внутри, или наследие прошлого. Но использовать его в приложении - так себе идея. Есть методы get(), input(), реализован ArrayAccess.

Зачем парсить?

JSON - JavaScript Object Notation
Это уже готовый объект

var colors = <?= json_encode($colors) ?>;

const pName = prompt('Введите имя первого человека');
const pAge = prompt('Введите возраст первого человека');
const secName = prompt('Введите имя второго человека');
const secAge = prompt('Введите возраст второго человека');

const person1 = new Person(pName, pAge);
const person2 = new Person(secName, secAge);

const car1 = new Car('sedan', 'petrol','rear brakes','hunday', [person1]); 
const car2 = new Car('van', 'diesel', 'rear brakes','nisan', [person1, person2]);

const garag1 = new Garag ('Cindy', '2 Cars', [person1], [car1,car2]);
const garag2 = new Garag ('Jon', '1 Cars', [person2], [car2]);

console.log(garag1,person1,car1,car2);

Поменяйте пару событий mouseover/mouseout на mouseenter/mouseleave