Максим Морев

Я вас удивлю, но fullpage.js - давным-давно работает на ванильном js.
Пользуйтесь и радуйтесь, скрипт не идеален, но остальные того хуже. :)

Потому что prompt вам возвращает строку, а не целое число.

parseInt(prompt('Введите значение "a"'), 10);

Зафиксируйте 2ой элемент по центру. Например так:

.second {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

На JS посмотрите размер блока и рассчитайте коэффициент (K), на сколько его нужно увеличить, чтобы он оказался больше размеров окна браузера. Примените коэффициент через transform: scale(K) - тем более у вас SVG, что масштабируется без потери качества.

На скролл повешайте событие, которое будет постепенно уменьшать коэффициент до единицы. Всё. :)

Есть свойство hyphens, но оно не работает в Хроме, да и в остальном алгоритмы такие себе, много переносов не к месту добавляет.
Если без js - то только руками расставлять спецсимволы ­ в те места, где вы хотите разрешить перенос.
Я использую для выражений типа "Политика конфиден­циаль­ности", чтобы на самых маленьких айфончиках было красиво.
А если автоматически хочется - то только на JS парсить слова и вставлять эти спецсимволы, куда нужно.

В хроме есть инструмент, но полезность спорная.
Так как, во-первых, не все сайты состоят из одной страницы, а функционала объединения данных с разных страниц в одну статистику не завезли (пока не завезли), а во-вторых - все те штуки, которые применяются динамически - не учитываются как "использованные".
Есть сервисы, на практике лично не использовал, но видел отзывы, что тоже работают весьма неидеально.



UPD:
Вспомнил статью, там подробнее о вашей беде.

Можно.

Это не то чтобы ответ, просто мысли на тему.
Вряд ли найдёте что-то толковое, SEO - очень конкурентная ниша, в которой очень много магии, а также дремучего идиотизма.
До сих пор встречаются уникумы, требующие, чтобы у h1 в разметке не было указано никаких атрибутов (включая class) и прочее в таком духе.
Лучший способ в одном месте сразу получить нужную информацию - найти какую-нибудь SEO-контору, которая вам кажется профессиональной, и заказать у них аудит сайта, после чего курить документ, который они составят.

Без этого, всё что вы можете сделать:

1. Следить за семантикой (использование к месту правильных тегов вместо диватоза, туда же ссылки вместо кнопок);
   
2. Сделать графический контент максимально доступным для поисковиков (alt'ы изображений (можно через figure и figcaption), альтернативное описание SVG-графики)
   
3. Сделать текстовый контент максимально доступным для поисковиков (верная структура заголовков, использование микроформатов там, где уместно).
   
4. Следить за скоростью загрузки (является одним из факторов ранжирования, а также улучшает поведенческие факторы)
   
5. Следить за доступностью (пока вроде как нигде не учитывается, но я верю, что в свете трендов это будет влиять в дальнейшем. Кроме того, доступность - это не только про людей с ограниченными возможностями, это также улучшает UX в целом, что способствует улучшению поведенческих факторов).
   

Остальное (манипуляция ссылками со слэшами и без, жонглирование абсолютными и относительными ссылками и прочее) вам в одной конторе скажут делать так, в другой скажут по-другому - а поисковики на прямой запрос ответят "мы не раскрываем детали работы поисковой системы".

По наведению на кнопку контентной части добавляется класс "interference", который запускает анимацию:

.interference {
  animation: interference 0.5s linear;
}

Сама анимация простейшая:

@keyframes interference {
  20% {
    filter: blur(2px);
    transform: skewY(-1.2deg)
  }
  30% {
    filter: blur(2px);
    transform: skewY(1.2deg)
  }
  100% {
    filter: blur(0px);
    transform: skewY(0)
  }
}

Заодно псевдоэлементом добавляется фиксированный фон, который мигает также с помощью свойства animation.
Код форматировать лень, гуглите "css blink animation".
Вот картинка: https://danieldefo.ru/styles/star/glitch-overlay.png

Резюме: дизайнерская задумка ничего (хотя мне сама иконка больше нравится - есть что-то такое мистическое), а чисто технически это делать - скука смертная.

Откройте консоль, добавьте класс сюда и изучайте инспектор.

Добрый день.
По вашему примеру - я никогда не буду советовать делать какие-либо вкладки без использования JS - слишком негибко и неинтуитивно получается.
Но если всё-таки нужно без JS, то вы можете по-прежнему использовать селектор "~", если поменяете порядок элементов с помощью order из flex-спецификации.
Ваш причёсанный пример: https://codepen.io/morevm/pen/jOPpZKo
То, как это должно быть с JS: https://codepen.io/morevm/pen/XWbBZOK

Установите кодировку файла в UTF-8 без BOM, в HTML в head поставьте <meta charset="utf-8">.
Если не поможет, то заставьте ваш сервер отдать заголовок Content-Type: text/html; charset=utf-8 любым известным способом.

Вам нужно использовать функцию линейной интерполяции (да, у нас в веб-анимации есть немного математики).
А также перестать использовать setInterval за этим делом, используйте requestAnimationFrame.
Вот вам статья, которая натолкнёт на правильные мысли, а ещё больше информации можно получить в Гугле по запросу "js lerp animation".

Да просто у вас очень странные пляски с навешиванием событий.

Уберите ваше

document.getElementById('textArea').addEventListener("keydown", keyDownUpdateSize);
document.getElementById('textArea').addEventListener("keyup", keyUpUpdateSize);

И поставьте вместо него:

document.getElementById('textArea').addEventListener("input", updateSize);

И будет работать как вам надо.

Потом попробуйте вбивать текст, не отбивая его пробелом (просто зажмите символ и удивитесь, что всё сломалось).
Осознайте, что единственный адекватный способ посчитать новую, необходимую высоту textarea - это скопировать её куда-то "out of bounds" вместе с контентом и узнать scrollHeight.

Держите пример:

Здравствуйте.
У нас в вебе немного инструментов для сглаживания.
Всего один: font-smooth, предложенный давно-давно, да так и не внедрённый толком в браузерах.
Оно внедрено за префиксами в некоторых браузерах.
Есть ещё свойство text-rendering, которое влияет на отрисовку, но это история не про сглаживание.

Таким образом, если вы напишите что-то в духе:

html {
  -webkit-font-smoothing: antialiased; // or subpixel-antialiased
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

Тот же Montserrat скачайте с Google Fonts и переконвертируйте самостоятельно - он точно может выглядеть нормально :)

setInterval (а также setTimeout) вам отдаёт идентификатор таймера, запомните его и сбрасывайте при повторном вызове, а потом назначайте снова.

var timer;
function switchClasses() {
  div.classList.add("classTwo");
  div.classList.remove("classOne");
  clearTimeout(timer);
  timer = window.setTimeout(() => {
    div.classList.add("classOne");
    div.classList.remove("classTwo");
  }, 5000);
}

Их много разных типов, гуглите "js particles animation" и открываете первые две страницы выдачи - где-то точно найдётся пример прям как в видео.

А вы откройте в консоли (Ctrl+Shift+G в Chrome) вкладку "Network", найдите ваш запрос, и посмотрите что там приходит во вкладке "Response".


Подсказка: приходит не JSON.

Нужно убедиться, что в на странице вызываются функции "wp_head" (в теге head, header.php) и "wp_footer" (перед закрывающим тегом body, footer.php). Функции wp_enqueue_* завязаны на эти две функции.
Если функции есть, но ничего не выводится - копайте в сторону того, что их перехватывает и не отдаёт на вывод (add_filter('wp_head')).

Потому что get_template_part == include, она подключает, а не возвращает файл.

function get_article() {
  ob_start();
  get_template_part('components/article-block');  
  $block = ob_get_contents();
  ob_end_clean();
  
  die(json_encode([
    'block' => $block,
  ]));
}