Дима Паутов

Mail.ru скорее всего использует своё решение. Это нормальное явление, когда большие компании имеют свой технологический суверенитет. Исходники вы скорее всего врятли найдёте да и они вам не помогут, т.к. идеи и реализации там тесно связаны с другими наработками компании.

Вам же подойдёт готовое решение на js. Например https://quilljs.com.

Изучаете документацию, делаете свой редактор в своём визуальном стиле и радуйтесь жизни

interface Item {
 name: string; 
 link: string;
 child?: Array<Item>;
}

type Items = Array<Item>;

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

// Не пишите тут лишних типов. Юзаете картинку, оставьте только тип картинки
const img = ref<HTMLImageElement | null>(null);

if (img.value) {
  observer.value.observe(img.value);
}

Когда вы делаете ref на какой либо DOM элемент или же компонент, это не значит, что он существует в DOM дереве. TS не умеет определять, существует ли html или нет.

P.S. Читайте ошибки, он вам там чёрным по белому пишет, что помимо картинки, может быть тип null, который у вас указан. А методу observe необходим существующий DOM элемент.

Любой бекенд подойдёт, вне зависимости, пыха это, питон и т.п.

В данных реалиях, у пыхи это laravel, как самый популярный из фреймворков, по моему мнению и мнению знакомых пыхарей.

Берёте laravel, пишите api. Беретё nuxt(2-3), резим SSR, готово.

Нет, не стоит!

Да во первых размер бандла нормально так уменьшится, т к сейчас сайт существует без разделения на страницы - просто одна большая. Я хочу разделить сайт на куски и подгружать их чанками.

Что принципиально решит вопрос, 1 js файла на 1мб, либо 10 файлов суммой на 1мб? Вот щас там нет реакта, он условно весит 1мб. А будет реакт, станет js меньше весить что ли?

Вы по всей видимости не совсем догоняете, в чём смысл чанка и почему их разделяют.

В общем сайт сейчас немного медленный:

но большой и с ипользованием большого количества картинок.

Вам не кажется, что проблема зарыта именно тут? Просто загуглить асинхронную загрузку картинок и это существенно может решить вопросы долгой загрузки.

React, Vue, Ember, Angular, Svelte - это не про оптимизацию загрузки сайта. Их магический JS не умеет загружаться быстрее обычного js кода. Может стоит научиться делать базовые оптимизации без фреймворков?

Проблема в том, что многие курсы рассказывают о различных web терминах, в
результате чего возникает каша, поскольку не знаешь где и что применять
Возьмём патерны проектирования, MVС, модуль и так далее. Насколько я понимаю они
и решают проблему разбивки кода...

В текущем, современном этапе разработки такими паттернами почти не пользуются. Сейчас у нас есть import/export - вот он ваш, нативный модуль. В остальном, просто положитесь на фреймворк.

Как подходить к оформлению кода, если мы не используем фреймворк Vue или иной...

Любой клиентский фреймворк - это уже своего рода архитектура, просто нужно следовать в начале пути общепринятым правилам. В отношении vue почитать про best practices. В этой папке компоненты, в этой папке сервисы, в этой папке утилиты, в этой папке типы и т.п. Разделяйте макет на части. Отдельный компонент фильтра, который состоит из множества компонентов самого фильтра, чекбокс фильтр, фильтр диапазона и т.п. Отдельно компонент товара и т.д.

Дмитрий Лаврик сказал, что бэкенд программисты в последнее
время создают API для сайтов. Так намного проще создавать бэк

Ну в какой-то степени он прав, бекендерам не нужно заниматься отображением, т.к. этим должен заниматься фронт. А так же удобнее создавать микросервисную архитектуру, т.к. каждый сервис на вход ждёт лишь данные, что бы отдать данные. Во всём остальном по сути своей ничего не поменялось.

Можно ли при помощи VUE создать fullstack приложения или без создания той же
структуры базы данны никак?

На vue нельзя написать фулстек, как и на react. Это браузерные фреймворки(клиентские), предназначенные для работы в браузере.

База данных - это всего лишь термин, который говорит, что есть какое-то хранилище данных. Им может быть любая из популярных БД или просто файлик(или множество файликов). Просто где лежат записи. Любое ПО, в котором вы можете редактировать или создавать записи, должно иметь базу данных, иначе никак.

выучил JS на уровне решении задач средней сложности

Ну вам не кажется что из вышеперечисленного вами, вы не выучили js. Средней уровень сложности(хотя что можно считать "средним уровнем сложности" - это ещё вопрос), это наверно где-то джун+. А такие джуны уже умеют пользоваться инструментами.

Личный мой вывод:
Вы как и все начинающие окунулись в болото под названием js. Где царит хаос и анархия, когда можно всё, но не понятно как. У меня главный вопрос к таким людям, а зачем вам на данном этапе вашего развития "всё"? Ну вот серьёзно, зачем? Зачем вам сейчас знать, как устроена БД, как правильно создавать таблицы, как правильно создавать связи в них, зачем микросервисы, зачем, о госпади микрофронты, SSR, PWA, FullStack, Nodejs, Docker, Kubernetes, webpack, vite, TypeScript и прочая херня, которой полон мир фронтенда. Зачем вам всё это, если вы сами не можете ответить на этот вопрос. Зачем вам сейчас знать, как это работает. Если вы просто сайтик с чекбоксиками не можете сделать. Т.е. простая фильтрация html кода. Возьмите какую нибудь публичную rest api с фейковыми данными для своей песочницы и постройте маломальский сайтик с фильтром. Зачем вам фулстек? Почувствовать себя гением разработки? Забудьте про кучу не понятных терминов, просто выкиньте их из головы.
Зачем вам вообще vue или реакт, или им подобные? У вас в голове хоть есть понимание, зачем придуманы эти штуки, какую задачу то они призваны решать? Почему все так "дрочат" на эти SPA? Почему +- 90% вакансий фронта требуют знания SPA фреймворков? Каждый инструмент призван решать какую-то задачу, пока вы не поймёте, почему вам реально нужен этот инструмент, не трогайте его, пускай лежит до лучших времён.

Просто возьмите js или хрен с ним, возьмите vue, сделайте внутри ajax запрос, получите данные, отобразите их. Где в этих словах какие-то особенные или сложные термины? Вам идиоты напихали в голову сложных конструкций, вот вы и мучаетесь. Упростите себе жизнь, выкиньте из головы всякую хрень. Просто сядьте и пишите, не думая ни о чём! Просто берёте vue, разворачиваете как в доке написано и готово, работайте.
А когда сделаете, перекурите, а потом сядьте и посмотрите на своё творение и подумайте, как можно улучшить, возможно упростить. Не ждите быстрого успеха!

КОВАТЬ, КОВАТЬ И ЕЩЁ РАЗ КОВАТЬ! Только так можно научиться.

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

https://developer.mozilla.org/ru/docs/Web/API/Muta...

Если вы хотите изменять что-то внутри канваса, путём того, что меняются значения props, то просто вешайте watch на нужные вам свойства и вызывайте те или иные методы отрисовки канваса.

// MyCanvas.vue
<template>
  <canvas ref="canvas" width="150" height="150"/>
</template>

<script>
export default {
  props: {
    prop1: {
      type: String,
      default: null
    },
    prop2: {
      type: Number,
      default: 0
    }
  },
  data: () => ({
    ctx: null
  }),
  watch: {
    prop1 (value) {
      // Изменилось значение свойства prop1, рисуем квадрат
      this.ctx.fillRect(10, 10, 55, 50);
    },
    prop2 (value) {
      // Изменилось значение свойства prop2, рисуем ещё квадрат
      this.ctx.fillRect(30, 30, 55, 50);
    },
  },
  mounted () {
    if (!this.ctx) {
      this.ctx = this.$refs.canvas.getContext("2d");
    }
  }
}
</script>

Никак, это же отдельный пакет!!! Если только сам модуль не позволяет изменение разметки.

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

Во первых, селектор не верный.
Было
div.owl-item active
Нада
div.owl-item.active

Во вторых, вы по всей видимости, используете слайдер owl-carousel.

Инициализация библиотеки происходит после события DOMContentLoaded.
DOMContentLoaded говорит нам о том, что весь html загружен, а не то, что все скрипты загрузились и отработали.

После инициализации слайдера, карусель меняет классы динамически, т.е. в вашем коде не учитывается тот факт, что слайдер ещё не инициализировался. Ибо ваш код тупо срабатывает раньше инициализации слайдера! Поэтому вы ищите ещё не существующие селекторы!

Вам нужно прослушать событие у слайдера, которое символизирует, что слайдер проинициализирован и готов к работе. https://owlcarousel2.github.io/OwlCarousel2/docs/a..., а именно, судя по доке, вам нужно событие initialized.owl.carousel

https://qna.habr.com/q/1165002#answer_2181206