От автора: для верстки сайтов давно придумано много специальных библиотек и программ, которые значительно упрощают работу веб-разработчика. В этой статье мы рассмотрим некоторые из них.
Верстать с удобством
Инструменты для верстки позволяют писать код быстрее. Делать меньше, а получать больше. Это ключевое правила успешного разработчика. Первое, что нужно иметь – программу для написания кода. Здесь есть много вариантов для выбора – от блокнота до комплексного пакета по полностью визуальному созданию сайтов. Блокнот в данном случае является самым простым, хотя и невероятно неудобным способом писать код. Никакой подсветки, никакого функционала и удобства.
Итак, вам нужно выбрать программу для редактирования кода. Notepad++ и SublimeText – самые популярные программы, которые выбирают веб-разработчики. Они поддерживают множество плагинов. Подсветка кода, поддержка синтаксиса десятков языков, возможность сворачивания кода – все это базовые возможности этих программ.
Также есть более мощные программы, которые включают в себя тысячи готовых сценариев и кучу дополнительных возможностей. Такие программы могут быть платными. Покупать или нет – дело ваше, но для серьезной разработки это то, что нужно. Хотя на слабом компьютере такой софт запускать не стоит.
Говоря об инструментах, просто необходимо еще раз упомянуть об отладчике. Это очень удобная вещь, которая помогает быстро находить ошибки.
Хорошие инструменты и сервисы для быстрой и правильной верстки
WinMerge – эта полезная вещь показывает вам, какие отличия есть в различных вариантов с версткой. Вы можете загрузить разные версии и программа покажет, где различия. Может пригодиться веб-аналитику.
Ultimate CSS Gradient Generator – инструмент, который обязательно должен быть в арсенале фронтенд-разработчика. Линейные градиенты – хорошее нововведение CSS3. Они позволяют даже без изображений сделать очень красивый дизайн для сайта. Но самому прописывать градиенты очень сложности. У них есть множество параметров, таких, как: цвет, поворот, колорстопы.
На прописывание сложного градиента может уйти полчаса-час. Намного проще создавать их в визуальном режиме. Именно такую возможность представляет данный сервис. Он не только позволяет лучше разобраться в том, как делать градиенты, но и генерирует валидный кроссбраузерный код, а также обладает поддержкой градиента в старых браузерах и даже в IE9. Сервис очень прост в использовании и определенно заслуживает похвалы. Пользоваться им можно тут: colorzilla.com/gradient-editor/.
color.hailpixel.com/ — вот такой вот интересный сайт был найден мною на просторах сети. Вернее, сайтом это назвать сложно. На этой страничке вы сможете за счет передвижения курсора мыши получать миллионы различных цветов. Цвет можно сохранить, можно прописать параметры вручную. В общем, этот сайт может пригодиться как веб-дизайнерам, так и верстальщикам, которые постоянно имеют дело с цветом.
Рис. 1. Сервис быстрой подборки цветов
CSSReset – небольшой файл, который полностью сбрасывает все настройки по умолчанию для CSS. Например, сбрасываются все отступы. Также этот файл добавляет полноценную поддержку новых HTML5-элементов. Полезно добавлять его в свои проекты, если вы не хотите самостоятельно прописывать подобные настройки.
В инструменты для верстки сайта можно также отнести всевозможные генераторы форм. Например, Form Builder. В интерфейсе этого сервиса вы настраиваете все параметры и получаете код формы. Таким образом, вы можете экономить время на верстке сложных форм.
Moqups – невероятное HTML5 приложение, которое позволяет очень быстро создать каркас на новой версии HTML. Не секрет, что большинство верстальщиков привыкли создавать скелет по старинке – при помощи обычных, ничем не примечательных блоков.
С появлением новых стандартов стало более правильных делать разметку с помощью элементов HTML5, потому что они семантические.
Fontsquirrel – пожалуй, один из лучших генераторов шрифтов. Позволяет создать полностью готовую папку с файлами шрифта на основе всего одного ttf файла, который вы ему предоставите. Вам останется только скинуть файлы в свой проект и подключить шрифт.
На этом с инструментами пока заканчиваем. Конечно, тут представлены лишь некоторые полезные сервисы. Хотелось бы еще отметить сайт border-image.com/, на котором можно быстро сгенерировать декоративную рамку и вообще разобраться с этим свойством.
Препроцессоры, системы сборки
Какие еще есть инструменты для верстки шаблона? Это некоторые препроцессоры, постпроцессоры и системы сборки.
Autoprefixer – CSS-постпроцессор, освобождающий вас от необходимости прописывать вендорные префиксы. Не секрет, что многие веб-разработчики ненавидят эти префиксы. Используйте этот полезный инструмент, если вы из их числа.
Из препроцессоров можно отметить SASS, LESS и Stylus. Это попытка добавить программирования в CSS. С помощью этих замечательных инструментов можно создавать свои собственные небольшие фреймворки и структурировать большие проекты. Конечно, чтобы работать с препроцессорами, нужно изучить хотя бы один из них.
Системы сборки – это еще одни замечательные инструменты для облегчения работы с версткой. Из самых популярных можно выделить Grunt и Gulp. Благодаря этим системам вы можете перезагружать страницу без обновления, оптимизировать JavaScript и CSS код, сжимать изображения и много чего другого. Самое главное, научиться работать с ними.
Фреймворки, библиотеки
Конечно, в этой статье невозможно рассказать обо всех инструментах для веб-разработки. Но нельзя не сказать о Bootstrap. Это шикарный фреймворк для быстрой верстки, а еще в нем заложена адаптивность и по нему есть очень много обучающих видеоуроков, поэтому мы можете научиться быстро работать с ним.
Для вашего проекта также может пригодиться иконочный шрифт FontAwesome, снискавший популярность. Это сотни векторных иконок, которые можно подключить к своему сайту.
Рис. 2. Иконочные шрифты – современный подход к вставке иконок на свои сайты
Рассмотренные нами инструменты показывают, насколько на серьезный уровень вышла веб-разработка. Возможно, в ближайшие годы появится что-то новое, но уже на данный момент полезных программ и сервисов хватает сполна.
Комментарии (1)