Назар Токар
Опубліковано: 21 Липня 2014
Оновлено: 1 Серпня 2014

Каждый программист фронтенда (особенно верстальщик) должен максимально оптимизировать процесс верстки, чтобы тратить меньше времени на рутинную работу. Лет 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?

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

← Тисни «Лайк», щоб читати нас у Фейсбуці
    Поширити у Фейсбуці
    Надіслати у Messenger
    Надіслати в Telegram
    Надіслати у WhatsApp
    Зберегти в Pocket

    Додати коментар

    Такий e-mail вже зареєстровано. Скористуйтеся формою входу або введіть інший.

    Ви вказали некоректні логін або пароль

    Вибачте, для коментування необхідно увійти.

    9 коментарів

    спочатку нові
    за рейтингом спочатку нові за хронологією

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

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

    Автор
    Назар Токар

    Add more icons и дальше Import icons.

    Здравствуйте!!!

    Очень нравиться как Вы Назар пишите.

    А не могли бы Вы осветить такой вопрос или вопросы, как

    использование grunt, gulp, git, bem, jade, less sass stylus.

    я о чем: в нете много инфы, но она вся либо начальная либо в основном не понятно как ее на проекте использовать. Если Вы можите не могли бы Вы взять макет желательно средний-сложный и по урокам описать все технологии на одном проекте. Чтоб в конце были использованы все технологии и версии production and developer. Мне кажется это было бы очень круто и полезно многим.

    Спасибо за Ваш труд !!!!

    Автор
    Назар Токар

    @ed, спасибо. Возможно, расскажу о Grunt.js с базовым набором плагинов. Про SASS уже есть две статьи здесь, посмотрите.

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

    Спасибо!!!!

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

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

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