August 14th, 2021

Роскомнадзор и DeviantArt.com, 2021 год

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

10 августа о блокировке Роскомнадзором сайта DeviantArt.com сообщил Гоблин (с отметки 7:18):
https://www.youtube.com/watch?v=7zVCUeqjNQ4&t=438s

13 августа об этом же сообщил Артемий Лебедев (с отметки 44:43):
https://www.youtube.com/watch?v=GcjxL26ACk4&t=2683s

В обоих случаях я проверял этот сайт у себя в браузере и он работал.

Как оказалось, сайт был заблокирован с 3 августа, а разблокирован 11 августа в связи с выполнением требований Роскомнадзора:
https://rkn.gov.ru/news/rsoc/news73800.htm

Видеоролик Гоблина я смотрел 11 августа и, очевидно, в тот момент, когда сайт уже разблокировали.

Как видно, сайт DeviantArt.com я посещаю не так часто. Даже не заметил его 8-дневной блокировки. Честно говоря, на этом сайте и сейчас можно найти всё, что угодно, в том числе запрещенное.

Кинофильм «13», США, 2009

Посмотрел американский фильм «13» 2009 года:

https://www.kinopoisk.ru/film/255394/
https://ru.wikipedia.org/wiki/Тринадцать_(фильм,_2010)


(актер Сэм Райли (справа) играет главного героя этой кинокартины)

Фильм отличный, я его оцениваю в 8 из 10.

Кстати, название фильма, возможно, следует читать не «тринадцать», а «тринадцатый» (не путать с фильмом «12» Никиты Михалкова от 2007 года про присяжных).

Однако, на «Кинопоиске» оценка у этого фильма 6,8, а на IMDB и того хуже — 6,1. Также на «Кинопоиске» довольно много (относительно много) отрицательных и нейтральных отзывов. Причин этому, как мне кажется, две.

Во-первых, из постеров и трейлеров к этому фильму можно предположить, что главные роли в фильме отведены Джейсону Стейтему, Микки Рурку или кому-то еще, но не малоизвестному (по крайней мере, для меня) Сэму Райли, который на самом деле и снялся тут в главной роли. Я сам, кстати, тоже начал смотреть этот фильм из-за упоминания Джейсона Стейтема, который, конечно, «крутой парень» (из-за чего я и смотрю все его фильмы), но нифига совсем не хороший актер. Таким образом, часть негатива, полагаю, фильм получил из-за этого трюка маркетологов, предпринятого, очевидно, с целью обмана зрителей для получения большей прибыли. Люди ждали обычного боевичка со Стейтемом, а получили нечто совершенно другое.

Пример лживого постера этого фильма со страницы википедии:



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

Итак, фильм является ремейком французского фильма 2005 года. Французский оригинал является дебютом Гелы Баблуани (родился в Грузии, переехал во Францию в возрасте 17 лет). Гела Баблуани был продюсером, сценаристом и режиссером оригинала, фильм был отмечен двумя премиями на Венецианском кинофестивале 2005 года. Как я понимаю, после этого его заметили в Голливуде и он стал режиссером и сценаристом рассматриваемого тут американского ремейка 2009 года с другими актерами.

Режиссеру отлично удалось встроить во второстепенные роли Джейсона Стейтема, Микки Рурка и рэпера Фифти Сента. Вообще, фильм просто набит классными актерами, среди которых можно отметить Рэя Уинстона (номер шесть), Майкла Шеннона (ведущий рулетки), Дэвида Зайаса (следователь), Эммануэль Шрики (она мне запомнилась по сериалу «Менталист») и других. Микки Рурк вообще выступил отлично, я от него не ожидал.

Фильм мне напомнил аниме-сериал «Кайдзи» (2007-2011). Там очень близко по идее, но в аниме-сериале идея развернута гораздо шире, сериал всё-таки.

Еще вспомнился роман Хораса Маккоя «Загнанных лошадей пристреливают, не правда ли?» 1935 года (его экранизацию 1969 года я не смотрел). А также — фантастический роман Фредерика Пола «Врата» 1977 года, в своё время получивший премии «Хьюго» и «Небьюла», а сейчас забытый (не путать с сериалом «Звездные врата: ЗВ-1» 1997-2007 годов).

Немного про сюжет. В семье молодого парня Винса Ферро, работающего электриком, случилась беда: отец оказался в больнице со сложными переломами. Содержание и лечение мужчины стоит больших денег и семья принимает решение продать дом. Работая в доме одного своего заказчика, Винс крадет загадочный конверт с инструкциями, которые, по словам заказчика, могут принести большие деньги. Инструкции из конверта приводят Винса в мир подпольных игр, ставкой в которых является жизнь игроков. Да, в случае огромной удачи можно получить много денег, но эти деньги еще нужно сохранить. Кроме того, на след подпольных игр вышла полиция.

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

CSS: схлопывание внешних отступов

Это явление по-английски называется «margin collapsing». Вот ссылка на статью (перевод на русский язык), в которой рассказывается о том, что это такое, а также о причинах этого явления:

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

По-английски (в оригинале) эта статья называется «Mastering margin collapsing», что на русский язык можно перевести как «Понимание причин схлопывания внешних отступов».

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

В данном посте я не собираюсь рассматривать все случаи, в которых может произойти данное явление. Я рассмотрю один конкретный случай и несколько способов избавиться от схлопывания внешних отступов в рассматриваемом случае. Я пользуюсь браузером «Microsoft Edge» на движке «Chromium».

* * *

Итак, сначала разберемся, что подразумевается под «схлопыванием внешних отступов». Возьмем конкретный случай, тело тестовой HTML-страницы представляет следующий код:
<body>
  <div></div>
</body>

Установим для HTML-элемента div фон и высоту в его стиле в заголовочной части этой HTML-страницы, чтобы сделать этот HTML-элемент видимым (без содержимого этот HTML-элемент имеет высоту 0 пикселей и поэтому в браузере его не видно):
<style>
div {
  background: red;
  height: 15px;
}
</style>

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



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

Как видно на картинке, расстояние между HTML-элементом div и границами области просмотра браузера составило 8 пикселей.

Откуда они взялись, если ни у HTML-элемента div, ни у родительского HTML-элемента body в стилях не описаны какие-либо отступы? Я об этом уже писал, для HTML-элемента body в моем браузере определен по умолчанию внешний отступ margin размером в 8 пикселей.

Хорошо, определим для HTML-элемента div свой внешний отступ размером в 5 пикселей. Внесем изменение в стили:
<style>
div {
  background: red;
  height: 15px;
  margin: 5px;     /* свой отступ */
}
</style>

Вот что получилось у меня в браузере (увеличение в 8 раз остается):



Как видно на картинке, теперь расстояние от левой границы области просмотра браузера до HTML-элемента div составляет 13 пикселей, а от верхней границы области просмотра браузера до HTML-элемента div составляет те же 8 пикселей, что и для предыдущего случая.

Что произошло? Почему эти расстояния разные? В случае расстояния слева всё понятно: произошло сложение внешних отступов родительского HTML-элемента body (8 пикселей) и вложенного в него HTML-элемента div (5 пикселей), в результате чего получилось 13 пикселей.

В случае же расстояния сверху произошло то самое (заявленное в начале поста) явление схлопывания внешних отступов. В данном случае произошло схлопывание внешних отступов родительского HTML-элемента body и вложенного в него HTML-элемента div (это лишь одна из ситуаций, в которых может возникать схлопывание внешних отступов).

В случае схлопывания внешних оступов разных HTML-элементов остается размер лишь одного из схлопывающихся внешних отступов. При этом из этих внешних отступов берется больший по размеру. В данном случае больший по размеру внешний отступ оказался у HTML-элемента body, поэтому именно он и остался — 8 пикселей. И тут не имеет значения, какой из этих HTML-элементов родительский, а какой — вложенный.

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

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

* * *

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

https://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing

В первую очередь там советуют попробовать добавить родительскому HTML-элементу (для нашего случая) в стиль границу border в 1 пиксель, либо внутренний отступ padding в 1 пиксель. Это, конечно, работает (я проверил), но создает проблему, если граница или внутренний отступ нам строго не нужны.

Во-вторых, там предлагают попробовать добавить родительскому HTML-элементу (для нашего случая) в стиль определение свойства overflow со значением, отличным от visible (последнее является значением по умолчанию для этого свойства). Например, можно добавить в стиль указание overflow: auto; или overflow: hidden;.

Для нашего случая это неожиданно не сработало. Почему? Ответ можно найти по следующей ссылке:

https://stackoverflow.com/questions/41506456/why-body-overflow-not-working

Именно в случае, если родительский HTML-элемент является HTML-элементом body и мы хотим избавиться от схлопывания внешних отступов по вертикали в рассматриваемом случае, то для HTML-элемента html тоже следует определить свойство overflow со значением, отличным от visible, например, так:
<style>
html, body {
  overflow: auto;
}

div {
  background: red;
  height: 15px;
  margin: 5px;
}
</style>

Ну а лично мне для избавления от схлопывания внешних отступов по вертикали в рассматриваемом случае больше всего понравился следующий вариант:
<style>
body {
  padding: 0.05px;
}

div {
  background: red;
  height: 15px;
  margin: 5px;
}
</style>

Вроде бы, тут мы тоже добавляем в родительский HTML-элемент внутренний отступ. Но только теперь размер этого внутреннего отступа не 1 пиксель, как было предложено ранее, а 0,05 пикселя.

Что это нам дает? То, что мы определили внутренний отступ у родительского HTML-элемента, убирает схлопывание внешних отступов по вертикали родительского и вложенного HTML-элементов. Но когда браузер начинает рассчитывать окончательные размеры и отступы HTML-элементов для их отображения, он округляет полученные значения до целого, так как область просмотра браузера всё равно имеет размеры в целых пикселях и отобразить в ней что-либо можно только в целых пикселях (хотя для промежуточных расчетов браузер может использовать дробные значения в пикселях). Из-за того, что значение отступа слишком мало (0,05 пикселя), оно просто теряется при округлениях и никакого отступа в браузере в итоге не отображается. А нам это и нужно.

Источник:
https://stackoverflow.com/a/33132624

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

Дополнение от 16 августа: решение с padding: 0.05px; мне разонравилось, как только я начал применять его на практике. Хоть оно и работает, но при тестировании решений задач, когда я вывожу размеры разных HTML-элементов в лог с помощью функции console.log, выводятся дробные значения, что мешает отладке (сложнее понять, что происходит в скрипте).