Блог

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

Как настроить уведомления из Github Actions в Discord

Настраиваем уведомления о событиях через Github Actions в Discord. Мы с командой стали использовать Discord для рабочей коммуникации, в одном из каналов хотели настроить уведомления из Github-репозитория о результатах работы CI/CD.

Что мы сделаем: когда появился новый пул-реквест или появились коммиты в открытом пул-реквесте, нужно прогнать тесты и отправить результат в Дискорд.

Для работы с Дискордом из Гитхаб Экшнс будем использовать готовый экшн appleboy/discord-action@master. Делаем вот так в файле .github/workflows/main.yml:

name: Testing
on: [pull_request]

jobs:
  testing:
    name: Testing
    runs-on: ubuntu-18.04
    steps:
      - name: Send start notification to Discord
        uses: appleboy/discord-action@master
        with:
          webhook_id: ${{ secrets.DISCORD_WEBHOOK_ID }}
          webhook_token: ${{ secrets.DISCORD_WEBHOOK_TOKEN }}
          color: "#8b9b9c"
          username: "GitHub Bot"
          message: |
            Tests started by 👤 ${{ github.actor }}
            From `${{ github.head_ref }}` to `${{ github.base_ref }}`
            Event `${{ github.event_name }}`
            PR ${{ github.event.number }}: ${{ github.event.pull_request.url }}

После этого нужно добавить сикреты в раздел Secrets в настройках репозитория в Гитхабе. Поскольку сикреты содержат в себе информацию о вебхуке Дискорда, то сначала создадим вебхук. Переходим в настройки сервера, идём в вебхуки и создаём вебхук:

Создаём вебхук в Дискорде

После того, как сделали вебхук — копируйте ссылку и переходите по ней. Ссылка выглядит примерно так: https://discordapp.com/api/webhooks/{id}/{token}. Копируем из ссылки id и token, используем их для добавления сикретов в настройках репозитория в гитхабе.

После создания сикретов создайте пул-реквест, проверьте в разделе Actions в Гитхабе, что экшн заработал. После этого проверьте, что уведомление пришло в канал. Выглядит в результате это так:

Результат работы уведомлений в Дискорде

Правильный способ заставить Vue перендерить компонент

Эта публикация является любительским переводом статьи «The correct way to force Vue to re-render a component» от Майкла Тиссена.

Иногда бывает так, что реактивности Vue не хватает, и вам нужно перерендерить компонент. Или вам нужно сбросить DOM и начать сначала.

Так как же правильным образом заставить Vue перерендерить компонент?

Ответ прост. Правильный путь — использовать :key в компоненте. Когда вам нужно перерендерить компонент, вы просто меняете значение ключа и Vue обновит компонент.

Довольно просто, не так ли? Есть также и другие способы:

  • Худший вариант: обновить всю страницу,
  • Плохой вариант: использовать v-if хак,
  • Чуть лучше: использовать встроенный в Vue метод forceUpdate,
  • Лучший вариант: использовать изменение ключа.

Обратите внимание! Если вы столкнулись с ситуацией, в которой вам нужно перерендерить компонент, вероятно, есть более правильный способ решить задачу. Скорее всего, вы не до конца разобрались с чем-то из этого: 1. Реактивность Vue, 2. Computed-свойства, 3. Watch-свойства, 4. Не используете :key атрибут для v-for.

Читать далее

Как исправить ошибку «data-vocabulary.org schema deprecated» в Гугл-консоли

Ребята из Гугл недавно анонсировали, что скоро откажутся от поддержки словаря data-vocabulary. Из-за этого многие в консоли начали получать ошибки, связанные с этим. Пока что — это предупреждения, чтобы успеть с этим что-то сделать. Полное отключение запланировано на начало апреля 2020:

«В связи с ростом популярности schema.org, мы решили сфокусироваться на одном варианте микроразметки. С 6-го апреля 2020 data-vocabulary разметка больше не будет отображаться в расширенным сниппетах Гугл.»
Читать далее

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

Судя по активности обсуждения 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

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

На обычных страницах мы можем ссылаться на другие страницы с помощью указания ссылки через 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, которые сэкономят ваше время

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

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

Читать далее

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

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

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

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

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

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

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

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

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

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

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

Недавно занимался отладкой старого приложения на 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.

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

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

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

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

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

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

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

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

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

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

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