Все сервисы Хабра

Сообщество IT-специалистов

Ответы на любые вопросы об IT

Профессиональное развитие в IT

Удаленная работа для IT-специалистов

Что такое киберугрозы нулевого дня и как с ними бороться
Войти на сайт
  • Все вопросы
  • Все теги
  • Пользователи

Хабр Q&A — вопросы и ответы для IT-специалистов

Получайте ответы на вопросы по любой теме из области IT от специалистов в этой теме.

Узнать больше
другие проекты хабра
  • Хабр
  • Карьера
  • Фриланс
Задать вопрос
mtvphnx

Матвей Феникс

Двигаю пиксели, играюсь со шрифтами
  • 22
    вклад
  • 8
    вопросов
  • 37
    ответов
  • 46%
    решений
Лайки
  • Информация
  • Ответы
  • Вопросы
  • Комментарии
  • Подписки
  • Нравится
  • Достижения
  • Как вывести количество слайдов (renderFration) в слайдере Swiper в виде "1 - 4 из 12"?

    0xD34F
    0xD34F @0xD34F Куратор тега JavaScript
    function updateFraction(slider) {
      const { params, activeIndex } = slider;
    
      slider.$el
        .find(`.${params.pagination.currentClass}`)
        .text(`${activeIndex + 1} - ${activeIndex + params.slidesPerView}`);
    
      slider.$el
        .find(`.${params.pagination.totalClass}`)
        .text(slider.slides.length);
    }

    on: {
      init() {
        setTimeout(updateFraction, 0, this);
      },
      slideChange() {
        updateFraction(this);
      },
      resize() {
        updateFraction(this);
      },
    },

    https://jsfiddle.net/1xLrtyqw/
    Ответ написан более года назад
    Комментировать
    Нравится 2 Комментировать
  • Как сделать слайдер с такими эффектами?

    RAX7
    RAX7 @RAX7
    К ScrollMagic можно такую прокрутку прикрутить.
    Ответ написан 28 июн. 2020
    6 комментариев
    Нравится 1 6 комментариев
  • В чем разница между max-width и min-width?

    gangstarcj
    Сергей @gangstarcj
    В чем разница между максимум и минимум?)
    screen не обязательно вроде
    Ответ написан 29 мая 2020
    Комментировать
    Нравится 1 Комментировать
  • Как изучать seo в 2019?

    irynashvets
    Ирина Швец @irynashvets
    1. Прочитать рекомендации от поисковых систем:
      https://yandex.ru/support/webmaster/recommendation...
      https://support.google.com/webmasters/answer/74511...
      https://support.google.com/webmasters/answer/35769...

    2. Пройти бесплатный или платный курс для новичков, например, один этих https://siteclinic.ru/blog/raznoe/kursy-internet-m...

    3. Насмотреться вебинаров, начинаться блогов и каналов и чатов в телеграм, + пробовать делать свой проект.

    4. Пойти SEO Junior-ом в агентство.

    5. Профит :)
    Ответ написан более года назад
    Комментировать
    Нравится 2 Комментировать
  • Как изучать seo в 2019?

    Павел Семенов @Padonag
    Начните с этого плана, там много информации не про SEO, но то что есть достаточно грамотное.
    https://www.it-agency.ru/academy/seo-plan/

    Посмотрите следующие видео, желательно подпишитесь на Топ Эксперт, часто достаточно неплохие, хоть и весьма базовые вебинары:
    https://youtu.be/qKApycjP8TE
    https://youtu.be/H0Pb0SWt_vc

    Подпишитесь на блоги и желательно прочитайте все основные статьи :
    shakin.ru
    https://devaka.ru/

    Это базовые вещи, более глубокие знания сможете получить уже из профильных блогов и семинаров.
    Ответ написан более года назад
    Комментировать
    Нравится 1 Комментировать
  • Как изучать seo в 2019?

    lotse8 @lotse8
    Начните с первоисточников.
    https://www.google.com/intl/ru/webmasters/#?modal_...
    https://webmaster.yandex.ru/welcome/
    Ответ написан более года назад
    Комментировать
    Нравится 4 Комментировать
  • Как изучать seo в 2019?

    erge
    Сергей c0re @erge
    вот, посмотрите, может найдете что-то полезного:
    https://www.youtube.com/channel/UCgxPPiH0izLKgtGRJ...
    https://www.youtube.com/channel/UCJRfAfjK_WMcOQKQL...
    https://www.youtube.com/channel/UCdshJTyVfjp1GZ4dD...
    Ответ написан более года назад
    Комментировать
    Нравится 1 Комментировать
  • Как решить проблему с отображением слайдера Slick?

    PerfectLab @PerfectLab
    Попробуйте инициализировать слайдер после клика на таб:
    $(".slider").slick('reinit');
    Ответ написан более трёх лет назад
    8 комментариев
    Нравится 19 8 комментариев
  • Верстка с нуля: какие основные этапы работы?

    Vlad_IT
    Владимир Проскурин @Vlad_IT Куратор тега Вёрстка
    Front-end разработчик
    Использую vscode+webpack+pug+scss+бэм. Из физических инструментов, основной моник: lg ultrawide 29um69g, рядом прикручен моник от ноутбука повешенный вертикально, подключенный через универсальный скаллер.

    0) Запускаю Spotify :-)

    1) Произвожу установку всех необходимых модулей для сборки. В моем случае у меня набор конфигураций для webpack (отдельные файлы для pug, scss, static и.т.д., выбираю что нужно).

    2) Запускаю avocode, загружаю в него макет. Определяю в нем переменные (в то же время записываю их, чтобы сразу кинуть в scss файл) для цветов, размеров шрифтов и.т.д. чтобы при получении кусочков кода из него, он сразу расставлял переменные.

    3) Запускаю VS Code, открываю нужную папку.

    4) Пишу размету на Pug. Пишу с БЭМ, если встречаю повторяющийся блок, то открываю файл _mixins.pug, в который пишу миксины для повторяющихся блоков, например товаров, пунктов меню, каких-то блоков и.т.д. Pug умеет делать циклы, это ускоряет сильно.

    5) Когда HTML готов, начинаю делать каркас. Если дизайн сделан по сетке, определяю контейнеры, колонки, строки в свои классы (не пишу в html тучи классов аля col-md-6, а пишу в SCSS инклуды в нужные мне блоки, типа @include make-col(2) и.т.д.).

    6) Экспортирую картинки из Avocode. Очень делается просто, указываю папку и просто кликаю экспорт и ввожу название файла и расширения. Преимущественно для иконок использую svg, если нет svg, то ищу эту иконку в интернете (дизайнеры редко рисуют иконки сами, но зато любят вставлять их не в векторе). Если иконка простая, могу сам ее в inkscape обвести, ну и если нет, то экспортирую png в 2х размере (благо авокод это позволяет, если конечно дизайнер не вставил в исходном маленьком размере). Когда есть контакт с дизайнером, трясу его, ибо растр это плохо для иконок.

    7) Пишу стили блоков из страницы. На этом этапе можно на втором монике параллельно смотреть футураму или
    Арчера :-) Но чаще на широком монике слева браузер, справа VS Code, а на втором монике Avocode (может меняться местами с браузером). Мысленно нарезаю страницу на блоки. Для каждого блока (БЭМ) создаю отдельный scss файл (кто-то даже для элемента создает, но мне лень), из него сразу выписываю все селекторы. Иногда могу сначала выписать все селекторы со страницы (но так лучше не делать, т.к. во время работы может потребоваться изменить что-то в разметке), но чаще для одного блока выполняю этот пункт и за ним сразу выполняю пункт 8, потом для нового блока опять 7 и 8 и.т.д.

    8) Пишу css код вместе с Avocode, у него беру нужные мне параметры (а он уже подставил в них переменные), и вставляю в мой код. И параллельно сверяю со скрином макета используя вот это расширение https://chrome.google.com/webstore/detail/perfectp...

    9) Пишу адаптив. Я не могу привыкнуть к методологии mobile-first, поэтому пишу всегда сначала полную версию сайта. Я понимаю, что это чревато всякими проблемами и это типа не модно, но мне норм.

    10) Медиа-запросы пишу прямо в блоках, для каждого блока/элемента/модификатора может быть отдельный медиа-запрос. Но для начала определяю breakpoint'ы для разных экранов (чтобы их не было сотни разных), если использую Bootstrap, то беру его breakpoint'ы.

    11) Добавляю анимашки. Даже если заказчик не просил отдельно (и если не указал отдельно, что нельзя), он все равно будет доволен, а с animate.css+onscreen.js это вообще работа 10 минут. Сложные анимации обговариваю отдельно, чтобы не сделать ненужную работу.

    11) Все снова сверяю, пишу скрипты где надо. Для слайдеров в 99% случаев подходит slick (с доработками конечно, но там хорошее API), для других случаев могу написать свой.

    12) Сдаю заказчику и жду ответа сидя на тостере/пикабу.

    Это чисто мой опыт, опыт фрилансера, не знаю, как делают другие и не могу на 100% утверждать что это 100% правильный способ. Я так и не смог заставить свой конфиг webpack правильно вставлять спрайты svg.
    Надеюсь чем-то поможет мой ответ.
    Ответ написан более двух лет назад
    7 комментариев
    Нравится 116 7 комментариев
  • Как сделать горизонтальное слайд-меню?

    Camaro67 @Camaro67
    Помог? - "Отметить решением"
    kenwheeler.github.io/slick
    Ответ написан более двух лет назад
    Комментировать
    Нравится 3 Комментировать
  • Как выровнять пункты списка?

    uiworks
    uiworks @uiworks
    https://masonry.desandro.com/
    Ответ написан более двух лет назад
    1 комментарий
    Нравится 1 1 комментарий
  • Как убрать лишние пробелы в bemto?

    werty1001
    Олег @werty1001
    undefined
    Возьмите мое решение для bempug - https://github.com/werty1001/bempug/issues/1
    Ответ написан более двух лет назад
    3 комментария
    Нравится 1 3 комментария
  • Существуют ли библиотеки js для определени клиента( android,ios,desktop)?

    UnluckySerivelha
    Dymok @UnluckySerivelha
    hgoebl.github.io/mobile-detect.js
    Ответ написан более двух лет назад
    Комментировать
    Нравится 3 Комментировать
Оценили как «Нравится»
Самые активные сегодня
  • Василий Банников
    • 18 ответов
    • 0 вопросов
  • justhostRU
    justhostRU
    • 9 ответов
    • 0 вопросов
  • pindschik
    pindschik
    • 8 ответов
    • 0 вопросов
  • SoreMix
    SoreMix
    • 8 ответов
    • 0 вопросов
  • Drno
    • 8 ответов
    • 0 вопросов
  • StarinaDims
    Дмитрий Ларин
    • 7 ответов
    • 0 вопросов
  • © Habr
  • О сервисе
  • Обратная связь
  • Блог

Войдите на сайт

Чтобы задать вопрос и получить на него квалифицированный ответ.
Войти через центр авторизации