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

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

Путь развития веб-дизайнера 🙂

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

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

Как пользоваться нейросетью Midjourney 

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

Как получить доступ к нейросети:

• Установите Discord, затем запустите приложение или откройте веб‑версию сервиса в браузере. Я пользуюсь приложением, по ощущениям работает быстрее веб-версии.

• Зарегистрируйтесь или войдите по логину и паролю, если ранее использовали Дискорд. Для регистрации нужен номер телефона и электронная почта. Сервис работает в России, поэтому приберегите танцы с бубнами, а точнее зарубежную карту для оплаты 🙂

• Как только зашли в Дискорд, вы сможете перейти в Midjourney по специальной ссылке‑приглашению.

• После необходимо оплатить подходящий для вас тариф. Оплата через stripe и необходимо использовать только зарубежную карту. 

Стоимость и наполнение тарифов

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

Как настроить Midjourney, чтобы применять в работе

В Discord есть канал Newcomer Rooms с чатами newbies. Там и создается картинка. Выберите любое количество чатов, нажмите и введите /settings. Затем Enter. 

Выберите следующие настройки:

• Первая строка. Версия движка. Выберите версию MJ; MJ Test имеет два экспериментальных изображения вместо четырех; MJ Test Photo — с уклоном в фотореализм.

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

• Третья строка. Уровень конфигурации. Установите значение Средний, Style med, чтобы предотвратить «‎чрезмерную фантазию»‎ нейронной сети. Высокие или слишком высокие результаты могут быть далеки от требований.

• Четвертая строка. Алгоритм повышения качества изображения.Выберите Regular upscale — стандартное повышение качества; Light upscale — повышает разрешение изображения, но с меньшей детализацией; Beta — может достичь вдвое большего размера, чем Regular, но работает нестабильно.

• Пятая строка. Режим доступа. Установите Public mode, так как частный режим платный.

• Пятая строка. Режим редактирования. Опять же, только один доступен бесплатно, Fast mode — мгновенный, со счетчиком производства. Режим Relax без счетчика доступен платно. И сразу включайте режим Ремикс мод, чтобы потом могли объединять картинки.

Рабочая область Midjorney

Затем наберите /imagine, нажмите Enter, введите любое слово в значении promt и подтвердите отправку. Появится окно с правилами, жмакаем «‎Принять»‎. 

Вы великолепны! Теперь вы готовы приступить к работе. 

Как пользоваться бесплатными нейросетями: Шедеврум, Fusion Brain и другими

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

Например, Fusion Brain генерирует изображения по описанию, дорисовывает изображения, а также с помощью ластика можно менять часть изображений. Есть много интересных стилей, мне понравился стиль «советский мульфильм». Без смс и регистрации.

Редактор Fusion Brain

Как используем в работе веб-студии 

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

А что если ты составляешь запрос исходя из своего видения, а нейросеть тебе выдает варианты? Неплохо, подумали мы 🙂 

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

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

1. Формирование блоков по запросу 

Вы отправляете нейросети запрос, а она составляет под этот запрос варианты блоков. Например, попробуйте отправить “promo block for the site of a company selling trout” и пришлите в комментарии, что у вас получилось. 

Пользователь отправил запрос на создание баннера на лендинг адвокатского бюро

Иногда выходит лютая дичь, но в целом показывает неплохие варианты 🙂 

Или вот что вышло на запрос сайта с Египетской тематикой

Лайфхак: добавьте ключевые слова «figma landing page design», и результат будет прикольнее!

Почти макет 🙂

Если вам не зашли предложенные варианты, то вы можете отправить этот же запрос еще раз и получите уже совершенно другие картинки 🙂 

2. Формирование вариантов по примеру 

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

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

Еще примеры получившихся вариантов у подобных запросов:

3. Формирование альтернативных концептов

Вы создали концепт либо какой-то блок, он вам нравится, но было бы интересно посмотреть на него немного в другом оформлении? Пожалуйста! Загружайте концепт ссылкой, формируйте запрос и вам Midjourney выдаст альтернативные варианты. 

Изначальный вариант 

Альтернатив

Запрос. Добавляешь csv awards и считай награда у тебя в кармане 🙂 

Мне первоначальный вариант больше зашел. Но получить в считанные секунды альтернативные варианты — казалось бы фантастикой несколько лет назад. 

4. Создание изображений для контент-маркетинга 

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

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

Например, в Шедевруме ввели промт: «мультяшный пещерный человек улыбается, во весь рост, с палитрой и кистью в руке, 3д модель, октан, реалистично, 4k, высокое разрешение, высокая детализация, яркое освещение, однородный фон». Получили клевого пещерного человека для нашей статьи про Lottie-анимации, а затем добавили этого неандертальца в карточку для Телеграм-канала. 

Первобытный дизайнер из Шедеврум

А это мы в карточку добавили неандертальца

Итоги 

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

Как мы видим — нейросеть скорее помощник дизайнеру, чем его замена. Даже простые промосайты получаются с натяжкой. Про сервисы, CRM, ERP и прочее пока речи не идет. Хотя я бы посмотрел, как справляется нейросеть с проектом уровня Tarkett.

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

Вы используете нейросети в процессах? Возможно, где-то уже полноценно внедрили в клиентские проекты? Делитесь в комментариях!

Удачи и спасибо за внимание 🙂

В данной статье будет описано небольшое руководство по тому, как создать сайт на таком фреймворке как Cample.js. На момент написания статьи (версия 3.1.2), фреймворк уже более года находится в разработке. За это время был реализован минимальный функционал для создания современных веб-приложений.

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

Прежде всего, для того, чтобы создать сайт на фреймворке, необходимо будет его установить. Для установки фреймворка будет необходим Node.js. Благодаря нему, в консоли появится возможность использования npm, через который будет скачиваться фреймворк.

Скачивание фреймворка происходит путём ввода команды в консоль в папке с проектом:

npm i cample

После, в папке node_modules появляется сам модуль. Для использования фреймворка необходима среда, которая будет поддерживать import export модель, благодаря которой будет выстроен код. Такую среду, к примеру, можно настроить благодаря webpack и подходящим модулям, для работы с HTML, стилями, изображениями и т.д. Но, в теории, подходит почти любой сборщик модулей.

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

В HTML файле, стартовой точкой сайта пускай будет тег div с id main. В нём будет находится основной контент сайта.

В javascript файле для начала нужно импортировать такую функцию как cample. Данная функция создаёт экземпляр класса, который является начальной точкой в js для сайта.

import { cample } from “cample”;

Данная функция принимает первым параметром selector блока, куда будет рендериться сайт, а вторым, необязательным параметром, функция принимает объект с опциями. Для дальнейшей работы будет использоваться один параметр.

const mainCample = cample(“#main”);

Все функции в фреймворке создают экземпляры классов. В данном случае, в переменную с названием main присваивается экземпляр класса. У данной переменной теперь можно вызвать метод render, в который будут переданы все компоненты, которые созданы, а также основной HTML template, который будет обработан.

mainCample.render(
`

`,
{
content,
tableRows,
}
);

Используя двойные фигурные скобочки скрипт применяет такой приём как “интерполяция строк”, благодаря которому будет создана срока такого типа:

Такая строчка потом заменяется на HTML компонента. Для того, чтобы работать с компонентами, в js файл нужно импортировать соответствующие функции. В примере будут использоваться функции each и component, которые предоставляют необходимый функционал.

import { component, each } from “cample”;

Сам же компонент, к примеру, будет выглядеть вот так:

const content = component(
“content-component”,
`

`,
{
data: () => {
return {
title: “Основная страница”,
data: ,
};
},
export: {
tableData: {
data: {
data: “data”,
},
},
},
exportId: “mainExport”,
style: “.title{font-size:60px}”,
}
);

В данном примере создаётся div с заголовком h1 и таблицей, данные для которой импортируются из компонента. Подробнее про работу с компонентами можно посмотреть в документации тут. Данные для таблицы хранятся в свойстве data, в которой есть один текст: “Тестовая строка”. В зависимости от этого в таблице будет только одна строка.

Для того, чтобы отобразить данные для таблицы, необходим компонент each. Он повторяет HTML код в зависимости от данных.

const tableRows = each(
“rows-component”,
({ importedData }) => importedData.data,
`

`,
{
import: {
value: [],
exportId: “mainExport”,
},
}
);

Главным моментом при создании цикла является указание свойства key для повторяющегося HTML. Более подробно о том, чем отличается keyed реализация от non-keyed можно посмотреть тут. При импортировании, в функции данных можно указать то самое импортированное свойство data, тем самым отобразив данные на сайте. В самом свойстве import для значения value можно указать пустой массив, тем самым импортировав всё то, что экспортируется.

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

import { cample, component, each } from “cample”;

const content = component(
“content-component”,
`

`,
{
data: () => {
return {
title: “Основная страница”,
data: ,
};
},
export: {
tableData: {
data: {
data: “data”,
},
},
},
exportId: “mainExport”,
style: “.title{font-size:60px}”,
}
);
const tableRows = each(
“rows-component”,
({ importedData }) => importedData.data,
`

`,
{
import: {
value: [],
exportId: “mainExport”,
},
}
);
const mainCample = cample(“#example”);
mainCample.render(
`

`,
{
content,
tableRows,
}
);

Результатом же кода, будет примерно такая страница:

Результат работы скрипта на сайте

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

Всем большое спасибо за прочтение статьи!

1. Введение

2. Начало

3. Пример

4. Заключение

Введение

Доброго времени суток. Сегодня хочу рассказать вам о том как добавить сайт в поисковую систему.

Многие активно развивают бизнес в интернете или же приходят в него, чтобы получить дополнительный поток аудитории. Разработчики стараются в этом помочь, разрабатывая сайты. Часто бывает так, что уже сайт готов, но бизнес не видит сайта в Google, Bing, Yandex и других поисковых системах:

Пример отсутствия сайта в поисковике Bing

Сайт написан, домен куплен, так почему же я до сих пор не вижу его?

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

Чтобы добавить сайт существуют вебмастера, которым нужно рассказать, что сайт доступен по адресу домена и уже готов к индексации, отображению и продвижению 🙂

Терминология

• HTML – язык гипертекстовой разметки. Файлы `file.html` содержат код для структурирования и отображения веб-страницы и её контента.

• Метаданные – информация о другой информации, или данные, относящиеся к дополнительной информации о содержимом или объекте.

• Метатеги HTML – структрированные метаданные о веб-странице.

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

• DNS – Domain name system – доменная система имён, используется для получения информации о домене. Подробнее можно о DNS узнать из комикса.

• Вебмастер – сервис для отслеживания индексации вашего сайта, сбора статистики по поиску и т.п.

Начало

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

Robots.txt

Файл robots.txt текстовый файл, но который должен содержать определённую структуру для определения поисковыми роботами.

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

Пример

В данном примере мы запрещаем Яндекс роботу просматривать директорию secret, но остальные поисковые роботы получат к нему доступ:

User-agent: Yandex
Disallow: /secret/

User-agent: *
Allow: /

Sitemap: https://example.com/sitemap.xml

User-agent – наименование поискового робота;

Allow/Disallow – разрешение или запрет на чтение;

Sitemap – указывает на расположение файла sitemap.xml для дальнейшей индексации.

Существуют правила по расположению файла robots.txt для чтения его роботами:

• Файл должен находиться в корне

• Файл должен иметь название robots.txt

• Файл должен быть в единственном экземпляре

• Файл можно размещать на субдомене

• Файл должен быть в кодировке UTF-8

Каждый файл robots.txt, размещённый на разных субдоменах, отвечает за свой субдомен и протокол. То есть http://example.com не равно http://sub.example.com, как и http://example.com не будет равен https://example.com

Подробнее о файле robots.txt тут. А также существует онлайн сервисы, которые помогают в составлении robots.txt. Пример сервиса: https://pr-cy.ru/robots/.

Sitemap.xml

Sitemap – это XML файл с информацией о страницах, которые должны быть проиндексированы поисковой системой.

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

Пример файла sitemap.xml


https://pavlusha.me/
2023-08-14T08:00:00+00:00


https://pavlusha.me/src/img/me.jpg


Pavel Zavadski Photo

Для sitemap.xml также существуют сайты с генерацией контента. Пример такого сервиса: https://www.xml-sitemaps.com/.

Метатэги

Метатэги HTML несут с собой информацию, такую как описание сайта, ключевые слова, указание иконки (favicon) и т.д. Они также позволяют указать информацию для создания карточек предпоказа вашего сайта в интернете. Для этого вы можете использовать Open Graph от Facebook и Twitter.

Ниже приведены примеры написания метатэгов для предпоказа вашего сайта.

OpenGraph

Open Graph – это протокол, введенный компанией Facebook в 2010 году для более глубокой интеграции Facebook с любой веб-страницей. Он позволяет любой веб-странице иметь ту же функциональность, что и любой другой объект в Facebook. Вы можете контролировать, как ваш сайт отображается в Facebook. Теперь и другие социальные сети, такие как Twitter, LinkedIn, признают метатеги Open Graph.

OpenGraph метатэги

Twitter

Twitter метатэги

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

Пример добавления сайта в поиск

В примере я буду добавлять сайт npleto.ru в Яндекс при помощи Яндекс Вебмастера

Вебмастер Яндекса. Страница для добавления сайта

Чтобы добавить сайт требуется ввести его адрес (в моём случае https://npleto.ru) и нажать добавить. Далее нужно подтвердить право владения доменом, для этого есть 3 пути:

• HTML файл – потребуется разместить файл на сервере

• Метатэги – добавить метатэг в HTML страницу

• DNS записи – добавить DNS запись

Я буду использовать подтверждение по DNS записи. Для этого потребуется создать TXT запись в панели управления DNS записями. Использую Cloudflare, поэтому пример со скриншота может отличаться. Яндекс Вебмастер потребовал вписал TXT запись со значением yandex-verification: 7d6dxxxc47exxx2b:

Cloudflare добавление DNS записи

После добавления DNS записи возвращаемся в Вебмастер и нажимаем Проверить.

Статус в вебмастере

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

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

Спустя некоторое время сайт появиться в поисковой выдаче. Точное время появление в поиске определяется самой поисковой системой. Но чтобы точно знать что сайт уже появился в поиске рекомендую использовать ключевые слова site: данный запрос в поисковике вернёт вам все проиндексированные страницы домена

Заключение

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

Указание robots.txt, sitemap.xml, метатегов, использование семантической вёрстки и подробное описание сайта – это вершина айсберга к пониманию работы поисковых роботов, но уже может решить много задач, связанных с появлением сайта в поисковой выдаче и его продвижением.

Всем привет! Я – Влад, руководитель группы поисковой оптимизации в Ozon. 

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

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

И нам есть чем поделиться. Приглашаем на открытый Ozon Tech Community Go Meetup, в Москве, 20 сентября в 19:00. На митапе подробно обсудим Go и технологии, которые мы используем в разработке маркетплейса Ozon. Узнаем, как устроена разработка доставки и пути совершения покупки.

В программе:

Открытие митапа и приветственное слово

«Как заставить вашу базу-данных держать 20K RPS, варианты масштабирования и их минусы»

Доклад о том, как правильно скейлить вашу БД от 1 RPS до 20К RPS, какие подходы к масштабированию существуют и какие неочевидные минусы есть в этих подходах.

«RoaringBitmap: что это такое и как мы это используем»

Поговорим о том, что такое битмапы и как устроены RoaringBitmap, как с ними работать в Go и как мы это используем в Ozon при работе с сегментами.

«Protocol Buffers: про то что все знают или не знают» 

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

Встречаемся в офисе Ozon, «Башня на Набережной», 10, блок С, 30 этаж, Москва-Сити. Начинаем собираться в 18:30. 

Для участия в событии регистрируйтесь по ссылке и ждите подтверждения в письме. К сожалению, места в зале уже закончились, присоединиться можно только онлайн, в день мероприятия вам придёт ссылка на трансляцию. Трансляция будет на нашем YouTube-канале и в сообществе в VK. 

Одной из задач, где мы в Ozon используем Canvas, является обработка видео. Для это у нас реализован минималистичный видеоредактор.

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

Зачем нам видеоредактор

Есть два сценария, в которых мы можем использовать видеоредактор:

• загрузка видео в карточки товаров;

• внутренние сервисы для обучения сотрудников и продавцов.

Для этих сценариев необходимы следующие функции:

• выбор обложки видео,

• удаление звука,

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

• удаление сегментов видео.

Зачем нужно было делать свой редактор для веба и почему не использовать готовый? На эти вопросы достаточно просто ответить. Очень часто приложения для редактирования видео сложны в использовании и требуют специальных навыков. Вдобавок к этому это ещё одна точка входа для работы с контентом. Но почему в вебе? Тут тоже всё просто: функциональность для управления контентом доступна только там.

Выбор обложки для видео

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

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

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

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

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

О реализации

В своей реализации мы используем три варианта оптимизации:

1. Адаптивная нарезка кадров в зависимости от длительности видео.

2. Формирование полотна из картинок.

3. Canvas для отображения видео в нескольких местах приложения.

Адаптивная нарезка кадров в зависимости от длительности видео

Такая детализация в нашем UI нужна в двух местах: превью активного кадра на прогресс-баре и большое превью в центре экрана. Весь остальной прогресс-бар не требует мелкой детализации. Главное для нас — показать пользователю ключевые моменты ролика с небольшой точностью. В нашем случае эта точность в среднем равна пяти секундам для больших видео и одной секунде — для маленьких.

Формирование полотна из картинок

Чтобы уменьшить количество запрашиваемых пользователем картинок, обычно прибегают к формированию полотен из нескольких изображений. Это позволяет уменьшить объёмы хранимой и передаваемой информации. Это уменьшение происходит потому, что контейнеры JPG, PNG и т. д., помимо самого изображения, хранят ещё и метаинформацию, необходимую для отображения картинки в данном формате. Меньше файлов — меньше метаинформации.

Полотно из картинок выглядит так:

После получения полотна использовать его для корректного отображения нужного кадра достаточно просто: нужно лишь применить CSS-свойство background-position.

Для отображения первого кадра нужно применить код ниже:

width: 58.8px;
height: 104px;
background: url(https://cdn1.ozone.ru/P0.jpg) 0px 0px / 117.6px 208px;

В результате мы отобразим кадр, обведённый красным:

А для четвёртого кадра нужно сделать вот так:

width: 58.8px;
height: 104px;
background: url(https://cdn1.ozone.ru/P0.jpg) -58.8px -104px / 117.6px 208px;

Тут видно, что мы указываем в свойство background смещение по горизонтали 58,8 px, равное ширине кадра, а по вертикали — 104 px, равное высоте кадра.

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

Canvas для отображения видео в нескольких местах приложения

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

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

const canvasRef: HTMLCanvasElement = this.$refs.preview;
const videoRef: HTMLVideoElement = this.$refs.video;
const context: CanvasRenderingContext2D = canvasRef.getContext(‘2d’);

context.drawImage(videoRef, 0, 0, canvasRef.width, canvasRef.height);Работа с сегментами видео

Самая сложная функциональность нашего видеоредактора связана с логиком по работе с сегментами (отрезками) видео.

Она состоит из нескольких опций:

1. Изменение длительности видео.

2. Удаление сегментов в любой части ролика.

3. Удаление звука.

Интерфейс выглядит так:

Есть три блока для работы с видео:

1. Список сегментов.

2. Плеер с текущим видео.

3. Таймлайн для взаимодействия с конкретным моментом ролика.

Список сегментов

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

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

Таймлайн для взаимодействия с конкретным моментом ролика

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

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

Для уменьшения количества запросов и объёма передаваемых данных мы, так же, как и в компоненте, который рассматривали в предыдущем разделе, используем механизм с полотнами, но применяем ещё одну оптимизацию. Она связана с количеством элементов в DOM-дереве. Поскольку изображений может быть очень много, мы отображаем полученные полотна в одном теге Canvas, располагая их друг за другом по горизонтали. Соответственно, при изменении масштаба таймлайна кнопками скейл в UI мы просто меняем размер изображений, которые рисуем в Сanvas. Благодаря этому за отображение таймлайна у нас всегда отвечает всего один DOM-элемент.

Вывод

Объединяя изображения в одно, мы выигрываем в количестве запросов, объёмах передаваемых ресурсов и пространства для хранения данных. А Canvas помогает нам минимизировать затраты на воспроизведение видео и сводит к минимуму количество DOM-элементов. Таким образом, используя перечисленные приемы, можно достичь хороших показателей производительности.

Эта статья — перевод оригинальной статьи “New in Chrome 117”.

Также я веду телеграм канал “Frontend по-флотски”, где рассказываю про интересные вещи из мира разработки интерфейсов.

Вступление

Что ожидается в статье:

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

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

• DevTools упрощает процесс локальных переопределений.

• И многое другое.

Я Адриана Джара. Давайте узнаем, что нового ждет разработчиков в Chrome 117.

Новые возможности CSS для анимации появления и исчезновения.

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

Первая функция – transition-behavior. Для анимации дискретных свойств, таких как display, используйте значение allow-discrete для transition-behavior.

.card {
transition: opacity 0.25s, display 0.25s;
transition-behavior: allow-discrete; /* Заметка: будьте уверены, что пишите это после transition */
}

.card.fade-out {
opacity: 0;
display: none;
}

Затем используется правило @starting-style для анимации эффектов появления через display: none в верхний слой. Используйте @starting-style для применения стиля, который браузер может найти до того, как элемент будет открыт на странице.

/* 0. Состояние BEFORE-OPEN */
/* Начальная точка перед анимацией */
@starting-style {
.item {
opacity: 0;
height: 0;
}
}

/* 1. Состояние IS-OPEN */
/* Состояние, при котором элемент открыт + логика перехода */
.item {
height: 3rem;
display: grid;
overflow: hidden;
transition: opacity 0.5s, transform 0.5s, height 0.5s, display 0.5s allow-discrete;
}

/* 2. Состояние EXITING */
/* Во время удаления, перед удалением DOM в JS,
примените следующее преобразование для высоты,
непрозрачности и преобразование, которое сожмёт элемент
и сдвинет его влево перед установкой для него значение display: none */
.is-deleting {
opacity: 0;
height: 0;
display: none;
transform: skewX(50deg) translateX(-25vw);
}

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

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

Группировка массивов

В программировании группировка массивов является чрезвычайно распространенной операцией, наиболее часто встречающейся при использовании запроса GROUP BY в SQL и при программировании MapReduce (которое правильнее называть map-group-reduce).

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

Группировка массивов позволяет реализовать эти сценарии за счет добавления статических методов Object.groupBy и Map.groupBy.

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

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

const inventory = ;

const result = Object.groupBy(inventory, ({ type }) => type);

/* Result is:
{
vegetables: ,
fruit: ,
meat: }
*/

Более подробную информацию можно найти в документации по groupBy.

Упорядочение локальных переопределений в DevTools.

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

Чтобы переопределить веб-содержимое, откройте панель Network, щелкните правой кнопкой мыши запрос и выберите пункт Override content.

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

После настройки переопределений DevTools переводит вас в меню Sources > Overrides > Editor, где вы можете переопределить веб-содержимое.

Обратите внимание, что переопределенные ресурсы отмечены значком Saved. на панели Network. Наведите курсор на значок, чтобы увидеть, что именно было переопределено.

Все подробности и дополнительную информацию о DevTools в Chrome 117 см. в разделе “Что нового в DevTools”.

И ещё!

Конечно, есть и ещё.

• Долгожданное значение subgrid для grid-template-columns и grid-template-rows теперь реализовано в Chrome.

• WebSQL помечена как устаревшая и событие unload тоже.

• notRestoredReasons API для bfcache, упомянутый в видеоролике для Chrome 116, должен быть запущен в этой версии.

Всем привет! Краткий обзор новостей из мира PHP и Laravel за август 2023 г.

PHP ДайджестВышли PHP 8.0.30, PHP 8.1.22 и PHP 8.2.9

В этих выпусках исправлена уязвимость при загрузке внешних сущностей в XML без соответствующего разрешения и неправильное управление буфером в функции phar_dir_read.

Вышел первый релиз кандидат PHP 8.3.0

Релиз менеджеры PHP 8.3 Якуб Зеленка и Эрик Ман создали ветку PHP-8.3 в репозитории, теперь вся разработка по релизу будет вестись в ней.

Мастер ветка теперь нацелена на следующую версию PHP.

RFC Vote

Брент Руз и Роман Пронский запустили проект, позволяющий любому желающему проголосовать за RFC.

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

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

Вышел WordPress 6.3 Lionel

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

Вышел PhpStorm 2023.2

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

Команда PhpStorm улучшила поддержку дженериков, оптимизировала генерацию PHPDoc блоков, добавила встроенную поддержку Laravel Pint и многое другое.

Большинство новостей ядра PHP подробно освещаются в серии PHP Core Roundup от PHP Foundation, мы лишь быстро по ним пробежимся.

RFC: Support optional suffix parameter in tempnam

Атос Рибейро предлагает добавить в функцию tempnam новый необязательный параметр suffix.

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

Вышел Filament 3

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

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

Для работы Filament 3 потребуется Laravel 10 и выше, Livewire 3 и PHP 8.1 и выше.

The State of Laravel Survey

Тобиас Петри запустил ежегодное исследование по Laravel. В прошлом году более 2.5 тысяч разработчиков приняло участие в опросе.

Laravel дайджест10.16. Schedule:list command 

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

10.16. Collection::groupBy method

Пофиксили проблему в eloquent коллекциях – в том случае когда мы через groupBy использовали ключ на котором висел каст трансформации в enum.

10.17. Laravel Prompts

Теперь Laravel Prompts интегрирован прямо в коробку Laravel. Мой обзор этого пакета смотрите в видео.

10.17. Config show command

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

10.17. Collection::ensure method

В рамках коллекции появился новый метод ensure, который позволяет нам проверить все элементы коллекции на указанный тип.

10.19. Word wrap string method

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

10.19. Percentage method в коллекциях

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

10.19. withDelay() method

Метод withDelay() позволяет нам указать задержку перед выполнением логики листнера.

10.20. SoftDeletes у отношений MorphTo

Появилась возможность использовать SoftDeletes методы withTrashed(), withoutTrashed(), onlyTrashed().

10.20. MergeWhen() method

С помощью этого метода мы можем объединять что-либо в исходный массив если выполняется условие.

10.20. BenchMark::Value() method

Удобный метод чтобы проверить производительность.

10.20. CreateOrFirst method

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

10.21. Короткий синтаксис в Blade для false значения

Можно использовать ! для этого.

Видео версия дайджеста:

Последний пост про развитие моего Telegram чата для сайта (Telegram Feedback) был в марте, чуть больше полугода назад. С тех пор проект подрос, пользователей стало больше, а деньги пусть и не полились рекой, но хотя бы тоненьким ручейком.

Содержание всех статей

Содержание

Куда пропал, чего не писал?

Ещё в марте я планировал написать несколько статей, касающихся проекта. Но сначала был занят, а потом запустил ещё один проект – ChatGPT Me.

Собственно, на новом проекте заработал некоторые деньги (да и продолжаю зарабатывать) и решил снова вернуть 100%-ный фокус внимания на Telegram Feedback. Он растёт пусть и более медленно, но намного более надёжно.

P.S. Если хотите, чтобы рассказал, как и сколько я заработал на ChatGPT – пишите в комментариях. Не миллионы, но больше зарплаты Junior-программиста в виде пассивного дохода 😁.

О партнерской программе (я больше не жадный!)

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

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

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

Как результат, на прошлой неделе поменялись условия партнерской программы: теперь я плачу 70% от подписки нового пользователя.

Если привлеченный пользователь привёл пользователей через копирайт – ещё 50%. И так далее: 30%, 10% и 5%. Это помогает зарабатывать, если первый пользователь не заплатил, но установил бесплатный виджет и привлек другого платного пользователя.

Так что если умеете в SEO, контент-маркетинг, директ (хотя директ у меня не окупился) – присоединяйтесь.

Информация о партнерской программе.

Какие цифры были в марте?

Если верить моей первой статье, тогда цифры были следующие:

Крайне лаконичный дашборд

105 платных пользователей и ~130 просто пользователей, которые не оплатили. На тот момент у виджета был тестовый период 7 дней.

Да, это немного, но зато честная работа

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

Какие были глобальные изменения?

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

1. Добавил бесплатную версию виджета. Да, чтобы заработать, начал раздавать продукт условно бесплатно. Раньше было обязательно платить, а сейчас платить необязательно. Но… будет копирайт!

   Как пришёл к этой идее: я ставил виджет на каждый свой новый сайт. И задолбался себе платить. Условно есть 5 сайтов, из них только 1 с действительно большим трафиком. Скрытый копирайт и кастомный дизайн, получается, нужен одному сайту из пяти сайтом.

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

   Сейчас для маленьких сайтов есть бесплатный вариант чата (который практически идентичен по функционалу). Но, в то же время, бесплатный виджет даёт продукту следующие бонусы:

   – сайты выступают рекламой виджета (win-win);
   – пользователь виджета привыкает к продукту и дальше им пользуется.

   Затем, в моменте, когда сайт становится популярным – виджет уже покупают. А бесплатный ставят вообще на все сайты.

   За идею все-таки пересмотреть и вернуть бесплатную версию спасибо Дмитрию, который написал об этом под первой статьей. Я действительно тогда об этом задумался.

2. Сделал бесплатную версию виджета идентичной по функциональности

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

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

   К чему приводит жадность? К потере денег и пользователей. Бесплатной версией с ограничениями пользовались, но неохотно.

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

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

Результат: бесплатных пользователей в 3 раза больше, чем платных и 37.5% новых регистраций идут через копирайт. Сайт растёт в SEO за счёт посещаемости, пользовательская база увеличивается.

Какие цифры сейчас?

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

По пользователям и оплатам:

Лаконичный дашборд всё такой же лаконичный

По выручке:

Скрин из CloudPayments

По регистрациям:

Какие планы дальше

Глобально, сейчас у меня несколько векторов развития:

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

  Надеюсь, стартап теперь будет не до конца в соло.

  Напомню, вот информация – условия партнерской программы.

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

Заметка: клиент не всегда прав

Периодически мне в чат пишут довольно наглые пользователи. Например, человек оплатил подписку (а чаще даже не оплатил) и после этого:

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

– хамски общается с поддержкой (видимо думает, что там администратор-не-человек-который-обязан-помогать);

– выставляет требования в формате: не поможете, не настроите, не разработаете – я не буду пользоваться! Я же клиент, я всегда прав.

В таких случаях пользователь идёт в пень.

Если бесплатная версия: виджеты блокируются и аккаунт удаляется.
Если платная версия: делаю возврат и тоже сношу аккаунты (такое было 2 раза).

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

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

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

В этот же день на почту пришла жалоба на меня же 😁. Причём с умалчиванием деталей. Ну что ж… какой запрос, такой ответ!

Оказалось, это изначально был тролль

Уточню ещё раз: я категорически против неуважительного отношения к пользователям.

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

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

Но если человек переходит в открытое хамство – пусть идёт работать вместе с такими же по восприятию мира людьми.

3 совета о развитии SaaS’a

Какие выводы я сделал за прошедшие полгода развития проекта и что могу посоветовать:

1. Бесплатная версия продукта приносит аудиторию.

   Если SaaS массовый, стоит подумать о бесплатной версии и развитии через копирайт. Это бесплатно и, если продукт хороший, он будет расти.

2. Жадничать нельзя.

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

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

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

   Давайте заработать в первую очередь тем, кто вам помогает, а потом думайте о своем кармане.

3. Не работайте с м*даками.

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

—

И поставьте лайк. Ну пожалуйста. ⬆️

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

Везде уникально

Одним из основных преимуществ UUID является их глобальная уникальность. UUID разработаны таким образом, чтобы быть универсально уникальными в пространстве и времени. Это означает, что даже если у вас есть несколько баз данных, распределенных систем или разных объектов, генерирующих идентификаторы, вероятность столкновения практически равна нулю. Напротив, автоматически увеличивающиеся идентификаторы уникальны только в контексте одной таблицы базы данных, что может привести к конфликтам при объединении данных или работе с распределенными системами.

Нет необходимости в центральном мастере

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

Отсутствие предсказуемости

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

Отсутствие необходимости в повторном обращении к базе данных

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

Лучше для распределенных систем

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

Подходит для автономной генерации данных

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

Совместимость с несколькими хранилищами данных

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

Заключение

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

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

Привет, меня зовут Денис, я руковожу направлением разработки в Домклике. Дополнительно несу ношу лидера frontend-направления в нашей компании. Не так давно я отрефакторил систему собеседований для frontend-разработчиков, попутно тестируя технические вопросы на внешних и внутренних респондентах. И пришёл к выводу, что множество мной опрошенных разработчиков, вне зависимости от уровня, не знают или просто не обращают внимание на базовые правила при работе с картинками. В результате на просторах интернета зачастую можно найти изображения размером 200 на 200 пикселей и весом в несколько мегабайтов со смещением макета, столь раздражающим пользователей. Если вам интересно, как практически без вложений улучшить пользовательский опыт, то прошу под кат.

Содержание:

• Исходные данные и выбор основного формата

• Изменение размеров

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

• WebP

• Тег picture и srcset

• Предзагрузка

• Ленивая загрузка

• Сдвиг макета

• Object-fit

Исходные данные и выбор основного формата

Для того, чтобы статья была наглядной и последовательной, я взял из одного из проектов моей команды картинку размером 1600 x 484 пикселей. Оригинал в png весит 1,1 Mб, а оригинал в jpg весит 807 Kб. Здесь впору задать себе вопрос, нужен ли альфа-канал? Если нужен, берём png, в противном случае берём jpg, так как он меньше весит, а качество визуально идентично в подавляющем большинстве случаев. Для следующих двух пунктов нам потребуется инструмент для изменения размеров и оптимизации изображений. Существует колоссальное количество инструментов как онлайн, так и десктопных. Лично я использую iLoveIMG, но вас, разумеется, это никак не должно ограничивать. Для конвертации исходных изображений в формат WebP использую cloudconvert.

Изменение размеров

Начнём с того, зачем менять разрешение и когда это необходимо. Благодаря этому мы можем сделать картинку легче и тем самым повысить скорость её загрузки. Если мы не собираемся использовать нашу картинку как фон во весь экран, а, например, хотим показать в блоке с размерами 400×121, то необходимо уменьшить её до размера (400×121)*2, чтобы картинка не стала выглядеть хуже на дисплеях с увеличенной плотностью пикселей, таких как Retina. Чтобы потом не возвращаться к этой главе, сразу предлагаю сделать картинки для обычных дисплеев размером 400×121. Будем ли мы их использовать, зависит от многих «но» и «если», но об этом позже. Ниже приведена таблица с разрешением и весом после изменения разрешения.

Оптимизация

Оптимизация изображений это всегда риск того, что что-то пойдёт не так. По этой причине я не использую всевозможные плагины для оптимизации изображений при сборке статики через Webpack. За много лет разработки неоднократно натыкался на испорченные изображения после выкатки в production. Используя всё тот же онлайн-инструмент, прогоняем все шесть картинок, получившихся в предыдущем пункте, и визуально осматриваем их на предмет отсутствия всевозможных артефактов и значительного ухудшения качества. Вес изображений после оптимизации привёл в табличке ниже.

WebP

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

Тег picture и srcset

Мы можем использовать picture для того, чтобы:

1. Добавить запасной вариант для браузеров, не понимающих формат WebP.

2. Дать браузеру возможность выбрать максимально подходящую картинку для отображения.

В пример ниже мы сообщаем браузеру о том, что ему следует использовать для дисплеев Retina изображения с разрешением 800×242, а для обычных — 400×121. Если браузер умеет работать с WebP, то использовать именно этот формат, иначе — png.

Но, как говорил Иван Васильевич: «есть нюанс». Об этом самом нюансе пойдёт речь в следующей главе. 

Предзагрузка

Есть такая метрика веб-производительности, как Largest Contentful Paint (LCP). Она означает длительность загрузки самого большого визуального элемента в той области, которую видит пользователь при попадании на страницу. И, конечно же, при обнаружении изображения Lighthouse собирает с него метрики. Чтобы улучшить этот показатель, мы с вами уже изменили размер изображения, оптимизировали его и даже добавили WebP. Но есть ещё способ улучшить метрику, а именно: предварительно загрузить изображение. Делается это с помощью тега link в заголовке страницы:

Эта подсказка браузеру повышает приоритет загрузки изображения, а также начинает его загрузку ещё до обнаружения элемента img в DOM. И тут мы как раз подходим к нюансу. Если у нас были разные изображения для Retina и прочих дисплеев, то с предварительной загрузкой на текущий момент времени мы должны чётко знать, что и зачем загружаем. Проблема в ограниченной поддержке атрибута srcset для тега link. В данном случае лучше предварительно загрузить WebP с двойной плотностью пикселей и использовать эту картинку как для Retina, так и для обычных дисплеев. А код с запасным вариантом будет выглядеть немного проще.

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

1. атрибут loading со значением lazy в теге img

2. intersectionObserver API

Как можно заметить, оба этих способа имеют довольно хорошую поддержку в браузерах. А вот что лучше использовать — решать вам. Могу лишь перечислить преимущества и недостатки. Например, первый вариант проще реализовать и он SEO-дружелюбный. Но вы не управляете тем, что и когда будет загружено, браузер сам задаёт пороговые значения расстояния от области просмотра. Иными словами, тяжёлая картинка за границами экрана может загрузиться сразу, что повлияет на скорость загрузки и отзывчивость сайта, особенно при медленном соединении. Пример с котиками тут.

Что касается intersectionObserver API, то процесс появления изображения лежит уже на наших плечах, и расстояние до контента задаём мы сами. А недостаток в том, что придётся написать пару строчек кода на JavaScript, к тому же этот вариант будет в любом случае подсовывать поисковикам либо неправильную ссылку на изображение, либо изображение будет отсутствовать в разметке вовсе. Но если вас не заботит SEO, то это не проблема.

Сдвиг макета

Ещё одна из важнейших, по моему мнению, метрик из семейства web performance: это Cumulative Layout Shift (CLS). Она разделяет второе место по значимости вместе с Largest Contentful Paint(LCP) и имеет вес в 25 баллов в Lighthouse v10. Взглянем на пример ниже.

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

Так вот, очень важно указывать изображениям ширину (width) и высоту (height), это верный способ избежать смещения макета. А также поможет ленивой загрузке правильно высчитать расстояние до картинки. В результате после добавления картинке значений ширины и высоты сдвиг макета более не побеспокоит пользователей.

Object-fit

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

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

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

Выводы

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