Hugh Laurie — Let Them Talk

Подновив недавно запись о втором альбоме (Didn’t It Rain) неподражаемого Хью, я вспомнил, что где-то завалялась у меня и первая «документалка». Не такая масштабная, но тоже весьма и весьма интересная. Чудесный творческий процесс.

К сожалению (или, для кого-то, к счастью), р. субтитры не отключаются. Это видео (с фанатским и качественным переводом) тоже было на ютубе, но теперь его там нет. А оригинал, я даже не знаю, где.

И — да, очень хочется услышать и третий альбом. Точнее.. узнать, что есть на него планы, хотя бы.

Кстати. Две серии «Шанса» уже вышли, я еще не смотрел. Ну, значит, Хью пока не до музыки.

Задача, не имеющая кошерного решения

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

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

Превосходный пример. Я решил вернуть в интернет архив зимнего блога окольным путем. Я не хочу ставить движок на имеющийся хостинг. Однако я не могу сделать поддомен для skisport.pp.ua (что было бы логично), поскольку домен привязан к хостингу без возможности любого шевеления налево. Бюджетное решение, ибо.

Посему архив ляжет на альтернативный домен skiing.pp.ua. Это преамбула.

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

Никакого растра, только сss и svg в отдельных местах. Кроме очень удачного фончика, такое сложно сделать без «точечных рисунков».

Я прекрасно помнил, почему я делал оформление через рисунки, хотя не было никаких сложностей для чистого css.

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

Таблицы много позволяют, в том числе сохранять высоту всех колонок на одном уровне и задавать этим колонкам обводки. Дивами такого достигнуть без изврата просто невозможно. Кроме шуток. Посему, в 2011-м, желая сохранить белую окантовку, при легком увеселении дизайна, я пошел на png. В принципе тогда это не было проблемой. Мониторы с высокой плотностью пикселей были не просто редки, их практически не было. Господствовали 1024 по ширине. Но все изменилось.

Заканчиваю. Теперь по существу.

Сделать две равноценные колонки не проблема. Берется контейнер, контейнеру задается бордер, скажем, пикселей 200 — сколько нужно для сайдбара. Сайдбар, позиционируется с отступом — left:-200px, чтобы сдвинуть его точно на полностью окрашенный бордер. Фон сайдбара прозрачный. Остальное пространство справа отдается контенту. Супер, все зашибись! А вот попробуйте сделать внутреннюю окантовку!

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

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

background: -moz-linear-gradient(0deg, rgba(255,255,255,1) 201px, rgba(0,0,0,1) 202px, rgba(0,0,0,1) 100%);

В Мозиллах отлично работает. В Хромах (-webkit-linear-gradient) ни в какую, там необходимо как минимум два-три пикселя на один градиентный стоп. Не подходит.

Пришлось использовать костыль. В виде дополнительного дива, абсолютно позиционированного, с шириной 1 пиксель, с бокс-сайзингом бордер-бокс, дабы 1 пиксель был 1 пикселем, и бордером в 1 пиксель нужного цвета, высота ставилась 100% от контейнера. Работает, чсх.

.pixel {position: absolute; height: 100%; left:0; top:0; width:1px; box-sizing: border-box; border-right: 1px solid white; z-index: 999999; }
.container {border-left: 200px solid #379eca; position: relative;}
.sidebar {float: left; width: 200px; position: relative; background: none; left: -200px; box-sizing: border-box; color: white;}

P.S. Если что, оно еще и эластичное… И, видимо, станет адаптивным поперед батька.

Короче говоря, я не стану исправлять эту тутошнюю шкуру блога (avo.org.ua), а сделаю ее заново. Это гораздо проще и приятнее, чем разгребать наслоения окаменелостей, причем изначально чужих. По сути-то основа блоговой темы — древняя чужая под названием «Либрио», которую я выбрал за приятный минимализм, но, со временем, нещадно зашлифовал. Но шлифовка это не ремонт.

P.P.S. Архив з.б. вернулся в сеть.

Нейтрализация форматирования от WordPress

Как всем известно, WordPress — движок очень своевольный и действует часто против своего «администратора». Кто кем управляет большой вопрос… Ну так вот. Одной из самых противных фич wp является оборачивание всего без разбора в тег <р> — в параграф. Я уж не говорю, что форматирование форматируется даже в текстовом режиме редактора «html» как захочется движку, а не автору. Часто бывало — пыжишься десятки минут, лепишь шедевр, сохраняешь, а wp вынимает из верстки статьи кондовое бревно и весь сруб рассыпается.

За годы пользования я с таким поведением движка смирился и особо не изгаляюсь, хочешь строй, а хочешь куй, все равно получишь орден. Да-с. Ну а вчера, подменяя удаленное ютубом видео с Хью Лори (интереснейший фильм о его втором альбоме и путешествии по поводу), узрел, как много костылей я наставил в стилях css, дабы хулиганство вордпресса забороть. И эти костыли, естественно, вылезли мне боком (например, посносило вправо все внешние встраивания, стоило только тронуть..)

2 тезиса:
1) нужна тотальная ревизия и переделка темы (читай — стилей). В прошлый раз ничего толком не…
2) диктатуру вордпресса нужно хотя бы немного пресекать (вот поэтому еще я наслаждаюсь самописным бложеком. Если налажал — некого винить)).

Итак, способ по второму пункту естественно пролегает через functions.php. Я понятия не имею, кто же изначальный его автор, блойеры друг у друга копипастят (ну вот и я приобщился), посему без ссылки и как есть.

function my_formatter($content) {
$new_content = '';
$pattern_full = '{(\[raw\].*?\[/raw\])}is';
$pattern_contents = '{\[raw\](.*?)\[/raw\]}is';
$pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE);
 
foreach ($pieces as $piece) {
if (preg_match($pattern_contents, $piece, $matches)) {
$new_content .= $matches[1];
} else {
$new_content .= wptexturize(wpautop($piece));
}
}
 
return $new_content;
}
 
remove_filter('the_content', 'wpautop');
remove_filter('the_content', 'wptexturize');
 
add_filter('the_content', 'my_formatter', 99);

Вот эту красоту нужно вставить, аккуратно. Иногда, в зависимости от темы, необходимо применить теги php, то есть, зажать этот код в:

<?php  ...  ?>

После этого в редакторе вордпресса достаточно написать [raw] [/raw] и творить внутри этих тегов, что взбредет. WordPress реагировать не будет. Он будто бы уснет.

p.s. Полностью, жестко отключать это форматирование смысла не имеет, во-первых, все записи, созданные до этого момента кардинально изменят свой вид, есть мнение, что в худшую сторону, ибо никакого форматирования не будет вообще. Воржпресс же так действует, как некоторые индивилдлы используют акселератор в машине — вкл/выкл. Во-вторых, при текстовой работе, удобно, когда абзацы автоматически формируются. Разрабам бы более адаптивную систему сделать: параграф это параграф, картинка это картинка, айфрейм это айфрейм, итд итп. Просто, изначально, все рассчитано на неофитов, которые двух слов связать не могут, но ставят бложек и тыкают в батоны. Чтоб было кавайненько и единообразно, им оборачивают все приблуды в параграфы, внедряют неотключаемые смайлы emoji и не дают ни во что вляпаться —

За те 8 практически лет, что я им пользуюсь, вордпресс утратил множество тонких настроек, при этом стал потреблять огромное количество ресурсов, обзаведясь фичами, порой совершенно излишними, которые можно было бы подключать по выбору, модульно или плагинами на худой конец. (Очень походит на Firefox, это такая модель для успешных опенсорсных проектов? Я тебя породил, я тебя и раскормлю)).

Поэтому приходится хакать все, что можно хакать, functions.php растет как на дрожжах.

Шанс

Он не получка, не аванс, хитрый шанс… Черная метка, черная метка… С этим словом у меня стойкие ассоциации родом из 80-х. Но тут современность. Блестящий британский [и общемировой] актер Хью Лори растоптал свой зарок и таки снова взял за жабры американское телевидение. Или оно его… Тут не поймешь. Вдали от туманного хладного Лондона в туманном хладном Фриско… Бу-у-ааа-а..

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

Темное дело Йохауг

Картина салом. Не удержался, на злобу дня.

Вариант(ы) пожучше.

Единицы измерения — px, em, % и прочая

Очень важный вопрос, напрямую касающийся темы предыдущей заметки.

Как задавать размеры шрифтов и прочих элементов в веб-строительстве?

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

1) Это «оффлайновые» единицы, которые используются в повседневной жизни или в типографских работах. Ведь да, верстка для веба — это прямая наследница типографского набора. Ничего особо нового придумывать было не нужно. Поэтому, не так и давно применялись миллиметры (mm), сантиметры (cm), пункты (pt) и пики (pc). Отголоском последних является стандартный размер стандартного шрифта во многих браузерах: 16 пикселей = 1 типографской пике. Применять эти единицы не имеет смысла, они никоим образом не завязаны на то, что выдаст монитор.

2) Старый добрый пиксель (px), основа основ, мельчайшая частица, на которой строится все веб-мироздание. Все так или иначе пересчитывается в пиксели. Прямо или косвенно.

Главная проблема в том, что сколько экранов, столько и пикселей. Физически размер пикселя на том или ином устройстве может разниться. И одинаковой картины отображения на всех девайсах мы получить не сможем. Поэтому пиксели потихоньку отходят на задний план, уступая место относительным единицам. [Я задумался над этой фразой и сентенция показалась мне алогичной. Что-то надо с этим делать… Если браузер выдает, скажем, 96 пикселей на дюйм всегда, то, угол, под которым текст останется читаемым, будет одинаков, разниться станет только расстояние, пропорциональное размеру пикселя у девайса… Ой… Тут еще непаханное поле для размышлений… Так что ставлю пометку -=-.]

3) em — единица сколь удобная, столь и коварная. Это относительная единица, которая «высчитывает себя», согласуясь с этим параметром у «родителя», т.е. оболочки, в которую элемент вложен. И очень многие начинающие разработчики, привыкшие, что, скажем, 16 пикселей, это, хоть бы и в сотом иерархически вложенном блоке, всегда 16 пикселей, сталкиваются со страшной картиной, когда один и тот же заданный размер шрифта на деле оказывается совершенно разным. Вот наглядный пример. Четыре вложенных дива, в каждом из которых размер шрифта задан как 0.9em. Каждый верхний является родителем нижнему.

Тот же самый пример с увеличением, размер шрифта задан как 1.1em:

Вот такая картина маслом. По стандарту, принятому во всех популярных браузерах, размер шрифта равняется 16 пикселям. Это и есть в стандартных случаях 1em. Однако, как правило, разработчик сайта делает ресет и сам задает подходящий параметр на body. Скажем, это выглядит как: font-size: 10px; font-size: 1em; В этом случае, один em Ивана Ивановича будет не совпадать с одним emом Ивана Никифоровича, который, допустим, не стал менять стандарт.

Тем не менее, em — это удобно для интуитивного масштабирования. Если четко знать, что во что вложено. Как правило считают от body, но могут быть варианты. Подход получается гибче, чем придумывать нужный размер шрифта в пикселях для каждого элемента конструкции.

4) То же самое делает «обычная» процентная запись — %. Но она чаще применяется не столько для шрифтов, сколько для отступов и расстояний. Подсчет может быть как от высоты/ширины родителя, так и от окна браузера. То есть вот тонкое различие, em считается от шрифта, процент считается не только от шрифта. Но суть та же — относительность. И единицы em и % взаимозаменяемы в большинстве случаев. Но я лично считаю, что em для шрифтовых работ, процент — для размеров и позиций.

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

rem — относительная единица, которая строго берется от самого высшего родителя и не меняется(rem — root em). Обычно родитель это html. Все остальное в него вложенное — наследники, для которых rem един. Знакомый пример, где вместо .9em я задал .9rem:

Нагляднее некуда. Мы получили «относительный пиксель». Распространяемый линейно без изменений на всю иерархическую структуру.

Самое главное применение, это легкость глобального масштабирования текста. У нас есть один и только один параметр, который мы можем менять сколько взбредет: html {font-size: 10px;}. Все остальные .9rem, 5.5rem, 100rem будут отталкиваться, отсчитываться от него. И ситуации, когда нужно в поте лица менять десятки и даже сотни размеров, заданных разным элементам верстки в абсолютных пикселях, нас колыхать не будут.

Красиво?

5) Единицы внешней относительности. vw = 1% от ширины экрана, vh = 1% от высоты экрана устройства. Применяется для удобства масштабирования прежде всего в мобильных девайсах. В каких-то случаях это многое упрощает.

Н-да.. Так что же использовать на практике? Вообще-то все это можно сочетать. В особенности ремы и емы.

На закуску хитрость, старая добрая:
Чтобы не парить себе мозг, высчитывая, что такое 3.2rem(em) от 16 стандартных пикселей, многие применяют вот такую запись: body {font-size:62.5%}

Нетрудно подсчитать, что теперь 1 rem или em будет соответствовать 10 привычным пикселям. И 3.2em = 32px.

Почему не задать жестко 10px? Вопрос скорее этический, чем практический. Свобода пользователя. Оный может установить свой стандартный шрифт в браузере в любое значение, и наш выверенный дизайн исказится. Но это будет его выбор. Об осознанности этого выбора можно спорить. Так что — это все относительно.

Семистрочный БАО

Чтобы без дураков, честно вместить мой бло в мобильники, как ни удивительно, понадобилось семь строчек в CSS@media.

Я люблю лаконичность. Когда поисковая форма наехала на гордый и независимый заголовок, я придумал самый ленивый способ это исправить. Обернуть строчные буквы в <span> и задать ему класс. А в @media сделать этот класс {display:none;}.

БАО. Председатель БАО. Баобаб, баоцзы, Большое Алматинское озеро. Что там еще-то?

На самом деле, возни по адаптогенизации темы хорошая куча. Однако, ликуй просвещенный люд, три из четырех моих блогов имеют актуальные виды. Готова новая адаптивная «шкура» зимнего (скоро переметну), наотмашь уделан сумошный блог и вот главный на очереди. Необходимость. Что сделаешь.

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

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