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

Фронтэнд — хитрая штука: его нетрудно понять, но в нём сложно стать мастером — слишком много разных нюансов нужно учесть. К счастью, разработчики и дизайнеры постоянно создают инструменты, которые упрощают выполнение рутинных задач и дают свободу творчеству. Именно поэтому мы собрали для вас подборку полезных ресурсов для разработки на 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 для macOS

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


Boilerplate CSS

Безымянный

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


Needle

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


Spritemapper

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


normalize.css

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


Emmet (бывш. Zen Coding)

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


PCSS

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


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


Modernizr 2

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


FitText

fittext_screens

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


jQuert 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, чтобы получить фоновое изображение с разметкой страницы.


Ligature.js

Эта библиотека позволяет вам добавлять в текст веб-страницы различные лигатуры.


StronglyTyped

Данная JS-библиотека позволяет вам настраивать строго типизированные свойства типов и констант. В браузерах, которые не поддерживают данную фичу, откат к обычным свойств происходит при помощи сеттеров и геттеров ES5.


Если вы используете удобные инструменты, которые мы пропустили, делитесь ими в комментариях, и мы пополним подборку.

По материалам LiketheFuture и WD Tips & Tricks