Блог

Пишу о PHP, Laravel и Yii2, фрилансе и работе веб–разработчика.

Как отключить eslint в vue-cli

13 января 2020

Судя по активности обсуждения issue на гитхабе, у многих есть проблема с отключением линтера при работе с vue-cli.

У нас это случилось во время работы с github-actions: мы собирали проект, прогоняли тесты. Локально всё собирается, а в github падает build. Начали выяснять — ругается eslint. Можно настроить всё, но это время. Быстрое решение — отключить линтер, чтобы билд заработал, а потом уже разобраться с линтером, как будет время.

Eslint можно отключить несколькими способами: файл .eslintignore, комментирование части кода в файле webpack.base.conf.js.

С помощью файла .eslintignore

Создаём файл. eslintignore в корне. Внутри файла пишем *, либо игнорим отдельные файлы или папки:

/build/
/config/
/dist/
/*.js
/test/unit/coverage/

Закомменировать настройки в webpack.base.conf.js

Находим в файле build/webpack.base.conf.js настройки, относящиеся к линтеру и комментируем их:

{
  test: /.(js|vue)$/,
  loader: 'eslint-loader',
  enforce: "pre",
  include: [resolve('src'), resolve('test')],
  options: {
    formatter: require('eslint-friendly-formatter')
  }
},

Как сделать редирект в Vue

9 января 2020

Эта публикация является любительским переводом статьи «How to Redirect in Vue» от Майкла Тиссена.

Содержание

  1. Редирект на внутреннюю страницу
    1. Чистый Vue (без Vue Router)
      1. Vue Router
      2. Редирект на внешнюю страницу
        1. Чистый Vue (без Vue Router)
          1. Vue Router
          2. Заключение

            На обычных страницах мы можем ссылаться на другие страницы с помощью указания ссылки через a-тег:

            <a href="www.google.com">Google</a>

            Если вы используете Vue Router, вы будете использовать специальный компонент RouterLink:

            <RouterLink :to="www.google.com">Google</RouterLink>

            Но что делать, если вы хотите сделать редирект программно, без использования тега для ссылки?

            Если вы используете Vue Router, то вы просто подставите ссылку в компонент роутера, в метод push:

            this.$router.push('www.yoursite.com/blog')

            В этой заметке мы рассмотрим все способы редиректа на внутренние и внешние страницы. Разберём случаи использования Vue с Vue Router и без него.

            Читать далее

            26 советов для Vue, которые сэкономят ваше время

            28 ноября 2019

            Эта публикация является любительским переводом статьи «26 Time Saving Tips for Vue» от Майкла Тиссена.

            Никто не любит тратить своё время зря. При написании приложений на Vue вы можете потратить лишнее время на неправильные подходы. Новичку, а порой и опытному разработчику, не всегда известно, что станет камнем преткновения. В этой статье вы узнаете 26 полезных советов о разработке Vue-приложений, которые сэкономят ваше время и нервы!

            Читать далее

            Как в Blade вывести переменную Vue

            31 октября 2019

            Иногда возникает необходимость написать что-то вроде {{ $route.name }} внутри blade-шаблона в Laravel-приложении. Laravel тут же поругается, что такой переменной нет. Выход такой:

            <div class="custom-block">
    @{{ $route.name }}
    ...
</div>

            Используйте синтаксис @{{ }} для такой задачи.

            Наложение части (1-2px) предыдущего элемента в текущий слайд в Owl-carousel

            22 октября 2019

            При вёрстке возникла ситуация, когда в owl-carousel показывалась полоска в 1−2 пикселя от предыдущего слайда, при этом owl-stage имел свойство display: flex, чтобы высота всех элементов была 100%.

            Справа видно вылезающий блок со следующим изображением

            Исправляется всё просто — надо убрать внутри owl-stage псевдо-элемент :after:

            .owl-carousel .owl-stage:after {
  content: none;
}

            Обсуждение этой проблемы есть и в официальном репозитории owl-carousel.

            Ошибка в регулярных выражениях роутов Yii2 в PHP7.3

            3 октября 2019

            Недавно занимался отладкой старого приложения на Yii2 и встретил странную ошибку:

            yiibaseErrorException: preg_match(): Compilation failed: invalid range in character class at offset 376 in .../vendor/yiisoft/yii2/web/UrlRule.php

            Понятно: что-то не так с роутами в конфигах. Отследил, с какими конкретно роутами проблема, и вот что оказалось:

            preg_match('/[w-.]+/', ''); // Этот код не будет работать в PHP7.3
preg_match('/[w\-.]+/', ''); // Это работает в PHP7.3, необходимо экранировать дефис

            Дело в том, что в PHP7.3 обновился движок регулярных выражений с PCRE на PCRE2. Вот выдержка из списка обновлений PHP7.3:

            With PCRE2_EXTRA_BAD_ESCAPE_IS_LITERAL set, escape sequences such as \s which are valid in character classes, but not as the end of ranges, were being treated as literals. An example is [_-\s] (but not [\s-_] because that gave an error at the start of a range). Now an «invalid range» error is given independently of PCRE2_EXTRA_BAD_ESCAPE_IS_LITERAL.

            Почему в выдаче гугла больше нет звёзд рейтинга? Микроразметка для статей

            22 сентября 2019

            Раньше можно было добавить возможность голосования к статье, разбавить всё это микроразметкой, и гугл в поисковой выдаче показывал звёзды рейтинга в сниппете, что повышало количество кликов (CTR). Сейчас гугл обновил правила. По новым правилам, звёзды будут отображаться только у следующих типов материалов:

            • книга,
            • курс,
            • мероприятие,
            • игра,
            • инструкция «how-to»,
            • локальный бизнес,
            • фильм,
            • эпизод сериала,
            • музыкальный плейлист,
            • музыкальная запись,
            • рецепт,
            • продукт (товар),
            • приложение/компьютерная программа.

            В списке нет статей, записей в блогах. У всех таких материалов звёзды пропали в выдаче, а инструмент проверки микроразметки от гугла выдаёт ошибку «Article/BlogPosting/Person — недопустимый тип целевого объекта для свойства itemReviewed».

            Что делать с этим?

            1. Починить микроразметку;
            2. Следить за изменениями от Гугла. Вероятно, они в ближайшее время ещё доработают свой механизм.

            Важно! Не стоит пытаться обмануть Гугл, манипулируя микроразметкой. За это могут прилететь ручные меры — об этом ниже.

            Почему у некоторых конкурентов есть звёзды в статьях?

            Некоторые сайты некорректно размечают часть статейных страниц, помечая их как Product. Внутри Product размечают рейтинг, а Гугл думает что всё хорошо и показывает звёзды.

            Особенно сильно этим выделяются сайты, которые используют виджет комментариев Cackle. Этот виджет выводит комментарии с микроразметкой звёзд, но при этом говорит, что на странице Product, а не Article.

            По правилам Гугла это является нарушением. На форуме тоже об этом написали. Кратко: за такое нарушение прилетают ручные меры. Скорее всего, ваши конкуренты либо получат ручные меры, либо просто лишатся звёзд в ближайшее время. Если же всё останется как есть, то скоро на всех сайта будут виджеты Cackle, а тогда звёзды будут у всех или ни у кого :-).

            Как скрыть шаблон Vue.js пока он не отрендерится. Директива [v-cloak]

            24 августа 2019

            Бывают ситуации, когда вы загружаете страницу с каким-то компонентом Vue, и при этом страница при загрузке «прыгает»: сначала показывает синтаксис шаблона Vue, а потом рендерит сам шаблон. Вот пример:

            Страница загрузилась, а компонент Vue ещё не отрендерился
            Читать далее

            В чём разница между props и data в Vue.js

            22 июля 2019

            Во Vue предусмотрено два способа хранения данных в компоненте: props и data.

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

            Так в чём же отличие между props и data?

            Data — это приватное хранилище любого компонента, в котором вы можете хранить любые данные.

            Props — то, как вы передаёте данные из родительского компонента в дочерний.

            В этой статье вы узнаете:

            • Чем являются props, и почему они нужны только для передачи данных вниз;
            • Для чего используется data;
            • Что такое реактивность;
            • Как избежать конфликта имён между props и data;
            • Как одновременно использовать props и data вместе, чтобы получить пользу 💰
            Читать далее

            Прокрутка яндекс-карты на мобильных touch устройствах

            28 июня 2019

            Бывает так, что вы подключаете на странице яндекс-карту, которая занимает всю ширину экрана. Это создаёт проблему прокрутки на устройствах с touch-экранами: вместо прокрутки страницы вы начинаете скролить карту.

            В яндекс-картах есть несколько опций, которые помогут вам управлять этим:

            map.behaviors.disable('multiTouch');
map.behaviors.disable('drag');
map.behaviors.disable('scrollZoom');