VegasChickiChicki

postion: relative;
опечатка
поменять на
position: relative;

Как достать кусок текста из элемента:

const getValue = el => el.textContent.match(/"(.*?)"/)[1];

// или

const getValue = ({ innerText: t }) =>
  JSON.parse(t.slice(t.indexOf('['), -~t.indexOf(']'))).shift();

Как обработать клики - можно обработчик назначить каждой кнопке индивидуально:

document.querySelectorAll('li button').forEach(function(n) {
  n.addEventListener('click', this);
}, e => console.log(getValue(e.target)));

Или делегировать обработку события общему предку:

document.querySelector('ul').addEventListener('click', e => {
  if (e.target.tagName === 'BUTTON') {
    console.log(getValue(e.target));
  }
});

напиши свой простенький тостер, где можно будет задать вопрос, он появится на странице, и к нему можно будет написать комментарий, пусть даже без базы данных и без серверов, пусть после рефреша страницы всё пропадает, но чтобы работало и выглядело нормально

function counter() {
  var i = 0
  
  return {
    next: function() {
      return ++i
    }
  }
}

var foo = counter()
var bar = counter()

console.log(foo.next()) // 1
console.log(foo.next()) // 2
console.log(foo.next()) // 3
console.log(bar.next()) // 1

new Vue({
  router,
  store,
  components: {
    AppModile: () => import('@/AppMobile.vue'),
    App: () => import('@/App.vue')
  },
  render: h => h(isMobile ? 'AppMobile' : 'App')
}).$mount('#app')

Дублирующиеся свойства в литерале объекта переопределяют друг друга. В созданный объект попадает значение последнего. Пример.

Поэтому объект, возвращаемый вызовом функции:

prevState => ({
  counter: prevState.counter + 1,
  counter: prevState.counter + 1,
})

при prevState.counter === 0, будет создаваться как:

{
  counter: 0 + 1,
  counter: 0 + 1,  // результат этого выражения попадет в созданный объект
}

и на выходе получится объект:
{ counter: 1 }
Он и будет подмешан в новый объект состояния.

transform: none;

Курите XMLHttpRequest, пример:

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//использование:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

.category-desc {
    position: relative;
}

.page-header.item-title {
    position: absolute;
    bottom: 60px;
    left: 10px;
}

text-align: justify

overflow-y

Если градиент to bottom, то переместить последний цвет градиента на желаемое расстояние, добавить на ту же позицию белый цвет.



Если у градиента другое направление, то сделать два фона: градиент и белый цвет, затем сдвинуть градиент на нужное расстояние;

.background {
    background: linear-gradient(45deg, magenta, aqua) 0 -150px no-repeat, #fff;
}

Потому что когда.b-popup появляется, он закрывает собой .b-block, возникает событие mouseleave, и его надо скрывать. А как он скрылся - его надо снова показывать, потому что на .b-block возникает событие mouseenter. Ну вот так оно по кругу и происходит.

Добавьте pointer-events: none для .b-popup. Или поместите .b-popup внутрь .b-block.