Підбірка інструментів і ресурсів для веб-розробників. Частина перша. Дизайн, кодинг

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

Дизайн

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

Subtle Patterns

Дивовижний ресурс для пошуку високоякісних текстурованих візерунків. Багато відомих дизайнерів внесли свій вклад у створення цієї колекції. Пошук по сайту також дуже забавний.

Blokk Font

Blokk – це спеціальний шрифт для демонстраційних макетів, він є альтернативою Lorem Ipsum. Згодитися у тому випадку, якщо шрифт на макеті виглядатиме не дуже красиво.

Freepik

Freepik пропонує колосальну колекцію векторних зображень, ілюстрацій, SVG- і PSD-файлів і стокових фотографій. Увесь матеріал абсолютно безкоштовний. Все розбито на акуратні категорії, так що у Вас не виникне жодних проблем з пошуком того, що Ви шукаєте. Хоча, можливо, вибрати буде складно, оскільки в колекції представлено понад 1,4 млн файлів.

Awesome Images

Безцінна колекція фотоматеріалів. У ній більше як 20 ресурсів – усі вони безкоштовні і зі зрозумілими ліцензіями.

Google Fonts

Багато з Вас, напевно, вже знають про цей ресурс, але ми не могли пропустити його. Це бібліотека шрифтів Google, яка на сьогодні є кращим місцем для пошуку web-friendly шрифтів.

By People

By People – це мережа корисних, постійно оновлюваних ресурсів. By People збирає красиві, чисті й оновлені графічні елементи, фрагменти коду і корисні ресурси, збираючи все це в списки, які можна скачати безпосередньо із сайту.

Snipplr

Snipplr пропонує своїм користувачам можливість завантажувати фрагменти корисного коду і ділитися ними з іншими. Є тисячі фрагментів на JavaScript, PHP, CSS, Ruby та інших мовах.

HailPixel

Цікава у використанні палітра кольорів. Вона у незвичний спосіб обробляє вибраний колірний тон, яскравість і насиченість кольору.

Lokes HD Hakar

Дивовижний онлайн-сервіс із блискучою ідеєю: Color Thief дозволяє завантажити зображення і отримати колірну палітру для нього, а також упізнати його домінуючий колір. Дуже корисний для прийняття дизайнерських рішень.

Dribbble

Dribbble – це співтовариство веб-дизайнерів, графічних дизайнерів, ілюстраторів, дизайнерів іконок, логотипів та інших творчих людей, які діляться своїми невеликими скриншотами, показують свої роботи. Чудове місце, щоб досліджувати нові дизайнерські ідеї.

Bootstrap

Фронтенд-фреймворк для створення чутливих веб-сайтів. Ваші сайти приємні на вигляд як на маленьких, так і на великих екранах завдяки сітковій системі, що якісно пропрацювала. Є багато додаткових ресурсів і плагінів.

Patternizer

Цей додаток дозволяє створювати прості у використанні візерунки. Їх можна зберегти і викласти в загальний доступ.

Project Parfait

Project Parfait є продуктом Adobe і дає нам можливість отримати важливу інформацію про PSD прямо у браузері. Проте, він не підтримує редагування PSD (принаймні, поки що).

---

Кодинг

Перевірені інструменти і ресурси для написання коду.

Emmet

Emmet – це плагін для багатьох популярних текстових редакторів, який значно підвищує зручність написання HTML-коду.

JavaScript Beautifier

Це інструмент, який зробить частину Вашого JavaScript- або HTML-коду більше читабельним і продуктивним. Також варто звернути увагу на  JSON-редактор.

CodePen

CodePen став платформою для демонстрації вражаючих CSS3- і JS-демо. Якщо Ви шукаєте натхнення (чи просто гарні кнопки), відвідайте CodePen.

W3 Validator

Validator – безкоштовний сервіс від W3C, який допомагає перевірити правильність веб-документів. Він може обробляти документи, написані на більшості мов розмітки, і дати Вам уявлення про те, що може бути не так з кодом. При пошуку помилок в коді Ви передусім маєте скористатися цим інструментом.

MinCSS

MinCSS – це інструмент, який по заданому URL завантажує сторінку та її CSS і з’ясовує, які із селекторів не використовуються. Результатом роботи є оптимізована копія оригінала CSS.

Clean CSS

Clean CSS – це набір інструментів для форматування і оптимізації коду, причому написаного не лише на CSS.

CSSTidy

CSS Tidy – це оптимізатор і парсер CSS-коду, доступний для Windows, Linux і macOS. Управляти ним можна як з командного рядка, так і через PHP-скрипт.

Koala App

Кросплатформенний додаток, який автоматично компілює Less/SASS-файли.

JSFiddle

JSFiddle – це дивовижне місце для написання і поширення коду. Сайт надає панелі для написання CSS-, HTML – і JS-коду Вашого проекту. JSFiddle також дозволяє підключати бібліотеки, такі як JQuery, AngularJS і т. ін. Після цього Ви можете запустити код в самому додатку або зберегти його і поділитися з іншими.

Hurl

Це інструмент для тестування API. Ви можете вибрати метод запиту, налаштувати заголовки і POST- параметри, додати звичайну або OAuth авторизацію облікових даних.

SublimeText

Sublime Text – потужний текстовий редактор, який надає великі можливості для роботи з кодом. Останнім часом він набуває популярності, але не варто забувати про Atom і Brackets. Зрозуміло, не можна не згадати легендарні VIM і Emacs.

Cloud9

Cloud9 є хмарним середовищем розробки, що дає доступ до терміналу Вашій Ubuntu VM, а також до інших потужних функцій. Як альтернативу можна розглядати Nitrous.io, Codio і Code Anywhere.

Heroku

Heroku став першим великим гравцем під час вибуху популярності PaaS (Platform-as-a-Service). До цього доводилося покладатися на дешевих і ненадійних хостинг-провайдерів (чи створювати власні сервери).

Vagrant

Vagrant є інструментом для побудови повних середовищ розробки. Vagrant скорочує час розробки і установки середовища. Є ще один популярний спосіб для запуску віртуальних машин з іншими операційними системами на комп’ютері – це VirtualBox.

За матеріалами “50 Awesome Tools and Resources for Web Developers”