13.04.2022by natoduaadmin_nertyOpencart SEO Web Брендинг Интернет-магазины Корпоративные сайты и блоги Маркетинг Оптимизация и ускорение

Фронтенд-новости №1 | Веб-студия Nat.od.ua

Фронтенд-новости №1

Дайджест новостей из мира фронтенд-разработки за последнюю неделю 5—11 апреля.

Спецификации

Опубликован первый рабочий черновик (First Public Working Draft) Region capture.

Последний призыв к рассмотрению предлагаемых изменений в Media Queries Level 3.

W3C приглашает к реализации WebXR Device API.

Спецификации preload становится отключенным черновиком (Discontinued Draft), чтобы продолжить развитие в HTML living standard.

Письмо генерального директора W3С к 33-й годовщине интернета.

Больше новостей о HTML, CSS, JavaScript и инструментах разработчика — под катом.

Больше новостей

11.04.2022by natoduaadmin_nertyOpencart SEO Web Брендинг Интернет-магазины Корпоративные сайты и блоги Маркетинг Оптимизация и ускорение

Legal design и договор о сайте / Хабр | Веб-студия Nat.od.ua

Legal design и договор о сайте / Хабр

Дизайн-мышление — модный тренд, который за время пандемии добрался и до юристов. Если законы все еще пишут крючковатым языком, то юристы, занятые в частном секторе (B2B, судебные юристы и т.д.), стремятся сделать документы не только выигрышными, но и понятными.

Margaret Hagan полагает, что с помощью Legal design многообещающие и полезные юридические идеи и концепции могут быть разработаны быстро и эффективно.

Я с ней соглашусь и, имея 8+ летний опыт работы юристом, добавлю, что «задизайненный» договор гораздо быстрее заключить. Однако нельзя попадаться в ловушку «хороший дизайн = простота» и удалять элементы, кажущиеся избыточными, ведь они могут иметь важное правовое значение.

Алгоритм составления договора о сайте через призму Legal design

Определиться с содержанием услуг, их объемом, сроками оказания и ценой
Предоставить гарантии заказчику по работоспособности сайта
Договориться о порядке взаимодействия с заказчиком
Ввести ответственность сторон
Сформировать разделы договора
Подготовить пояснения условий договора
Предложить альтернативы некоторым условиям

Как результат, такая рыба договора ускорит процесс заключения договора, а способность ясно описать услугу и предложить альтернативы по ее цене и объему привлечет нового клиента.

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

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

Некоторые мифы заключения и исполнения договора

Необходима физическая передача всех материалов, исходников и графики (пишет Stan_1 )

Это утверждение не универсально и не применимо к каждому виду договора на разработку. Если говорить о сайте — это составное произведение, которое не используется иначе, чем в электронном виде. Поэтому для юриста/ бухгалтера (для учета расходов организации на покупку сайта) достаточно акта об оказанных услугах и электронного письма, которым передан сайт, ссылки на скачивание, ключи доступа и т.п..

Данная практика основана на широком распространении электронного взаимодействия, разъяснениях судебных инстанций к статьям 160 и 165.1 ГК РФ.

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

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

2020-2021 годы в корне развеяли это предубеждение юристов и бухгалтеров. Ранее упомянутая статья 160 ГК РФ позволяет заключать договоры даже путем обмена подписанными сканами документа по e-mail. Кроме того, в ГК РФ есть концепция договора-оферты: направляете Договор-оферту и счет на его оплату (или оплату одного из этапов работ) и договор считается заключенным с момента оплаты счета. А в рамках B2B распространяется заключение договора через системы электронного обмена документами (Контур.Диадок и т.д.)

Заказчик противится указанию авторства на сайте (по мотивам комментария)

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

Право на изменение произведения должно быть получено явно

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

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

По моему опыту проще и яснее указать цену. А вот в части вознаграждения прописать, что оно включено в цену. Если же это не договор авторского заказа, а договор услуг/ работ или купли-продажи, то выделять вознаграждение не обязательно.

Заказчик всегда может отказаться платить и ничего с этим не поделаешь

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

Legal design в договоре о сайте

Legal design структурирует не только форму, но и мысли, концепции, взаимодействие людей. Дизайн-мышление упрощает переговоры, облегчает работу над проектом, делая юридические моменты понятными, легко объяснимыми и правильно применимыми.

Остаюсь на связи и жду ваших вопросов и комментариев.

Теги: Разработка сайтов Договор Управление проектами Маркетинг

Хабы: Разработка веб-сайтов

10.04.2022by natoduaadmin_nertyOpencart SEO Web Брендинг Интернет-магазины Корпоративные сайты и блоги Маркетинг Оптимизация и ускорение

Разница между python и php / Хабр | Веб-студия Nat.od.ua

Разница между python и php / Хабр

Год назад я полностью перешел в разработку на Python. До этого около 4-х лет писал в основном на PHP. В процессе работы я постоянно сравнивал эти 2 языка и сейчас решил уложить это все в одной статье, чтобы структурировать плюсы и минусы. Для вас эта статья может быть полезна, чтобы разобраться, какой выбрать для ваших задач.

Качество документации кода

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

Возьмем для примера самые популярные либы http клиентов: guzzle — для php и requests — для python.

Откройте любой класс в requests и вы увидите, что почти каждый публичный метод имеет параметр **kwarg, что означает — какой-то набор именованных аргументов. Не для всех аргументов есть описание типа. И так почти во всех либах. Даже в нативных библиотеках не используется типизация (обсуждение на stackoverflow).

В guzzle все методы имеют понятный интерфейс с описанием и указанными типами. В php в целом культура описания кода выше. Часто вы сможете использовать либы даже не открывая документацию, а посмотрев исходный код. На python вам почти всегда придется посмотреть примеры использования в документации и только потом понять, как сделать то, что вы хотели сделать.

Синтаксис языка

Python явно проще для чтения. Хорошо написанный код будет выглядеть почти как обычный текст написанный на английском языке.

Когда переходишь с php на python, первое время непривычно учитывать наличие декораторов и контекстных менеджеров в коде. Я считал это лишним синтаксическим сахаром. Но это оказалось делом привычки. Если использовать их правильно, то код становится проще.

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

@cache(ttl=120)
def foo(x) -> str:
…

Php же наоборот, содержит меньше синтаксического сахара и неявных конструкций. Это позволяет легче анализировать код линтерами и для автоподсказок в IDE (я пользуюсь phpStorm и pyCharm от Jetbrains).

Использование в веб приложениях

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

Рассмотрим самую распространенную схему работы веб сервера на php:

Веб сервер на PHP

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

В php гораздо больше веб фреймворков, позволяющих быстро создавать сайты, как простые, так и высоконагруженные. На момент написания статьи, наиболее популярные и известные мне это: yii, symphony, slim, laravel. У каждой из них есть либо свои ORM менеджеры, либо сторонние, с очень большой поддержкой. На python список фреймворков, сопоставимых по уровню поддержи, гораздо меньше, это: tornado, django, flask.

Для Python используются очень разные схемы. Часто это схема nginx -> WSGI -> python app. При использовании фреймворка tornado, прослойки для управления процессами вообще нет, все управление берет на себя сам фреймворк. Поэтому я делаю вывод, что python дает больше возможности в управлении сервером.

Варианты вебсервера на Python

На python гораздо проще написать, например, веб-сокет сервер, или разрабатывать в микросервисной архитектуре.

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

Python абсолютный лидер в этих сферах. Почти все самописные инструменты для devops или парсинга гораздо удобнее и быстрее делать на python. Я думаю, дело в том, что python позволяет очень быстро погрузиться в язык, не изучая глубоко синтаксис и позволяет понимать интуитивно, как использовать простые инструменты. Поэтому непрофессиональным разработчикам легче использовать python.

Для парсинга на python есть библиотека scrapy, аналогичной которой нет в php. Благодаря этому можно гораздо быстрее писать сложные парсеры.

Разработка моделей машинного обучения на php — это извращение, по моему мнению. Python с библиотеками sklearn, xgboost, pytorch, tensorflow, keras ушёл далеко вперед от остальных языков в плане разработки ML. Даже более низкоуровневые библиотеки, такие как numpy, scipy позволяют ученым делать сложные вычисления не вникая в особенность языка.

Выводы

Для веб разработки, в большинстве случаев, лучше подойдет php потому что:

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

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

Для других задач, таких как: парсинг, разработка ML моделей, простые утилиты — больше подходит python.

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

Ресурсы:
http://xandeadx.ru/blog/php/866
https://scrapy.org
https://ru.wikipedia.org/wiki/Список_ORM-библиотек
https://habr.com/ru/company/ruvds/blog/539098/
https://www.tornadoweb.org/en/stable/guide/running.html
https://www.php.net/manual/ru/install.fpm.php

03.04.2022by natoduaadmin_nertyOpencart SEO Web Брендинг Интернет-магазины Корпоративные сайты и блоги Маркетинг Оптимизация и ускорение

PHP Дайджест № 222/2 (22 февраля – 25 марта 2022) / Хабр | Веб-студия Nat.od.ua

PHP Дайджест № 222/2 (22 февраля – 25 марта 2022) / Хабр

Дисклеймер: Нет, это не дайджест авторства Романа Пронского. К сожалению, у меня нет достоверной информации — будет ли выходить его дайджест далее.

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

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

PHP

Вышли версии PHP 8.1.4, 8.0.17. Обновления в основном посвящены исправлению найденных багов.

RFC (Requests for Comments )

За прошедшее время было не так много событий вокруг RFC.

Allow null and false as stand-alone types

https://wiki.php.net/rfc/null-false-standalone-types

В этом RFC предлагается добавить в систему тайп-хинтинга PHP еще два типа: null и false. Данная возможность позволит писать примерно такой код:

class Foo {
public null $nil = null;
public function foo(null $v): null
{ /* … */ *}
}

// В стандартной библиотеке достаточно много функций, возвращающих int|false или string|false
// Например таких:
function strpos(string $haystack, string $needle, int $offset = 0): int|false
{ /* … */ *}

На всякий случай предлагается запретить декларацию типа ?null — видимо, от греха подальше 🙂

В момент, когда писалась статья, RFC находился на голосовании. Однако его принятие не вызывает никаких вопросов — результат голосования составляет 38 голосов «за» и 0 (ноль, а не null!) «против».

Undefined Variable Error Promotion

https://wiki.php.net/rfc/undefined_variable_error_promotion

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

Сейчас обращение к необъявленной ранее (например через операцию присваивания) переменной производит ошибку уровня E_WARNING, после чего значением переменной становится null, а код продолжает выполняться далее, со следующей строки.

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

В данном RFC предлагается заменить ошибку уровня E_WARNING на исключение класса Error. Голосование закончено, результат весьма предсказуем: 33 «за» и 8 «против», предложение будет реализовано в PHP 9.

Sealed Classes

https://wiki.php.net/rfc/sealed_classes

Новая возможность языка, появление которой, если предложение будет принято, возможно уже в PHP 8.2

Вкратце: возможность для классов (и интерфейсов) ограничивать список своих наследников (и реализаторов). Проще, наверное, показать на примерах:

sealed class Foo permits Bar
{
/* … */
}

class Bar extends Foo
{
/* обычное наследование, без особенностей */
}

class Baz extends Foo
{
/* фатальная ошибка этапа компиляции, наследование не разрешено */
}sealed interface HasPrice permits Product, Service
{
/* … */
}

class Product implements HasPrice
{
/* реализация интерфейса разрешена */
}

class Service implements HasPrice
{
/* реализация интерфейса разрешена */
}

class User implements HasPrice
{
/* ошибка, реализация интерфейса не разрешена! */
}

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

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

Новости фреймворковSymfonyLaravel

Представлен инструмент Translation Checker, позволяющий находить в вашем коде фразы, не покрытые переводами
Представлен пакет Telegraph, упрощающий работу с Telegram: создание ботов, работа с чатами, сообщениями и API Telegram
Вышел релиз инструмента Visit — клиент для просмотра HTTP-запросов и ответов в человеко-читаемом виде
Вышли версии Laravel 9.4, 9.5

Yii

Ввиду того, что сервис OpenCollective более недоступен в России, сообщество фреймворка открывает дополнительный сбор пожертвований в сервисе Boosty: https://boosty.to/yiisoft

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

Дополнительная информация может быть найдена здесь.

Инструменты и библиотеки

php-dry: библиотека для поиска дубликатов в вашем коде
sebastian/type: коллекция ValueObject-обёрток над нативными типами PHP
Laravel Optikey: пакет, позволяющий использовать первичные ключи типа UUID в Laravel
Image with text: библиотека, включающая в себя продвинутые возможности создания текста на изображениях.

Интересные статьиХабрДругие источники

Подготовлено при активном участии сообщества телеграм-чата «PHP Russian Talks».

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

01.04.2022by natoduaadmin_nertyOpencart SEO Web Брендинг Интернет-магазины Корпоративные сайты и блоги Маркетинг Оптимизация и ускорение

3 совета по удобным интерфейсам за март / Хабр | Веб-студия Nat.od.ua

3 совета по удобным интерфейсам за март / Хабр

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

Заставлять пользователя заново вводить email это плохой UX

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

Ох… И тут я довольно частенько обламываюсь. Все из-за того, что введенный ранее email сбрасывается, и мне приходится заново вводить его! Например, так сделано на сайте Preply.

Чтобы продемонстрировать, что я имею ввиду, попытаемся авторизоваться, введя email и неправильный пароль. После того, как мы не пройдем валидацию нажмем на ссылку «Forgot password» и перейдем на страницу, где введенный ранее email уже сброшен! И нам придется заново вводить его…

У меня 0 идей, почему нельзя сделать так, чтобы email добавлялся автоматически. Например, так реализовано на Booking.

Если мы попытаемся авторизоваться с неправильным паролем, а после ошибочной валидации нажмем на ссылку «Forgot your password?», то приложение перейдет на новую страницу, где ранее введенный email автоматически добавлен. Бинго!

Цифровая клавиатура упрощает ввод чисел

Долгое время мы были вынуждены использовать `type=»tel»` везде, где пользователям нужно было ввести числа. Например, на сайте Телеграмм при вводе кода авторизации вы увидите именно такую клавиатуру.

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

Я предлагаю использовать `inputmode=numeric`. Значение `numeric` позволяет показать клавиатуру только с числами. Поэтому пользователи гарантированно не ошибутся и будут быстрее вводить данные, делая это машинально и не концентрируясь на символах.

Глаголы более понятны, чем существительные

Существует подход использования существительных там, где пользователю нужно выполнить какое-то действие. Например, я нашел такой пример на сайте Etsy. Когда наводишь на иконку колокольчика, появляется подсказка «Updates» (Обновления).

Существительные в этом случае воспринимаются сложнее, потому что когда мы с вами изучали язык, мы узнали, что они представляют объект. Поэтому, когда мы видим существительное, мы подсознательно думаем «Какой это объект?» или «Что это означает?» или любой другой вопрос, который помогает нам получить информацию об объекте.

А вот если мы используем глаголы, то здесь наш мозг работает по другому. Мы знаем, что они представляют «действие». Поэтому, когда встречаем глагол мы думаем о действии. Для примера я покажу такую же ссылку на страницу уведомлений на Booking.

При наведении на иконку колокольчика появляется подсказка «View your notifications» (Посмотрите свои уведомления). Глагол «View» (Посмотрите) призывает к просмотру. Он буквально говорит «Посмотри». Поэтому пользователь, не задумываясь, нажмет на иконку, и получит более привычный опыт взаимодействия.

P.S. Помогаю делать интерфейсы более удобными и доступными. Если вам нужна помощь, то смело пишите [email protected].

31.03.2022by natoduaadmin_nertyOpencart SEO Web Брендинг Интернет-магазины Корпоративные сайты и блоги Маркетинг Оптимизация и ускорение

Чек-лист по SEO оптимизации для фронтенд разработчика / Хабр | Веб-студия Nat.od.ua

Чек-лист по SEO оптимизации для фронтенд разработчика / Хабр

Привет всем!

Сегодня хотелось бы затронуть тему SEO оптимизации, как ее проводить, для чего и что для этого надо. Как ни как, сейчас это один из мощных инструментов для жизни веб-сайта или приложения.

Что такое SEO

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

Как это работает

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

Как нам оптимизировать сайт для SEO

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

Нам как фронтенд разработчикам для этого надо позаботиться о следующих вещах:

Семантичная и структурированная верстка. На данный момент поисковики обращают внимание на семантику HTML, и если все на div-ах или таблицах, то сайт навряд ли попадет на первые строчки поискового запроса. Семантичная верстка наполняет смыслом теги, и структуры, которые мы создаем в HTML, и это облегчает роботам понимать где и что находится на странице нашего сайта.
Правильно использовать и структурировать заголовки на страницах. У каждой страницы должен быть один и единственный тег

, который считается основным заголовком и говорит о чем страница, далее должна соблюдаться вложенность заголовков, то есть h2, у вложенного в него элемента заголовок h3 и т.д.
Никогда не забывать alt атрибут у тега , таким образом мы объясняем роботам, что это за картинка.
Указать язык страницы, используя атрибут lang на теге .
Правильно указывать название страницы, то есть тег </strong>, он должен быть уникален для каждой страницы и быть длиною до 55 символов, помимо этого значение тега должно отличаться от значения от тега </p> <h1>.</p> </li> <li> <p>Использовать мета-тег <strong>description</strong>: тут пишется описание страницы, на каждую страницу оно должно быть уникальным и длиною до 150 символов.</p> </li> <li> <p>Подключить favicon и иконки для Apple Web Meta, Windows Tiles и прочие иконки</p> </li> <li> <p>Настроить и добавить OG-теги, то есть Open Graph теги: og:type, og:title, og:site_name, og:description, og:image, og:url, og:error для социальных сетей.</p> </li> <li> <p>Удалить комментарии в HTML, это в целом считается хорошей практикой, заливать сайт на продакшн без комментариев в коде/разметке.</p> </li> <li> <p>Подключать стили и скрипты и сторонние библиотеки и прочие не блокируя отрисовку сайта, можно использовать асинхронную загрузку сайта <strong><script async src="https://habr.com/ru/post/658351/..."></strong>.</p> </li> <li> <p>Обязательно иметь страницу ошибки 404.</p> </li> <li> <p>Оптимизировать производительность сайта, производительность и доступность сайта очень важна для поисковых движков, для этого надо:</p> <ul> <li> <p>Использовать как можно меньше узлов HTML, т.е. отказаться от лишних оберток в врестке.</p> </li> <li> <p>Оптимизировать картинки, кропать их до нужных размеров отображения и сжимать, лучше всего использовать формат webp, и fallback на jpg картники в браузерах, где не поддерживается формат webp. Помимо этого, если на странице много картинок, то лучше использовать ленивую загрузку картинок (lazy loading).</p> </li> <li> <p>Оптимизировать JS, удалить мертвый код, не использовать большие библиотеки, если из всей библиотеки вам нужен всего один или несколько методов. Писать код так, чтоб не было утечек памяти.</p> </li> <li> <p>Сжимать все файлы HTML, CSS, JS.</p> </li> </ul> </li> <li> <p>Если вы работаете над SSR(Server Side Rendered) приложениями, то не забыть про такие вещи как:</p> <ul> <li> <p>robots.txt - это конфиг файл, при помощи которого мы можем указать, какие директории, страницы могут индексировать роботы/пауки.</p> </li> <li> <p>sitemap.xml - это файл, который хранит в себе все пути к страницам, он нужен для того, чтоб роботам/паукам было проще найти те или иные страницы у вас на сайте.</p> </li> </ul> </li> <li> <p>Также, если вы пишите SSR или SPA приложение, то лучше хорошо подумать о том, как вы формируете <strong>навигацию(роутинг)</strong> в приложений. Навигация должна быть лаконичной, все вложенности должны быть сохранены, и соответствовать семантическим URL . К примеру, если у вас есть пользователь, и в личном кабинете пользователя есть страница "Мои оплаты", то стоит формировать навигацию, к примеру: https://example.com/profile/courses Где, https://example.com/ - хост, profile/ - роут до личного кабинета, courses/ - вложенная страница "Мои курсы"</p> </li> </ul> <p>Лучше с самого начала разработки думать о SEO оптимизации, как ни как, оно очень зависит от качества разработки, верстки и соблюдением мелочей, о которых легко забыть при разработке.</p> </div> </div> <div class="clear post_clear"></div><div class="gt3_post_footer"><div class="gt3_module_button_list"><a href="https://nat.od.ua/2022/chek-list-po-seo-optimizacii-dlja-frontend-razrabotchika-habr-veb-studija-nat-od-ua/">Read More</a></div> <div class="blog_post_info">  <div class="post_share_block"> <a href="javascript:void(0)"><span class="sharing_title">Share</span></a> <div class="post_share_wrap"> <ul> <li class="post_share-facebook"><a target="_blank" href="https://www.facebook.com/share.php?u=https://nat.od.ua/2022/chek-list-po-seo-optimizacii-dlja-frontend-razrabotchika-habr-veb-studija-nat-od-ua/" data-title="Facebook"><span class="fa fa-facebook"></span></a></li><li class="post_share-twitter"><a target="_blank" href="https://twitter.com/intent/tweet?text=Чек-лист%20по%20SEO%20оптимизации%20для%20фронтенд%20разработчика%20/%20Хабр%20|%20Веб-студия%20Nat.od.ua&url=https://nat.od.ua/2022/chek-list-po-seo-optimizacii-dlja-frontend-razrabotchika-habr-veb-studija-nat-od-ua/" data-title="Twitter"><span class="fa fa-twitter"></span></a></li><li class="post_share-pinterest"><a target="_blank" href="https://pinterest.com/pin/create/button/?url=https://nat.od.ua/2022/chek-list-po-seo-optimizacii-dlja-frontend-razrabotchika-habr-veb-studija-nat-od-ua/&media=https://nat.od.ua/wp-content/uploads/2022/03/chek-list-po-seo-optimizacii-dlja-frontend-razrabotchika-habr.jpg" data-elementor-open-lightbox="no" data-title="Pinterest"><span class="fa fa-pinterest"></span></a></li><li class="post_share-linkedin"><a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https://nat.od.ua/2022/chek-list-po-seo-optimizacii-dlja-frontend-razrabotchika-habr-veb-studija-nat-od-ua/&title=Чек-лист%20по%20SEO%20оптимизации%20для%20фронтенд%20разработчика%20/%20Хабр%20|%20Веб-студия%20Nat.od.ua&source=Web-студия%20NAT.od.ua" data-title="Linkedin"><span class="fa fa-linkedin"></span></a></li><li class="post_share-mail"><a target="_blank" href="mailto:?subject=%D0%A7%D0%B5%D0%BA-%D0%BB%D0%B8%D1%81%D1%82+%D0%BF%D0%BE+SEO+%D0%BE%D0%BF%D1%82%D0%B8%D0%BC%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D0%B8+%D0%B4%D0%BB%D1%8F+%D1%84%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4+%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%B0+%2F+%D0%A5%D0%B0%D0%B1%D1%80+%7C+%D0%92%D0%B5%D0%B1-%D1%81%D1%82%D1%83%D0%B4%D0%B8%D1%8F+Nat.od.ua&body=https://nat.od.ua/2022/chek-list-po-seo-optimizacii-dlja-frontend-razrabotchika-habr-veb-studija-nat-od-ua/" data-title="Email"><span class="fa fa-envelope"></span></a></li> </ul> </div> </div>  <div class="likes_block post_likes_add " data-postid="17544" data-modify="like_post"> <span class="fa fa-heart-o icon"></span> <span class="like_count">0</span> </div> </div> <div class="clear"></div> </div> </div> </div> </div> <div class="blog_post_preview format-standard-image"> <div class="item_wrapper"> <div class="blog_content"> <a href="https://nat.od.ua/2022/kak-rabotat-s-i18n-v-nuxt-js-habr-veb-studija-nat-od-ua/"><div class="blog_post_media"><a href="https://nat.od.ua/2022/kak-rabotat-s-i18n-v-nuxt-js-habr-veb-studija-nat-od-ua/"><img src="https://nat.od.ua/wp-content/uploads/2022/03/kak-rabotat-s-i18n-v-nuxtjs-habr-veb-studija-1170x700.jpg" alt="Как работать с i18n в Nuxt.js / Хабр" /></a></div></a><div class="listing_meta_wrap"><div class="listing_meta"><span class="post_date">31.03.2022</span><span class="post_author">by <a href="https://nat.od.ua/author/natoduaadmin_nerty/">natoduaadmin_nerty</a></span><span class="post_category"><a href="https://nat.od.ua/category/opencart/">Opencart</a><a href="https://nat.od.ua/category/seo/">SEO</a><a href="https://nat.od.ua/category/web/">Web</a><a href="https://nat.od.ua/category/branding/">Брендинг</a><a href="https://nat.od.ua/category/internet-magaziny/">Интернет-магазины</a><a href="https://nat.od.ua/category/blogs-sites/">Корпоративные сайты и блоги</a><a href="https://nat.od.ua/category/marketing/">Маркетинг</a><a href="https://nat.od.ua/category/optimization-speed-up/">Оптимизация и ускорение</a></span></div></div><h2 class="blogpost_title"><a href="https://nat.od.ua/2022/kak-rabotat-s-i18n-v-nuxt-js-habr-veb-studija-nat-od-ua/">Как работать с i18n в Nuxt.js / Хабр | Веб-студия Nat.od.ua</a></h2><p>Как работать с i18n в Nuxt.js / Хабр<br /> </p> <div xmlns="http://www.w3.org/1999/xhtml"> <p>Всем привет!</p> <p>Сегодня хотел поделиться несколькими фишками в работе с i18n.</p> <p><strong>i18n</strong> – это фреймворк для интернализации веб-приложении. То есть, при помощи данного фреймворка мы легко можем реализовать мультиязычность в веб-приложениях.</p> <p><strong>Nuxt.js</strong> мощный инструмент для разработки веб-приложений. Помимо того, что он из коробки предоставляет много полезных утилит и инструментов, также, есть много дополнительных модулей из community, которые позволяют легко интегрировать разные инструменты в Nuxt.js. Посмотреть на сторонние модули для Nuxt.js можно здесь.</p> <p>Nuxt i18n</p> <p>Среди сторонних модулей, также есть модуль nuxt/i18n, который под капотом работает на vue-i18n. Данный модуль легко настраивается в Nuxt.js приложениях, достаточно просто в nuxt.config.js добавить модуль и настроить опции наиболее подходяще под проект:</p> <p>{<br /> …</p> <p> modules: ,<br /> i18n: {<br /> /* module options */<br /> },</p> <p> …<br /> }<br /> Работа с переводами</p> <p>После настройки модуля, можно уже работать непосредственно с переводами. Есть несколько способов работы с переводами. Вынести переводы в отдельные файлы, и хранить их там, хранить переводы непосредственно в nuxt.config.js (не рекомендуется), и хранить переводы в самих компонентах.</p> <p>Как лучше хранить переводы</p> <p>Если речь идет о переводах в виде названий кнопок, разных плашек и других переводов, которые используются в абстрактных компонентах, в атомах или молекулах при атомарном дизайне, то можно хранить подобные переводы в самих компонентах, так как они обычны лишены контекста:</p> <p><i18n><br /> {<br /> «ru»: {<br /> «viewers»: «зрителей»<br /> },<br /> «kk»: {<br /> «viewers»: «көрермендер»<br /> }<br /> }<br /> </i18n></p> <p><template></p> <p :class=""> {{ count }}<br /> {{ $t(‘viewers’) }} </p> <p></template></p> <p>Подробнее о подобном подходе хранения переводов можно ознакомиться тут.</p> <p>А вот если речь идет уже о словах или фразах, которые имеют какой-то контекст к проекту, которые часто встречаются в компонентах, то их желательно хранить как TypeScript или JSON файл в директорий src/i18n</p> <p>export const ru = {<br /> common: {<br /> all: ‘все’,<br /> },<br /> partners: ‘Организаторы | Партнеры | Организаторы и партнеры’,<br /> page_names: {<br /> home: ‘Главная | На главную’,<br /> contests: ‘Конкурсы | Конкурс’,<br /> events: ‘Мероприятия | Мероприятие’,<br /> faq: ‘Вопросы и ответы’,<br /> live_tournaments: ‘Live турниры’,<br /> rating: ‘Рейтинг’,<br /> shop: ‘Магазин’,<br /> streams: ‘Стримы | Стрим’,<br /> tournaments: ‘Турниры | Турнир’,<br /> },<br /> …<br /> }<br /> Множественность в переводах</p> <p>i18n позволяет хранить в одном ключе несколько вариации перевода, в том числе и множественности. К примеру, у нас есть слово “Конкурсы”, однако в некоторых местах у нас это же слово в единственном числе “Конкурс”. Хранить это в двух разных ключах неудобно и не эффективно. Поэтому для этого надо хранить данный ключ можно следующем образом:</p> <p>export const ru = {<br /> contests: ‘Конкурсы | Конкурс’,<br /> }</p> <p>А уже в компонентах, чтоб использовать данный перевод надо обращаться к методу $tc вместо $t:</p> <p><template><br /> <Heading><br /> {{ $tc(‘contests’) }} // на выходе будет ‘Конкурсы’<br /> </Heading><br /> </template></p> <p><template><br /> <Heading><br /> {{ $tc(‘contests’, 2) }} // на выходе будет ‘Конкурс’<br /> </Heading><br /> </template></p> <p>Данный функционал также можно использовать для слов синонимов, которые встречаются в проекте:</p> <p>export const ru = {<br /> partners: ‘Организаторы | Партнеры | Организаторы и партнеры’,<br /> }<br /> Переиспользование ключей переводов</p> <p>i18n также позволяет переиспользовать существующие ключи переводов и объединять их вместе:</p> <p>export const ru = {<br /> day: ‘день’,<br /> is_weekend: ‘выходной’,<br /> weekend: ‘@:day @:is_weekend’, // ‘выходной день’<br /> }<br /> Интерполяция переводов</p> <p>Бывают ситуации, когда надо интерполировать переводы. К примеру, мне надо выводить подобные текста:</p> <ul> <li> <p>с 24.02.2022 до 25.02.2022</p> </li> <li> <p>24.02.2022 бастап 25.02.2022 дейін</p> </li> <li> <p>from 24.02.2022 to 25.02.22</p> </li> </ul> <p>Дату я получаю с сервера, и дата должна быть обернута в HTML тег <time></time>. А на разных языках я имею разный шаблон перевода. Для этого можно использовать интерполяцию в i18n:</p> <p>export const ru = {<br /> date_range: ‘с {from} до {to}’<br /> }</p> <p>export const kk = {<br /> date_range: ‘{from} бастап {to} дейін’<br /> }</p> <p>export const en = {<br /> date_range: ‘from {from} to {to}’<br /> }</p> <p>В данном случае получается, что наши данные, которые мы хотим интерполировать мы прописываем в метках, как {from} / {to}.</p> <p>В итоге, в нашем компоненте, в шаблоне мы это прописываем следующим образом:</p> <p><i18n path="date_range" // ключ перевода tag="p" ><br /> <template #from><br /> <time>{{ start_date }}</time><br /> </template><br /> <template #to><br /> <time>{{ end_date }}</time><br /> </template><br /> </i18n></p> <p>Подробнее об интерполяции можно почитать в документации здесь.</p> <p>Очень сильно рекомендую вам ознакомиться и изучить документации модуля под Nuxt.js и самого Vue-i18n. Так как там описано много, и о многих утилитах в работе с этим инструментом:</p> </div> <div class="clear post_clear"></div><div class="gt3_post_footer"><div class="gt3_module_button_list"><a href="https://nat.od.ua/2022/kak-rabotat-s-i18n-v-nuxt-js-habr-veb-studija-nat-od-ua/">Read More</a></div> <div class="blog_post_info">  <div class="post_share_block"> <a href="javascript:void(0)"><span class="sharing_title">Share</span></a> <div class="post_share_wrap"> <ul> <li class="post_share-facebook"><a target="_blank" href="https://www.facebook.com/share.php?u=https://nat.od.ua/2022/kak-rabotat-s-i18n-v-nuxt-js-habr-veb-studija-nat-od-ua/" data-title="Facebook"><span class="fa fa-facebook"></span></a></li><li class="post_share-twitter"><a target="_blank" href="https://twitter.com/intent/tweet?text=Как%20работать%20с%20i18n%20в%20Nuxt.js%20/%20Хабр%20|%20Веб-студия%20Nat.od.ua&url=https://nat.od.ua/2022/kak-rabotat-s-i18n-v-nuxt-js-habr-veb-studija-nat-od-ua/" data-title="Twitter"><span class="fa fa-twitter"></span></a></li><li class="post_share-pinterest"><a target="_blank" href="https://pinterest.com/pin/create/button/?url=https://nat.od.ua/2022/kak-rabotat-s-i18n-v-nuxt-js-habr-veb-studija-nat-od-ua/&media=https://nat.od.ua/wp-content/uploads/2022/03/kak-rabotat-s-i18n-v-nuxtjs-habr-veb-studija.jpg" data-elementor-open-lightbox="no" data-title="Pinterest"><span class="fa fa-pinterest"></span></a></li><li class="post_share-linkedin"><a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https://nat.od.ua/2022/kak-rabotat-s-i18n-v-nuxt-js-habr-veb-studija-nat-od-ua/&title=Как%20работать%20с%20i18n%20в%20Nuxt.js%20/%20Хабр%20|%20Веб-студия%20Nat.od.ua&source=Web-студия%20NAT.od.ua" data-title="Linkedin"><span class="fa fa-linkedin"></span></a></li><li class="post_share-mail"><a target="_blank" href="mailto:?subject=%D0%9A%D0%B0%D0%BA+%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D1%82%D1%8C+%D1%81+i18n+%D0%B2+Nuxt.js+%2F+%D0%A5%D0%B0%D0%B1%D1%80+%7C+%D0%92%D0%B5%D0%B1-%D1%81%D1%82%D1%83%D0%B4%D0%B8%D1%8F+Nat.od.ua&body=https://nat.od.ua/2022/kak-rabotat-s-i18n-v-nuxt-js-habr-veb-studija-nat-od-ua/" data-title="Email"><span class="fa fa-envelope"></span></a></li> </ul> </div> </div>  <div class="likes_block post_likes_add " data-postid="17541" data-modify="like_post"> <span class="fa fa-heart-o icon"></span> <span class="like_count">0</span> </div> </div> <div class="clear"></div> </div> </div> </div> </div> <div class="blog_post_preview format-standard-image"> <div class="item_wrapper"> <div class="blog_content"> <a href="https://nat.od.ua/2022/javascript-redaktor-diagramm-kotoryj-otkryvaet-diagrammy-iz-png-kartinok-open-source-habr-veb-studija-nat-od-ua/"><div class="blog_post_media"><a href="https://nat.od.ua/2022/javascript-redaktor-diagramm-kotoryj-otkryvaet-diagrammy-iz-png-kartinok-open-source-habr-veb-studija-nat-od-ua/"><img src="https://nat.od.ua/wp-content/uploads/2022/03/javascript-redaktor-diagramm-kotoryj-otkryvaet-diagrammy-iz-png-kartinok-open-1170x700.gif" alt="Рис 1. dgrm.net умеет открывать диаграммы из PNG картинок" /></a></div></a><div class="listing_meta_wrap"><div class="listing_meta"><span class="post_date">30.03.2022</span><span class="post_author">by <a href="https://nat.od.ua/author/natoduaadmin_nerty/">natoduaadmin_nerty</a></span><span class="post_category"><a href="https://nat.od.ua/category/opencart/">Opencart</a><a href="https://nat.od.ua/category/seo/">SEO</a><a href="https://nat.od.ua/category/web/">Web</a><a href="https://nat.od.ua/category/branding/">Брендинг</a><a href="https://nat.od.ua/category/internet-magaziny/">Интернет-магазины</a><a href="https://nat.od.ua/category/blogs-sites/">Корпоративные сайты и блоги</a><a href="https://nat.od.ua/category/marketing/">Маркетинг</a><a href="https://nat.od.ua/category/optimization-speed-up/">Оптимизация и ускорение</a></span></div></div><h2 class="blogpost_title"><a href="https://nat.od.ua/2022/javascript-redaktor-diagramm-kotoryj-otkryvaet-diagrammy-iz-png-kartinok-open-source-habr-veb-studija-nat-od-ua/">JavaScript редактор диаграмм, который открывает диаграммы из PNG картинок (open source) / Хабр | Веб-студия Nat.od.ua</a></h2><p>JavaScript редактор диаграмм, который открывает диаграммы из PNG картинок (open source) / Хабр<br /> </p> <div xmlns="http://www.w3.org/1999/xhtml">Рис 1. dgrm.net умеет открывать диаграммы из PNG картинок</p> <p>dgrm.net | GitHub</p> <p><< предыдущая статья</p> <p>dgrm.net — это редактор диаграмм, с прицелом на трансформацию в карту знаний.</p> <p>Отличительные особенности:</p> <ul> <li> <p>аскетичность,</p> </li> <li> <p>работает на телефонах (одно из немногих web-решений),</p> </li> <li> <p>открытый исходный код.</p> </li> </ul> <p>В процессе разработки появляются интересные моменты. Статья про один из таких моментов: чтение данных из PNG. Исходный код для использования в своих проектах прилагается.</p> <p>Зачем открывать диаграммы из PNG изображений</p> <p>Пользовательские интерфейсы сделанные разработчиками славятся своей самобытностью. Возможно, идея использовать изображения в качестве файлов проекта как раз этот случай. Как минимум подход оригинальный.</p> <p>Все редакторы используют свои файлы проекта. Но это же неудобно:</p> <ul> <li> <p>нет превьюшек,</p> </li> <li> <p>при пересылке изображения, надо еще и исходник пересылать.</p> </li> </ul> <p>Удобнее иметь картинку диаграммы, которую при необходимости можно отредактировать.</p> <p>Глядя на рисунок 1 можно предположить что используется стеганография, или распознавание изображений. На самом деле гораздо проще, и без хаков — формат PNG поддерживает хранение дополнительной информации, например метки времени, имени автора, или любой другой.</p> <p>dgrm.net записывает в png-файлы JSON с данными диаграммы.</p> <p>PNG Chunks</p> <p>Формат PNG хорошо описан на Хабре в статье “PNG — not GIF!”.</p> <p>Основной момент:</p> <ul> <li> <p>png-файлы состоят из блоков, которые называются chunk-и,</p> </li> <li> <p>в файл можно добавлять свои chunk-и.</p> </li> </ul> <p>Рис 2. Структура одного chunk-a PNG (источник “PNG — not GIF!”)</p> <p>Для своих данных имя chunk-a (например “dgRm”):</p> <ul> <li> <p>Можно придумать любое, лишь бы оно не было зарезервировано;</p> </li> <li> <p>Длина имени строго 4 латинских буквы;</p> </li> <li> <p>Регистр букв имеет значение. Для самодельных chunk-ов ставьте все буквы в нижнем регистре, а 3-ю в верхнем.</p> </li> </ul> <p>Таким образом, для хранения строки JSON внутри файла PNG нужно добавить в файл свой chunk.</p> <p>Чтение/запись PNG chunk-ов на JavaScript в браузереЧтение chunk-а</p> <p>Chunk-и следуют друг за другом, нужный chunk находится перебором.</p> <p>Алгоритм поиска chunk-а (листинг 1):</p> <ol> <li> <p>берем название первого chunk;</p> </li> <li> <p>если название не совпадает с искомым:<br />a. берем длину chunk (первые 4 байта см. рис 2);<br />b. зная длину chunk смещаем курсор на начало следующего chunk.</p> </li> <li> <p>повторяем 1 и 2 пока не найдем нужный chunk или ‘IEND’ (конец файла).</p> </li> </ol> <p>/**<br /> * @param {ArrayBuffer} pngData<br /> * @param {number} chunkNameUint32 chunk name as Uint32<br /> * @returns {DataView | null} chunk data<br /> */<br /> function chunkGet(pngData, chunkNameUint32) {<br /> const dataView = new DataView(pngData, 8); // 8 byte — png signature</p> <p> let chunkPosition = 0;<br /> let chunkUint = dataView.getUint32(4);<br /> let chunkLenght;<br /> while (chunkUint !== 1229278788) { // last chunk ‘IEND’<br /> chunkLenght = dataView.getUint32(chunkPosition);<br /> if (chunkUint === chunkNameUint32) {<br /> return new DataView(pngData, chunkPosition + 16, chunkLenght);<br /> }<br /> chunkPosition = chunkPosition + 12 + chunkLenght;<br /> chunkUint = dataView.getUint32(chunkPosition + 4);<br /> }<br /> return null;<br /> }</p> <p>Листинг 1. Функция поиска chunk-а</p> <p><strong>Краткая справка:</strong></p> <p>В JavaScript интересный способ работы с бинарными данными.</p> <p>Цитата:<br />Объект ArrayBuffer используется для работы с бинарными данными. Он представляет собой ссылку на поток «сырых» двоичных данных, однако работать с ними напрямую возможности не даёт.<br />developer.mozilla.org</p> <p>Для чтения данных можно обернуть их в DataView. DataView позволяет прочитать данные в любой позиции в виде числа (с помощью методов getInt8(), getUint32() и др.).</p> <p>Запись chunk-а</p> <p>Для записи chunk-а, нужно вставить новый chunk в цепочку. Если chunk с данным именем уже есть — его нужно заменить.</p> <p>Реализацию можно посмотреть на GitHub — функция chunkSet.</p> <p>Исходный код</p> <p>Функции работы с PNG chunk-ами вынесены в один файл. У файла нет зависимостей, поэтому его можно просто скопировать в свой проект.<br />png-chunk-utils.js</p> <p>Пример использования:</p> <p>// Запись chunk-а, на выходе новый blob<br /> const newPngBlob = await pngChunkSet(<br /> // png-изображение<br /> pngBlob,<br /> // имя chunk-а<br /> ‘dgRm’,<br /> // значение chunk-а: строка в виде массива byte<br /> new TextEncoder().encode(‘…’));</p> <p>// чтение chuk-а<br /> const dgrmChunkVal = await pngChunkGet(newPngBlob, ‘dgRm’);<br /> const str = new TextDecoder().decode(dgrmChunkVal);</p> <p>Листинг 2. Вызов функций записи и чтения PNG chunk-ов</p> <p>Как поддержать проект</p> <ul> <li> <p>Начните использовать, расскажите что думаете.<br />Любым способом: комментарии, личные сообщения, на GitHub.<br />Все читаю, веду список предложений.</p> </li> <li> <p>Расскажите знакомым.</p> </li> <li> <p>Ставьте звездочки на GitHub.</p> </li> </ul> </div> <div class="clear post_clear"></div><div class="gt3_post_footer"><div class="gt3_module_button_list"><a href="https://nat.od.ua/2022/javascript-redaktor-diagramm-kotoryj-otkryvaet-diagrammy-iz-png-kartinok-open-source-habr-veb-studija-nat-od-ua/">Read More</a></div> <div class="blog_post_info">  <div class="post_share_block"> <a href="javascript:void(0)"><span class="sharing_title">Share</span></a> <div class="post_share_wrap"> <ul> <li class="post_share-facebook"><a target="_blank" href="https://www.facebook.com/share.php?u=https://nat.od.ua/2022/javascript-redaktor-diagramm-kotoryj-otkryvaet-diagrammy-iz-png-kartinok-open-source-habr-veb-studija-nat-od-ua/" data-title="Facebook"><span class="fa fa-facebook"></span></a></li><li class="post_share-twitter"><a target="_blank" href="https://twitter.com/intent/tweet?text=JavaScript%20редактор%20диаграмм,%20который%20открывает%20диаграммы%20из%20PNG%20картинок%20(open%20source)%20/%20Хабр%20|%20Веб-студия%20Nat.od.ua&url=https://nat.od.ua/2022/javascript-redaktor-diagramm-kotoryj-otkryvaet-diagrammy-iz-png-kartinok-open-source-habr-veb-studija-nat-od-ua/" data-title="Twitter"><span class="fa fa-twitter"></span></a></li><li class="post_share-pinterest"><a target="_blank" href="https://pinterest.com/pin/create/button/?url=https://nat.od.ua/2022/javascript-redaktor-diagramm-kotoryj-otkryvaet-diagrammy-iz-png-kartinok-open-source-habr-veb-studija-nat-od-ua/&media=https://nat.od.ua/wp-content/uploads/2022/03/javascript-redaktor-diagramm-kotoryj-otkryvaet-diagrammy-iz-png-kartinok-open.gif" data-elementor-open-lightbox="no" data-title="Pinterest"><span class="fa fa-pinterest"></span></a></li><li class="post_share-linkedin"><a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https://nat.od.ua/2022/javascript-redaktor-diagramm-kotoryj-otkryvaet-diagrammy-iz-png-kartinok-open-source-habr-veb-studija-nat-od-ua/&title=JavaScript%20редактор%20диаграмм,%20который%20открывает%20диаграммы%20из%20PNG%20картинок%20(open%20source)%20/%20Хабр%20|%20Веб-студия%20Nat.od.ua&source=Web-студия%20NAT.od.ua" data-title="Linkedin"><span class="fa fa-linkedin"></span></a></li><li class="post_share-mail"><a target="_blank" href="mailto:?subject=JavaScript+%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80+%D0%B4%D0%B8%D0%B0%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%2C+%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D1%8B%D0%B9+%D0%BE%D1%82%D0%BA%D1%80%D1%8B%D0%B2%D0%B0%D0%B5%D1%82+%D0%B4%D0%B8%D0%B0%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D1%8B+%D0%B8%D0%B7+PNG+%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BE%D0%BA+%28open+source%29+%2F+%D0%A5%D0%B0%D0%B1%D1%80+%7C+%D0%92%D0%B5%D0%B1-%D1%81%D1%82%D1%83%D0%B4%D0%B8%D1%8F+Nat.od.ua&body=https://nat.od.ua/2022/javascript-redaktor-diagramm-kotoryj-otkryvaet-diagrammy-iz-png-kartinok-open-source-habr-veb-studija-nat-od-ua/" data-title="Email"><span class="fa fa-envelope"></span></a></li> </ul> </div> </div>  <div class="likes_block post_likes_add " data-postid="17538" data-modify="like_post"> <span class="fa fa-heart-o icon"></span> <span class="like_count">0</span> </div> </div> <div class="clear"></div> </div> </div> </div> </div> <div class="blog_post_preview format-standard-image"> <div class="item_wrapper"> <div class="blog_content"> <a href="https://nat.od.ua/2022/telegram-bot-na-strazhe-porjadka-v-redmine-habr-veb-studija-nat-od-ua/"><div class="blog_post_media"><a href="https://nat.od.ua/2022/telegram-bot-na-strazhe-porjadka-v-redmine-habr-veb-studija-nat-od-ua/"><img src="https://nat.od.ua/wp-content/uploads/2022/03/telegram-bot-na-strazhe-porjadka-v-redmine-habr-veb-studija-1170x700.png" alt="Telegram-бот на страже порядка в Redmine / Хабр" /></a></div></a><div class="listing_meta_wrap"><div class="listing_meta"><span class="post_date">29.03.2022</span><span class="post_author">by <a href="https://nat.od.ua/author/natoduaadmin_nerty/">natoduaadmin_nerty</a></span><span class="post_category"><a href="https://nat.od.ua/category/opencart/">Opencart</a><a href="https://nat.od.ua/category/seo/">SEO</a><a href="https://nat.od.ua/category/web/">Web</a><a href="https://nat.od.ua/category/branding/">Брендинг</a><a href="https://nat.od.ua/category/internet-magaziny/">Интернет-магазины</a><a href="https://nat.od.ua/category/blogs-sites/">Корпоративные сайты и блоги</a><a href="https://nat.od.ua/category/marketing/">Маркетинг</a><a href="https://nat.od.ua/category/optimization-speed-up/">Оптимизация и ускорение</a></span></div></div><h2 class="blogpost_title"><a href="https://nat.od.ua/2022/telegram-bot-na-strazhe-porjadka-v-redmine-habr-veb-studija-nat-od-ua/">Telegram-бот на страже порядка в Redmine / Хабр | Веб-студия Nat.od.ua</a></h2><p>Telegram-бот на страже порядка в Redmine / Хабр<br /> </p> <div xmlns="http://www.w3.org/1999/xhtml"> <p>Невыдуманная история с хеппи-эндом, про то, как бот для Telegram увеличил выручку и упорядочил работу команды разработчиков.</p> <p><strong>Предыстория</strong></p> <p>Все началось с того, что в рабочем чате Telegram, где мы обмениваемся рабочими, не совсем рабочими и откровенно не рабочими сообщениями, решили делиться оценками качества булочек и пирожков из соседней пекарни. Булки там представлены в большом ассортименте и глаза около прилавка разбегаются.</p> <p>Договорились, что каждый, кто отведает пирожок, будет отписываться в чат и ставить оценку от 1 до 5. Со временем должна скопиться история дегустаций и мы сможем высчитать среднюю оценку каждой булочки.</p> <p>Пирожки кушаем, оценки ставим, время идет. Но кроме рейтинга хлебобулочных изделий, в рабочем чате и работа проскакивает, которая засоряет ленту. В итоге оценки булок смешались с обсуждениями задач. Миссия провалена, статистики нет. Но программисты же всегда могут найти решение. Тут мы вспомнили про Telegram-ботов. Можно и себе помощника электронного организовать. Сказано – сделано. Пару часов и готова первая версия бота, который принимает оценки в общем чате и делится драгоценной статистикой по запросу.</p> <p>Скриншот общения с ботом:</p> <p><strong>А что бот может ещё?</strong></p> <p>После запуска бота начали накидывать идеи, чему бы еще научить нашего электронного помощника. И понеслось. За рабочий день, в коротких перерывах между задачами, добавили несколько мелочей:</p> <ul> <li> <p>уведомление, что пора сходить на перекур;</p> </li> <li> <p>уведомление, что пора на обед;</p> </li> <li> <p>уведомление, что пора выпить кофе(с утра) или чаю(файв-о-клок).</p> </li> </ul> <p>Когда наигрались с ботом, задумались о действительно полезных функциях, которые могут упростить рабочий процесс. Вспомнили, что бывают проблемы с продлением SSL-сертификатов и доменов для клиентских сайтов. Не каждый хостинг поддерживает cron или автопродление, приходится регулярно заниматься этим в «ручном режиме». Продлить домен или сертификат не сложно, главное об этом вовремя вспомнить.</p> <p>Для бота эта задачка оказалась простая:</p> <ul> <li> <p>стащить заголовки сайта и определить срок годности SSL-сертификата. Если до часа икс осталось меньше 7 дней, отправить уведомление;</p> </li> <li> <p>сделать запрос в сервис whois, вытащить срок оплаты домена и также сверить с текущей датой. Если домен умрет через неделю, то пора слать уведомление.</p> </li> </ul> <p>Реализация заняла ещё пару часов, но польза от такой фичи уже ощутима. На душе стало спокойнее.</p> <p><strong>А ещё?</strong></p> <p>Очевидно, потенциал бота огромный, осталось придумать, какую функцию прикрутить следующей. Покумекали и пришли к выводу, что у нас есть проблема с отчетами и выгрузками таск-менеджера/трекера рабочего времени. Мы используем доработанный напильником Redmine. За последние 3 года дважды пробовали реализовать надстройку для формирования отчётов по задачам, но каждый раз забрасывали, закапывались слишком глубоко, да и пользоваться выгрузками было неудобно. Вдобавок, не все разработчики следят за своими активными таймерами в задачах. За рабочий месяц у нас терялось до 15-20% часов, которые по разным причинам не были отмечены. Бывает, прилетает срочная задача и сразу погружаешься в нее, забыв включить таймер. А случается и простая невнимательность, вспоминаешь про таймер не сразу. Из-за этого собирать ежемесячные отчеты приходилось в полуручном режиме, вспоминая, не потеряли ли часы в задаче. Но восстановить хронологию удаётся не всегда, и месяц закрывается с потерями. При этом все сотрудники загружены на 100%, всегда есть активные задачи на несколько недель вперёд, однако достоверно закрыть все 160 часов не получается.</p> <p>Постоянно контролировать таймеры тоже не получится, это отдельный «надзиратель» нужен, который только и будет, что приглядывать за трудозатратами.</p> <p>Постойте-ка… Но у нас же есть бот, который может за этим следить и сообщать о нарушении. А раз уж запустили его в таск-менеджер, пусть ещё и за выполнением регламентов присмотрит: какие статусы меняются у задач, какие дедлайны приближаются, как изменились приоритеты задач и т.д.</p> <p>Быстренько собираем список проблемных мест, объясняем боту и вот у нас уже новая версия помощника. Пора бы и имя ему придумать. Окрестили бота «Железный Феликс», в честь одного знаменитого дядьки, который хорошо умел присмотреть за выполнением регламентов.</p> <p>Затратив всего 23 рабочих часа, мы научили Железного Феликса:</p> <ol> <li> <p>Проверять активность таймеров программистов. Если таймер не включен, то уведомлять об этом ответственного менеджера и программиста;</p> </li> <li> <p>Проверять задачи и уведомлять сотрудников, если произошли изменения в приоритетах задач;</p> </li> <li> <p>Проверять задачи и уведомлять программистов, если вдруг появилась вторая задача со статусом «В работе». Этот статус означает, что задача именно сейчас в работе, две активных одновременно быть не должно;</p> </li> <li> <p>Напоминать программистам и менеджерам о необходимости добавления комментария к задаче, если в ней фиксировалась активность в течении дня (отмечены трудозатраты) и не поступало текстовых комментариев. Уведомление отправляется в конце рабочего дня и дублируется утром на следующий день, если комментарий все еще не был добавлен;</p> </li> <li> <p>В конце рабочего дня для каждого программиста проверяется количество отмеченных трудозатрат и уведомляет менеджера, если было отмечено меньше 7 часов;</p> </li> <li> <p>Через пол часа после завершения рабочего дня проверять активные таймеры. Если такие есть, отправлять уведомление с напоминанием остановить таймер и скорректировать фактическое время. Бонусом приходят соболезнования, если вдруг сотрудник еще работает;</p> </li> <li> <p>Отправлять уведомление о необходимости начать выполнять задачу, если для неё было заранее установлено напоминание;</p> </li> <li> <p>Уведомлять ответственного о смене статуса в задачи;</p> </li> <li> <p>Уведомлять ответственного, если он передал задачу с неправильным статусом или не передал её дальше;</p> </li> <li> <p>Утром напоминать менеджеру об открытых задачах, в которых давно не было активности;</p> </li> <li> <p>В конце рабочего дня отправлять отчет менеджеру о трудозатратах всех программистов за день с разбивкой по задачам;</p> </li> <li> <p>В конце рабочего дня по пятницам отправлять отчет трудозатрат программистов за неделю с разбивкой по проектам;</p> </li> <li> <p>Уведомлять менеджера, если фактические трудозатраты приближаются к плановым или подходит дедлайн;</p> </li> <li> <p>За час до конца рабочего дня напоминать всем, что есть «База знаний» и туда нужно что-то добавить, если были интересные/нестандартные ситуации в течении дня;</p> </li> <li> <p>По запросу бот создает поддомены и разворачивает тестовые сайты. Удобно для верстальщиков – не нужно просить разработчика или сисадмина.</p> </li> <li> <p>По запросу бот может найти информацию в базе знаний (блог на WordPress с рабочими заметками и регламентами) и отдать ссылку на полное описание</p> </li> </ol> <p>Чтобы считать активность таймеров, пришлось залезть напрямую в базу данных Redmine, поскольку таймтрекер у нас нестандартный, а настроен через плагин. Также пришлось импровизировать, чтобы быстро реагировать на смену статусов задач и перестановку их на scrum-доске. Api Redmine не даёт таких колбеков, а для скрама у нас вообще отдельный модуль. Поэтому колбеки мы добавили сами, немного модернизировав код Redmine. Для всех остальных пунктов были использованы стандартные api таск-менеджера.</p> <p><strong>Звезды из GTA за проступки</strong></p> <p>Чтобы было проще выполнять отладку всех функций бота, стали собирать логи событий, которые обрабатывает Железный Феликс. Когда все заработало и все баги были исправлены, логирование решили оставить и даже пустили в дело. За каждую ошибку стали начислять звезды как в GTA. Больше проступков – больше звезд. Все «косяки» обнуляются в конце рабочего дня, но перед уходом домой, в общий чат приходит сообщение со статистикой.</p> <p>Сперва это было ради шутки, но неожиданно появился азарт и количество ошибок стало уменьшаться. Никто не хотел схлопотать звезду. В первые пару дней работы бота мы собирали по 3-4 звезды каждый, а спустя неделю – 1-3 шт на тестовую группу.</p> <p><strong>Генерация отчетов</strong></p> <p>Бот быстро научил сотрудников пользоваться таск-менеджером по регламенту, уже через неделю до минимума сократилось неучтённое рабочее время. А имея корректные фактические часы, можно автоматизировать генерацию отчетов.</p> <p>Мы не стали делать для этого отдельный интерфейс, реализовали запросы через бота – всё в одном месте. Это и удобнее в использовании, и быстрее в разработке, не нужен фронтенд. За один рабочий день обучили Железного Феликса формировать отчетность в Excel: выгрузка за любой период времени по любым проектам. В отчет попадает полный список задач и трудозатрат, с учетом всех параметров, которые мы используем при формировании сметы.</p> <p><strong>Хэппи-энд</strong></p> <p>В первый же месяц, в тестовой группе под присмотром бота, общее количество отмеченных часов в задачах, увеличилось и потери сократились на 12,5%. Это как раз те часы, которые мы всегда теряли. Плюс ко всему, теперь экономится менеджерское время, которое уходило на составление отчетов. В итоге мы не только покрыли трудозатраты на разработку бота, но и увеличили выручку, поскольку с большей частью заказчиков мы работаем с оплатой по факту трудозатрат и каждый час = деньги.</p> <p>Ну и самое главное, команда научилась работать по регламенту, теперь не путаются статусы задач, приоритеты всегда понятны, а программистам не приходится держать в голове все итерации, которые должны быть у задачи. Если что-то идет не по плану, то бот всегда подскажет и напомнит.</p> <p><strong>Послесловие</strong></p> <p>В статье нет технических моментов, старался рассказать только про логику работу бота и поделиться радостью, что иногда простые решения приводят к ощутимому профиту. А интересные идеи могут появиться из совсем дурных и не связанных с работой затей.</p> <p>Если кому-то интересны технические нюансы, то спрашивайте в комментариях, постараюсь ответить всем. Каких-то инноваций в реализации бота не было, все уже рассказано и ни один раз, но если запросов будет много, то подготовлю статью с описанием для технарей.</p> <p>С наилучшими пожеланиями Ипатов Евгений, руководитель отдела разработки в OWL agency.</p> </div> <div class="clear post_clear"></div><div class="gt3_post_footer"><div class="gt3_module_button_list"><a href="https://nat.od.ua/2022/telegram-bot-na-strazhe-porjadka-v-redmine-habr-veb-studija-nat-od-ua/">Read More</a></div> <div class="blog_post_info">  <div class="post_share_block"> <a href="javascript:void(0)"><span class="sharing_title">Share</span></a> <div class="post_share_wrap"> <ul> <li class="post_share-facebook"><a target="_blank" href="https://www.facebook.com/share.php?u=https://nat.od.ua/2022/telegram-bot-na-strazhe-porjadka-v-redmine-habr-veb-studija-nat-od-ua/" data-title="Facebook"><span class="fa fa-facebook"></span></a></li><li class="post_share-twitter"><a target="_blank" href="https://twitter.com/intent/tweet?text=Telegram-бот%20на%20страже%20порядка%20в%20Redmine%20/%20Хабр%20|%20Веб-студия%20Nat.od.ua&url=https://nat.od.ua/2022/telegram-bot-na-strazhe-porjadka-v-redmine-habr-veb-studija-nat-od-ua/" data-title="Twitter"><span class="fa fa-twitter"></span></a></li><li class="post_share-pinterest"><a target="_blank" href="https://pinterest.com/pin/create/button/?url=https://nat.od.ua/2022/telegram-bot-na-strazhe-porjadka-v-redmine-habr-veb-studija-nat-od-ua/&media=https://nat.od.ua/wp-content/uploads/2022/03/telegram-bot-na-strazhe-porjadka-v-redmine-habr-veb-studija.png" data-elementor-open-lightbox="no" data-title="Pinterest"><span class="fa fa-pinterest"></span></a></li><li class="post_share-linkedin"><a target="_blank" href="https://www.linkedin.com/shareArticle?mini=true&url=https://nat.od.ua/2022/telegram-bot-na-strazhe-porjadka-v-redmine-habr-veb-studija-nat-od-ua/&title=Telegram-бот%20на%20страже%20порядка%20в%20Redmine%20/%20Хабр%20|%20Веб-студия%20Nat.od.ua&source=Web-студия%20NAT.od.ua" data-title="Linkedin"><span class="fa fa-linkedin"></span></a></li><li class="post_share-mail"><a target="_blank" href="mailto:?subject=Telegram-%D0%B1%D0%BE%D1%82+%D0%BD%D0%B0+%D1%81%D1%82%D1%80%D0%B0%D0%B6%D0%B5+%D0%BF%D0%BE%D1%80%D1%8F%D0%B4%D0%BA%D0%B0+%D0%B2+Redmine+%2F+%D0%A5%D0%B0%D0%B1%D1%80+%7C+%D0%92%D0%B5%D0%B1-%D1%81%D1%82%D1%83%D0%B4%D0%B8%D1%8F+Nat.od.ua&body=https://nat.od.ua/2022/telegram-bot-na-strazhe-porjadka-v-redmine-habr-veb-studija-nat-od-ua/" data-title="Email"><span class="fa fa-envelope"></span></a></li> </ul> </div> </div>  <div class="likes_block post_likes_add " data-postid="17529" data-modify="like_post"> <span class="fa fa-heart-o icon"></span> <span class="like_count">0</span> </div> </div> <div class="clear"></div> </div> </div> </div> </div> <ul class="pagerblock"><li class="prev_page"><a href="https://nat.od.ua/blog/page/7/"><i class="fa fa-angle-left"></i></a></li><li><a href='https://nat.od.ua/blog/page/5/'>5</a></li><li><a href='https://nat.od.ua/blog/page/6/'>6</a></li><li><a href='https://nat.od.ua/blog/page/7/'>7</a></li><li><a href='https://nat.od.ua/blog/page/8/' class='current'>8</a></li><li><a href='https://nat.od.ua/blog/page/9/'>9</a></li><li><a href='https://nat.od.ua/blog/page/10/'>10</a></li><li><a href='https://nat.od.ua/blog/page/11/'>11</a></li><li class="next_page"><a href="https://nat.od.ua/blog/page/9/"><i class="fa fa-angle-right"></i></a></li></ul> </section> </div> </div> </div> </div> </div> <div data-rocket-location-hash="d48a71767f85037317ef2f4fdcd5b51b" data-elementor-type="wpda-footer" data-elementor-id="4110" class="elementor elementor-4110 wpda-builder-page-4110 wpda-builder wpda-footer-builder" data-elementor-post-type="elementor_library"> <section class="elementor-section elementor-top-section elementor-element elementor-element-1f1a41e elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="1f1a41e" data-element_type="section" data-settings="{"background_background":"classic"}"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-bf10177" data-id="bf10177" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <section class="elementor-section elementor-inner-section elementor-element elementor-element-b50a47f elementor-section-content-middle elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="b50a47f" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-d3eaf9a" data-id="d3eaf9a" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-9680a26 elementor-widget elementor-widget-wpda-header-logo" data-id="9680a26" data-element_type="widget" id="logo_image__footer" data-widget_type="wpda-header-logo.default"> <div class="elementor-widget-container"> <div class="wpda-builder-logo_container "> <a aria-label="Logo" href="https://nat.od.ua/"> <img fetchpriority="high" class="wpda-builder-logo" src="https://nat.od.ua/wp-content/uploads/2021/11/nat-logo.png" alt="Разработка и продвижение сайтов или интернет-мазинов под ключ в Одессе. Веб-студия Nat.od.ua" title="nat-logo" width="800" height="600"/> </a> </div> </div> </div> <div class="elementor-element elementor-element-57b6a96 elementor-widget elementor-widget-spacer" data-id="57b6a96" data-element_type="widget" data-widget_type="spacer.default"> <div class="elementor-spacer"> <div class="elementor-spacer-inner"></div> </div> </div> </div> </div> <div class="elementor-column elementor-col-50 elementor-inner-column elementor-element elementor-element-7babad7" data-id="7babad7" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-47b350d elementor-widget elementor-widget-spacer" data-id="47b350d" data-element_type="widget" data-widget_type="spacer.default"> <div class="elementor-spacer"> <div class="elementor-spacer-inner"></div> </div> </div> <div class="elementor-element elementor-element-554c80a elementor-position-left elementor-widget__width-auto elementor-widget-tablet__width-auto elementor-widget-mobile__width-inherit elementor-vertical-align-top elementor-widget elementor-widget-gt3-core-imagebox" data-id="554c80a" data-element_type="widget" data-widget_type="gt3-core-imagebox.default"> <div class="elementor-widget-container"> <div class="gt3-core-imagebox-wrapper elementor-image_icon-position-default"><figure class="gt3-core-imagebox-img"><a href="tel:+380634149529"><img width="58" height="74" src="https://nat.od.ua/wp-content/uploads/2019/08/img_box_29.png" class="attachment-full size-full wp-image-1444" alt="" decoding="async" title="img_box_29" /></a></figure><div class="gt3-core-imagebox-content"><div class="gt3-core-imagebox-title"><span class="gt3-core-imagebox-title"><a href="tel:+380634149529">+38 063 414 95 29</a></span></div><p class="gt3-core-imagebox-description">info@nat.od.ua</p></div></div><a href="tel:+380634149529"></a> </div> </div> <div class="elementor-element elementor-element-3e4def9 elementor-position-left elementor-widget__width-auto elementor-widget-tablet__width-auto elementor-widget-mobile__width-inherit elementor-vertical-align-top elementor-widget elementor-widget-gt3-core-imagebox" data-id="3e4def9" data-element_type="widget" data-widget_type="gt3-core-imagebox.default"> <div class="elementor-widget-container"> <div class="gt3-core-imagebox-wrapper elementor-image_icon-position-default"><figure class="gt3-core-imagebox-img"><a href="https://www.google.com/search?q=map+nat.od.ua&oq=map+nat.od.ua&aqs=chrome..69i57j69i64j69i60l3.4016j0j7&sourceid=chrome&ie=UTF-8#"><img loading="lazy" width="76" height="74" src="https://nat.od.ua/wp-content/uploads/2019/08/img_box_30.png" class="attachment-full size-full wp-image-1445" alt="" decoding="async" title="img_box_30" /></a></figure><div class="gt3-core-imagebox-content"><p class="gt3-core-imagebox-description">Украина, г. Одесса, ул. Бугаёвская, 35</p></div></div><a href="https://www.google.com/search?q=map+nat.od.ua&oq=map+nat.od.ua&aqs=chrome..69i57j69i64j69i60l3.4016j0j7&sourceid=chrome&ie=UTF-8#"></a> </div> </div> </div> </div> </div> </section> <section class="elementor-section elementor-inner-section elementor-element elementor-element-cb19c3f elementor-section-boxed elementor-section-height-default elementor-section-height-default" data-id="cb19c3f" data-element_type="section"> <div class="elementor-container elementor-column-gap-default"> <div class="elementor-column elementor-col-25 elementor-inner-column elementor-element elementor-element-c7b7f8b" data-id="c7b7f8b" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-0d591c3 elementor-widget elementor-widget-spacer" data-id="0d591c3" data-element_type="widget" data-widget_type="spacer.default"> <div class="elementor-spacer"> <div class="elementor-spacer-inner"></div> </div> </div> <div class="elementor-element-custom_font_size elementor-element-custom_line_height elementor-element-custom_font_family elementor-element-custom_font_weight elementor-element-custom_color elementor-element elementor-element-3149677 elementor-widget elementor-widget-text-editor" data-id="3149677" data-element_type="widget" data-widget_type="text-editor.default"> <p>Web-Studio Nat.od.ua</p> </div> <div class="elementor-element-custom_font_size elementor-element-custom_font_family elementor-element-custom_font_weight elementor-element-custom_color elementor-element elementor-element-2641689 elementor-widget elementor-widget-text-editor" data-id="2641689" data-element_type="widget" data-widget_type="text-editor.default"> <p>Мы работаем, для того чтобы дать возможность Вам зарабатывать в интернете. </p> </div> <div class="elementor-element elementor-element-33054d3 elementor-shape-square e-grid-align-left elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="33054d3" data-element_type="widget" data-widget_type="social-icons.default"> <div class="elementor-social-icons-wrapper elementor-grid"> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-facebook-f elementor-repeater-item-5ffa149" href="https://www.facebook.com/natodua/" target="_blank"> <span class="elementor-screen-only">Facebook-f</span> <i class="fab fa-facebook-f"></i> </a> </span> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-instagram elementor-repeater-item-91c0e5f" href="https://www.instagram.com/nat.od.ua/" target="_blank"> <span class="elementor-screen-only">Instagram</span> <i class="fab fa-instagram"></i> </a> </span> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-google-plus-g elementor-repeater-item-affb931" href="https://www.google.com/maps/place/nat.od.ua/@46.4723938,30.7022737,15z/data=!4m5!3m4!1s0x0:0x40bd6617ba4ea433!8m2!3d46.4723938!4d30.7022737" target="_blank"> <span class="elementor-screen-only">Google-plus-g</span> <i class="fab fa-google-plus-g"></i> </a> </span> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-telegram elementor-repeater-item-473615c" href="https://t.me/natodua" target="_blank"> <span class="elementor-screen-only">Telegram</span> <i class="fab fa-telegram"></i> </a> </span> <span class="elementor-grid-item"> <a class="elementor-icon elementor-social-icon elementor-social-icon-viber elementor-repeater-item-ababeec" href="viber://add?number=380634149529" target="_blank"> <span class="elementor-screen-only">Viber</span> <i class="fab fa-viber"></i> </a> </span> </div> </div> </div> </div> <div class="elementor-column elementor-col-25 elementor-inner-column elementor-element elementor-element-2553905" data-id="2553905" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-8f1042e elementor-widget elementor-widget-spacer" data-id="8f1042e" data-element_type="widget" data-widget_type="spacer.default"> <div class="elementor-spacer"> <div class="elementor-spacer-inner"></div> </div> </div> <div class="elementor-element-custom_font_size elementor-element-custom_line_height elementor-element-custom_font_family elementor-element-custom_font_weight elementor-element-custom_color elementor-element elementor-element-0ed0b2b elementor-widget elementor-widget-text-editor" data-id="0ed0b2b" data-element_type="widget" data-widget_type="text-editor.default"> Разработка сайтов </div> <div class="elementor-element elementor-element-da1e5f6 wpda_alignment-left elementor-widget elementor-widget-wpda-builder-menu" data-id="da1e5f6" data-element_type="widget" data-widget_type="wpda-builder-menu.default"> <div class="elementor-widget-container"> <div class="wpda-mobile-navigation-toggle"> <div class="wpda-toggle-box"> <div class="wpda-toggle-inner"></div> </div> </div> <div class="wpda-navbar-collapse"> <nav class="wpda-builder-menu"> <ul id="menu-razrabotka-sajtov" class="wpda-menu"><li id="menu-item-9640" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9640"><a href="https://nat.od.ua/our-projects/razrabotka-internet-magazinov/">Разработка интернет-магазинов</a></li> <li id="menu-item-9641" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9641"><a href="https://nat.od.ua/our-projects/business-site/">Разработка корпоративных сайтов</a></li> <li id="menu-item-9642" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9642"><a href="https://nat.od.ua/our-projects/landing-page/">Разработка landing-page</a></li> <li id="menu-item-9643" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9643"><a href="https://nat.od.ua/our-projects/perenos-na-novie-cms/">Перенос на современные CMS</a></li> <li id="menu-item-9644" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9644"><a href="https://nat.od.ua/our-projects/redesign-ili-dorabotka-sitov/">Доработка или редизайн сайта</a></li> </ul> </nav> </div> </div> </div> </div> </div> <div class="elementor-column elementor-col-25 elementor-inner-column elementor-element elementor-element-df42308" data-id="df42308" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-1483eb9 elementor-widget elementor-widget-spacer" data-id="1483eb9" data-element_type="widget" data-widget_type="spacer.default"> <div class="elementor-spacer"> <div class="elementor-spacer-inner"></div> </div> </div> <div class="elementor-element-custom_font_size elementor-element-custom_line_height elementor-element-custom_font_family elementor-element-custom_font_weight elementor-element-custom_color elementor-element elementor-element-27a447b elementor-widget elementor-widget-text-editor" data-id="27a447b" data-element_type="widget" data-widget_type="text-editor.default"> <p>Продвижение сайтов</p> </div> <div class="elementor-element elementor-element-87c5085 wpda_alignment-left elementor-widget elementor-widget-wpda-builder-menu" data-id="87c5085" data-element_type="widget" data-widget_type="wpda-builder-menu.default"> <div class="elementor-widget-container"> <div class="wpda-mobile-navigation-toggle"> <div class="wpda-toggle-box"> <div class="wpda-toggle-inner"></div> </div> </div> <div class="wpda-navbar-collapse"> <nav class="wpda-builder-menu"> <ul id="menu-prodvizhenie-sajtov" class="wpda-menu"><li id="menu-item-9645" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9645"><a href="https://nat.od.ua/our-projects/seo-sites/">SEO продвижение</a></li> <li id="menu-item-9647" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9647"><a href="https://nat.od.ua/our-projects/smm-sites/">SMM продвижение</a></li> <li id="menu-item-9646" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9646"><a href="https://nat.od.ua/our-projects/google-reklama-sitov/">Контекстная реклама</a></li> <li id="menu-item-9648" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9648"><a href="https://nat.od.ua/our-projects/vigruzka-feeda-google-merchant-center/">Торговая реклама</a></li> <li id="menu-item-9649" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9649"><a href="https://nat.od.ua/our-projects/prodvijenie-saita-na-kartah-katalogah/">На картах и в каталогах</a></li> </ul> </nav> </div> </div> </div> </div> </div> <div class="elementor-column elementor-col-25 elementor-inner-column elementor-element elementor-element-360e1c4" data-id="360e1c4" data-element_type="column"> <div class="elementor-widget-wrap elementor-element-populated"> <div class="elementor-element elementor-element-aa54bce elementor-widget elementor-widget-spacer" data-id="aa54bce" data-element_type="widget" data-widget_type="spacer.default"> <div class="elementor-spacer"> <div class="elementor-spacer-inner"></div> </div> </div> <div class="elementor-element-custom_font_size elementor-element-custom_line_height elementor-element-custom_font_family elementor-element-custom_font_weight elementor-element-custom_color elementor-element elementor-element-a764dfc elementor-widget elementor-widget-text-editor" data-id="a764dfc" data-element_type="widget" data-widget_type="text-editor.default"> Оглавление </div> <div class="elementor-element elementor-element-5413d9d wpda_alignment-left elementor-widget elementor-widget-wpda-builder-menu" data-id="5413d9d" data-element_type="widget" data-widget_type="wpda-builder-menu.default"> <div class="elementor-widget-container"> <div class="wpda-mobile-navigation-toggle"> <div class="wpda-toggle-box"> <div class="wpda-toggle-inner"></div> </div> </div> <div class="wpda-navbar-collapse"> <nav class="wpda-builder-menu"> <ul id="menu-bystroe-oglavlenie" class="wpda-menu"><li id="menu-item-12231" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home menu-item-privacy-policy menu-item-12231"><a href="https://nat.od.ua/">Главная</a></li> <li id="menu-item-9638" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9638"><a href="https://nat.od.ua/about-us/">О нас</a></li> <li id="menu-item-9639" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9639"><a href="https://nat.od.ua/services/">Услуги</a></li> <li id="menu-item-9991" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9991"><a href="https://nat.od.ua/blog-razrabotka-saytov/">Блог</a></li> <li id="menu-item-9990" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-9990"><a href="https://nat.od.ua/contact-us/">Контакты</a></li> </ul> </nav> </div> </div> </div> </div> </div> </div> </section> <div class="elementor-element-custom_font_size elementor-element-custom_line_height elementor-element-custom_font_family elementor-element-custom_font_weight elementor-element-custom_color elementor-element elementor-element-e23a8f5 elementor-widget elementor-widget-text-editor" data-id="e23a8f5" data-element_type="widget" data-widget_type="text-editor.default"> <p style="text-align: center;">© 2014–2025 — by Nat.od.ua</p> </div> </div> </div> </div> </section> </div> <div data-rocket-location-hash="fa2f0ccca3adf9ed986fa0bb0a05fb2e" class="wpda-builder__burger_sidebar burger-id-9b6c8d8"><div data-rocket-location-hash="5961fb58c1c38c6f7c21bc9415d09557" class="wpda-builder__burger_sidebar-cover"></div><div data-rocket-location-hash="70857194067b0e029c83264bac74d01f" class="wpda-builder__burger_container"><aside class="sidebar"><div id="icl_lang_sel_widget-2" class="widget gt3_widget open widget_icl_lang_sel_widget"> <div class="wpml-ls-sidebars-sidebar_header-sidebar wpml-ls wpml-ls-legacy-list-horizontal"> <ul><li class="wpml-ls-slot-sidebar_header-sidebar wpml-ls-item wpml-ls-item-ru wpml-ls-current-language wpml-ls-first-item wpml-ls-item-legacy-list-horizontal"> <a href="https://nat.od.ua/blog/" class="wpml-ls-link"> <img class="wpml-ls-flag" src="https://nat.od.ua/wp-content/plugins/sitepress-multilingual-cms/res/flags/ru.png" alt="" width=20 height=20 /><span class="wpml-ls-native">Русский</span></a> </li><li class="wpml-ls-slot-sidebar_header-sidebar wpml-ls-item wpml-ls-item-uk wpml-ls-last-item wpml-ls-item-legacy-list-horizontal"> <a href="https://nat.od.ua/uk/blog/" class="wpml-ls-link"> <img class="wpml-ls-flag" src="https://nat.od.ua/wp-content/plugins/sitepress-multilingual-cms/res/flags/uk.png" alt="" width=20 height=20 /><span class="wpml-ls-display">Украинский</span></a> </li></ul> </div> </div><div id="block-8" class="widget gt3_widget open widget_block"><p><img decoding="async" class="alignnone size-full wp-image-1456" src="https://nat.od.ua/wp-content/uploads/2021/11/nat-logo.png" alt="" width="200" height="auto"></p> <p><a class="button_size_elementor_custom alignment_left border_icon_none hover_type5 btn_icon_position_left" href="https://nat.od.ua/logotip-onlajn-konstruktor-besplatno/"><span class="gt3_module_button__container"> <span class="elementor_gt3_btn_text">Конструктор логотипа онлайн</span> </span><br /> <br /></a></p> <p></p> <p><a class="button_size_elementor_custom alignment_left border_icon_none hover_type5 btn_icon_position_left" href="https://nat.od.ua/whois-domain-uznat-informaciju-o-domene-i-vladelce"> <span class="elementor_gt3_btn_text">Информация о домене или доступность имени</span><br /> </span><br /> </a></p></div><div id="nav_menu-2" class="widget gt3_widget open widget_nav_menu"><h4 class="widget-title">Услуги</h4><div class="menu-razrabotka-sajtov-container"><ul id="menu-razrabotka-sajtov-1" class="menu"><li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9640"><a href="https://nat.od.ua/our-projects/razrabotka-internet-magazinov/">Разработка интернет-магазинов</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9641"><a href="https://nat.od.ua/our-projects/business-site/">Разработка корпоративных сайтов</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9642"><a href="https://nat.od.ua/our-projects/landing-page/">Разработка landing-page</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9643"><a href="https://nat.od.ua/our-projects/perenos-na-novie-cms/">Перенос на современные CMS</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-9644"><a href="https://nat.od.ua/our-projects/redesign-ili-dorabotka-sitov/">Доработка или редизайн сайта</a></li> </ul></div></div><div id="block-9" class="widget gt3_widget open widget_block"><div class="textwidget"> <p><a class="gt3_icon_link gt3_custom_color" style="font-size: 17px;color: #5747e4;margin-right: 15px;margin-top: -20px" href="tel:+380634149529" target="_blank" rel="noopener noreferrer" data-color="#5747e4" data-hover-color="#f47215"><br /> <i class="fa fa-phone" style="font-weight: bold"> </i><br /> </a>+38 063 414 95 29</p> <p><a class="gt3_icon_link gt3_custom_color" style="font-size: 17px;color: #5747e4;margin-right: 15px;margin-top: -5px" href="mailto:info@nat.od.ua" target="_blank" rel="noopener noreferrer" data-color="#5747e4" data-hover-color="#f47215"><i class="fa fa-envelope"> </i></a> info@nat.od.ua</p> <p><a class="gt3_icon_link gt3_custom_color" style="font-size: 17px; margin-top: 7px; margin-right: 15px; margin-bottom: 20px; float: left; color: rgb(87, 71, 228);" href="https://www.google.com/maps/place/nat.od.ua/@46.4723938,30.7022737,15z/data=!4m5!3m4!1s0x0:0x40bd6617ba4ea433!8m2!3d46.4723938!4d30.7022737" target="_blank" rel="noopener noreferrer" data-color="#5747e4" data-hover-color="#f47215"><img decoding="async" class="alignnone" src="https://nat.od.ua/wp-content/uploads/2021/11/map_point.png" alt="" width="12" height="17"></a>Украина, г. Одесса, ул. Бугаёвская, 35</p> </div></div><div id="block-10" class="widget gt3_widget open widget_block"><div class="elementor-column-wrap elementor-element-populated"> <div class="elementor-widget-wrap"> <div class="elementor-element elementor-element-7310046 elementor-shape-square e-grid-align-right elementor-grid-0 elementor-widget elementor-widget-social-icons" data-id="7310046" data-element_type="widget" data-widget_type="social-icons.default"> <div class="elementor-widget-container"> <div class="elementor-social-icons-wrapper elementor-grid"> <span class="elementor-grid-item"><br /> <a class="elementor-icon elementor-social-icon elementor-social-icon-facebook-f elementor-repeater-item-f9f8056" href="https://www.facebook.com/natodua/" target="_blank"><br /> <span class="elementor-screen-only">Facebook-f</span><br /> <i class="fab fa-facebook-f"></i> </a><br /> </span><br /> <span class="elementor-grid-item"><br /> <a class="elementor-icon elementor-social-icon elementor-social-icon-instagram elementor-repeater-item-f1ebd89" href="https://www.instagram.com/nat.od.ua/" target="_blank"><br /> <span class="elementor-screen-only">Instagram</span><br /> <i class="fab fa-instagram"></i> </a><br /> </span><br /> <span class="elementor-grid-item"><br /> <a class="elementor-icon elementor-social-icon elementor-social-icon-google-plus-g elementor-repeater-item-ce2da41" href="https://www.google.com/maps/place/nat.od.ua/@46.4723938,30.7022737,15z/data=!4m5!3m4!1s0x0:0x40bd6617ba4ea433!8m2!3d46.4723938!4d30.7022737" target="_blank"><br /> <span class="elementor-screen-only">Google-plus-g</span><br /> <i class="fab fa-google-plus-g"></i> </a><br /> </span><br /> <span class="elementor-grid-item"><br /> <a class="elementor-icon elementor-social-icon elementor-social-icon-telegram elementor-repeater-item-270a40e" href="" target="_blank"><br /> <span class="elementor-screen-only">Telegram</span><br /> <i class="fab fa-telegram"></i> </a><br /> </span><br /> <span class="elementor-grid-item"><br /> <a class="elementor-icon elementor-social-icon elementor-social-icon-viber elementor-repeater-item-a4ec2b5" href="viber://add?number=380634149529" target="_blank"><br /> <span class="elementor-screen-only">Viber</span><br /> <i class="fab fa-viber"></i> </a><br /> </span> </div> </p> </div> </div> </div> </div></div></aside></div></div> <script> if (localStorage.getItem('gt3_gridlist_woo') === null) { localStorage.setItem('gt3_gridlist_woo','off') } </script> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/ewebot-child/*","/wp-content/themes/ewebot/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="ckyBannerTemplate" type="text/template"><div class="cky-overlay cky-hide"></div><div class="cky-btn-revisit-wrapper cky-revisit-hide" data-cky-tag="revisit-consent" data-tooltip="Consent Preferences" style="background-color:#0056A7"> <button class="cky-btn-revisit" aria-label="Consent Preferences"> <img src="https://nat.od.ua/wp-content/plugins/cookie-law-info/lite/frontend/images/revisit.svg" alt="Revisit consent button"> </button></div><div class="cky-consent-container cky-hide" tabindex="0"> <div class="cky-consent-bar" data-cky-tag="notice" style="background-color:#FFFFFF;border-color:#F4F4F4"> <div class="cky-notice"> <p class="cky-title" role="heading" aria-level="1" data-cky-tag="title" style="color:#212121">We value your privacy</p><div class="cky-notice-group"> <div class="cky-notice-des" data-cky-tag="description" style="color:#212121"> <p>We use cookies to enhance your browsing experience, serve personalised ads or content, and analyse our traffic. By clicking "Accept All", you consent to our use of cookies.</p> </div><div class="cky-notice-btn-wrapper" data-cky-tag="notice-buttons"> <button class="cky-btn cky-btn-customize" aria-label="Customise" data-cky-tag="settings-button" style="color:#1863DC;background-color:transparent;border-color:#1863DC">Customise</button> <button class="cky-btn cky-btn-reject" aria-label="Reject All" data-cky-tag="reject-button" style="color:#1863DC;background-color:transparent;border-color:#1863DC">Reject All</button> <button class="cky-btn cky-btn-accept" aria-label="Accept All" data-cky-tag="accept-button" style="color:#FFFFFF;background-color:#1863DC;border-color:#1863DC">Accept All</button> </div></div></div></div></div><div class="cky-modal" tabindex="0"> <div class="cky-preference-center" data-cky-tag="detail" style="color:#212121;background-color:#FFFFFF;border-color:#F4F4F4"> <div class="cky-preference-header"> <span class="cky-preference-title" role="heading" aria-level="1" data-cky-tag="detail-title" style="color:#212121">Customise Consent Preferences</span> <button class="cky-btn-close" aria-label="[cky_preference_close_label]" data-cky-tag="detail-close"> <img src="https://nat.od.ua/wp-content/plugins/cookie-law-info/lite/frontend/images/close.svg" alt="Close"> </button> </div><div class="cky-preference-body-wrapper"> <div class="cky-preference-content-wrapper" data-cky-tag="detail-description" style="color:#212121"> <p>We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.</p><p>The cookies that are categorised as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. </p><p>We also use third-party cookies that help us analyse how you use this website, store your preferences, and provide the content and advertisements that are relevant to you. These cookies will only be stored in your browser with your prior consent.</p><p>You can choose to enable or disable some or all of these cookies but disabling some of them may affect your browsing experience.</p> </div><div class="cky-accordion-wrapper" data-cky-tag="detail-categories"> <div class="cky-accordion" id="ckyDetailCategorynecessary"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Necessary" data-cky-tag="detail-category-title" style="color:#212121">Necessary</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchnecessary"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryfunctional"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Functional" data-cky-tag="detail-category-title" style="color:#212121">Functional</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchfunctional"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryanalytics"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Analytics" data-cky-tag="detail-category-title" style="color:#212121">Analytics</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchanalytics"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryperformance"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Performance" data-cky-tag="detail-category-title" style="color:#212121">Performance</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchperformance"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Performance cookies are used to understand and analyse the key performance indexes of the website which helps in delivering a better user experience for the visitors.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div><div class="cky-accordion" id="ckyDetailCategoryadvertisement"> <div class="cky-accordion-item"> <div class="cky-accordion-chevron"><i class="cky-chevron-right"></i></div> <div class="cky-accordion-header-wrapper"> <div class="cky-accordion-header"><button class="cky-accordion-btn" aria-label="Advertisement" data-cky-tag="detail-category-title" style="color:#212121">Advertisement</button><span class="cky-always-active">Always Active</span> <div class="cky-switch" data-cky-tag="detail-category-toggle"><input type="checkbox" id="ckySwitchadvertisement"></div> </div> <div class="cky-accordion-header-des" data-cky-tag="detail-category-description" style="color:#212121"> <p>Advertisement cookies are used to provide visitors with customised advertisements based on the pages you visited previously and to analyse the effectiveness of the ad campaigns.</p></div> </div> </div> <div class="cky-accordion-body"> <div class="cky-audit-table" data-cky-tag="audit-table" style="color:#212121;background-color:#f4f4f4;border-color:#ebebeb"><p class="cky-empty-cookies-text">No cookies to display.</p></div> </div> </div> </div></div><div class="cky-footer-wrapper"> <span class="cky-footer-shadow"></span> <div class="cky-prefrence-btn-wrapper" data-cky-tag="detail-buttons"> <button class="cky-btn cky-btn-reject" aria-label="Reject All" data-cky-tag="detail-reject-button" style="color:#1863DC;background-color:transparent;border-color:#1863DC"> Reject All </button> <button class="cky-btn cky-btn-preferences" aria-label="Save My Preferences" data-cky-tag="detail-save-button" style="color:#1863DC;background-color:transparent;border-color:#1863DC"> Save My Preferences </button> <button class="cky-btn cky-btn-accept" aria-label="Accept All" data-cky-tag="detail-accept-button" style="color:#ffffff;background-color:#1863DC;border-color:#1863DC"> Accept All </button> </div></div></div></div></script> <div data-rocket-location-hash="e3a3ecb15ae6ce8af3ef6b077a4f92aa" class="progress-wrap btn-right-side"> <svg class="progress-circle" width="100%" height="100%" viewBox="-2 -2 104 104"> <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"/> </svg> </div> <div data-rocket-location-hash="cb76f52536981a9e12315f7b9304fbaf" class="nbdp-popup" id="nbd-catalog-option-popup" data-animate="scale"> <div data-rocket-location-hash="36c44f3ff88add977cc9513fab61e4ee" class="overlay-popup"></div> <div data-rocket-location-hash="1f3b6c6b1e883371473b3361720b8bc3" class="main-popup"> <div data-rocket-location-hash="393d83bfa583a4e775151460779744e2" class="nbdp-popup-head"> <i class="close-popup"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <title>close

How would you love to order?

Upload your design

Select this option to upload your print-ready artwork files to our platform.

Design online

Browse our designs and customize to your taste.

Request for design

Let our experts help you with your design.

Successfully! Oops!

Return to shop View cart

Select options

Русский
Українська (Украинский)

Blog

Популярные расширения для VS Code 2022 / Хабр | Веб-студия Nat.od.ua