0xD34F

options: {
  scales: {
    yAxes: [ {
      ticks: {
        min: 4
      }
    } ]
  }
}

Битовое И.

$t = 0x31;
$lowerBits = $t & 0xF;

Получается накосячил где-то в promise, но не могу разобраться где

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

да и непонятно тогда, почему console.log(tree) выводит полностью данные

Да понятно почему - к моменту, когда вы в консоли кликаете по массиву, все данные уже подгрузились и браузер может их отобразить.

А когда вы пытаетесь взять элемент tree[1], то разумеется его ещё нет - потому и undefined. То же самое и с преобразованием в строку - в момент вызова JSON.stringify в массиве лежит всего один элемент.

let obj = new (require('./file1'));

Если без скобок вокруг вызова require, то получается, что new относится к require, а не к тому, что он возвращает. Конструктор не вызывается и obj оказывается не экземпляром Test'а, а самим Test'ом.

const spinWords = str => str
  .split(' ')
  .map(n => n.length > 4 ? [...n].reverse().join('') : n)
  .join(' ');

или

function spinWords(str) {
  return str.replace(/\S{5,}/g, m => ''.concat(...Array.from(m).reverse()));
}

Надо ограничить высоту, чтобы было что скроллить. Попробуйте так, например:

max-height: 90%;
overflow: auto;

замените arr.push($('.drag').attr('id')); на arr.push(ui.draggable.attr('id'));

Можно так:

const result = Object
  .entries(Object.assign({}, ...arr1, ...arr2))
  .map(n => ({ [n[0]]: n[1] }));

Или так:

const union = (key, ...arrs) =>
  Object.values([].concat(...arrs).reduce((acc, n) => (acc[key(n)] = n, acc), {}));


const result = union(el => Object.keys(el)[0], arr1, arr2);

Или так:

const result = _.unionBy(arr1, arr2, el => _.keys(el)[0]);

fetch(url)
  .then(r => r.json().then(data => ({ data, headers: r.headers })))
  .then(r => console.log(r.data, r.headers));

$(document).click(function(e) {
  const $target = $(e.target);
  let $itemsToClose = $('.top-menu__item');

  if ($target.hasClass('top-menu__link')) {
    const $item = $target.closest('li');
    $item.toggleClass('top-menu__item_open').children('ul').slideToggle();
    $itemsToClose = $itemsToClose.not($item);
  }

  $itemsToClose
    .removeClass('top-menu__item_open')
    .children('ul')
    .slideUp();
});

try:
    skdjfald
except Exception as e:
    print(e)

Неудивительно, что не помогло - border-bottom вы определили для ссылки, а не изображения.

Определите класс для ссылок, содержащих изображение, и назначьте border: none ему:

.a-image {
  border: none;
}

<a class="a-image"><img src="...

Установим соответствие между слайдами и кнопками с помощью data-атрибута:

<div class="slide" data-slide="1">1</div>
<div class="slide" data-slide="2">1+1</div>
<div class="slide" data-slide="3">3.0001</div>

<div>
  <span class="step" data-slide="1"></span>
  <span class="step" data-slide="2"></span>
  <span class="step" data-slide="3"></span>
</div>

По клику на кнопку снимаем класс active там, где он есть, добавляем его кликнутой кнопке и слайду, чьё значение data-slide такое же, как у кнопки:

$(document).on('click', '.step', function() {
  $('.step.active, .slide.active').removeClass('active');
  $(this).addClass('active');
  $(`.slide[data-slide="${this.dataset.slide}"]`).addClass('active');
});

// по умолчанию сделаем активным первый слайд
$('.step').eq(0).click();

правильно ли использовать общий объект data

Нет.

Родительский компонент загружает данные и передаёт их посредством параметров в дочерние (ну или vuex используйте, если структура приложения сложнее).

В родителе:

<clients-list :rows="clients" :headers="clientsTableHeaders"></clients-list>

В дочернем компоненте:

Vue.component('clients-list', {
  props: [ 'rows', 'headers' ],
  ...
});

clientsTableHeader.email.show <...> как это можно использовать при обработке списка клиентов

Сделать вычисляемое свойство, которое будет представлять отфильтрованный массив заголовков (да, лучше сделать заголовки обычным массивом, так будет гораздо удобнее) по значению свойства show:

computed: {
  activeHeaders() {
    return this.headers.filter(n => n.show);
  },
},

При рендеринге таблицы перебирать этот массив:

<thead>
  <tr>
    <th v-for="header in activeHeaders">{{ header.title }}</th>
  </tr>
</thead>
<tbody>
  <tr v-for="row in rows">
    <td v-for="header in activeHeaders">{{ row[header.name] }}</td>
  </tr>
</tbody>

https://jsfiddle.net/jgneacxq/

preg_match_all('~<.+?>(.*?)<\/.+?>~', $str, $matches);
$result = $matches[1];

или, без регулярных выражений:

function getTexts($domNode) {
  $result = [];

  foreach ($domNode->childNodes as $n) {
    if ($n->nodeType === XML_TEXT_NODE) {
      $result[] = $n->nodeValue;
    } else if ($n->nodeType === XML_ELEMENT_NODE) {
      array_push($result, ...getTexts($n));
    }
  }

  return $result;
}

$doc = new DOMDocument();
$doc->loadHTML($str);
$result = getTexts($doc);

или, тоже без регулярных выражений:

$doc = new DOMDocument();
$doc->loadHTML($str);
$result = [];

foreach ((new DOMXPath($doc))->query('//text()') as $n) {
  $result[] = $n->nodeValue;
}

Обычный цикл, от нуля до 2 в степени указанного числа (не включая верхнюю границу), с шагом в единицу. Искомые комбинации нулей и единиц - двоичные представления счётчика цикла.

Пробовал приспособить setTimeout, пробовал им вызывать функцию, а к функции присвоить название.. Но не сработало..
Что я делаю не так?

Не знаю, что вы делаете не так - вы же не показали, как вы пытались использовать setTimeout. Осмелюсь предположить, что вы контекст потеряли.

SELECT f.*, GROUP_CONCAT(fc.cat_id)
FROM film f
LEFT JOIN film_category fc ON fc.film_id = f.id
GROUP BY f.id