Alex

File -> Export Settings

UPD: Ну а сейчас и вовсе штатно в облако они сохраняются.

Если у Вас Big Sur и Parallels Desktop версии 16+, попробуйте следующее, мне помогло наладить работу

sudo nano /Library/Preferences/Parallels/network.desktop.xml

Необходимо заменить 1 или -1 на 0

<UseKextless>0</UseKextless>

Загрузить js + минимальный шаблон (со скрина)
-> отправить AJAX-запросы за данными
-> отрендерить блоки с данными

p.s. Если что, в Хроме есть удобнейший профайлер, через который можно просмотреть каждый кадр в загрузке страницы, какие скрипты выполнялись и какие ресурсы загружались в какое время

Ну вы вроде всё правильно сделали, целиком выгдлядит как-то так должно:

var app = new Vue({
  el: '#app',
  data: function() {
    return {
      msg: 'Hello World! This is a Event listener test.',
      windowWidth: 0,
      windowHeight: 0,
    }
  },

  mounted() {
    this.$nextTick(function() {
      window.addEventListener('resize', this.getWindowWidth);
      window.addEventListener('resize', this.getWindowHeight);

      //Init
      this.getWindowWidth()
      this.getWindowHeight()
    })

  },

  methods: {
    getWindowWidth(event) {
        this.windowWidth = document.documentElement.clientWidth;
      },

      getWindowHeight(event) {
        this.windowHeight = document.documentElement.clientHeight;
      }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.getWindowWidth);
    window.removeEventListener('resize', this.getWindowHeight);
  }
});

В Vue приложении используем препроцессор (scss). Кроме того используем внешние пакеты для вертикального ритма и сетки.

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

Вариант импортировать scss-файл с определениями в каждом компоненте сразу откинули, ибо люди мы ленивые.

Что делаем:
Подключаем в точке входа (main.js) основной стилевой файл:

import '@/styles/main.scss';
import Vue from 'vue';
//...

В нем подключаем всякое-разное-глобальное-базовое:

@import "base/normalize";
@import "base/init";
@import "base/typography";
@import "base/code";
@import "base/links";
@import "base/tables";
@import "base/buttons";
@import "base/control-group";
@import "base/general-form";
@import "parts/transitions";
...

Далаем два файла: env-development.scss и env-production.scss

$NODE_ENV: development;
@import "cfg-vars";

$NODE_ENV: production;
@import "cfg-vars";

Переменная $NODE_ENV нам нужно. чтобы управлять стилями в зависимости от окружения.
Дальше в cfg-vars.scss подключаем/пишем все необходимые глобальные конфиги

$DEV_MODE: $NODE_ENV == development;
$MAX_INT32: 2147483647;

@import "cfg-vrhythm";
@import "cfg-grid";
@import "../../../node_modules/vrhythm/source/vrhythm";
@import "../../../node_modules/bs-grid-system/source/scss/bs-grid";
@import "../mixins";
@import "cfg-z-indexes";

$wt-family-base: "Open Sans", sans-serif;
$wt-family-head: "Roboto Slab", serif;
$font-family-monospace:  "Fira Code", Menlo, Monaco, Consolas, "Courier New", monospace;

//==
//== Color palette
//== ======================================= ==//

$palette-light-blue: #3c8dbc; // Primary
$palette-red       : #dd4b39; // Danger
$palette-green     : #00a65a; // Success
$palette-aqua      : #00c0ef; // Info
$palette-yellow    : #f39c12; // Warning

...

Почти всё готово. Осталось только автоматически подключить эти конфиги к сборке.
Идём в vue.config.js и добавляем секцию css:

const NODE_ENV = process.env.NODE_ENV === 'development'
    ? 'development'
    : 'production';
//...
module.exports = {
    //...
    css: {
        extract: NODE_ENV === 'production',
        loaderOptions: {
            sass: {
                data: `@import "@/styles/config/env-${NODE_ENV}.scss";`,
            },
        },
    },
};

Теперь мы спокойно пишем стили компонентов на scss прямо vue-файлах, и оставляем возможность какие-то стили писать в отдельных файлах.

Enjoy!

SVG + 2 маски, одна пропорционально растягивается, другая непропорционально. Отрицательным margin загнать секции одна на другую.

const acc = document.getElementsByClassName("accordion");
for (let i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    // code
  });
}

Вместо //code пишите функцию для открытия модалки, один из вариантов.

Что мы делаем?
Определяем все элементы с классом "accordion" далее в цикле вешаем на каждый из них обработку событий при клике, и когда кликаем с ними происходит то что вы напишете :)

в общем разобрался, если кому будет полезно:
await fetch() возвращает объект Response
соответственно требуется выполнить await response.json() или другие методы, в зависимости от типа получаемых данных. Обращаю внимание на await: response.json() возвращает Promise, соответственно нужен await
Итого:

actions: {
         async initialCityList({ commit }) {
            const siteContacts = await fetch('/api/contacts')
            commit('setSiteContacts',  await siteContacts.json())
        }
    },

При использовании Axios:
axios.get() возвращает объект, который содержит тело ответа в поле data, соответственно итоговый код:

actions: {
         async initialCityList({ commit }) {
            const siteContacts = await axios.get('/api/contacts')
            commit('setSiteContacts', siteContacts.data)
        }
    },

Да, урок один и тоже - как по мне не плохой, но устаревший....
У меня так же как и у вас возникла ошибка с ownerId, почему-то getters.user.id добавлял в конструктор id пользователя в первый раз, а потом не хотел это делать и выдавал undefined.
Решил таким образом:
вместо getters.user.id в файле ads.js ( createAd ) я вставил fb.auth().currentUser.uid, id пользователя у меня теперь добавляется нормально....

Все-таки выбрал heroku как самый простой вариант для теста, там развернул оба приложения.
Следовал этому гайду: How to deploy multiple apps in a monorepo with Heroku
Сделал кастомный домен (купил на name.com), от .heroku. в адресе избавился. Вот гайд: Setting Up A Custom Domain For Your Heroku-Hosted App
Связал с github-репой через интерфейс heorku. Настроил простецкий CI: после пуша собирается и пушится на heroku при успехе.
MongoDB задеплоил на https://www.mongodb.com/cloud/atlas.
Хранилище файлов - https://cloudinary.com/, больше всего возможностей бесплатно по сравнению с aws, google и другими.
Все бесплатно :)

Как сеньер разработчики бы выбрали последний эллемент массива?

Наверное, как и все остальные
array[array.length - 1]

Чтобы без лишних операций в виде поиска длины массива

Если тут и есть лишняя операция, то это как раз -1, длина массива - это свойство, ничем от вашего array.last оно не отличалось бы, если бы второе существовало, конечно.

В разное время пользовался SASS - > SCSS - > Less - > PostCSS - >SCSS. Мой личный опыт подсказывает что лучше PostCSS на данный момент ничего нет.

В чем его преимущество - ты пишешь CSS с JS примесями, которые приносят нужный тебе функционал. Ты можешь сконфигурировать процессор (я не оговорился, постпроцессором он уже не является) под себя. Работает в разы быстрее, поддерживает css-модули. Если чего-то не хватает, берёшь и сам дописываешь. Оч сильный механизм плагинов и функций.

Недостатков вижу два - игнор инструмента разработчиками CLI (привет команде ангуляр-кли ума которых хватило только на использование автопрефиксера) и игнор со стороны JetBrains, которые не смогли разводиться на адекватную поддержку данной тулзы. Теперь я благополучно пересел с IDEA на vsc.

Вывод : SCSS - хорош и достаточен, SASS - ruby on rails only, Less - пожалуй уже не актуален, PostCSS - все же немного лучше SCSS и предлагает иной и более удобный механизм работы с CSS (рекомендую его попробовать после изучения scss).

P. S. Сугубо моё мнение исходя из опыта, не навязываю. Холиварить глупо

вы сейчас описали случаи которые можно реализовать на SCSS. И запись вида:

.block{
    .block__header{}
    .block__text{}
}

все равно перекомпилируется в CSS так:

.block{}
.block .block__header{}
.block .block__text{}

Также можно написать:

.block{
    &__header{}
    &__text{}
}

так будет правильнее.