Основные консольные команды для работы с изображениями

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

ImageMagick — это консольный графический редактор. Он очень удобен, если нужно обработать множество изображений.

Пример обработки изображений в терминале

Ниже будут описаны примеры и основные команды для работы с изображениями.

Flexible Boxes — CSS флексбокс генератор

Flexible Boxes — это очень полезный ресурс для тех, кто использует флексы в вёрстке сайтов.

С помощью Flexible Boxes вы сможете интерактивно изобразить желаемое расположение блоков, и мгновенно увидеть результат реализации на HTML и CSS.

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

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

Pug vs HTML. Возможности шаблонизатора Pug (Jade)

В настоящее время Pug является одним из популярных шаблонизаторов.

В большинстве случаев в процессе верстки сайта на чистом HTML разработчику будет не хватать его возможностей. Давайте рассмотрим основные преимущества Pug.

Теги

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

ul
  li Пункт 1
  li Пункт 2
  li Пункт 3

Результат:

<ul>
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>Пункт 3</li>
</ul>

Ресурс для именования цветов. Переменные цветов SCSS, CSS

В процессе создания сайтов у нас может возникнуть проблема: как правильно назвать цвет? Нужно грамотное именование переменных!

Name that Color

Допустим, что на сайте пять оттенков зеленого. Как называть переменные цветов в SCSS, чтобы не путать? $color-green, $color-dark-green, $color-darken-green, $color-light-green — не самые удачные названия, т.к. мы сами будем путаться, какой цвет для чего нужен.

Бесплатные картинки для сайтов

Откуда же брать качественные бесплатные картинки для сайтов? У меня постоянно была проблема — не могла найти подходящие изображения. Раньше я не особо задумывалась, что некоторые фото, которые берёшь из Google, нельзя добавлять на свои сайты, т.к. они защищены авторскими правами. Есть специализированные сайты, где можно бесплатно найти красивые картинки, которые можно использовать в личных и коммерческих целях.