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

Я зібрав список основних сайтів, які використовую при верстці і можу порекомендувати вам. Вони зачіпають не конкретні фреймворки, а допомагають оптимізувати верстку і її тестування в загальному. Незалежно від того, як ви верстаєте: використовуючи свій фреймворк або користуєтеся готовими рішеннями.

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

Чистий валідний код в HTML і CSS підвищує швидкість завантаження і шанси, що на всіх без винятку пристроях і браузерах ваша верстка буде виглядати так, як ви хочете. Тому будь-який верстці потрібно проводити валідацію. Валідатори W3C — це два сервіси, які з незапам’ятних часів допомагають тримати код в чистоті і порядку.

Зручно, що є три варіанти перевірки: перевірити код у файлі за вказаним URL, завантажити файл з робочого столу або скопіювати код прямо в форму на сайті.

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?

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

Коменти

Андрій Афанасенко

Дякую, Назаре.

светлана

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

Дамир

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

Назар Токарь

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

ed

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

Назар Токарь

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

ed

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

webso

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

ndrozd

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

Fox

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