Задать вопрос
  • Не могу адекватно интегрировать шрифты Nuxt3?

    Aetae
    @Aetae
    Тлен
    Шрифты всегда и везде мерцают если не в кэше. Единственный способ надёжно избежать этого - ничего не показывать пока шрифт не загрузится - т.е. отображать лоадер или ещё что. "Не надёжно" это можно сделать просто поигравшись со свойством font-display.
    Наверняка же дождаться загрузки помогут соответствующие библиотеки, например webfontloader или напрямую Font Loading API.

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

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

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Вот те простой хэлпер для ленивой загрузки одной функции:
    function lazyAsync(lib) {
      let promise;
      return async function (...args) {
        promise ??= lib();
    
        return (await promise).call(this, ...args);
      };
    }
    
    const doSomething = lazyAsync(async () => {
      // тут загружаем
      const doSomething = await loadLib('doSomething');
    
      // тут что-то делаем с загруженным
    
      // тут возвращаем конечную функцию
      return data => {
        // тут делаем с аргументами
        return doSomething.process(imgData);
      };
    });
    
    // если сразу загружается нужная функция - можно не усложнять
    const doSomething = lazyAsync(loadDoSomethingProcess);
    
    await doSomething(1);
    await doSomething(2);
    await doSomething(3);
    Ответ написан
    Комментировать
  • Как вложить span в textarea?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Никак.
    Textarea - зона текста, там может быть только текст.
    Если хотите большего - есть только три варианта, два - геморройные, с кучей коссбраузерных несовместимостей и особенностей, которые обязательно заставят вас рвать волосы на заднице:
    1. Отказаться от textarea и использовать contentEditable div.
    2. Подкладывать под(или поверх с pointer-events:none) div, который копирует содержимое textarea 1:1 со всеми стилями и отступами и раскрашивает его как надо.

    ...и третий, рекомендуемый лично мной:
    3. Использовать одну из долгоживущих готовых библиотек, в которых всё давно отладили и предоставили удобные интерфейсы.
    Ответ написан
    3 комментария
  • Как заставить hmr в vite подключатсья по wss?

    Aetae
    @Aetae
    Тлен
    Нужно сконфигурировать nuxt devServer в режиме https из-за этого куска кода(хотя все мы понимаем что в 99% за https у нас отвечает nginx). Ну или монкипатчить.
    Ответ написан
    Комментировать
  • Как исправить ошибку TypeError: Cannot create property 'value' on boolean 'false'?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Это так не работает. В шаблоне у тебя все рефы раскрыты -это шаблон, он должен быть простым.

    Делать надо либо так:
    function popupLibraryOpen() {
      isLibraryOpen.value = true
    }
    <MyButton @click="popupLibraryOpen">Библиотека игр</MyButton>

    либо так:
    <MyButton @click="isLibraryOpen = true">Библиотека игр</MyButton>
    Ответ написан
    2 комментария
  • Как пересобрать массив объектов, выкинув из него лишнее?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Как-то так, если без учёта дубликатов, в один проход.
    function removeSomeShit(arr) {
      const table = {};
      const result = [];
    
      for(const current of arr) {
        const {uid, owner, createdAt} = current;
    
        const uidOvnerKey = `${uid}\0${owner}`;
        const ownerUidKey = `${owner}\0${uid}`;
    
        const matched = table[uidOvnerKey];
    
        if (matched) {
          delete table[uidOvnerKey];
          result.push(matched.createdAt > createdAt ? matched : current);
        } else {
          table[ownerUidKey] = current;
        }
      };
      
      return Object.values(table).concat(result);
    }
    Ответ написан
    1 комментарий
  • Как вывести template внутри template?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    а) Вынести в отдельный компонент. Чем компоненты меньше - тем лучше для vue. Не стесняйтесь выносить даже одиночный div.
    <div>
      <p>1111</p>
      <v-cost />
    </div>
    <div>
      <p>22222</p>
      <v-cost />
    </div>

    б) Если это какой-то массив данных - используйте v-for:
    <div v-for="{ title } in arr" :key="title">
      <p>{{title}}</p>
      <div class="cost">
        <div class="cost__title">test:</div>
        <div class="cost__number">3 400 </div>
      </div>
    </div>

    с) Если прям очень хочется говнять в рамках одного компонента, это можно сделать с помощью render функции, но там уже никаких шаблонов - чистый код. Тема "продвинутая", и в твоём случае явно не нужная, так разбирайся сам если хочешь.:)
    Ответ написан
    Комментировать
  • Нужно ли в vue для использования однофайловых компонентов использовать сборщик?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Простой ответ: да, нужно.
    Сложный ответ: не обязательно, можно компилировать шаблоны на лету подключив полный бандл vue на страницу, а потому с использованием костылей от сторонних разработчиков или самописных, возможно будет работать и с целыми компонентами, перекладывая вычисления на сторону пользователя. Но делать так не надо.
    Ответ написан
    Комментировать
  • Как убрать выделяющую линию в RubyMine или PHPStorm?

    Aetae
    @Aetae
    Тлен
    В PHPStorm, называется "Caret row":668c4751e495d403651189.png
    Ответ написан
    Комментировать
  • Как использовать :key в пользовательской директиве?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    Судя по названию директивы у тебя ошибка в логике:
    if (el === event.target || el.contains(event.target)) {
    ->
    if (el !== event.target && !el.contains(event.target)) {
    ->
    if (!el.contains(event.target)) { 
    // contains работает на самого себя, дополнительно проверять не надо

    Мы ловим клик снаружи, т.е. не равный выбранному элементу, а у тебя ловится клик на самом элементе, т.е. как будто это простой @click.

    Также по-хорошему следует предусмотреть update на случай обновления value, иначе у тебя директива поломается при его реактивном изменении(обычно конечно не меняют, но зачем закладывать бомбу?).
    Ответ написан
    Комментировать
  • Как прочитать "будущий" файл из пакета npm?

    Aetae
    @Aetae
    Тлен
    Получить корень приложения можно простым трюком:
    // если esm
    //const _dirname = path.dirname(fileURLToPath(import.meta.url)); 
    
    // просто берём весь путь, и отрезаем его перед первым вхождением node_modules
    const appRoot = path.resolve(__dirname).split(/[/\\]node_modules/, 1)[0];
    
    // если esm
    // import(appRoot + "/dbconfig.js").then(...);
    require(appRoot + "/dbconfig.js");

    Я поменял ts на js, т.к. конфиг файл не должен быть ts, если ты делаешь полноценный npm пакет. Потому что полноценный npm-пакет это собранный js, который из ts только декларации оставляет и не умеет импортировать ts.
    Если пакет у тебя исключительно под себя, то он может быть и тупо наюбором ts файлов, которые ты будешь у себя подключать и собирать в самом приложении. Тогда импорт ts возможен, но только для тебя, т.к. версий и настроек ts 100500 и практически гарантия, что у кого-то другого оно тупо не заведётся.

    Там ещё очень много нюансов будет завязано на полноценно понимание как работает сборщики, что такое ts, и как будет работать конечный код. Если у вас его нет, то будет больно.
    Ответ написан
    Комментировать
  • Как запретить PopUP окну всплывать?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    window.onload = function() { 
      if(sessionStorage.allow) return;
      popup.style.display = 'block'; 
    } 
    
    allowButton.onclick = function() { 
      popup.style.display = 'none'; 
      sessionStorage.allow = true;
    }
    Ответ написан
  • Как добавлять в билд Vite файл js без type module?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Если ты их руками в html вписываешь - там у тебя в корне должна быть папка public(если нет - создай) - туда и клади, он тупо их перекопирует в dist.
    Если же эти скрипты должны работать где-то в рамках других, то пиши где надо import '<script_path>'; (без from и всего такого).
    Ответ написан
    1 комментарий
  • Почему возвращает undefined?

    Aetae
    @Aetae Куратор тега Vue.js
    Тлен
    1. Проблема в том, что возвращает твой postForm. Сам по себе приведённых код рабочий. Нужен код postForm.
    2. Хотя приведённый код и рабочий - так писать нельзя: ты используешь либо Options Api, либо Composition Api. Не смешивая. Если есть setup - нет methods, если есть methods - нет setup. Да, оно работает. Но это говно. Как Тесла с дизель-генератором в багажнике.
    Ответ написан
  • Ошибка при отправке POST запроса на open server?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    Проблема скорее всего тут .then(response => console.log(response.json())). И скорее всего в том, что твой сервер по адресу db.json отдаёт вместо json какую-то фигню. Открой вкладку Сеть в инструментах разработчика и посмотри, что тебе от сервера в ответ на твой POST приходит.
    Ответ написан
    7 комментариев
  • Как написать стили для блоков, что прилипают к разным сторонам контейнера?

    Aetae
    @Aetae
    Тлен
    У flex есть свойство order.
    Просто сделай что-то типа:
    block:nth-child(odd) block__element {
      order: 2
    }

    И оно само выстроится с периодичностью.
    Ответ написан
    Комментировать
  • Как проверить объект на присутствие неизвестного ключа?

    Aetae
    @Aetae Куратор тега JavaScript
    Тлен
    function isPermittedObject(obj) {
      if (!obj) return false;
      
      const permitted = new Set(["v", "c", "g"]);
      let max = 1;
    
      for (const key in obj)
        if (!permitted.has(key) || !max--) 
          return false;
      return true;
    }
    
    console.log(!isPermittedObject({
      v: 1,
      c: 3,
      g: 5
    }))
    
    console.log(!isPermittedObject({
      v: 1
    }))
    Ответ написан
    Комментировать
  • Ошибка Failed prop type: Invalid prop `children` supplied to `ForwardRef(Box)`, expected a ReactNode. Что я делаю не так?

    Aetae
    @Aetae
    Тлен
    React так не умеет. Сам механизм react делает такое невозможным.
    Все компоненты синхронны(кроме lazy, но это совсем другое).
    Ты должен свою асинхронную функцию вызвать в useEffect, а пока она грузится показывать какой-нить лоадер.
    Ответ написан
    1 комментарий