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

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

Задача

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

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

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

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

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

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

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

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

Ссылки по теме:

• Картинка ждёт читателя. Часть 1
• Картинка ждёт читателя. Часть 2

Результат

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

Во-вторых, вариант максимум. Вообще, у меня есть скрипт управляемой загрузки Эмёрдж. Он отвечает именно за порядок отображения и анимацию появления картинок, но не за управление их скачиванием с сервера. Идеально было бы вообще сделать Эмёрдж 2: переписать на чистом современном Джаваскрипте; добавить нужную Эгее логику; встроить в Эгею.

Ссылки по теме:

• Дизайн декларативных АПИ

Условия участия

Если вам интересно такое сделать, напишите мне письмо. Какие у вас есть вопросы? Что в моём описании вызывает сомнения? Возможно, нормальные ребята делают не так, как я хочу, и вы мне всё объясните? Важно: я не смогу оплатить вашу работу, но смогу использовать её результаты в Эгее, в том числе в её платной версии. О вашем участии я, разумеется, напишу. Если вы выберете вариант максимум с докруткой Эмёрджа, условия обсудим отдельно.

Когда мы заимствуем слова с перекошенным ударением, обычно мы его сдвигаем куда-то в середину. Был фу́тбол, стал футбо́л; был ма́ркетинг, стал марке́тинг.

Так что вообще непонятно, с какого перепугу люди вдруг говорят «ди́рект», когда имеют в виду дире́кт в Инстаграме.

Рассказываю, как помогает внесение асимметрии в дизайне, показываю корабли. Обзор недели 25 апреля — 2 мая 2021 года:

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

Вопрос спецам по Нгинксу.

В конфигурации Нгинкса прописаны такие заклинания про ССЛ:

ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;
ssl_trusted_certificate /etc/nginx/ssl/letsencrypt-chain.pem;

Только на месте example.com настоящий домен.

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

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

ssl_certificate /etc/letsencrypt/live/$HTTP_HOST/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/$HTTP_HOST/privkey.pem;
ssl_trusted_certificate /etc/nginx/ssl/letsencrypt-chain.pem;

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

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

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

Я пошёл в музей Фрама. Фрам — это шхуна, на которой Руаль Амундсен с командой покорял Южный полюс в начале 20 века. Вот музей. Сразу ясно, что внутри большая лодка:

О, и точно лодка! Свет внутри совершенно дикий, такое ощущение, что специально сделали, чтобы сдать фотки было невозможно. По второму этажу проходит балкончик:

Там такое контрольное бревно:

Я смог перешагнуть, поэтому вступил на палубу. С палубы можно залезть внутрь, но там тесно и не особо что есть:

Вообще, лодка не такая уж и большая.

Ну, короче. Это оказался не Фрам, а —

Йоа! Это другая лодка Амундсена, на которой он ещё до Южного полюса покорял Северо-западный проход (путь севернее Канады).

Конечно, заходя в музей Фрама, ожидаешь увидеть Фрам. Но он в соседнем треугольном здании, к которому надо перейти под землёй. Там то же самое, вход на палубу с балкончика, но только всё намного больше:

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

Вас когда-нибудь укачивало на корабле, который не движется?

Здесь уже намного интереснее спуститься внутрь. Кают-компания:

Коридорчик к каютам:

Ящики с пледами и книжками:

В каютах прям уют-уют (если не думать о контексте антарктической экспедиции):

Каюта Амундсена. Горизонт не завален:

Неужели они реально не поленились их там подписать? Все же и так знали, где чья каюта!

Кухня. Всякие банки. Красно-синяя — крутая:

Пиво стоит:

Сундук какой-то:

Санузел:

Можно было спуститься ещё ниже в трюм. Там тоже свет как на пситрансовой вечеринке:

Есть крутейший электрошкаф:

Фотографии из поездки в сентябре 2019 года. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Осло! (Когда дадут)

Полистал для вас
новую 👍 книгу Эдварда Тафти
«Свежий взгляд» —
пока только первую главу,
если я правильно понял,
где именно кончается глава:

А вам как?