• Как обрабатывать клик по любой ссылке?

    FinGanapre
    @FinGanapre
    Конкретно ваш код не отрабатывает, т.к. к вам приходит псевдо-массив (NodeList) всех элементов a в документе. Вы могли бы пройтись по нему циклом и повесить на каждый элемент обработчик, но так делать не нужно. Во-первых, вы заставляете браузер искать все a на странице, во-вторых - вешаете обработчик на каждую. При этом, делаете это через цикл.

    Так как по умолчанию все события всплывают (это поведение можно изменить, а также отменить всплытие события на элементе), т.е. клик на вложенный элемент можно поймать в родительском, лучше вешать все обработчики на документ.

    // вешаем обработчик на документ
    // если повесите на каждую ссылку - то кол-во обработчиков будет равно кол-ву ссылок
    // так себе идея
    document.addEventListener('click', e => {
      // определяем, что клик произошёл на ссылке
      if (e.target.nodeName === 'A') {
        // отменяем переход по ссылке
        e.preventDefault()
        console.log('do some there')
      }
    })


    getElementsByTagName - не стоит использовать. Сейчас прекрасно работают querySelector и querySelectorAll. Из старых способов получения элементов можете пользоваться разве что getElementById, т.к. он отработает чуть быстрее
    Ответ написан
    1 комментарий
  • Стоит ли отображать рубрики в url?

    ReactorHeart
    @ReactorHeart
    SEO аналитик
    Делал и продвигал проекты с обоими указанными вами структурами URL и скажу точно, что большой разницы в продвижении не заметил.

    Хотя, поисковики "любят" разветвленную структуру сайта типа "site-name.ru/category-name/article-name", но объективно вы это заметите только в увеличении количества лимитов на переобход (Кабинет вебмастера Яндекса - Индексирование - Переобход страниц - Дневной лимит).

    Но, как вы правильно заметили для варианта "site-name.ru/category-name/article-name", из минусов - теряется удобство при "перетусовке" статей между разделами.

    Чтобы успешно продвигать статьи по варианту "site-name.ru/article-name":
    1. организуйте блоки перелинковки м/д статьями (например по классическому варианту - в конце статьи
    2. выставляйте сквозной виджет сайдбаре с новыми статьями - они будут быстрее индексироваться и набирать позиции
    3. постарайтесь разместить блоки перелинковки со статьями или разделами (если разделы продвигаются по запросам) на таких "трастовых" страницах, как "О проекте", "Об авторе" и т.д. Т.к. чаще всего эти страницы за счет сквозных ссылок из Меню набирают колоссальный "вес" и его надо использовать.


    Для успешного продвижения Разделов по варианту "site-name.ru/article-name":
    1. при составлении СЯ для сайта попробуйте подобрать запросы для продвижения разделов и оптимизировать под них эти страницы.
    2. в разделах размещайте, помимо заголовков статей, картинки-превью + уникальный (!) текст с кратким описанием того, о чем статья (текст не должен дублироваться на других страницах!).
    3. Откройте к индексации страницы пагинации, уникализируйте мета-теги на страницах пагинации (например добавить в конце текста "страница №", где "№" меняется в зависимости от порядкового номера страницы пагинации. Заголовок Н1 можно оставить только на первой странице пагинации, на остальных - убрать.
    4. Иногда, если садите частотный запрос на страницу раздела, можно добавить перед списком статей небольшой тематический текст после Н1, содержащий слова тематики, подсветки и маркетинг (несущий пользу пользователю).


    Вкратце вроде всё!)
    Ответ написан
    2 комментария
  • Стоит ли отображать рубрики в url?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    1. Path не должен быть пустой (чисто из адекватных соображений), т.е. страница site-name.ru/category-name не должна вести на 404 или пустую.
    2. Если руководствоваться логикой частотности запросов, то страницы категорий вполне могут стать посадками под высоко\среднечастотные.
    3. Иногда генерируемые урлы от рута (сразу за site-name.ru/) могут привести к крашам, так как могут быть слабо отрегулированы под уникальность, да или другие конфликты в url-менеджере могут возникнуть.
    Ответ написан
    3 комментария
  • Как натянуть свой шаблон на Wordpress движок?

    @shevan
    Приветствую.

    Написал недавно мини руководство о том, как конвертировать Html шаблон в рабочую тему движка

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

    ArsenyMatytsyn
    @ArsenyMatytsyn Куратор тега CSS
    Руководитель frontend направления, предприниматель
    Можно без grid. На десктопе ты можешь абсолютно спозиционировать поиск и под ним sidebar. Я уверен, что ты точно знаешь высоту поиска (или сейчас поймешь, что знаешь). И уж точно ширину.

    Ширину news и article можно регулировать на десктопе как угодно, хоть калькулировать на css, хоть margin-right в размер сайдбара задавать. Ну и рекомендую все же пользовать принцип mobile-first. Т.е. сперва описать правый layout, а потом дополнить его танцем с бубном, как я предложил.

    Еще ты можешь воспользоваться возможностями JS по манипуляции DOM, т.е. банально менять структуру при разном разрешении. Или вообще пойти дальше и заюзать какой фреймворк, но это не всегда уместно.
    Ответ написан
    4 комментария
  • Ссылка на чужой сайт, как влияет на SEO?

    @granty
    1. Если их лицензия требует активную гиперссылку, то все манипуляции с <noindex> и rel='nofollow' будут техническим нарушением лицензионного соглашения.

    2. В плане SEO ссылки с вашего сайта(теоретически) могут влиять как отрицательно, так и положительно, в зависимости на кого вы ссылаетесь. Посмотрите алгоритм HITS (дорвейшики верят в этот алгоритм, и всегда ставят ссылки на приличные сайты).


    По поводу атрибутов rel=nofollow, rel=external, rel=ugc и rel=sponsored, тега < noindex>, ссылок на яваскрипт и редиректных ссылок, есть 2 аспекта:

    - роботы ПС их видят и переходят по ним, потому, что задача роботов найти и проиндексировать все страницы в интернете.

    - некоторые вышеупомянутые атрибуты/теги/редиректы позволяют не передавать вес (статический и динамический) на акцептора. Но это не значит, что этот "вес" останется у вас на сайте. Вот, например, как сейчас работает rel=nofollow:
    679.gif

    Или вы лезете в дебри SEO и начинаете свято верить в кучу сопровождающих его мифов, либо не заморачиваетесь, и просто делаете сайты для людей. Ибо однозначного ответа на ваш вопрос - нет.
    Ответ написан
    1 комментарий
  • Какие файлы получает браузер пользователя?

    @66demon666
    По навыкам джун - по факту безработный
    Что подключено на странице, то и будет грузить - 500 кб
    Ответ написан
    1 комментарий
  • Ссылка на чужой сайт, как влияет на SEO?

    ArsenyMatytsyn
    @ArsenyMatytsyn
    Руководитель frontend направления, предприниматель
    Добавить еще rel="nofollow" и target="_blank". Ибо лицензия есть лицензия, а отдавать пользователя, да и робота не обязательно.

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

    rockon404
    @rockon404
    Frontend Developer
    Вам следует использовать классы или конструкторы, объявляя нужную переменную свойством экземпляра.

    Пример с использованием класса:
    class Slider {
      constructor() {
        this.myOwnProp = 'some value';
      }
    
      someMethod() {
        this.myOwnProp = 'some other value';
      }
    }


    Пример с использованием функции конструктора:
    function Slider() {
      this.myOwnProp = 'some value';
    }
    
    Slider.prototype.someMethod = function() {
      this.myOwnProp = 'some other value';
    }


    Экземпляры следует создавать с использованием ключевого слова new.
    Ответ написан
    Комментировать
  • Как к каждому элементу массива прикрепить функцию?

    potapchino
    @potapchino
    так происходит из-за того, что все ваши обработчики смотрят на одну и ту же i, т.к. она находится в их общйе области видимсти. когда цикл отработает она будет для всех обработчиков равна 2. чтобы исправить это, нужно замкнуть каждый обработчик на своей i.
    сделать это можно несколькими способами:
    1. инициализируйете счетчик через let:
    for(let i = 0; i < btn.length; i++) {...}

    2. вешайте обработчик внутри iife:
    for(var i = 0; i < btn.length; i++){
      (function(i) {
        btn[i].onclick = function(e){e.target.style.marginLeft = i * (10) + 'px';}
      })(i)
    }


    3. forEach()
    btn.forEach((el, i) => {
      el.onclick = function(e){e.target.style.marginLeft = i * (-100) + '%';}
    })
    Ответ написан
    1 комментарий
  • Как к каждому элементу массива прикрепить функцию?

    lastuniverse
    @lastuniverse
    Всегда вокруг да около IT тем
    Смотрите первый комментарий к вашему вопросу.
    Это будет работать потому что у вас i действует в области видимости вне тела цикла. А если ее объявить как let, то она будет доступна только в области видимости в которой объявленна (то есть в теле цикла) и каждую итерацию цикла будет создаваться новая i, значение которой сохраниться в добавляемой функции как замыкание.
    Ответ написан
    3 комментария
  • В чем разница между flex-basis и width?

    vetero4eg
    @vetero4eg
    Frontend
    Flex-basis задает начальный размер элемента относительно главной оси флекс-контейнера. В зависимости от направления оси может быть похожим и на width, и на height. Скорее даже на min-width и min-height. Меньше чем flex-basis элемент не будет, но может быть больше, в зависимости от размеров контейнера, окна...

    Flex-basis дает гораздо больше возможностей для красивой адаптации макета на мобильные разрешения, например когда контейнер перестает быть row и становится column, или наоборот.

    P.S. Как меня справедливо поправили ниже, flex-basis ведет себя не так как min-width/height в том случае, когда не помещается в контейнер, не "вылазит".
    Ответ написан
    5 комментариев
  • Зачем нужен Gulp?

    @artinnok
    бекенд-программист
    CSS и JS:
    К примеру, у вас имеется большое количество (Х штук) css или js файлов, которое вы подключаете на своих страницах посредством тэгов <link> и <src>.
    При загрузке страницы, браузер клиента будет отправлять X запросов к вашему серверу, а ваш сервер должен будет ответить на X запросов.
    Это:
    1. Тормозит загрузку страницы - будете ждать ответа от сервера
    2. Загружает ваш сервер

    С помощью сборщиков фронтэнда вы можете "склеить" все файлы в один - main.css и main.js, которые будут отдаваться 2 запросами с сервера. Также, вы сможете минифицировать CSS и JS. Под минификацией подразумевается уменьшение размеров файла на диске. Естественно, более легкий файлы будет быстрее прогружаться + минимальное количество запросов к серверу.

    IMG:
    К примеру, у вас имеется Х изображений размером 700 Кбайт. Клиенту надо будет загрузить 700 * X Кбайт. Если вы пропустите свои изображения через Gulp, то вы получите изображения с меньшим размером на диске и такого же качества, т.е. клиенту придется прогрузить примерно (500-600) * X Кбайт.
    Ответ написан
    1 комментарий
  • Как в CSS поменять параметры HTML тега?

    @Jumandjilos
    нет, data-атрибуты - это собственные атрибуты, в css их не изменить
    Ответ написан
    Комментировать
  • Magnific popup + Слайдер внутри. Как сделать?

    KickeRocK
    @KickeRocK
    FrontFinish
    Запускайте слайдер, когда открывается всплывашка
    $('.open-popup-link').magnificPopup({
         
      type:'inline',
      midClick: true, // Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
    });
    $('.open-popup-link').click(function(){
    var swiper = new Swiper('.swiper-container', {
                spaceBetween: 0,
                centeredSlides: true,
                autoplay: {
                  delay: 400,
                  disableOnInteraction: false,
                },
                pagination: {
                  el: '.swiper-pagination',
                  clickable: true,
                },
                navigation: {
                  nextEl: '.swiper-button-next',
                  prevEl: '.swiper-button-prev',
                },
              });
    });

    Вот так попробуйте.
    Ответ написан
    2 комментария