Дэновские инструменты

В поисках онлайнового минимизатора для css (решил и такой тип оптимизации испробовать), я отыскал целый великолепный набор инструментов под «одной крышей» — с очень простым названием «Dan’s Tools».

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

Минимизация же css (или html, js etc) — это преде всего устранение пробелов, удаление комментариев и опциональное сокращение тех или иных свойств, например некоторые цвета можно записать как #999999 и как #999. А если файл со стилями очень большой, то экономия по байту выльется в килобайты. Этим пренебрегать не стоит.

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

Сорри, если тег details ваш браузер не понимает, просто самописный спойлер немного лениво подключать — и так я уже кучу непредвиденных стилей навесил, вплоть до лайтбоксных галерей…

Я еще сам в процессе познания, но уже видно, какой богатый инструментарий создал этот добрый человек Дэн, дай ему бог здоровья и благополучия. Скажу просто: РЕКОМЕНДУЮ, так как сам уже подсел.

Ракушки с зеленым луком

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

Дело все в зеленом луке. У меня лежал целый огромный пук, ибо… Еще раньше я вспомнил, сколь вкусен пирог с луком, пирог с зеленым луком, разумеется. В общем, была идея на Пасху таковой испечь. Но обстоятельства вмешались и печь ничего не хотелось… А лук был закуплен. Пирог тоже гениально прост: тесто как тесто, дрожжевое пироговое. А начинка вареные яйца, зеленый лук и растопленное сливочное масло, которым начинка поливается (без фанатизма, как и в любом другом деле). Все это собирается на противень и ставится в духовку на положенное время.

…Постепенно я этот лук подбирал, просто с черным хлебом и солью, в салат с картошкой, яйцом и соленым огурцом, а сегодня — отдельно, так скать, от лука — мне захотелось макарон, как-то наитальянился я постепенно предвкушая Джиро и все такое… Но особой заправки у меня не было, ничего мясного, никаких мегасоусов и сыров, и я решил опять…

Удобнее всего острыми ножницами поотрезать от пука самые толстые и белые части лука, хотя не забывать и о зеленых, но не завявших, конечно. Растопить немного сливочного масла на сковороде и почикать меленько лучок туда. Запах от стоял совершенно непередаваемый, репчатый лук пахнет не так, в зеленом, видимо, больше специфичных эфирных масел. Это основное. Отвариваются макаронные изделия, в моем случае — вот такие ракушки, оказался самый идеальный вариант.

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

Гениально, абсолютно гениально.

CSS для wp_link_pages

Продолжаем доколупываться до вордпресса. Есть такая неплохая штука, как пост, состоящий из множества страниц. Для этого достаточно в текстовом редакторе в нужном месте вставить разрыв сколько угодно раз (но без фанатизма, к чему нам тысячи страниц?)

<!--nextpage-->

Случаются ситуации, когда это удобно. Я сам несколько раз на блоге делал такие штуковины, когда материала было много, а упрятывание его =под кат= дела не решало, потому что с главной-то множественность спрятана, а если посетитель загрузит отдельный пост — она возьмет и выпадет целиком вся до последней копейки. Понятно, что нужно разбивать. Можно на несколько постов, а можно в одном посте постранично.

Казалось бы, в чем проблема? А в том, что стандартными средствами рядочек со ссылками не кастомизировался стилями css.

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

В стандартном случае мы имеем ряд ссылок, обернутых в параграф <p>. Самое простое задать ему класс, а потом задать стили ссылкам в пределах этого класса.

.p-link a {blah: 12345px;}

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

На эту тему в интернете множество завываний, как кастомизировать каррентную страницу??? каккаккакакак?!?!?!?!

А официальную документацию никто не читает… … … А там есть конкретная рекомендация, с которой можно уже работать и сделать все, как хочется:

<?php wp_link_pages( array(
	'before'      => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentyfourteen' ) . '</span>',
	'after'       => '</div>',
	'link_before' => '<span>',
	'link_after'  => '</span>',
	) );
?>

Текст — и простой, и в пределах ссылки — теперь оборачивается в span. Последнему можно задать класс. И делать различия для «текста» и «ссылок» в пределах одинаковой основы. Вот и все, проще не бывает.

.page-links span.page-links-span {background: #111; ...}

.page-links a span.page-links-span {background: #999; ...}

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

Маринованные шампиньоны по-аволабски

Тема такая, очень давно, когда на 100 гривен можно было закупиться жратвой на неделю, а то и две, я разок купил маринованные шампиньоны за 20 грн. Это были серьезные деньги (естественно, относительно, там, проезда в транспорте за 30 коп., а не чего-то такого элитарного..). Так вот, грибы были замечательнейшие. Ни до, ни после я таких не едал (речь идет о мар. шампиньонах, потому что самосборные лесные грибы, которые в моем далеком детстве заготавливал (солил и мариновал) дедушка, это было нечто из другой вселенной…).

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

Главное, чем отличается самодеятельный гриб от промышленного — это количество уксуса. Уксус в баночных грибах служит консервантом, чтобы эти грибы сто лет стояли на полках супермаркетов как живые. В домашних условиях, как правило, партия съедается за несколько дней, в экстремальных случаях — за одно застолье. Так что в этом случае уксус служит приправой, дающей энные необходимые ощущения.

Шампиньоны — самые доступные грибы, килограмм приличных все еще, даже перед Пасхой, стоит в районе 35 гривен. Темненькие, что называется некондиционные, можно и по 20 взять. Для сравнения той и этой 20-ки гривен, тогда это 10 долларов было… а сегодня и одного не наберется. Ну, не будем о грустном.

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

Шампиньоны хорошо промыть, но не сдирать шкуру, это важно! На 1 кг шампиньонов берется 1 литр воды. 2 стол. ложки кошерной соли и 2 стол. ложки сахару. Накидываются приправы, заливается 50 гр. подсолнечного масла. Наверняка можно любое, оливковое, там… … И вся эта компания ставится на медленный огонь и тихонько подваривается минут 8—10. И только потом туда вливаются 4 стол. ложки уксуса, обычного уксуса, не эссенции, упаси б-г. И вкидывается пять нарезанных зубчиков чеснока. Можно лучок, можно и обойтись, можно вообще шкурки лимона для спецаромата… ну, такое. И, после этого, вся смесь должна побулькать минуту-другую. Не более того. ВСЁ.

Как остынет, поставить в холодильник на сутки.

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

P.S. Через положенные сутки. Грибочки получились — аааа! Но, с килограмма вышло не так много, грибы уварились, отдали воду и… вместе со щедрым кол-вом маринада свободно влезли в две поллитровые баночки. Так что, полторы порции… Если что, нужно рассчитывать.

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

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

P.P.S. А рассол (маринадъ) потрясающе вкусен для макания в него пельменей.

Png vs. Jpg vs. Jp2000

Задумал сделать тут небольшой отчет о том, как блогореконструкция продвигается. Сделал скриншоттт главной странички блога и узрел, что он неоправдано велик для не несущей чего-то особенного иллюстрации. 412 кбайт в png — формате, сжимающем без потерь, и сжимающем весьма здорово, я специально проверил, тот же самый скрин в популярнейшем на закате 90-х формате bmp весил бы аж 2,6 Мб! так что…

Первое желание было — пожать в тривиальный jpg. Но тут я вспомнил одну очень давнюю переписку, в которой мой корреспондент обращал внимание на формат jp2 или jpg2000. Гуглите в википедии, что это такое.
Чем мне понравился диалог преобразования: можно задать желаемый размер файла, это, как в mp3 перегонять, желаешь уместить в 9 килобайт 9-ю симфонию Бетховена — уместишь. Как оно будет звучать — дело второе. Ну и вот, я подумал, что 225 кб для скрина — это терпимо. И переконвертировал в png в jp2. На удивление получилась сносная картина. И я тут же захотел проверить, а что было бы с таким же размером тривиального jpg. И снова преобразовал исходный png в jpg. Размер на тройку килобайт получился больше, но это не суть.

Большая картинка (клик на превью) получившегося эксперимента (PNG, естественно) весит почти 600 кб. На ней три одинаковых фрагмента 1) исходный png, 2) jpg и 3) jp2000.

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

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

По клику png ~500 кб (сложно кодировать такое). А эта видимая заглушка интересная, весит 13 кб, качество jpg выставлено в 0 из 100.

Итак, слева jp2000 и справа jpg одинакового размера в районе 98 кб. (первичный скриншот изначально 1264х713px, а это кропы по 377х500). Что хочу сказать, снова на jp2000 текст смотрится лучше…

НО! Если вам нужно закодировать простой текст без растровой графики — лучше формата png не найдешь. Размер получается небольшим, а качество высоким. Если вы хотите дать некоторое представление о растровой графике, типа фона и общего оформления, как в примере, но сохранить приятно читаемым текст — jp2000 подходит идеально. Фон же сильнее размывает…

Можно ли его вставить в веб-страничку?

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

А теперь ожидаемый вывод: png против только jpg. Если картинка единичная и не очень сложная, лучше использовать png. Если картинок много, лучше пожать в jpg и(или) дать ссылку на оригинал, чтобы это было выбором посетителя сайта: загружать большие файлы или нет. Но постепенно скоростной и безлимитный интернет расширяет свою планетарную поступь. Посему, неотдаленное будущее растровой веб-графики за png. А так, конечно, вектор и еще раз вектор. Но, пока, те же самые фотографии грузить в png — откровенный моветон. Так что, конкретный выбор нужно делать под конкретные задачи…

Длинный эксперимент в реальном времени написания записки завершен. Уф…… Пф, бха… Это ж надо было…

Часы для любой точки земного шара

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

Саму идею воплотил с помощью чудесных готовых библиотек moment.js и moment-timezone.js. Оформление простое, но можно навертеть и помощнее. Дело не в этом, я доволен, что получил возможность сделать (как я хочу) наглядные часы и вставить в любую точку любого сайта. Хорошо.

Как видим, отображается местное время (в скобках разница с GMT), дата текущая и день недели. Cпектр отображений довольно широк и разнообразен, на все вкусы.

Возрождение слайдера

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

Симпатичненько. Только неадаптивненько, но реально ломает переделывать.

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

На законный вопрос, что за готовые решения, я отвечу просто. В любом случае, кое-какой навык веб-строительства необходим. А раз так… Вы либо идете и скачиваете готовые от а до я конструкции с разных сайтиков, построенных для seo и прочего мерчандайзинга, и используете все, что там рекомендуется один в один… … бывает не так уж и плохо, так что…

Либо берете за основу замечательные библиотеки скриптов, с которыми придется творчески повозиться для внедрения. Я считаю это отличным вариантом. Например как тут с таймзонными скриптами…

Истово рекомендую Swiper. Вариации разнообразнейших слайдеров и прочего двигающего контент в пределах заданной зоны добра поражают воображение. Я сам присматриваюсь к некоторым штукам, а, при оказионной необходимости, сделаю слайдер именно на этой основе.

В качестве примера: мне понравилась такая штука — область прокручивания. Т. е. сюда можно забить очень большой текст, возможно с картинками, а «окошко» будет компактным. Вариация спойлера, только полускрытого, так сказать. Может быть и внедрю. Но.. Возник некий вопрос: помимо подключаемых библиотек со стилями и скриптами, есть небольшой скрипт инициализации этого дела, который ставится в хвост страницы, под закрывающий тег </body>. И я подумал, что в нем классы можно задавать свои, чтобы не было путаницы и конфликтований, если захочется внедрить на страницу еще и слайдер под той же эгидой… Но с «кастомными» классами оно не работает. Требуются эксперименты.