Как стать веб-программистом с нуля


Front-end разработчик делится своим опытом.

Сперва разрешите представиться: Сергей Гарсия (Sergei Garcia). Работаю на полную ставку front end — разработчиком, 2 года опыта. За это время работал как в консалтинговой фирме из списка Forbes 500, так и в небольшой компании.

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

Никогда не писал о своем опыте, несмотря на помощь, которую получил от замечательных ресурсов, таких как Medium, Stack Overflow и Reddit. Сегодня решил изменить это и рассказать, что ладилось, а что нет. Так что если отправитесь в это путешествие, вам повезет больше, чем мне.

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

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

Итак, без дальнейших церемоний, начинаем!

Изучаем основы

Решив заняться веб-разработкой, я задался первым вопросом: «Что изучать?». После ряда поисков, я наметил учебный путь, основываясь на требованиях к большинству веб-разработчиков начального уровня:

  • JavaScript
  • HTML&CSS
  • CSS Preprocessors (Less&Sass)
  • Отзывчивый дизайн
  • AngularJS
  • Шаблоны проектирования
  • Git
  • NodeJS
  • Средства запуска задач

Как это происходило.

Javascript

Я начал изучать JavaScript на CodeSchool.com (платно) и Codecademy.com (бесплатно). Если не знаете об этих сайтах, они отличные, научать писать код внутри браузера.

Я понял, что эти учебные ресурсы лучше для новичков. Имейте в виду, этот метод обучения быстро утомляет, когда переходите к более сложным вещам. Их алгоритмы проверки правильности решения примера кода имеют проблемы с точностью. Оба вводных курса по JavaScript отличные. Настоятельно рекомендую их.

Разобравшись с основами, приступил к получению более крепкого фундамента по JavaScript, прочитав книгу «Выразительный Javascript: Современное введение в программирование» (Eloquent Javascript: A Modern Introduction to Programming ), Хавербек.

Книгу рекомендовали многие пользователи с форумов по JavaScript, как обязательную к прочтению. Не зря. Книги трудная — особенно если только приступаешь к изучению, как я тогда. Рад, что не сдался. Ее феномен в огромном объем охватывающих программных концепции. Несмотря на ее беспощадность временами. Независимо от того, что вы делаете, не пропустите упражнения. После прочтения, сможете уверенно сказать о хорошем понимании JavaScript.

При желании можете изучать jQuery (хотя я не рекомендую ее, подробности позже). Вы можете изучить ее на CodeSchool, курс Try jQuery.

HTML & CSS

Изучив JavaScript, начал изучать основы HTML и CSS и веб-дизайна на курсе HTML & CSS, CodeSchool. Эти курсы любимы мною по сей день, дают прочную основу.

Аналогичный курс HTML & CSS можете пройти на Codecademy, получите похожие результаты. Если готовы к вызову переходите к курсу от Udacity Intro to HTML and CSS. Он труднее.

Бонус: Достаньте книгу Джона Дакетта (Jon Duckett) HTML and CSS: Design and Build Websites (HTML и CSS: Разработка и дизайн веб-сайтов) — прочная отправная точка для изучения HTML и CSS. Высоко оценена на Amazon (4.7 / 5). Основательное введение в мир веб-разработки. Красивая книга, чистый дизайн, большие буквы, красочные страницы. Часто возвращаюсь к ней. Восхищает.

Less/Sass

Для тех, кто незнаком, Less&Sass — это транспиляторы CSS. Позволяют писать CSS элегантнее. Позволяют делать вещи, которые обычно не поддерживаются, например правила вложения CSS. Эти транcпиляторы «компилируют» код и преобразуют его в обычный CSS.

В настоящее время есть 2 основных транспилятора CSS: Less and Sass. Sass популярнее. Я понял, что сначала легче изучить Less. Потому, что Sass требует установки Ruby, от которого я не был в восторге.

Быстрый и полный обзор Less, примеры кода — winless.org/online-less-compiler. Попробуйте Sass онлайн на sassmeister.com (не включает примеры кода).

Неважно, что будете изучать Less или Sass. Они очень похожи. Если изучите одну, значит будете знать и другую. Отличное сравнение Less and Sass — Comparison between LESS&SASS.

Отзывчивый дизайн

Об отзывчивом дизайне и Bootstrap я узнал из курса Codeschool — HTML & CSS path. Недавно, нашел курс на Udacity от Google Responsive Web Design Fundamentals (Основы отзывчивого web-дизайна). Потрясающе освещает основы и не только. Обширнее, чем Codeschool.

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

AngularJS

Когда я только начинал, то понятия не имел, что такое AngularJS. Многие говорили: если хочешь стать разработчиком изучи его.

Сначала решил изучать AngularJS по официальной документации, но это оказалось ужасной идеей. Документация оказалась не простой для новичков, а загроможденное форматирование затрудняло чтение и понимание.

Потом стал изучать AngularJS на Codeschool. Получив положительный опыт от курсов по JavaScript и CSS, ожидал того же. Но ошибся. Курс был катастрофой. Алгоритм проверки правильности кода примера, иногда работал не правильно и отмечал правильное решение как неправильное.

Справиться с этим иногда помогало обновление страницы. Содержание курса тоже не очень. Хорошо объяснились основные компоненты приложения AngularJS, но объяснение интеграции в реальное приложение ужасно. После прохождения курса появилось больше вопросов, чем до.

Поискав на форумах я наткнулся на Egghead.io (бесплатный/платный), там повезло больше. Материал курса был яснее, короче и полнее. Помимо курсов предлагались 2-5 минутные уроки, охватывающие важные темы. (Например: что такое контроллер? Что такое фильтр? Что такое $scope? Все это упростило понимание основ.

Есть платные видеоролики. Охватывающие более сложные темы. Я прошел курс AngularJS Fundamentals и полностью был доволен результатами (стал большим поклонником курсов Egghead.io).

Шаблоны проектирования

Шаблоны проектирования – это многоразовые программные решения, которые можно многократно использовать для решения общих проблем программного обеспечения. Зная основы вы будете более конкурентоспособным разработчиком программного обеспечения на любом языке программирования. Облегчают понимание кода других. Вы быстро определите, какой шаблон проектирования они использовали в своем коде.

Нашел 2 отличных источника по шаблонам проектирования JavaScript. DoFactory — JavaScript Design Patterns и Addy Osmani — Learning JavaScript Design Patterns. doFactory намного легче понять, но книга Addy Osmani более полная.

Chrome DevTools

Один из самых мощных инструментов для веб-разработчиков. Чем раньше овладеете им, тем больше времени сэкономите позже. Бесплатный курс от Codeschool Explore and Master Chrome DevTools  отлично рассказывает о его применении.

Git (контроль версий)

Ах, Git — инструмент, о котором не знал пока не открыл его возможности. Git отслеживает изменения, внесенные вами в ваш код. Если что-то пойдет не так сможете вернуться к предыдущему моменту. Также позволяет просматривать историю кода.

Я нашел бесплатный курс Try Github на CodeSchool. Atlassian’s Git training превосходно освещает доступные команды. Codeschool’s Git Learning Path также отлично подходит для изучения основ Git.

NodeJS

Не потребовалось много времени, чтобы понять, что базовое понимание NodeJS поможет в моих поисках стать веб-разработчиком (подробнее об этом скоро).

Попробовал курсы по Node на Codeschool, но понял, что им не хватает контента. NodeSchool.io намного лучший преподаватель основ, и нескучный! Мне понравился практический подход, схожий с Codeschool и Codecademy, но с дополнительным улучшением.

Средства запуска задач (Grunt & Gulp)

Grunt и Gulp стали большим сюрпризом, потому что я не знал о таких инструментах, но меня обрадовали их возможности! В основном они позволяют автоматизировать общие задачи. Помните Less/Sass?

Обычно необходимо вручную запускать компилятор CSS каждый раз редактируя его для компиляции CSS, а потом обновлять браузер. Средства запуска задач можно настроить для просмотра изменений файлов Less / Sass. Когда они обнаруживают изменения, то компилируют ваш CSS и автоматически обновляют браузер. Очень полезные, сокращают время разработки.

Есть 2 главных: Grunt and Gulp. Несмотря на идентичность, работают по-разному.

Знания NodeJS помогут лучше писать файлы Grunt и Gulp, поскольку оба работают на NodeJS. Выбирайте какой хотите, но я понял, что Gulp намного легче. По-прежнему предпочитаю его из-за минималистского подхода.

Я нашел курсы по Grunt и Gulp на Scotch.io. Они лучшее.

Трудности, с которыми я столкнулся на первой работе

Изучив основы веб-разработки, я был готов к первому собеседованию на позицию начального уровня. Не буду вдаваться в подробности собеседования, так как статья не об этом. Отмечу лишь одно: мне сказали, что у меня прочные знания по JavaScript. (Спасибо, книге «Выразительный JavaScript!»)

Должен сказать, я очень нервничал в своем первом проекте. Требовалось создавать многоразовые веб-компоненты используя HTML, CSS, JavaScript, а также Bootstrap, Sass, Grunt.

Две главные ошибки:

  • Страх неудачи. Поскольку я был новичком, я постоянно опасался, что мой код ошибочен или плохо написан, поэтому тратил много времени на двойную проверку и придерживался лучших правил написания кода. Из-за этого редко пытался принимать новые решения опасаясь, их ошибочности. Это эффективно закрыло мое стремление к познанию новые вещи.
  • Делать так, потому что некий «X», знает лучше меня. Сначала я так и поступал. Хотя это и не совсем неправильно, делать что-то определенным образом только потому, что так сказал эксперт «X» по этому вопросу. Не зная почему так– привило меня к тому, что я реально не знал как все работает. Вскоре я понял, везде есть исключения. Всегда нужно знать причину, стоящую за практиками.

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

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

Применение AngularJS в реальном проекте также оказалось для меня большой проблемой. Главным образом потому, что я не понимал как работает многое из того, что я делал. Я считал это «магией Angular».

Много раз я сожалел, что не знал как действительно работает Angular, но было страшно заглядывать в документацию.

В итоге наткнулся на потрясающую книгу под названием Build Your Own AngularJS. Всю не прочитал. Прочитав раздел о работе Scopes and Watchers, и реально открыл, что магия angular, в действительности не магия. А лишь разумный способ поддержания привязки данных, используя проверку данных на изменение. Настоятельно рекомендую книгу всем, кто хочет вникнуть в AngularJS.

Другая проблема, с которой я столкнулся год спустя — быстрое развитие индустрии. Только освоил AngularJS и Grunt, чувствовал себя гордым и могущественным. Вскоре выяснилось, что на горизонте Gulp и ReactJS. Год спустя начал набирать обороты Webpack. Нужно было учить его. Как вы поняли, больше всего меня разочаровало быстрое устаревание моих знаний. Но вскоре один мой коллега просветил меня, сказав то, что изменило мое виденье библиотек и фрейворков навсегда:

Библиотеки и фреймворки могут устареть, но предлагаемые ими концепции и решения выдерживают испытание временем.

Он был прав. AngularJS, возможно, устарел, но понимание магии, стоящей за ним помогло лучше понять архитектуру веб-компонентов React, которая улучшилась в соответствии с Angular’s Directives. Он также помог мне понять, как ReactJS приобрел столь большую популярность, а также его будущее.

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

Еще одна вещь, которая мне очень помогла — понимание того, чему не научился Это было важно в процессе становления лучшим веб-разработчиком.

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

Отличная идея, сделать простое hello world приложение для определения возможности платформы. Потом двигаться дальше. Но лучше сосредоточиться на потребностях вашего проекта. Сначала, это покажется тяжело, но, к счастью, существуют такие отличные ресурсы, как Stack Overflow, Medium и Reddit. Там найдете полезные обсуждения фреймворков и выясните, какой подойдет для конкретного случая.

Идем дальше

JavaScript

Прочитав “Выразительный Javascript: Современное введение в программирование“, легко сказать и почувствовать, что вы освоили JavaScript, но затем наталкиваетесь You Don’t Know JS(Вы не знаете JS) и это полностью подавляет вас (по крайней мере меня). Эта серия книг (бесплатная кстати), о которой на работе неоднократно упоминали senior-разработчики . И пока я не прочитал ее, не мог сказать, что знаю JavaScript.

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

Чтение этой серии открыло мне глаза. Я настоятельно рекомендую ее всем, кто хочет назвать себя экспертом в разработке на JavaScript.

The Two Pillars of JavaScript: добротная статья известного автора Medium Эрика Эллиотта, в которой рассказывается о двух великих столпах JavaScript: прототипном наследование и функциональном программировании.

После глубокого понимания JavaScript, перейдите к ECMASCript 2015 (известному как ES6), текущему стандарту JavaScript. Можно попробовать ES6 в браузере, используя онлайн-транспилер Babel.

CSS

CSS может стать беспорядочным и дезорганизованным очень, очень быстро. Предложено несколько разных методологий для написания более чистого CSS, но выделяются 2, которые я настоятельно рекомендую вам прочитать о ASAP для конкурентоспособности:

  • SMACSS: Масштабируемая и модульная архитектура для CSS. Гибкое руководство по разработке малых и больших сайтов.
  • BEM: методология, которая поможет добиться использования компонентов многоразового использования и совместного использования кода во front-end.

Лично я предпочитаю SMACSS из-за его более чистого внешнего вида, но некоторые компании и CSS Frameworks все еще используют BEM, поэтому стоит знать оба.

JavaScript Bundlers

К настоящему времени у вас должно сложиться глубокое понимание Grunt или Gulp. Следующий шаг — добавление JavaScript bundler в ваш диспетчер запуска задач. Для модульной организации приложения JavaScript.

Есть два крупнейших игрока:

  • Browserify: позволяет устанавливать модули в браузере, объединяя все ваши зависимости.
  • Webpack: в основном Browserify на стероидах. Сложнее настроить и развернуть.

Мини-курс на Scotch.io Getting Started with Browserify поможет начать работу с Browserify.

Лично я потратил мало времени на работу с webpack. Но в свое время я работал с ним и должен сказать: он потрясающий, несмотря на сложную настройку. Если только начинаете, начните с Browserify, его проще настроить. Имейте в виду, что webpack — это будущее, его начинают использовать крупные проекты.

ReactJS быстро набирает популярность, и, похоже не снижает обороты.

Курс на Schech.io  Learning React.js: Getting Started and Concepts дает полный обзор React. Как пройдете его, приступайте к React Fundamentals , на том же ресурсе. Он поможет создать полностью работающее приложение ReactJS, а потом переложить его на синтаксис ES6. Можете посмотреть официальную документацию ReactJS. Она хорошо написана, вы легко освоите ее.

Поскольку React – это только view, настоятельно рекомендуется изучить Redux. На мой взгляд большинство курсов по Redux немного сложны, но CSS Tricks Leveling Up with React: Redux отлично сочетает в себе простоту и информативность.

Возможно, вы слышали о Flux, если вам интересно, почему следует использовать Redux, а не Flux, посмотрите на Stack Overflow. Why use Redux over Facebook Flux? На этот вопрос ответил создатель Redux!

Оглядываясь на ошибки: что я узнал?

Я допустил много ошибок за два года обучения. В целом, считаю, что моя самая большая ошибка — не изучении основ до перехода к библиотекам и структурам. Думаю это справедливо практически к любому языку программирования, но, на мой взгляд, больше применимо к JavaScript.

Это связано с тем, что JavaScript — сломанный язык, содержит много «Foot Guns» (должно быть слышали об этом, если смотрели видео Д. Крокфорда, JavaScript, the better parts).Могут сделать жизнь невыносимо тяжелой, если полностью не поймете их.

Я помню, как однажды застрял на проблеме AngularJS с $ scope. Отладка заняла у меня 3 дня, я обнаружил, что дело не в AngularJS, а в JavaScript. Просто я не понял как это работает.

Чистый код

Странно, что я не очень часто говорю об этом. Меня не всегда заботило написание чистого кода, но, честно говоря, горжусь, что научился этому. Это потому, что все любят жаловаться, что их последнее место работы имело одну из худших и уродливых кодовых баз в мире. Так почему никто не говорит насколько хорошим был их код?

Хочу изменить эту тенденцию. Стремитесь давать понятные имена переменным и функциям на английском языке, даже если нужно много писать. Игнорирование этого ведет к необходимости ручного документирования в будущем для более ясного восприятия. Также это ведет к сложности понимания базы кода новыми разработчиками и вами. Да, вами. Почему? Потому что, если вы сами не пишете чистый код, что заставит ваших коллег делать это?

JQuery

Возможно некоторые заметили, что я не делал особого акцента на jQuery. Это связано с моим опытом. Я понял, что jQuery больше навредила мне, чем принесла пользы. Некоторые, возможно, не согласятся, но, пожалуйста, дайте мне объяснить. Когда я впервые узнал о ней, то понял, что jQuery используется повсюду и практически для всего. Поэтому я стал использовать jQuery практически для чего угодно, для любой проблемы, с которой столкивался. Я искал решение на базе jQuery.

Поймите меня правильно, jQuery была потрясающей, когда я использовал ее. Настолько потрясающий, что я слепо игнорировал, то что 90%, сделанного мною на jQuery,можно было сделать изначально в современных браузерах с таким же простым синтаксисом.

Возможно вы спросите: «Так что в этом плохого? JQuery мало весит и сокращает количество кода. Использование jQuery, а не родных API-интерфейсов не было проблемой. Проблема заключалась в том, что весь мой образ мышления и все решение общих проблем нуждались в работе jQuery. Это стало огромной проблемой, когда я получил свой первый проект и мне объяснили, что jQuery — это не зависимость.

Использование jQuery сделало меня беспомощным . Я полностью игнорировал собственные методы и решения. Мои решения стали менее портативными.

С тех пор я старался не использовать jQuery, если это не было абсолютной необходимости и действительно обеспечивало значительное повышение эффективности и удобочитаемости нашей кодовой базы (например, тяжелые манипуляции с DOM).

Еще раз, поймите меня правильно, jQuery — это здорово. Но если бы я мог вернуться в прошлое и встретился с моим прошлым «я», которое только начинало изучать веб-разработку, я бы настоятельно посоветовал не изучать jQuery, пока не научусь работать без нее. Если у вас возникли те же проблемы читайте You Might Not Need jQuery (Возможно вам не нужна jQuery).

Курсы

Что касается материала. Многие курсы CodeSchool замечательные (особенно HTML и CSS фантастические), не считая неудачных по фреймворкам (AngularJS, BackboneJS и т. д).

Я прошел довольно много курсов на Pluralsight, о них я не упомянул, потому что в итоге пришел к выводу, что проходить их плохая и ненадежная идея. Курсы созданы учителями, которые не всегда (по моему мнению) хорошо объясняют. Качество курсов дико колеблется, так как стандарты качества отсутствуют. Я проходил курсы, где объясняющий, звучал так, будто вот, вот уснет. Честно говоря, невозможно удержать внимание на 6-10-часовом курсе. А многие из них длятся столько, если не дольше.

Я потратил 80-100 часов обучения на Pluralsight, и я честно хочу, получить отдачу. Поймите меня правильно, я прошел ряд замечательных курсов на Pluralsight. Количество преобладающие над качеством заставляло меня тратить свое время. Я мог бы узнать гораздо больше, если бы проходил курсы в лучших источниках, таких как Egghead.io и CodeSchool, где ценят больше качества, чем количество.

Единственная причина, проходить курсы на Pluralsight, если таких нет в других источниках (например, по Installshield или Xamarin), или пройти очень специфические курсы, которые, хорошо оценены (Например, John Papa’s Angular Fundamentals).

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

Недавно попробовал тренинг на Team Treehouse. Скажу — поражен качеством курсов. После прохождения HTML, CSS и JavaScript, вы легко можете получить базовые знания по всему. Не верете? Посмотрите их учебные треки и скажите, разве они не замечательные. Конечно, немного дороговаты – 30$ в месяц, но, на мой взгляд, они того стоят. (Сейчас я плачу за изучение WordPress, он мне нужен для фриланс-проекта, материал отличный).

Слово о платных курсах

Чувствую потребность сказать: многие считают, что можно изучать программирование, не заплатив ни копейки, и конкурировать с теми кто прошел платные курсы. Это правда, но подчеркну, что стоимость для правильного курса имеет значение. Конечно, довольно много ценных материалов, о которых я писал, — бесплатные, но многие из них платные.

Да, есть ужасные курсы, которые я не советую, их ценность сомнительная (см. Pluralsight), но Egghead.io, CodeSchool и Team Treehouse предлагают стоящие, несмотря на их относительную дороговизну. Ежемесячная подписка (от 25 до 30$ в месяц). Кроме того, в течении 7-15 дней можно попробовать их бесплатно и выбрать подходящий.

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

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

Секретный соус успеха

За 2 года я познакомился со многими разработчиками. На своем пути я встретил разработчиков, которые очень сильно выделялись – они явно были в их собственной лиге. На них равнялись все, в том числе и я. Я обнаружил, что они обладали общими черта. О, которых расскажу прямо сейчас. На мой взгляд, секретный соус для успешного веб-разработчика:

  • Любить то, что делаешь. Самая важная характеристика из всех. Если не нравится то, что делаешь (будь то CSS Styling или JavaScript) — это отразиться на работе. Увлеченные своим делом, часто выделяются из толпы.
  • Быть щедрым, делиться знаниями. Очень хочется утаить CSS/JavaScript-хак решающий проблему, пожалуйста, не делайте это. Те, кто делятся своими знаниями, очень ценные кадры. Они могут значительно улучшить качество любой команды.
  • Постоянно находится в поиске нового. Большинство успешных разработчиков, с которыми я встречался обладают этой общей чертой. Будь то чтение блогов, проведение большого количества времени в дискуссиях по программированию или беседах о новинках в веб-разработке во время обеденных перерывов. Все время быть в поиске нового, позволяет лучшим разработчикам всегда оставаться впереди планеты всей.

Кратчайший маршрут

Ух, потребовалось не менее шести часов для написания этой статьи. Почти закончили! Возможно, вы, поинтересуетесь: «Хорошо, классная история, но где же кратчайший маршрут?» Вот, он.

Я организовал его так, словно мог бы вернуться назад и воспользоваться им верно. Наслаждайтесь!

Javascript

HTML&CSS

Инструменты разработчика

AngularJS

ReactJS

Back End

Бонус: Мои инструменты

jetbrains.com/webstorm:полнофункциональная среда для web-разработки, платная. Для студентов есть бесплатная лицензия на 1 год.

atom.io: бесплатный текстовый редактор.

sublimetext.com: быстрый и легкий текстовый редактор с поддержкой плагинов, эстетический внешний вид. (Обычно я держу Webstorm / Atom, как IDE для серьезной работы, а Sublime Text — для быстрого редактирования файлов.)

caniuse.com: поддержка браузером имеет решающее значение для веб-сайтов. Это ресурс №1 для определении, какие функции СSS поддерживаются браузером.

c9.io: Cloud 9 — облачная среда разработки и IDE с поддержкой Git. Отлично подходит для программирования удаленно и тестирования NodeJS или других элементов на стороне сервера без необходимости устанавливать что-либо на компьютере

www.codepen.io, www.plnkr.co/edit/ и jsfiddle.net: отличные облачные front end — интерактивные среды, позволяющие быстро создавать демонстрационные версии HTML / CSS / JS, с которыми можно поделиться, или поработать позже, создав бесплатную учетную запись. CodePen — лучше подходит для связанных с CSS вещами из-за его минималистического интерфейса и множества функций. Plunker для JavaScript demos из-за его мощных функций JS. JSFiddle — сервис для совместной работы.

vanillalist.com: репозиторий плагинов и библиотек JavaScript, использующих только vanilla JavaScript (не требуются библиотеки для работы, такие как jQuery).

youmightnotneedjquery.com: посмотрите сами.

publicapis.com: когда-нибудь задавались вопросом, какие существуют общедоступные API?

gravit.io: облачное приложение для дизайнеров, конкурирующее с Adobe Illustrator. (Бесплатное!) Полезно для создания быстрых макетов и веб-дизайна.

color.adobe.com:поможет создать гармоничные комбинации цветов для любого веб-сайта. Также есть витрина цветовых палитр, созданных другими дизайнерами, а также система ранжирования, которая поможет в вдохновении.

chir.ag/projects/name-that-color: перестаньте тратить время на поиск названий для переменных цвета less/sass, а просто используйте это приложение.

Вывод

Мне очень понравилось писать эту статью. Я очень счастлив, что наконец смог вернуть что-то невероятному участливому сообществу разработчиков по всему миру.

Источник: medium.freecodecamp.com, 17 августа 2016


Перевод выполнен abv24.com




Опубликовано 06.06.2017 в 4:32 пп · Автор abv24 · Ссылка
Рубрики: Социальные медиа, Технологии

Написать комментарий


@Mail.ru