0xD34F

json.results.map(({ lists, volume }) => {
  return lists.map(({ tags, list }) => {
    return tags.map(tag => ({ volume, list, tag }));
  });
}).flat(2)

data: () => ({
  date: new Date(),
}),
filters: {
  formatDate1: d => d.toLocaleString('ru-RU').replace(',', '').slice(0, -3),
},
methods: {
  formatDate2: d => [ 'Date', 'Month', 'FullYear', 'Hours', 'Minutes' ]
    .map((n, i) => '.. :'.charAt(~-i) + `${d[`get${n}`]() + !~-i}`.padStart(2, 0))
    .join(''),
},

<div class="fullDate">{{ date | formatDate1 }}</div>
<div class="fullDate">{{ formatDate2(date) }}</div>

Некоторые HTML-элементы, такие как <ul>, <ol>, <table> и <select> имеют ограничения на то, какие элементы могут отображаться внутри них, или например элементы, такие как <li>, <tr> и <option> могут появляться только внутри других определённых элементов.

Это приведёт к проблемам при использовании компонентов с элементами, которые имеют такие ограничения. Например:

<table>
  <blog-post-row></blog-post-row>
</table>

Пользовательский компонент <blog-post-row> будет поднят выше, так как считается недопустимым содержимым, вызывая ошибки в итоговой отрисовке. К счастью, специальный атрибут is предоставляет решение этой проблемы:

<table>
  <tr is="blog-post-row"></tr>
</table>

function createTreeData(data, idKey, parentKey) {
  const tree = Object.fromEntries(data.map(n => [ n[idKey], { ...n, children: [] } ]));

  return Object
    .values(tree)
    .filter(n => !(tree[n[parentKey]] && tree[n[parentKey]].children.push(n)));
}

const createTreeHTML = data =>
  Array.isArray(data) && data.length
    ? `<ul>${data.map(n => `
         <li>
           ${n.name}
           ${createTreeHTML(n.children)}
         </li>`).join('')}
       </ul>`
    : '';

const createTreeElement = data =>
  data instanceof Array && data.length
    ? data.reduce((ul, n) => (
        ul.append(document.createElement('li')),
        ul.lastChild.append(n.name, createTreeElement(n.children)),
        ul
      ), document.createElement('ul'))
    : '';

const treeData = createTreeData(obj, 'id', 'parent_id');

document.body.insertAdjacentHTML('beforeend', createTreeHTML(treeData));
document.body.append(createTreeElement(treeData));

function createTreeElements(arr, idKey, parentKey) {
  const tree = arr.reduce((acc, { [parentKey]: n }) => (
    acc[n] = acc[n] || document.createElement('ul'),
    acc
  ), {});

  arr.forEach(n => (
    tree[n[parentKey]].append(document.createElement('li')),
    tree[n[parentKey]].lastChild.append(n.name, tree[n[idKey]] || '')
  ));

  return Object.values(tree).filter(n => !n.parentNode);
}


document.body.append(...createTreeElements(obj, 'id', 'parent_id'));

const result = Object
  .entries(arr.reduce((acc, [ n ], i) => ((acc[n] = acc[n] || []).push(i), acc), {}))
  .map(n => ({ [n[0]]: n[1] }));

function filterByMinMax(arr, [ min, max ], key = n => n) {
  const getVal = key instanceof Function ? key : n => n[key];
  return arr.filter(n => {
    const val = getVal(n);
    return (min == null || min <= val) && (max == null || val <= max);
  });
}


const d1 = filterByMinMax(chartPoints, [ new Date('2019-02-19') ], n => new Date(n.date));
const d2 = filterByMinMax(chartPoints, [ , '2019-01-23' ], n => n.date);
const d3 = filterByMinMax(chartPoints, [ '2019-02-12', '2019-02-26' ], 'date');

Object.values(arr.reduce((acc, row) => {
  row.forEach((n, i, a) => i && (acc[n] = acc[n] || [n]).push(a[0]));
  return acc;
}, {}))

const Gradient = ({ data, areaGenerator, height }) => {
  const ref = useRef(null);

  useEffect(() => {
    if (ref.current) {
      d3.select(ref.current)
        .append('linearGradient')
        .attr('id', 'area-gradient')
        .attr('gradientUnits', 'userSpaceOnUse')
        .attr('x1', 0)
        .attr('y1', 0)
        .attr('x2', 0)
        .attr('y2', height)
        .selectAll('stop')
        .data([
          { offset: '0%', color: 'rgba(101, 60, 173, 0)' },
          { offset: '100%', color: 'rgba(101, 60, 173, 0.2)' }
        ])
        .enter()
        .append('stop')
        .attr('offset', d => d.offset)
        .attr('stop-color', d => d.color);

      d3.select(ref.current).append('path').attr('class', 'area');
    }
  }, [ ref.current ]);

  useEffect(() => {
    if (ref.current) {
      d3.select(ref.current)
        .select('.area')
        .datum(data)
        .transition()
        .duration(1000)
        .attr('d', areaGenerator);
    }
  }, [ ref.current, data ]);

  return <g className="gradient-generator" ref={ref} />;
};

preg_replace('~(\d) *([.,]) *(\d)~', '$1$2$3', $str)

.galery.flex 
  - for (let i = 0; i < 5; i++)
      +galeryImg

$(document).on('input', '.editor', function() {
  const content = $('.editor')
    .get()
    .map(n => `\n  <li>${$(n).html()}</li>`)
    .join('');

  $('textarea').val(`<ul>${content}\n</ul>`);
});

str.replace(/.{4}(?!$)/g, '$&-')

// или

str.match(/.{1,4}/g).join('-')

// или

str.split(/(?<=^(?:.{4})+)/).reduce((acc, n) => acc + (acc && '-') + n, '')

// или

''.concat(...[...str].map((n, i) => !i || i % 4 ? n : `-${n}`))

// или

Array.from(
  { length: Math.ceil(str.length / 4) },
  (n, i) => str.slice(i * 4, (i + 1) * 4)
).join`-`

const items = document.querySelectorAll('.yourself-item__title');
const height = `${Math.max(...Array.from(items, n => n.clientHeight))}px`;
items.forEach(n => n.style.height = height);

<fucking-component @fucking-event="onFuckingEvent">

methods: {
  onFuckingEvent() {
    console.log('fuck off');
  },