Написать пост

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

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

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

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

Дизайн

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

Subtle Patterns

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

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

Blokk Font

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

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

Freepik

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

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

Awesome Images

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

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

Google Fonts

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

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

By People

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

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

Snipplr

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

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

HailPixel

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

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

Lokes HD Hakar

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

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

Dribbble

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

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

Bootstrap

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

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

Patternizer

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

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

Project Parfait

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

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

Кодинг

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

Emmet

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

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

JavaScript Beautifier

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

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

CodePen

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

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

W3 Validator

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

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

MinCSS

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

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

Clean CSS

Clean CSS  — это набор инструментов для форматирования и оптимизации кода, причём написанного не только на CSS.

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

CSSTidy

CSS Tidy — это оптимизатор и парсер CSS-кода, доступный для Windows, Linux и macOS.  Управлять им можно как из командной строки, так и через PHP-скрипт.

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

Koala App

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

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

JSFiddle

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

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

Hurl

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

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

SublimeText

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

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

Cloud9

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

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

Heroku

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

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

Vagrant

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

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