Dima Polos

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

Именно в данном примере - разницы между этими двумя вариантами нет.

По факту - это не синглтон, это у вас объект со свойством-функцией, который зачем-то назвали так, видимо в попытке хоть как-то эмулировать паттерн пришедший из других языков.

Сейчас вы просто можете сделать нормальный класс и использовать как синглтон в "классическом" смысле.

Когда в цикле функции вы понимаете, что столкнулись с объектом, то вам просто нужно вызвать ещё раз эту же функцию, но в качестве значения передать этот объект. Это называется рекурсия (https://learn.javascript.ru/recursion)

Vue Native это обертка над React Native.
NativeScript это отдельный кроссплатформенный фреймворк который дает доступ к нативным компонентам платформы. И оба эти инструмента это не WebView.
NS использует движок V8 JavaScript для Android и JavaScriptCore для iOS. RN использует только JavaScriptCore
для обеих платформ. NS может в JS, TS, Angular и в этом году добавили официальную поддержку Vue за счет интеграции с плагином nativescript-vue
Можно в playground'e пощупать.

С RN я не работал, как и с VN, но мне интересно развитие NS.
В общих чертах RN и NS похожи, но отличаются архитектурой взаимодействия с родными модулями платформ.
NS работает c API интерфейсом платформы непосредственно в движке JS, отправляя вызовы и конвертируя данные на лету. При компиляции все XML компоненты передаются на собственные компоненты Android и iOS перед упаковкой в ​​двоичный файл платформы. В оф.документации все расписано
Есть хорошая статья в блоге NS, где они разбирают серию статей от Airbnb об опыте с RN.

Считаю что NativeScript недооценен сообществом, годный продукт.

Простые приложения можно строить и на NS, что то более сложное где память решает, лучше писать нативно.

так как сейчас, то в clickHandler'e this это элемент на который ты кликаешь ( console.log(this) попробуй )

пишем эту строчку так, тем самым привязываем хендлер к this то есть классу Game, где это всё происходит

currentPipe.addEventListener('click', this.emojeClickHandler.bind(this))

// или так

currentPipe.addEventListener('click', () => this.emojeClickHandler());

Точно так же, как и без vue - смотрите на event.target, действуете по обстоятельствам:

https://jsfiddle.net/rdcem751/

у js нет доступа к псевдоэлементам

$('.step__arrow').addClass('show');

.step__arrow.show::after {
//css анимация
}

чек лист вёрстки
то же, подробно

что можно делать без опыта:

открыть сборку на смартфоне, планшете, десктопе. именно на реальном устройстве.

а) быстрый обзор страницы, соответствие макету: отступы, размеры, шрифты и размер шрифта, формат графики, неровности, что сразу бросаются в глаза.
б) медленный обзор по блокам: сходство, косяки, работоспособность, прям пробегаемся по каждому блоку с каждого устройства. (нет планшета? самый простой вариант веб-инспектор гугла)
в) нажимаем, тыкаем, зумим, скролим, листаем (меняем масштаб страницы, делаем все агрессивно, чтобы быстрее заметить микроглюки). Задача взаимодействовать со всем, что есть на странице. Смотрим че ломается, едет, скрипит при нашем тесте.
г) сразу можно проверять оптимизацию графики: с помощью гугл пейдж спид, вбиваем юрл, смотрим, на что жалуется, сколько весит графика (оптимизировали ли её?)
д) повторяем процедуру в ТОП браузерах: хром, яндекс, мозила, сафари, едж (ИЕ, если нужно), мобильные браузеры, смотрим, что не так и всё ли работает

это минимум:

ПОХОЖЕ НА МАКЕТ
ВСЕ КОНТРОЛЫ РАБОТАЮТ
НЕ ЕДЕТ, НЕ РАЗВАЛИВАЕТСЯ
В ДРУГИХ БРАУЗЕРАХ ОК

отдельным пунктом ДОСТУПНО
всеми контролами можно управлять клавиатурой, сайт (в идеале) полностью функционирует при выключенном CSS и JS (в хроме есть плагин - Web Developer, скачиваем из магазина, тыкаем, тестим)

ПЕРЕПОЛНЕНИЕ КОНТЕНТОМ
тестируем поведение блоков прямо в хроме, через инспектор. (об этом предлагаю автору найти уже готовые описалки... аааа, ладно, на: обзор веб-инспекторов)

______________________________________

полезные ссылки:

Блог Киселёвой, куча обзоров книг + полезные вырезки, крутейший блог

о доступности:

https://weblind.ru/ ОСНОВНОЕ ЧИТАТЬ
https://www.bl2.ru/programing/colourcontrastcheck.html
https://habr.com/post/347478/
https://developer.paciellogroup.com/resources/cont...
https://usabilitylab.ru/blog/dostupnost-internet-b...
https://blog.sibirix.ru/2018/05/22/almost-blind-ve...
https://www.toptal.com/designers/colorfilter
www.bbc.co.uk/guidelines/futuremedia
https://www.lightningdesignsystem.com/accessibilit...
https://geon.github.io/programming/2016/03/03/dsxyliea
https://wearecolorblind.com/
blog.gov.design/blog/2016/11/08/accessibility.html
specialbank.ru/guide
specialbank.ru/guide/index.html

P.S

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

$('.slider').slick({
// ...
infinite: false,
})

.slick-disabled {
  display: none;
}

Вы же можете конвертнуть 0/1 в false/true:

Boolean(0) // false
Boolean(1) // true

transform-origin

Потому что когда вы пишете a = 2, не объявляя ее, значение записывается в глобальную переменную a. Если внутри функций заменить a = 2 на let a = 2, поведение поменяется.

Родительскому блоку всего сайта ( wrapper ) добавьте следующие стили:
width: 100%;
max-width: 1920px;
margin: 0 auto;

Это уберет прокрутку, и поставит сайт, на мониторах больше 1920 пикс шириной, по центру.

{{ i }} вместо {% i %}

Проверьте наличие в коде сайта настроек viewport'а, что-то вроде этого должно помочь:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>