Блог

Краткое руководство по Маркдауну

Официальное руководство по синтаксису Markdown мне кажется не слишком наглядным, поэтому когда-то давно сделал для себя краткое руководство, а теперь решил перенести его к себе в блог. В официальном руководстве описано больше нюансов, но чтобы начать пользоваться или повторить синтаксис достаточно изложенного ниже.

О каких дизайнерах мечтают верстальщики

В совете Николай Товеровский классифицировал верстальщиков на три категории: «Неандертальцы», «Планктон» и «Суперзвёзды».

На мой взгляд, между «Планктоном» и «Суперзвёздами» должны быть «Мастера», которые замечают все проблемы, советуются с дизайнерами, предлагают варианты, но не требуют «нарисовать макетик» и, пока ещё, не берут на себя ответственность дорабатывать макет самостоятельно. Таким специалистам достаточно на словах объяснить, что будет в крайних ситуациях и как должны вести себя элементы сайта в непрорисованных состояниях. Они всё поймут и сделают как надо.

А вот о каких дизайнерах мечтают верстальщики…

Захват экрана в GIF

Рекомендую замечательную маленькую программку для записи области экрана в GIF — LICEcap. Она должна быть полезна тестерам и разработчикам — лучше показать / увидеть баг в динамике, чем расписывать последовательность шагов для воспроизведения бага.

А ещё можно сохранять в гифки смешные моменты из фильмов.

Font-weight: bolder для шрифтов со множеством начертаний

Если вы используете шрифт со множеством начертаний, то вам, вероятно, захочется, чтобы теги strong и b не увеличивали жирность шрифта до фиксированного значения font-weight:700, как это происходит по-умолчанию, а использовали промежуточные значения, рассчитанные исходя из жирности шрифта родительского элемента.

Ведь не очень красиво, когда в ультратонком шрифте появляются жирные кляксы тегов strong.

Параметры subject и body в mailto ссылках

В письмах от сервисов и электронных магазинов, приходящих в ответ на заказ услуги или покупку товара, часто есть подобная фраза:

«Если у Вас возникли любые вопросы касательно вашего заказа, пожалуйста, свяжитесь со Службой поддержки по телефону XXXX XXX XXXX или напишите по адресу customerservices@sitename.com. Не забудьте сообщить ваш номер заказа.

Создавая шаблоны для таких писем, не поленитесь прописать этот самый номер заказа (и любую другую нужную службе поддержки информацию) в параметры mailto ссылки:

<a href="mailto:customerservices@sitename.com?subject=Заказ XXXXX&amp;body=Мой номер заказа XXXXX">customerservices@sitename.com</a>

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

Мелочь, но она сэкономит вашим покупателям пару лишних действий. Особенно актуально это для тех, кто пишет письмо с мобильника.

Посещённая ссылка при наведении

Век живи — век учись. Недавно узнал, что можно задавать посещённой ссылке отдельный цвет при наведении комбинируя два псевдокласса: a:visited:hover {color:#9501B3}.

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

CSS-селектор :not(). Полезные примеры

В спецификации и блогах про селектор :not обычно приводят какие-то искусственные примеры, которые хоть и объясняют синтаксис и принцип действия, но не несут никакой идеи о том, как получить пользу от нового селектора.

Списки и картинки с флоатами

Для дефолтных браузерных стилей характерно такое поведение: если картинка обтекает список слева, маркеры списка налазят на картинку. От этого можно избавиться незначительно переписав стили.

Pointer-events

Представим ситуацию, когда у нас один html-элемент расположен поверх другого. Но нам нужно, чтобы нижний элемент был кликабельным или реагировал на hover.

В CSS4 есть такое свойство — pointer-events.

Как отключить javascript в Google Chrome

Статья обновлена 6 февраля 2014.

В настройках Chrome Developer Tools запрятано много полезных, не сразу заметных, опций. Самые часто используемые — это отключение яваскрипта и отключение кэша.

Перечёркивание крест-накрест

Итак, задача: перечеркнуть слово или блок текста или картинку диагональными линиями крест-накрест. Нам поможет SVG.

Отладка мобильных сайтов в Webkit. Инспектор кода на мобильных устройствах

7 марта Abobe представила замечательный комплекс программ, позволяющий синхронно просматривать и проводить отладку сайтов в браузерах Webkit на компе и нескольких планшетах и смартфонах одновременно. Количество подключаемых устройств не ограничено. Поддерживаются как iOS, так и Android.

Горячие клавиши для выбора предыдущего и следующего слоя в Photoshop

При написании макросов в Фотошопе бывает нужно выбрать слой выше или ниже активного. Кликать в слой курсором плохой вариант, так как макрос запишет команду «Выбрать слой "имя_слоя"», т.е. будет выбираться конкретный слой, где бы он не находился, а не слой относительно текущего.

Нам помогут горячие клавиши:

  • Alt + [ — перейти на слой ниже.
  • Alt + ] — перейти на слой выше.
  • Alt + Shift + [ — добавить к выбранным слой ниже.
  • Alt + Shift + ] — добавить к выбранным слой выше.

HTML-сущности и их UTF-коды

Генерируемое содержимое псевдоклассов :before и :after очень удобно использовать для создания иконок, буллитов, кавычек и в прочих декоративных целях.

Но свойство content: '\203A'; отображает HTML-сущности так, как они записаны в CSS, не заменяет их на специальные символы. Например, напишем в CSS content: '&rarr;';, получим в браузере «&rarr;» вместо «→». Поэтому писать спецальные символы в content нужно 4-значными UTF-кодами (UTF-16 hex), экранированными обратным слэшем.

Нарезка в Photoshop — New Layer Based Slice

Открыл для себя недавно полезную команду в фотошопе — меню «Layer» → «New Layer Based Slice», — которая создаёт слайс по границам выделенного слоя. В случае выделения нескольких слоёв, создает слайс по границам каждого слоя. Это в несколько раз ускоряется нарезку графики с тенями, свечением и контурами.

Автозаполнение форм в Google Chrome

В Google Chrome в user agent stylesheet для полей с автозаполнением прописан желтый фон (#FAFFBD) и черный цвет текста, причем оба правила усилены с помощью !important и переопределить их в своей CSS нельзя. Но есть способы решить эту проблему обходными путями.