• Как исправить баг соприкосновения двух Slice в RTK?

    @slide13
    frontend/web-developer
    Потому что кое что забыли в addMatcher. Сейчас у вас оба слайса в extraReducers матчатся на все асинхронно возвращаемые через промисы экшены, поэтому данные и записываются в оба слайса Т.е. вам необходимо матчить по название thunk + статус, а не только по статусу, как пример, для option:
    вот вы создали async thunk с типом "countries/fetchCountries"
    export const fetchCountries = createAsyncThunk(
      'countries/fetchCountries',
    ...

    и в addMatcher будет тогда:
    (action) => action.type.endsWith("countries/fetchCountries/pending"),

    Ну и везде так поменяйте.
    Ответ написан
    1 комментарий
  • Почему обработчик реагирует на событие, случившееся до его установки?

    0xD34F
    @0xD34F Куратор тега React
    Я так понимаю, вот она, причина, подъехала с версией 18.0.0:

    Consistent useEffect timing: React now always synchronously flushes effect functions if the update was triggered during a discrete user input event such as a click or a keydown event.

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

    При добавлении задержки, данная проблема уходит

    Можете ещё попробовать ловить событие в фазе погружения:

    document.addEventListener('click', handleOutsideClick, true);
    return () => document.removeEventListener('click', handleOutsideClick, true);
    Ответ написан
    Комментировать
  • Можно ли использовать две переменные в switch case?

    Rsa97
    @Rsa97
    Для правильного вопроса надо знать половину ответа
    Для начала, a,b - операция "запятая", её результат равен последнему операнду, то есть b.
    Затем вы сравниваете b с результатами операций a>b и a<b. Поскольку в b строка, а операции дают true или false, то, соответственно, сравнения не проходят и отрабатывает ветка default.
    Ответ написан
    Комментировать
  • Чем отличается наследование в ооп от протипированного наследования?

    DollyPapper
    @DollyPapper
    При классовом подходе у вас есть класс и его экземпляр. Состав полей и цепочка наследования при этом задана жестко во время написания. В прототипной модели у вас нет классов, есть обьекты прототипы которые могут динамически мутировать по ходу выполнения программы. Мутация означает, что мы можем изменять не только значения атрибутов обьекта, но и сам состав этих атрибутов.
    Ответ написан
    Комментировать
  • Крякозябры в функции spawn, как исправить?

    @5465
    Проблема с крякозябрами может быть связана с тем, что вывод команды "ping" в консоли использует кодировку, отличную от кодировки консоли, которую вы используете. В этом случае вы можете попробовать использовать параметр кодировки в функции spawn, чтобы установить правильную кодировку для вывода. Вот пример кода, который может помочь:

    const { spawn } = require('node:child_process');
    const iconv = require('iconv-lite');
    
    const command = spawn('ping', ['google.com'], {
      stdio: ['ignore', 'pipe', 'ignore'],
      encoding: 'win1251' // замените кодировку на нужную
    });
    
    command.stdout.on('data', output => {
      console.log(iconv.decode(output, 'win1251')); // замените кодировку на нужную
    });


    Здесь мы используем модуль iconv-lite для декодирования вывода команды с использованием правильной кодировки, установленной в параметре "encoding" функции spawn. В примере мы использовали кодировку "win1251", но замените ее на ту, которую использует вывод команды "ping" в вашей консоли.
    Ответ написан
  • Почему не копирует webpack-copy-files?

    @xxvxx Автор вопроса
    ....
    ответ
    devServer: {
      devMiddleware: {
        writeToDisk: true,
      },
    },
    Ответ написан
    Комментировать
  • Почему при переборе массива и суммировании значении разными циклами, ответ отличается?

    VoidVolker
    @VoidVolker Куратор тега JavaScript
    Dark side eye. А у нас печеньки! А у вас?
    numbers.forEach((name,index,array)=>{
        kubof=name**3
        sumech = sumof+kubof // <----- используется переменная из предыдущего цикла
        console.log(kubof) 
    })
    Ответ написан
    4 комментария
  • Как сделать скриншот содержимого IFrame?

    sanchezzzhak
    @sanchezzzhak
    Ля ля ля...
    у вас не получиться сделать скриншот средставми JS, если iframe это внешний источник обращение к frame доступно только через postMessage в обоих направлениях.
    Для локальных фреймов которые созданы родительским окном можно использовать все что угодно.
    так работает например vpaid реклама на yootube и на милионах других сайтах.

    Решение только использовать web-driver который запускает реальный браузер через selenium это chrome или firefox

    на nodejs можно использовать безголовый-хром в лоб, на пхп уже не вспомню как запускать шайтан машину.
    можно воспользоваться готовой библиотекой требует php8.1

    посути это обертка вокруг безголового хрома.
    https://github.com/spatie/browsershot
    Ответ написан
    1 комментарий
  • Как поменять цвет текста для select option?

    @igor042018
    https://dimox.name/jquery-form-styler/ неплохая библиотека для стилизации селектов
    ____
    спасибо, а есть простой способ поменять цвет плейсхолдера для текстового инпута?
    ____
    input::placeholder {...}
    Ответ написан
    6 комментариев
  • Как обработать post запрос на nodejs?

    black1277
    @black1277
    Вольный стрелок
    Есть простые и сложные запросы CORS. Когда запрос сложный - браузер отправляет 2 запроса сначала OPTIONS затем основной. GET - простой запрос - поэтому у вас всё работает правильно. POST - тоже простой запрос, но если изменить ему Content-Type на 'application/json' он становится сложным. Ваш сервер не отвечает на предварительный запрос OPTIONS, поэтому браузер блокирует ответ. Читайте подробнее, например здесь
    Ответ написан
    Комментировать
  • Какую альтернативу взять место MongoDB?

    vabka
    @vabka
    Токсичный шарпист

    а её заблокировали в России

    Только облачный Mongodb Atlas.

    А развернуть свой экземпляр можно без каких-либо проблем.
    Если хочется облако - можно взять dbaas у какого-нибудь провайдера.

    MySQL радикально отличается от mongodb как языком запросов, так и парадигмой.
    GraphQL - вообще даже не база данных, а только лишь протокол
    Ответ написан
    Комментировать
  • Как корректно передать элемент в рендер?

    @slide13
    frontend/web-developer
    Из того, что вижу я при беглом просмотре - у вас в качестве ключа в список ListItem передается undefined, т.к. у вас явно нет свойства key в текущем классе App (в консоли на это тоже ошибка должна быть). А так как ключи для всех элементов не заданы, то при добавлении в начало/середину списка нового элемента приводит к тому, что реакт неправильно высчитывает порядок элементов и из-за этого возникают такие странности при рендеринге списка.
    В качестве решения должно сработать поставить в качестве ключа тоже itemString, если он у вас дублироваться не будет, конечно, но все же лучше при создании таска присваивать ему уникальный id, т.е. в todoList будет не просто массив текстов, а массив объектов, где каждый объект будет содержать id и текст таска. Тогда можно будет и тексты одинаковые добавлять для разных задач и удалять проще будет.
    Также непонятно, для чего нужен key в стейте, если он не изменяется нигде.
    Ответ написан
    Комментировать
  • Как использовать несколько ключей SSH для разных аккаунтов Github через KeePassXC?

    saboteur_kiev
    @saboteur_kiev Куратор тега Git
    software engineer
    Можно настроить config для ссш и юзать разные хостнеймы для конкретных репозиториев
    Пример:

    ~/.ssh/config:
    Host github-user1
          HostName github.com
          User git
          IdentityFile ~/.ssh/id_rsa_user1
    
        Host github-user2
          HostName github.com
          User git
          IdentityFile ~/.ssh/id_rsa_user2


    В разных репозиториях редактируешь ремоут (.git/config)
    url = git@github-user1:user1/myrepo.git
    или
    url = git@github-user2:user2/myrepo.git

    ну или можно командой
    git remote set-url origin git@github-user1:user1/repo.git
    Ответ написан
    3 комментария
  • Почему моя анимация не работает?

    black1277
    @black1277
    Вольный стрелок
    Потому что вы ищете свойство "--main-up" в селекторе класса .favicon, а определили его в :root
    Попробуйте так
    let root =  document.documentElement;
    root.style.setProperty("--main-up", random+'px');
    Ответ написан
    Комментировать
  • Как создать несколько одинаковых элементов?

    sergiks
    @sergiks Куратор тега JavaScript
    ♬♬
    Если элемент не простой, а содержит вложенные, то можно использовать метод cloneNode(true) для создания копии со всеми под-элементами:
    Ответ написан
    Комментировать
  • Как задать движение изображений в canvas без setInterval?

    georgi1984
    @georgi1984
    Нравится JavaScript
    https://developer.mozilla.org/ru/docs/Web/API/Canv...

    Здесь объясняют как использовать requestAnimationFrame в анимациях
    Ответ написан
    Комментировать
  • Зачем нужен вебпак простым языком?

    sfi0zy
    @sfi0zy
    Creative frontend developer
    Вебпак - сборщик. Может взять много файлов и собрать в один. Ну или в несколько, как мы настроим. В js действительно есть модули, которые как бы уже нативно работают в современных браузерах, но есть ряд проблем:

    • Файлов с кодом может быть много. Сотни. Если использовать нативные импорты и загружать сотни файлов в браузер одновременно - накладные расходы будут заметными. Было бы хорошо уменьшить количество файлов. Плюс там могут быть не только скрипты, но и другие файлы, которых тоже может быть много.
    • Большое количество инструментов были написаны еще до появления нативных модулей в JS. Они все еще работают, выполняют свои задачи, но простым словом import их не импортировать. Там очень разные чудеса встречаются. Придумывать для каждого инструмента персональный костыль, как его импортировать, вроде как не хочется.
    • К предыдущему - иногда удобно в скрипты на JS импортировать что-то не на JS из отдельных файлов. В контексте моей работы - шейдеры на GLSL. Их нельзя просто так нативным import загрузить.
    • Часть зависимостей мы ставим с помощью npm. Это удобно. Но мы легко получаем папку node_modules на сотни мегабайт, при том, что в нашем проекте реально используется пара файлов оттуда. Загружать все это целиком на сервер - зачем? Ставить зависимости, а потом копировать нужные файлы откуда-то из глубин node_modules к себе в проект? Можно, но не то, чтобы удобно. Обновлять сложно будет, да и действий лишних что-то много.
    • Не всегда нам нужен полный функционал инструментов, которые мы используем. Часто в пример приводят lodash. Там много готовых функций на разные случаи жизни, но все используются редко. Было бы прям здорово в браузер загружать только то, что там на самом деле будет использоваться. А то, что не используется - не загружать.


    Как-то так. То есть нативные модули - это здорово. Но они далеки от совершенства. Не все проблемы решают. Поэтому сборщики все еще актуальны. И будут актуальны еще долгое время.

    Плюс webpack имеет возможность встроить в процесс сборки дополнительные процессы, которые долго делать руками. Код можно минифицировать. Уменьшит время загрузки страниц. Можно запустить w3c validator, stylelint, eslint, sonar и.т.д. - всякие проверялки, чтобы убедиться, что к пользователям улетит валидный код. Можно какие-то картинки сжать, сконвертировать в другие форматы. Можно typescript превратить в javascript, less, sass и.т.д. - в css. Много чего можно сделать. В целом сборщик сам по себе - это перпендикулярный ко всем этим процессам инструмент. И раньше люди использовали отдельный класс инструментов, чтобы запускать все это - таск раннеры. Grunt, gulp - вы скорее всего про них слышали. Можно писать npm-скрипты или даже по старинке делать makefile под сложную сборку. Но в webpack вроде как есть функционал плагинов, и можно эти процессы запускать и через него тоже. Вроде как он не для этого изначально придуман, но многие люди находят удобным иметь все в одном месте.
    Ответ написан
    Комментировать
  • Для чего нужен параметр sourceMap в tsconfig?

    Aetae
    @Aetae Куратор тега TypeScript
    Тлен
    webpack - это webpack, typescript - это typescript, всекаешь?

    Если нет, то поясню: это разные инструменты, которые могут прекрасно работать сами по себе и никак не пересекаться. Но в обоих случаях есть необходимость sourceMap.
    Если говорить о связке webpack и typescript, при работе в лоб webpack, как сборщик, потребляет sourceMap из typescript и генерирует из них свои.

    Сгенерированные из webpack sourceMap при отключении оных в typescript могут иметь разный вид в зависимости от настроек, плагинов и режимов: от нормальных, т.к. об этом позаботились плагины или вообще компиляция шла через babel, до полностью сломанных и бесполезных.
    Ответ написан
    Комментировать
  • Что за библиотека для анимации на сайте?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Вот вроде основные:
    GSAP,
    TweenMax js
    ScrollMagic js
    barba js
    swiper js
    lottie

    Возможно есть аналоги на js или jquer

    Они все на js. Хотя jQuery у них к сайту тоже подключается.
    Ответ написан
    Комментировать
  • Для чего нужен "Микс" в методологии БЭМ?

    delphinpro
    @delphinpro
    frontend developer
    Если с Модификатором еще + - понятно [...], то вот с Миксом мне не понятно,

    Вы невнимательно читали про БЭМ или вовсе не читали.
    Написание модификатора на html-элементе – это тоже микс.

    Mix - англ. Смесь

    Именно для этого они и нужны: Для размещения (смешивания) нескольких БЭМ-сущностей на одном HTML-элементе.
    Ответ написан
    1 комментарий