Корисні інструменти для веб-розробника

1. Pesticide

pesticide.io

Невеличкий chrome-плагін для налагодження макетів та стилю. Допомагає знайти проблемні місця верстки, підсвічуючи контури елементів різними кольорами. Виконує ту саму функцію, що й вбудовані в браузер інструменти розробника(F12), але дає загальну картину макета без зайвих рухів мишею.

Творець плагіна - Adam Morse. Цей дизайнер із Лондона, вже відомий нам по css фреймворку Tachyons, називав його лише допоміжним продуктом. Перемикати пестициди виявилося для нього набагато швидше, ніж користуватися стандартним інструментом.

Як на мене, це дійсно зручна річ.

2. Whatfont tool

www.chengyinliu.com/whatfont

Дуже простий спосіб перевірити шрифти на веб-сторінках. Наводиш курсор - отримуєш назву. Підтримує Typekit і Google Font API. Розробник цього дива Chengyin Liu.

Питання вибору шрифтів для мене - головне. Намагаюся використовувати системні шрифти. Це прискорює сайт і допомагає влитися в операційну систему читача, дозволяючи зосередитися на контенті. Коли шрифти знайомі, ніщо не відволікає від читання.

В інших випадках на допомогу приходить Whatfont.

3. ColorHunt

colorhunt.co

Побічний продукт ще від одного дизайнера на ім'я Gal Shir. Спершу він придумав просту сторінку на якій розмістив з десяток основних палітр. Потім зробив Colorhunt загальнодоступним. Користувачі щодня додають нові палітри й поширюють їх в соцмережах.

Стане у пригоді тим, кому потрібні свіжі, незаїжджені кольорові поєднання.

4. Web Developer Checklist

webdevchecklist.com

Розробники цього додатку Sayed Ibrahim Hashimi і Mads Kristensen зібрали до купи всі потрібні тести. Запускаючи проєкт на продакшен, легко розгубити важливі дрібнички. Перевірити биті посилання, валідність верстки, коректність використання поля в формах, заповненість Open Graph і метаданих.

Деякі специфічні речі на думку не спаде потестить. Взяти хоч онлайн-перевірку кольорових контрастів. Виявляється буває й таке.

5. BuiltWith Technology Profiler

builtwith-technology

Засновник проєкту Gary Brewer. Мета BuiltWith - допомогти веб-розробникам, дослідникам та дизайнерам відстежувати, які технології використовуються іншими веб-сайтами. Щоб визначитися, яку бібліотеку, фреймворк чи технологію використовувати для себе.

BuiltWith розповість про хостинг та веб-сервер, на якому працює сайт. Якщо підключені js-бібліотеки та сервіси збору статистики, то вам про це неодмінно повідомлять. Яку розсилку використовують на сайті? Яким онлайн-чатом користуються? Які вордпресс плагіни підключені? Яка врешті-решт версія PHP встановлена?

Про все це та інше ви дізнаєтеся з цього додатка.

6. YMNNJ

youmightnotneedjquery.com

Це скорочений варіант фрази You might not need jQuery. Творці Zack Bloom і Adam Schwartz пропонують не прикручувати jQuery геть до всього. Можливо, якщо орієнтуєтеся лише на сучасні браузери (після IE8), то вони самостійно впораються з ванільним яваскриптом. Тим більше, що від jQuery зазвичай потрібно пара простих функцій.

Навіщо тягнути цю залежність в проєкт? Поміркуйте, може у вашому конкретному випадку jQuery й не потрібен зовсім? Принаймні, переконайтеся, що розумієте для чого підключаєте цю популярну бібліотеку.

Коментарів:

Коментарі неавторизованих користувачів перед публікацією проходять премодерацію