0xD34F

В обработчик клика передаётся объект события, а не элемент. А ещё значения data-country почему-то на русском - какого чёрта? Надо, чтобы были такими же, как и id у элементов .tabcontent.

Править атрибуты я конечно не буду, а код вот:

const tabLinks = document.querySelectorAll('.tablinks');
const tabContent = document.querySelectorAll('.tabcontent');

tabLinks.forEach(n => n.addEventListener('click', openTab));

function openTab({ currentTarget: t }) {
  const { country } = t.dataset;
  tabLinks.forEach(n => n.classList.toggle('active', n === t));
  tabContent.forEach(n => n.classList.toggle('active', n.id === country));

  // или, к чёрту data-атрибуты и id, можно индексами воспользоваться;
  // конечно, в этом случае необходимо, чтобы .tablinks и соответствующие им
  // .tabcontent были расположены в одинаковом порядке
  const index = Array.prototype.indexOf.call(tabLinks, t);
  tabLinks.forEach(n => n.classList.toggle('active', n === t));
  tabContent.forEach((n, i) => n.classList.toggle('active', i === index));
}

Просто добавьте метке обработчик клика:

placemark.events.add('click', () => {
  // здесь дёргаете scrollTo или scrollIntoView
});

https://jsfiddle.net/9xskoczg/

pointer-events: none для ::after

<button v-for="(n, i) in items" @click="onClick(i)">{{ n }}</button>

methods: {
  onClick(index) {
    this.items = this.items.slice(0, index + 1);
    // или
    // this.items.splice(index + 1, this.items.length - index);
  },
  ...
},

https://jsfiddle.net/z3xh2ts4/

Создаёте infowindow:

const info = new google.maps.InfoWindow();

И показываете его при клике на маркеры:

marker.addListener('click', function() {
  info.setContent('сюда засовываете свою информацию');
  info.open(map, marker);
});

https://codepen.io/anon/pen/MdjRrM?editors=1010

$('p i').text((i, text) => i % 3 ? text : 'hello, world!!');

или

document.querySelectorAll('p i').forEach((n, i) => {
  n.textContent = i % 3 ? n.textContent : 'fuck the world';
});

Если у элементов p общий родитель, то можно и не смотреть на индекс, сразу нужные элементы получить:

for (const n of document.querySelectorAll('p:nth-of-type(3n + 1) i')) {
  n.innerText = 'fuck everything';
}

if (inputs[el].value == "") el++;

if (inputs[el].value.match(/[А-я]/)) {

Давайте представим, что пустое значение имеет последний элемент. Делаете свой ++, а затем пытаетесь элемент обработать - следующий, которого НЕТ. А раз его нет, значит он undefined, а у undefined никакого value быть не может, как и любых других свойств. Если не хотите обрабатывать пустой элемент - выполняйте переход к следующей итерации цикла вместо вот этих вот стрёмных манипуляций со счётчиком.

.product_card:hover .hover_block {
  position: relative;
  z-index: 666;
}

Забыли return. Или фигурные скобки лишние. В articles.map.

export default props => (
  <ul>
    {props.articles.map(n => (
      <li key={n.id}><Article article={n} /></li>
    ))}
  </ul>
);

Надо предварительно компилировать, или хранить не строку, а объект: имя компонента + параметры. Например.

Забыли вызвать родительский конструктор в потомке: Construct1.apply(this, arguments);.

$c = array_map(function($n) use($b) {
  return $b[$n] ?? 'NaN';
}, $a);

скрытые радиокнопки:

<label class="button">
  <input type="radio" name="button">
  <span>click me</span>
</label>

<label class="button">
  <input type="radio" name="button">
  <span>click me</span>
</label>

.button input {
  display: none;
}

.button input:checked + span {
  background: red;
  color: white;
}

computed: {
  namesFilter() {
    const name = this.name_from.toLowerCase();
    const names = this.names;
    const filterBy = [ 3, 4 ];

    return name
      ? names.filter(n => filterBy.some(i => n.children.item[i].value.toLowerCase().includes(name)))
      : names;
  },
},

Ну и понятно, какой напрашивается следующий шаг - сделать filterBy свойством компонента, привязать его содержимое через v-model к, например, чекбоксам, и вот уже пользователь может настраивать фильтрацию по произвольному количеству свойств.

arr
  .reduce({}){|acc, n| acc.update(n[:books])}
  .collect{|k, v| { author: k, book: v[:book] }}
  .sort_by{|n| n[:author]}

https://momentjs.com/

moment.locale('ru');

document.querySelector('#load').addEventListener('click', function load() {
  fetch('https://api.github.com/users/fristyr/repos')
    .then(r => r.json())
    .then(data => {
      const formatIn = 'YYYY-MM-DDTHH:mm:ss';
      const formatOut = 'DD MMMM YYYY';

      document.querySelector('.repo-wrapp').insertAdjacentHTML('afterbegin', data.map(item => `
        <article class="repo"> 
          <a href="${item.html_url}" class="repo__name">${item.name}</a>
          <br>
          <span class="repo__technology">${item.language}</span> 
          <span class="repo__update">${moment(item.updated_at, formatIn).format(formatOut)}</span>
        </article>`
      ).join(' '));
    });
});

currentTarget:

event.currentTarget.getAttribute('имя_атрибута')

Или, есть вариант атрибут вообще не устанавливать, а передавать в обработчик нужное значение:

onClick={e => props.arrowHandler(e, VALUE)}

если условия задачи поменяются и...

Очевидно же - надо сделать отдельный компонент. "Условия" передавать через props, чтобы было как-то так:

<EditorWithTableOfContents tags={[ 'h1' ]} />
<EditorWithTableOfContents tags={[ 'h2', 'h3' ]} />

Сбор информации о заголовках - достаточно получить элементы и сохранить пары тэг-текст. При создании оглавления индексы элементам указываете общие, без разделения по тэгам. Когда надо выполнить прокрутку, берёте внутри редактора элемент с этим индексом:

const EditorWithTableOfContents = ({ tags }) => {
  const [headers, setHeaders] = useState([]);
  const editorEl = useRef(null);

  const onChange = e => {
    setHeaders(Array.from(
      e.editor.document.$.querySelectorAll(tags.join(', ')),
      n => [ n.tagName, n.innerText ]
    ));
  };

  const goToAnchor = e => {
    const index = e.target.dataset.index;
    const d = editorEl.current.editor.document.$;

    d.documentElement.scrollTo({
      top: d.querySelectorAll(tags.join(', '))[index].offsetTop,
      behavior: 'smooth',
    });
  };

  return (
    <div>
      <CKEditor
        data={initData}
        onInstanceReady={onChange}
        onChange={onChange}
        ref={editorEl}
      />
      <h2>Содержание</h2>
      {headers.map(([Tag, text], index) => (
        <Tag key={index} data-index={index} onClick={goToAnchor}>
          {text}
        </Tag>
      ))}
    </div>
  );
};

https://codesandbox.io/s/for-https-qna-habr-com-q-...

Так дела не делаются. Страницу следует отрисовывать сразу, а пока данные не загрузились, пользователю показывают индикатор загрузки:

data ? <КакойТоКомпонентДляОтображенияДанных data={data} /> : <Preloader />

Пересчитывайте значение при выводе:

<div id="slider"></div>
<div id="value"></div>

const min = 100;
const max = 500;

$('#slider').slider({
  min,
  max,
  value: min + Math.random() * (max - min) | 0,
  range: 'min',
  animate: 'fast',
  slide: (e, ui) => $('#value').html(max - ui.value + min),
});