• Как типизировать массив с вложенными элементами?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    interface Item {
     name: string; 
     link: string;
     child?: Array<Item>;
    }
    
    type Items = Array<Item>;
    Ответ написан
    Комментировать
  • Как исправить ошибку TS при получении элемента img через ref vue 3?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Потому что вы должны добавить условие, которое проверяет, что картинка существует.

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


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


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

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

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Любой бекенд подойдёт, вне зависимости, пыха это, питон и т.п.

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

    Берёте laravel, пишите api. Беретё nuxt(2-3), резим SSR, готово.
    Ответ написан
    Комментировать
  • Есть ли смысл применять React для написания простого сайта?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Нет, не стоит!

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

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

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

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

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

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

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

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Проблема в том, что многие курсы рассказывают о различных 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, разворачиваете как в доке написано и готово, работайте.
    А когда сделаете, перекурите, а потом сядьте и посмотрите на своё творение и подумайте, как можно улучшить, возможно упростить. Не ждите быстрого успеха!

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

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

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    https://help.vimeo.com/hc/en-us/articles/124264869...

    Читаем раздел Autoplay Restrictions
    Ответ написан
  • Как получить названия файла и сохранить его в переменную?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    <input type="file">

    const input = document.querySelector('input');
    
    input.onchange = function (event) {
      console.log(event.target.value);
    }
    Ответ написан
  • Как отслеживать состояние свойства DOM элемента?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Комментировать
  • Как контролировать canvas во Vue?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Если вы хотите изменять что-то внутри канваса, путём того, что меняются значения 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>
    Ответ написан
    4 комментария
  • Как редактировать вёрстку экспортируемого модуля?

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

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

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Ответ написан
    Комментировать
  • Как правильно указать путь, чтобы вывести изображение?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Как минимум, нужно указывать полный путь к изображению в вашем объекте.

    const news = [
    {
      'ImgSource': require('@/shared/Images/News/имя картинки'),
      'Title': 'Заголовок',
      'Subtitle': 'Подзаголовок',
      'newsSource':'https://google.com',
      'detail': 'Подробнее',
    },
    Ответ написан
    Комментировать
  • Почему не работает document.querySelectorAll?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Во первых, селектор не верный.
    Было
    div.owl-item active
    Нада
    div.owl-item.active

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

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

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

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

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    // tagName - Имя тега
    // props - объект с свойствами DOM элемента
    // children - массив с DOM элементами
    function createElement (tagName, props = {}, children = []) {
      const newDOMElement = document.createElement(tagName);
      
      if (props) {
        for (const prop in props) {
          if (Object.prototype.hasOwnProperty.call(props, prop)) {
            newDOMElement[prop] = props[prop];
          }
        }
      }
      
      if (children.length) {
        children.forEach(child => {
          newDOMElement.append(child);
        });
      }
      
      return newDOMElement;
    }
    
    const body = document.body;
    
    // Создаём новый DOM узел
    const newDOM = createElement('div', null, [
      createElement('h1', null, [
        'Заголовок страницы'
      ]),
      createElement('p', null, [
        'Привет, Мир!'
      ]),
      createElement('button', {
        onclick: () => {
          alert('бабах');
        }
      }, [
        'Кликни меня'
      ])
    ]);
    
    // Вставляем в body новый DOM узел
    body.append(newDOM);


    Код по сути написал для примера, много особенностей работы с DOM не учтено, но принцип я показал
    Ответ написан
    Комментировать
  • Как сделать фокус в поле input?

    bootd
    @bootd Куратор тега CSS
    Гугли и ты откроешь врата знаний!
    Тут же, в доке есть пример с префиксом https://nosir.github.io/cleave.js/

    var cleave = new Cleave('.input-element', {
        prefix: 'PREFIX',
        delimiter: '-',
        blocks: [6, 4, 4, 4],
        uppercase: true
    });


    Разве это не то, что вы ищите?
    Ответ написан
  • Как можно сделать адаптив без Flex или Grid?

    bootd
    @bootd Куратор тега CSS
    Гугли и ты откроешь врата знаний!
    Раньше верстали через float: left. До этого были таблицы. Это единственный способ сделать адаптивность, если не брать гриды и флексы. Есть ещё возможность через inline-block, но там есть свои особенности.

    Но на них больше никто не делает, поэтому требование очень странное.
    Если не шарите за фолаты, то вот вам ссылка на старые версии bootstrap да бы изучить процесс
    Ответ написан
  • Лучшее решение для подгрузки data перед гидрацией в однокомпонентном приложении без store?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Да нет особого лучшего решения.

    Первый вопрос, у вас приложение - это 1 компонент, т.е. условный App.vue, что и куда вы провайдите?
    provide - это возможность пробросить данные от родителя к ребёнку. А где тут родитель, если компонент 1?

    Приведите более подробно код, что происходит у вас. Если вам нужно просто объединить 2 объекта, дефолтные значение и новые значение, ваш вариант тоже подходит. Я бы вообще создал отдельную модель, в которую пробрасывал входящие данные. Так хотя бы ясно, какие поля будут использоваться.
    Ответ написан
  • Стоит ли использовать Vuex для передачи данных между компонентами?

    bootd
    @bootd
    Гугли и ты откроешь врата знаний!
    Компоненты не должны общаться между собой, только в крайнем на то случае.
    Компоненты должны выкидывать события(emit), что бы можно было получать в родителе какие-то данные и прокидывать данные в сам компонент(props). Компоненты должны быть независимыми, за исключением каких-то UI компонентов, где могут существовать зависимости ребёнка от родителя.

    Если у вас большой проект, vuex очень удобен. Т.к. позволяет выделить отдельный слой для работы с данными API.
    Если у вас маленький проект, то тут на своё усмотрение.

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

    Моё мнение, что лучше использовать Vuex всегда, если вы работаете с API, не все будут согласны с этим. Но его использование делает проще понимание проекта, чем без. Если у вас просто маленький блок на сайте, который просто реализует какую-то небольшую задачу, редактор какой нибудь, опрос, или ещё что-то, vuex не нужен.

    P.S. С vuex нужно уметь работать. Если вы просто будете из vuex получать данные внутри каждого компонента, кашу вы не сварите.
    Ответ написан
    Комментировать