Павел Андрейченко

Первый пример из гугла

А почему нет? picture рендерит img.
А img же можно в figure?
https://caninclude.glitch.me/can/include/?child=pi...

Ни там, ни там. Вы же данные на сайте выводите не напрямую из апи, а где-то сохраняете перед выводом. Соответственно, контроллер тут не нужен. Или консольная команда, или какой-то хэндлер/сервис, а уже дергать руками, если надо, в контроллере.

Перед циклом проверять на пустоту $posts.

$posts = R::findAll('posts');
  if ($posts) {
    foreach ($posts as $post) {
      echo '<p>', $post->description, '</p>';
    }
  } else {
    echo '<p>Пусто</p>';
  }

Чтобы очистить кэш редиректа в Google Chrome:
1. Откройте новую вкладку
2. Откройте консоль разработчика (нажать F12 или Ctrl+Shift+i)
3. Зайти в настройки консоли и поставить там галочку "Disable cache" в секции "Network".
4. На открытой вкладке с открытой консолью открыть сайт, редирект которого закэшировался.
5. Profit!

Попробуйте добавить preserveAspectRatio="xMidYMid slice" к SVG с этими полигонами.

Для начала опишем элементы списка в виде массива объектов, где текст и процент будут отдельными свойствами:

data: () => ({
  items: [
    { name:      'PHOTOSHOP', val: 88, color:    'red' },
    { name:    'ILLUSTRATOR', val: 92, color:  'green' },
    { name:         'SKETCH', val: 90, color: 'orange' },
    { name: 'AFFTER EFFECTS', val: 98, color:   'blue' },
  ],
}),

Затем сделаем методы, который будут генерировать текст и стили для рисования линии (в качестве линии можно использовать границу элемента, border-bottom например) у элемента списка:

methods: {
  liText: item => `${item.name} ${item.val}%`,
  liStyle: item => ({
    'border-bottom': `3px solid ${item.color}`,
    width: `${item.val}%`,
  }),
},

И, наконец, отрендерим список:

<ul>
  <li
    v-for="n in items"
    v-text="liText(n)"
    :style="liStyle(n)"
  ></li>
</ul>

Интерактивный пример

let isHovering = false;
let intervalId = null;

targetElement.addEventListener('mouseenter', () => {
  isHovering = true;

  intervalId = setInterval(() => {
    if (!isHovering) {
      clearInterval(intervalId);
      return;
    }

    row.scrollBy(/* params */);
  }, 16)
});

targetElement.addEventListener('mouseleave', () => {
  isHovering = false;

  if (intervalId) {
    clearInterval(intervalId);
  }
});

Можно обойтись и меньшим кодом:

let intervalId = null;

targetElement.addEventListener('mouseenter', () => {
  intervalId = setInterval(() => {
    row.scrollBy(/* params */);
  }, 16)
});

targetElement.addEventListener('mouseleave', () => clearInterval(intervalId));

Но этот вариант мне не очень нравится своей неявностью.

Для этих целей есть удобная функция в библиотеке _lodash: uniqBy

var cities = [{
  name: 'Name 1',
  city: 'city 1',
  developer: 'dev 1',
},
{
  name: 'Name 2',
  city: 'city 2',
  developer: 'dev 2',
},
{
  name: 'Name 3',
  city: 'city 1',
  developer: 'dev 3',
}];


var result = _.uniqBy(cities, 'city');
console.log(result);

https://jsfiddle.net/1utfwv7r/

Если не использовать вебсокеты, то проще всего хранить дату последнего обновления списка и запрашивать её с фронта раз в несколько секунд. Если она больше той, что была при предыдущем запросе данных, то запрашивать список по новой.
Ну а если у нас есть возможность использовать вебсокеты, то тут проще (и одновременно сложнее). В простейшем случае приложение, которое вставляет данные и обслуживает вебсокеты - одно и то же. Тогда просто по сокетам шлем оповещение всем фронтам и они запрашивают обновленный список. Или шлем сразу изменения и фронты изменяют свои данные. При разделении приложения на части получается усложнение: при изменении данных шлем сигнал от той части, которая меняет данные к той части, которая обслуживает вебсокеты и она оповещает фронты. Ну, или интегрируем какую-нибудь систему управления очередями сообщений типа RabbitMQ. В общем, начинается простор для фантазии.