#react #typescript

---
description: Правила для Front-End разработки на React и TypeScript
auto_attach:
  - "**/*.tsx"
  - "**/*.ts"
  - "**/*.jsx"
  - "**/*.js"
  - "**/*.css"
  - "**/*.scss"
---

Вы - Старший Front-End Разработчик и Эксперт в ReactJS, NextJS, JavaScript, TypeScript, HTML, CSS и современных UI/UX фреймворках (например, Material-UI, Mantine UI, Shadcn, Radix). Вы внимательны, даете детальные ответы и блестяще рассуждаете. Вы тщательно предоставляете точные, фактические, продуманные ответы и гениальны в анализе.

- Тщательно и точно следуйте требованиям пользователя.
- Сначала думайте пошагово - опишите ваш план построения в псевдокоде, детально расписанный.
- Подтвердите, затем пишите код!
- Всегда пишите корректный, соответствующий лучшим практикам, следующий принципу DRY (Don't Repeat Yourself), безошибочный, полностью функциональный и рабочий код, который также должен соответствовать правилам, перечисленным ниже в Руководстве по Реализации Кода.
- Фокусируйтесь на простоте и читаемости кода, а не на производительности.
- Полностью реализуйте всю запрошенную функциональность.
- Не оставляйте TODO, заглушек или отсутствующих частей.
- Убедитесь, что код завершен! Тщательно проверьте финальную версию.
- Включите все необходимые импорты и обеспечьте правильное именование ключевых компонентов.
- Будьте кратки. Минимизируйте любой другой текст.
- Если вы считаете, что может не быть правильного ответа, скажите об этом.
- Если вы не знаете ответ, скажите об этом вместо того, чтобы гадать.
- Тебе ЗАПРЕЩЕНО изменять типы TypeScript в файлах *.d.ts без непосредственного указания
- Тебе ЗАПРЕЩЕНО использовать экспорт или импорт типов в любом случае, как бы тебе это не хотелось.

### Среда Разработки
Пользователь задает вопросы о следующих языках программирования:
- ReactJS
- NextJS
- JavaScript
- TypeScript
- HTML
- CSS

### Руководство по Реализации Кода
Следуйте этим правилам при написании кода:
- Используйте ранние возвраты (early returns) везде, где это возможно, для повышения читаемости кода.
- Используйте "class:" вместо тернарного оператора в class тегах везде, где это возможно.
- Используйте описательные имена переменных и функций/констант. Также функции-обработчики событий должны иметь префикс "handle", например "handleClick" для onClick и "handleKeyDown" для onKeyDown.
- Реализуйте функции доступности на элементах. Например, тег должен иметь tabindex="0", aria-label, on:click и on:keydown, а также аналогичные атрибуты.
- Используйте const вместо функций, например, "const toggle = () =>". Также определяйте тип, если это возможно.

Сообщение Файлы правил разработки для Cursor появились сначала на ConsultApp.ru.

В целом @container запросы работают так же, как @media запросы, только не к странице, а к определенному особым способом родительскому блоку.

Достаточно указать блоку свойство container-type (size, inline-size, or normal) и он становится контейнером. Так же можно задать ему имя, для уточнения запросов.

.post {
  container-type: inline-size;
  container-name: sidebar;
}

Базовый синтаксис

Основываясь на mdn, получаем такой синтаксис запроса:

@container <container-condition># {
  <stylesheet>
}

/* Пример: */
/* multiple queries in a single condition */
@container (width > 400px) and style(--responsive: true) {
  h2 {
    font-size: 1.5em;
  }
}

Самое интересное тут, что мы можем делать запросы не только о ширине, высоте. Функционал намного шире, мы можем описаться на стили и даже на определенные переменные! Те фактически можем управлять внутренним поведением блока, переопределяя CSS переменные в зависимости от необходимости например.

Новые единицы изменения

Для определения высоты и ширины относительно контейнера появились новые размерности:

• cqw: 1% ширины контейенра;
• cqh: 1% высоты контейнера;
• cqi: 1% inline размер контейнера;
• cqb: 1% block размер контейнера;
• cqmin: меньшее из cqi or cqb;
• cqmax: большее из cqi or cqb.

Пример

В приведенном примере мы постарались раскрыть базовый вариант использования контейнерных запросов на базе поведения блока .item, который опираясь на ширину и переменную, определяемую для одного из родителей, меняет свое поведение. Однако style() работает еще не во всех браузерах, проверяйте совместимость перед использованием в реальных задачах. (работает в Chrome)

  .testWrapper {
    display: flex;
    flex-flow: row wrap;
    gap: 5px;
  }
  .items {
    container-type: inline-size;
    border: 1px solid black;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    gap: 5px;
    margin: 10px;
  }
  .items1 {
    width: 300px;
  }
  .items2 {
    width: 200px;
  }
  .items3 {
    width: 100px;
  }

  .thumbnail {
    background-color: rgb(96, 195, 108);
  }
  .text {
    background-color: rgb(237, 57, 87);
  }
  .header {
    background-color: rgb(11, 179, 235);
  }

  .item {
    width: 100%;
    background-color: rgb(54, 54, 54);
    display: grid;
    gap: 5px;
  }

  .item__var2 {
    --variant2: true;
  }

  .item div {
    min-width: 25px;
    min-height: 25px;
  }

  .item div:last-child {
    display: none;
  }

  @container (width > 100px) and (width < 201px) {
    .item {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      width: calc(50cqi - 2.5px);
    }
    .item div:last-child {
      grid-column: 1 / span 2;
      display: block;
    }
  }

  @container (width > 100px) and (width < 201px) and style(--variant2: true) {
    .item div:last-child {
      grid-row: 1 / span 2;
      grid-column: 1;
      display: block;
    }
  }

  @container (width > 200px) {
    .item {
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      width: 20cqi;
    }
    .item div:last-child {
      display: block;
    }
  }

<div class="testWrapper">
  <div class="items items1">
    <div class="item">
      <div class="thumbnail"></div>
      <div class="header"></div>
      <div class="text"></div>
    </div>
    <div class="item">
      <div class="thumbnail"></div>
      <div class="header"></div>
      <div class="text"></div>
    </div>
    <div class="item">
      <div class="thumbnail"></div>
      <div class="header"></div>
      <div class="text"></div>
    </div>
    <div class="item">
      <div class="thumbnail"></div>
      <div class="header"></div>
      <div class="text"></div>
    </div>
  </div>
  <div class="items items2">
    <div class="item">
      <div class="thumbnail"></div>
      <div class="header"></div>
      <div class="text"></div>
    </div>
    <div class="item">
      <div class="thumbnail"></div>
      <div class="header"></div>
      <div class="text"></div>
    </div>
    <div class="item">
      <div class="thumbnail"></div>
      <div class="header"></div>
      <div class="text"></div>
    </div>
    <div class="item">
      <div class="thumbnail"></div>
      <div class="header"></div>
      <div class="text"></div>
    </div>
  </div>
  <div class="items items2 item__var2">
    <div class="item">
      <div class="thumbnail"></div>
      <div class="header"></div>
      <div class="text"></div>
    </div>
    <div class="item">
      <div class="thumbnail"></div>
      <div class="header"></div>
      <div class="text"></div>
    </div>
    <div class="item">
      <div class="thumbnail"></div>
      <div class="header"></div>
      <div class="text"></div>
    </div>
    <div class="item">
      <div class="thumbnail"></div>
      <div class="header"></div>
      <div class="text"></div>
    </div>
  </div>
  <div class="items items3">
    <div class="item">
      <div class="thumbnail"></div>
      <div class="header"></div>
      <div class="text"></div>
    </div>
    <div class="item">
      <div class="thumbnail"></div>
      <div class="header"></div>
      <div class="text"></div>
    </div>
    <div class="item">
      <div class="thumbnail"></div>
      <div class="header"></div>
      <div class="text"></div>
    </div>
    <div class="item">
      <div class="thumbnail"></div>
      <div class="header"></div>
      <div class="text"></div>
    </div>
  </div>
</div>

Итого

В заключении можно отметить, что мы рассмотрели контейнерные запросы. Очевидно они отлично подходят для отображения различных карточек например, в том числе товарных. Модуль можно написать таким образом, что независимо от ширины экрана, он будет менять отображение относительно своего родителя.

Сообщение CSS Container Query: Новый шаг в адаптивность и независимость блоков страницы появились сначала на ConsultApp.ru.

declare interface Array<T> {
  nod(): number;
}

Array.prototype.nod = function () {
  let x = this[0];
  for (let i = 1; i < this.length; i++) {
    let y = this[i];
    while (x && y) x > y ? (x %= y) : (y %= x);
    x += y;
  }
  if (typeof x !== "number" || isNaN(x))
    throw new TypeError("Return type is not 'number'.");

  return x;
};

console.log([1.5, 2, 5, 6, 7].nod()); // 0.5

Array.prototype.nod = function () {
  let x = this[0];
  for (let i = 1; i < this.length; i++) {
    let y = this[i];
    while (x && y) x > y ? (x %= y) : (y %= x);
    x += y;
  }

  if (typeof x !== "number" || isNaN(x))
    throw new TypeError("Return type is not 'number'.");

  return x;
};

console.log([1.5, 2, 5, 6, 7].nod()); // 0.5

Сообщение Наименьший общий делитель JavaScript, TypeScript появились сначала на ConsultApp.ru.

Здесь мы рассмотрим 2 момента, а именно невозможность перевода в JSON формат функций и символов, а так же ошибку/несоответствие при восстановлении данных на примере объекта типа Date

Введение

Возьмем объект со свойствами разных типов данных и методом:

const ticket = {
  isValid: true, // boolean
  price: 2000.0, // number
  cityFrom: "MSK", // string
  cityTo: "SPB", // string
  date: new Date(), // Date()
  *[Symbol.iterator]() {
    for (const item of Object.entries(this)) yield item;
  }, // function
};
console.dir(ticket);
// {
//     isValid: true,
//     price: 2000,
//     cityFrom: 'MSK',
//     cityTo: 'SPB',
//     date: 2024-06-27T10:05:33.522Z,
//     [Symbol(Symbol.iterator)]: [GeneratorFunction: [Symbol.iterator]]
// }

Так же нам для наглядности понадобиться функция проверки типов свойств. Для нашего объекта она выдает ожидаемые значения typeof:

function testTypes(obj) {
  for (const k in obj) console.log(k, typeof obj[k]);
}

testTypes(ticket);
// isValid boolean
// price number
// cityFrom string
// cityTo string
// date object

Стандартное преобразование

Обычно объект преобразуют напрямую, следующий код показывает сопутствующие моменты:

• При упаковке мы потеряли метод Symbol(Symbol.iterator);
• При восстановлении теряется тип данных даты, она становится строкой.

{
  const json = JSON.stringify(ticket);
  console.log(json);
  // json = {"isValid":true,"price":2000,"cityFrom":"MSK","cityTo":"SPB","date":"2024-06-27T10:05:33.522Z"}
  // Здесь мы встречаемся с первым моментом. Видно, что не все упаковалось, функцию мы уже потеряли.

  const parsedObject = JSON.parse(json);
  console.dir(parsedObject);
  // {
  //     isValid: true,
  //     price: 2000,
  //     cityFrom: 'MSK',
  //     cityTo: 'SPB',
  //     date: '2024-06-27T10:05:33.522Z'
  // }

  testTypes(parsedObject);
  //   Если проверить типы, что мы увидим, 
  //   что дата теперь не объект, а строка.
  //   isValid boolean
  //   price number
  //   cityFrom string
  //   cityTo string
  //   date string
}

JSON.stringify()

При упаковке, мы можем передать методу JSON.stringify второй параметр в виде массива ключей, которые надо экспортировать в json.

const json = JSON.stringify(ticket, ["isValid", "price", "cityFrom", "date"]);
console.log("json:", json);
// json: {"isValid":true,"price":2000,"cityFrom":"MSK","date":"2024-06-27T11:18:08.648Z"}
// Проблема с датой осталась, но мы
// можем фильтровать нужные данные для передачи

JSON.parse()

С методом JSON.parse все интересней, вторым аргументом можем передать функцию восстановления, с ее помощью мы сможем отслеживать интересующие нас поля и изменять их в процессе распаковки.

Пример функции восстановления для Date:

function R(k, v) {
  if (
    typeof v === "string" &&
    /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/.test(v)
  ) {
    return new Date(v);
  }
  return v;
}

Код с функцией восстановления будет выглядеть так:

{
  const json = JSON.stringify(ticket, ["isValid", "price", "cityFrom", "date"]);
  console.log("json:", json);
  // json: {"isValid":true,"price":2000,"cityFrom":"MSK","date":"2024-06-27T11:18:08.648Z"}
  // Проблема с датой осталась, но мы
  // можем фильтровать нужные данные для передачи

  // JSON.parse с функцией восстановления
  const recoveredObject = JSON.parse(json, function (k, v) {
    if (
      typeof v === "string" &&
      /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/.test(v)
    ) {
      return new Date(v);
    }
    return v;
  });

  console.dir(recoveredObject);
  //   {
  //     isValid: true,
  //     price: 2000,
  //     cityFrom: 'MSK',
  //     date: 2024-06-27T11:24:24.112Z
  //   }

  testTypes(recoveredObject);
  // isValid boolean
  // price number
  // cityFrom string
  // date object
}

Мы видим, что дата стала объектом, тем самым, который мы вернули в функции восстановления. Естественно ее можно расширить, для восстановления например собственных типов объекто, если у них реализован метод toJSON() и они свободно упаковываются методом JSON.stringify.

Итоговый код с комментариями

function testTypes(obj) {
  for (const k in obj) console.log(k, typeof obj[k]);
}
const ticket = {
  isValid: true, // boolean
  price: 2000.0, // number
  cityFrom: "MSK", // string
  cityTo: "SPB", // string
  date: new Date(), // Date()
  *[Symbol.iterator]() {
    for (const item of Object.entries(this)) yield item;
  }, // function
};
console.dir(ticket);
// {
//     isValid: true,
//     price: 2000,
//     cityFrom: 'MSK',
//     cityTo: 'SPB',
//     date: 2024-06-27T10:05:33.522Z,
//     [Symbol(Symbol.iterator)]: [GeneratorFunction: [Symbol.iterator]]
// }
testTypes(ticket);
// isValid boolean
// price number
// cityFrom string
// cityTo string
// date object

{
  const json = JSON.stringify(ticket);
  console.log(json);
  // json = {"isValid":true,"price":2000,"cityFrom":"MSK","cityTo":"SPB","date":"2024-06-27T10:05:33.522Z"}
  // Здесь мы встречаемся с первым моментом. Видно, что не все упаковалось, функцию мы уже потеряли.

  const parsedObject = JSON.parse(json);
  console.dir(parsedObject);
  // {
  //     isValid: true,
  //     price: 2000,
  //     cityFrom: 'MSK',
  //     cityTo: 'SPB',
  //     date: '2024-06-27T10:05:33.522Z'
  // }

  testTypes(parsedObject);
  //   Если проверить типы, что мы увидим, что дата теперь не объект, а строка.
  //   isValid boolean
  //   price number
  //   cityFrom string
  //   cityTo string
  //   date string
}

{
  const json = JSON.stringify(ticket, ["isValid", "price", "cityFrom", "date"]);
  console.log("json:", json);
  // json: {"isValid":true,"price":2000,"cityFrom":"MSK","date":"2024-06-27T11:18:08.648Z"}
  // Проблема с датой осталась, но мы
  // можем фильтровать нужные данные для передачи

  // JSON.parse с функцией восстановления
  const recoveredObject = JSON.parse(json, function (k, v) {
    if (
      typeof v === "string" &&
      /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/.test(v)
    ) {
      return new Date(v);
    }
    return v;
  });

  console.dir(recoveredObject);
  //   {
  //     isValid: true,
  //     price: 2000,
  //     cityFrom: 'MSK',
  //     date: 2024-06-27T11:24:24.112Z
  //   }

  testTypes(recoveredObject);
  // isValid boolean
  // price number
  // cityFrom string
  // date object
}

Сообщение Некоторые тонкости методов JSON stringify и parse в JavaScript появились сначала на ConsultApp.ru.

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

Однако есть один момент. Теги <html>, <head> читаются раньше, плюс в CSS есть псевдоэлементы, нас интересует ::before.

Псевдоэлементы ::before, ::after — это часть селекторов CSS, которые используют для вставки содержимого, которого нет в исходном коде.

Решение

1. Добавляем стилизованный псевдоэлемент ::before на тег <html> с нужным нам элементом-прелоадером;
2. Отлавливаем в JS момент загрузки страницы (2 варианта). Убираем отображение загрузки, с помощью добавления класса конца загрузки тегу <html>.

Подробное описание

Рассмотрим пример добавление прелоадера на примере нашего сайта.

Добавляем в <head>, напрямую или через файл, стили:

html::before {
  background-size: 150px !important;
  opacity: 1;
  content: "";
  display: block;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("/logo-animate.svg") no-repeat center, #fff;
  transition: opacity 0.3s ease-in;
}

html.loaded::before {
  opacity: 0;
  pointer-events: none;
}

Здесь видно, что в нашем случае content — пустая строка. Мы позиционируем по центру background с SVG лоадером, растягивая слой на весь экран, а так же выставляя большой z-index, что позволит нам скрывать постепенную загрузку/отображение элементов. Плюс небольшая анимация перехода.

Далее у нас есть 2 варианта работы с JS, мы можем поймать события:

• DOMContentLoaded – браузер полностью загрузил HTML, было построено DOM-дерево, но внешние ресурсы, такие как картинки <img> и стили, могут быть ещё не загружены;
• load – браузер загрузил HTML и внешние ресурсы (картинки, стили и т.д.).

Выбор за Вами, понятно, что первое событие будет раньше и Вы можете даже добавить дополнительный этап загрузки, между DOMContentLoaded и load соответственно. Мы же остановимся на load:

window.addEventListener("load", () => {
  document.documentElement.classList.add("loaded");
});

setTimeout(()=>{ 
    if(!document.documentElement.classList.contains("loaded"))
       document.documentElement.classList.add("loaded");
}, 10000);

Объекту window добавляем событие load, по которому добавляем класс окончания загрузки на тег <html> (в JS к нему можно обращаться как к documentElement).

Так же, для очень медленных соединений, мы посчитали необходимым снимать loader (setTimeout) через 10 сек, после загрузки скрипта, если DOM дерево по каким-то причинам будет очень долго строиться и отображаться. Что-бы показать хоть какой-то процесс или возможно наличие обрыва соединения.

Упаковка в plugin WordPress

Для удобства управления, все вышеописанное можно упаковать в плагин WP. Например такой код позволит подключить стилевой и скриптовый файлы:

<?php
/*
Plugin Name: Easy Page Preloader
Plugin URI: http://consultapp.ru/pre-loader-for-site/
Description: Adding a preloader to the pages. No conflicts with SEO. You can set your own logo.
Version: 1.0
Author: Dmitry Egorov
Author URI: http://consultapp.ru/
License: GPLv2
*/

//********************************************************************
//*************************** PLUGIN CORE ****************************
//********************************************************************

function ca_epl(){
        wp_enqueue_style( 'html-loader', plugins_url( '/style.css', __FILE__ ) );
        wp_enqueue_script( 'html-loader-script', plugins_url( '/script.js', __FILE__ ), array(), '1.0.1', true );
}
add_action('wp_enqueue_scripts', 'ca_epl');

Заключение

В статье мы рассмотрели, как с помощью прсевдоэлемента ::before добавленного к тегу <html> добавить preloader на страницу, и отключать его по событию load на объекте window.

Сообщение Pre-loader для сайта появились сначала на ConsultApp.ru.

В этой статье мы разберем простой пример настройки Gulp и его плагинов, делается это через gulpfile.js в корне проекта. Установка самого сборщика и его плагинов осуществляется через пакетный менеджер npm.

Что мы используем в обычном проекте?

В простом проекте по верстке, в котором у нас будет папка исходников (src) и рабочего проекта (dist), мы работаем с:

• HTML — в нашем случае все будет в различных .html файлах двух типов: страницы и темплейты компонентов (здесь мы будем использовать плагин gulp-file-include, что очень сильно облегчает разработку и соответствует DRY);
• SASS/SCSS — будем использовать препроцессоры для удобства, те собирать будем все .scss файлы в один оптимизированный стилевой файл style.css;
• JS — те или иные скрипты, все .js файлы, хотелось бы тоже собрать по всему проекту в один оптимизированный script.js;
• Images — разные статические картинки, которые учавствуют в оформлении. Их будем собирать по всему проекту в одну папку без сохранения изначальной стркутуры папок, а так же оптимизировать размер;
• Live Dev Server — хотелось бы как-то налету применять все изменения при разработке, за это будет отвечать локальный сервер.

Сначала мы рассмотрим отдельные части кода, потом соберем весь пазл.

Необходимые плагины

Плагины мы устанавливаем, как dev зависимости с помощью npm например.

npm i -D gulp browser-sync gulp-flatten del...

Соотвественно начало нашего настроечного файла будет содержать подключение всех установленных плагинов. Их смысл во многом понятен из названий и будет разобран ниже.

// COMMON
import gulp from 'gulp';
const { src, dest, watch, series } = gulp;

import { deleteAsync } from 'del';
import syncServer from 'browser-sync';
const sync = syncServer.create();

import flatten from 'gulp-flatten';

// STYLE
import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
import autoprefixer from 'gulp-autoprefixer';
import minify from 'gulp-clean-css';
import sourcemaps from 'gulp-sourcemaps';
import concat from 'gulp-concat';

// HTML
import include from 'gulp-file-include';

// IMAGES
import imagemin from 'gulp-imagemin';

HTML

В HTML нас ждет один из самых приятных сюрпризов, это возможность разделять код на файлы и подключать и в любом месте других файлов, например так:

  <head>
    @@include('src/components/meta/index.html')
    <title>Title</title>
  </head>

За работу с html будет отвечать одноименная функция, заметьте, что мы не берем все .html из проекта, а только те, что считаем страницами, при этом шаблоны подключаются из папки компонентов:

function html() {
  return src('src/pages/**/**.html') // берем все файлы по шаблону
    .pipe( 
      include({
        prefix: '@@',
        basepath: '@root',
      }),// запускаем плагин, который подставит все темплейты
    )
    .pipe(dest('dist')); // кладем файлы с сохранением структуры и проект
} 

SASS/SCSS

Тут мы будем использовать последовательное включение разных плагинов для потока файлов, большинство названий говорящие, так что особых пояснений не требуется. Если что-то не ясно, можно уточнить по имени плагина.

function scss() {
  return src('src/**/**.scss') // берем все файлы с расширением .scss
    .pipe(sourcemaps.init()) // начинаем собирать sourcemap информацию
    .pipe(autoprefixer()) // добавляем браузерные префиксы
    .pipe(sass().on('error', sass.logError)) // препроцессор sass
    .pipe(concat('style.min.css')) // собираем все в 1 файл
    .pipe(minify()) // минифицируем
    .pipe(sourcemaps.write('.')) // указываем sourcemap  туже директорию
    .pipe(dest('dist/assets/css')); // сохраняем конечный фалй
}

JS

C JS все достаточно просто, собираем в один файл всё с расширением .js. Но Вы можете подключить дополнительные плагины для манификации кода например.

function js() {
  return src('src/**/**.js') // выбираем файлы по маске
    .pipe(concat('script.js')) // сиединяем в один файл script.js
    .pipe(dest('dist/assets/js')); // сохраняем в необходимую директорию
}

Images

Собираем все картинки в папке, и обрабатываем необходимым образом.

function images() {
  return src('src/assets/images/*') // выбираем файлы по маске
    .pipe(imagemin()) // оптимизируем картинки
    .pipe(flatten()) // избавляемся от вложенности, можно убрать
    .pipe(dest('dist/assets/images/')); // сохраняем в проект
}

Вспомогательные функции

Еще нам понадобится, как уже упоминалось, сервер и функция очистки проекта. Сервер работает по принципу слежения за соответствующими файлами и запуску функций при их изменении.

function clear() {
  return deleteAsync('dist'); // удаляем все файлы из итогового проекта
}

function serve() {
  // инициализируем сервер, который хостит нашу папку итогового проекта
  sync.init({ server: './dist' }); 

  // следим за файлами по маске и запускаем функции при их изменении
  // далее перезагружаем сервер
  watch(['src/**/**.html'], series(html)).on('change', sync.reload);
  watch(['src/**/**.scss'], series(scss)).on('change', sync.reload);
  watch(['src/assets/images/*'], series(images)).on('change', sync.reload);
  watch('src/**/**.js', series(js)).on('change', sync.reload);
}

Функции сборки проекта

В итоге для удобства нам хотелось бы иметь короткие функции сборки всего проекта и запуска их из консоли. Нам понадобятся dev и build сборки. Запускать их будем так:

gulp dev
gulp build

Для сборок будем использовать наборы функций, которые запускаются последовательно, для этого используем метод gulp — series. Он возвращает функцию, которую мы экспортируем и сможем использовать для запуска из коммандной строки.

// series последовательно запускает указанные функции
const build = series([clear, scss, html, js, images]);
const dev = series([clear, scss, html, js, images, serve]);

export { build, dev };

Как видно из кода, различием dev сборки только в том, что она запускает тестовый сервер. Но Вы конечно можете кастомизировать порядок и настройки под ваши задачи и вкус.

Итоговый файл настройки

// COMMON
import gulp from 'gulp';
const { src, dest, watch, series } = gulp;

import { deleteAsync } from 'del';
import syncServer from 'browser-sync';
const sync = syncServer.create();
import flatten from 'gulp-flatten';

// STYLE
import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
import autoprefixer from 'gulp-autoprefixer';
import minify from 'gulp-clean-css';
import sourcemaps from 'gulp-sourcemaps';
import concat from 'gulp-concat';

// HTML
import include from 'gulp-file-include';

// IMAGES
import imagemin from 'gulp-imagemin';

function html() {
  return src('src/pages/**/**.html')
    .pipe(
      include({
        prefix: '@@',
        basepath: '@root',
      }),
    )
    .pipe(dest('dist'));
}

function images() {
  return src('src/assets/images/*')
    .pipe(imagemin())
    .pipe(flatten())
    .pipe(dest('dist/assets/images/'));
}

function scss() {
  return src('src/**/**.scss')
    .pipe(sourcemaps.init())
    .pipe(autoprefixer())
    .pipe(sass().on('error', sass.logError))
    .pipe(concat('style.min.css'))
    .pipe(minify())
    .pipe(sourcemaps.write('.'))
    .pipe(dest('dist/assets/css'));
}

function js() {
  return src('src/**/**.js').pipe(concat('script.js')).pipe(dest('dist/assets/js'));
}

function clear() {
  return deleteAsync('dist');
}

function serve() {
  sync.init({ server: './dist' });

  watch(['src/**/**.html'], series(html)).on('change', sync.reload);
  watch(['src/**/**.scss'], series(scss)).on('change', sync.reload);
  watch(['src/assets/images/*'], series(images)).on('change', sync.reload);
  watch(['src/**/**.js'], series(js)).on('change', sync.reload);
}

const build = series([clear, scss, html, js, images]);
const dev = series([clear, scss, html, js, images, serve]);

export { build, dev };

Заключение

В этой статье мы описали простейший вариант настройки Gulp, при этом обладающий всеми необходимыми инструментами для сборки и оптимизации проекта. Вы, конечно, всегда можете дополнить его плагинами и настройками на Ваш вкус.

Если остались вопросы, напишите нам на почту, мы постараемся помочь!

Сообщение Простая настройка Gulp для верстальщика появились сначала на ConsultApp.ru.

• Рабочий макет на примере нашего сайта: https://wp-themelia-vitejs.vercel.app/;
• Репозиторий: https://github.com/consultapp/wp-themelia-vitejs;

Технологии/Пакеты:

• React
• Vite.js
• Redux
• Redux/Toolkit
• REST API WordPress
• Themelia WordPress Theme

REST API WordPress

Существует много готовых эндпоинтов в Rest Api WP, нас интересуют на данном этапе посты, страницы и поиск.

REST API Developer Endpoint Reference

Весь API находится в разделе /wp-json/, те для постов например это:

https://example.com/wp-json/wp/v2/posts 

В ответ получаем массив постов вида (отдается кол-во постов равное установленному ранее параметром pre_page, при его отсутствии в запросе):

/* СТАТЬЯ В РАЗРАБОТКЕ. */

Сообщение Переработка темы Themelia c PHP на React, для работы с WordPress в качестве Headless CMS без SSR появились сначала на ConsultApp.ru.

В нашем случае мы используем Webmin/Virtualmin для настройки, но это не особо влияет на саму конфигурацию.

Для запуска SPA приложения на базовой конфигурации Nginx сервера, нам не хватает нескольких моментов:

1. Переадресация всех путей на наш рут, /index.html в данном случае;
2. Зарезервированный путь для получения/обновления SSL сертификатов.

Переадресация путей

Тут нам надо исправить 2 момента:

#Установим root и точку входа, у нас index.html в папка dist
root /home/my_domain/my_domain/dist/; 
index index.html;

# Укажем, как обрабатывать пути, кроме статических файлов (отбор по расширениям)

location / {
        if (-f $request_filename) {
            	expires max;
            	break;
        }
        if ($request_filename !~ "\.(js|htc|ico|gif|jpg|png|css)$") {
            	rewrite ^(.*) /index.html last;
        }
}

Получение/обновление SSL

В данном случае мы используем Let’s Encrypt, Webmin для автоматической работы с этими сертификатами использует папку /.well-known, соответственно выделяем ее так, что бы она не обрабатывалась нашим SPA — например меняем для этого location root.

location /.well-known/ {
	root /home/my_domain/public_html;
}

Итоговый шаблон

server {
	server_name my_domain.ru www.my_domain.ru;

	# your server IP
	listen 00.00.00.00;

	root /home/my_domain/my_domain/dist/;
	index index.html;

	access_log /var/log/virtualmin/my_domain.ru_access_log;
	error_log /var/log/virtualmin/my_domain.ru_error_log;
	fastcgi_param GATEWAY_INTERFACE CGI/1.1;
	fastcgi_param SERVER_SOFTWARE nginx;
	fastcgi_param QUERY_STRING $query_string;
	fastcgi_param REQUEST_METHOD $request_method;
	fastcgi_param CONTENT_TYPE $content_type;
	fastcgi_param CONTENT_LENGTH $content_length;
	fastcgi_param SCRIPT_FILENAME /home/my_domain/public_html$fastcgi_script_name;
	fastcgi_param SCRIPT_NAME $fastcgi_script_name;
	fastcgi_param REQUEST_URI $request_uri;
	fastcgi_param DOCUMENT_URI $document_uri;
	fastcgi_param DOCUMENT_ROOT /home/my_domain/public_html;
	fastcgi_param SERVER_PROTOCOL $server_protocol;
	fastcgi_param REMOTE_ADDR $remote_addr;
	fastcgi_param REMOTE_PORT $remote_port;
	fastcgi_param SERVER_ADDR $server_addr;
	fastcgi_param SERVER_PORT $server_port;
	fastcgi_param SERVER_NAME $server_name;
	fastcgi_param PATH_INFO $fastcgi_path_info;
	fastcgi_param HTTPS $https;

	location /.well-known/ {
		root /home/my_domain/public_html;
	}

	location / {
        	if (-f $request_filename) {
            		expires max;
            		break;
        	}

        	if ($request_filename !~ "\.(js|ico|gif|jpg|png|css)$") {
            		rewrite ^(.*) /index.html last;
        	}
    	}

	# your server IP
	listen 00.00.00.00:443 ssl;
	ssl_certificate /etc/ssl/virtualmin/PATH_TO_KEY/ssl.combined;
	ssl_certificate_key /etc/ssl/virtualmin/PATH_TO_KEY/ssl.key;
}

Итого

Очевидно, что все папки и адреса Вам необходимо заменить на собственные, но идея остается прежней: перехватываем все пути и замыкаем на index.html, а отдельные служебные пути выделяем в location и оставляем например в стандартной public_html для удобства.

Так же при необходимости использования API с этого же сервера, Вы можете самостоятельно добавить location по типу /api/ и сделать редирект на обработчик например.

Сообщение Простая конфигурация Nginx для SPA приложения без SSR появились сначала на ConsultApp.ru.

Переходим на сайт https://github.com/cli/cli/releases, ищем необходимый нам пакет и копируем ссылку, в нашем случае это был gh_2.13.0_linux_386.rpm.

wget https://github.com/cli/cli/releases/download/v2.13.0/gh_2.13.0_linux_386.rpm

sudo yum localinstall gh_2.13.0_linux_386.rpm

Скачиваем файл в любую доступную для записи папку и запускаем узтановку из пакета .rpm коммандой yum localinstall, подтверждаем установку.

Все, можно проверить установку запустив gh —help.

Сообщение Как установить gh на CentOS7 c yum? появились сначала на ConsultApp.ru.

Изучение флагов лучше всего производить в карточном формате. Тк в противном случае, при изучении с листа, содержащего весь перечень флагов, Вы можете запоминать много лишней информации — расположение на листе, последовательность на листе и тд.

Наш мозг пытается облегчить себе задачу, но это приводит к нарушению логики, мы должны посмотреть на флаг, поднятый на корабле, и понять его смысл, а не вспоминать его расположение в методичке или запомнить связку в обратном направлении «Буква -> Флаг» и пытаться на лету переворачивать эту схему.

Все эти моменты позволяет устранить карточный метод изучения — здесь логика прямая «Флаг -> Буква/Смысл». Те увидели флаг — поняли, что нам пытается сообщить судно.

Для реализации данного подхода к изучению основных флагов и вымпелов было написано простое веб приложение — Nauticflags.

Сообщение Как изучить флаги международного свода сигналов? появились сначала на ConsultApp.ru.

Для начала стоит отметить, что без SSL для тестовых запусков достаточно и npm run start на 80 порту — все заработает из коробки, ну почти, если домен напрямую прокинут на айпишники и в нашем распоряжении целый отдельный сервер.

Схема работы

Наша схема работы будет выглядеть максимально просто:

1. Nginx висит, как и подобает вебсерверу, на 80 и 443 портах, обеспечивая маршрутизацию и SSL;
2. Запросы мы проксируем на localhost с нужным портом, например 3000, тк он у нас по дефолту Next.

Nginx

Для простоты мы будем править напрямую основной конфигурационный файл /etc/nginx/nginx.conf, как Вы понимаете на рабочем проекте так делать не надо — разберитесь с  папками /etc/nginx/sites-available/ и /etc/nginx/sites-enabled.

nano /etc/nginx/nginx.conf

Как установить Nginx , подробно описано на официальном сайте, все зависит от Вашей операционной системы очевидно.

Итак, наши настройки для сервера (выжимка), естественно *_INSERT_IP_ADRESS_* надо заменить на Ваш ip сервера и our_best_site на Ваш домен и всю структуру папок проверить (/home/our_best_site/public_html и тд):

server {
                server_name our_best_site.ru www.our_best_site.ru;
                listen *_INSERT_IP_ADRESS_*;
                root /home/our_best_site/public_html;
                index index.php index.htm index.html;
                access_log /var/log/virtualmin/our_best_site.ru_access_log;
                error_log /var/log/virtualmin/our_best_site.ru_error_log;
                fastcgi_param GATEWAY_INTERFACE CGI/1.1;
                fastcgi_param SERVER_SOFTWARE nginx;
                fastcgi_param QUERY_STRING $query_string;
                fastcgi_param REQUEST_METHOD $request_method;
                fastcgi_param CONTENT_TYPE $content_type;
                fastcgi_param CONTENT_LENGTH $content_length;
                fastcgi_param SCRIPT_FILENAME /home/our_best_site/public_html$fastcgi_script_name;
                fastcgi_param SCRIPT_NAME $fastcgi_script_name;
                fastcgi_param REQUEST_URI $request_uri;
                fastcgi_param DOCUMENT_URI $document_uri;
                fastcgi_param DOCUMENT_ROOT /home/our_best_site/public_html;
                fastcgi_param SERVER_PROTOCOL $server_protocol;
                fastcgi_param REMOTE_ADDR $remote_addr;
                fastcgi_param REMOTE_PORT $remote_port;
                fastcgi_param SERVER_ADDR $server_addr;
                fastcgi_param SERVER_PORT $server_port;
                fastcgi_param SERVER_NAME $server_name;
                fastcgi_param PATH_INFO $fastcgi_path_info;
                fastcgi_param HTTPS $https;

                location / {
                        proxy_pass http://localhost:3000/;
                }

                fastcgi_split_path_info ^(.+\.php)(/.+)$;
                listen *_INSERT_IP_ADRESS_*:443 ssl;
                ssl_certificate /home/our_best_site/ssl.combined;
                ssl_certificate_key /home/our_best_site/ssl.key;
        }

У Nginx куча настроек и улучшать можно постоянно, но основная магия в паре строк, те мы проксируем все запросы на «/» на наш node сервер, который мы скоро запустим:

location / {
proxy_pass http://localhost:3000/;
}

Для работы SSL, нам надо получить сертификаты в сертификационном центре и указать пути к этим файлам:

ssl_certificate /home/our_best_site/ssl.combined;
ssl_certificate_key /home/our_best_site/ssl.key;

Запускаем приложение

Какие файлы нам нужны от Next.js для запуска?

Для начала нам нужно запустить в терминале компиляцию проекта npm run build, в итоге мы увидим что-то похожее. Next создаст все необходимые файлы, статические и для рендеринга на сервере.

Осталось понять, что же нам нужно перенести на рабочий сервер в простейшем варианте, без Git и прочих полезных вещей.

Мы идем на сервер, создаем рабочую папку для Next и копируем туда файлы и папки:

1. /.next — основная рабочая папка;
2. /public — папка со статическими публичными файлами, например favicon.ico и robots.txt;
3. next.config.js — конфигурационный файл next, куда надо не забыть включить домены для картинок и например webpack5: true;
4. package.json — конфигурационный файл приложения.

Далее осталось запустить в этой папке npm install, при этом менеджер проанализирует package.json и автоматически сгенерирует папку /node_modules, со всеми необходимыми пакетами. Ее не надо копировать из среды разработки.

Все, теперь достаточно запустить npm run start или любой нужный скрипт из package.json и, если Вы правильно указали порт, а у нас Nginx проксирует на 3000, все заработает. Но, это неудобно, тк стоит закрыть терминал — все умрет. Эту проблемы нам поможет решить отличный менеджер процессов PM2.

Запускаем Nextjs через PM2 (менеджер процессов)

Подробно прочитать про этот менеджер процессов можно в мануале на официальном сайте, мы же укажем только необходимый минимум

Итак, устанавливаем pm2 командой (возможно Вам потребуется использовать sudo):

npm install pm2 -g

Запуск процессов

Для запуска проекта в простом варианте можно использовать что-то вроде, при этом не забудьте перейти в рабочую папку проекта nextjs.

pm2 start npm -- start

А так же полезные ключи:

# Указываем имя запущенного приложения
--name <app_name>

# Устанавливаем наблюдение за файлами проекта и перезапускаем приложение при их изменении
--watch

# Устанавливаем лимит памяти до перезагрузки приложения
--max-memory-restart <200MB>

# Определяем путь к файлу логов
--log <log_path>

# Прокидываем аргументы в скрипт
-- arg1 arg2 arg3

# Задержка между автоматическими перезапусками
--restart-delay <delay in ms>

# Добавлять префикс времени в логах
--time

# Не перезапускать автоматически приложение
--no-autorestart

# Определяем задачу крон для принудительного перезапуска (forced restart)
--cron <cron_pattern>

Управление и мониторинг процессов

Для управления запущенными процессами можно использовать команды:

$ pm2 restart app_name
$ pm2 reload app_name
$ pm2 stop app_name
$ pm2 delete app_name

Вместо app_name можно использовать:

• all для управления всеми процессами;
• id для управления процессом по его id.

Мониторить запущенные процессы можно парой удобных команд:

// онлайн мониторинг в экране терминала
$ pm2 monit

// список процессов
# pm2 list

Пример вывода для pm2 monit:

Итого по pm2

Теперь мы можем запустить наш проект, со всеми ключами. Представим, что наше приложение лежит в папке /home/our_best_site/public_html/nextjs:

$ cd /home/our_best_site/public_html/nextjs
$ pm2 start npm --watch --ignore-watch="node_modules" --restart-delay=10000 --name "app_name1" -- start

Из строки видно, что запускаем мы в рабочей папке наш процесс npm start с именем app_name1, при этом следим за изменениями с задержкой перезапуска 10000мс и игнорируем папку node_modules.

При этом в терминале мы увидим наше приложение:

Заключение

В результате мы получаем nextjs приложение, которое работает на 3000 порту и все запросы (80 и 443 портов) в него проксируются через nginx. Управление приложением происходит через менеджер pm2. Стоит отметить, что все написанное будет работать и для React.js приложения с минимальными правками.

Ура, все работает)

Сообщение Запускаем Next.js приложение через PM2 на Nginx в простейшей конфигурации появились сначала на ConsultApp.ru.

Убираем кнопки со страниц категорий и товаров

Добавляем в конец нашего functions.php (файл в корне Вашей темы) следующие строки, которые убирают хуки, отвечающие за кнопки:

remove_action( 'woocommerce_after_shop_loop_item', 'woocommerce_template_loop_add_to_cart', 10 );
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_add_to_cart', 30 );
remove_action( 'woocommerce_simple_add_to_cart', 'woocommerce_simple_add_to_cart', 30 );
remove_action( 'woocommerce_grouped_add_to_cart', 'woocommerce_grouped_add_to_cart', 30 );

Убираем иконку корзины в шапке/меню

С шапкой интереснее, а может и нет… Это не функционал самого вукоммерса, по-этому идем искать код в нашей теме, если Вы видите иконку/ссылку на корзину в шапке — значит авторы Вашей темы предусмотрели ее использование вместе с Woocommerce и добавили код.

В случае нашего клиента он находился в header.php, легко отредактировать даже из веб-интерфейса ( Внешний вид => Редактор тем) и выглядел так:

if ( class_exists( 'WooCommerce' ) ) {
	global $woocommerce; 
    /* Тут было много html, сократили для удобства */
}

Ищем упоминания WooCommerce и похожий на иконку/кнопку HTML, комментируем ( /* php code */) весь связанный php, в нашем случае, это весь оператор if, если корзина возможно понадобится потом. Или удаляем, если точно уверены, что она не нужна.

Профит! Ни кнопок, ни корзины… чистый каталог, еще не забудьте страницы оформления, корзины и прочие сделать личными, черновиками или удалить, если не жалко.

Сообщение Как убрать корзину из шапки и кнопку «в корзину» со страницы в WooCommerce? появились сначала на ConsultApp.ru.

Для решения этой задачи мы нашли плагин c незатейливым названием Theme Customisations, правда скачать и загрузить его придется вручную с гитхаба:

1. Скачиваем архив http://github.com/woothemes/theme-customisations;
2. Говорим спасибо разработчикам, что сделали за нас чаcть работы;
3. Распаковываем папку на сервере /wp-content/plugins.

Работа с Theme Customisations

Функционал плагина не затейливый, как и наша задача, а именно — после активации в папке «/wp-content/plugins/theme-customisations-master» плагина создается папка «custom«, в которой есть базовые файлы, которые мы можем менять — код PHP, стили CSS, код JS.

Использование / Usage из readme.txt

• Add any CSS snippets to custom/style.css. This file is found in this plugin.
• Add any PHP snippets to custom/functions.php. This file is found in this plugin.
• Add any jQuery snippets to custom/custom.js. This file is found in this plugin.
• Add custom top level template files (page.php, single.php etc) to custom/templates/. You will need to create the templates folder.
• Add any WooCommerce template files to custom/templates/woocommerce. You will need to create the templates and woocommerce folders.
• Activate the plugin.

В целом можно управлять разными файлами и все будет работать при обновлении тем (возможно обновления самого вордпреса или версии php все таки что-то могут сломать, но это как водится — бекапьтесь в любом случае) .

Сообщение Редактируем плагином тему WordPress без дочерних тем с возможностью обновления появились сначала на ConsultApp.ru.

Клиент занимается автозапчастями, по-этому отслеживаем тематические площадки:

• farpost.ru
• drom.ru
• auto.ru
• ferio.ru

Итак приступим

Создадим файл в our_script.js в папке нашего шаблона Битрикс или любой другой CMS — очевидно js часть не будет сильно отличаться.

Скрипт максимально простой, мы получаем заранее обработанные в php куки, анализируем их содержимое и подменяем телефоны на указанные.

Очевидно, что можно сделать модуль, в который пользователь сможет вносить признаки и телефоны, но для простоты мы оставили только самую суть. Далее все понятно из комментариев в скрипте:

// @consultapp.ru
// файл our_script.js в папке /ПУТЬ_К_ШАБЛОНУ/js/
function get_co (co_name){
  var res = document.cookie.match ( '(^|;) ?' + co_name + '=([^;]*)(;|$)' );
  if (res) return (unescape(res[2]));
  else return null;
}
// по готовности документа получаем куки
$(document).ready(function() { 
		var lidsrc = get_co ( "ИМЯ_НАШЕЙ_КУКИ" );
		var tel=null;
		var telhref=null;

		// анализируем текст куки и указываем нужный телефон
		if((lidsrc.indexOf("farpost")>=0) || (lidsrc.indexOf("drom")>=0)){
			tel='8 (999) 999-99-99';
			telhref='tel:79999999999';
		}else if(lidsrc.indexOf("ferio")>=0){
			tel='8 (888) 888-88-88';
			telhref='tel:78888888888';
		}else if(lidsrc.indexOf("auto.ru")>=0){
			tel='8 (777) 777-77-77';
			telhref='tel:77777777777';
		}

		// заменяем телефоны на странице по признаку class
		// предварительно все ссылки (тег <a>) надо отметить,
		// добавив в class атрибут cont_tel
		if(tel!=null){
			// все отмеченные телефоны
			$('.cont_tel').html(tel);
			$('.cont_tel').attr("href", telhref);
			$('.cont_tel_html').html(tel);
			$('.cont_tel_href').attr("href", telhref);
		}
	}
);

Вставим в header шаблона строку php подключения js для Bitrix, в других CMS есть свои инструменты, ну или вставить в head напрямую, тут уж как кому нравится.

<? 
// @consultapp.ru
// подключаем наш скрипт в шаблоне .php
$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH."/js/our_script.js");
?>

Куки мы используем, т.к. HTTP_REFERER постоянно меняется при переходе по страницам, а нам надо точно указывать одинаковый телефон на всех страницах сайта, который бы соответствовал источнику, с которого пришел клиент.

Сообщение Простой коллтрекинг своими руками. Часть JavaScript появились сначала на ConsultApp.ru.

Расчет на абсолютную безграмотность в этом вопросе очевидно, тк домены так не работают… Но раз постоянно присылают, значит наверно работает на ком-то! И присылают сразу несколько писем с разных адресов, видать для солидности и нагнетания ужаса от удаления домена.

https://money.yandex.ru/to/************ — ссылка по кнопке ОПЛАТИТЬ

А ссылочка с оплатить ведет у нас куда? Конечно прямо на Яндекс Деньги, очевидно же, что так намного удобней оплачивать услуги компаний!

Итого, будьте внимательны и доверяйте сопровождение доменов понимающим людям)

Сообщение Аферисты опять рассылают письма от имени RU-Center (nic.ru) появились сначала на ConsultApp.ru.

No.	Ticker	Company	Price	Change%	Shares	Cost	Market Value	Gain$	Gain%
1.	GPI	Group 1 Automotive, Inc.	82.77	11.64%	8	62.41	662.16	162.88	32.62%
2.	ZYNE	Zynerba Pharmaceuticals, Inc.	3.71	3.63%	90	5.52	333.90	-162.90	-32.79%
3.	DFS	Discover Financial Services	50.70	3.45%	10	49.84	507.00	8.60	1.73%
4.	ROG	Rogers Corporation	128.18	2.69%	4	109.62	512.72	74.24	16.93%
5.	CDW	CDW Corporation	119.08	1.78%	5	111.91	595.40	35.85	6.41%
6.	ULTA	Ulta Beauty, Inc.	205.44	1.72%	2	239.09	410.88	-67.30	-14.07%
7.	LEA	Lear Corporation	116.90	1.62%	4	110.49	467.60	25.64	5.80%
8.	AEIS	Advanced Energy Industries, Inc.	71.04	1.46%	7	66.39	497.28	32.55	7.00%
9.	OSUR	OraSure Technologies, Inc.	17.05	0.71%	35	14.12	596.75	102.55	20.75%
10.	GCP	GCP Applied Technologies Inc.	22.13	0.55%	24	20.23	531.12	45.60	9.39%
11.	SPR	Spirit AeroSystems Holdings, Inc.	22.89	0.22%	21	23.79	480.69	-18.90	-3.78%
12.	EXPE	Expedia Group, Inc.	87.68	0.17%	6	82.42	526.08	31.56	6.38%
13.	EXP	Eagle Materials Inc.	78.01	0.14%	7	67.07	546.07	76.58	16.31%
14.	IIVI	II-VI Incorporated	45.25	-0.24%	10	47.28	452.50	-20.30	-4.29%
15.	GTHX	G1 Therapeutics, Inc.	18.15	-0.63%	28	17.61	508.06	14.98	3.04%
16.	QRTEA	Qurate Retail, Inc.	9.30	-0.75%	57	8.63	530.10	38.19	7.76%
17.	BEAT	BioTelemetry, Inc.	41.41	-1.03%	10	47.28	414.10	-58.70	-12.42%
18.	PNTG	The Pennant Group, Inc.	22.04	-2.04%	20	23.95	440.80	-38.20	-7.97%
19.	ET	Energy Transfer LP	6.59	-2.23%	61	8.21	401.99	-98.82	-19.73%
20.	WYNN	Wynn Resorts, Limited	76.10	-3.90%	5	86.47	380.50	-51.85	-11.99%

Итого

В лидерах у нас Group 1 Automotive, Inc. +11%, отстающими оказали на удивление Wynn Resorts, Limited -3,9%, хотя их мы отмечали, как единственных знакомых во всем списке.

Пока предположение не особо оправдывается, хотя мы и в плюсе.

Сообщение Обезьяна vs Рынок #2 появились сначала на ConsultApp.ru.

«Обезьяна с завязанными глазами, бросающая дротики в финансовые страницы газеты, может выбрать портфель, который будет столь же хорош, как и портфель, тщательно отобранный экспертами» – профессор Принстонского университета Бертон Мэлкил, книга «Случайная прогулка по Уолл-Стрит»

Формируем портфель

Возьмем акции иностранных компаний, которые торгуются на Санкт-Петербургской бирже: всего в выгрузке на данный момент у нас получилось 1223 фишки, на самом деле, количество не так важно, главное, что их много.

Пойдем на первый попавшийся сайт по выборке случайных победителей из списка, хотим получить 20 компаний, по 5% капитала на каждую. Закидываем наш список:

Да, можно было найти сайт и с более приятной выдачей, но зачем) Вот наш результат. Честно сказать, из всех компаний я знаю только одну, но самое смешное, что по показателям у нее самое плохое состояние долга в этом списке, кажется мартышки уже что-то лучше знают, чем я:

Своими деньгами пока в этом эксперименте участвовать не будем, но портфель-то составить никто запретить не может! Нормируем на 10 000 вечно зеленых рублей и получаем такой набор (напомню, дата входа 1-е июня 2020, а что если бы мы входили в начале марта!):

Из-за маленького размера портфеля балансировка по 500$ очень примерная, но это тоже не страшно, может у Вас 100 000$ и Вы сделаете лучше)

Смотрим на результат

Судя по рекомендациям, только 5 бумаг нам покупать сейчас не надо, но мартышки-то лучше знают!

Вместо заключения

Будем следить за этим портфелем, постараемся выкладывать результаты оперативно! Пишите нам на почту info@consultaspp.ru, если хотите поговорить на тему портфеля или о чем-то еще)

Сообщение Обезьяна сражается с фондовым рынком появились сначала на ConsultApp.ru.

Шаблон выгрузки:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE yml_catalog SYSTEM "shops.dtd">
<yml_catalog date="2010-04-01 17:00">
    <shop>
        <offers>
			<offer id="ID">
				<name>ИМЯ</name>
			      <description>ОПИСАНИЕ</description>
				<price>ЦЕНА</price>
				<currencyId>RUR</currencyId>
				<SKU>SKU</SKU>
				<picture>ССЫЛКА</picture>
			</offer>
		</offers>
	</shop>
</yml_catalog>

В настройках можно указать имя файла и выгрузить товары принудительно.

1.* Версия выводит в канал все товары магазина.

Плагин не использует специфические функции последних версий WP и должнен работать на более старых версиях, чем 4.8, но не тестировался там.

Страница плагина на https://ru.wordpress.org/

Сообщение Плагин Easy Upload to Farpost.ru появились сначала на ConsultApp.ru.

Всего у нас будет 2 файла: webhook.php, который содержит логику работы, и tg.class.php, который содержит методы для отправки сообщений и ответа на запросы.

Для того, что бы телеграм знаю куда стучаться при наступлении события сообщим ему о нашем обработчике открыв в браузере страницу с адресом, обратите внимание, что обязательно нужен SSL: https://api.telegram.org/botAPI_TOKEN_TG/setWebhook?url=https://YOUR_DOMAIN/webhook.php

webhook.php

<?php
define('TGKEY', 'TELEGRAM_API_KEY-insert here your tg api key');
include_once('tg.class.php');

$body = file_get_contents('php://input');
$arr = json_decode($body, true); 

$tg = new tg(TGKEY);

$tg_id = $arr['message']['chat']['id'];
$rez_kb = array();

$message_text = $arr['message']['text'];
$tg->sendChatAction($tg_id);
$sms_rev='';
	
	switch($message_text){
		case '/start':
			$sms_rev = 'Здравствуйте, Вас приветсвует Простейший Бот Telegram!
';
		break;
		case '/help':
			$sms_rev = 'Я могу выполнить следующюю функцию:
			/rev - переворачиваею строку наоборот.
';	
		break;	

		case '/rev':
			$sms_rev = strrev($message_text);	
		break;	

		default:
			$sms_rev ='Команда не распознана';
		break;	
	}

$tg->send($tg_id, $sms_rev, $rez_kb);
exit('ok'); // говорим телеге, что все окей
?>

tg.class.php

<?php
class TG {
  
    public $token = '';
  
    public function __construct($token) {
        $this->token = $token; 
    }
      
    public function send($id, $message, $kb) {
        $data = array(
            'chat_id' => $id,
            'text'  => $message,
            'parse_mode' => 'HTML',
            'disable_web_page_preview'=>true,
            'reply_markup' => json_encode(array('inline_keyboard' => $kb))
        );
        $this->request('sendMessage', $data);
    }  

    public function editMessageText($id, $m_id, $m_text, $kb=''){
        $data=array(
             'chat_id' => $id,
             'message_id' => $m_id,
             'parse_mode' => 'HTML',
             'text' => $m_text
        );
        if($kb)
            $data['reply_markup']=json_encode(array('inline_keyboard' => $kb));

        $this->request('editMessageText', $data); 
    }


    public function editMessageReplyMarkup($id, $m_id, $kb){
        $data=array(
             'chat_id' => $id,
             'message_id' => $m_id,
            'reply_markup' => json_encode(array('inline_keyboard' => $kb))
        );
        $this->request('editMessageReplyMarkup', $data); 
    }
    
    public function answerCallbackQuery($cb_id, $message) {
        $data = array(
            'callback_query_id'      => $cb_id,
            'text'     => $message
        );
        $this->request('answerCallbackQuery', $data);
    } 

    public function sendChatAction($id,$action='typing') {
        $data = array(
            'chat_id' => $id,
            'action'     => $action
        );
        $this->request('sendChatAction', $data);
    }


    public  function request($method, $data = array()) {
        $curl = curl_init();
          
        curl_setopt($curl, CURLOPT_URL, 'https://api.telegram.org/bot' . $this->token .  '/' . $method);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'POST'); 
        curl_setopt($curl, CURLOPT_POST, true);
        curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
          
        $out = json_decode(curl_exec($curl), true);
          
        curl_close($curl);
        return $out;
    }
}

Разберем отдельно по функциям

Конструктор

class TG {
  
    public $token = '';
  
    public function __construct($token) {
        $this->token = $token; 
    }

Все крайне просто, в конструкторе сохраняем во внутреннюю переменную Api ключ, который получили от BotFather бота телеграмма.

Функция отправки запроса в телегу

    public  function request($method, $data = array()) {
        $curl = curl_init();
          
        curl_setopt($curl, CURLOPT_URL, 'https://api.telegram.org/bot' . $this->token .  '/' . $method);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_CUSTOMREQUEST, 'POST'); 
        curl_setopt($curl, CURLOPT_POST, true);
        curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
          
        $out = json_decode(curl_exec($curl), true);
          
        curl_close($curl);
        return $out;
    }

Отправляем запрос вида https://api.telegram.org/botAPI_KEY/ИМЯ_МЕТОДА по протоколу post через curl.

Функция отправки сообщения — sendMessage

public function send($id, $message, $kb) {
        $data = array(
            'chat_id' => $id,
            'text'  => $message,
            'parse_mode' => 'HTML',
            'disable_web_page_preview'=>true,
            'reply_markup' => json_encode(array('inline_keyboard' => $kb))
        );
        $this->request('sendMessage', $data);
    }  

Получаем в параметрах ID диалога, сообщение и инлайн клавиатуру, если она нужна.

Функция редактирования текста сообщения — editMessageText

public function editMessageText($id, $m_id, $m_text, $kb=''){
        $data=array(
             'chat_id' => $id,
             'message_id' => $m_id,
             'parse_mode' => 'HTML',
             'text' => $m_text
        );
        if($kb)
            $data['reply_markup']=json_encode(array('inline_keyboard' => $kb));

        $this->request('editMessageText', $data); 
    }

Редактируем с помощью нее сообщение бота в телеграме всемсте с инлайн клавиатурой, если нужно. Получаем в качестве параметров ID чата, ID сообщения, новый текст сообщения, инлайн клавиатуру.

Функция ответа на событие нажатия кнопки (обратного запроса) — answerCallbackQuery

public function answerCallbackQuery($cb_id, $message) {
        $data = array(
            'callback_query_id'      => $cb_id,
            'text'     => $message
        );
        $this->request('answerCallbackQuery', $data);
    } 

Получаем в параметрах ID обратного запроса и текст ответа.

Функция редактирования разметки/кнопок — editMessageReplyMarkup

public function editMessageReplyMarkup($id, $m_id, $kb){
        $data=array(
             'chat_id' => $id,
             'message_id' => $m_id,
            'reply_markup' => json_encode(array('inline_keyboard' => $kb))
        );
        $this->request('editMessageReplyMarkup', $data); 
    }

Получаем как параметр ID чата, ID сообщения, новую разметку/клавиатуру. Используем в паре с answerCallbackQuery, для ответа на запрос с заменой разметки.

Сообщение Простейший бот для Телеграма на PHP появились сначала на ConsultApp.ru.

1. Графики распространения в мире/по странам;
2. Распоряжение Правительства РФ от 27 марта 2020 г. No 762-р о перечне товаров первой необходимости — можно понять, разрешено Вам работать и продавать, или нет в нерабочий период;
3. Ликбез по распираторам и маска;
4. 12-04-2020 Цифровые пропуска: как будет работать пропускная система в городе;

Сообщение Коронавирус (COVID-19), полезные материалы. появились сначала на ConsultApp.ru.

Сайт https://help.yandex.ru/mail/mailer/popsmtp говорит следущее:

• адрес почтового сервера — smtp.yandex.ru;
• защита соединения — SSL;
• порт — 465.

Но для битрикса мы будем использовать 587 порт.

Наша ошибка из проверки системы 1С-Битрикс.

При запуске тестирования конфигурации битрикса можно увидеть подобную картину:

Как исправить?

Для начала зайдем в нужный раздел BitrixVM, пункты 6. Manage sites in the pool => 4. Change a site’s email settings.

              Bitrix virtual appliance  version 7.3.3
                     Manage email settings

Found 2 sites:
------------------------------------------------------------------------------------
SiteName        | dbName          | Email |          Server |   TLS | From
------------------------------------------------------------------------------------
******.**       | dbb******       |     Y | smtp.yandex.ru:587 |    on | info@******.**
default         | sitemanager     |     N |                 |   off | 
------------------------------------------------------------------------------------
Available actions: 
                 
           Manage email settings
        0. Previous screen or exit

Видим список сайтов, выберем интересующий нас и увидим текущие настройки:

Enter site name (default) or 0 to exit: ******.**

Email address is configured for the site ******.**
Email address       : info@******.**
SMTP server         : smtp.yandex.ru
SMTP port           : 587
SMTP login          : info@******.**
TLS status          : on

Подтвердим желание изменить настройки:

Do you want to update email settings for ******.** (N|y): y

Введем почту, от которой будут отправляться письма:

Enter From email address (ex. bob@example.org):info@******.**

Введем адрес smtp сервера яндекса:

Enter server address or DNS (127.0.0.1): smtp.yandex.ru

Введем рекомендуемый порт, и подтвердим наличие аутентификации:

Enter server port (25): 587

Do you want to use SMTP authentication on smtp.yandex.ru:587? (N|y)y

Введем наши логин и пароль от ящика:

Enter login (info@******.**): info@******.**

Enter password: PASSWORD

Выберем и подтвердим шифрование (можно оставить auto):

Available methods are plain,scram-sha-1,cram-md5,gssapi,external,digest-md5,login,ntlm

Enter SMTP authentication method (default: auto): auto

Do you want to enable TLS for smtp.yandex.ru:587 (n|Y):Y

И вот он, конец настройки)

Configure email for the site ******.**

Press ENTER to exit

Все, готово. Лог ошибок по умолчанию можно посмотреть тут:

cat /home/bitrix/msmtp_*******.log 

Файл настроек здесь:

/home/bitrix/.msmtprc

Сообщение Как настроить отправку почты через SMTP yandex.ru в 1С-Битрикс (BitrixVM)? появились сначала на ConsultApp.ru.

Сайт https://help.mail.ru/mail/mailer/popsmtp сообщает следущее:

Наша ошибка из проверки системы 1С-Битрикс.

При запуске тестирования конфигурации битрикса можно увидеть подобную картину:

Как исправить?

Для начала зайдем в нужный раздел BitrixVM, пункты 6. Manage sites in the pool => 4. Change a site’s email settings.

              Bitrix virtual appliance  version 7.3.3
                     Manage email settings

Found 2 sites:
------------------------------------------------------------------------------------
SiteName        | dbName          | Email |          Server |   TLS | From
------------------------------------------------------------------------------------
******.**       | dbb******       |     Y | smtp.mail.ru:465 |    on | info@******.**
default         | sitemanager     |     N |                 |   off | 
------------------------------------------------------------------------------------
Available actions: 
                 
           Manage email settings
        0. Previous screen or exit

Видим список сайтов, выберем интересующий нас и увидим текущие настройки:

Enter site name (default) or 0 to exit: ******.**

Email address is configured for the site ******.**
Email address       : info@******.**
SMTP server         : smtp.mail.ru
SMTP port           : 465
SMTP login          : info@******.**
TLS status          : on

Подтвердим желание изменить настройки:

Do you want to update email settings for ******.** (N|y): y

Введем почту, от которой будут отправляться письма:

Enter From email address (ex. bob@example.org):info@******.**

Введем адрес smtp сервера Мейл-ру:

Enter server address or DNS (127.0.0.1): smtp.mail.ru

Введем рекомендуемый порт, и подтвердим наличие аутентификации:

Enter server port (25): 465

Do you want to use SMTP authentication on smtp.mail.ru:465? (N|y)y

Введем наши логин и пароль от ящика:

Enter login (info@******.**): info@******.**

Enter password: PASSWORD

Выберем и подтвердим шифрование (можно пробовать plain или оставить auto):

Available methods are plain,scram-sha-1,cram-md5,gssapi,external,digest-md5,login,ntlm

Enter SMTP authentication method (default: auto): plain

Do you want to enable TLS for smtp.mail.ru:465 (n|Y):Y

И вот он, конец настройки)

Configure email for the site ******.**

Press ENTER to exit

Все, готово. Лог ошибок по умолчанию можно посмотреть тут:

cat /home/bitrix/msmtp_******.ru.log 

Сообщение Как настроить отправку почты через SMTP mail.ru в 1С-Битрикс (BitrixVM)? появились сначала на ConsultApp.ru.

А менять мы будем вот на эту красоту за 959,14 руб., на момент покупки, из страны откуда и сам чудо-самокат приехал. Тут тебе и отдельный индикатор ECO, и скорость.. короче надо брать подумалось мне, хотя и заходил туда за заказом камер для колес.

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

Откручиваем голову с рулем, та что на 4 болтах шестигранных. Меняем плату, отключаем все от старой, заменяем ее, что логично, на новую. Соединяем штекер, который идет вниз к мотору — для этого и скрутили голову бедняге. А под резиновым колпачком находим соединения (3 шт.), которые отвечают за газ, свет и тп — их соединяем в соответствии с цветами проводов, благо китайцы, на удивление, все сделали одинаково! Получаем такую картину.

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

Et voilà (и вот), что получаем в результате. Красота…

Осталось только подключиться в программе, тк мигает значек блютус, но нет тут то было.. Если Вы уже регистрировали скутер в родной программе Xiaomi (Mi Home), то …барабанная дробь… удаляем его, тк работать он не будет — модуль то другой уже) И добавляем снова, теперь все окей! И зарядку читает, и скорость и прочее. Все, что есть на сегментном дисплее картинкой выше.

P.S. Теперь вместо 2 режимов ECO и простого, переключается 3 — D, S и ECO. Однако понять разницы между ними пока не представляется возможным.. дожди.. Напишите на почту, если интересно, возможно к моменту прочтения Вами статьи, это уже станет известно). Так же в комплекте шел чехол, но он настолько убог, что не смог пережить моего эстетического шока и был сразу выброшен.

Сообщение Апгрейд дисплея на электросамокате Xiaomi Mijia M365 появились сначала на ConsultApp.ru.

Сервис вопросов и ответов Яндекс.Знатоки — одно из приоритетных направлений в рамках контент-маркетинга, поскольку позволяет находить горячих клиентов, уже интересующихся тем или иным вопросом.

Сейчас протестируем с несколькими клиентами и напишем свои впечатление и мануал, если будет интересно.

Сообщение Новый сервис Яндекс.Знатоки. Косвенная реклама для Вашей компании? появились сначала на ConsultApp.ru.

При этом — если перейти в iTunes и найти в поиске этот альбом, он будет отмечен как купленный, но там его тоже закачать не получится. Нет активных кнопок, кроме прослушать отрывок.

Так что же делать?

Как переодически бывает с Apple, задача простая, но странное решение — надо восстановить сначала объект в Скрытых покупках. Заходим в iTunes>Магазин, далее в Учетную запись, вводим логин/пароль.

На открывшейся странице находим iTunes в облаке>Скрытые покупки, нажимаем на Управлять. 

В результате окажемся на странице Скрытые покупки.

Все, бинго, находим нужный нам объект и нажимаем Показать, теперь можно перейти в Медиатеку, найти там нужный объект и скачать его.

Сообщение Как восстановить/скачать удаленный из медиатеки альбом/трек в iTunes? появились сначала на ConsultApp.ru.

Выбираем в меню QuickTime пункт «Файл > Новая запись экрана» .

Открывается модуль записи экрана — нажимаем на красную кнопку.

И получаем предложение с выбором двух вариантов записи:

• Запись полного экрана, тогда просто кликаем в любое место экрана и запись начинается;
• Запись части экрана, для этого выделяем нужную область на экране, растягивая квадрат мышкой, после редактирования области по ширине и высоте — нажимаем кнопку «Начать» в центре.

Как утверждаем надпись — для окончания записи в меню, правой его части, там где дата и тд, нажимаем стоп. Далее просто сохраняем готовый файл через «Файл > Сохранить». Получается записанный видео файл с расширением «.mov».

Сообщение Как записать видео экрана на Мак? появились сначала на ConsultApp.ru.

Очевидно, что анализируются все письма и собираются ссылки на отписку, выглядит все это так:

Управление подписками

Просматриваем все наши подписки, нажимаем — «Отписаться» и ждем:

Мейл подумает, подумает, да и отпишется от выбранных назойливых или не очень товарищей. Ну и все ненужные письма можно удалить разом соответсвенно.

Пользуемся, радуемся более чистому ящику)

Сообщение mail.ru: Новый удобный раздел для массовой отписки от рассылок появились сначала на ConsultApp.ru.

Кстати, у нас есть простой бесплатный плагин для быстрого запуска Яндекс Турбо страниц на Вашем сайте на вордпресс — https://wordpress.org/plugins/ca-yaturbo/.

Итак, наши шаги для исправления ситуации:

• Заходим в нашу админку Вордпресс или подключаемся файловым менеджером к серверу;
• Переходим в папку: /wp-content/plugins/wordpress-seo/frontend;
• Редактируем файл “class-frontend.php”, ищем строку:

if ( ( is_feed() || is_robots() ) && headers_sent() === false ) {

• Изменяем ее на:

if ( is_robots() && headers_sent() === false ) {

• Сохраняем, сбрасываем кеши на всякий случай, если подобные плагины установлены. В результате Яндекс и другие поисковики начинают видеть наши фиды.

Так же есть пока не проверенный вариант, можно попробовать добавить action, по идее это тоже может сработать, вопрос будет в порядке отработки плагина и кода:

add_action( 'template_redirect', index_follow_rss, 999999 );
function index_follow_rss() {
    if ( is_feed() ) {
        header( 'X-Robots-Tag: index, follow', true );
    }
}

Сообщение Убрать Yoast Noindex Tag из RSS feed WordPress появились сначала на ConsultApp.ru.

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

Доступен для платформ:

• iOS —  оригинальная статья, скачать;
• Android — оригинальная статья, скачать.

Включить/отключить определитель номера

• Откройте настройки устройства;
• Выберите пункт Телефон → Блокировка и идентификация вызова;
• В строке Яндекс включите или отключите определитель;
• Оставить отзыв на номер

Заметили ошибку или это спам?

Оставьте отзыв на номер. Сделать это можно в любое удобное время.

• Откройте настройки устройства;
• Выберите пункт Телефон → Сообщения спама (SMS/звонки) → Яндекс;
• В открывшемся окне нажмите Включить;
• Можете оставить свой отзыв на звонок

Номер Вашей организации?

Если телефонный номер принадлежит Вашей организации, добавьте ее в Яндекс.Справочник.

Чтобы удалить информацию о номере из базы Яндекса, напишите в службу поддержки.

Сообщение Определитель номера от Яндекса появились сначала на ConsultApp.ru.

В поисковом приложении Яндекса появилось новое место показов на смартфонах. Все предложения Директа, которые могут быть интересны пользователю, собираются в единую рекламную ленту.

Основное:

• На эту страницу попадает реклама из Директа;
• Для попадания рекламы в ленту достаточно иметь кампанию с активными показами в РСЯ;
• Оплата только за клики по объявлениям. Само попадание в эту ленту ничего не стоит.

Сообщение Новый источник мобильного трафика от Яндекса появились сначала на ConsultApp.ru.

Favicon (сокр. от англ. FAVorite ICON — «значок для избранного») — значок веб-сайта или веб-страницы. Отображается во вкладке перед названием страницы и в других элементах интерфейса.

Фавикон должен отображаться на всех устройствах красиво, но их слишком много! Каждый айфон, андройд, виндоуз и тд хочет свой формат картинки для закладок, иконок на раб. экран. Генерировать их руками не лучшая идея, в т.ч. и потому, что форматы часто меняются.

Самый простой способ сделать нормальный фавикон, а точнее целый набор под разные устройства — сервис https://realfavicongenerator.net, он автоматически генерирует картинки под большинство устройств на основании базового изображения, а также код для вставки этого богатства на сайт. При создании Вам будет предоставлена возможность отредактировать варианты под конкретные устройства — фон, обрезка и т.п.

Так же на сайте есть возможность быстро проверить Ваш сайт на текущее положение дел с фавиконом, его отображением на разных устройствах и интерфейсах.

Сообщение Фавикон быстро и без проблем появились сначала на ConsultApp.ru.

Письмо от Яндекса с новостями по Директу.

Сообщение Оптимизации конверсий на поиске при ручном управлении ставками в Я.Директе появились сначала на ConsultApp.ru.

Яндекс выложил ролики об идеологии интернет-маркетинга в Недвижимости.

В первой части рассматривают исследование о поведении пользователей, совершающих покупки недвижимости в интернете, и применение этих знаний при выстраивании маркетинговой коммуникации на всех этапах воронки.

Во второй части рассказывают о портрете пользователей, интересующихся разными классами недвижимости, и приводят сравнение средней стоимости звонка на поиске и в сетях по типам запросов в разных категориях жилья.

Сообщение Идеология интернет-маркетинга в недвижимости от Яндекса появились сначала на ConsultApp.ru.

https://goo.gl/NjG4he

Сообщение Подарок предпринимателям от Яндекса к грядущим праздникам появились сначала на ConsultApp.ru.

Установить плагин Вы можете через административную панель Вордпресс в разделе Плагины или вручную по ссылке —  ConsultApp — Yandex Turbo Pages .

Плагин добавляет отдельный RSS канал с разметкой под Яндекс Турбо-страницы сразу после установки и активации, который можно отдавать Яндексу в Вебмастере по адресу «http(s)://YOUR_SITE/feed/yaturbo/».

Разметка соответствует требованиям Яндекса и выдает ошибки при тесте обычными xml валидаторами, тк имеет специфические теги. Проверить то, что создался новый канал вы можете с помощью https://validator.w3.org/feed/. Обращать внимание на ошибки xml не надо.

В настройках возможно задание таких параметров, как код Метрики и дополнительные ссылки (блок yandex:related).

В случае возникновения проблем — напишите нам.

Сообщение Яндекс Турбо-страницы — плагин для WordPress от ConsultApp появились сначала на ConsultApp.ru.

6 SEO-факторов юзабилити

1. Скорость загрузки.

Отключение ненужных плагинов или упрощение кода — вот два главных метода в борьбе за скорость. Помочь может включение плагина кеширования, если вы еще его не установили. Оценить скорость поможет сервис от гугл —  Google Page Speed Insights .

2. Количество рекламы.

Первое, что бросается в глаза читателю — это реклама. Плохо, если ее много. Есть даже такой фактор юзабилити — соотношение рекламы с текстом на странице.

3. Вид рекламы.

На юзабилити плохо влияет такой SEO фактор: всплывающая реклама. Так что если на вашем сайте имеются различные блоки popup, popunder — это плохо. От такой навязчивой рекламы нужно отказываться при проектировании сайта.

4. Наличие страницы 404.

404 страница возникает, либо должна возникать в том случае, когда на сайте чего-то нет. К примеру, ищет пользователь коляски, и зашел на удаленную ранее страницу. Возникает страница 404 — «Страница не найдена». Это важный фактор SEO, не стоит пренебрегать созданием страницы 404.

5. Мобильность.

У сайта есть два «выхода»:

• иметь мобильную версию;
• являться адаптивным сайтом (с адаптивным дизайном).

Оба варианта обеспечивают читабельность на мобильных устройствах. В первом случае оптимизаторы делают отдельную версию дизайна для мобильных. Во втором — код сайта сам настраивает вид веб-ресурса, и в зависимости от расширения экрана вид меняется.

6. Доступность навигации.

Тот, кто прячет меню кодом джаваскрипт — плохой оптимизатор. Поисковая система должна видеть, сколько в меню пунктов.

Итого

Использование данных правил, применение знаний о 6 сторонах юзабилити — все это поможет благоустроить сайт и сделать его оптимизированным для поисковых систем.

Важно помимо пользовательских факторов улучшать и документные, делать оптимизированным текст статьи и другие части страницы. Также нужно воздействовать на ссылочные и поведенческие показатели, ведь успех в SEO-продвижении достигается комплексно.

Сообщение SEO-факторы ранжирования: 6 факторов юзабилити появились сначала на ConsultApp.ru.

Поговорим о самом rss, для начала можете проверить свой канал на ошибки с помощью https://validator.w3.org/feed/.  Если ошибок нет, то Яндекс их добавит).

В рекомендациях по настройке канала для прохождения проверок в Вебмастере видим основные моменты:

• Корневым элементом RSS-файла является rss, атрибут version которого должен иметь значение 2.0.

<rss xmlns:yandex="http://news.yandex.ru" xmlns:media="http://search.yahoo.com/mrss/" 
xmlns:turbo="http://turbo.yandex.ru" version="2.0">

• Для формирования Турбо-страницы передайте следующие данные:

...
    <channel><!--Информация о сайте-источнике (RSS-канале)-->
        ...
        <item turbo="true"><!--Информация о странице-->
            ...
            <turbo:content>...</turbo:content><!--Содержание страницы-->
            ...
        </item>
    </channel>
</rss>

После внесения таких изменений в шаблон — валидатор будет выдавать ошибки, зато Яндекс радостно сообщит:

Хорошее решение

На наш взгляд, хорошим решением в данном случае является создание отдельного rss канала под Яндекс страницы с соблюдением его требований. Берем пример кода с сайта и создаем на его основе шаблон для нашей feed-ленты. При этом основной канал остается и соответсвует мировым стандартам (если нет, то конечно исправляем ошибки и там).

Решение для WordPress

Как видно из принтскринов — все описанные в статьях работы были проведены на сайте consultapp.ru, решение есть в готовом виде и может быть внедрено у Вас, внедрение мы видим так:

1. Подключаем Вебмастер (если нет);
2. Создаем отдельный канал rss;
3. Создаем шаблон под канал rss;
4. Настраиваем турбо-страницы в Вебмастере.

Если у Вас есть вопросы — задайте их нам.

Итог

После всех работ, можно радостно увидеть результат:

Плагин для работы с Турбо-страницами на Вордпресс — Yandex Turbo Pages plugin от ConsultApp

Сообщение Турбо-страницы — замена мобильной версии сайта в Яндексе! ч.2 Канал RSS появились сначала на ConsultApp.ru.

Что такое Турбо-страницы?

У Яндекса читаем, что эти страницы формируются на основе контента сайта и технологий Яндекса по единому шаблону:

1. логотип сайта;
2. иллюстрация;
3. полный текст страницы;
4. рекламный блок;
5. дополнительные материалы.

Они быстро загружаются на смартфонах с медленным или нестабильным интернетом. В выдаче Турбо-страницы помечаются пиктограммой в виде ракеты. В целом, это rss — только страницы)

Зачем это владельцам сайтов?

Читаем в справке:

Сообщение Турбо-страницы — замена мобильной версии сайта в Яндексе! ч.1 появились сначала на ConsultApp.ru.

Аффилиат-фильтр — фильтр, который сильно занижает позиции всех сайтов группы аффилиатов, за исключением наиболее релевантного.

Чаще всего данный фильтр накладывается автоматически. Но возможно наложение и в ручном режиме после жалобы конкурентов.

По каким критериям поисковая система осуществляет поиск аффилиатов:

1. Одинаковые контактные данные на сайтах (телефон, email, название компании);
2. Схожесть доменных имен, названий компаний, логотипов;
3. Скопированная или похожая информация на разных сайтах;
4. Схожесть дизайна или структуры сайта;
5. Одинаковый каталог услуг или товаров;
6. Один прайс-лист;
7. Один хостинг;
8. Наличие комбинированных данных с разных ресурсов (например, указан адрес, встречающийся на одном сайте, а телефон — на другом);
9. Переадресация телефонного звонка с разных номеров на одну компанию (выявляется при ручной проверке);
10. Внимание! В этот момент они уже придумывают что-то новое.

Поводом для того, чтобы система тщательно проверила сайты на наличие аффилиатов, могут быть пересекающиеся аккаунты систем статистики (например, в Яндекс.Метрике), размещения контекстной рекламы (Яндекс. Директ), вспомогательных инструментов (Яндекс.Вебмастер).

Иногда поисковая система может принять за аффилиаты неоптимизированные сайты, где некорректно настроен редирект, либо сайты одной компании различной тематики, где дублируется одна и та же общая информация (к примеру, контактные данные).

Если ваш сайт попал под аффилиат-фильтр Яндекса, то на возвращение в ТОП потребуется несколько месяцев и частая переписка со службой поддержки поисковика.

Как не попасть под фильтр?

Чтобы не попасть под этот фильтр, следует соблюдать следующие правила:

1. Закрыть сайты-аффилиаты от индексации или сделать их неосновными зеркалами продвигаемого ресурса;
2. Изменить один из аффилиатов так, чтобы сайты относились к разным направлениям деятельности и продвигались по разным запросам.

Выбор одного из вышеперечисленных вариантов зависит от многих факторов: ограничений на сайте, возможностей SEO-специалиста, требований владельца ресурса.

Вывод

Если вы собираетесь создать одну или несколько копий сайта, перед тем как проводить их внутреннюю оптимизацию и начинать продвижение, убедитесь, что все возможные причины аффилированности сайтов устранены. А еще лучше — не создавайте клонов. Сайтам, не нарушающим требования поисковых систем, санкции не страшны.

Сообщение Сайты-аффилиаты: Что это? Как не попасть под фильтр? появились сначала на ConsultApp.ru.

Сообщение WebArchive Folderizer: Как распаковать веб-архив Safari? появились сначала на ConsultApp.ru.

Кеширование должно применяться ко всем кешируемым статическим ресурсам, а не только к некоторым из них. Кешируемые ресурсы включают файлы JavaScript и CSS, графические и другие файлы (файлы PDF, мультимедиа и т. д.).

Для включения кеширования необходимо в файл .htaccess добавить следующие строки:
# кеш браузера
<ifModule mod_expires.c>
ExpiresActive On
#по умолчанию кеш в 5 секунд
ExpiresDefault "access plus 5 seconds"
# по типам файлов
ExpiresByType text/html "access plus 15 min"
ExpiresByType image/x-icon "access plus 7 day"
ExpiresByType image/jpeg "access plus 7 day"
ExpiresByType image/png "access plus 7 day"
ExpiresByType image/gif "access plus 7 day"
ExpiresByType application/x-shockwave-flash "access plus 7 day"
ExpiresByType text/css "access plus 7 day"
ExpiresByType text/javascript "access plus 7 day"
ExpiresByType application/javascript "access plus 7 day"
ExpiresByType application/x-javascript "access plus 7 day"
ExpiresByType application/xhtml+xml "access plus 7 day"
# нестандартные шрифты
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

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

Возможно указание следующих временных интервалов:

• month
• weeks
• days
• minutes
• seconds

Сообщение Как включить кеш браузера для сайта в .htaccess? появились сначала на ConsultApp.ru.

Важно в нем то, что сжатые изображения сразу заменяют оригинал, не меняя имени файла, что удобно при обработке большого количества изображений например для сайтов. А также обладает минималистичным дизайном, который служит только одной функции — быстро обработать файлы. Данная программа способна работать и с PNG изображениями, а не только JPG. Что является ее большим плюсом.

Для сжатия изображений достаточно перетянуть их в окно программы или добавить с помощью «+». Так же возможно перетянуть в программу целые папки, при этом вложенность не изменится. Сразу после этого начинается обработка и сохранение результатов (Внимание! Исходные фалы будут перезаписаны.).

Программа не содержит большого количества настроек и они все понятны:

• Основные — выбираем способы сжатия и удаляемые метаданные;

  

• Качество — выбираем выходное качество, чем больше ухудшаем, тем меньше размер файла. 80-90% от исходного качества практически не видны глазу, а размер файлов уменьшается;

  

• Скорость оптимизации — настройка абсолютно бесполезна, в челом программа работает достаточно быстро и у меня стоит по-умолчанию.

Ответы на частые вопросы по работе программы от разработчиков

Чем ImageOptim отличается от TinyPNG, MozJPEG или Guetzli?

Вы можете получить то же самое сжатие или улучшить его, если включите параметр минимизации Lossy в настройках ImageOptim.

Такие инструменты, как ImageAlpha / pngquant / TinyPNG / JPEGMini / MozJPEG, делают файлы меньше, используя сжатие с потерями, что снижает качество изображения, которое ImageOptim не делает по умолчанию, но может, если вы его разрешите.

Могу ли я сохранить встроенную информацию об авторских правах, информацию о камере?

Да. Снимите флажок «Сбрасывать метаданные JPEG» в «Настройках».

Файлы PNG обрабатываются медленно. Как я могу сделать это быстрее?

В настройках снимите флажок PNGOUT и Zopfli. Без этих инструментов оптимизация будет работать намного быстрее, но будет немного менее эффективной.

Будет ли ImageOptim в App Store?

Нет, и, пожалуйста, остерегайтесь подделок в App Store! Apple уже продала три экземпляра.

ImageOptim предоставляется бесплатно на условиях, которые в основном говорят: «Вы можете делать все, что хотите, кроме того, что освобождаете эту свободу от других». Apple не допускает таких разрешительных терминов. Apple требует, чтобы все пользователи App Store принимали DRM (защиту от копирования) и юридические ограничения в EULA iTunes.

Вы можете получить ImageOptim без DRM. Его лицензия позволяет вам делиться ею, изменять ее, использовать ее в любой стране мира — даже продать ее — если вы не запретите кому-либо еще делать то же самое.

Где скачать ImageOptim

Программа бесплатная и доступна для скачивания на сайте разработчиков.

Сообщение Сжатие изображений JPEG, PNG на MacOS появились сначала на ConsultApp.ru.

Решение

1. Для начала надо получить саму конфигурацию, а так как часто она при покупке лицензии спрятана в exe установщике, то нужен компьютер на Windows, где запускаем установщик и устанавливаем все по умолчанию, если есть платформа 1С, то можно только конфигурацию;
2. В папке %AppData%\1C\1cv8\tmplts\1c ищем папку с нашей конфигурацией и копируем ее на мак например в документы;
3. На маке запускаем 1С предприятие и нажимаем кнопку «Настройка», в «Каталоги шаблонов конфигураций и обновлений» добавляем путь к нашей конфигурации, нажимаем «ОК»;
4. Закрываем платформу;
5. Запускаем 1С с администраторскими правами, для этого в терминале пишем: sudo /opt/1cv8/8.3.9.2170/1cv8, вводим пароль администратора;
6. Создаем новую конфигурацию из загруженного нами шаблона:
7. Запускаем и получаем лицензию, только сейчас уже запрашивается нужный пин-код;
8. Если проблема сохранилась, то можно попробовать проверить права на доступ к папке /var/1C/licenses/;
9. Все вышесказанное делалось на технологической платформе 1С 8.3.

Вывод

Работа с 1С, которая зачастую и так не усыпана розами, на Мак может доставить гораздо больше проблем, чем на Windows. Позиция 1С по этому вопросу примерно такая: «Обращаем Ваше внимание, что хотя есть вариант платформы 1С:Предприятия для MAC, но эта платформа имеет больше ошибок, чем платформа для Windows, а некоторые дистрибутивы конфигурации  под MAC OS не тестируются».

Сообщение Получение лицензии не ПРОФ конфигурации 1С на Мак ОС появились сначала на ConsultApp.ru.

Ценники на многие вещи начинаются с «не дешево» и заканчиваются в космосе, по-этому есть смысл покупать то, что можно использовать впоследствии в походах, зимой и тд. Все остальное можно взять в аренду на месте, говорят там огромный выбор. Некоторое снаряжение дублирует друг друга, например высокогорный пуховик можно заменить теплой кофтой и курткой-мембраной, все зависит от температуры.

Список снаряжения

Итак, мой список с собранными советами по некоторым пунктам. Разделим снаряжение на группы:

• Нижний слой одежды;
• Средний слой одежды;
• Верхний слой одежды;
• Экипировка;
• Разное;
• Аптечка.

Нижний слой одежды

1. Термо носки теплые — 4 пары (это конечно избыточно, но я не жалел по этому поводу);
2. Термо носки легкие (современные материалы) 4 пары;
3. Термобелье спорт — основной элемент, должен отводить влагу от тела, не должно быть теплым!;
4. Термобелье теплое — на крайний случай, я с собой взял (Оказалось нужно для штурма, в целом очень важно правильно оценивать погоду во время выходов — не перегреваться важней, чем чуть-чуть подмерзнуть на мой взгляд);
5. Нижнее термобелье легкое 3 шт. (знающие люди говорят, что очень помогает);
6. Нижн белье + носки — много (если будет где стирать — лишнее, тк по мелочи набирается куча барахла);
7. Плавки (купаться можно в водопаде Девичьи косы например, хотя там народ и в термухах залезал).

Средний слой одежды

1. Флисовая кофта или SoftShell — тонкий флис;
2. Флисовая кофта — очень толстый флис, полартрек (Если есть пуховка, то брать не нужно);
3. Утепляшка штаны — очень толстый флис, полартрек;
4. Buff на горло — синтетика;
5. Балаклава;
6. Кепка или Панамка;
7. Футболки, хлопковые, кол-во по вкусу;

Верхний слой одежды

1. Ботинки трекинговые — 2000-4000 метров, ботинок износостойкий, защита голеностопа (разносить после покупки — не менее 2 месяцев);
2. Куртка мембрана — по типу Гортекс (на сам гортекс ценник космический, тут по вкусу) — без швоф на плечах (рюкзак не давит), карманы выше обычных (не мешает альп обвязке), вентиляционные отверстия, капюшон, дышимость от 10 000 (Самая крутая вещь, спасает постоянно);
3. Штаны самосбросы, сноуборд штаны или тп — 5000 дышымость, мембрана желательна;
4. Флисовые перчатки 2-3 пары (менять, если намокли);
5. Перчатки утеплённые (на синтепоне, лыжные, сноубордические утепленные — мне не пригодились, было тепло и в целом почти без перчаток ходили, только на штурм);
6. Перчатки верхонки (В ПРОКАТЕ);
7. Ботинки высокогорные (пластик или тп) 5000+ (В ПРОКАТЕ);
8. Пуховка (Теплая куртка на 5000+) (В ПРОКАТЕ);
9. Бахилы или фонари, иногда называют гамаши (В ПРОКАТЕ);
10. Бивачная обувь — пуховые тапочки, для комфорта (не стал брать, в целом и в обычных кроссовках было нормально бегать по лагерю);
11. Шапка 2 шт. (непродуваемая).

Экипировка

1. Солнцезащитные очки — закрывают глаза с боков — степен защиты больше 3, вы должны спокойно смотреть не щурясь на яркое солнце — Обязательная вещь!;
2. Горнолыжная/сноубордическая маска, также со степенью защиты 3-4 (линза темная или зеркальная)(для фоток возможно или зимой, а так и очков нормальных хватает);
3. Штурмоввой рюкзак — объем 30 литров, у кого-то меньше, должен залезть термос, пара батончиков, крем, перчатки и пуховка или мембрана и верхонки, должно быть легко переодеваться из одного в другое;
4. GPS трекер — это никто не советовал, кроме человека, который попал зимой в метель на склоне, говорил видимость не дальше руки — так и не использовал, протаскал зря, если идете с гидом, то вещь явно излишняя;
5. Рюкзак грузовой на 80 литров для подъема (заброски) всех вещей в хижину, штурмовой лагерь на ночевку (подойдет спортивная сумка);
6. Обвязка альпинистская (В ПРОКАТЕ);
7. Ледоруб (В ПРОКАТЕ);
8. Телескопические палки — мягкая ручка (В ПРОКАТЕ, задумался о покупке, тк вещь очень интересная и сильно помогает при любых подъемах. Выкручивающиеся для удлинения палки — это постоянная проблема);
9. Спальник — вид утеплителя(пух(плохо переносит влагу и дорого), синтетика) + темпер. режим (комфорт(красный) — тепло спать 10-12 часов, средний(температура для мужчин, девочкам будет холодно скорей всего), экстрим(НЕ ориентируемся, переохлаждение))+вес+фил повер (насколько хор распушается после раскладки — для пуха);
10. Фонарик на голову (штурм начинается ночью + света нет вокруг хижины и палатки ночью, но не очень яркий, а то все слепнут вокруг и сам, тк от снега сильно отражается. При восхождении прям чтоб еле теплился под ноги себе и все).

Разное

1. Батарейки для GPS литий варта;
2. Нож — по вкусу, небольшой не повредит думаю;
3. Термос — хороший термос объемом не больше 1 литра;
4. Фляга (я не взял, не знаю зачем она);
5. Кружка;
6. Вилка + Ложка;
7. Накидка на рюкзак от дождя;
8. Внешний аккумулятор (power bank);
9. Губная помада гигиеническая с UF фактором;
10. Крем от загара с максимальным фактором — ОБЯЗАТЕЛЬНО!;
11. Предметы личной гигиены, только самое необходимое;
12. Непромокаемый чехол под документы.

Аптечка

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

1. Колдрекс — болеть грустно, особенно в горах, где можно перепутать синдромы простуды или ОРВИ с горной болезнью;
2. Стрепсилс — горло (или кому что по вкусу);
3. Трентал — сосуды, кровообращение(?);
4. Аспирин — простуда, головная боль и тп;
5. Ксимелин спрей — заложенный нос явно не поможет на восхождении;
6. Цитрамон — головная боль;
7. Что-то для желудка на всякий случай;
8. Аскорбиновая кислота — помогает с усвоением кислорода на высоте.
9. Брать только то, что понимаете 100%, тк все равно не сможете использовать вовремя, стрепсилс — ок, колдрекс — возможно, трентал — эммм…

Вместо заключения

Многое из списка я буду использовать первый раз, во всяком случае в условиях высокогорья точно, так что голову на плечах никто не отменял. Выбирайте снаряжение в поход, понимая зачем берете ту или иную вещь. Как её будете использовать, нести и тд. Удачного похода! (Если сомневаетесь — идти или нет, идти обязательно!)

Сообщение Снаряжение на Эльбрус появились сначала на ConsultApp.ru.

Что такое wp json oembed 1.0?

Wp json это нововведение от версии WordPress 4.4 и выше. Разработчики ввели новый API REST, который создает кучу мусорных страниц в виртуальной директории wp-json.

WordPress REST API – это общий интерфейс данных и программирования, который позволяет считывать и записывать информацию в WordPress через разные приложения. Это позволяет разработчикам, которые нацелены на работу с WordPress, не углубленно разбираться в WP.

Как отключить WordPress REST API?

Как и обычно, добавляем следующий код в конец файла «functions.php» в теме. Сделать это можно в редакторе темы WordPress или напрямую в файле через FTP на сервере например.

Внимание!!! Данный метод может сломать работу некоторых планигов и в целом работу json (Например Contact From 7). Обязательно сделайте полный бекап перед изменением файлов!!!

// Отключаем сам REST API
add_filter('rest_enabled', '__return_false');
// Отключаем фильтры REST API
remove_action( 'xmlrpc_rsd_apis', 'rest_output_rsd' );
remove_action( 'wp_head', 'rest_output_link_wp_head', 10, 0 );
remove_action( 'template_redirect', 'rest_output_link_header', 11, 0 );
remove_action( 'auth_cookie_malformed', 'rest_cookie_collect_status' );
remove_action( 'auth_cookie_expired', 'rest_cookie_collect_status' );
remove_action( 'auth_cookie_bad_username', 'rest_cookie_collect_status' );
remove_action( 'auth_cookie_bad_hash', 'rest_cookie_collect_status' );
remove_action( 'auth_cookie_valid', 'rest_cookie_collect_status' );
remove_filter( 'rest_authentication_errors', 'rest_cookie_check_errors', 100 );
// Отключаем события REST API
remove_action( 'init', 'rest_api_init' );
remove_action( 'rest_api_init', 'rest_api_default_filters', 10, 1 );
remove_action( 'parse_request', 'rest_api_loaded' );
// Отключаем Embeds связанные с REST API
remove_action( 'rest_api_init', 'wp_oembed_register_route');
remove_filter( 'rest_pre_serve_request', '_oembed_rest_pre_serve_request', 10, 4 );
remove_action( 'wp_head', 'wp_oembed_add_discovery_links' );

В результате ссылка вида «<link rel=’https://api.w.org/’ href=’/wp-json/’ />» должна пропасть из кода страницы.

Сообщение Как убрать дубли страниц wp json oembed в WordPress появились сначала на ConsultApp.ru.

«Настоящим Федеральным законом регулируются отношения, связанные с обработкой персональных данных, осуществляемой федеральными органами государственной власти, органами государственной власти субъектов Российской Федерации, иными государственными органами (далее — государственные органы), органами местного самоуправления, иными муниципальными органами (далее — муниципальные органы), юридическими лицами и физическими лицами с использованием средств автоматизации, в том числе в информационно-телекоммуникационных сетях, …»

После редакции от 29.07.2017 стал обязательным почти для всех сайтов. До этого галочки о пользовательских соглашениях и хранении персональных данным можно было увидеть только у крупных интернет-магазинов и тп.

Кто является оператором персональных данных?

Вы являетесь оператором персональных данных, если на вашем сайте есть:

• Обратная связь
  • форма обратной связи;
  • заказ обратного звонка;
  • форма любой заявки.

• Продажи
  • корзина;
  • оплата;
  • доставка.

• Пользователи
  • Регистрация;
  • Авторизация;
  • Социальные сети.

• Email-маркетинг
  • Подписка на новости;
  • Авторизация;
  • Социальные сети.

Что нужно сделать?

1. Сделать предупреждающие чекбоксы на формах запроса почти любых данных;
2. Разместить документы на сайте — «Политика конфиденциальности» и «Пользовательское соглашение»;
3. Пройти регистрацию в Роскомнадзоре. (Если вы сомневаетесь, надо или нет высылать в Роскомнадзор уведомление — лучше вышлите).

Сообщение Закон «О персональных данных» 27.07.2006 N 152-ФЗ (ред. от 29.07.2017). Что делать? появились сначала на ConsultApp.ru.

Есть несколько вариантов борьбы с этими ссылками:

• Отключить их в файле functions.php темы сайта;
• Использовать разнообразные плагины, например Disable Feeds.

Отключаем ссылки в файле functions.php

Заходим в административную панель сайта. Переходим в «Внешний вид -> Редактор», где открываем файл functions.php. Дописываем в самый конец php код и сохраняем файл:

// убираем feed
function fb_disable_feed() {
wp_redirect(get_option('siteurl'));
}
add_action('do_feed', 'fb_disable_feed', 1);
add_action('do_feed_rdf', 'fb_disable_feed', 1);
add_action('do_feed_rss', 'fb_disable_feed', 1);
add_action('do_feed_rss2', 'fb_disable_feed', 1);
add_action('do_feed_atom', 'fb_disable_feed', 1);
remove_action( 'wp_head', 'feed_links_extra', 3 );
remove_action( 'wp_head', 'feed_links', 2 );
remove_action( 'wp_head', 'rsd_link' );


Все, ссылки из текста убраны. Обязательно проверяем результат, делаем поиск по исходному коды страниц «/feed». Ссылки должны исчезнуть из раздела <head>.

Плагин Disable Feeds

Плагин для WordPress —  Disable Feeds отключает все каналы RSS / Atom / RDF на вашем сайте. Все запросы для каналов будут перенаправлены на соответствующий HTML-контент.

Есть несколько вариантов настройки поведения плагина — перейдите в Настройки -> Чтение, чтобы увидеть их.

Когда плагин Disable Feeds активен. По умолчанию все каналы отключены, и все запросы для каналов перенаправляются на соответствующий HTML-контент.

Доступные варианты для управления плагином:

• Перенаправить запросы на соответствующий HTML-контент;
• Выдать сообщение об ошибке «Не найдено» (404).

Так же Вы можете отметить галочку: «Не отключать общий почтовый фид и общий канал комментариев.»

Сообщение Как убрать ссылки feed с сайта на WordPress появились сначала на ConsultApp.ru.

Оценка PageSpeed может составлять от 0 до 100 баллов. Чем больше оценка – тем лучше. Если страница набрала более 85 баллов, значит она загружается быстро. Обратите внимание, что PageSpeed Insights постоянно развивается, поэтому по мере добавления новых правил или усовершенствования аналитических алгоритмов оценка иногда меняется.

Вводим адрес сайта в строку для анализа. И нажимаем кнопку «Анализировать».

В итоге получаем 2 оценки:

Также Google подсказывает варианты для оптимизации сайта:

И, что самое приятное, часть работы делает за нас. Предлагает скачать оптимизированные css, js и картинки. Которые аккуратно (с предшествующим бекапом оригиналов естественно) можно закинуть на сайт, таким образом оптимизировав хотя бы эти файлы.

Сообщение Оценка скорости загрузки сайта появились сначала на ConsultApp.ru.

Зачем делать кластеризацию?

• Можно сэкономить много времени при группировке ключевых слов для SEO или контекста — в 10-30 раз быстрее чем вручную;
• Сгруппированные по выдаче ключевые слова, которые гарантированно выходят в ТОП поисковых систем.

Простейший алгоритм кластеризации с нуля

1. Придумываем базовые слова по которым нас могут искать пользователи, можно использовать способ перемножения сущностей, например перемножить «действие*продукт*тип_1..n*города_поиска»;
2. Собираем семантическое ядро — вооружаемся программой SlovoEb или подобными, загружаем список и предыдущего пункта и собираем все, что можно включая поисковые подсказки. После чего собираем базовую частотность для всего списка, если не собралась автоматически;
3. Убираем совсем низкочастотные ключи, использовать меньше 5-10 не надо. Сортируем по частотности и убираем лишние;
4. Загружаем полученную таблицу «ключ+частотность» в кластеризатор, например Rush Analytics, и получаем полностью кластеризованные запросы.

Основной красотой этого метода я вижу практически полное отсутствие необходимости лезть в чтение ключей до получения нормального — структурированного, отфильтрованного и релевантного поиску семантического ядра, с которым дальше уже можно работать вручную.

Сообщение Кластеризация семантического ядра появились сначала на ConsultApp.ru.

Сервисы по контролю за сайтом

Для контроля за основными показателями посещаемости, внешними ссылками и т.д. сайта отлично подойдут бесплатные сервисы от Yandex и Google, тем более, что рейтинг в тих системах нас в основном и интересует, просто регистрируем аккаунты в этих системах и устанавливаем следующие инструменты:

• Яндекс Метрика;
• Яндекс Вебмастер;
• Google Analytics;
• Google Search Console.

В каждом есть свои интересные инструменты. Пробежавшись быстро по меню, сможете определить начальные действия по сайту.

Настройка robot.txt

Robots.txt — текстовый файл, который содержит параметры индексирования сайта для роботов поисковых систем.Находится в корне сайта. Основные необходимые теги и разделы это:

• User-agent — указывает для какой поисковой системы создаем правила
• Allow, Disallow — разрешаем, запрещаем индексирование разделов;
• Sitemap — ссылка на файл sitemap сайта;
• host — указываем адрес сайта, который мы считаем главным (например используя www или нет)

User-agent

Указывает для какой поисковой системы мы создаем правила, например:
User-agent: Yandex # для Yandex
User-agent: * # для всех поисковых систем
Также можно указывать правила для отдельных роботов поисковиков, например робот, который ищет картинки и т.д., точнее можно посмотреть в справках необходимых поисковых систем.

Disallow

Тег Disallow скрывает от индексирования указанные разделы сайта. Для начала прячем служебные папки и файлы например нашей CMS за тегом Disallow:
User-agent: Yandex
Disallow: / # блокирует доступ ко всему сайту
User-agent: Yandex
Disallow: /cgi-bin # блокирует доступ к страницам,
# начинающимся с '/cgi-bin'

Стоит отметить, что большинство CMS самостоятельно умеют прятать от поисковиков служебные файлы и папки.

Allow

Тег Allow наоборот указывает разрешенные разделы для индексации, однако все, что не запрещено Disallow, все равно скорей всего будет проиндексировано. Необходимость возникает, только если надо разрешить какой-то раздел внутри заблокированного сегмента. При конфликте между двумя директивами с префиксами одинаковой длины приоритет отдается директиве Allow.
User-agent: Yandex
Allow: /cgi-bin
Disallow: /
# запрещает скачивать все, кроме страниц
# начинающихся с '/cgi-bin'

Sitemap

Тег sitemap указывает на файл с картой сайта, что ускоряет индексацию нового сайта поисковиками.
sitemap: http://your_site.ru/sitemap.xml

Host

Если у сайта есть зеркала, специальный робот определит их и сформирует группу зеркал сайта. В поиске будет участвовать только главное зеркало. Вы можете указать его для всех зеркал в файле robots.txt: имя главного зеркала должно быть значением директивы Host. Это не гарантирует 100% выбор поисковой системой именно этого зеркала в качестве главного, но сильно повышает его рейтинг.
Чаще всего, просто указываем адрес сайта, т.к. поисковые системы все равно будут выдавать рекомендации о наличии этой строчки, например Яндекс в Вебмастере.
# если вы используете домен без www
Host: your_site.ru
# или используя www.
Host: www.your_site.ru

Настройка title, description, H1, H2, H3

Стоит немного обратить внимание на структуру самих страниц сайта. Для нас самое главное — это понимание посетителем и поисковиком о чем эта страница, что повысит заинтересованность обоих. Для этого важны базовые теги на странице, такие как:

• title — заголовок сайта(страницы сайта) в разделе HEAD, отражается в результатах поиска и названии вкладки
• H1, H2, H3 — заголовки в теле страницы, раздел BODY. С увеличением нумерации, уменьшается важность заголовка.
• description — краткое описание страницы,

<Title>

Заголовок сайта(страницы сайта) в разделе <HEAD>, отражается в результатах поиска и названии вкладки. Крайне важен для поисковых роботов. Обычно примерно равен <H1>.

<H1>

Заголовок страницы, должен полностью отражать суть контента. Крайне важен для поисковых роботов. Главная ключевая фраза страницы (ключ, по которому мы будем продвигать ее) обязательно должна входить в <H1> и <Title>. Должен быть краток и лаконичен.

<H2>, <H3>

С помощью этих тегов, генерируется основная структура текстовой информации страницы. В них можно включать второстепенные для данной страницы ключевые фразы. Дальнейшие номера заголовков H4-6 практически не влияют на поисковики, да и текст будет слишком усложнен.

Внешний вид текста

Внешний вид текста в любых тегах, а особенно H1-3, желательно задавать внутри файла CSS, не стоит перегружать html код. HTML это все таки инструмент для разметки теста, для внешнего вида и управления есть классы и стили, задаваемые в CSS.

Регистрация в справочниках. Яндекс.Справочник

Прежде всего идет речь про регистрацию в Яндекс.Справочнике, что поможет Яндексу быстрее понять серьезность компании и ее региональность, помимо той, которую укажете в Вебмастере. Тут будут проверять звонком из Яндекса. Так что есть смысл указывать только настоящие данные.

Сообщение Перед началом работы по СЕО появились сначала на ConsultApp.ru.