Frontend инструменты разработчика: некоторые из моих любимых за 2015 год

Frontend инструменты разработчика: некоторые из моих любимых за 2015 год

От автора: 2015 год закончился, и все согласятся, что он под завязку был набит новыми frontend инструментами для веб-дизайнеров и разработчиков. Я подписался на новостную рассылку и подумал, было бы здорово, сделать краткий обзор на мои любимые находки за этот год в одном посте.

Но сначала я должен сказать:

Я не могу поручиться за безопасность этих инструментов.

Я узнал о них в 2015, но это не значит, что инструменты все были разработаны в 2015 (некоторые из них намного старее).

Инструменты не идут в определенном порядке.

Не все из них относятся чисто к front-end, но я буду обсуждать их в данном контексте.

ai2html

Начнем с инструмента, который своим выходом буквально снес крышу множеству людей. Разработчики — New York Times Newsroom Developers, они описывают проект так:

«Скрипт для Adobe Illustrator с открытым исходным кодом для конвертации документов программы в HTML и CSS.»

Написан на языке JavaScript. Добавить в Adobe Illustrator можно, скинув .js файл в папку «Scripts». После установки скрипта, необходимо сделать следующее:

Создать новую иллюстрацию. Изменить размер рабочего холста до размера блока DIV, который будет отображаться на веб-странице. Проверьте, чтобы Document Color Mode был установлен на RGB.

Запустите скрипт, выбрав: File > Scripts > ai2html.

Откройте папку с иллюстрацией, там будет вложенная папка ai2html-output, в которой находятся файлы HTML.

Можно настраивать экспорт форматов изображений, качество PNG и JPEG, адаптивность страницы, количество HTML документов и еще много чего. NYTimes даже создали коллекцию примеров использования данного инструмента их командой и другими.

sloc

Довольно лаконичный инструмент, представляющий собой командную строку для сбора статистики вашего исходного кода. По умолчанию на выходе формируется простой список, но результат можно преобразовать в CSV, JSON или таблицу CLI. После установки через npm необходимо запустить команду:

sloc index.html

Команду выше я запускал для одного из моих проектов с очень большим HTML кодом, результат представлен ниже:

Обратите внимание на описание в типах комментариев. А строка ниже выведет все в JSON:

sloc --format json index.html

Результат:

{
  "files": [
    {
      "path": "index.html",
      "stats": {
        "total": 9788,
        "source": 6340,
        "comment": 645,
        "single": 0,
        "block": 645,
        "mixed": 642,
        "empty": 3445
      },
      "badFile": false
    }
  ],
  "summary": {
    "total": 9788,
    "source": 6340,
    "comment": 645,
    "single": 0,
    "block": 645,
    "mixed": 642,
    "empty": 3445
  }
}

Данный инструмент можно применять модульным принципом через JS в браузере или плагин Grunt.

Walkway

С таким бурным ростом SVG инструментов и ресурсов будет уместно добавить в данный пост что-то и про SVG. Инструмент ниже это «простой способ анимировать SVG». И я с уверенностью говорю, что он и правда очень простой.

На домашней странице проекта есть примеры того, что можно делать с помощью данной библиотеки. Поддерживается анимация элементов path, line и polyline, можно задавать длительность и тип анимации. Я за пару минут смог создать демо на основе публично размещенных SVG рисунков.

Есть и более сложные библиотеки для SVG анимации, но мне нравится простота. Walkway справляется с единственной задачей на пятерку, и его крайне легко использовать.

VisSense.js

Способов использования данной библиотеки множество. В описании сказано:

«Библиотека для исследования DOM на изменения в видимости элементов. Мгновенно сообщает вам, если элемент стал невидимым, видимым наполовину или полностью видимым.»

Особенность библиотеки в том, что она работает с элементами вне поля экрана, библиотека не используется для таких вещей, как display: none и visibility: hidden. Будет полезна в играх и уникальных интерфейсах, основанных на прокрутке страницы.

На страницах с демо есть множество отличных примеров. Ниже я написал кусок кода, чтобы вы поняли, как пользоваться данной библиотекой:

var video = $('#video');
var visibility = VisSense(video[0], { fullyvisible: 0.75 });

var visibility_monitor = visibility.monitor({
  fullyvisible: function() {
    video.play();
  },
  hidden: function() {
    video.stop();
  }
}).start();

В нашем случае мы говорим браузеру запустить видео только в том случае, если оно на 75% видимо на экране, в противном случае видео будет остановлено. В библиотеке есть множество методов, среди которых hidden(), visible(), fullyVisible(), visibilitychange() и percentagechange(). Более подробно изучить методы и другие функции можно в документации.

is.js

Инструмент можно описать, как библиотека микропроверок. У библиотеки отличное API, позволяющее делать различные проверки данных.

Ниже несколько примеров:

is.decimal(41.5); // true
is.number('hello'); // false
is.regexp(/test/); // true
is.usZipCode('90201'); // true
is.socialSecurityNumber('017-90-7890'); // true
is.hexColor('#333'); // true
is.odd(42); // false
is.domNode(el); // зависит от значения el
is.iphone(); // зависит от устройства
is.ipad(); // зависит от устройства 
is.inNextWeek(myDate); // зависит от даты

Это только маленький пример доступных возможностей. Стоит заметить, что в документации описан обширный список проверки «окружения» (тесты браузера, устройства, OSes и т.д.), все тесты можно запустить проверкой строк в юзер агенте. Так что я был бы осторожен с данным инструментом. Библиотека довольно аккуратная, но она может пригодиться в качестве go-to утилиты во множестве проектов.

Grunt SassyClean

Как сказано на официальном сайте Sass, множество Sass разработчиков для модуляции кода используют различные части Sass. К примеру, проект может состоять из _reset.scss, _typography.scss, _mixins.scss и т.д. Все это потом сбрасывается в проект через директиву @import.

Grunt SassyClean – Grunt задача, с помощью которой можно удалять любые неиспользуемые части кода. То есть, эти части могут быть у вас в папках, но по каким-либо причинам вы их не используете в своем проекте. В файле Grunt внутрь grunt.initConfig() необходимо прописать:

sassyclean: {
  options: {
    modules: ['sass/modules/**/*.scss',
              'sass/themes/**/*.scss',
              'sass/layout/**/*.scss',
              'sass/base/**/*.scss'],
    buildfiles: ['sass/**/*.scss'],
    remove: false,
    days: null
  },
}

С помощью опции buildfiles можно выбрать директорию, куда будут импортироваться выбранные части (или не импортируются в зависимости от случая). Папка по умолчанию sass/, но (как показано выше) ее можно изменить. С помощью опции modules можно задать массив директорий расположения файлов. Опция remove говорит Grunt удалять или нет файлы. Если значение false, то файлы не удаляются, имена файлов будут занесены в консоль в качестве логов. И наконец, опция days позволяет удалять файлы, только если они были изменены по определенным дням.

Sass Director

Еще один довольно аскетичный и простой Sass инструмент от Una Kravets, может быть полезен в новых Sass проектах. Как уже говорилось выше, Sass проекты могут состоять из множества отдельных частей. Все файлы могут быть собраны вместе в так называемом манифест файле или главном файле. На основе кода манифест файла Sass Director создает команду, после выполнения которой автоматически создается структура проекта и необходимые файлы.

Если ваш main.scss выглядит так:

@import "vendors/bootstrap";
@import "vendors/jquery-ui";

@import "utils/variables";
@import "utils/functions";
@import "utils/mixins";
@import "utils/placeholders";

@import "base/reset";
@import "base/typography";

@import "layout/navigation";
@import "layout/grid";
@import "layout/header";
@import "layout/footer";
@import "layout/sidebar";
@import "layout/forms";

@import "components/buttons";
@import "components/carousel";
@import "components/cover";
@import "components/dropdown";

@import "pages/home";
@import "pages/contact";

@import "themes/theme";
@import "themes/admin";

То будет сгенерирована следующая команда для терминала:

mkdir vendors;cd vendors;
touch _bootstrap.scss;touch _jquery-ui.scss;
cd ../;mkdir utils;cd utils;
touch _variables.scss;touch _functions.scss;
touch _mixins.scss;touch _placeholders.scss;
cd ../;mkdir base;cd base;touch _reset.scss;touch _typography.scss;
cd ../;mkdir layout;cd layout;touch _navigation.scss;
touch _grid.scss;touch _header.scss;touch _footer.scss;
ouch _sidebar.scss;touch _forms.scss;
cd ../;mkdir components;cd components;touch _buttons.scss;
touch _carousel.scss;touch _cover.scss;touch _dropdown.scss;
cd ../;mkdir pages;cd pages;touch _home.scss;touch _contact.scss;
cd ../;mkdir themes;cd themes;touch _theme.scss;touch _admin.scss;
cd ../;cd ../;

Инструмент доступен онлайн или же можно установить плагин на Sublime.

Awesomplete

Простой в использовании и независимый скрипт автозаполнения от Lea Verou, заменяющий крайне проблематичный элемент datalist.

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

<input class="awesomplete"
       data-list="Cobol, Java, JavaScript, PHP, Python, Ruby" />

В результате получим следующее:

Кроме того, инструмент можно настроить (к примеру), изменив минимальное количество вбитых символов для появления выпадающего списка (по умолчанию 2), изменив максимальное количество отображаемых элементов списка (по умолчанию 10), а также есть возможность добавить опцию автоматического выбора первого отображенного элемента.

Расширить функционал можно, манипулируя фильтрацией, сортировкой элементов и т.д. Также можно использовать встроенные события или методы для пользовательской настройки.

What Does My Site Cost?

Проект от Tim Kadlec подходит с практической точки зрения к проблеме производительности. Производительность крайне важна на мобильных устройствах и в неоптимальных сетях. С помощью этого онлайн инструмента вы сможете:

«Узнать, каково людям пользоваться вашим сайтам через мобильные сети по всему миру.»

Проект работает под управлением WebPagetest. Результат можно получить, запустив новый тест или вставив WebPagetest ID.

JSCS

JSCS расшифровывается как «JavaScript Code Style». Проект не новый, но я наткнулся на него в прошлом году и считаю, что все JavaScript разработчики должны знать о нем.

В описании сказано:

«Инструмент для форматирования стилей кода под программные стили. JSCS можно настроить под свой проект/компанию при помощи 150 правил проверки, среди которых шаблоны от популярных стилевых гидов типа jQuery, Airbnb, Google и т.д.»

Использовать данный инструмент можно через пакеты/плагины (в том числе Grunt, Sublime, Atom, Brackets и т.д.) или же установить через npm и вручную запустить с помощью команды:

jscs file.js --preset=jquery

Команда протестирует ваш код на соблюдение правил форматирования jQuery и составит соответствующие рекомендации. Также моно выбрать и другие шаблоны или опции. Ниже пример результата теста JSCS для одного из моих JS файлов:

Как можно заметить, инструмент довольно мощный. Может, вы захотите подключить его к вашей работе.

Лучшее из того что осталось

csswizardry-grids – разработчик Harry Roberts, а значит, это что-то крутое.

xr – как я уже говорил, я люблю простые инструменты, делающие что-то одно, но хорошо. Это «обертка для XMLHttpRequest».

Bootply – Bootstrap всегда популярен, так что этот редактор стоит того.

ES Feature Tests – «ES6 тест + JS синтаксис и API. Используйте эти встроенные результаты тестов для улучшения кода под каждый браузер. Загружайте ваш родной ES6+ код в ES6+ совместимые браузеры, а транспилированный код в более старые браузеры.»

You Might Not Need jQuery Plugins – Место хранения jQuery-free плагинов и скриптов, которые можно отфильтровать по версии IE.

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

Where is it? – Расширение для Chrome, «облегчающее навигацию по коду на GitHub. Ищите и перепрыгивайте на объявления классов/методов в один клик.»

rucksack – «Делает CSS разработку забавной при помощи функций, которые должны идти прямо из коробки. Разработан по модульному принципу на PostCSS, не раздувает код и очень быстро работает.»

Microm – С его помощью можно конвертировать потоковый звук из микрофона пользователя в аудио файл (MP3, WAV, base64).

SVG Path Builder – Вам придется немного поработать с этим инструментом, чтобы к нему привыкнуть. Однако это действительно отличный инструмент для создания своей SVG графики.

Надеюсь, вам понравился составленный мной список инструментов. Пишите в комментариях, если вы уже пользовались чем-либо из списка. А какая ваша самая любимая находка из инструментов для веб-разработки? Делитесь ответами в комментариях.

Автор: Louis Lazaris

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree