Эпоха Пара

Я паро-панк
и я люблю паро-панк

ПубликацииПубликации ПрограммыПрограммы ИгрыИгры ТоварыТовары рГоблинрГоблин

Изчезающие картинки

из цикла статей «Реквием по Ридеро»
раздел «Програмер хочет кушать»

Окаянный Безос уже космические корабли запускает за свой счёт, не знает куда деньги девать, вот сколько этих самых денег приносит ему его Amazon. Но лично меня интересует, как выглядит там страница моей книги "Сказки на ночь 18+" (ныне снята с публикации - и в этом вина издательства Ридеро, но про то ещё будет позже). А она выглядит вот так:

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

А ГДЕ ОБЛОЖКА?

ПРИМЕЧАНИЕ: вот так уныло будет выглядеть не на всяком устройстве - но некоторые компьютеры, браузеры а порой и антивирусы сайт интернет-магазина Ридеро ну очень не любит. Что интересно: у рабочего сайта Ридеро, где писатели создают свои творения, вот таких проблем с компьютерами или браузерами не замечено до сих пор! Почему один сайт Ридеро - отстой, а другой конфетка? Их что, разные программисты делали?

(крамольная мысль №1: может потому у Безоса столько денег - что Amazon работает исправно?)
(крамольная мысль №2: а Ридеро вынуждено экономить копейки - потому что обложки книг с их сайта пропадают?)

Но так было не всегда!

Кто я чтоб судить их

Я не буду вдаваться, что мой стаж РАБОТЫ программистом больше, чем у доброй половины читающих эти строки вся их жизнь. Только в web-программировании я четверть века уже. Ах, к чему слова, когда можно увидеть глазами, верно? Уж коль разговор пойдёт про картинки на сайтах, то взгляните на вот это:

Живые слайды

http://SteamAge.ru/go/talesForNight/show.html

И там выбираете любую анимацию и наслаждаетесь. Простенько, не спорю - зато сделано только средствами встроенными в любой браузер. Вывести картинку в заданном месте, сместить, скрыть или показать её и так далее.

А ещё на моём сайте SteamAge.ru есть раздел игр. Технически любая игра состоит из картинок, которые нужно показать в заданном месте, подвинуть, иногда скрыть, а бывает потом показать заново. Всё это в играх на моём сайте делается исключительно через браузер и его стандартные возможности, которые есть во всех браузерах начиная с Microsoft Internet Explorer 6.0 и Netscape Navigator 6.0 - короче в любом браузере этого века в игры с моего сайта играть можно без проблем.

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

И если, мой читатель, ты читаешь эту статью на моём сайте SteamAge.ru - то замечал поди как на каждой его странице катается вверх-вниз смешная паровая машина вдоль правого края экрана? А ведь это тоже анимация, и в ней задействована не одна картинка, а несколько - но все они работают исправно на любых браузерах и даже очень старых компьютерах - и быстро работают!

Так что наверное я что-то смыслю в картинках на web-страницах.

И скажу сразу: вывод обложки книги на её web-странице это задачка наипростейшая даже для новичка в web-программировании. Не верите? Так я Вас сейчас научу за 1 минуту!

Как показать картинку

Сейчас будет немного технических объяснений - но совсем несложных. Потому как и дело-то простейшее - показать картинку. Вот, к примеру, вон те скриншоты выше - мой читатель, ты же видишь их? А как заставить браузер показать их? Да очень просто - вот такой командой:


<img src="имяКартинки.jpg">


Так же расширение может быть .gif или .png да хоть .bmp - любой браузер, начиная с самого первого древнейшего Mosaic - браузера из прошлого века от которого ведут свою родословную все прочие браузеры - так вот даже он картинку покажет. Ну что может быть проще?

А главное: как тут можно напортачить?

Как на сайте Ридеро

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

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


<picture><source srcset="https://store.ridero.ru/images/w200?bucket=store-raw-data.ridero.store&amp;key=ridero/sku/2022-06/629e382cc3ce25776e2d0eb4/rev.2022-07-25T20:53:40.551Z/cover-front.png&amp;format=original" media="(max-width: 960px)"><img src="https://store.ridero.ru/images/w350?bucket=store-raw-data.ridero.store&amp;key=ridero/sku/2022-06/629e382cc3ce25776e2d0eb4/rev.2022-07-25T20:53:40.551Z/cover-front.png&amp;format=original" alt="Сказки на&nbsp;ночь&nbsp;18+"></picture>

Да здесь сам чёрт ногу, то есть, извините, мозг сломит, как это вообще понимает браузер?

Полчаса Вашего драгоценного терпения, и я распутаю для Вас этот ребус, хотя...

ВЫ УЖЕ ВИДЕЛИ ЧТО КАРТИНКУ МОЖНО ВЫВЕСТИ КУДА ПРОЩЕ, ЧЕМ ЭТО ДЕЛАЮТ НА САЙТЕ РИДЕРО - НО ЗАЧЕМ ЖЕ ОНИ ДЕЛАЮТ ТАК СЛОЖНО ?

Единственное что нужно

это имя картинки, которую следует загрузить - и если внимательно приглядеться к коду Ридеро, то мы это имя видим - оно:


cover-front.png


А вот этот набор цифр и букв:


629e382cc3ce25776e2d0eb4


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

Я-то закон чту (в отличие от Ридеро, которое считает себя вправе разглашать неопределённому кругу лиц персональные данные своих авторов вплоть до адреса проживания - о чём читай статью "Вторая последняя капля" прямая ссылка http://SteamAge.ru/pub/ridero/92.html).

Потому следующее будем рассматривать исключительно как пример - а именно как нужно было бы вывести картинку обложки? Да примерно вот так:


<img src="629e382cc3ce25776e2d0eb4/cover-front.png">


И всё будет работать, картинка обложки будет показана на любом браузере и любом компьютере, даже из прошлого века!

Почему ж они не сделали так?

Что это за тэги

Тэги picture и source - они добавлены в расчёте на будущие версии неведомых новых браузеров, которые ещё только будут в будущем. О да, именно так - программисты Ридеро устремлены в прекрасное далёко...

Но сейчас эти тэги - просто не нужны вообще!

Потому что все браузеры, что новейшие, что самые древнейшие - понимают стандартный тег img - и вот он будет работать везде. Кстати по этой самой причине программисты Ридеро были вынуждены оставить этот самый img

Итак:

Вообще это выдаёт что программисты Ридеро -студенты-недоучки-, виноват, неопытные новички в профессии. Иначе знали бы сколько уже раз вводились новые тэги - и почивали в бозе мёртво-рождёнными. Где некогда повсеместно пропагандируемый embed? Отменён. А про Layer никто и не вспоминает - а тоже ведь преподносился как новейшая технология, на которую уже вот-вот завтра перейдёт весь мир. Да что теги, целый язык браузерных сценариев VBScript похоронили за ненадобностью - ибо не прижился, хотя уж как его продвигала в массы велико-могучая Microsoft всеми правдами и неправдами...

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

Но ведь программисты Ридеро оставили тот самый надёжный тэг img - почему ж у них он не сработал как надо?

Сделано назло

Если почитаем логи - а браузер в режиме отладки может сообщить много чего интересного про ошибки загрузки страниц - так вот на web-страницах Ридеро сбой идёт за сбоем. И всё из-за вот той странной манеры давать команду на вывод картинки - чтоб уж собрать максимально возможное количество сбоев загрузки.

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

Если сам по себе неведомый тэг будет браузером просто пропущен - то глядим в как будто стандартный тэг img - а он у Ридеро содержит в себе длинный адрес. Зачем?

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

Рассмотрим адрес внимательно и видим, что это вовсе не адрес картинки - это адрес скрипта на сервере Ридеро. Как думаете, что загрузится быстрее:

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

Тормоза

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

А кто-то нет.
А кто-то не сможет совсем.

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

ОДИН ВЫЗОВ ВНЕШНЕГО СКРИПТА ЗАМЕДЛЯЕТ ЗАГРУЗКУ МОИХ СТРАНИЦ как минимум ВДВОЕ

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

Коварство скрипта Ридеро

Но самое печальное - это сбои в работе скрипта Ридеро.

Зато я вижу результат его работы:
  — что я не вижу картинку!
Не грузит её окаянный скрипт!

Не всегда не грузит. Может лично Вам повезёт - и Вы на страницу интернет-магазина Ридеро зайдёте без проблем. Но - не факт. Я собрал скриншоты с многих компьютеров и так и не смог надёжно предсказать, на каком возникает устойчивый сбой - и тогда сколько не жди, а картинку обложки не увидишь. И никакие чистки кэша тут не помогают - ошибка устойчивая, и порождает её именно скрипт на сервере Ридеро, указанный как адрес в теге img

Что делать

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

(ответ через 2 главы)

суббота 17 сентября 2022г
Алексей «Рекс»