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

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

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

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

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

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

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

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

Аналоги: Font Custom, Fontello, IconMoon.

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

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

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

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

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

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

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

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

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

формат base-64
Аналоги: MendArt.

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

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

Аналог: WB0

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

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

Аналоги: CSS3FactoryCSSMatic Gradients.

HTMLBook

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

Can I Use …?

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

Can I Use?

Поделитесь вашими инструментами для оптимизации верстки и ускорения загрузки.

    Отправить ответ

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

    Уведомлять
    avatar
    5000
    светлана
    Гость

    спасибо. очень полезная статья

    Дамир
    Гость

    По поводу “fontastic.me”, не подскажешь где можно залить свою векторную иконку, чтобы сервис превратил её в шрифт?

    ed
    Гость

    Здравствуйте!!!
    Очень нравиться как Вы Назар пишите.
    А не могли бы Вы осветить такой вопрос или вопросы, как
    использование grunt, gulp, git, bem, jade, less sass stylus.
    я о чем: в нете много инфы, но она вся либо начальная либо в основном не понятно как ее на проекте использовать. Если Вы можите не могли бы Вы взять макет желательно средний-сложный и по урокам описать все технологии на одном проекте. Чтоб в конце были использованы все технологии и версии production and developer. Мне кажется это было бы очень круто и полезно многим.
    Спасибо за Ваш труд !!!!

    ed
    Гость

    @Назар Токарь, Да есть(статьи SASS) их читал, думаю когда все вместе на одном проекте наверно проще понимать, а потом человек сам уже будет искать что ему надо. О grunt.js с базовым набором много статей но все на примере двух тегов p)) А как потом все льется на git создаются версии, структура проекта, нюансы,этого ничего нет. В общем полный процесс верстки с использованием новых технологий.
    Спасибо!!!!

    webso
    Гость

    Небольшая библиотека с готовыми блоками: http://patterntap.com/code

    ndrozd
    Гость

    Я бы еще Extract от Adobe добавил

    Fox
    Гость

    Спасибо Назар. Отличная статья

    wpDiscuz