Frontend інструменти розробника: деякі з моїх улюблених за 2015 рік

16

Від автора: 2015 рік закінчився, і всі погодяться, що він під зав’язку набитий новими frontend інструментами для веб-дизайнерів і розробників. Я підписався на розсилку і подумав, що було б здорово, зробити короткий огляд на мої улюблені знахідки за цей рік в одному пості.

Але спочатку я повинен сказати:

Я не можу поручитись за безпеку цих інструментів.

Я дізнався про них у 2015, але це не означає, що всі інструменти були розроблені в 2015 (деякі з них набагато старіше).

Інструменти не йдуть в певному порядку.

Не всі з них належать суто до front-end, але я буду обговорювати їх в даному контексті.

ai2html

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

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

Frontend інструменти розробника: деякі з моїх улюблених за 2015 рік

Написаний на мові 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 кодом, результат представлений нижче:

Frontend інструменти розробника: деякі з моїх улюблених за 2015 рік

Зверніть увагу на опис в типах коментарів. А рядок нижче виведе всі в 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». І я з упевненістю кажу, що він і правда дуже простий.

Frontend інструменти розробника: деякі з моїх улюблених за 2015 рік

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

Є й більш складні бібліотеки для SVG анімації, але мені подобається простота. Walkway справляється з єдиним завданням на п’ятірку, і його дуже легко використовувати.

VisSense.js

Способів використання даної бібліотеки безліч. В описі сказано:

«Бібліотека для дослідження DOM на зміни у видимості елементів. Миттєво повідомляє вам, якщо елемент став невидимим, видимим наполовину або повністю видимим.»

Frontend інструменти розробника: деякі з моїх улюблених за 2015 рік

Особливість бібліотеки в тому, що вона працює з елементами поза поля екрану, бібліотека не використовується для таких речей, як 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, що дозволяє робити різні перевірки даних.

Frontend інструменти розробника: деякі з моїх улюблених за 2015 рік

Нижче кілька прикладів:

is.decimal(41.5); // true
is.number(‘hello’); // false
is.regexp(/test/); // true
is.usZipCode(‘90201’); // true
is.socialsecurity number(‘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.

Frontend інструменти розробника: деякі з моїх улюблених за 2015 рік

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 створює команду, після виконання якої автоматично створюється структура проекту і необхідні файли.

Frontend інструменти розробника: деякі з моїх улюблених за 2015 рік

Якщо ваш 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.

Frontend інструменти розробника: деякі з моїх улюблених за 2015 рік

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

В результаті отримаємо наступне:

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

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

What Does My Site Cost?

Проект від Tim Kadlec підходить з практичної точки зору до проблеми продуктивності. Продуктивність вкрай важлива на мобільних пристроях і в неоптимальних мережах. За допомогою цього онлайн інструменту ви зможете:

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

Frontend інструменти розробника: деякі з моїх улюблених за 2015 рік

Проект працює під управлінням WebPagetest. Результат можна отримати, запустивши новий тест або вставивши WebPagetest ID.

JSCS

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

Frontend інструменти розробника: деякі з моїх улюблених за 2015 рік

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

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

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

jscs file.js —preset=jquery

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

Frontend інструменти розробника: деякі з моїх улюблених за 2015 рік

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

Найкраще з того що залишилося

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. Шукайте і перестрибуйте на оголошення класів/методів в один клік.»

рюкзаку – «Робить CSS розробку забавною за допомогою функцій, які повинні йти прямо з коробки. Розроблений за модульним принципом на PostCSS, не роздуває код і дуже швидко працює.»

Microm – З його допомогою можна конвертувати потоковий звук з мікрофону користувача аудіо файлів (MP3, WAV, base64).

SVG Path Builder – Вам доведеться трохи попрацювати з цим інструментом, щоб до нього звикнути. Однак це дійсно відмінний інструмент для створення своєї SVG-графіки.

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