• Как с помощью css grid сделать флоу, где первые 2 элемента делятся на 2 колонки, а все последующие (кол-во заранее неизвестно) на 3?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Главное что хочу - обойтись одним контейнером у карточек



    Кирилл, только одним, мне кажется, не обойтись, потому что в первой строке, на глаз, между элементами больше отступ пикселя на 2-4, чем между остальными. То есть column-gap разный.

    И тогда всё же 2 грида.

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

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    aria-hidden
    ну и tab-index чтоб не фокусилось, если фокусится
    ---
    но это очень не удобно для вывода полей через админку

    А ещё можно просто прописать ссылку на картинку в css переменную в инлайн стилях, а на css уже в медиа указать какую переменную использовать.

    Что-то вроде (увидеть смену картинки можно прямо тут, открыв код HTML или CSS - отработает медиазапрос):
    Ответ написан
    2 комментария
  • Как повесить обработчик событий только на элемент, без дочерних?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Отменить всплытие события в обработчике клика дочернего элемента с помощью event.stopPropagation()
    document.querySelector('.close').addEventListener('click', function(e){
      e.stopPropagation()
      document.querySelector('.result').insertAdjacentHTML('beforeend', '<div>Close</div>');
    });


    Либо в обработчике делать проверку на то, на каком конкретно элементе произошёл клик.
    Ответ написан
    1 комментарий
  • Как забирать значение у каждого элемента массива и добавлять в блок?

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

    <span>
      {{ productsCount }}
    </span>


    computed: {
      productsCount() {
        return this.checkedInput.reduce((acc, i) => { acc+= i.products.length; return acc }, 0)
      }
    }
    Ответ написан
    Комментировать
  • Как переписать короткую функцию в нормальную на javascript?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Давайте разберём по кусочкам.
    .then(({ json }) => 
      ({ data: {id: json.json[resource].id} })
    )

    ({ json }) - Деструктуризация входных параметров, то есть в качестве аргумента поступает объект, из которого извлекается свойство json в переменную. json.

    как это переписать в обычную функцию, чтоб там можно было поставить точку останова, или вписать debugger

    С минимальными изменениями, так:
    .then(({ json }) => {
      debugger
      return { data: { id: json.json[resource].id } } // круглые скобки уже не нужны, так как используется return
    })

    зачем лишние скобки вокруг аргумента и возврата

    На счёт скобок вокруг аргумента разобрали в первом пункте - из-за деструктуризации.
    На счёт скобок для возвращаемого значения - если из стрелочной функции нужно вернуть объект без ключевого слова return, то нужно обернуть его в скобки, условно, чтобы движок понимал разницу между телом функции, которое так же открывается через {} скобки и объектом.
    То есть () => { return {} } тоже самое что () => ({})

    Ну и отвечая на Ваш основной вопрос:
    Как переписать короткую функцию в нормальную на javascript

    }).then(function(info) {
      return { data: { id: info.json.json[resource].id } }
    })
    Ответ написан
    Комментировать
  • Сделайте так, чтобы по клику на текст в конце текста добавлялся сумма его атрибутов, что я сделал не так?

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

    Не изучили теорию.
    https://learn.javascript.ru/dom-attributes-and-pro...
    Что такое data... ? В приведённом коде - такой переменной не объявлено.

    function func() {
      elem.textContent += (Number(elem.dataset.productPrice) + Number(elem.dataset.productAmount))
    }
    Ответ написан
    Комментировать
  • Как в литерале объекта указать имя свойства, содержащее точку?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Точки не может быть в названии свойства объекта, если это не строка в явном виде.
    Ничего шокирующего.

    - return Promise.resolve({ user.id, user.username });
    + return Promise.resolve({ id: user.id, name: user.username });

    Ну или, если зачем то очень надо...
    - return Promise.resolve({ user.id, user.username });
    + return Promise.resolve({  "user.id": user.id, "user.username": user.username });
    Ответ написан
  • Что за библиотека для анимации на сайте?

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

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

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

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Вангую:
    @media screen and (max-width: 480px)
    .block-menu {
        width: 100%;
        right: 0;
        top: -100%;
    }


    Из-за того, что на мобильных есть ещё дополнительные плашки, то когда они отображаются - Вы видите часть своего мобильного меню в виде полосы на весь "хедер". Когда эти мобильные браузерные плашки скрываются, то и меню скрывается.

    Хотфикс на скорую руку - задать top: calc(-100% - 100px);

    100 пикселей - просто потому что. Можно сделать -200%. Главное перекрыть высоту мобильных плашек.
    Ответ написан
  • К чему относятся эти "приемы"?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    К чему относятся эти «приемы»

    К "модульной архитектуре". Правда не понятно что подразумевается под "и т.д."

    Webpack

    Лишь сборщик. Не безальтернативный. Помогает собирать проект и используемые модули в единый бандл, или на несколько чанков (пакетов), которые потом улетают в продакшен. Разделение на чанки для того, чтобы пользователь грузил только то, что нужно для текущей страницы.

    Npm

    Менеджер пакетов. Так же имеет альтернативы. То есть утилита, которая позволяет установить локально какой-то модуль. Который потом частично или полностью, по необходимости, можно будет импортировать в проект и воспользоваться его функциональностью.

    что именно мне нужно учить

    Модули, в частности, es6 модули, это если хотите понимать что действительно происходит.

    Но если детали Вам не интересны, то всё очень на самом деле просто.
    Представьте что один файл вам предоставляет функции(то есть делает export из себя), а в другом файле Вы эти функции потребляете(то есть делает import в себя). А нужно это, чтобы написать какой-то модуль один раз, и потом переисползовать. А не делать постоянно ctrl+c - ctrl+v. Вот и всё.
    Ответ написан
    4 комментария
  • Не отрабатывает анимация на iphone при этом на маке всё ок, почему?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Чуть поправил, так что теперь можете оттолкнуться от моей демки.
    Почему не анимировалось на iphone информации нет. Скорее всего потому что менялась высота внутри flex.
    Ну и в целом анимировать высоту, так же как и ширину - считается не самым лучшим делом в вебе.
    Погуглите на тему "производительные анимации". Или "свойства, безопасные для анимации".
    Плюс элементы на самом деле не помещались в свой контейнер, но это было не заметно на глаз, так как флекс без врапа.
    Ответ написан
    Комментировать
  • Base64 формат картинки, что делать на фронтенде?

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

    Пойти к бэкендеру и сказать: ты шо, дурак, зачем нам 470киллобайт не кешируемых данных по сети каждый раз гонять?!
    И пинать чтоб присылал ссылку.
    (а на деле я так понимаю там не одна картинка такая и не кешируемых данных в разы больше гоняется, что вообще ужас)

    На серьёзном хайлоад проекте это была бы, условно, смерть серверам по трафику.
    Но клиенты с не самым хорошим интернетом отлетели бы ещё раньше. А не самый хороший это даже мобильный 4g в средних условиях приёма сигнала. 470кб это очень, очень много для всего лишь одного запроса. Тяжелее запрос - дольше время до отрисовки.
    Ну и мобильный интернет далеко не у всех безлимитный. А не в России и подавно.

    А ещё есть лимиты на длину строки. В разных движках причём разные. Так что, теоритически, наверное, можно упереться в лимит строки и картинка не отобразится или будет битая.
    Ответ написан
    7 комментариев
  • Как создать собственную тему для чужих сайтов?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Внедряться в сайт оно не будет.
    Можно только локально, то есть конкретно у вас в браузере переопределить стили. Такое расширение уже есть. Вы ставите себе это расширение, пишите в нем стили и они применяются к сайту.
    Всё что нужно сделать - написать эти стили.
    Но работать это будет до ближайшего обновления сайта. Я так писал свои стили для вк, когда он на новый дизайн перешёл, чтоб старый дизайн вернуть. Держалось в среднем несколько недель. Потом что то нужно было править. А если сайт как инстаграм, например, когда имена классов генерируются, то полагаться можно только на иерархию разметки, а это адище такие стили писать.

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

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Не сделан тут Header и первый блок одной картинкой. Просто у header нет фона и он спозиционирован поверх блока с фоном, например, через position: fixed, либо располагается внутри него:
    .hero background-image: url()
      header


    P.s. hero screen - паттерн, когда первый экран на весь экран, и, как правило, вместе с шапкой.
    Ответ написан
    Комментировать
  • Функция в javascript и все ли они нужны?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Вызвать функцию можно только 2мя способами. Один из способов из двух вариантов.

    1. Как обычно, через круглые скобки ().
    2. Через вызов метода .call или .apply

    Других вариантов вызова функции что-то не приходит в голову.

    Способов объявления функций тоже всего два:
    - function expression - expression - выражение, то есть такая строчка, у которой есть знак =
    - function declaration - классическое объявлений функций через function name() {}.
    Между этими двумя вариантами одно основное кардинальное отличие, которое запомнить очень просто. Всплытие declaration.

    Все ли они нужны? Да.
    Можно ли обойтись без expression на первых этапах обучения и будет ли достаточно declaration? Да.
    Что ещё Вы хотите запоминать?

    P.s. можно ещё создавать функцию через конструктор Function, но так никто не делает, поэтому опустим этот вариант.
    Ответ написан
    Комментировать
  • Как добавить метод и свойство массива для прототипа конструктора Array?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    Array.prototype.last = function() { 
      return this[this.length-1] 
    }
    // [1,2,3].last()
    // 3

    Но модификация прототипа - плохая практика.

    метод и свойство массива

    Метод это и есть свойство. Просто это псевдоним, который говорит, что свойство хранит в себе функцию.

    Но если всё же нужно чтобы было без круглых скобок, то это через дескриптор get нужно объявлять.
    https://learn.javascript.ru/property-accessors
    Object.defineProperty(Array.prototype, 'last', {
      get: function() {
        return this[this.length-1] 
      },
      enumerable: false,
      configurable: false
    })
    
    // [1,2,3].last
    // 3
    Ответ написан
    4 комментария
  • Как при развертывании компоненты из emmet делать самозакрывающийся тег а не?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    В JSX это поддерживается. Так и пишите - Footer/ + tab
    638ccabf9236e471863387.png

    Для простого HTML Emmet такое не поддерживает, насколько мне известно. Разворачивает просто в <Footer>. Возможно, этот конфиг решает вопрос и для HTML.
    Есть команда split/join tag меняет тэг с парного на одиночный. Можно назначить хоткей на это дело. И тогда после разворачивания в парный тэг - хоткеем преобразовывать в одиночный.
    Ответ написан
    5 комментариев
  • Как сделать. чтоб было ровно?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    использовать подходящий HTML элемент - table.

    Ну а если религия не позволяет, то css grid
    Ответ написан
  • Как сделать элемент с прозрачным фоном и фигурным border?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Верставший фронтендер
    Не идеально, но что-то типа того (координаты надо подправить у псевдо clip-path).
    clip-path у контейнера и его псевдоэлемента на половину одинаковый. Собственно, та часть, которая создаёт "внешнюю" обрезку. А вторая часть clip-path у псевдоэлемента создана для "внутренней" обрезки, и чтобы это сработало используется опциональный аргумент evenodd.
    Ответ написан
    1 комментарий
  • Как сделать первую букву в каждом слове в верхнем регистре, а остальные в нижнем?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Верставший фронтендер
    userName.split(' ').map(word => word.substr(0,1).toUpperCase() + word.substr(1).toLowerCase()).join(' ')
    Ответ написан