• Как изменить background инпутов contact form 7?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Ответ написан
    Комментировать
  • Как влияет подключение на твой сайт?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    1. Если через CDN то велика вероятно что пользователь загружал это через CDN и оно будет взято из кеша. Если не загружал, то замедляет только на первое скачивание, если в кеше этого нет.
    2. Но с другой стороны - CDN это не контролируемая внешняя зависимость, что может в один прекрасный день ударить по безопасности. Поэтому если размещать у себя, то логика та же, только сохранит в кеш при первом заходе пользоввателя на Ваш ресурс. Дальше будет брать из кеша. Правда суть CDN в распределённых серверах, что как бы обеспечивает более быструю загрузку для пользователя. Но это уже нюансы о которых стоит почитать отдельно.
    3. Чем лучше пользоваться это холиварный вопрос и никто не даст подходящего именно Вам ответа.
    Ответ написан
    Комментировать
  • Каррирование... Что здесь происходит?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Константин, карирование оно не в вызове функции. А в том, что после вызова функции возвращается другая функция, внутри которой есть замыкание на аргумент, переданный в предыдущий вызов.

    Правильно ли я понимаю, что curriedSum(1)(2,3) - здесь в качества a - цифра 1, а в качестве b - (2,3) ? А как же c?

    Eсли смотреть относительно функции sum, то:
    В первых круглых скобка только a = 1.
    Во вторых круглых скобках b = 2 и c = 3.

    А здесь тогда как? curriedSum(1)(2)(3) - где здесь каррирование?

    Первый вызов вернёт функцию, которая "помнит" 1, второй вызов вернёт функцию, которая "помнит" 1+2, ну и третий вызов вернёт сумму 1+2+3.

    То есть эта запись: curriedSum(1)(2)(3)
    Эквивалентна этой:
    let curriedSum = curry(sum); // сделали функцию sum карируемой.
    
    var one = curriedSum(1) // так как sum ожидает 3 аргумента, то этот вызов вернёт функццию, которая помнит 1 и ожидает ещё 2 аргумента.
    var onePlusTwo = one(2) // так как sum ожидает 3 аргумента, то этот вызов вернёт функццию, которая помнит 1 и 2 и ожидает ещё 1 аргумент.
    var result = onePlusTwo(3) // так как sum ожидает 3 аргумента, два аргумента уже помнит функция onePlusTwo и мы передаём третий аргумент, то вернёт результат sum(1,2,3)
    result == 6 // true
    
    // При этом, мы можем в данном случае снова вызвать onePlusTwo, но уже с другим аргументом,
    // и получим соответствующий результат:
    onePlusTwo(7) // вернёт 10, так как onePlusTwo помнит 1+2, то есть получим sum(1,2,7) // 10.

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

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Возможно ли в css выбрать родительский элемент, если у ребенка есть определенный атрибут

    https://developer.mozilla.org/en-US/docs/Web/CSS/:has
    main:has(a[aria-expanded="true"]) {}

    Но поддержка так себе:
    https://caniuse.com/css-has

    Иначе только js.
    Ответ написан
    Комментировать
  • Как семантически верно оформить список статей в категории блога?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    section должен содержать в себе заголовок 1-2 уровня.
    section представляет собой какой-то блок, объдиняющий по смыслу какую-то информацию.

    Соответственно, я бы отклонил оба варианта.
    Делать внутри article section имеем смысл если их там больше 1.
    Не делать section вообще - значит не дать контекста что это за набор article.

    Я бы предложил вариант:
    main
      section
        заголовок
        article
          заголовок
          описание
          ссылка
        article
          заголовок
          описание
          ссылка
    Ответ написан
    1 комментарий
  • Как вставить элемент в середину листа?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    jquery
    native js

    Правила сервиса
    2.2 Убедиться в том, что в сети Интернет, и на страницах Сервиса в частности, отсутствуют ответы на данный вопрос. Специально для этого талантливые IT-специалисты создали и развивают поисковые системы Яндекс и Google.
    Ответ написан
    Комментировать
  • Как стилизовать часики в input="time"?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Комментировать
  • Как при помощи jquery добавить маску (параметр) к ссылке?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    if (link == location)
    // Заменить на
    if (location.startsWith(link))
    Ответ написан
    Комментировать
  • Куда (В какой файл) записывать например блок lang?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    В header.scss вы должны описывать только стили для header__logo. И то по упрощённой схеме. Потому что в методологии для каждого блока, элемента и модификатор предлагается создавать отдельные файлы, которые потом сборщиком проекта подключаются.

    Стили для .lang в файле lang.scss.
    Если нет сборщик которые сделает это в автомате, то пишут в основном файле стилей include и перечисляет какие блоки нужно подключить.

    Будет ли блок повторяться в более менее крупных проектах далеко не всегда известно заранее. Соответственно, лучше сделать это сразу, чем выделять потом.
    Ответ написан
    5 комментариев
  • Какую валидацию правильно делать для email в формах авторизации на js?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Во фронтенде практически не существует стандартов. В любом его направлении.
    Даже валидная вёрстка не стандарт (ну или, как минимум, не обязательный/не повсеместный).

    Валидация email на фронте не даёт 100% гарантию что email верный и существует.
    Можно лишь обязать пользователя соблюсти определённый паттерн.

    Если чистый js, то можно воспользоваться validation api и регулярным выражением.
    https://developer.mozilla.org/ru/docs/Learn/Forms/...
    Ответ написан
    Комментировать
  • «Семантические» HTML5 элементы — это аттавизм?

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

    https://habr.com/ru/company/htmlacademy/blog/546500/

    Основных поинтов использования семантики 3.
    1) Использование подходящих элементов делает их использование удобнее. Несколько раз встречал когда ссылки делали дивами с js поверх. Нет возможности нажать на них колёсиком чтобы открылаьс в новой вкладке или правой кнопкой с соответствующем ссылке контекстным меню. Это отвратительно неудобно.
    2) это помощь людям с ограниченными возможностями для понимания контекста происходящего на экране. Наглядный пример это ссылки внутри тэга nav. Можно побаловаться со скрин ридером и будет понятно о чём речь.
    Если коротко: ссылки в div будут озвучены как: *ссылка*.
    Ссылки в nav: "ссылка, навигация"
    https://vc.ru/promo/132280-kak-zvuchat-sayty-nezry...
    https://www.youtube.com/watch?v=RQiN1Hhrxu0
    3) Помощь поисковым ботам понимать контекст и формировать снипеты в поисковой выдаче. Пример есть в статье выше.
    https://siteclinic.ru/blog/technical-aspects/html5...

    с какой-либо из «сторон дела»: пользователя, верстки, программирования, поисковых систем?

    1) Про пользователей выше
    2) Про вёрстку - удобнее читать
    3) Про программирование - использование верных тэгов соответствующим образом влияет на работу с этими элементами в JS либо избавляет от необходимости в JS в принципе.
    4) Про поисковые системы выше.
    Ответ написан
    11 комментариев
  • Не открывается всплывающее окно оплаты в чём может быть ошибка?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Итак, если я верно понял, то response.result это вот это:
    {
      "orderId":"ec90-333b-9813",
      "formUrl":"https:\/\/securepayments.sberbank.ru\/payment\/merchants\/sbersafe_sberid\/payment_ru.html?mdOrder=ec90-333b-9813"
    }


    Возникает вопрос. Где тут errorCode?
    Если Вы указали полные данные - то нигде.
    Соответственно, errorCode - undefined.
    Но у Вас не строгое равенство, соответственно имеем, undefined == null // true.
    Это условие должно во всем браузерах отработать одинаково.
    А вот открытие окон в браузере может быть по умолчанию заблокировано и пользователю нужно дать на это разрешение.
    Ответ написан
  • Как сделать поле в форме для добавления тегов?

    MrDecoy
    @MrDecoy Куратор тега HTML
    Верставший фронтендер
    bootstrap это больше про саму про вёрстку и css.

    Вам же нужен готовый компонент multiselect.
    Например, вот подборка компонентов по запросу jquery chips multiselect
    https://www.jqueryscript.net/blog/best-multiple-se...

    А вот очень многофункциональный и популярный jquery плагин: https://select2.org/getting-started/basic-usage
    Ответ написан
    1 комментарий
  • Как поправить ошибку Uncaught TypeError: this.switchers[i].hideConfirm is not a function?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    У Вас на сайте расширен прототип Array методом remove, который сделан перечисляемым. (Расширение прототипов давно признано плохой практикой)

    Когда в цикле делаете
    for (i in this.switchers) {
       this.switchers[i].hideConfirm();
    }

    Сначала перебирает нормально, а в конце i = "remove".
    Cоответственно this.switchers['remove'].hideConfirm // undefined.

    Хотфикс - читать перед тем, как пользоваться.
    for...in цикл не для массивов.
    Используйте forEach вместо него.
    Либо добавьте проверку на .hasOwnProperty

    P.s. а если бы Вы умели в отладку кода, то решили бы эту проблему минут за 15.
    https://learn.javascript.ru/debugging-chrome
    Ответ написан
  • Почему происходит подтормаживание анимации?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Потому что в ветке else в анимации раскрытия у Вас не одно и то же между первым и вторым примером.
    В первом случае там будет правильная высота, а во втором - 0.
    Первый случай:
    [{ height: `${answer.clientHeight}px` }, { height: 0 }]: Array(2)
    0: {height: '156px'}
    1: {height: 0}
    length: 2


    Второй случай:
    hideKeyframes: Array(2)
    0: {height: '0px'}
    1: {height: 0}
    length: 2


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

    UPD: Рекомендую научиться отладке своего кода https://learn.javascript.ru/debugging-chrome.
    Решили бы проблему за 5 минут.
    Ответ написан
    1 комментарий
  • Как найти исполняемый js код конкретного блока?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Что значит "конкретной обёртки?
    Обработчик какого-то элемента?
    Открывайте инструменты разработчика, тыкайте селектором в элемент.
    И на той панели где отображаются стили элемента есть вкладка "Event Listeners" ну или том языке, какой у Вас выбран. Там можно посмотреть все обработчики данного элемента.

    Если что-то другое, то можно открыть вкладку Sources, сбоку в "проводнике" найти js файлы и искать код там.
    Ответ написан
    Комментировать
  • Как заставить работать CSS:Hover при прокрутке Slick Slider?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    svg#black_basket - уберите селектор по id
    Ответ написан
    Комментировать
  • Почему возникает ошибка: "inputList.some is not a function"?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    где и что упускаю

    inputList.forEach(function (inputElement) {
      inputElement.addEventListener('input', function () {
        checkisValid(form, inputElement);
        toggleButtonAttribute(inputElement, buttonElement) // inputElement - не массив.
      })
    })
    Ответ написан
    2 комментария
  • Что не так с кодом?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    А открыть коносль и прочитать что не так?
    1.
    var body = document.getElementsByClassName("js-store-prod-all-text");
    Не нужно делать перенос строки.
    2. document.getElementsByСlassName - C кирилическая стоит.

    P.s.https://qna.habr.com/help/rules - ознакомьтесь как нужно оформлять вопросы.
    Ответ написан
    Комментировать
  • Как оптимизировать reduce?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Массив дат можно вынести наружу, что
    1) не будет пересоздавать переменную каждый раз.
    2) сделает решение более гибким
    let a =  [
       {
          "code":"CL",
          "tnved10":"7318158100",
          "2019":"33",
          "2020":"0.00",
          "2021":"0.00"
       },
       {
          "code":"CN",
          "tnved10":"7318158100",
          "2019":"7540001.66",
          "2020":"8164813.34",
          "2021":"20980774.64"
       }]
    let b = a.reduce((acc, current) => {
      [2019, 2020, 2021].forEach(i => acc[i] += Number(current[i]))
      return acc
    }, {'2019': 0, '2020': 0, '2021': 0});
    console.log(b)


    Типа так:
    const years = [2019, 2020, 2021]
    let b = a.reduce((acc, current) => {
      years.forEach(i => acc[i] += Number(current[i]))
      return acc
    }, {'2019': 0, '2020': 0, '2021': 0});


    Можно ещё сократить, но уже в ущерб читаемости.
    Или можно убрать инициализацию начального значения аккумулятора, перенеся проверку ключа на то, что это год внутрь. Правда это несколько увеличит код внутри reduce, но сделает более гибким код.
    Ответ написан
    Комментировать