Дима Шишкин

Иногда пишу. В остальное время дизайню и разрабатываю сайты.
Телеграмme@shugich.netКанал в Телеграме

Слепой набор

Слепой набор — это когда печатешь текст и не смотришь на клавиатуру. Кто-то этому учится, а мне пришло само. Компьютер у меня с детства, с года, эдак, 1996-1997. Если поначалу я играл только в разные игры, то где-то с класса пятого начал писать себе доклады по разным предметам. А интернета не было. Поэтому я перепечатывал выдержки из разных энциклопедий. Потом начал делать сайты, для сайтов приходилось писать тексты, поэтому я много печатал текстов, много печатал кода. В итоге вышло так, что я сам по себе начал печатать вслепую и на русском, и на английском.

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

5 мая   жизнь

Обращение к тем, кто читает меня, через РСС

Сразу по делу. У меня сменился адрес РСС-фида. Если читаете через РСС, то переподпишитесь:

http://feeds.feedburner.com/shishkin

Если еще не читаете, то давно пора, это очень удобно.

Я решил сделать фидбернер потому что последнее время у меня какой-то ад с РСС-лентой. В Фидли и в IFTTT записи дублируются по несколько раз и, вероятно, досаждают этим моим читателям. Фидбернер, насколько я знаю, умеет убирать дубли, а другого инструмента я просто не знаю.

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

4 мая   мой сайт

Интересные новинки в CSS — 1

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

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

hanging-punctuation

По-русски это называется висячей пунктуацей.

Спецификация: https://drafts.csswg.org/css-text-3/#hanging-punctuation-property

Сейчас поддерживается только в Сафари, начиная с 10 версии. Можно использовать через @supports, если не используете типограф или что-то подобное. Надеюсь остальные браузеры тоже подхватят.

See the Pen mWJJNx by Joel Drapper (@joeldrapper) on CodePen.


display: flow-root

Если по простому, то это замена clearfix. С этим свойством он больше не нужен. Но там все сложнее и интереснее. Почитайте статью на CSS-live, они полностью раскрыли тему: http://css-live.ru/faq/displayflow-root-not-clearfix.html

Спецификация: https://www.w3.org/TR/css-display-3/#valdef-display-flow-root

Работает только в Фаерфоксе 53+ и Хроме 57+.


initial-letter

Определяет какой высоты будет первая буква, но примечательно то, что размер указывается не в px (em, rm, etc.), а в количестве строк обычного текста. Работает только для псевдо-элемента ::first-letter. Удобно делать буквицы на CSS.

Спецификация: https://www.w3.org/TR/css-inline/#initial-letter-styling

Сейчас нет адекватной поддержки в браузерах. Только в последней версии Сафари (TP).

Пример со страницы спецификации


scroll-behavior

Плавная прокрутка до определенного элемента. Сейчас если кликнуть по якорю, то прокрутка будет моментальной, чтобы было плавно используют JS. С этим свойством JS не нужен. Посмотрите примеры на CSS Tricks: https://css-tricks.com/almanac/properties/s/scroll-behavior/

Спецификация: https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior

Работает только в Фаерфоксе.


:placeholder-shown

Отрабатывается, когда виден текст плейсхолдера.

Спецификация: https://www.w3.org/TR/selectors4/#placeholder

Не работает в ИЕ и Эдже.


Поддержка фич OpenType

Браузеры начали хорошо поддерживать Open Type и появились всякие свойства, связанные с этим. Настолько все тонко, что кодер вряд ли придумает зачем это все нужно. Верстать должен дизайнер ;-)

  • font-kerning — включение или отключение кернинга
  • font-variant-ligatures — управление лигатурами
  • font-variant-position — включение подстрочных или надстрочных символов
  • font-variant-alternates — управление глифами
  • font-variant-caps — управление капителью
  • font-variant-numeric — управление цифрами
  • font-variant-alternates — управление глифами
  • @font-feature-value — настройка шрифта и глифов
  • font-variant-east-asian — работа с лигатурами в текстах с иероглифами
  • font-feature-settings — настройка шрифта
  • font-language-override — смена основного языка при выборе глифов

Я сам до конца не разобрался во всем этом, но очень круто. Стоит понимать, что не все шрифты поддерживают такой функционал так что на каком-нибудь Open Sans тестировать это не стоит. Ищите шрифты с «Pro» в названии, большая вероятность что поддержка всего этого в таком шрифте будет.

Спецификация: https://www.w3.org/TR/css-fonts-3/#font-rend-props

Разные свойства по разному поддерживаются в разных браузерах.


Медиа-выражения: Interaction Media Features

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

Спецификация: https://www.w3.org/TR/mediaqueries-4/#mf-interaction

Фаерфокс пока что не поддерживает


CSS Scroll snap points

Точечное управление скроллом. Можно создавать так называемые точки прилипания и при скорлле привязываться к ним. Сейчас такое делают на JS. Боюсь, что со временем этим будут злоупотреблять, но радует, что нужно меньше JS в некоторых случаях.

Спецификация: https://www.w3.org/TR/css-scroll-snap-1/

Хром никак не поддерживает, остальные не без проблем.


CSS-переменные

Об этом я давно что-то слышал, но сейчас посмотрел. Уже неплохая поддержка. Использовать в боевых проектах я бы пока не стал, но уже через годик можно будет, я думаю. Вряд ли они понадобятся ребятам, которые используют Stylus (LESS, SCSS, ...). Но, тем не менее, это очень важное нововведение.

Спецификация: https://drafts.csswg.org/css-variables/


Есть еще много крутого, но я решил не писать обо всем сразу потому что слишком много за раз — плохо.

Электронные письма

Эрик Шпикерманн в своей книге написал очень важную мысль, которую я хочу отметить. Речь об электронных письмах:

Еще один важный момент касается кнопки «Ответить». Любая фраза, которую вы выделите в письме, автоматически повторяется в ответе. Но, даже если вы хотите процитировать больше одного предложения из письма собеседника, совсем не обязательно отправлять ему все письмо. Нажмите кнопку «Ответить», напишите сообщение под текстом, на который вы отвечаете, и удалите все ненужное. Разве друзья, с которыми вы обмениваетесь рукописными письмами, отправляют вам ответ вместе с вашим же письмом? Подумайте о получателе!

Эрику сейчас 69 лет и он понимает это! 90% людей с которыми я переписываюсь при помощи электронной почты не задумываются об этом. Это грустно.

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

А еще есть жанр с многострочными регалиями и логотипами в подписи. Если многострочную подпись пережить можно, то логотип мешается. Когда пытаешь скачать все вложения логотип тоже попадает в папку со скачанным, это бесит.

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

В догонку пост Ильи Бирмана об уродских и опрятных письмах (http://ilyabirman.ru/meanwhile/all/neat-mail/) и история Николая Товеровского о подписи в письмах Додо (http://ksoftware.livejournal.com/318907.html).

Увидели себя? Исправляйтесь.

Сериалы

Я время от времени пишу о фильмах, а о сериалах никогда не писал. Настал этот момент.

Вообще, мне сериалы нравятся больше, чем фильмы потому что в них лучше проработан сюжет благодаря тому, что экранного времени больше. Единственный минус — иногда сложно отследить новые серии, особенно если список сериалов большой. Решением этой проблемы раньше для меня выступал Турбик (https://turbik.tv/), но я отказался от него, там слишком много сериалов. Теперь у меня есть восхитительный Соп фо ми (https://soap4.me) и все сериалы я смотрю там.

Не хочу комментировать всё, но кое о каких сериалах скажу пару слов.

Доктор кто

Лучший сериал, как по мне. Если давно хотели посмотреть, но не знаете откуда начинать, то начинайте с перевыпуска 2005 года. Старые эпизоды и американский фильм смотреть не обязательно для понимания. У Доктора кто есть много спиноффов. Я смотрел только Торчвуд (не очень, я так не досмотрел) и Класс (достойный сериал).

Фарго

Горячо рекомендую. Каждый сезон описывает какую-либо историю, связанную с криминальной организацией Фарго.

Меня зовут Эрл

Первые несколько сезонов просто волшебные.

Адам портит всё

Маст хэв. Чувак развеевает различные мифы, но не как разрушители мифов, а более жизненное.

Элементари

Сериал про Шерлока Холмса. Но не как Шерлок. С нетерпением жду каждую серию.

2 мая   кино

О шрифте, Эрик Шпикерманн

Титул книги

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

Будет очень интересно и полезно не дизайнерам, а начинающим дизайнерам и ребятам из околодизайнерской среды однозначно стоит прочитать. Книга небольшая, 200 страниц, половина разворотов — картинки.

У Эрика есть дизайн-студия, которую он назвал в свою честь. И там делают довольно классные проекты, стоит посмотреть портфолио.

28 апреля   дизайн   книга

Гомеопатия

Просветительский фонд «Эволюция» выпустил инфографику о гомеопатии. Не могу ей не поделиться. Многие не понимаю суть гомеопатии и тратят из-за этого кучу денег,не получая надлежащего лечения. Мне самому случалось покупать в аптеке лекарство, которе при детальном изучением оказывалось писюлькой какой-то дряни, смешанной с ведром воды. А иные люди отдают гомеопатам денеги, чтобы получить нулевой результат.

Вдогонку две статьи Медузы про гомеопатию и про лженауку.

27 апреля   наука   рационализм

Синдром Утенка

Раньше я нашел в википедии Метод утенка. Сейчас наткнулся на синдром утенка.

Синдром или эффект утёнка (англ. baby duck syndrome, нлпёрск. импринтинг) — психологический принцип, по которому человек, сталкиваясь с какой-либо областью и далее углубляясь в неё, считает первый встреченный им объект из этой области самым лучшим, самым правильным, а все прочие — тем «хуже», чем меньше они похожи на его первую любовь.
Лурк

Другими словами, если ты что-либо увидел первым, то считаешь его лучшим. Будь то принцип «все ссылки нужно подчеркивать» или «в верстке полосы не должно использоваться больше N кеглей». Ну или это не обязательно про дизайн, просто дизайн мне близок. На лурке много примеров, почитайте.

Я порой замечаю на себе действие синдрома утенка. В таком случае прибегаю к критическому мышлению.

Канал в Телеграме

Теперь меня можно читать в Телеграме. Канал у меня есть давно, а я о нем никогда никому не рассказывал потому что не вел и не понимал полезного действия. Оказывается люди так подписываются на блоги, поэтому я решил сделать. Мне не сложно, а вам приятно.

Велкам: https://t.me/shugichannel

24 апреля   мой сайт

Дата в новой Эгее

Новая Эгея для меня — это Эгея 2.5. Та самая версия при которой потерялась совместимость со всеми старыми темами. В этом релизе даты начали вести себя крайне неадекватно. Если год текущий, то отображается, дата, а если предыдущий, то год. Правда где-то в тайтле висит полный таймштамп, но это так себе.

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

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

Первое

Сделайте дубль темы, чтобы не работать с оригиналом. В папке themes найдите папку plain и сделайте копию с другим названием. У меня, например, «plain-shugich». В скопированной папке поменяйте файл theme-info. Там нужно поставить другое название темы, чтобы в админке было легко менять.

Второе

Из папки /system/templates скопируйте файл notes.tmlp.php и вставьте в папку templates, которая находится в вашей новой теме.

Третье

Откройте скопированный файл и найдите там вот такой фрагмент:

<span class="e2-timestamp" title="<?=_DT ('j {month-g} Y, H:i, {zone}', @$note['time'])?>"><?= _AGO ($note['time']) ?></span> &nbsp;

У меня это 111 строка, но может отличаться.

Четвертое

Замените этот кусок на вот это:

<span class="e2-timestamp" title="<?=_DT ('j {month-g} Y, H:i, {zone}', @$note['time'])?>">
	<?php
	if(date('Y') == _DT ('Y', @$note['time'])) {
		echo _DT ('j {month-g}', @$note['time']);
	} else {
		echo _DT ('j {month-g} Y', @$note['time']);
	}
	?>
</span>

Это все. Можно заливать на сервер и наслаждаться. Дата будет выводится в формать «день месяц» для текущего года и в формате «день месяц год» для предыдущих годов.

24 апреля   разработка   эгея
Ctrl + ↓ Ранее