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

Использование спрайтов используется для ускорения загрузки страниц. Множество мелких иконок и изображений сохраняются в виде одного файла, а затем в css при помощи свойства background-position задаются координаты нужной области в этом файле. Сервис SpritePad представляет собой холст, на который вы можете прямо из проводника перетаскивать файлы изображений.

Справа динамически генерируется css код, который позволит нужный элемент спрайта. После размещения всех картинок на холсте нажимаем сперва кнопку Fit Document (обрезает пустые области), а затем Download, после чего на компьютер загрузится архив с самим спрайтом в формате png и файл css для подключения к вашему проекту.

Теперь для использования картинок нужно в html-коде необходимому элементу назначить класс из css-файла. Кстати, имя класса берется из названия файла, поэтому можно предварительно переименовать файлы, чтобы классы были удобными для использования.

Рекомендую зарегистрироваться на сервисе (занимает секунд 15, без подтверждения e-mail) — открывается возможность сохранить спрайт. Т.е. при добавлении новых изображений на проект, нет надобности заново формировать весь спрайт — просто заходим на сервис, выбираем сохраненный ранее проект, добавляем нужные картинки и скачиваем обновленный архив. Минус в том, что сохранить можно только два файла. Если хотите больше, предлагается привести друзей — за каждого зарегистрированного дают дополнительное сохранение. Либо оплатить премиум (5 евро в месяц) — тогда появится возможность сохранять любое количество файлов в облаке. На мой взгляд дорого, тем более при текущем курсе валют (получится примерно 350 рублей).

Также премиум-аккаунт дает возможность автоматического выстраивания иконок на холсте для получения минимального размера спрайта (Auto Alignment) и функцию совместной работы.

spritepad.wearekiss.com

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

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

www.colorzilla.com/gradient-editor/

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

Использование предельно простое: выбираем понравившийся шрифт (рекомендую установить значение фильтра Script слева в положение Cyrillic — так мы увидим примеры шрифтов на русском), нажимаем на иконку Quick-use (со стрелкой), на открывшейся странице отмечаем нужные стили шрифта (жирный, курсив и т.д.) и наборы символов (для русскоязычных сайтов должна быть отмечена кириллица).

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

Пример кода для подключения шрифта Roboto:

Еще ниже пример стиля для css-файла:

font-family: 'Roboto', sans-serif;

Важно, что чем больше вариантов написания шрифта и наборов символов выбрано, тем сильнее это повлияет на загрузку страницы (с правом верхнем углу сервиса расположен индикатор «тяжести» скрипта).

www.google.com/fonts/

Еще один полезный сервис от Google, где собраны сниппеты свежих версий популярных библиотек, таких как AngularJS или jQuery.

Здесь все совсем просто — ищем в списке нужную библиотеку и копируем код сниппета (зеленого цвета).

developers.google.com/speed/libraries/devguide

Набор фоновых заливок для сайта (и не только). Здесь же на сайте при нажатии на кнопку Preview с подходящим фоном можно посмотреть, как это будет выглядеть в деле.

subtlepatterns.com

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

quirktools.com/screenfly/

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

cssshrink.com

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

Использование:

Чтобы получить готовый код, не обязательно даже заходить на сайт, достаточно запомнить несколько сниппетов:

1. Базовый вариант. Для отображения картинки размером 350 на 150:

2. Базовый вариант. Если изображение квадратное, используйте укороченную запись:

3. Добавляем цвет фона и шрифта и формат файла: серый фон #AAA и белый цвет шрифта #FFF:

4. Текст на картинке (кириллица не поддерживается)

placehold.it

Чтобы было понятно назначение, сразу приведу пример того, что получилось у меня:

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

1) Выбираете фрейм устройства, представленного в коллекции (например, maс book или nexus 5).
2) Загружаете фотографию или указываете адрес сайта, с которого необходимо снять скриншот.
3) Нажимаете кнопку Capture
4) Делаете crop изображения (для скриншота сайта я выбрал всю область), нажимаете Submit Crop
5) Скачиваете полученную картинку

frame.lab25.co.uk/categories

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

www.pearsonified.com/typography/

Замечательный сервис для приведения вашего php-скрипта к наиболее читабельному виду. Поддерживаются популярные стили написания кода.

phpbeautifier.com/

Если в проекте используются стандартные иконки, нет смысла хранить их в виде изображений или спрайтов. Один из быстрых и простых способов подключить иконки — сервис Font Awesome. Использование очень простое:

1. Подключаем css-файл:

2. Добавляем иконку на страницу:

3. Получаем иконку домашней страницы:

4. Для регулирования размера иконок используем один из вариантов ниже:

5. Получаем иконку нужного размера (в данном случае использован класс fa-3x):

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

fortawesome.github.io/Font-Awesome/

При наполнении сайта исходник зачастую бывает мусорным, например, при копировании текста из word копируется масса лишних стилей и ненужных тэгов, которые не только портят внешний вид страниц сайта, но и являются негативным фактором с точки зрения продвижения. Именно для этих целей используется следующий сервис. Работать с ним просто: вставляем скопированный из редактора текст либо во второе окошко мусорный html-код, отмечаем опции (что именно очищать, а что оставить) и жмем «Произвести очистку» и после перезагрузки страницы получаем чистый код. Данный сервис незаменим, когда нужно перевести таблицу из ворда в html.

weare.ru/cgi-bin/clearhtml.cgi

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

developers.google.com/speed/pagespeed/insights/