Добавление статьи о PWA

[FluorescentHallucinogen]

No description provided.

[HellSquirrel]

Очень круто! Добавила немножко правок, все по мелочи :)

[HellSquirrel]

Мне очень нравится. Теперь пусть PRчик немножко полежит, на случай если другие редакторы захотят его посмотреть :) через несколько дней помержим

[skorobaeus]

Какая прекрасная, хорошим языком написанная статья ❤

[FluorescentHallucinogen]

@skorobaeus

Какая прекрасная, хорошим языком написанная статья ❤

Спасибо!

Мне не нравится получившееся из двух скриншотов изображение.

Обязательно ли вообще объединять 2 изображения в одно?

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

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

Были добавлены рамки устройств. Зачем?

В скриншоте из ChromiumOS вообще зачем-то были заменены рамки окна на рамки из macOS. Зачем? :)

При этом устройства не выровнены по вертикали — десктопный скриншот ниже, ещё и обрезан справа. :(

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

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

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

Если всё-таки есть какие-то принципиальные моменты, я могу самостоятельно подготовить необходимый вариант. ;)

Но если возможно, я бы попросил серьёзно рассмотреть вариант оставить оригинальные авторские иллюстрации без внесения в них каких-либо изменений. 🙏

[skorobaeus]

@FluorescentHallucinogen

Нет, конечно, объединять изображения в одно вовсе не обязательно :) Прости, пожалуйста.

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

«На это я пойтить не могу!» (с) Лёлик, «Бриллиантовая рука». Поэтому и собрала скриншоты в одно изображение-схему, а схемы уже подчиняются нашему фирстилю, частью которого являются, например, рамки устройств и предпочтение горизонтальной ориентации вертикальной. В целом, фирстиль, если проект принимает решение его использовать, нужен для того, чтобы таковой проект воспринимался цельно и не был похож на лоскутное одеяло.

Но поскольку размещать скриншоты рядом, как я теперь поняла, непринципиально, давай встроим каждый по-отдельности. Добавить индивидуальные alt'ы и подписи при помощи markdown-синтаксиса можно вот так:

![alt text](src)
Подпись к картинке

Платформа обернёт картинку в <figure> с текстом в виде <figcaption>.

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

Дело в том, ширина изображения, встроенного в тело статьи, либо равна 100% ширины колонки с текстом, либо оригинальной ширине изображения. Ширина колонки с текстом на десктопе ~1080 пикселей, ширина оригинального скриншота с андроида тоже 1080 пикселей, то есть, как ты понимаешь, он встроится как есть и будет ПРОСТО ГИГАНТСКИМ :D

Хорошо было бы ограничить ширину вертикального скриншота примерно до 600-650 пикселей. Он всё ещё будет достаточно большим, чтобы можно было всё рассмотреть, но встроится компактно. Например, в статье про ООП картинки как раз такого размера.

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

[github-actions]

Превью контента из 7cf6e85 опубликовано.

[FluorescentHallucinogen]

@skorobaeus

Но платформа такое не поддерживает

К счастью, это не так. :) Ранее я потратил целый вечер на эксперименты и перед тем, как остановиться на этом варианте, проверил, что он точно работает. Сейчас откатил и проверил ещё раз. Можете убедиться в этом самостоятельно по ссылке https://content-5482.dev.doka.guide/tools/pwa/.

Скриншот при 100% масштабе:

Скриншот при 50% масштабе:

Если это работает на preview-сервере, то должно работать и на production-сервере.

Единственное что, на preview-сервере есть проблема с ресайзилкой изображений, что для некоторых вариантов она возвращает ошибку 415 Unsupported Media Type. Поэтому на некоторых размерах экрана изображения могут быть битыми. Эту проблему уже обсудили с @igsekor. На production-сервере этой проблемы нет.

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

Я проверил также локальный запуск. Там, действительно, есть проблема. Но там отличается разметка и, соответственно, стили (нет тегов <picture>, <source> и т.д.). Это видно в DevTools. То есть похоже на баг с версией для локального запуска. На preview- и production-серверах разметка и стили корректные.

Это решение не было изобретено мной. До этого я контрибьютил в статьи на https://web.dev и подсмотрел решение там. Сайт https://web.dev тоже основан на Eleventy.

В Markdown оба способа вставки изображений

![Some text](image.png)

и

<img src="image.png" alt="Some text">

являются официальными.

Что касается размеров оригинальных скриншотов, я действительно попрошу тебя снизить их разрешение.
он встроится как есть и будет ПРОСТО ГИГАНТСКИМ
Хорошо было бы ограничить ширину вертикального скриншота примерно до 600-650 пикселей. Он всё ещё будет достаточно большим, чтобы можно было всё рассмотреть, но встроится компактно.

В целом, я не против уменьшить разрешение скриншотов.

Но здесь я руководствовался указаниями @solarrust:

формат PNG, ширина изображения не менее 1200px

Я так понимаю, это требование проистекает из того, что есть дисплеи c высокой плотностью пикселей (Retina и т.д.).

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

Если мы уменьшим ширину скриншота до 600 пикселей, то тогда на дисплее с высоким разрешением и плотностью пикселей мы уже не сможем показать изображение в разрешении выше оригинального (то есть 600 пикселей). Либо скриншот будет отображаться маленьким, либо произойдёт апскейл и по факту изображение будет мыльным.

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

<img src="image.png" alt="Some text" width="600">

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

<img src="vertical-image.png" alt="Some text" width="600">

<img src="horizontal-image.png" alt="Some text">

Кстати, на сайте сейчас:

• Изображения выравниваются по левому краю (это видно по логотипу PWA на скриншоте).
• Нет возможности увеличивать изображения по клику (добавление PhotoSwipe или другой библиотеки было бы нелишним).

Поэтому я бы сильно не ограничивал размеры изображений.

Что касается размеров файлов в Git-репозитории, то сейчас скриншоты имеют следующие параметры:

• 1080x1920 px, 563 KB
• 2560x1920 px, 503 KB

Если нужно, можно снизить кратно разрешение, например, до:

• 540x960 px
• 1280x960 px

Это сэкономит несколько сотен килобайт.

[skorobaeus]

К счастью, это не так. :) Ранее я потратил целый вечер на эксперименты и перед тем, как остановиться на этом варианте, проверил, что он точно работает.

Это замечательная новость! Благодаря ей мой день стал гораздо лучше :)

Если нужно, можно снизить кратно разрешение, например, до:

• 540x960 px
• 1280x960 px

Это сэкономит несколько сотен килобайт.

Нет, не нужно.

@HellSquirrel, дергай ручку :)