• Vue3. Как экспортировать функцию из компонента?

    Fragster
    @Fragster
    помогло? отметь решением!
    нужно выставить наружу нужные свойства и методы:
    https://vuejs.org/api/sfc-script-setup.html#define...
    А потом снаружи обращаться через указание ref в качестве атрибута в шаблоне:
    https://vuejs.org/guide/essentials/template-refs.h...
    Ответ написан
    1 комментарий
  • Правильное описание типов для колонок таблицы (Typescript)?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    Чтоюы union объектов работал - у него должно быть поле-дискриминатор(поле которое есть в каждом объекте и отличает его от другого), допустим type:
    type BaseColumn = { label: string; props: string }
    
    type Column = { type: 'text' } & BaseColumn
    
    type LinkColumn = { type: 'link'; path: string } & BaseColumn
    
    type TableColumn = Column | LinkColumn


    keyof для юниона объектов показывает только те поля, которые есть в каждом из них. Это логично, т.к. к типу TableColumn ты не можешь обратиться по полую .link предварительно не сузив тип. union - строгий.
    Ответ написан
    Комментировать
  • Как исправить ошибку 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 комментария
  • В какой момент срабатывает watch во vue 3 при множественном source?

    Lastor
    @Lastor
    В чем сила, брат? В ньютонах.
    const trigger = ref(false) //for watch
    
    function somePiniaAction() {
       var1.value = "1"
       var2.value = "2"
       var3.value = "3"
       trigger.value = !trigger.value
    }
    Ответ написан
    4 комментария
  • Как сделать преобразование фурье для изображения по xy?

    mayton2019
    @mayton2019
    Bigdata Engineer
    Что надо делать.?
    Не понимаю, с чего начать.

    Вообще если у тебя так много непоняток - то начни не с изображений а с 1-мерного графика.
    Курс валют например. Или ход температуры за сезон. Разберешся - дальше пойдешь.
    А если ты сейчас даже какую-то фигню закодишь
    - то как ты проверишь что правильное преобразование сделал?

    Начни с контракта. Что приходит тебе на вход? Вот это вот
    double[] x, double[]y

    С моей точки зрения - тут должна быть картинка. Image. На следующем уровне ты ее разбиваешь
    на цветовые слои. Красный зеленый ит.д. Потом эти слои разбиваешь на фреймы (8х8 пикс как в jpg).
    Потом их нормируешь от цвета пиксела до вещественного значения. И вот уже когда ты получишь
    матрицу вещественных значений - тогда и можно приступать к Фурье. Усек? У тебя хедер
    функции должен иметь такие параметры чтобы тебе было все кристально ясно что за аргументы и как.

    А так конешно у тебя каша в голове.

    Да. И по контракту Фурье преобразования ты получаешь комплесную
    вещественную матрицу на выходе. Тоесть две матрицы. Размер их не обязательно должен быть 8х8.
    Он может быть любым. Но обычно нижние коэффициенты матрицы (левый верхний угол - самые
    ценные для Фурье формулы).

    И дальше - делаешь все в обратном направлении. От Фурье к картинке. Получиться картинка - молодец.
    Значит правильно сделал.
    Ответ написан
    5 комментариев
  • Почему bottom:0 не работает?

    sfi0zy
    @sfi0zy Куратор тега CSS
    Creative frontend developer
    Использование position: relative совместно со свойствами top, right, bottom или left смещает элемент относительно его естественного расположения на странице. Поэтому все работает так, как и должно. Ваш main естественным образом расположен в верхней части родителя и смещен на 0px. Ну то есть никуда не смещен.

    Вероятно вы получите нужное вам поведение если будете использовать position: absolute.
    Ответ написан
    Комментировать
  • Какую базу данных использовать для такого проекта?

    mayton2019
    @mayton2019
    Bigdata Engineer
    Тут подходит любая реляционная SQL БД потому что нет противопоказаний. Реляционку мы выбираем
    уже более 30 лет как default вариант и почти не ошибаемся.

    Когда задача имеет признаки ярко выраженной high-load системы - мы делаем ей частичную денормализацию
    и раскладываем ее в NoSQL Key-Value решение. Но это не про улучшение а это про неизбежность. У нас нет выхода просто.
    Иначе мы клиенту не сможем быстро отдать какой-то резуальтат.

    Когда задача имеет ярко выраженную документную природу (нет спецификации на values) - мы берем MongoDb/CouchDb.

    Когда задача хранит граф и ищет в графе и вообще требует графовых алгоритмов - то мы берем Neo4j или ей подобные.

    Когда задача хранит данные измерений (телеметрия) - то предпочтительно взять InfluxDb или ей подобные. Здесь-же мы предполагаем что у нас - не будет joins а будет только измерения в диапазоне времени.

    Но в данном ТЗ и на картинке обычная SQL БД (MySQL/Postgres) вполне себе нормально справляется.
    Ответ написан
    Комментировать
  • Как сделать, чтобы с помощью input можно было производить поиск(в моем случае книг, каждая книга-отдельный объект json в js файле)?

    Mike_Ro
    @Mike_Ro Куратор тега JavaScript
    Python, JS, WordPress, SEO, Bots, Adversting
    // get DOM elements
    const searchInput = document.getElementById('searchInput');
    const resultsContainer = document.getElementById('resultsContainer');
    
    // search from array
    function searchBooks(query) {
        return CLASS5.filter(book => {
            return book.query.toLowerCase().includes(query.toLowerCase())
                || book.athor.toLowerCase().includes(query.toLowerCase())
                || book.pages.toLowerCase().includes(query.toLowerCase())
                || book.age.toLowerCase().includes(query.toLowerCase())
                || book.classn.toLowerCase().includes(query.toLowerCase());
        });
    }
    
    // print
    function displayResults(results) {
        resultsContainer.innerHTML = '';
    
        if (results.length === 0) {
            resultsContainer.innerHTML = '<p>Ничего не найдено...</p>';
            return;
        }
    
        results.forEach(book => {
            const bookCard = document.createElement('div');
            bookCard.innerHTML = `
                <h2>${book.query}</h2>
                <p>${book.athor}</p>
                <p>${book.pages}</p>
                <p>${book.age}</p>
                <p>${book.classn}</p>
                <img src="${book.images}" alt="Book Image">
            `;
            resultsContainer.appendChild(bookCard);
        });
    }
    
    // handler
    searchInput.addEventListener('input', (event) => {
        const query = event.target.value;
        const results = searchBooks(query);
        displayResults(results);
    });
    Ответ написан
    4 комментария
  • Как сделать чтобы PHP скрипт по завершении работы отправлял на фронт уведомление?


    Или например при выполнении скрипта на бэке записывать в базу результат а фронт будет через 5 минут спрашивать бэк все ли готово?

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

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

    Без вебсокетов можно попробовать server sent events, но лично я никогда ихне пробовал и не знаю подводных.
    Ответ написан
    Комментировать
  • Не давно начала изучать VUE, какие компоненты правильные?

    0xD34F
    @0xD34F Куратор тега Vue.js
    Правильно так, как вам удобно.

    А ещё, чтобы научиться делать правильно, надо сперва сделать неправильно.

    Так что реализовываете все варианты, какие только сможете придумать.

    Если в реализованном что-то не устраивает, всегда можно оформить вопрос (конечно, сперва погуглив) - вот есть такой-то компонент, решает такую-то задачу, мне в нём не нравится то-то и то-то, какие есть способы сделать лучше?

    Когда решите таким образом задач сорок-пятьдесят, начнёт приходить понимание, как делать правильно.
    Ответ написан
    Комментировать
  • Почему не проставляется атрибут data-v у стилей vue компонента при билде роллапом?

    @Dgacarda Автор вопроса
    @vitejs/plugin-vue использует под копотом vue/compiler-sfc, посмотрев исходный код compiler-sfc получилось такое решение:
    vue({
      style: {
        preprocessOptions: {
          additionalData: globalScssData // @import 'some-path/mixins.scss'; для глобального импорта
        },
        preprocessLang: 'scss' // используемый препроцессор: 'less' | 'sass' | 'scss' | 'styl' | 'stylus'
      }
    }),

    Понятного объяснения в доке по preprocessLang я не нашел, удалось понять смысл только после просмотра исходного кода. После решения проблемы с data-v атрибутом мне нужны были глобально некоторые scss миксины, про additionalData тоже никакой информации в доке, кстати, нет (по крайней мере я не нашел)
    Мораль: лучше сначала залезть в исходный код, а потом ресерчить, сэкономил бы себе кучу времени)
    Ответ написан
    Комментировать
  • Как выполнить сортировку слиянием списков несравнимых элементов?

    wataru
    @wataru Куратор тега Алгоритмы
    Разработчик на С++, экс-олимпиадник.
    Что значит, несравнимых элементов? Типа, вы знаете, что элементы каждого списка строго упорядочены, но про разные элементы из разных списков ничего сказать не можете, только если косвенно?

    Наверно, это задача на сортировку при частичном порядке.
    Решается через топологическую сортировку графа. Для каждой "буквы" заведите вершину. Проведите направленные ребра между каждой парой соседних элементов в каждом списке. Топологически отсортируйте граф. Работает за линейную сложность.
    Ответ написан
    1 комментарий
  • Как удалить все вхождения каталога в дереве каталогов?

    tsklab
    @tsklab
    Здесь отвечаю на вопросы.
    FOR /R %M IN (__cache) DO RMDIR "%M"
    Ответ написан
    Комментировать
  • Как начать зарабатывать начинающему web-разработчику в 17 лет?

    Zoominger
    @Zoominger
    System Integrator
    Как начать зарабатывать начинающему web-разработчику в 17 лет?

    Макдональдс, стройка, кошение травы.

    зарабатывать на вебе

    Пхаха.

    Хочу устроиться джуном в веб-студию удаленно

    Никто. Никогда. Не берёт. Джунов. На удалёнку. Точка.

    Может устроиться к кому-нибудь на фриланс

    Нет.

    Как начать зарабатывать на фрилансе?

    Никак.

    Каждую, чёрт бы её побрал, неделю такие посты. Ну погуглите хоть по Тостеру-то.

    Коротко: это очень плохой план, дикая конкуренция людей со знаниями и опытом выше вашего не дадут вам никаких шансов. Выбирайте другую область.
    Ответ написан
    29 комментариев
  • Как получить название классов из css файла в js?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    console.log(document.styleSheets);
    console.log(document.styleSheets[0].cssRules[0].selectorText);
    Ответ написан
    Комментировать
  • Как при клике на li передать его добавочный класс родительскому диву?

    0xD34F
    @0xD34F Куратор тега JavaScript
    О каких элементах идёт речь, как получать из них классы, и как переключать классы у их предка:

    const containerSelector = '.selectboxss';
    const itemClass = 'selectoption';
    const itemSelector = `${containerSelector} .${itemClass}`;
    
    const getClasses = el => Array.prototype.filter.call(el.classList, n => n !== itemClass);
    //const getClass = el => el.className.match(RegExp(`${itemClass}-\\d+`))[0];
    
    function updateClasses(item) {
      const container = item.closest(containerSelector);
      const { classList: cl } = container;
      cl.remove(...Array.prototype.flatMap.call(container.querySelectorAll(itemSelector), getClasses));
      cl.add(...getClasses(item));
      //cl.remove(...Array.from(container.querySelectorAll(itemSelector), getClass));
      //cl.add(getClass(li));
    }

    Назначаем обработчик клика каждому элементу индивидуально:

    document.querySelectorAll(itemSelector).forEach(function(n) {
      n.addEventListener('click', this);
    }, e => updateClasses(e.currentTarget));

    Или, можем применить делегирование:

    document.addEventListener('click', e => {
      const item = e.target.closest(itemSelector);
      if (item) {
        updateClasses(item);
      }
    });
    Ответ написан
    5 комментариев
  • Логика игры "Пятнашки" на Python?

    wataru
    @wataru Куратор тега Алгоритмы
    Разработчик на С++, экс-олимпиадник.
    Надо, чтобы "четность" перестановки совпадала с четностью финального поля (1).
    Занумеруйте все 16 позиций слева направо сверху вниз.
    чтобы подсчитать четность, рассматривайте каждую пару заполненных позиций (15\*14/2=105 пар) - если числа идут не в том порядке (большее число на позиции с меньшим номером) - то прибавьте 1 к ответу. В конце возьмите ответ по модулю 2. Это и будет четность перестановки.

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

    Edit: Но вы это почти все итак знатете, ибо функция is_solvable в вашем коде как раз инверсии уже считает.
    Значит, Но вы знаете, что плохое поле от хорошего отличается лишь четностью, значит, если поле плохое - меняйте местами 2 соседних по порядку элемента. Например верхний левый со вторым в верхней строке.
    Ответ написан
    Комментировать
  • Сервис для входа на сайт через смс код?

    @Kostik_1993
    Web Developer
    Firebase. Есть сервис аутентификации по СМС коду. 10 тысяч входов без тарификации в месяц. Прикрутить опытному разработчику не сложно. Одно но, почему-то рандомно не прилетают смс на некоторые номера
    Ответ написан
    2 комментария
  • Как можно сверстать градиентный бордер на градиентном фоне?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    Всё возможно.
    Например, так



    Поддержка в целом неплохая https://caniuse.com/css-masks
    Но если надо более надежно, то css-маску можно поменять на svg-маску
    Ответ написан
    3 комментария
  • Автоматически очищается консоль, как отключить это?

    Krasnodar_etc
    @Krasnodar_etc
    fundraiseup
    Нажмите на шестеренку справа, затем поставьте галочку "Preserve log"

    647ed2c2c5429795043168.png
    Ответ написан
    2 комментария