• Отложенная загрузка Яндекс метрики, пробовал ли кто-то ставить?

    Kalaganov5
    @Kalaganov5
    Реклама, Аналитика, Веб-разработка
    Более проработанный пример
    <script type="text/javascript">
                ( function () {
                    'use strict';
     
                    // Флаг, что Метрика уже загрузилась.
                    var loadedMetrica = false,
                        // Ваш идентификатор сайта в Яндекс.Метрика.
                        metricaId     = 123456789,
                        // Переменная для хранения таймера.
                        timerId;
     
                    // Для бота Яндекса грузим Метрику сразу без "отложки",
                    // чтобы в панели Метрики были зелёные кружочки
                    // при проверке корректности установки счётчика.
                    if ( navigator.userAgent.indexOf( 'YandexMetrika' ) > -1 ) {
                        loadMetrica();
                    } else {
                        // Подключаем Метрику, если юзер начал скроллить.
                        window.addEventListener( 'scroll', loadMetrica, {passive: true} );
     
                        // Подключаем Метрику, если юзер коснулся экрана.
                        window.addEventListener( 'touchstart', loadMetrica );
     
                        // Подключаем Метрику, если юзер дернул мышкой.
                        document.addEventListener( 'mouseenter', loadMetrica );
     
                        // Подключаем Метрику, если юзер кликнул мышкой.
                        document.addEventListener( 'click', loadMetrica );
     
                        // Подключаем Метрику при полной загрузке DOM дерева,
                        // с "отложкой" в 1 секунду через setTimeout,
                        // если пользователь ничего вообще не делал (фоллбэк).
                        document.addEventListener( 'DOMContentLoaded', loadFallback );
                    }
     
                    function loadFallback() {
                        timerId = setTimeout( loadMetrica, 1000 );
                    }
     
                    function loadMetrica( e ) {
     
                        // Пишем отладку в консоль браузера.
                        if ( e && e.type ) {
                            console.log( e.type );
                        } else {
                            console.log( 'DOMContentLoaded' );
                        }
     
                        // Если флаг загрузки Метрики отмечен,
                        // то ничего более не делаем.
                        if ( loadedMetrica ) {
                            return;
                        }
     
                        (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js", "ym");
                        ym( metricaId, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true });
     
                        // Отмечаем флаг, что Метрика загрузилась,
                        // чтобы не загружать её повторно при других
                        // событиях пользователя и старте фоллбэка.
                        loadedMetrica = true;
     
                        // Очищаем таймер, чтобы избежать лишних утечек памяти.
                        clearTimeout( timerId );
     
                        // Отключаем всех наших слушателей от всех событий,
                        // чтобы избежать утечек памяти.
                        window.removeEventListener( 'scroll', loadMetrica );
                        window.removeEventListener( 'touchstart', loadMetrica );
                        document.removeEventListener( 'mouseenter', loadMetrica );
                        document.removeEventListener( 'click', loadMetrica );
                        document.removeEventListener( 'DOMContentLoaded', loadFallback );
                    }
                } )()
        </script>


    Источник: https://www.kobzarev.com/technical-seo/yandex-metr...
    Ответ написан
    Комментировать
  • Куда лучше вставить код гугл аналитики и яндекс метрики в хедер или футер?

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

    ar6uz
    @ar6uz Автор вопроса
    Фронтент разработчик в компании Profsoft
    и так, как это сделать:
    1. надо прописать в роуте разрешение на передачу props (props: true):
    {
          path: '/history/:id',
          component: HistoryId,
          name: 'historyId',
          props: true
        }

    2. в route-link прописать, какие парметры хотите передать (params: {}):
    <router-link
                                   tag="a"
                                   class="button"
                                   :to="{name: 'historyId', params: {id: historyItem.id, date: historyItem.date}}"
                           >

    3/ Принять эти данные в компоненте:
    <script>
        export default {
            props: ['date'],
    Ответ написан
    Комментировать
  • Как в VS Code в снипетах использовать переменные scss содержащие символ "$"?

    SeaInside
    @SeaInside
    15 лет пилю все эти штуки
    Здравствуйте. Двумя слэшами экранируйте.
    "test" : {
      "prefix": "test",
      "body": [
        "color: \\$color-primary;"
      ]
    }
    Ответ написан
    1 комментарий
  • Что значит JCF?

    deepblack
    @deepblack
    Может это оно?
    JCF - JavaScript Custom Forms
    This library allows crossbrowser customization of form elements using CSS.
    Ответ написан
    Комментировать
  • Почему не подключаются стили и скрипты в webpack config?

    new HtmlWebpackPlugin({
          filename: "index.html",
          chunks: ["index", "common"], // у вас нет этих модулей
          template: PATHS.app + "/templates/index.pug"
        }),

    Если бы вы задали входные точки объектом
    config.entry = {
        index: './index.js',
        common: './common.css'
    }

    тогда бы у вас в хтмл подключались эти скрипты и стили.
    Просто уберите chunks из HtmlWebpackPlugin и у вас все модули будут включаться в index.html.
    Ответ написан
    1 комментарий
  • Возможно ли запретить прокрутку в iOS Safari с сохранением текущего положения?

    SmthTo
    @SmthTo Автор вопроса, куратор тега CSS
    Все перепёлки мира будут оплакивать мою смерть.
    Достаточно простое решение нашел на kinopoisk.ru. Как и всегда в таких случаях, оно лежало на поверхности.

    В переменную сохраняем текущее положение прокрутки body, на body вешаем стилями полученное значение (только отрицательное) в свойство top. Так же нужно добавить position: fixed и left: 0 (right: 0 тоже можно, хуже не будет). Да-да, всё же fixed, засим, может поломать transform.

    Вот такие inline-стили для body от работы данного метода на Kinopoisk:
    top: -345px;
    left: 0px;
    right: 0px;
    position: fixed;

    Проверил у себя на устройствах: работает в iOS Safari 11 и 12. Иных путей решения данной проблемы найти не удалось.

    Update. Забыл добавить функции, что я написал, они не супер-гипер крутые, но рабочие:
    // 1. Фиксация <body>
    function bodyFixPosition() {
    
      setTimeout( function() {
      /* Ставим необходимую задержку, чтобы не было «конфликта» в случае, если функция фиксации вызывается сразу после расфиксации (расфиксация отменяет действия расфиксации из-за одновременного действия) */
    
        if ( !document.body.hasAttribute('data-body-scroll-fix') ) {
    
          // Получаем позицию прокрутки
          let scrollPosition = window.pageYOffset || document.documentElement.scrollTop;
    
          // Ставим нужные стили
          document.body.setAttribute('data-body-scroll-fix', scrollPosition); // Cтавим атрибут со значением прокрутки
          document.body.style.overflow = 'hidden';
          document.body.style.position = 'fixed';
          document.body.style.top = '-' + scrollPosition + 'px';
          document.body.style.left = '0';
          document.body.style.width = '100%';
    
        }
    
      }, 15 ); /* Можно задержку ещё меньше, но у меня работало хорошо именно с этим значением на всех устройствах и браузерах */
    
    }
    
    // 2. Расфиксация <body>
    function bodyUnfixPosition() {
    
      if ( document.body.hasAttribute('data-body-scroll-fix') ) {
    
        // Получаем позицию прокрутки из атрибута
        let scrollPosition = document.body.getAttribute('data-body-scroll-fix');
    
        // Удаляем атрибут
        document.body.removeAttribute('data-body-scroll-fix');
    
        // Удаляем ненужные стили
        document.body.style.overflow = '';
        document.body.style.position = '';
        document.body.style.top = '';
        document.body.style.left = '';
        document.body.style.width = '';
    
        // Прокручиваем страницу на полученное из атрибута значение
        window.scroll(0, scrollPosition);
    
      }
    
    }


    Для Bootstrap'овских модальных окон можно сделать универсальный вызов этих функций при их открытии и закрытии:

    $(document).on('shown.bs.modal', function () { // открытие любого модального окна Bootstrap
      bodyFixPosition();
    })
    
    $(document).on('hidden.bs.modal', function () { // закрытие любого модального окна Bootstrap
      bodyUnfixPosition();
    })
    Ответ написан
    3 комментария
  • В браузере Safari появляются ссылки в верстке, хотя их нет, как исправить?

    SmthTo
    @SmthTo Куратор тега Вёрстка
    Все перепёлки мира будут оплакивать мою смерть.
    Вот это в head:
    <meta name="format-detection" content="telephone=no">

    Вообще, этих мета-тегов больше:
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="date=no">
    <meta name="format-detection" content="address=no">
    <meta name="format-detection" content="email=no">

    Информация:
    https://stackoverflow.com/questions/28027330/html-...
    Ответ написан
    1 комментарий
  • Как настроить автоширину слайдов с Swiper Js?

    @Anonimmus
    Юзай slidesPerView: 'auto', и в css задавай ширину блоков, слайдер автоматически подстроится под размеры
    <!-- Swiper -->
            <div class="swiper-container">
                <div class="swiper-wrapper">
    
                    <div class="swiper-slide infoPost">
                        <div class="infoText">
                            <h2>Коллекция авторских коробок</h2>
                            <p>Бесплатная доставка по городу Воронеж от 2000 рублей</p>
                            <a href="">Купить</a>
                        </div>
                    </div>
    
                    <div class="swiper-slide imgPost1"> </div>
    
    
    
                    <div class="swiper-slide infoPost">
                     <div class="infoText">
                        <h2>Коллекция авторских коробок</h2>
                        <p>Бесплатная доставка за город от 3999 рублей</p>
                        <a href="">Купить</a>
                    </div>
                </div>
    
                <div class="swiper-slide imgPost2"> </div>
    
    
    
    
                
            <div class="swiper-slide infoPost">
                 <div class="infoText">
                    <h2>Коллекция авторских коробок</h2>
                    <p>Бесплатная доставка по городу от 1700 рублей</p>
                    <a href="">Купить</a>
                </div>
            </div>
    
            <div class="swiper-slide imgPost3"> </div>
    
    
        </div>
        <!-- Add Arrows -->
        <div class="btns">
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
    </div>
    
    <script src="js/slider.js"></script>

    var swiper = new Swiper('.swiper-container', {
          slidesPerView: 2,
          spaceBetween: 0,
          // init: false,
         loop: true,
         slidesPerGroup: 2,
      
        autoplay: {
            delay: 7000,
            disableOnInteraction: false
        },
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
           pagination: {
            el: '.swiper-pagination',
            clickable: true,
          },
          breakpoints: {
            300: {
       <b>       slidesPerView: 'auto',</b> 
              spaceBetween: 0,
            },
            768: {
              slidesPerView: 'auto',
              spaceBetween: 0,
            },
            1024: {
              slidesPerView: 'auto',
              spaceBetween: 0,
            },
    
          }
        });


    .infoPost {
      width: 1165px;
      height: auto;
      margin-left: -150px;
      background: url("../img/bac-slider.png") no-repeat;
      mix-blend-mode: multiply;
      background-position: top center;
    }
    
    .imgPost1 {
      width: 750px;
    }
    
    .imgPost2 {
      width: 750px;
    }
    
    .imgPost3 {
      width: 750px;
    }
    Ответ написан
    2 комментария
  • Как полностью удалить Microsoft office?

    @nichvlas Автор вопроса
    Работает по итогу только эта утилита от ms
    Она полностью удаляет данные о ранее активированных ms office
    https://aka.ms/SaRA-officeUninstallFromPC
    Файлы pst и ost из outlook остаются на компьютере (также остаются папки и записи в реестре)
    Так что и это программа не удаляет полностью все что связано с офисом, но задачу помогла решить
    Ответ написан
    2 комментария
  • PHP: как вызвать метод из родительского класса, который мы переопределили?

    Использовать конструкцию языка
    parent::showField();
    Ответ написан
    Комментировать
  • Как используя addEventListener передать параметр в функцию?

    @alexeyproject
    // Вариант 1. Привязываем контекст и первые по порядку параметры
    function someFunk(a, b, event) {
    	console.log(a, b, event);
    }
    element.addEventListener('click', someFunk.bind(null, 1, 2));
    
    // Вариант 2. Используем интерфейс EventListener
    function someFunk(event) {
    	console.log(this.a, this.b, event);
    }
    element.addEventListener('click', {handleEvent: someFunk, a: 1, b: 2});
    Ответ написан
    5 комментариев
  • Composer не видит переменную PATH?

    vangelis83
    @vangelis83
    Начинающий веб разработчик
    У меня была такая проблема. Решил ее следующим образом: в windows 10 есть окно, в котором все пути выводятся в отдельных строках и там же есть кнопки "Вверх", "Вниз". Я путь к php поставил ниже, после пути к файлам composer. И случилось чудо, composer у меня заработал.
    Ответ написан
    4 комментария
  • Как отрабатывать PHP в browser-sync (gulp)?

    werty1001
    @werty1001
    undefined
    gulp.task('browser-sync', function() {
        browserSync.init({
            proxy: "yourlocal.dev"
        });
    });
    Ответ написан
    3 комментария
  • Как исправить Uncaught TypeError: $(...).live is not a function?

    svistiboshka
    @svistiboshka
    живые веб интерфейсы
    Этот метод доступен только в jquery До версии 1.7 включительно. замените на .on
    Ответ написан
    4 комментария
  • Как извлечь число из строки?

    var el = 'rate-55345'
    var numEl = parseInt(el.match(/\d+/))
    
    alert(numEl)
    Ответ написан
    Комментировать
  • Как задавать версии css?

    Rastishka
    @Rastishka
    Я на php получаю timestamp последнего изменения файла. Проблем с производительностью нет, операция достаточно быстрая.
    /style.css?ver=1450975943

    Преимущества:
    - файл берется из кеша до тех пор, пока не был фактически изменен
    - нет необходимости помнить какие файлы менял, а какие нет → меньше вероятность ошибки и меньше работы
    Ответ написан
    Комментировать
  • Как с помощью gulp-watch отследить какой именно файл изменен?

    AirWorker
    @AirWorker
    Node.js full stack web dev
    Вы не туда роете. Вы же хотите ребилдить только то, что реально изменилось, так?

    Все этого хотят, и это называется "инкрементальная сботка" (incremental build). Есть простые рецепты, есть не очень. Для начала рекомендую посмотреть скринкаст Ильи Кантора: https://learn.javascript.ru/screencast/gulp
    Ответ написан
    1 комментарий
  • Почему gulp не парсит PHP?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    //Перенос файлов PHP
      function php() {
        return src(path.src.php)
       //     .pipe(webphtml()) Вот эту хрень выбросите
            .pipe(dest(path.build.php))
            .pipe(browsersync.stream())
      }


    А картинки сразу самостоятельно вставляйте в современных форматах.
    Данный плагин совершенно бесполезен. Даже вреден, в каком-то смысле.
    Ответ написан
    3 комментария
  • Как открыть модальное окно один раз и только после 30 секунд?

    miraage
    @miraage
    Старый прогер
    jQuery(function($) {
      // Ключ localStorage
      var LS_KEY = 'modal_shown';
      
      // Если модал еще не открыали
      if (!localStorage.getItem(LS_KEY)) {
        setTimeout(function() {
          // Открываем модал
          modalShownFn();
          
          // Сохраняем флаг в localStorage
          localStorage.setItem(LS_KEY, '1');
        }, 30 * 1000);
      }
    });
    Ответ написан
    1 комментарий