• Как изменить фракционную пагинацию в свипере?

    @archelon
    В документации https://swiperjs.com/api/#pagination
    параметр renderFraction

    var swiper = new Swiper('.swiper-container', {
      //...
      renderFraction: function (currentClass, totalClass) {
          return '<span class="' + currentClass + '"></span>' +
                  ' of ' +
                  '<span class="' + totalClass + '"></span>';
      }
    });

    в примере — of (1 of 10)
    Ответ написан
    Комментировать
  • Как передавать дополнительные аргументы в $emit события?

    @furashcka
    vue намеренно ограничивает кол-во аргументов в своих стандартных функциях, только ОДИН объект, объясняется это тем что объект нагляднее читается в коде чем просто список аргументов:
    mySuperFunction1(ignoreCache,  isReverse, removeEmpty, visible) { ... }
    mySuperFunction2({ignoreCache,  isReverse, removeEmpty, visible}) { ... }
    
    mySuperFunction1(false, true, true, true);
    mySuperFunction2({
      ignoreCache: false,
      isReverse: true,
      removeEmpty: true,
      visible: true
    })


    В вашем случаи в $emit можно передавать массив

    $emit(`name`, [arg1, arg2]);

    А снаружи раскладывать массив стандартной es6 операцией:
    @событие="metod(...$event)"
    Ответ написан
    Комментировать
  • При загрузке картинки этот блок не имеет размера, как исправить?

    @Qoragar
    Чтобы место под картинку заранее резервировалось на странице — надо жёстко задать ширину и высоту изображения (или его контейнера) через атрибуты тега или в свойствах CSS.
    Ответ написан
    1 комментарий
  • Почему justify-content: space-between не работает?

    noder_ss
    @noder_ss
    Линуксоид-энтузиаст и SQL разработчик
    Если я правильно понял, то вы не указали размеры .nav , пропишите ему width:100%
    Ответ написан
    Комментировать
  • Как изменить значение в объекте массива объектов и вернуть массив?

    0xD34F
    @0xD34F Куратор тега JavaScript
    Собрать новый массив:

    const toggle = (arr, id) => arr.map(n => n.id === id ? { ...n, done: !n.done } : n);

    Изменить существующий:

    const toggle = (arr, id) => (arr.forEach(n => n.id === id && (n.done = !n.done)), arr);
    Ответ написан
    Комментировать
  • Почему не работает overflow: hidden?

    @helison
    student
    Добавь к классу user свойство {white-space: nowrap;} нечего переносится не будет
    а что б заработал overflow: hidden; надо добавить к классу ".user .txt" вот эти свойства {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 50%;
    }
    Ответ написан
    Комментировать
  • Как читать user-agent?

    sim3x
    @sim3x
    Ответ написан
    Комментировать
  • Как сделать прокрутку в бургер-меню, если оно position adsolute?

    @avenikich
    Бургеру overflow:auto;
    Ответ написан
    Комментировать
  • Какое адекватно решение создания кастомного чекбокса с ссылкой внутри label?

    @tihomirovPro
    Frontend developer
    Можно сделать так:

    <div class="checkbox">
      <input type="checkbox" id="checkbox" class="checkbox__input">
      <label for="checkbox" class="checkbox__label"></label>
      <p class="checkbox__text">Lorem ipsum <a href="#">policy</a> aspernatur minima.</p>
    </div>

    Лейблу задаешь абсолютную позицию и растягиваешь на весь блок, а ссылке релатив и z-index выше чем у лейбла

    Ответ написан
    3 комментария
  • Как у visual studio code отключить редактирование html при сохранении?

    @Brezencat
    Teamlead Data platform
    VS Code -> левый нижний угол, значёк шестирёнки (Ctrl + ,) -> Settings -> Text Editor -> Formatting -> Format On Save (убрать флаг)
    Ответ написан
    Комментировать
  • Как отправить HTML письмо?

    SeregaSPb
    @SeregaSPb
    На примере Google Chrome
    1) Нажмите [правый клик]>[Просмотр кода элемента] или F12
    2) В открывшемся инструменте разработчика в коде текущей страницы (gmail) найдите куда вставить код письма и нажмите [правый клик]>[Edit as HTML]
    3) Вставьте Ваш HTML код и нажмите Ctrl+Enter
    Ответ написан
    3 комментария
  • Какого размера должен быть экран?

    @Majvik
    Зависит от пользователей которые будут пользоваться сайтом в будущем. Если на десктопе в вашей аудитории будет большое количество пользователей с небольшими ноутбуками на windows создавайте макет с высотой экрана 1080 и помещайте важные смысловые элементы в первые 640px (бар с меню пуск + окно браузера с баром закладок "отъест" часть экрана) если большая часть будет на больших экранах, то просто помните об "активной" области и ее размер определяйте в 700-900 пикселей
    Ответ написан
    Комментировать
  • Можно ли в e-mail рассылке использовать картинки формата svg?

    @Atonaome
    Некоторые почтовики не поддерживают SVG. Здесь можно посмотреть результаты тестов. А вот тут информация о том, как эта проблема может быть решена. И ещё Вам возможно будет полезна информация о свойствах CSS, поддерживаемых различными почтовыми клиентами здесь.
    Ответ написан
    Комментировать
  • Почему getBoundingClientRect считает не правильно высоту?

    @Asokr
    Скрытые элементы браузер не рендерит, поэтому размер у такого элементы не узнать.
    У вас не вся высота - видимо потому, что в момент работы getBoundingClientRect() - элемент виден именно на столько...

    Решение зависит от конкретной ситуации.
    Я обычно позиционирую элемент абсолютно за экраном - меряю его высоту, и возвращаю на место...
    Ответ написан
    1 комментарий
  • Экспорт изображений из figma в 1x или 2x?

    MrDecoy
    @MrDecoy
    Верставший фронтендер
    1. Нет понятия правильно и не правильно. Есть то, что соответствуют задаче, и остальное.

    2. Это делают не для 4к разрешения, а для мониторов с большей плотностью пикселей. Например, ретина экраны. Но современные десктоп мониторы уже тоже с так называемой одинарной плотностью редко встречаются. Таким образом, для мониторов с маленькой плотностью пикселей загрузится картинка х1, для остальных х2. Таким образом, на мониторах с большей плотностью пикселей картинка сохранит свою чёткость, а не поплывёт.

    3. В идеальном мире Вы должны отдавать пользователю и х1 и х2 в зависимости от его девайса. Ибо зачем пользователю с х1 экраном грузить более тяжёлую х2 картинкку? А так же в нескольких разных форматах (с помощью picture). Например, jpg, webp, avif (браузер загрузит тот что поддерживает). Итого получаем 2*3 = 6 экземпляров одной картинки. А раз наш мир в этом пункте идеальный, то для разных разрешений ещё и разные картинки отдавать, которые больше под это разрешение подходят. Например, обрезают лишнее и сохраняют фокус на важном. Тогда, скажем, возьмём ещё 3 разрешения, получаем 18 экземпляров одной картинки :-) Но, конечно же, даже в идеальном мире, такое делать желательно только с тяжёлыми, размером больше "среднего" и контентно значимыми изображениями.
    Ответ написан
    Комментировать
  • Почему страницы сайтов "прыгают" вверх или остаются на месте при обновлении?

    AlexanderYudakov
    @AlexanderYudakov
    C#, 1С, Android, TypeScript
    Вот так будет прыгать:
    <p><img src=picture.jpg></p>
    <p>Текст, текст, текст, текст, текст</p>


    А вот так не будет:
    <p><img src=picture2.jpg width=300 height=200></p>
    <p>Текст, текст, текст, текст, текст</p>


    Причина проста. Браузер всегда покажет абзац с текстом, не дожидаясь, пока загрузится картинка. Чтобы пользователь смог скоротать время за чтением текста.

    Но тут у браузера возникает вопрос:
    — А сколько свободного места оставлять под картинку?

    Если мы размеры сразу укажем в html (300*200), браузер воспользуется нашей подсказкой и оставит 200 пикселей по высоте пустого места, чтобы потом там отобразить загруженную картинку.

    Но если мы не укажем размеры картинки в html, у браузера этой информации не будет. Размер необходимого свободного места под картинку будет взят наобум. Следующий за картинкой текст будет нарисован на экране сразу после этого "наобум".

    Уже потом, когда пользователь успеет прочитать половину текста, а браузер — загрузить картинку, размер нужного для картинки места будет пересчитан. При этом текст придется сдвинуть вниз.

    Это и есть "прыжки" контента при загрузке страницы.

    P.S. То же самое касается любого динамического контента, который подгружается скриптами после загрузки страницы. Размеры контейнеров под динамический контент нужно указывать сразу.
    Ответ написан
    7 комментариев
  • Как при наведении на картинку сделать эффект затемнения?

    Softwider
    @Softwider
    Вариант №1 - подложка с иконкой: https://codepen.io/Softwider/pen/PoReMQj
    Вариант №2 - подложка с иконкой и текстом: https://codepen.io/Softwider/pen/ExELqVr

    Вариант №2 предпочтительнее так-как более лаконичный.
    К обоим вариантом добавил анимацию через transition.
    Центровку текста и иконки во втором осуществил с помощью flex (а в первом через background center center).

    Спасибо HamSter
    Ответ написан
    Комментировать
  • Как лучше сверстать такую нестандартную секцию?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    один из вариантов такой:

    64b3eb0e77557996836118.png

    Зеленый блок - overflow:hidden
    Ответ написан
    Комментировать
  • Как сделать прогесс-бар таймера слайда на swiper js?

    @Pochemuchka92688
    Понимаю, что автору вопроса вряд-ли этот вопрос актуален, но когда сам столкнулся с ним, решил написать самостоятельно:
    HTML:
    <div class="swiper mySwiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide">1</div>
                <div class="swiper-slide">2</div>
                <div class="swiper-slide">3</div>
                <div class="swiper-slide">4</div>
                <div class="swiper-slide">5</div>
            </div>
            <div class="swiper-pagination"></div>
            <div class="timer-swiper"><div class="timer-swiperAfter"></div></div><!--Здесь к обычной верстке свайпера добавил только прогресс-бар. И да, назвал неправильно, знаю)-->
        </div>

    JS:
    var swiper = new Swiper(".mySwiper", {
            direction: "horizontal",
            slidesPerView: 1,
            spaceBetween: 30,
            loop: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false,
            },
            on: {
                slideChange: ()=> {//Здесь мы переключаем старый слайд на новый и нужно обновить прогресс-бар. Без таймаута стиль не обновляется.
                    document.querySelector('.timer-swiperAfter').classList.remove('active');
                    setTimeout(() => {
                        document.querySelector('.timer-swiperAfter').classList.add('active');
                    }, 50);
                },
            },
            pagination: {
              el: ".swiper-pagination",
              clickable: true
            }
     });


    Теперь сам CSS:
    .timer-swiper{
        position: absolute;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 10px;
        background: white;
        z-index: 2;
    }
    .timer-swiperAfter{
        background: #007aff;
        height: 100%;
        width: 0;
        height: 10px;
        display: block;
    }
    .timer-swiperAfter.active{
        width: 100%;
        transition: 5s all;
    }


    Думаю, что те, кто понимают самую базу по Html, css, js поймут что куда да как. Всем путникам - удачи!
    Ответ написан
    Комментировать
  • Почему у меня нет вкладки inspect в Фигме?

    pozZzitiv
    @pozZzitiv
    Дизайнер и перфекционист
    Фигма обновилась.
    Панель inspect теперь внутри Dev Mode https://www.figma.com/blog/introducing-dev-mode/

    6494192e73e83475077013.png
    Ответ написан
    7 комментариев