Illia T

Keypress - не может считывать backspace, используйте keydown.
$('x').remove('y') - означает "выбрать все X, которые являются Y".
Т.е. $('#list').remove('li:last-child')} - выбрать элемент #list И если он является li и последним - удалить. Тут надо вот так:

$('body').keydown(function(e) {
    console.log(e.which);
    if (e.which == 8) {
      $('#list li:last-child').remove();
    }
  });

Правильно сказали - в this возвращается document. Т.е. надо выбирать созданный элемент как-то по другому, т.к. у insertAdjacentHTML нет callback функции, внутри которой this был бы равен элементу. И еще, чтобы показать элемент с FadeIn - он должен быть изначально скрытым.
Как вариант:

Синтаксическая ошибка: лишний 4-й знак равенства для "c".
И, главное, переменная letter была не определена.
Надо и модель и переменную в v-if сделать одной и той же:

Ошибка в наличии двух src

src: url('../fonts/FiraSans-Regular/FiraSans-Regular.woff') format('woff'); 
src: url('../fonts/FiraSans-Regular/FiraSans-Regular.svg') format('svg');

Нужно указывать через запятую

src: url('../fonts/FiraSans-Regular/FiraSans-Regular.woff') format('woff'),
     url('../fonts/FiraSans-Regular/FiraSans-Regular.svg') format('svg');

Два src используется для поддержки древнего IE (уж не помню какой версия).

В вашем случае подключается svg шрифт, который понимает только Safari.
Как вам уже сказали в комментах — svg формат не следует использовать вообще.

И попробуйте использовать для подготовки шрифтов специализированные сервисы типа https://www.fontsquirrel.com/tools/webfont-generator
Они вам и шрифтов нагенерят в нужных форматах и css файлик создадут для подключания.

Ответ.

...
        urlGoogle: 'www.google.com' // <- все до безобразия просто. Переменная неправильно названа.

Код должен быть в конце страницы, либо загружаться после того, как загрузятся все html элементы. res.onkeypress будет null, потому что событие нажатия ты задаешь для inp

Расскажите плиз о технологии, и чем развёрнутей, тем лучше.

Вот захотел ты сделать сайт SPA или PWA с любимой тебе вёрсткой на базе Twitter Bootstrap и любимой библиотеки Vue. Сверстал. Поповеры не появляются, дропдауны не выпадают, модалки не открыватся, формы не валидируются, клики не работают.

Оригинальный Twitter Bootstrap имеет поддержку интерактивных элементов на Javascript. Реализовано это на библиотеке jQuery. Если делаешь на Vue, придётся подключать ещё и jQuery, что лишняя библиотека на 100+ килобайт, что, конечно, не катастрофа (пока ты не на мобилке).

Vue работает с состояниями привязывает данные к отображению, а jQuery работает с DOM и событиями. Это вопрос производительности. Работа JQuery начитается когда загружен и распарсен JS и HTML. Работа Vue начинается в тот момент, когда загружен и распарсен JS, то есть чуть раньше. jQuery модифицирует DOM на лету, перестраивая текущий документ. Vue работает с shadow DOM, а затем подсовывает уже готовую интерактивную страницу в пустой документ, что быстрее (разница в секунды на десктопе, десятки секунд на м...).

Vue реализует компонентную парадигму. Куски страницы являются изолированными кусочками кода (HTML CSS JS), которые цепляются между собой динамически, а обмениваются данными через аттрибуты и события. Предположим, что вы решили следовать компонентной парадигме, тогда согласно вот такому примеру нужно будет увязать самостоятельно все интерактивные компоненты. Компонента-кнопка. Компонента-поле ввода. Компонента-форма. Компонента-контейнер. Получается около 50 компонент. Для некоторых надо будет написать логику на jQuery. Если посмотреть на код jQuery этих микрокомпонент, то он окажется несложный, его вполне можно переписать на Vue. Ну там класс заменить или клик отработать. Когда от кода jQuery не останется следа, его можно будет из проекта удалить.

И вот получается Bootstrap-Vue

На компоненты побили. От Jquery избавились. Написано в единой парадигме. Работает быстрее.

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

Так же будет Не лишним оценить технологию: плюсы, минусы, стоит ли вообще с этим работать ...

Это сам изучай и сравнивай. Навыки и опыт воздушно-капельным и через Internet не передаётся

Прежде всего, не всегда нужен фронт с js-фреймворком. Часто вполне достаточно обычных страничек. Но если действительно нужен развитый фронт, то бэк перестаёт использоваться для рендеринга шаблонов и выступает как REST- или GraphQL-сервис. Из Django для этого даже специализированное и очень удобное решение выросло - Django REST Framework.

Поставьте себя на место заказчика:
1. CMS с богатым опытом (уже более 10 лет на рынке)
2. Имеет самую большую в России долю по eccommerce
3. Имеет бесплатную качественную поддержку
4. Имеет широкую документацию
5. Во всех регионах от малых до самых топовых студий можно найти специалистов без труда.
6. Обратная совместимость. Полная и безоговорочная. Вы всегда получите доступ к новым фичам и вам не придется доплачивать дохрена программистам чтобы перейти на новую версию движка т.к. старый уже не поддерживают и он кишмя кишит дырами.
7. Уже готова большая часть функционала которая вам нужна, и оттестирована годами. Только шаблон по сути натяни + немного кастомизируй логику под свои БП.
8. Есть штатная интеграция с 1с, у нас весь бизнес в России почти на ней.

Ключевое: "бизнес не любит риски", и потому в большинстве случаев bitrix самая удобная и выгодная система для заказчика как минимум в России.

За 6 летний опыт работы в направлении веб-студий, столько компаний повидал которые писались на каких нибудь:
а) Самописных движках
б) Бесплатных движках к которым прибили гвоздями функционал который в них не заложен
в) Или вовсе на питоне/руби
... которых не хотели брать ни одна из топ 10-20 региональных студий (РнД) на поддержку, и они потом переписывали заново проекты... на bitrix.

Bitrix это стандарт отрасли по ecommerce в России. Сейчас глобальный тренд на рынке - работы по поддержке и развитию проектов становится все больше чем работы по созданию новых.

И когда вы пишите на bitrix framework, у вас будет всегда много работы, т.к. bitrix не только популярен, но становится все популярнее, следите за вектором. Сейчас он входит в топ 8 CMS в мире, за последние годы прибавил 5 позиций и продолжает увеличивать свою долю.

А на счет качества... Мне порой приходит на ум ассоциация с PHP. PHP издавна отвоевала огромную долю рынка, но потом у нее появился некоторый период застоя. А тут сбоку питоны, руби. И все ругали PHP, говорили что у него не самая лучшая поддержка ООП (немного улучшившаяся с первыми 5х релизами), но в сети были модны статьи в духе PHP не круто, "PHP все", сейчас его долю на рынке веба по откусывают.
Но вот нифига, за счет большого сообщества и богатой инерции просто PHP стал улучшаться, преодолели кризис PHP6 и разногласий, и вуаля, уже php7 который уже "более-менее", и php пошел в гору.

Так и с битрикс думаю. Скорее он уже до-перепишет свое ядро на человеческий код, чем его сместят с рынка.
Работы по новому ядру активно ведутся, и оно уже 4 год живет параллельно со старым. От релиза к релизу переписывается все большая часть модулей, компонентов, структуры базы, что немаловажно с поддержкой миграции кода и данных.

Ну и что немаловажно это те люди которые пишут этот код. Если вы в топовой веб-студии с хорошими архитекторами и ведущими программистами - код на bitrix Framework будет написан качественно, и грамотно на новом ядре в традициях ООП, использования паттернов, грамотно собраны в модули и компоненты. Если же вы фрилансер или в мелкой студии, скорей всего ваши проекты будут "дурно" пахнуть, вся логика будет в шаблонах, или вообще в 1 шаблоне который будет напрочь состоять из сплошного роутинга.

Посмотри как тут сделано https://codepen.io/svenfinger/pen/NGGEXR