Подборка полезных инструментов и библиотек для веб-разработчиков

Фронтэнд — хитрая штука: его нетрудно понять, но в нём сложно стать мастером — слишком много разных нюансов нужно учесть. К счастью, разработчики и дизайнеры постоянно создают инструменты, которые упрощают выполнение рутинных задач и дают свободу творчеству. Именно поэтому мы собрали для вас подборку полезных ресурсов для разработки на HTML, CSS и JavaScript. 

HTML и CSS


INITIALIZR

Этот инструмент создаёт настраиваемый шаблон, основанный на HTML5 Boilerplate. Выберите, нужен ли вам образец содержимого, определитесь между JS и jQuery и задайте необходимые настройки совместимости.


LAYER STYLES

Приятный и простой инструмент для создания CSS — практически графический редактор. Он позволяет вам добавлять тени, фон, границы и создаёт кроссбраузерный CSS-код.


MOBILE BOILERPLATE

Шаблон для создания производительных веб-приложений. Поддерживаются как топовые смартфоны, так и устройства на Blackberry, Symbian и IE Mobile.


VOGUE

Безымянный

Этот инструмент обновляет таблицу стилей страницы в браузере, причём его можно настроить для одновременной работы с несколькими браузерами. Для использования нужно установить NodeJS и npm.


CSS-X-FIRE

Этот инструмент позволяет изменять CSS-свойства в IDE, не беспокоясь об обновлении страницы в браузере.


FFFFALLBACK

Этот инструмент пригодится вам, когда вы захотите «поиграться со шрифтами» 🙂 Он сканирует CSS-код страницы и создаёт её клон, где вы и можете тестировать различные шрифты.


CODEKIT для MAC OS X

CodeKit предназначен для ускорения и упрощения процесса разработки сайтов. Он поддерживает Less, Sass, Stylus, Jade, Haml, Slim, CoffeeScript, Javascript и Compass.


LESS-BOILERPLATE

Безымянный

Boilerplate CSS написан на Less и включает в себя CSS Reset, CSS3 Helpers и многое другое.


NEEDLE V0.1A1

Needle — это удобный инструмент для тестирования CSS и сравнения частей веб-сайтов.


SPRITEMAPPER

Это приложение объединяет несколько изображений в одно и настраивает CSS-позиционирование частей — это потенциально уменьшает время загрузки сайта.


NORMALIZE.CSS

Normalize.css использует немного иной подход к CSS Reset. Вместо сброса всех настроек по умолчанию разработчики разобрались, как разные браузеры работают с отдельными частями кода, и оставили лишь нужные настройки. Это экономит время и повышает производительность.


EMMET (бывш. ZEN CODING)

Emmet — это плагин для ускорения написания и редактирования кода. Это достигается за счёт использования сокращений.


PCSS

Это препроцессор CSS, написанный на PHP, который предоставляет вам дополнительные возможности при использовании CSS. Необходим PHP5.


JAVASCRIPT-инструменты


MODERNIZR 2

Modernizr — это широко используемая open-source JS-библиотека, которая помогает создавать сайты на HTMl5 и CSS3. Во второй версии появилась возможность комбинировать определение возможностей браузера с медиазапросами и условной загрузкой ресурсов, что повышает производительность и оптимизацию.


FITTEXT

fittext_screens

FitText — это jQuery-плагин для создания отзывчивой и плавающей верстки.


JQUERY WAYPOINTS

Waypoints — это небольшой jQuery-плагин, позволяющий настроить выполнение функции при пролистывании к элементу.


KAFFEINE

Набор расширений синтаксиса JS, упрощающий его использование.


CROSSROADS.JS

Эта библиотека вдохновлена утилитами URL Route/Dispatch, представленными в таких фреймворках, как Rails, Pyramid, Django, CakePHP, CodeIgniter и т.д. Она парсит входную строку и определяет нужное действие.


HEAD.JS

Скрипт, ускоряющий, упрощающий и модернизирующий ваш сайт. Вы можете загружать скрипты, а также использовать HTML5 и CSS3.


GRID CALCULATOR

Калькулятор, позволяющий быстро настроить сетку и загрузить её в Adobe Illustrator или Photoshop.


GRIDDLE.IT

Простой способ выровнять вёрстку. Всё, что нужно — поместить измерения после предоставленного URL, чтобы получить фоновое изображение с разметкой страницы.

Источник: LiketheFuture