Задать вопрос
MrDecoy

Вадим

Верставший фронтендер
Комментарии

  • Как повторно инициализировать слайдер после его уничтожения?

    MrDecoy
    @MrDecoy
    cupacabka,
    перед вызовом new Swiper, нужно будет проверить есть ли свойство destroy в swiperSlider и если есть, вызвать его.

    Функция примет вид:
    function initSlider(type) {
  var sliderSettings = {}
  if(type === 'mobile') {
    sliderSettings = {
     // описание настроек для мобильной вариации.
    }
  } else {
    sliderSettings = {
     // описание настроек для десктопной вариации.
    }
  } // конец if-else
  // Проверяем, есть ли в объекте слайдера метод destroy, и если есть - вызываем его.
  if(swiperSlider.destroy && typeof swiperSlider.destroy === 'function') {
    swiperSlider.destroy() // Возможно,если в круглые скобки передать true то будет лучше.
  }
  swiperSlider = new Swiper(sliderElement, sliderSettings)
}
    Написано

  • Как повторно инициализировать слайдер после его уничтожения?

    MrDecoy
    @MrDecoy
    cupacabka, Ну а ещё Вы слайдер в двух разных элементах вызывали. В моём коде используется один и тот же элемент. Может у Вас там на css что-то скрывается, или ещё что. Вы же не весь код предоставли и в песочницу не помещали.
    Написано

  • Как повторно инициализировать слайдер после его уничтожения?

    MrDecoy
    @MrDecoy
    cupacabka, а дестрой попробовали добавить где сказал?
    Написано

  • Как повторно инициализировать слайдер после его уничтожения?

    MrDecoy
    @MrDecoy
    cupacabka, у вас код как-то награмождён.
    Вам нужна 1 функция, которую нужно вызвать при загрузке документа и при ресайзе.
    Скажем,
    var sliderElement = document.querySelector(".project__slider");
var swiperSlider = {};
var sliderType = window.innerWidth < 857 ? 'mobile' : 'desktop'

function initSlider(type) {
  var sliderSettings = {}
  if(type === 'mobile') {
    sliderSettings = {
     // описание настроек для мобильной вариации.
    }
  } else {
    sliderSettings = {
     // описание настроек для десктопной вариации.
    }
  } // конец if-else
  swiperSlider = new Swiper(sliderElement, sliderSettings)
}

initSlider(sliderType)

window.addEventListener("resize", () => {
  if(window.innerWidth < 857 && sliderType == 'desktop') {
    sliderType = 'mobile'
    initSlider(sliderType)
  } else if(window.innerWidth >= 857 && sliderType == 'mobile') {
    sliderType = 'desktop'
    initSlider(sliderType)
  }
});

    Ну и, возможно, в функции инициализации слайдера, перед вызовом new Swiper, нужно будет проверить есть ли свойство destroy в swiperSlider и если если, вызвать его.
    Написано

  • В чем отличие этих записей?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Kipsi, Вот тут ещё можете почитать, я отвечал на подобный вопрос.
    Что позволяет записывать в функции статические методы?
    Написано

  • В чем отличие этих записей?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Kipsi, а, ну если это упрощённая версия, то может и не бред. Особенно если в ядре реакта) Там точно лишнего не будете :-)
    Написано

  • Как последовательно вывести все элементы массива в React?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Даниил Чистяков, А индекс попробовали подставлять? Получилось достичь желаемого?
    Написано

  • Как сделать что-то похожее (анимация на сайте)?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Александр Маджугин, Но вообще, я не говорил, что видео - это не жирно.
    Написано

  • Как сделать что-то похожее (анимация на сайте)?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Александр Маджугин, Верно.
    Свг будет грузиться целиком и пока она не загрузится - пользователь ничего не увидит.

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

  • Как сделать что-то похожее (анимация на сайте)?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Александр Маджугин, А анимации такого размера не редко делают просто фоновым видео.
    Написано

  • Как сделать что-то похожее (анимация на сайте)?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Александр Маджугин, Жирно это всё для одной свг.
    Написано

  • Где найти фронтэнд разработчика?

    MrDecoy
    @MrDecoy Куратор тега CSS
    для разового заказа - фриланс. Ссылки ниже вам уже указали.
    Для найма - hh.ru, https://career.habr.com/
    Написано

  • Как сделать что-то похожее (анимация на сайте)?

    MrDecoy
    @MrDecoy Куратор тега CSS
    пунктир и волнистые линии можно сделать на свг. Например с помощью svgator.
    Блок с телефоном и картой - скорее всего просто картинки, которые летают вверх вниз с помощью @keyframes и изменения позиции, скажем, transform: translateY
    Написано

  • Как убрать пустоту?

    MrDecoy
    @MrDecoy Куратор тега CSS
    Lorem Ipsum, чуть затянулось)
    HTML & CSS

    Вешаете много вспомогательных классов, таких как text-left, px-2, mr-1 и тд, но при этом пишите и свои кастомные классы тоже, такие как apSquare и sold.
    И тут сразу несколько вопросов:
    1) Зачем два разных класса? apSquare и sold? (Возможно, этот вопрос возникает в связи с тем, что код в демке вырван из общего контекста)
    2) Почему классы в разном стиле - kebab-case и cammelCase
    3) Вы захламляете html кучей классов, но всё равно в css пишете свои правила для этих элементов. В итоге, html распух, чтобы изменить стиль элемента нужно править и в css и в html.
    4) Некоторые стили ещё и заинлайнены в style атрибут. (Допускаю что тут была какая то анимация, но это можно сделать не инлайня стили в элементы, а с помощью переключения классов и css transition)

    br используется в редких случаях, когда явно нужно сделать перенос текста на новую строку. В остальных стоит делать переносы с помощью css или используя подходящие тэги. Например, p.
    тэг small используют не для того, чтобы нарисовать текст меньшего размера, а чтобы указать что он
    содержит заявления об отказе от ответственности, оговорки, юридические ограничения или авторские права. small также иногда используется для указания авторства или соответствия лицензионным требованиям.

    Спецификация

    Позиционировать badge с помощью position в этих карточках не удачный подход, не зависимо от того position relative или absolute. (с одной проблемой Вы уже столкнулись. Другие проблемы ожидают при адаптиве и если нужно будет что-то поменять в карточке. Например, в первой строке будет длинное слово)
    У вас однозначно в карточках проглядываются строки. Так и сделайте карточку построчно. Например, с помощью тех же div или p.

    Полнейшая каша из единиц измерений. em, rem, проценты.
    Если хотите использовать rem, то нужно помнить, что по умолчанию в браузерах 16px, но пользователь может переопределить. И тогда нужно быть готовым к тому, что всё станет больще\меньше. а font-size задавать в rem а не процентах, иначе какой смысл вообще использовать rem.
    padding в em Вы сознательно указали? Этот приём используется для динамического изменения размера элемента на основе размера шрифта.
    А вот border-radius уже в rem, почему? Зачем?

    Куча лишних свойств.
    Зачем Вам у .badge
    vertical-align
    text-align
    white-space

    у .apSquare
    float
    width
    min-width
    height

    Почему карточки в целом сделаны спанами, если спан это строчный текстовый элемент, а у Вас очевидно что это блоки с информацией.

    JS
    Добавляете обработчик клика через атрибут onclick. Так не делают очень давно.
    идут в js и пишут, например, в вашем случае, так:
    var cards = document.querySelectorAll('.sold') // нашли все элементы с классом sold
cards.forEach(addCardClickHandler) // для каждого элемента вызываем функцию addCardClickHandler

function addCardClickHandler (card) { // которая принимает на вход элемент card (см. документацию для forEach)
  card.addEventListener('click', cardClickHandler) // и добавляет элементу обработчик клика функцию clickHandler
}

function cardClickHandler(evt) { // функция обработчика клика принимает на вход объект события.
  var cardID = evt.target.getAttribute('id') //evt.target - элемент, на котором произошёл клик. Получили его id.
  // код, который у вас в функции showAppInfo
}


    Есть ряд причин так делать. Основные из них:
    • Более чистый html, а значит и более лёгкий, а значит и загрузится быстрее.
    • Разделение html и js привносит порядок. Каждый отвечает за свои задачи. HTML за разметку, JS за функционал. Благодаря этому, так же, например, можно этот html можно спокойно перенести в другой проект, где будет другой Js с этими элементами делать другое.
    • Добавление обработчиков таким образом позволяет легко добавлять несколько обработчиков кликов, а так же удалять обработчики, что бывает нужно для оптимизации и в некоторых других целях.

    Показанный выше пример можно улучшить, воспользовавшись деллигированием. Деллигирование, это приём, когда обработчик вешаете на родительский элемент, но нацелен обработчик на обработку событий дочерних элементов.
    Это делается для производительности ведь так мы только одну функцию обработчик задаём на один элемент, а не на все элементы.
    И, например, если элементы в разметке появляются асинхронно. Например, товары в каталоге, которые дорисовываются когда пользователь, скажем, нажимает "показать ещё" - нам не нужно будет добавлять обработчик на новые элементы, так как обработчик уже есть на родительском контейнере.

    Ну и вот ещё можете почитать: https://habr.com/ru/post/160177/
    Написано

  • Как переделать код из jQuery в JavaScript?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Ольга, ну тогда показывайте где не работает
    Написано

  • Как переделать код из jQuery в JavaScript?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Ольга,
    Uncaught TypeError: $ is not a function

    Что и требовалось доказать.

    jQuery код хочет отработать раньше, чем jQeury подключается.
    jQuery нужно подключать выше всех других либ.
    Написано

  • Как переделать код из jQuery в JavaScript?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Ольга, ну человек, который знает и jq и js 100-150 строк перепишет за день
    Написано

  • Как переделать код из jQuery в JavaScript?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Ольга, Вообще намёк не на это был) Почему не срабатывает? Ошибки есть в консоле?
    Написано

  • Как переделать код из jQuery в JavaScript?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    Ольга, ну, мой хрустальный шар подсказывает что из-за того, что jquery не подключена
    Написано

  • Как переделать код из jQuery в JavaScript?

    MrDecoy
    @MrDecoy Куратор тега JavaScript
    jQuery = JavaScript, так как jq это обёртка javascript`a
    Написано