Сообщество - Web-технологии

Web-технологии

521 пост 5 813 подписчиков

Популярные теги в сообществе:

5

Выпадающее меню на css

Здравствуйте уважаемые, очень нужна помощь. На основе первого примера с сайта https://html5book.ru/mnogourovnevoe-vypadayushee-menu/

делаю 4х уровневое выпадающее меню. В связи с большим количеством планируемых пунктов нужно укоротить меню до 200-300px и сделать прокрутку. Кому не лень, гляньте пожалуйста код по ссылке и скажите, как его поправить. Сам пытался пихать overflow-y, у меня ничего не вышло

6

Убираем спагетти-код

Иногда при написании проги появляется спагетти-код. Это значит, что для простоты и скорости решения мы копируем одинаковые куски кода, которые делают почти одно и то же. У них внутри одинаковая логика, но разные входные данные, и мы их просто скопировали-вставили.


У такого подхода к программированию есть несколько проблем:


• поддерживать такой код сложно, потому что нужно постоянно проверять, во всех ли местах мы внесли нужные изменения;

• расширять функциональность сложно, так как легко запутаться, какую именно часть кода мы расширяем или оптимизируем;

• читать такой код трудно, потому что один и тот же код встречается много раз.


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

А если всё работает как нужно, значит, настало время переписать код в нормальном виде. Для этого нам понадобится некоторое подобие объекта, но не на основе класса, а созданное вручную.

Убираем спагетти-код IT, Программист, Программирование, Frontend, Javascript, Длиннопост

Делаем красивые пуши для вашего сайта в стиле MacOS



Новый тип переменной: объект


У переменной типа «объект» есть одна отличительная особенность: она состоит как бы из двух частей — свойства и значения, и здесь всё то же самое — у объекта меняются только значения свойств. Поясним на примере языка JavaScript.


Сделаем переменную-объект, у которой будет два свойства — имя и возраст:

var person = {
name: "Миша",
age: 35
}

Чтобы поменять имя, нужно написать название переменной и через точку указать название свойства, которое хотим изменить:

person.name = "Илья";
person.age = 31;

Свойств у объекта может быть сколько угодно:

var person = {
name1: "Миша",
name2: "Саша",
name3: "Лена",
age1: 35,
age2: 21,
age3: 19
}

Но если у объекта получается много однотипных свойств, можно сделать их массивом и обращаться к ним по номерам. А если элементы массива тоже сделать объектами с одинаковыми названиями свойств, получится вот такая магия:

Убираем спагетти-код IT, Программист, Программирование, Frontend, Javascript, Длиннопост

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



Собираем дубли


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


• List(1,2,3,4)

• Mask(1,2,3,4)

• element_Id_(1,2,3,4)

• number_Id_(1,2,3,4)

Первые две переменные задают ссылку на объект и маску для сравнения элементов, а вторые две отвечают за количество задач в колонках.


Свернём эти 16 переменных в один большой объект:

Убираем спагетти-код IT, Программист, Программирование, Frontend, Javascript, Длиннопост

Теперь, зная только номер колонки, мы можем обратиться к объекту, маске и количеству задач в колонке. Сначала это может показаться громоздким, но на самом деле сокращает наш финальный объём программы в 4 раза.


Чтобы избавиться от дублей в коде, используют циклы или выносят повторяющийся код в отдельную функцию. На самом деле вариантов больше, но основные — эти.



Используем цикл


Циклы применяют в тех случаях, когда спагетти-код по очереди используется несколько раз, где отличаются только порядковые номера элементов. В нашем случае это функция showTasks (). Она берёт по очереди все элементы из локального хранилища и по очереди же сравнивает их с шаблоном — для первой, второй, третьей или чётвёртой колонки. Единственное, чем отличаются фрагменты — маской и колонкой, куда их отправлять:

Убираем спагетти-код IT, Программист, Программирование, Frontend, Javascript, Длиннопост

Сделаем то же самое в цикле, используя нашу большую переменную-объект. Для этого мы организуем цикл от 0 до 3 (потому что нумерация элементов массива начинается с нуля) и по очереди проверяем все значения:

Убираем спагетти-код IT, Программист, Программирование, Frontend, Javascript, Длиннопост

Код сократился в 4 раза, читать стало проще, и всё меняется в одном месте. Красота.



Делаем отдельную функцию


У нас есть вот такой огромный кусок кода, который делает одно и то же, только с разными элементами.

Убираем спагетти-код IT, Программист, Программирование, Frontend, Javascript, Длиннопост
Убираем спагетти-код IT, Программист, Программирование, Frontend, Javascript, Длиннопост

Здесь 4 раза задаётся обработчик нажатия клавиш в поле ввода у каждой колонки. Очевидно, что проще вынести повторяющийся код в отдельную функцию и вызывать её по мере необходимости:

Убираем спагетти-код IT, Программист, Программирование, Frontend, Javascript, Длиннопост

Что дальше


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


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

2. У нас остались 4 обработчика нажатий, которые делают одинаковые вещи — вызывают одну и ту же функцию с разными параметрами.

Оба фрагмента можно оптимизировать, например, с помощью jQuery.


Попробуйте сделать это сами, пока это не сделали мы

Показать полностью 8
37

9 признаков плохой вакансии в ИТ

Пост для тех, кто читает вакансии в ИТ-компаниях и думает, что там всё классно.


Иногда уже по тексту вакансии можно понять, что работать в компании будет сложно. Мы просмотрели разные вакансии в ИТ и собрали 9 признаков того, что в реальности всё окажется хуже, чем в объявлении.

9 признаков плохой вакансии в ИТ IT, Программист, Программирование, Вакансии, Web, Веб-разработка, Frontend, Web-программирование, Работа, Длиннопост

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



А теперь к делу


1. Слишком странный набор навыков

В компанию требуется JavaScript-разработчик со следующими навыками:

• JavaScript + HTML;
• знание Microsoft Excel;
• составление отчётов в 1С;
• уверенное владение системой автоматизации СДЖУ-85.

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


Ещё есть поверие: если в вакансии написано «1С», то это будет то, с чем вы будете возиться 90% времени.


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



2. Участие в техподдержке


Ваши рабочие задачи:

• написание и отладка кода;
• разработка новых систем;
• помощь при работе с клиентами, иногда — ответы на вопросы пользователей.


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


Как норм: поддержкой занимается поддержка.



3. Высокий темп разработки


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

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


Как норм: у компании должен быть этап тестирования, обязательные требования по документированию своего софта, а в идеале ещё и код-ревью — когда старшие товарищи проверяют ваш код.



4. Десятилетний стартап


Мы — стартап, который образовался 10 лет назад, и у нас до сих пор сохранилась та атмосфера свободного общения и отношения к продукту.

Что здесь не так: если стартапу больше трёх лет и он всё ещё стартап, то с продуктом явно что-то не то: либо нет клиентов, либо нет квалифицированных разработчиков, либо ребята не знают значения слова «стартап». В любом случае за это время там накопится технический долг, на разгребание которого понадобится ещё 10 лет. Хотите ли вы в таком участвовать — хорошо бы решить заранее.


Как норм: компания, которая работает уже 10 лет, скорее всего, уже имеет штат HR-специалистов, которые будут обрабатывать входящие вакансии. Это признак, что хотя бы процесс найма у компании поставлен.



5. Обязательное участие в корпоративных мероприятиях


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

Что здесь не так: ну как можно навязывать работникам досуговые мероприятия? Это просто неприлично.



6. Горизонтальное управление, никакой иерархии, решает команда


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

Что здесь не так: в коллективе всё равно будут лидеры и руководители, только они будут неформальные и в случае чего смогут откреститься от любой ответственности. Вам придётся помимо работы участвовать в беспощадной внутриполитической борьбе.


Как норм: в вакансии этого не напишут, но вообще должны быть чёткие должностные обязанности, назначения в команды, чёткие руководители и понятные сферы ответственности.



7. Руководитель лично вовлечён


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


Как норм: «вы будете работать в команде такой-то над такими-то задачами».



8. Оперативные ответы в любое время


Будущий сотрудник должен:

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


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


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



9. Несоответствие опыта и развития отрасли


Мы — стартап в области нейрогенеративного искусства, занимаемся созданием видеороликов на основе нейросетей по текстовому описанию. Нам нужен Python-разработчик с пятилетним опытом работы в этой теме.

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



Это не панацея


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


Часто нормальные внешне вакансии ведут в проклятые компании, и никак, кроме как по отзывам, ты это не узнаешь (или на личном опыте).


Наконец, бывают просто некомпетентные эйчары, которые составляют вакансии так, что от компании хочется бежать. Хотя внутри там норм.


Как это всё научиться отлавливать? Достоверно не знаем. Но с опытом становится легче.

Показать полностью 1
3

Как производить своё расширение в Scratch?

В Скретче нет кнопки "Сделать расширение", но можно сделать GUI с помощью программы Git!

Скачать Git тут:

https://git-scm.com/downloads

Код Гитхаба тут:

Есть редактор, в котором есть кнопка "Искать расширение"!

Как производить своё расширение в Scratch? Скретчинг, Scratch, Расширение, Блок, Дополнение, Видео, YouTube

E羊icques: A Scratch mod with a custom aspect ratio that can load an extension from URL

https://sheeptester.github.io/scratch-gui/

URL Настройки:

Как производить своё расширение в Scratch? Скретчинг, Scratch, Расширение, Блок, Дополнение, Видео, YouTube

E羊icques: URL settings

https://sheeptester.github.io/scratch-gui/flags.html

Показать полностью 2
21

Новое CSS свойство accent-color. Как избавиться от проблем со стилизацией чекбоксов, радио-кнопок и прочих элементов

В CSS с недавних пор было анонсировано новое свойство accent-color, и сегодня мы как раз хотим про него вам рассказать.


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

Поскольку свойство наследуемое, его можно применить на корневом уровне:


Пример:

:root {
accent-color: chocolate;
}

Так же можем применить к конкретному элементу:

.submit-form {
accent-color: purple;
}
input[type="checkbox"] {
accent-color: #6ad3ff;
}

❗️ Ну и вишенка на торт. Согласно ресурсу caniuse свойство уже поддерживается всеми основными браузерами.



Наш канал, с полезными мануалами и статьями, мастхэв сервисами и готовыми решения на CSS, Javascript

Показать полностью
1

Media Station X для LG Netcast

Здравствуйте друзья, кто в теме - такая засада, установил на смарт LG 2012 года Media Station X последней версии и теперь он запускается с ошибкой сервера. Нужна предыдущая версия проги, там все работало как надо, но найти нигде не могу. Может у кого есть, буду благодарен

13

28 расширений VS Code для разработки документации

Собственно, это плагины для VS Code, без которых техническим писателям и разработчикам документации жить можно, но сложно. В подборке — линтеры, форматирование, работа с git, проектирование API, подготовка схем и милота для удобной разработки.

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Здесь мы вам даем еще больше полезностей: полезные сервисы и фишки, мануалы и статьи готовые решения на CSS, Javascript и не только



Линтеры


Markdownlint

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

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


Как пользоваться



Markdown All in One

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Поддержка разметки Markdown в Visual Studio Code. Форматирование таблиц, оглавление, рендеринг в HTML.


Как пользоваться



LTeX – LanguageTool grammar/spell checking

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Проверка орфографии и стилистики английского и русского языка по правилам LanguageTool.


Как пользоваться



Code Spell Checker + Russian - Code Spell Checker

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

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


Как пользоваться



Proselint


Расширение линтера англоязычной прозы Proselint. Создатели сервиса вдохновлялись Чаком Палаником, Марком Твеном, Джоржем Оруэллом и другими писателями.


Как пользоваться



Textlint

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение open source сервиса Textlint, написанного на JS.


Как пользоваться



Vale

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

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


Как пользоваться



Форматирование и форматы


Prettier - Code formatter

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение помогает так хорошо отформатировать текст в Markdown, что на него не ругается линтер.


Как пользоваться



OpenAPI (Swagger) Editor

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение для редактирования, форматирования спецификации OpenAPI (Swagger) в YAML или JSON.


Как пользоваться



MdTableEditor

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

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


Как пользоваться



GitHub Markdown Preview

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Предварительный просмотр файлов Markdown в формате и стилистике GitHub.


Как пользоваться



Markdown Checkboxes

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение добавляет поддержку флажков и списков задач с предварительным просмотром.


Как пользоваться



PlantUML

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширенная поддержка PlantUML.


Как пользоваться



Asciidoc

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение поддерживает предварительный просмотр в реальном времени, подсветку синтаксиса и cниппеты для формата AsciiDoc.


Как пользоваться



reStructuredText Language

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение для полноценной работы с языком разметки reStructuredText.


Как пользоваться



Работа с системой контроля версий


GitLens

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

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


Как пользоваться



Git Graph

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Визуализирует весь таймлайн с коммитами и ветками. Позволяет работать с git через интерфейс.


Как пользоваться



Git Project Manager

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение позволяет открывать новое окно с репозиторием git из окна VS Code и быстро переключаться между репозиториями.


Как пользоваться



Удобство и милота


Markdown Emoji

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост


🚀(здесь ссылка)



HTTP/s and relative link checker

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Поиск битых ссылок в Markdown-тексте.


Как пользоваться



Settings Sync

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Синхронизирует настройки и конфигурации VSCode. Для синхронизации используется Github Gist.


Как пользоваться



PDF

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение конвертирует файлы Markdown в файлы PDF, HTML, PNG, JPEG.


Как пользоваться



Markdown Paste

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Расширение делает скриншоты и сразу же ссылки на них в файлах Markdown.


Как пользоваться



Word Count

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Подсчет символов в документе.


Как пользоваться



Auto Close Tag

28 расширений VS Code для разработки документации Программирование, IT, Программист, Web-программирование, Web, Веб-разработка, Frontend, Visual Studio, Длиннопост

Добавляет закрывающий тег.


Как пользоваться



Rainbow bracket

Каждой паре всех видов скобок расширение дает свой цвет радуги. Красным цветом подсвечены незакрытые скобки.


Как пользоваться



Live Server


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


Как пользоваться



Material Theme Icons

Иконки к файлам и папкам.


Как пользоваться

Показать полностью 24

Чек-лист по разработке чат-ботов

Привет! На связи команда Botcreators.ru. В этом материале делимся своим чек-листом по разработке чат-ботов!

Чек-лист по разработке чат-ботов Автоматизация, Чат-бот, Бизнес, IT, Айтишники, Агентство, Программирование, Длиннопост

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


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


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


Позаботьтесь об описании


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


Поэтому первый совет звучит очень просто: позаботьтесь об описании. Оно должно быть коротким, понятным, простым и отражать суть. И кстати, будет не лишним добавить картинку в поле Description в BotFather. Об этом мы писали в этой статье с примерами.


Добавьте немного эмодзи в интерфейс бота


Чаще всего разработчики не добавляют эмодзи совсем. И кнопки (как и бот в целом) выглядит скучно и пресно. Попробуйте разбавить текст с помощью добавления эмодзи. Например кнопка «Читать дальше» может выглядеть так: «👉 Читать дальше». Но не надо перегружать интерфейс! Например вот такая подача: «👉😏💪🔥😝🥰 Читать дальше» уже перебор.


Бот должен делать то, что от него ожидают


Если вы сделали бота для группового чата, то он не должен реагировать на все подряд и раздражать всех вокруг. Он должен иметь набор команд или ПОНЯТНЫХ функций, которые отрабатывает четко без фантомных приколов. Хороший пример реализации можно посмотреть в этом боте.


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


Также позаботьтесь, чтобы при отправке рандомного сообщения не по сценарию (да, пользователи так делают), бот реагировал предсказуемо. Например отправлял сообщение в чат вроде такого: «Я не понимаю. Пожалуйста, воспользуйтесь кнопками ниже 👇».


Иными словами этот тезис можно переформулировать так: у бота должна быть понятная механика. Он не должен вводить пользователя в заблуждение.


Администрируйте бота сами


Этот пункт про безопасность. К нам достаточно часто обращались с вопросом «ой, а админом бота был другой человек, как мне теперь вернуть доступ?». Единственным верным ответом тут может быть: администрируйте своего бота сами. Не надо доверять это третьим лицам.


Про корпоративный номер, кстати, тоже смешно. К нам как-то обратился человек, который завел токен бота на корпоративном номере.


Если вы до сих пор не понимаете, что за токены и что за администрирование, то рекомендуем прочесть эту статью.


Не добавляйте слишком много кнопок


Не у всех пользователей в руках будет последний айфон или просто свежий смартфон. А значит, что размеры экранов и версии мессенджеров у них будут разные. А это в свою очередь значит, что если кнопок будет много, они могут их просто не найти. ПОЭТОМУ: старайтесь не городить огород из большого количества кнопок. Подумайте: а как будет смотреться бот на смартфоне с самым маленьким экраном?


Пользователь не должен терять кнопки


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


Бот не имеет доступа к датчикам смартфона


Старайтесь проектировать логику своего бота с учетом этого тезиса. Бот это не полноценная замена мобильным приложениям. Одна из причин — это как раз отсутствие доступа к датчикам смартфона: акселерометру и т.д. Подробнее про различия чат-ботов и приложений писали в этой статье.


Бот не видит сообщения других ботов


Этот пункт, кстати, совсем неочевиден даже некоторым опытным разработчикам. Боты, созданные с помощью Bot API, не видят других ботов, созданных с помощью Bot API. Тут есть исключения про ботов, созданных с помощью Telegram Web API, но об этом в другой раз.


Упрощайте везде, где это возможно


Это, пожалуй, самый частый совет, который мы даем своим клиентам. Не старайтесь перегружать чат-бота лишними функциями и механиками. Лучше пусть он получится простым, но понятным и логичным, чем перегруженным и отталкивающим.
Чек-лист по разработке чат-ботов Автоматизация, Чат-бот, Бизнес, IT, Айтишники, Агентство, Программирование, Длиннопост

Чек-лист по разработке чат-бота


Эти и еще 25 пунктов мы учитываем при разработке чат-ботов на заказ.


Скачивание чек-листа в формате PDF и в хорошем качестве доступно по этой ссылке.

Показать полностью 2
Отличная работа, все прочитано!