mkhitariani/links

Полезные ссылки

Полезные ссылки для front-end разработчика

##Инструменты ###Редакторы кода

• Sublime Text Пожалуй самый популярный бесплатный редактор кода. Быстрый, минималистичный, есть плагины на все случаи жизни
• Atom Редактор кода, построенный на основе web технологий. Движок на node.js, UI на html/css. К тому же его создала команда github, по этому в нем из коробки очень удобная интеграция с этим сервисом. Есть плагины почти для всего, если чего то нет берем и пишем своими руками. Немного тормознутый, но в целом подходит для работы с небольшими проектами
• Brackets Так же написанный на web стеке редактор от Adobe. Имеет киллер фичу - работа с PSD. Позволяет нарезать макеты из исходников прямо в редакторе. Идеально подходит для верстки макетов, но тупит на больших проектах.
• Webstorm Полноценная IDE для web разработчиков. Автокомплит, поддержка аннотаций, дебаг, работа с системами контроля версий, таскраннерами - в общем все что может понадобиться в работе. Плюсы: лучшая IDE на данный момент. Минусы: тяжелая и не поворотливая, может тупить на слабых машинах и из-за своей навороченности довольно сложная для освоения новичку.

###Редакторы изображений

• Photoshop Этот инструмент знаком всем от фотографов, до верстальщиков. De facto лидер среди инструментов для создания дизайна сайтов в современном вебе. Изначально этот инструмент не имеет ничего общего с дизайном UI и был создан для обработки фотографий (Photoshop все таки), но за неименеем альтернативы для создания сайтов использовали его. Сейчас дизайнеры используют его скорее по привычке (или по каким то мне не ясным причинам) и его главенство постепенно переходит на более приспособленные под эту задачу. Дорого, сложно, неудобно.
• Sketch На мой взгляд самый лучший редактор для создания UI. Векторный, прост в освоении, есть множество инструментов для импорта из макета сразу же в CSS или svg и еще очень много крутых фич. Но есть существенные недостатки, не позволяющие ему стать №1 - работает только под mac и не может открыть PSD.
• Avocode Что-то весьма не популярное и сырое, но подающее надежды. Редактор создан для простой работы с web дизайном. Если кто-то знает больше про это чудо прошу дополнить

#Полезные сайты ###Обучение ####RU

• htmlacademy Неплохие курсы для быстрого старта в верстке. Пройдя их можно получить начальные знания и представляния как, собственно, пишется код. К сожалению без теории толку от этих курсов будет очень мало.
• htmlbook.ru Отличный справочный сайт по HTML/CSS. На нем есть все, что необходимо знать верстальщику. Содержит как справку по всем стилям и тегам, так и статьи и руководства по верстке. Обязателен к изучению.
• WebReference Обновлённый и более удобный htmlbook.ru c распределенными по уровням сложности туториалами.
• javascript.ru Лучшый рускоязычный онлайн учебник по JavaScript. Там есть все. От переменных, до возможных видов атак на сайт через JavaScript. Обязателен к изучению!
• css-live.ru Сайт посвященный html/css. Там можно найти множество интересных решений и полезных статей. Сайт существует уже довольно давно, так что накопилось много полезного материала.
• frontender.info Web жернал про web разработку. Много интересных статей. Так же там есть возможность выбрать статью из "Кучи" и перевести для публикации в журнале. Статей для совсем зеленых разработчиков не много, но есть множество полезного материала по новым фичам HTML5.
• habrahabr.ru Самый главный IT портал в русском сигменте сети. О нем все слышали, о нем все знают. Но на всякий случай оставлю его тут.
• Подборка материалов по JS Список материалов для изучения Javascript
• CodenameCRUD Частичный перевод The Odin Project. С нуля до Full Stack разработчика.

####EN

• Codecademy Курсы на самые разные темы. Хорошая подача, удобная реализация, есть множество интересных курсов (angular, node.js). Но большая часть интересных курсов платные.
• The Odin Project Бесплатное (само)обучение веб-разработке с нуля до Full Stack разработчика.
• reddit Большое сообщенство разработчиков со всего мира. Часто попадаются интересные посты.
• FreeCodeCamp Сайт на котором можно обучиться HTML, CSS, JavaScript, а также различным JavaScript фреймворкам, и применить свои знания разрабатывая сайты для некомерческих организаций. Создатели подразумевают, что пройдя всё обучения Вы станете Full-Stack Web Developer'ами.

###Для вдохновения

• codepen.io Набор потрясающих демок. Можно подглядеть интересные реализации или поделиться своей задумкой. Сделан по принципу соц сети: можно лайкать чужие демки, собирать демо в коллекции (и юзать в дальнейшем на своих проектах), писать посты и т.д.
• Awwwards Тут можно лицезреть потрясающие с точки зрения дизайна сайты, набираться вдохновения и завидовать мастерству дизайнеров. А так же взять себе пару идей и посмотреть как верстают/кодят более опытные коллеги.
• Dribbble На этом сайте дизайнеры делятся своими наработками. Говорят, что для развития вкуса нужно изучать хорошие работы других людей, так что на этом сайте можно позалипать пол часа в поисках вдохновения.

###Полезные online инструменты

• Google Fonts Библиотека бесплатных шрифтов, которые можно спокойно юзать на своем сайте. Удобные фильтры по типам шрифтов и простое подключение в проект.
• WebFont.ru Большая и пополняемая коллекция бесплатных шрифтов с поддержкой кириллицы и не только.
• placehold.it Заглушка для изображений в верстке. Очень удобно использовать, что бы не вырезать картинки из макета. Можно подобрать цвет фона, текста, размеры.
• json-generator.com Json генератор (вау). Довольно гибкий инструмент, удобен в использовании.
• Glyphter Позволяет создать свой иконочный шрифт толкьо с теми иконками, которые необходимы.
• Can I Use Проверка CSS свойств, HTML5 и JS на возможность их поддержки в различных браузерах

###Списки

• htmllinks.ru Полезные ссылки для web разработчика
• stackshare.io Список популярных сервисов с их стеком технологий
• webfieldmanual.com Очень хороший список ресурсов для дизайнера и разработчика. Разбиты на категориям.

###Подкасты, каналы на youtube e.t.c.

• radioJS Интеренсный подксат для front-end разработчиков.

#TODO: То, что надо добавить в ссылки

• Opensource проекты, в кторых можно принять участие
• Ссылки на интересные видео уроки
• Конференции, сообщества, чаты для разработчиков