Инструменты Front-End разработчика

В данном материале, я хочу представить список инструментов которые помогают мне при разработке клиентской части приложения, сайта. Речь идет о Front-End разработки.

Кто такой Front-End разработчик?

Front-End - Внешний интерфейс. Т.е. Front-End developer - разработчик внешнего интерфейса.

Front-end разработчик занимается версткой шаблона сайта и созданием пользовательского интерфейса. Обычно Front-End разработчик – это мастер на все руки. Он просто обязан обладать талантом дизайнера, быть искусным верстальщиком и хорошим программистом.

Современный Front-End developer должен в совершенстве владеть HTML/HTML5, CSS/CSS3, JavaScript (jQuery – как минимум), уметь работать с Firebug(ом). У каждого Front-End разработчикам есть свои наработки, которые он хранит в виде FrameWork(a). Многие разработчики в работе пользуются популярными FrameWork-ами, такими как: TwitterBootstrap, Foundation 3, Compass. Но лично я, пишу все сам. Готовое решение это очень хорошо, ускоряет процесс работы, но не всегда.

В работе я использую текстовый редактор Sublime Text.

Быстрый кроссплатформенный редактор исходных текстов программ. Поддерживает плагины на языке программирования Python.

Sublime Text не является свободным или открытым программным обеспечением, однако, некоторые его плагины распространяются по свободной лицензии, а также разрабатываются и поддерживаются сообществом разработчиков.

Sublime Text.

сайт: http://www.sublimetext.com

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

Проект французского программиста Тибо Курубля. Здесь собрана и упорядочена документация по наиболее популярным веб-технологиям, фреймворкам и API, и многим другим средствам разработки. DOM, HTML, JavaScript, jQuery, Node.js, PHP, Ruby, Python, Git, Angular, Backbone, CoffeScript, Less, Sass, Redis и много чего ещё… Всё оформлено в едином стиле, по всей базе документации работает поиск, в том числе нечёткий. Есть возможность выбрать только необходимые технологии, по которым надо искать. Вообще, интерфейс DevDocs радует — ничего лишнего, всё очень понятно и функционально, доступно множество клавиатурных сокращений.

сайт: http://devdocs.io

Сборка каркаса шаблона сайта.

Сборка основного каркаса шаблона.

Каркас шаблона сайта бывает резиновыми, фиксированными, одноколоночными, двухколоночными и трехколоночными. После того как определились с типом каркаса шаблона сайта, я использую он-лайн инструмент СSStemplater. Отмечаю нужные мне параметры и одним кликом генерирую.

СSStemplater.

сайт: http://csstemplater.com

Справочник HTML/HTML5

сайт: http://htmlbook.ru/html

сайт: http://htmlbook.ru/html5

После того, как сгенерировали необходимый шаблон время наступает верстать и работать с таблицей стилей.

Работа с CSS.

Есть очень много иструментов, генераторов для работы с CSS. Некоторые из них собраны вот в этой статье "Подборка генераторов CSS".

сайт: http://habrahabr.ru/post/118056

В своей работе я сипользую только один генератор, это расширение CSSsir для браузера Mozilla Firefox. Простой и удобный в использовании инструмент, позволяющий в несколько кликов генерировать кросс-браузерный код основных CSS-свойств. Данный CSS3 генератор будет полезен не только web-мастерам и дизайнерам, но и обычным пользователям.

сайт: https://addons.mozilla.org/ru/firefox/addon/csssir

Справочник CSS

сайт: http://css.manual.ru

сайт: http://htmlbook.ru/css

Работа с динамикой сайта JavaScript и jQuery

Сервисы по работе с API jQuery.

jQuery Cheatsheet - Oscar Otero

JQuery Cheatsheet в HTML со ссылками на оригинальной документацию API. Удобен тем что собрано все в одном мсете, можно выбирать версии jQuery библиотеки и просмотреть какая версия что поддерживает. Описание фунций открывает в новом окне оригинальной документации.

сайт: http://oscarotero.com/jquery/