10 сайтов, необходимых верстальщику

Каждый программист фронтенда (особенно верстальщик) должен максимально оптимизировать процесс верстки, чтобы тратить меньше времени на рутинную работу. Лет 7 назад верстальщику нужно было каждый раз писать код для блочной верстки, стили для текстов, заголовков и так далее. Сегодня существуют десятки CSS-фреймворков, HTML, JS и другие инструменты, которые значительно облегчают нам жизнь.

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

Валидатор HTML и CSS

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

fontastic.me — кастомные шрифты

Доля спрайтов — бесконечно убывающая функция. На просторах верстки она стремится к нулю, но никогда его не достигнет. Сейчас все больше фронтендеров пользуются векторными иконками или шрифтами. Для создания иконочных шрифтов, с которыми работать легко и удобно, есть сервис fontastic.me. Здесь можно набрать нужные вам иконки, сохранить в один шрифт и скачать, либо использовать из облака.

TinyPNG — оптимизация PNG

Оптимизация графики — не менее важный аспект верстки, чем чистота кода. Функция «Save for Web» в Photoshop незаменима, но с png она работает крайне плохо. Поэтому после экспорта png-файлов из фотошопа очень рекомендую вам оптимизировать ее в TinyPNG. После обработки файл теряет 30-70% от веса, на качество это никак не влияет.

Аналоги: плагин TinyPNG для photoshop и Dynamic Drive Optimizer.

Предпросмотр Sass

Если вы верстаете с использованием Sass, то компилятор автоматически сохраняет и оптимизирует измененный код и вам не нужно заботиться о том, как он выглядит. Если вы хотите использовать браузерный js-компилятор или увидеть скомпилированный Sass-код «на лету», это можно легко сделать в онлайновом визуальном редакторе Less2CSS, который сразу покажет вам результаты.

Конвертер изображений в Base-64

Файлы jpg, png и gif в вебе можно представить в формате Base-64, то есть исключительно из ASCII-символов без использования файлов изображений. Такой формат повсеместно используется в подписях к электронной почте, чтобы добавлять графику без загрузки внешних файлов. Это также удобно и для случаев, когда мы не можем получить доступ к ftp сайта.

Алгоритм конвертера прост: загружаете файл и на выходе получаете несколько вариантов использования: html, css, js код.

Компрессор JS-кода

Сжатый js-код в случае более-менее большого проекта сэкономит вам секунду при загрузке страницы до сохранения файлов в кэш. Компрессоры позволяют сжать читаемый код на 10-30% и превратить в набор нечитаемых символов. Поэтому всегда храните исходные файлы для последующей разработки.

Аналог: WB0

Генератор CSS-градиентов

Времена плохих браузеров уходят в прошлое: сегодня 9,5 человек из 10 увидят вашу html5/css3 верстку в том же виде, что и вы. Поэтому для градиентов я бы рекомендовал забыть про фоны шириной 1 пиксель с атрибутом repeat-x и перейти на CSS3-градиенты. Для этого есть отличный инструмент, который позволяет получить кроссбраузерный CSS для градиента с поддержкой IE9.

Аналоги: CSS3Factory, CSSMatic Gradients.

HTMLBook

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

Can I Use …?

Вопрос совместимости разных версий браузеров со свойствами html/css иногда очень важен. Чтобы не сомневаться, можно проверить, поддерживается ли нужное свойство или атрибут.