• Что делать, если много условностей? ?? :: :, и как правильно его читать? Можно ли ссылку на статью какую нибудь?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Ответ написан
    Комментировать
  • Читаются все Alert ы в JS подряд?

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

    Операция присвоения возвращает то, что присваивается. В обоих случаях у Вас это не пустая строка, что внутри условия интерпретируется как истина.
    Так как это два последовательных if, не знающих друг о друге и не имеющих return внутри себя, то получаем:
    1. если истина, то + 10.
    2. если истина, то +5
    2.1 иначе упс
    Ответ написан
    6 комментариев
  • Как сделать вертикальные полосы более черными?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Как...?

    Научиться элементарному инспектированию разметки.
    Увидеть что стили применяются по селектору
    .gantt .tick и .gantt .tick.thick.

    Ну а дальше пойти в эти стили и поменять на что нужно. Цвет, толщину и тд.

    Ну и ещё можно пойти почитать документацию по библиотеке, которая строит диаграмму - https://frappe.io/gantt может там будет что-то про стилизацию.
    Ответ написан
    2 комментария
  • Как использовать инлайн-свг в CSS?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    И то и то на css не сделать.
    Можно найти svg через js, взять его разметку, прогнать через encode и по аналогии как base64 картинку задать в переменную, или напрямую в свойство. То есть url("data:image/svg+xml;utf8...
    https://stackoverflow.com/questions/10768451/inlin... тут есть примеры.

    В качестве background-image можно разве что сделать её или контент абсолютом и разрулить z-index
    Ответ написан
  • Как сделать замену под конкретный класс css, а не общий поиск?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Ну логично что нужно делать проверку. Насколько я понял вопрос, Вам нужно сделать так:
    function onEntry(entry) {
      entry.forEach(change => {
        const element = change.target
        if (change.isIntersecting) {
          const isCardEffect = element.classList.contains('card-effect-off')
          const isImage = element.classList.contains('image')
          if (isCardEffect) {
            element.classList.add('card-effect-on');
          }
          if (isImage) {
            element.classList.add('image-effect-on');
          }
        }
        else {
          element.classList.remove('card-effect-on');
          element.classList.remove('image-effect-on');
        }
      });
    }
    Ответ написан
  • Странное поведение скрипта js?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    у вас и во втором случае выводится не 2 ***, а 1 *** 2 ***.
    вы добавляете обработчик на каждый раз, а не переопределяете его. вот они и срабатывают все. сначала только 1 обработчик клика, потом 2, потом 3.
    Ответ написан
    9 комментариев
  • В каких слечаях можно использовать ID?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    ну а почему бы не присвоить ему класс-модификатор, а не id?

    а так... если Вы один на проекте и\или нет никаких соглашений, можете использовать id как хотите.
    Только держите в голове его особенности и ограничения:
    - Должен быть уникальным в рамках страницы
    - Специфичность селектора по id выше чем по классу.
    Ответ написан
    8 комментариев
  • Как вызвать функцию с "именованными аргументами" в JS?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    В целом - ответ "никак". Потому что так делать не надо. Это не очевидно. Код с душком.

    Но если очень хочется, то такие варианты:
    1) Нормальный вариант (даже без душка):
    func(1, undefined, undefined, 2)
    2) Нормальный вариант - объявлять не переменные, а объект на вход c деструктуризацией его свойств:
    function func({ a, b, c, d }) {
      return a+d
    }
    func({ a: 1, d: 2 });

    То есть это сокращённый вариант от такого:
    function func(data) {
      return data.a+data.d
    }
    func({ a: 1, d: 2 });

    3) Грязный вариант - создать новую функцию с забинжеными аргументами:
    function func(a,b,c,d) { return a+d }
    var badFunc = (a,d) => func.bind(null, a, undefined, undefined, d)();
    badFunc(1,2)
    Ответ написан
    4 комментария
  • Что происходит с реактом??

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Упрощу задачу:
    Ответ на вопрос тут: https://learn.javascript.ru/operators#operator-zap....

    И если код из вопроса писали Вы, это значит что Вы не понимаете что пишите. И первым делом чему нужно в таком случае научиться, помимо базы конечно же, это отладке кода: https://learn.javascript.ru/debugging-chrome
    Ответ написан
    Комментировать
  • Почему forEach выдает разные результаты?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    если коротко и не совсем корректно, то
    a++ это a = a + 1
    a+1 это ничего. Потому что нет присваивания.

    P.s. не совсем корректно потому что
    a++ не то же самое что a = a+1, потому что a++ вернёт текущее значение а потом его инкрементирует:
    var a = 1;
    console.log(a++) // 1
    // тут же ещё раз выводим а без инкремента\сложения
    console.log(a) // 2
    a = a +1
    console.log(a) // 3
    Ответ написан
    2 комментария
  • Раскрытие карточки товара при наведении?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Tereverda,
    Сделал простой код ниже, но тогда увеличивается длина страницы - все съезжает вниз.
    Как сделать, чтобы исчезающий блок накладывается как бы на контент и был выше?

    Знаете что такое поток в вёрстке?
    Как убрать элемент из потока?
    Вот это и нужно сделать.

    Причём я же Вам сказал что нужно сделать, зачем Вы полезли в display?
    Накидал демку:
    Ответ написан
  • Поле объекта undefined?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    https://learn.javascript.ru/debugging-chrome

    Ставите точку остановки перед выводом в значение и смотрите почему так.

    В консоль выводится объект по ссылке. То есть изначально такого поля может не быть в объекте, но пока Вы раскроете объект в консоле - оно там появляется.
    Ответ написан
  • Как убрать вот эту черточку между папками, чтоб при нажатии на папку, внутренняя папка сплывала вниз?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    settings: Explorer: Compact Folders

    но он так делает только когда папка пустая и содержит лишь одного ребёнка. То есть 123123 содержит внутри себя только папку 123123, так типа удобнее. Получается 1 клик вместо двух чтобы открыть дочерний каталог. Как только там появится ещё один ребёнок - он перестанет так делать.
    Ответ написан
    Комментировать
  • Как стилизовать только пустой SELECT в CSS?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Через css, пожалуй только с помощью :not(:has) - браузерная поддержка не полная. Проверяйте перед использованием.
    Либо поправить шаблон чтобы не было переноса строки внутри пустого селекта, тогда будет работать :empty.



    Иначе только на js обходить селекты, возможно через mutation observer и накидывать нужный класс для стилизации
    Ответ написан
  • Почему ts не ругается на отсутствие аргумента?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Что-то не понятное, давайте по порядку:
    - На первом скрине Вы вроде как объявили тип, но потом задали не соответствующее типу "значение". То есть в типе должен быть аргумент, в аргументах функции нет аргумента. Ошибки нет, но выглядит странно.
    - На втором скрине Вы указали в типе что возвращаете boolean, но возвращаете строку. Вот тут ошибка и ругается именно на это.

    Если оставить первый вариант и просто ниже написать test() то должен ругаться что не хватает аргументя для 'a'.

    P.s. а ещё у вас уже 63 вопроса. Пора бы начать соблюдать правила и писать код в вопрос не только картинками.
    Ответ написан
  • Изучила принцип верстки БЭМ, не уверенна что правильно выполнила?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    Так как Вы не предоставляете дизайн, то ответ будет основан на опыте и предположениях:
    • <button class="header__btn"> маловероятно что эта кнопка уникальна. То есть тут должен быть базовый класс btn и как микс, если нужно спозиционировать кнопку внутри шапки или задать ей внешнюю геометрию, например margin, header__btn.
    • <a class="header__search__number"> у Вас получается что это элемент элемента, так как 3 слова разделённых двумя нижними подчёркиваниями. Элементов элементов быть не может. Это либо дочерний блок для search(то есть про header__search то же что и в первом пункте), либо имя должно быть что-то типа header__search-number.
    • Аналогично про картинку, nav__items__item и тд.
    • Задавать class для option практически бессмысленно. Так там ещё и батарея слов через 2 нижних подчёркивания стала болье, так ещё и заканчивается на слово select. Почему, если это option а select выше?
    • <ul class="nav__contacts"><p class="nav__contacts__contact">Подписывайтесь на нас:</p>
      - не валидная вёрстка. Для списком прямыми потомками могут быть только элементы списка.
    • пути до картинок не должны содержать пробелов и заглавных буквы.
    • почему div class nav а не nav class nav?
    • Почему навигация вне шапки?


    P.s.
    Все вопросы риторические.
    Ошибаться нормально.
    Ответ написан
    Комментировать
  • При использовании методов добавления элементов в массив он под капотом создается заново?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Т.е. операции по типу [[...arr], value] так же сработают по скорости и логике, как arr.push(value)?

    Нет. push быстрее.

    А если чуть более детально, то под капотом это выглядит примерно так:
    - Вы объявили пустой массив. Движок зарезервировал память на массив из 10ти(разные движки могут под разную длину массива резервировать место) элементов.
    - Делаете пуш. Пока элементов меньше чем зарезервировано - всё очень быстро, так как движок просто кладёт элемент в зарезервированную ячейку памяти, адрес которой известен.
    - Как только элементов стало больше, под капотом ищется новая доступная область памяти на ещё 10 элементов и далее эти области памяти линкуются между собой (первая + вторая).

    В случае же со spread [...array] каждый раз создаётся новый массив, то есть каждый раз происходит поиск доступной памяти на массив + перебор массива для того чтобы заспредить его.

    Примерно так.
    Ответ написан
    2 комментария
  • Как правильно реализовать вертикальный степпер через список?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    sirenko, Для первого раза не плохо.
    Но есть ряд нюансов:
    1) Дивы нельзя вкладывать в списки. Это не валидно
    2) Вы хардкодите значения для каждого элемента. Это лишнее.
    3) Если текста будет другое количество, то всё поплывёт.
    4) Не нужно два псевдоэлемента, чтобы нарисовать 2 линии. Достаточно одного для длинной линии и другого для цифры поверх.

    Переписал на скорую руку (какие то стили для Вас могут оказаться лишними. Прописаны исключительно для демки):
    Ответ написан
    1 комментарий