Корпоративные сайты и блоги

Полностью обновили код и разработали дизайн сайта alta-profil.ru. Сделали его удобнее, быстрее и информативнее для пользователей.

«Альта Профиль» — производитель отделочных материалов из полимеров, с которым мы работаем уже много лет по разным направлениям. 

В этом кейсе рассказали об обновлении сайта: с какими проблемами столкнулись и как их решали.

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

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

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

Рефакторинг не является процессом создания нового функционала или исправления ошибок на сайте, это улучшение уже существующего кода

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

В техническом плане перед нами стояли 3 задачи:

• Переход на реактивный фреймворк, в нашем случае Vue.js 

• Серверный рендеринг, чтобы не потерять позиции в SEO при переходе на Vue.js

• Корректная маршрутизация 

Теперь подробнее о решении каждой из них.

Переход на реактивный фреймворк: почему Vue.js 

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

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

 На рынке сейчас два основных фреймворка:

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

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

Для решения нашей задачи мы предпочли Vue.js, так как фреймворк:

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

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

Серверный рендеринг: как не потерять позиции при переходе на Vue.js

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

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

Для решения этой задачи мы использовали Nuxt.js — фреймворк на основе Vue.js, который обеспечивает серверный рендеринг

 Расширение закрыло все наши задачи в рамках разработки, о которых мы говорили выше:

Серверный рендеринг

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

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

Роутинг

Маршрутизация внутри проекта — все, что связано с движением пользователя по сайту.

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

Nuxt.js предоставляет роутинг «из коробки» — его не нужно настраивать отдельно. В расширении используется файловая система для автоматического генерирования роутов на основе структуры файлов и каталогов, которая выглядит примерно так:

pages/
–| index.vue
–| about.vue
–| contact/
—–| index.vue
—–| email.vue

Как видно из приведенного выше примера, файлы Vue-component располагаются в директории pages. Каждый файл — маршрут, соответствующий URL-адресу. Таким образом, index.vue соответствует корневому маршруту (`/`), `about.vue` – маршруту `/about`, а `contact/index.vue` – маршруту `/contact/`.

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

Работа с метатегами

Nuxt.js позволяет управлять метатегами, автоматически генерируя их на основе текущего маршрута и текста страницы.  Также их можно установить вручную:

Глобальный. Nuxt.js предоставляет объект в файле `nuxt.config.js`, который используется для установки глобальных метатегов для всего сайта:

// nuxt.config.js
export default {
head: {
title: ‘My Website’,
meta: [
{ charset: ‘utf-8’ },
{ name: ‘viewport’, content: ‘width=device-width, initial-scale=1’ }

Помимо дефолтных метатегов, кодировки и отображения видимой области в данном блоке настроек можно, например, внедрить различные сторонние скрипты: GTM, метрики, live-чаты и т. д.

Локальный. Локальные метатеги для каждой страницы через компонент Vue.js.  Устанавливаются метатеги для любой страницы при добавлении объекта в компонент:

В этом примере мы устанавливаем title и description метатеги для локальной страницы. Значение `hid` используется для предотвращения дублирования тега на странице.

Чтобы определить общие метатеги для всех страниц сайта, можно создать `layout` компонент и определить глобальные метатеги в нем.

Динамические метатеги. Основанные на динамических маршрутах. Для этого обычно используется  asyncData  для получения дополнительных данных, таких как title и description. В нашем случае, мы использовали fetch – более современное решение асинхронного получения данных, которое не ограничено компонентами страниц. При этом метод fetch расширяется свойством fetchOnServer,  указывающим  необходим ли вызов fetch при рендеринге на сервере. Тут происходит магия — для поисковых роботов fetchOnServer всегда возвращает true, а для пользователей —  значение зависит от значимости контента и требований к его показу.

Вот пример использования `fetchOnServer` в Nuxt.js:

В этом примере мы определяем метод fetch, выполняется на сервере, до того, как компонент будет отрендерен, или на клиенте — в зависимости от состояния возвращаемого fetchOnServer, результат которого зависит от того, кто открывает страницу: поисковый робот или пользователь. Внутри метода мы используем `$axios` для выполнения запроса к API “jsonplaceholder”. Полученные данные сохраняются в Vuex Store с помощью `store.commit`. 

Получив данные, мы можем использовать их для отображения в шаблоне Vue.js внутри метода `computed`.

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

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

Начало здесь.

Русский свет

https://rs24.ru/customer_person_register

1) Форма регистрации.

Нет возможности просмотра введённого пароля.

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

Что хорошо:

Есть кнопка повтора заказа.

1. Кнопка повтора упрощает процесс оформления заказа для пользователя, поскольку все данные, введенные при предыдущем оформлении заказа, будут автоматически заполнены. Таким образом, не нужно тратить время на повторное ввод данных.

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

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

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

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

Раздел с акциями:

Все инструменты

https://www.vseinstrumenti.ru/user/login/

Хорошая главная страница ЛК на которой выведены основные категории.

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

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

Разделение заказов на две категории, можно сразу посмотреть какие заказы сейчас в работе. Сама фильтрация по заказам подразумевает два параметра. Это «Активные» и «Все». В общем удобно, в «Активных» все, кроме заказов со статусами «Отменён» и «Завершён». Не надо заморачиваться с фильтрацией по многочисленным параметрам.

Прямо в ЛК можно посмотреть дату и способ доставки заказа. Сама по себе нужная информация для клиента.

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

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

TrueCable

https://www.truecable.com/account/login

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

Есть адресная книга. т. е. можно создать несколько вариантов с разными адресами и контактными данными. Полезная штука, которая мало встречается в русском сегменте, зато распространена в западном. В чём соль? Можно для одного аккаунта создать разные «пресеты» с адресами, контактными данными и именами. т. е. если клиент имеет несколько адресов или лиц, которые могут получить товар, то ему не нужно каждый раз вводить новые данные при оформлении заказа, а просто можно выбрать нужный вариант и все данные заполняться автоматически.

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

Минимакс

https://www.minimaks.ru/login/

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

Функционал работы со сметами.

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

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

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

Как делаем? Берём пользователя из первой статьи идём его путём(таков путь).

Например, задаемся вопросом откуда пользователь может узнать о существовании ЛК?

Накидываем варианты(как на основе своего опыта и логики, так и на основе увиденного в процессе анализа других сайтов)

• Зайти на сайт и увидеть баннер на главной странице о том что существует личный кабинет.

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

• После оформления заказа на результирующем экране разместить информацию о том что существует ЛК.

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

• Из email рассылки. Информация и ссылка на ЛК в письме от компании.

• От менеджера при общении.

• Из мессенджера компании(Whatsapp и т.д.).

Всё, определились с вариантами. И погнали их проверять на своём ЛК. После чего помечаем в списке, что реализовано, а что не помешало бы сделать.

Потом следующий пункт: Регистрация, далее авторизация и т. д. Действуем по тому же принципу.

В итоге получилось два документа. Один с багами в ЛК которые существует при текущем функционале. Второй с рекомендациями по улучшению.

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

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

Рисунок от mdjrn

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

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

Основы Python:

• Типы данных и структуры (целые числа, дробные числа, строки, списки, кортежи, словари, множества)

• Переменные и выражения

• Условные операторы (if / else)

• Циклы (for / while)

• Функции

• Ввод / вывод (print, input)

  Мощный и хороший курс по базе Python: https://stepik.org/course/67/promo

  Туториал по Питону от создателей: https://docs.python.org/3/tutorial/index.html#the-python-tutorial

  База от Тимофея Хирьянова: https://www.youtube.com/playlist?list=PLRDzFCPr95fK7tr47883DFUbm4GeOjjc0

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

Объектно-ориентированное программирование:

Функциональное программирование:

Модули и библиотеки:

Работа с файлами:

Разработка графических интерфейсов (GUI):

Регулярные выражения:

Тестирование:

Управление версиями в GIT:

Оптимизация:

Параллельное выполнение:

Управление базами данных:

Сетевое программирование:

Развертывание:

• Виртуальные среды (venv)

• Распространение пакетов (wheel)

• Непрерывная интеграция / непрерывное развертывание (CI / CD)

• Docker

  Про venv: https://youtu.be/OvocRhD9WSA

  Docker: https://youtu.be/n9uCgUzfeRQ

Разное:

• Интерфейс командной строки (Click)

• Работа с API-интерфейсами

• Сериализация / десериализация данных (pickle, json, yaml)

  Pickle: https://docs.python.org/3/library/pickle.html

Веб-разработка(опционально):

Анализ данных(опционально):

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

Структуры данных и алгоритмы:

• Базовые структуры данных (стеки, очереди, связные списки, деревья, графы)

• Поиск и сортировка алгоритмов

• Анализ сложности (нотация O большое)

• Динамическое программирование

• Рекурсия

  Структуры данных и алгоритмы https://youtu.be/S2I0covkyMc

  Рекурсия: https://youtu.be/NOaSY5pJmyc

Решение проблем и критическое мышление:

• Анализирование проблем и требований

• Разбиение проблем на более мелкие части

• Генерация творческих решений

Жизненный цикл разработки программного обеспечения:

• Анализ требований

• Проектирование архитектуры программного обеспечения

• Реализация кода

• Тестирование и отладка кода

• Развертывание и поддержка

• Методологии Agile-разработки (например, Scrum)

  Статья на Хабре: https://habr.com/ru/company/dcmiran/blog/521718/

  Agile: https://habr.com/ru/company/otus/blog/710034/

Качество кода:

• Обзоры кода и лучшие практики чистого кодирования

• Справочники по стилю кодирования (например, PEP8)

• Тестирование и разработка через тестирование

• Рефакторинг кода для улучшения качества и обслуживаемости

  PEP8: https://pep8.org/

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

• Написание четкой и краткой документации

• Средства совместной работы, такие как Jira

• Эффективное общение с коллегами и заинтересованными сторонами

• Работа в команде с использованием систем управления версиями, таких как Git

  Кратко про документацию: https://youtu.be/bFVXMc4FWQc

  Краткий курс по Jira: https://youtu.be/wy94sK_PzWw

И самое главное – непрерывное обучение:

• Дополнительное образование, такое как статьи, книги и онлайн-курсы,

• Слежение за тенденциями в индустрии и обновлениями в Python и связанных технологиях,

• Изучение лучших практик и новых подходов к разработке.

Хорошая книга по Python – “Изучаем Python” от Марка Лутца

Больше Питона:

https://stepik.org/course/58852/syllabus

https://stepik.org/course/68343/syllabus

Больше практики по Python:

1. HackerRank (https://www.hackerrank.com/)

2. LeetCode (https://leetcode.com/)

3. Codewars (https://www.codewars.com/)

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

Так же можете ознакомиться с моим roadmap по SQL: https://habr.com/ru/post/725414/

Вы просили — мы сделали.

Новым редактором мы называем WYSIWYG-редактор, который добавили на сайт пару лет назад, и за это время он стал основным инструментом для создания публикаций: более 80% материалов создаётся в нём. Ещё процентов 15 от общего количества публикаций приходится на несколько активных корпоративных блогов, которые используют старый редактор (с html-вёрсткой) с одной целью — там можно красить заголовки и вставлять кликабельные промо-коды 🙂

Всё последнее время мы работали именно над WYSIWYG-редактором: он стал быстрее и стабильней, оброс полезными фичами: inline-спойлеры, «персоны», типограф, очистка форматирования и прочее.

Вообще, markdown-разметка поддерживалась и ранее: достаточно было вставить в форму создания публикации markdown-код и он тут же превращался в WYSIWYG-версию поста — на материал можно было сразу посмотреть в том виде, в котором его увидят читатели:

Но вот вернуться в таком случае в markdown-редактирование было нельзя… а с сегодняшнего дня можно 🙂

Новый переключатель режимов расположен в нижней части редактора: вы можете переключиться с WYSIWYG-версии на «чистокровный» markdown. В итоге «холст» редактора станет одним большим текстовым полем для md-кода, который перед публикацией можно превратить (и обратно) в публикацию с помощью кнопки «Предпросмотр» (эта кнопка крайне рекомендуется к использованию):

Получился режим «со вкусом старого редактора» — в него можно скормить как код из старой публикации (в котором сплошной HTML), так и голый markdown-код — с сохранением редактируемого исходника. Записал небольшую демку с двумя произвольными текстами:

Важно:

• markdown-режим нужно активировать до начала ввода текста публикации.

• На Хабре используется «Habr Flavored Markdown» (сокращенно HFM) — расширенная версию Markdown с добавлением специфических для Хабра элементов.

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

• В markdown-режиме нет меню для вставки блоков — все их предстоит добавлять вручную.

• Можно использовать некоторые HTML-конструкции, которых нет в разметке markdown.

• Не забывайте пользоваться функцией предпросмотра.

Синтаксис форматированияПоддерживаемые строчные элементы:

• Inline-изображение:

  

• Inline-формула (в Tex-формате):

  $inline$e=mc^2$inline$

  $e=mc^2$

Поддерживаемые блочные элементы:

• Заголовок:

  # Заголовок 1 уровня
  ## Заголовок 2 уровня
  ### Заголовок 3 уровня

  Важно: поддерживаются только заголовки уровня 1–3.

• Цитата:

  > Цитата

  Важно: вложенные цитаты не поддерживаются, внутри цитаты может быть только параграф текста, inline-изображение, inline-формула и все виды списков.

• Маркированные и нумерованные списки:

  – Пункт 1
  – Пункт 2
  – Вложенный пункт

  + Пункт 1
  + Пункт 2
  + Вложенный пункт

  * Пункт 1
  * Пункт 2
  * Вложенный пункт

  1. Пункт 1
  2. Пункт 2
  1. Вложенный пункт

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

• Медиаэлемент:

  https://foo.bar

• Блок кода:

  “`
  habr
  “`

  “`xml
  habr
  “`

  Поддерживаемые языки подсветки синтаксиса: 1c, assembly, bash, css, cmake, coffeescript, cpp (для C++), cs (для C#), dart, delphi, diff, django, elixir, erlang, fsharp (для F#), go, haskell, java, javascript, json, julia, kotlin, lisp, lua, markdown, matlab, nginx, objectivec, perl, pgSQL, php, powershell, python, r, ruby, rust, scala, smalltalk, sql, swift, typescript, vala, vbscript, vhdl, xml (для HTML и XML) и yaml.

• Формула (в Tex-формате):

  $$display$$e=mc^2$$display$$

  $$e=mc^2$$

• Спойлер (внутри спойлера может быть всё что угодно, включая другой спойлер):

  
  Содержимое спойлера
  

• Разделитель:

  ***

  —

• Якорь:

  habr

• Персона:

  
  ##### Имя
  Специальность

  Важно: должна быть отбита пустыми строками от контента

• Упоминание (меншен):

  @boomburum

Markdown-режим в комментариях

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

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

Пробуйте 🙂 Подробности в справочном разделе: про WYSIWYG / про markdown

Нашли опечатку в тексте? Выделите и нажмите CTRL/⌘+Enter

В этой статье я опущу такие подробности работы с Elasticsearch (далее по тексту просто ES), таких как:

1. Как установить

2. Как подключаться

3. Раскрывать полную схему mapping для товара интернет-магазина

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

И что-либо еще.

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

Предисловие

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

Скрин из интернета.

Сайт разрабатывал не я. Разбираться с ним в дальнейшем не было ни знаний, ни желания. Решил, что впоследствии буду самостоятельно разрабатывать интернет-магазин, но используя другое и нереляционное хранилище данных, а не Mysql. Выбор пал на ES и при изучении понимание структурирования характеристик товаров и получение для них значений, которые впоследствии безболезненно и не затрагивая код можно было бы менять, отняло много времени. Лично мне очень не хватало в русскоязычном интернете абсолютно простых примеров, какие есть, например, для PHP+Mysql.

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

По сути дела

Elasticsearch – это распределенный поисковый и аналитический движок на базе Apache Lucene.  Полностью с описанием можно ознакомиться на официальном сайте.

Фасетный поиск (фасетная навигация) – поиск товара в разделе, категории или же на странице полнотекстового поиска по характеристикам: цвет, материал, цена, производитель и т.д. Для конечного пользователя – набор фильтров. Каждый фильтр – характеристика. Значения этого фильтра – все возможные значения характеристики. Для интернет-магазина это основная функция поиска, и пользователи ожидают, что она будет работать достаточно быстро.

В приведенном ниже примере пользователь находится в категории “люстры” и отфильтровал дополнительно товары в диапазоне цен от 1394 до 42207 руб. и с цветом черный. Было найдено 198 товаров, а на панели фильтров слева перечислены те характеристики, которые содержатся в результатах поиска, а также количество доступных значений, имеющих этот атрибут (количество фасетов):

Для создания фасетного поиска в ES достаточно мощный инструмент агрегирования. Одной из приятных особенностей агрегации является то, что они могут быть вложенными — другими словами, можно определить агрегации верхнего уровня, которые создают «корзины» (buckets) документов и другие агрегации, которые выполняются внутри этих корзин. Для упрощения понимания, это в целом похоже на команду SQL GROUP_BY. На основе фильтров обобщаются, группируются документы по какому-то определенному признаку.

Индексирование значений фасета

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

“facets”: {
“color”: “Черный”,
“style”: “Лофт”,
“room”: “Гостиная”,
}

Mapping ES при этом должен выглядеть так:

“facets”: {
“type”: “nested”,
“properties”: {
“color”: {
“type”: “keyword”,
},
“style”: {
“type”: “keyword”,
}
“room”: {
“type”: “keyword”,
}
}
}

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

“aggs”: {
“facets”: {
“nested”: {
“path”: “facets”
},
“aggs”: {
“color”: {
“terms”: {
“field”: “facets.color”
}
},
“style”: {
“terms”: {
“field”: “facets.style”
}
},
“room”: {
“terms”: {
“field”: “facets.room”
}
},
}
}
}

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

Вместо этого я пришел к следующему

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

“string_facets”: {
{
“name”: “color”,
“value”: “Черный”
},
{
“name”: “color”,
“value”: “Белый”
},
{
“name”: “style”,
“value”: “Лофт”
},
{
“name”: “style”,
“value”: “Техно”
},
{
“name”: “room”,
“value”: “Гостиная”
},
{
“name”: “room”,
“value”: “Спальня”
}
}

Mapping:

“string_facets”: {
“type”: “nested”,
“properties”: {
“name”: {
“type”: “keyword”,
},
“value”: {
“type”: “keyword”,
}
}

Для фильтрации и агрегирования такой структуры требуются вложенные фильтры и вложенные агрегации в запросах.

Агрегация:

“aggs”: {
“aggs_text_facets”: {
“nested”: {
“path”: “string_facets”
},
“aggs”: {
“name”: {
“terms”: {
“field”: “string_facets.name”
},
“aggs”: {
“value”: {
“terms”: {
“field”: “string_facets.value”
}
}
}
}
}
}
}

Фильтрация:

“filter”: {
“nested”: {
“path”: “string_facets”,
“filter”: {
“bool”: {
“must”: {
{
“term”: {
“string_facets.name”: “color”
}
},
{
“terms”: {
“string_facets.value”: {
“Черный”
}
}
}
}
}
}
}
}

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

В mapping это будет выглядеть следующим образом:

“number_facets”: {
“type”: “nested”,
“properties”: {
“name”: {
“type”: “keyword”,
},
“value”: {
“type”: “double”,
}
}

Агрегация:

“aggs_number_facet”: {
“nested”: {
“path”: “number_facets”
},
“aggs”: {
“name”: {
“terms”: {
“field”: “number_facets.name”
},
“aggs”: {
“value”: {
“stats”: {
“field”: “number_facets.value”
}
}
}
}
}
}

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

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

Сайт по стоматологии с конверсией 7,4% и заявками по 157 руб.

Для разработки сайта по стоматологии использовали методику с упором на маркетинг: конверсия выросла на 147%, стоимость заявки снизилась на 55%. Рассказываю, какие 9 базовых инструментов помогают нам достигать таких результатов регулярно.

Кратко о проекте и задаче 

Задача: разработать сайт для услуг «Протезирование зубов»

Конверсия старого сайта – 3%. Стоимость заявки – 328 руб.

Результаты запуска 

Новый лендинг показал конверсию 7,4% (+147%), стоимость заявки – 157 руб. (-55%)

Конверсия сайта увеличилась на 147%, стоимость заявки снизилась на 55%

8 базовых инструментов, чтобы увеличить конверсию на 147% и получать заявки по 157 руб. 

Достичь такого результата помогли:

• Первый экран

• Смысловые заголовки

• Маркетинговое исследование

• Поп-ап окна

• Картинки + текст – единый смысл

• Грамотные акценты

• Лид-формы, квиз

• Кейсы, примеры работ

Ниже подробнее про каждый из инструментов.

1. Первый экран 

Мы всегда уделяем проработке первого экрана тщательное внимание. Если не удастся зацепить внимание пользователя в первые секунды, то в 80% случаев он уйдет искать решение к конкурентам.

На первый экран выносим:

• конкурентные преимущества;

• яркие выгоды;

• критерии, на основе которых ЦА выбирает стоматологию;

• в подзаголовке можно показать, что мы понимаем потребности ЦА и готовы их решить.

На первом экране показали яркие выгоды и конкурентные преимущества

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

2. Смысловые заголовки 

При разработке сайтов никогда не используем стандартные заголовки «О нас», «5 причин обратиться к нам», «О компании» и т.д. Вместо этого через заголовки:

• раскрываем выгоды;

• закрываем страхи и возражения;

• отвечаем на распространенные вопросы ЦА;

• вызываем доверие к компании;

• доказываем экспертность врачей.

Вместо стандартного «Этапы работ» говорим через заголовок, что восстановим зубы за 2-3 визита

О том, как сильно заголовки влияют на конверсию, рассказывала в видео.

Для чего это нужно? Когда посетитель скроллит сайт, он выхватывает взглядом заголовки, иллюстрации и другие яркие, крупные элементы. И уже тогда через смысловые заголовки понимает, почему надо купить здесь. Это увеличивает вероятность, что пользователь заинтересуется услугой, останется изучать сайт дальше и совершит целевое действие.

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

3. Маркетинговое исследование 

На этапе маркетингового исследования провели анализ ЦА, конкурентов и рынка. Выяснили:

• ожидание ЦА;

• страхи и возражения ЦА;

• на основании каких параметров выбирают стоматологию для протезирования;

• как можно превзойти ожидания ЦА;

• какие вопросы задают пациенты по телефону и на первой консультации у врача;

• в чем стоматология нашего клиента лучше и хуже других клиник в своем регионе и т.д.

Кусочек анализа ЦА

Уже на этом этапе прописываем маркетинговые смыслы: как закрывать страхи и возражения клиентов, отвечать на распространенные вопросы и пр. Их можно и нужно использовать не только на сайте, но и в других каналах, где происходит общение с ЦА (скрипты продаж, социальные сети, видео и пр.). Маркетинговые смыслы помогают «прогревать» пользователей и получать «теплых» клиентов.

Рассказываем ЦА: помощью трехмерного моделирования получаем протезы, которые внешне и по ощущениям, как свои настоящие зубы

Чтобы собрать объективную картину про ЦА, исследуем порядка 12-15 источников информации.

В ходе маркетингового анализа изучаем 12-15 источников информации

Приглашаем на первый созвон сотрудников разного звена. В этом проекте на брифе были опрошены:

4. Поп-ап (pop-up) окна 

Мы используем два вида pop-up окон для увеличения конверсии:

1. На входе и выходе

Exit pop-up окно – один из инструментов для получения мощного конверсионного слоя

2. Информационные поп-ап окна. На сайт заходят клиенты, которые в разной степени осведомлены о протезировании зубов. Кто-то уже хорошо изучил эту тему, а кто-то еще только начинает. Для второй категории читателей мы через поп-ап окна отвечаем на информационные запросы: например, как часто менять протезы; для чего нужна КТ-диагностика и пр.

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

5. Картинки + текст – единый смысл 

Подбираем иллюстрации, чтобы они:

• вызывали интерес и обращали внимание на текст;

• усиливали текст;

• несли единый маркетинговый смысл с текстом.

Заголовок «Форма и размер идеально подходят» – доказываем слова соответствующим изображением

6. Грамотные акценты 

С помощью визуального слоя и дизайна расставляем акценты: 

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

• сокращаем количество текста, доносим информацию с помощью инфографики и мокапов. Никто не будет читать полотно текста

Мокап показывает, из чего складывается стоимость лечения

Закрываем страх клиента (протезирование – это больно) и визуально выделяем эту информацию

7. Квиз и лид-формы 

Чтобы зацепить внимание посетителей сайта использовали разные лид-формы:

• стандартные;

• интерактивные (со схемой, на которой можно выбрать больные или отсутствующие зубы)

• викторину с бонусами «Угадайте, где настоящие зубы, а где протезы»

• квиз.

8. Кейсы и примеры работ 

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

Показали, как решили сложный случай

Еще больше подробностей о создании этого сайта в видео

Как копировать в буфер картинки. Какие типы данных можно класть в буфер. Поддержка кастомных типов. Как сделать свои кнопки копировать/вставить.

Рис 1. Копирование между вкладками редактора блок-схем и Google Docs

Задача

Сделать копирование для редактора блок-схем dgrm.net.

• Копировать можно между вкладками.

• Можно копировать в Word/Google docs, тогда схема вставляется как картинка.

• Должны работать горячие клавиши Ctrl+C, Ctrl+V, Ctrl+X.

• Свои кнопки копировать/вставить, чтобы можно было копировать мышкой.

• Поддержка мобильных.

Варианты API работы с буферомdocument.execCommand(‘copy’) не работает

Это API устарело и не работает. Не пытайтесь с его помощью обойти ограничения других API.

Работа с буфером в обработчиках событий ‘copy’, ‘paste’, ‘cut’ document.addEventListener(‘copy’, evt => {
evt.preventDefault();
evt.clipboardData.setData(‘text/plain’, ‘text to clipboard’);
});

Листинг 1. Пишем в буфер на событии “вставить”

В этом варианте нет возможности сделать свою кнопку “копировать”, пользователь должен нажать Ctrl+C.

navigator.clipboard.read/wrightbtn.addEventListener(‘click’, async _ =>
await navigator.clipboard.writeText(‘text to clipboard’)
);

Листинг 2. Пишем в буфер по клику на кнопке

Можно сделать свою кнопку “копировать”. Работает во всех браузерах и на мобильных.
В Safari есть ограничение: нельзя использовать в callback-ах. Так в Safari не работает:

btn.addEventListener(‘click’, async _ =>
// create png from svg
svgToPng(
svg,
// callback
async png => await navigator.clipboard.write(…))
);

Листинг 3. Не работает в Safari. Нельзя использовать navigator.clipboard в callback-ах. Как писать картинку в буфер в следующем разделе.

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

Можно сделать так: строку гарантированно пишем в буфер, если браузер разрешит запишем картинку.

// guaranteed clipboard write
await navigator.clipboard.writeText(‘text to clipboard’);

// try to write img
// if ok -> clipboard will be overwritten
try {
// create png from svg
svgToPng(
svg,
// callback
async png => await navigator.clipboard.write(…));
} catch { }

Листинг 4. Запись текста в буфер гарантирована, если браузер разрешит запишем картинку

Как записать картинку в буферawait navigator.clipboard.write(, { type: ‘text/plain’ }))
})]);

Листинг 5. Запись картинки и альтернативного текста в буфер.

В буфер можно записать одновременно несколько типов данных. Например, картинку и текст. Если вставить в Word – вставится картинка, если в блокнот – текст.

Можно записывать такие типы:

• text/plain

• text/html

• image/png

Некоторые браузеры поддерживают больше типов. Эти три работают везде.

Копировать в буфер можно только png. Другие форматы картинок не поддерживаются.
При копировании браузер “очищает” png. Для безопасности браузер удаляет из png метаданные.

Неприятность для dgrm.net. Dgrm.net хранит в метаданных описание схемы. Благодаря метаданным можно открыть картинку на редактирование – рис 2.

Рис 2. dgrm.net умеет открывать схемы из PNG картинок

Кастомные типы данных в буфере

‘text/plain’ из буфера можно вставить куда угодно. Хорошо использовать свой тип данных, который читает только ваше приложение. Например ‘text/dgrm’.

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

Не все браузеры поддерживают самодельные типы. В Chrome можно использовать кастомные типы, они обязательно должны иметь префикс ‘web ’ -> ‘web text/dgrm’.

Не все браузеры позволяют записать не ‘text/plain’ в буфер с помощью navigator.clipboard.write. Разрешают только в обработчиках событий ‘copy’, ‘cut’. Т.е. свою кнопку “копировать” нельзя сделать.

В итоге остановился на navigator.clipboard.writeText который везде работает.

Чтение из буфера

Чтение буфера еще опаснее чем запись. Еще больше ограничений. В FireFox читать можно только в обработчике события ‘paste’. Свою кнопку “вставить” сделать нельзя, нужно чтобы пользователь нажал Ctrl V.

document.addEventListener(‘paste’, evt => {
const txt = evt.clipboardData.getData(‘text/plain’);
});

Листинг 6. Чтение из буфера на событии ‘paste’

В других браузерах можно использовать navigator.clipboard API.

btn.addEventListener(‘click’, async _ =>
await navigator.clipboard.readText()
);

Листинг 7. Чтение из буфера по кнопке

Браузер запросит разрешение пользователя. iOS Safari будет спрашивать при каждом вызове navigator.clipboard.readText.

О редакторе dgrm.net

Dgrm.net – быстрый редактор без лишних кнопок.

Развиваю редактор. Анонсы обновлений начал писать в телеграм.

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

Изменили в лендинге шаблонные фразы, клише и воду на цифры, примеры, доказательства. Конверсия лендинга выросла на 518%.

Привет! Меня зовут Евгения Корюкова. Я руководитель студии MuscleLend. Мы провели эксперимент и доказали, что продающая структура лендинга – это не только последовательность блоков, но и грамотно выбранные заголовки. Через заголовки и подзаголовки, не читая другой текст, посетитель должен понять «Что здесь продают? Почему это надо купить здесь и сейчас?»

Задачи эксперимента, что сделано

Мы решили проверить, влияет ли на конверсию подача заголовков и остального текста, а также последовательность экранов.

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

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

• для избавления от лишнего веса;

• для роста мышечной массы;

• для улучшения выносливости;

• для улучшения растяжки.

На лендинг №2 и №3 были внесены такие изменения, которые позволяли проверить, насколько верны гипотезы:

• Смысловая составляющая и текст на сайте – одни из главных элементов, которые значительно влияют на конверсию сайта.

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

• Последовательность расположения информации влияет на эффективность сайта.

Над дизайном не запаривались и взяли стандартный шаблон Tilda. Все фотографии на сайте были стоковые. Наша задача была проверить влияние маркетинговой составляющей на конверсию.

Чем лендинги отличаются друг от друга

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

Лендинг №1

За основу взяли шаблон Tilda. Основные особенности:

• «Пустые» заголовки и подзаголовки («Обо мне», «Результаты подопечных» и т.п.).

• Много воды и общих фраз, которые не несут конкретной информации.

• Стандартная структура на основе шаблона.

Посмотрите видео – там подробно рассказала и показала, как выглядит первый лендинг. Это займет не больше 1 мин.

Таких лендингов в интернете встречается 80-90%. Их создают владельцы бизнеса самостоятельно на основе шаблона Tilda или находят универсальных специалистов, которые делают сайт «под ключ» за 5-10 тыс. руб.

Лендинг №2

Изменения коснулись заголовка и текста:

• Заголовки со смыслами, которые должны зацепить внимание посетителей сайта

• Выделены выгоды – другим цветом или полужирным шрифтом

• Добавлено больше конкретики – цифры, факты, доказательства

Посмотрите видео – там подробно рассказала и показала, какие изменения внесли на второй лендинг. Это займет не больше 2 мин.

Лендинг №3

Изменения внесены в заголовки, текст и последовательность расположения экранов:

• На первом экране появилось больше выгод, расставлены акценты

• В призыв к действию добавлен элемент срочности «Успейте бесплатно получить программу до 8 августа»

• Добавлена вторая полная форма заявки – сразу после второго экрана с отзывами

• Последовательность блоков изменилась – на первом экране обозначены основные выгоды и преимущества, а на втором – результаты клиентов. Это то, что интересует целевую аудиторию в первую очередь.

Посмотрите видео – там подробно рассказала и показала, какие изменения внесли на лендинг №3. Это займет не больше 1 мин.

Запустили рекламу в Яндексе

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

• параметры ЦА (целевой аудитории, потенциальных клиентов);

• время и регион показов;

• изображения;

• заголовок и текст объявления.

Один из трех вариантов рекламного объявления

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

Результаты эксперимента

• Конверсия лендинга №1 – 3,45% (менее 4 человек из 100 посетителей оставили заявку)

• Конверсия лендинга №2 – 20,73% (20 человек из 100 посетителей оставили заявку)

• Конверсия лендинга №3 – 21,35% (21 человек из 100 посетителей оставил заявку)

Конверсия лендинга №2 выросла на 500%, лендинга №3 на 518%

Заключение

Наша гипотеза подтвердилась: клише и шаблонные фразы существенно снижают конверсию. Если у вас на сайте встречаются такие заголовки, как «О нас», «Наши преимущества», «Кейсы/портфолио/отзывы», «Почему надо купить у нас», «Команда профессионалов / богатый опыт» и др., подумайте над тем, чтобы заменить их на конкретику – цифры, факты, доказательства.

Здравствуйте, меня зовут Дмитрий Карловский и я.. изобрёл $mol только для того, чтобы ваши глаза кровоточили, глядя в его код. Во всяком случае, такое ощущение может сложиться, если почитать разного рода околоJSНые чаты, но не обращаться к первоисточникам, где все технические решения вытекают из чисто прагматических рассуждений. Один из таких анализов позвольте представить вашему вниманию.

Способы записи camelCase

Традиционно используются в именах переменных и полей во многих современных языках.

❌ Требуется много нажатий шифта вовремя.

❌ слипшиесяСловаТрудноЧитать.

❌ Проблемы с аббревиатурами: sdpFmtpLine, encodeURICoponent.

❌ Имеет проблемы с наложением стилей в CSS (в зависимости от типа элемента и типа селектора стиль может не примениться).

PascalCase

Традиционно используются для имён классов и глобальных неймспейсов.

❌ Требуется много нажатий шифта вовремя.

❌ СлипшиесяСловаТрудноЧитать.

❌ Проблемы с аббревиатурами: XMLHttpRequest, HTMLBRElement, IDBOpenDBRequest, RTCDTMFSender.

❌ Одноимённые имена файлов могут вызвать проблемы в не чувствительных к регистру файловых системах.

❌ Проблемы с наложением стилей в CSS (в зависимости от типа элемента и типа селектора стиль может не примениться).

lowercase

Традиционно используется для имён нативных событий в браузере.

❌ слипшиесясловатрудночитать.

❌ проблемы с аббревиатурами: onicegatheringstatechange.

UPPERCASE

Традиционно используется для cтандартных элементов в некоторых DOM-API (tagName, например)..

❌ СЛИПШИЕСЯСЛОВАТРУДНОЧИТАТЬ.

❌ Требует временного включения caps lock при вводе или зажатия шифта.

❌ проблемы с аббревиатурами: BGSOUND.

❌ Текст с малым числом выносных элементов сложно воспринимать: FIGCAPTION.

❌ Одноимённые имена файлов могут вызвать проблемы не чувствительных к регистру файловых системах.

❌ Имеет проблемы с наложением стилей в CSS (в зависимости от типа элемента и типа селектора стиль может не примениться).

kebab-case

Традиционно используются для имён в HTML, CSS, Lisp, а также в именах файлов.

❌ Редакторы не считают эти имена единым именем (выделение даблкликом, ctrl+стрелка и тп).

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

❌ Имя получается на несколько символов длиннее.

❌ Лишние символы ломают Fuzzy Search в IDE/DevTools, так как они не встречаются в пути.

SHAWERMA-CASE

Традиционно используются для имён нестандартных элементов в некоторых DOM-API (tagName, например).

❌ Редакторы не считают эти имена единым именем (выделение даблкликом, ctrl+стрелка и тп).

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

❌ Требует временного включения caps lock при вводе.

❌ Имя получается на несколько символов длиннее.

❌ Текст с малым числом выносных элементов сложно воспринимать: ACME-TOOLBAR-DROPDOWN.

❌ Лишние символы ломают Fuzzy Search в IDE/DevTools, так как они не встречаются в пути.

❌ Одноимённые имена файлов могут вызвать проблемы не чувствительных к регистру файловых системах.

❌ Имеет проблемы с наложением стилей в CSS (в зависимости от типа элемента и типа селектора стиль может не примениться).

snake_case

Традиционно используются в “олдскульных” языках (C, C++, Rust, Erlang, OCaml) и языках с упором на читаемость (Ruby, Python) для локальных имён и имён полей.

❌ требуется_много_нажатий_шифта.

❌ Имя получается на несколько символов длиннее.

❌ Лишние символы ломают Fuzzy Search в IDE/DevTools, так как они не встречаются в пути.

Cobra_case

❌ Требуется_много_нажатий_шифта.

❌ Имя получается на несколько символов длиннее.

❌ Лишние символы ломают Fuzzy Search в IDE/DevTools, так как они не встречаются в пути.

❌ Одноимённые имена файлов могут вызвать проблемы не чувствительных к регистру файловых системах.

❌ Имеет проблемы с наложением стилей в CSS (в зависимости от типа элемента и типа селектора стиль может не примениться).

SCREAM_CASE

Традиционно используется для констант.

❌ Требует зажатия шифта при вводе.

❌ Имя получается на несколько символов длиннее.

❌ Текст с малым числом выносных элементов сложно воспринимать: SVG_MORPHOLOGY_OPERATOR_UNKNOWN.

❌ Лишние символы ломают Fuzzy Search в IDE/DevTools, так как они не встречаются в пути.

❌ Одноимённые имена файлов могут вызвать проблемы не чувствительных к регистру файловых системах.

❌ Имеет проблемы с наложением стилей в CSS (в зависимости от типа элемента и типа селектора стиль может не примениться).

Смешение стилей

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

❌ Требуется дополнительное ментальное напряжение на ассоциацию и конвертацию разных форматов одного имени.

❌ Тут и там необходимы конвертации между стилями написания.

❌ Не везде возможна автоконвертация. Например в TypeScript на уровне типов такое затруднительно.

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

❌ Суммирует недостатки всех употребляемых стилей.

Нативные API

Web API развивались стихийно, так что не стоит удивляться необоснованному разнообразию форматов имён в разных местах:

Отдельно стоит отметить смешение стилей, ведь одна и та же сущность может именоваться по разному в разных языках:

• Имена стандартных элементов:

• Имена нестандартных элементов:

• Имена атрибутов:

  • JS: camelCase, lowercase

  • HTML: kebab‑case, lowercase

  • CSS: kebab‑case, lowercase

• Имена CSS‑классов:

  • JS: camelCase

  • HTML: kebab‑case

  • CSS: kebab‑case

Особняком стоит химерное именование констант типа SVG_MARKERUNITS_USERSPACEONUSE.

Рекомендации

✅ Оптимальный выбор – snake_case, как наиболее удобочитаемый и наименее проблемный.

Соглашения в $mol

• snake_case — любые имена в XHTML и CSS, локальные имена в JS

• Cobra_case — имена локальных фабрик в JS

• $nake_case — глобальные имена в JS, соответствующие FQN.

Послесловие

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

Актуальный оригинал на $hyoo_page.

Вы когда-нибудь думали о том, чтобы создать свой стартап? Почти каждому стартапу (да и +/- любой компании) нужен лендинг/сайт. А у каждого сайта вверху есть хедер с меню навигации. При чем в наше время он обязательно должно быть адаптивным, чтобы одинаково хорошо работать как на компьютерах, так и на мобильных телефонах и планшетах.

Зачем каждый раз тысячи фронтендеров разрабатывают этот хедер тратя множество часов опять и опять, когда почти все хедеры имеют один и тот же функционал и вид? Почему для этого до сих порт нет вменяемой библиотеки, позволяющей решить проблему подключением одного лишь компонента не тратя уйму времени? Подумала я и создала npm-пакет для React.js, представляющий собой универсальный хедер. Я реализовала большинство фич, которые вам могут потребоваться, это:

1. Поддержка десктопов

2. Поддержка телефонов

3. Поддержка планшетов

4. Поддержка вложенных списков меню

5. Поддержка оверлапинга (можно отображать прозрачный хедер поверх контента)

6. Поддержка кастомного компонента ссылки

7. Поддержка Server-Side Rendering (для Next.js и других фреймворков)

Использование react-header-responsive на реальном проекте можно увидеть здесь*, а ниже посмотреть скриншоты.

*Десктопная версия с включенным overlap

*Десктопная версия с включенным overlap и открытым submenu

*Мобильная версия

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

const pages = ,
},
{
name: ‘Pricing’,
link: ‘/pricing’,
},
];