ThunderCat

мне кажется, или это все можно было сделать в 5 строк на jquery?

Это

<button class="center-block" id="but" onclick="game()">Крутить</button>

и это
but.addEventListener('click', function func() {
что за фигня? Зачем по клику создавать на этом же элементе листенер клика?

TL;DR
прописать классу pointer-events: none;
в начале действа дать этот класс нужному элементу, по окончании убрать

это псевдоаттрибуты, в которые можно записать какое-то значение и потом использовать из яваскрипта, например из jquery можно получить значение data-mute-video примерно так:
var mute = $('#apps').data('mute-video');

я не в курсе кто такой gtag, но возможно не хватает preventDefault и форма делает и субмит и код.

Как я понимаю, результат будет возвращаться в элемент с id=input_area.

$.ajax({
   url: 'actions.php?show',
   success: function(data){ // <-- сюда вернутся данные из скрипта php, попав в data
          $('#input_area').html(data); // здесь они будут вставлены в соответствующий DOM элемент
   }
});

PS: так как у вас пропущена кавычка, работать у вас скорее всего скрипт не будет

ЕМНИП контент срендеренный через js не очень хорошо индексируется. Но это было раньше, как поисковики сейчас смотрят на контент точно сказать не могу. Еще нюанс - тащить каждый раз словарь на клиент не очень хорошая идея. Еще вопрос с урл - для разных языков он должен быть разным, то есть хранить текущий язык в куке или локалстораже - плохая идея.
UPD: имхо лучший вариант - отдавать с сервера уже локализованный контент.

в 2 параметр topRatio задавал позицию от центра, выраженную в десятичной дроби, попробуйте topRatio: 0.5 - по центру должно быть.

На сайте довольно сложная клиентская часть, думаю будет сложно написать подобный функционал на чистом js.

да

Многие считают, что jquery сегодня устаревшая технология, так ли это?

нет

В таком случае какой фреймворк больше всего подходит под данную задачу?

vue, react вполне подойдут. Jquery для другого немного, хотя на нем можно написать подобное, но это будет дольше, неудобнее и в целом сложнее.

$('input').on('change',function(){
    alert("it's something new inside!");
})

$('#file_link').click(); не?

Если это не продакшн, а скажем, учебно-развлекательный проект, то пойдет. Можно увеличить интервал до 5 сек, а в базе выбирать по времени больше времени последнего полученного сообщения, это сократит нагрузку. Время надо отсылать при запросе к серверу. Все прочитанные получателем (т.е. отосланные в ответ на аякс запрос) записи чата помечаются в отдельном поле в таблице(например `readed` = 1), и в дальнейшем не выбираются. В идеале переписать на сокеты, ибо аякс интервалы не лучший способ реализации.

О, СНЕЖИНКИ!!!! ))

Если это попытка сформировать идентификатор объекта для вызова в jquery селекторе то:

var modal = "#modal" + String($(this).attr("id"));
$(modal).doStuff(...)

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

Используют там где на фронтенде много манипуляций с DOM объектами, например если бэк отдает только json как api, и из него надо построить дофига хтмл на форнтенде, и со всем этим надо что-то этакое делать(анимации, трансформации, сложная логика с инпутами и прочие танцы).