• Что делать, если div перекрывает событие другого div'a?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Добавь ещё прослушку клика на block_2 и затем вызови event.stopPropagation();

    После этого обязательно прочитай эту тему (иначе не сработает)
    Ответ написан
    Комментировать
  • Как удалить js скрипты connect.facebook.net?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    В инструментах разработчика открыть вкладку "сеть" и там найти нужный запрос к connect.facebook.net, там найти триггер запроса. возможно этот скрипт подгружает другой скрипт, который вы подключаете на сайт, возможно это браузерное расширение, возможно ещё что-то. проще зайти и просто посмотреть источник. тут вам никто не подскажет, мы не знаем как и почему на вашем сайте подгружаются эти скрипты
    Ответ написан
    Комментировать
  • Есть ли альтернативный способ для такой анимации?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Само свойство visibility анимировать невозможно, также как и display и прочие "дискретные" свойства.
    Но чтобы реализовать плавную анимацию например исчезновения (и чтобы в конце анимации было выставлено visibility: hidden;) можно использовать например анимации @keyframes
    @keyframes hide {
        0% {
            opacity: 1;
            visibility: visible;
        }
    
        99% {
            opacity: 0;
            visibility: visible;
        }
    
        100% {
            opacity:0;
            visibility: hidden;
        }
    }


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

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Родителю можно поставить флоу по вертикальной оси и добавить перенос элементов при переполнении. Чтобы переполнение возникало, нужно ограничить высоту родителя.

    display: flex;
    flex-direction: column;
    max-height: 100px;
    flex-wrap: wrap;
    Ответ написан
  • Какие есть альтернативы codepen для работы с CSS?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Отвечая на вопрос в названии: часто встречаю JSFiddle, repl.it и codesandbox, можете попробовать их.

    Дебаггер для css этим сервисам и не нужен, для этого есть инструменты разработчика в браузере, которым вы пользуетесь. Если вам нужны какие-то анализаторы для кода (валидаторы, форматтеры, и тд) -- это совсем другая история.

    UPDATE: Глянул сейчас. JSFiddle подсвечивает синтаксические ошибки в стилях. Если конечно это то, что вы ищете.

    А вообще советую попробовать visual studio code или другие редакторы кода. Я подобные песочницы использую только когда нужно быстро поделиться кодом с кем-то
    Ответ написан
    Комментировать
  • Как правильно добавить прокрутку?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Задача явно должна решаться через css. JS здесь не уместен

    Можно попробовать решить проблему таким образом
    .buy__wrap {
      position: relative;
    }
    
    .buy__item--text {
      position: absolute;
      right: 0;
      bottom: 0;
      top: 0;
    }


    Тогда правый блок всегда будет по высоте родителя, ни больше ни меньше. Если захочет быть больше, появится скролл. Дальше уже можно плясать с медиа выражениями как душа того пожелает.
    Ответ написан
  • Вывести все числа у которых 5 делителей до 300?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Занеси nums в первый по вложенности цикл. Тогда переменная будет создаваться для каждого нового проверяемого в цикле числа
    Ответ написан
    Комментировать
  • Как сделать такую линию в header-e?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Способов много, но предлагаю на выбор вот эти четыре:
    • Можно добавить дочерним элементам рамку (css свойство border). Например по 0.5px слева и справа. Либо по 1px только справа, первому элементу можно задать обе рамки
    • Можно между элементами сделать отступ в 1px при помощи отступа (margin-right: 1px). Для этого способа нужно чтобы у родителя элементов был серый цвет (цвет линии)
    • Если это flex раскладка (сомневаюсь), можно сделать гэп (css свойство gap для флекс контейнера)
    • Предыдущие три способа требуют, чтобы дочерные элементы контейнера были 100% высоты и n px в ширину. Если не хочешь с этим морочиться, можешь создать псевдоэлемент after для ребёнка (ссылки), добавить ему абсолютное позиционирование (а контейнеру относительное), выставить ширину в один пиксель, высоту в 100%, залить фоном, правильно спозиционировать и тд. Тогда это уже будет действительно самая настоящая независимая линия, а не рамка)


    Предпочтительнее всего третий вариант. Четвёртый вариант может устроить если не хочется перевёрстывать уже существующие элементы (например если они не на всю высоту или слишком узкие)
    Ответ написан
    Комментировать
  • Почему не распознается переменная при ее подстановке в строку?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Первый вариант правильный. Что именно у тебя возвращает undefined? Функция val()?

    Попробуй задебажить это поэтапно:
    1. Создай константу в которой будет хранится строка с нужным тебе селектором:
      const selectorString = `.c_ipt_surname${i}`
      console.log({ selectorString })

    2. Получи DOM элемент:
      const surnameElement = $(selectorString)
      console.log({ surnameElement })

    3. Получи значение, которое ввёл юзер:
      const surname = surnameElement.val()
      console.log({ surname })


    Последним пунктом я бы посоветовал выпилить jq и больше никогда им не пользоваться. Но этот пункт слишком opionated, я не стал его включать.
    Ответ написан
    4 комментария
  • Как понять нижеуказанный код Javascript?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    function largestOfFour(matrix) {
      let results = []; // переменная для хранения самых больших чисел из каждой строки матрицы
    
      // итерация по матрице
      for (let rowIndex = 0; i < matrix.length; i++) {
        // переменнная, в которой будет храниться самое большое число из текущей строки матрицы
        let largestNumber = matrix[rowIndex][0]; // первый элемент текущей строки в качестве значения по умолчанию
        // итерация по строке матрицы
        for (let rowElementIndex = 1; j < matrix[rowIndex].length; j++) {
          // если текущий элемент больше самого большого числа на текущем этапе итерации_
          if (arr[rowIndex][rowElementIndex] > largestNumber) {
            // самым большим числом становится текущий элемент строки матрицы
            largestNumber = arr[rowIndex][rowElementIndex];
          }
        }
        // после итерации по строке матрицы сохраняет самое большое число
        results[rowIndex] = largestNumber;
      }
      
      return results;
    }


    Этот код очень императивный, не пиши так. Ты можешь конечно разобраться как работает этот код, но самому тебе такой код не придётся писать (я надеюсь). Вот пример этой же функции, которая делает всё то же самое, но код получился гораздо лаконичнее:
    function largestOfFour(arr) {
      return arr.map((row) => Math.max(...row))
    }


    UPDATE: в комментариях под этим ответом есть обсуждение касаемо императивного кода. Отвечая автору вопроса я не имел в виду, что императивный код плохой и нельзя писать императивный код. Я имел в виду, что фронтендеру зачастую следует избегать императивности во время разработки (тем более, во время решения тривиальных задач)
    Ответ написан
    8 комментариев
  • Как сделать прозрачный шрифт так?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    В нынешних реалиях я бы попробовал данное свойство: -webkit-text-fill-color
    Ответ написан
    Комментировать
  • Как расположить элемент по центру в CSS?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Если вы учитесь, то советую изучить данную статью: https://css-tricks.com/centering-css-complete-guide/

    Спрашивая на подобных сервисах и копируя код, продвигаться будете медленно :)
    Ответ написан
    Комментировать
  • Пропадает фоновое размытие при наведении на карточку tilt.js, что делать?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Ни разу не пользовался тильдой, но на предоставленном примере для размытия используется "backdrop-filter: blur()". Этот css не поддерживается в некоторых браузерах.. штука баганая, если не изменяет память сам репортил багу в хромиум. В общем лучше не надеяться на это свойство, оно очень ненадёжное, фильтр очень часто ломается, проблема не в вашей анимации.

    mdn: https://developer.mozilla.org/en-US/docs/Web/CSS/b...
    caniuse: https://caniuse.com/css-backdrop-filter

    UPD: вижу только два варианта решения проблемы:
    1. Убрать анимацию поворота карточки при наведении на неё, оставить блюр.
    2. Убрать блюр, оставить анимацию поворота.
    Вряд-ли получится добиться желаемого результата с таким набором (а если и получится, будет работать мало где)
    Ответ написан
  • Как разместить блок по центру страницы по горизонтали?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    В вашем случае элемент имеет "position: absolute". Чтобы отцентрировать такой элемент по горизонтали, можно использовать left/right и transform:
    left: 50%;
    transform: translateX(-50%);

    Затем отступ снизу уже можно добавить например при помощи свойства "bottom". В демке на jsfiddle данный отступ уже присутствует.
    Ответ написан
    1 комментарий
  • Как перебить цвет input'а при автозаполнении в Chrome?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    Никак. Если и избавляться от этого, то только при помощи autocomplete="off"
    Ответ написан
    1 комментарий
  • Как должна работать production сборка при SSR?

    ZerdoX-x
    @ZerdoX-x Автор вопроса
    Frontend developer influenced by web, a11y, crypto
    Понял прикол. Нужен отдельный конфиг вебпака под сервер. сначала генерится сервер, потом остальные файлы. в сервер для разработки "зашивается" вебпак конфиг который так-же следит за сурсами, при изменении генерит соседние файлы. Сделал по этому гайду. Если интересно - вот репо.
    Ответ написан
    Комментировать
  • Как сделать под категории картинок в папке dist?

    ZerdoX-x
    @ZerdoX-x
    Frontend developer influenced by web, a11y, crypto
    options: {
        name: '[path][name].[ext]',
        context: 'src/img',
        outputPath: 'img',
    },

    Взял из своего webpack шаблона
    Этот момент даже описан в документации, что структура и иерархия папок внутри img сохраняется, если что почитай там. Написано без publicPath'ов и посттрансформов, всё просто.
    Конфиги тут - webpack.config.dev.js и webpack.config.prod.js
    Ответ написан
    Комментировать