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

В этой подборке мы собрали для вас коллекцию самых необходимых инструментов и ресурсов, с помощью которых вы узнаете, как делать все быстрее и быть продуктивнее. Если мы пропустили что-то очень важное, без чего веб-разработчик жить не может, делитесь этим в комментариях. 

Дизайн

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

Subtle Patterns

Удивительный ресурс для поиска высококачественных текстурированных узоров. Многие известные дизайнеры внесли свой вклад в создание этой коллекции. Да, и поиск по сайту также весьма забавен.

subtlepatterns

Blokk Font

Blokk — это специальный шрифт для демонстрационных макетов, он является отличной альтернативой Lorem Ipsum. Он может пригодиться в том случае, если шрифт на макете будет выглядеть не очень красиво.

blokk

Freepik

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

rsz_5freepik

Awesome Images

Бесценная коллекция фотоматериалов. В ней более 20 ресурсов — все они бесплатны и с понятными лицензиями.

rsz_image_list

Google Fonts

Многие, наверное, уже знают об этом ресурсе, но мы не могли пропустить его. Это библиотека шрифтов Google, которая на сегодняшний день является лучшим местом для поиска web-friendly шрифтов.

freeres_google2-e1410189644103

By People

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

bypeople-e1410189620518

Snipplr

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

snippet

HailPixel

Интересная в использовании палитра цветов. Она интересным способом обрабатывает выбранный цветовой тон, яркость и насыщенность цвета.

colorpicker

Lokes HD Hakar

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

palette

Dribbble

Dribbble — это сообщество веб-дизайнеров, графических дизайнеров, иллюстраторов, дизайнеров иконок, логотипов и других творческих людей, которые делятся своими небольшими скриншотами, показывают свои работы. Великолепное место, чтобы исследовать новые дизайнерские идеи.

rsz_dribble

Bootstrap

Фронтэнд-фреймворк для создания отзывчивых веб-сайтов. Ваши сайты хорошо выглядят как на маленьких, так и на огромных экранах благодаря хорошо проработанной сеточной системе. Есть много дополнительных ресурсов и плагинов.

rsz_5ab08d737caa88149e3a3598b20938f6-e1410194771179

Patternizer

Это приложение позволяет создавать простые в использовании узоры. Их можно сохранить и выложить в общий доступ.

rsz_1patternizer

Project Parfait

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

adobe


Кодинг

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

Emmet

Emmet — это плагин для многих популярных текстовых редакторов, который значительно повышает удобство написания HTML-кода.

emmet

JavaScript Beautifier

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

beautify

CodePen

CodePen стал платформой для демонстрации впечатляющих CSS3- и JS-демок. Если вы ищете вдохновение (или просто классные кнопки), посетите CodePen.

codepen

W3 Validator

Validator представляет собой бесплатный сервис от W3C, который помогает проверить правильность веб-документов. Он может обрабатывать документы, написанные на большинстве языков разметки, и дать вам представление о том, что может быть не так с кодом.  При поиске ошибок в коде вы в первую очередь должны воспользоваться данным инструментом.

validator-1024x401

MinCSS

MinCSS — это инструмент, который по заданному URL загружает страницу и её CSS и выясняет, какие из селекторов не используются. Результатом работы является оптимизированная копия оригинала CSS.

cssclear

Koala App

Замечательное кросс-платформенное приложение, которое автоматически компилирует Less/SASS-файлы.

koala_app

JSFiddle

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

rsz_jsfiddle-1024x458

Hurl

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

hurl

SublimeText

Sublime Text представляет собой мощный текстовый редактор, который предоставляет огромные возможности для работы с кодом. В последнее время он набирает популярность, но не стоит забывать и об Atom и Brackets. Разумеется, нельзя не упомянуть легендарные VIM и Emacs.

sublime

Cloud9

Cloud9 является облачной средой разработки, дающей доступ к терминалу вашей собственной Ubuntu VM, а также к другим мощным функциям. В качестве альтернативы можно рассматривать Nitrous.ioCodio и Code Anywhere.

rsz_c9

Heroku

Heroku стал первым крупным игроком во время взрыва популярности PaaS (Platform-as-a-Service). До этого приходилось полагаться на дешевых и ненадёжных хостинг-провайдеров (или создавать собственные сервера).

heroku

Vagrant

Vagrant является инструментом для построения полных сред разработки. Vagrant сокращает время разработки и установки среды. Существует еще один популярный способ для запуска виртуальных машин с другими операционными системами на компьютере — это VirtualBox.

vagrant

По материалам «50 Awesome Tools and Resources for Web Developers»