Подпишитесь на интересующие вас теги, чтобы следить за новыми постами и быть в курсе событий.
Подборка полезных инструментов и библиотек для веб-разработчиков
Здесь вы найдете подборку инструментов для работы с HTML, CSS и JavaScript, которые упрощают выполнение рутинных задач и дают свободу творчеству.
24184

Фронтенд — хитрая штука: его нетрудно понять, сложно стать мастером в нём, ведь приходится учитывать слишком много нюансов. К счастью, разработчики и дизайнеры постоянно создают инструменты, которые упрощают выполнение рутинных задач и дают свободу творчеству. Именно поэтому мы собрали для вас подборку полезных ресурсов для работы с HTML, CSS и JavaScript.
HTML и CSS
Extract CSS
Этот инструмент извлекает id, классы и встроенные стили из HTML-документа, выводит их в виде CSS.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
CSScomb
Средство форматирования для улучшения качества кода, которое сортирует свойства CSS в предварительно заданном порядке.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
CSS Compressor
Небольшое приложение для сжатия и оптимизации CSS-кода.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Live CSS Editor
Расширение для Chrome и Safari, которое позволяет экспериментировать с CSS-правилами на любом сайте.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
px-em
Инструмент выводит относительный размер em: для расчёта нужно ввести родительское и необходимое вам значение в px.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Really Quick Responsive Web Design Calculator
RQRWDC — отзывчивый инструмент для веб-дизайна, позволяющий перевести значение ширины элемента из процентов в px.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
CSS Animation Generator
Небольшой инструмент для быстрой генерации анимации. Для использования сгенерированный код в HTML и CSS нужно просто вставить в свой проект.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
iconizr
Инструмент для конвертации SVG-изображений в набор CSS-иконок.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
CSSynth
Удобное приложение для запуска циклических CSS-анимаций.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Create CSS3
Генератор CSS3-кода по выбранным параметрам. По возможности предлагает альтернативные варианты.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Flexplorer
Простой генератор Flexbox-кода.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Duri.me
Программа для задания изображению универсального идентификатора в виде строки, которую можно вставить прямо в HTML- и CSS-файлы.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Initializr
Этот инструмент создаёт настраиваемый шаблон, основанный на HTML5 Boilerplate. Выберите, нужен ли вам образец содержимого, определитесь между JS и jQuery и задайте необходимые настройки совместимости.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Layer Styles
Приятный и простой инструмент для создания CSS, практически графический редактор. Он позволяет добавлять тени, фон, границы и создаёт кроссбраузерный CSS-код.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Vogue
Этот инструмент обновляет таблицу стилей страницы в браузере, причём его можно настроить для одновременной работы с несколькими браузерами. Для использования нужно установить NodeJS и npm.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
CSS-X-Fire
Этот инструмент позволяет изменять CSS-свойства в IDE, не беспокоясь об обновлении страницы в браузере.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Needle
Needle — это удобный инструмент для тестирования CSS и сравнения частей веб-сайтов.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
normalize.css
Инструмент Normalize.css является альтернативой инструменту Reset. Он обеспечивает корректное отображение элементов в разных браузерах в соответствии с современными стандартами и целенаправленно регулирует только те стили, для которых требуется нормализация. Такой подход экономит время и повышает производительность.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Emmet (бывш. Zen Coding)
Emmet — это плагин для ускорения написания и редактирования кода посредством использования многочисленных и очень удобных сокращений.
JS-инструменты
Modernizr 2
Modernizr — это широко используемая open source JS-библиотека, которая помогает создавать сайты на HTML5 и CSS3. Во второй версии появилась возможность комбинировать определение возможностей браузера с медиазапросами и условной загрузкой ресурсов, что повышает производительность и оптимизацию.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
FitText
FitText — это jQuery-плагин для создания отзывчивой и плавающей верстки.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
jQuery Waypoints
Waypoints — это небольшой jQuery-плагин, позволяющий настроить выполнение функции при пролистывании к элементу.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Kaffeine
Набор расширений синтаксиса JS, упрощающий его использование.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Crossroads.js
Эта библиотека вдохновлена утилитами URL Route/Dispatch, представленными в таких фреймворках, как Rails, Pyramid, Django, CakePHP, CodeIgniter и т.д. Она парсит входную строку и определяет нужное действие.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Grid Calculator
Калькулятор, позволяющий быстро настроить сетку и загрузить её в Adobe Illustrator или Photoshop.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
griddle.it
Сайт, обеспечивающий простой способ выровнять вёрстку. Всё, что нужно — поместить измерения после предоставленного URL, чтобы получить фоновое изображение с разметкой страницы.
На данный момент этот блок не поддерживается, но мы не забыли о нём!Наша команда уже занята его разработкой, он будет доступен в ближайшее время.
Ещё больше инструментов для веб-разработки можно найти в другой нашей подборке: часть 1 и часть 2.
24184
Что думаете?
0 комментариев
Сначала интересные