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

Вы вставили html теги script в поле, где должен быть JS код.
Нужно вставить их в поле HTML, а код класса оставить в поле JS (только без тега script), для поддержки JSX, у поля JS нажмите на текст "javascript +...", там в поле Language выберите Babel + JSX.
Получится вот так https://jsfiddle.net/hLtsu2cm/
UPD: вообще, если нажать на облако в левом верхнем углу, то вам предложат создать фидл на основе шаблона, там можно выбрать React + JSX и не париться с подключением реакта.

Без разницы, важна сама цель, показать интерпретатору, что это выражение, а не конструкция. Можно разными способами

+function() { }()
!function() { }();
10 + function() { }();

IE не понимает методы, пишите как свойство с функцией.

watch: {
    numbers:  {
     handler: function(val, oldVal)  {
        // some code
      },
       deep: true
    }
 }

А решается оно часто двумя строчками :)

Это по причине того, что на форумах часто код дают в функциональном стиле, состоящим из вызовов map/filter/reduce и.т.д., а новички еще не дошли до этого, и их это ставит в ступор.

Может быть есть какие-то книги, которые помогают "строить мост" между голой теорией про массивы (в которой, к слову, сложности не вижу) и возможностью применить знания на практике?

Вообще, носорог и learn.java-script.ru самые простые книги по JS, есть еще You Dont Know JS, она на английском. Если они кажутся сложными, то либо программирование это не ваше, либо пробуйте читать фундаментальные книжки, типа Код. Тайный язык информатики. Чарльз Петцольд

Метод execute возвращает boolean, следовательно, в $offices булевое значение, а вы его пытаетесь вызвать как функцию.
Вот так должно работать

$pdo_link->setAttribute(PDO::ATTR_EMULATE_PREPARES, FALSE);
  $stm = $pdo_link->prepare("SELECT `id`, `name`, `url`, `address` FROM `cpl_offices` WHERE `url` LIKE ? AND `bank_id` IS NULL AND `mfo_id` IS NULL AND `del` IS NULL LIMIT ?, ?");
  $stm->execute([$url_like, $limit_from, $per_page]);
  while ($office = $stm->fetch()) {

Есть такая крутая парочка, как fieldset и legend. Вместе они могу решить вашу проблему.
https://jsfiddle.net/Vlad_IT/456or0gn/
задаете белый отступ через padding для legend, а рамочку через border для fieldset.
fieldset по спецификации создал для группировки полей ввода формы, поэтому для такой задачи его использовать не семантично. Можно сделать на флексах https://jsfiddle.net/jwux9kg0/5/

Как следить на нажатой клавишей уже подсказали (но я думаю, вы это сами уже знаете, судя по ответам). Подскажу, как имитировать нажатие клавиши. Нужно найти элемент, который ожидает нажатие клавиши, и вызвать у него метод dispatchEvent, с передачей объекта события. Возьмем например событие KeyDown. В скрипте на сайте стоит обработчик события keydown, и в нем описана фильтрация того, что нажата клавиша 2, фильтрация может быть по одному из следующих свойств
e.which, e.code, e.key, e.keyCode, e.shiftKey
нужно посмотреть, какие свойства нужны (можно не смотреть, и отправить их все), и назначить их в наш объект события KeyDown. Пример для клавиши 2

let eventObj = new KeyboardEvent('keydown', {
  	which: 50, code: 'Digit2', key: '2', keyCode: 50, shiftKey: false
};

и этот объект нужно передать в dispatchEvent

document.getElementById('элемент').dispatchEvent(eventObj);

Пример https://jsfiddle.net/Vlad_IT/t3ofjr4w/

1) Купить нормальный fullhd монитор, т.к. сейчас все сайты нужно на нем смотреть.
2) В хроме F12, слева кнопочка Toggle device toolbar, и вверху вводите нужную ширину экрана.

description это не тег, это name мета тега.
<meta name="description" content="Контент">
вот так надо
$('meta[name="description"]').attr('content')

В sass на самом деле не переменные, а больше константы. При компиляции в css, они будут заменены на обычные значения, как если бы вы их ввели руками. Другое дело, переменные css. Их можно легко менять через js

Вот у меня примерчик с другого вопроса завалялся https://jsfiddle.net/Vlad_IT/5pyn2Lo9/

jsfiddle.net/Vlad_IT/0aj28dwm/1
т.е. какой принцип получается. Мы очищаем элемент, смотрим, если в массиве есть что взять, берем, и ждем снова секунду. Опять очищаем элемент, смотрим, в массиве уже нечего брать, отключаем таймер и выходим с функции (не заполняя html элемент, а он у нас уже очищен).

Можно родителю установить flex-wrap: wrap, а футеру flex-basis: 100%

const date = new Date(); // текущая дата
const dayOfWeek = date.getDay();
if (dayOfWeek === 0) {
    dayOfWeek = 7; // делаем воскресенье не первым днем, а седьмым
}
date.setDate(date.getDate() + (7 - date.getDay())); // добавляем к текущей дате кол-во оставшийся в этой неделе дней
date.setHours(23, 59, 59); // устанавливаем время
const dateString = date.getFullYear() + '/' + ('0' + (date.getMonth() + 1)).slice(-2) + '/' + ('0' + date.getDate()).slice(-2) + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
alert(dateString); // вывод

// html (можно text) меняет содержимое, если передать функцию, то для каждого элемента будет вызвана эта функция,
// и в html будет заполнено возвращаемое значение из этой функции. 
jQuery('.fruits').html(function(ind) { 
   return arr[ind];
});

пример https://jsfiddle.net/Vlad_IT/ecz9xs0f/