Во-первых, позвольте мне представиться. Меня зовут Сергей Гарсия, я штатный фронтенд-разработчик с 2-летним опытом. В то время я работал фронтенд-разработчиком как в консалтинговой фирме Forbes 500, так и в небольшой компании.

Может показаться, что это не так уж много опыта, но завершение второго года работы в качестве разработчика стало для меня огромной вехой. Это связано с тем, что у меня не было реального опыта веб-разработки - и в целом не так много опыта программирования, кроме некоторого базового обучения C # и Java, которое я получил на нескольких онлайн-курсах. У меня также не было диплома по информатике, так как я получил диплом по управлению ИТ-проектами.

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

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

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

Итак, без лишних слов, приступим!

Получение основ

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

  • JavaScript
  • HTML и CSS
  • Препроцессоры CSS (Less и Sass)
  • Адаптивный дизайн
  • AngularJS
  • Шаблоны проектирования
  • Git
  • NodeJS
  • Бегущие по задачам

Вот как все прошло.

Javascript

Я начал свое путешествие по изучению JavaScript через CodeSchool (платно) и Codecademy (бесплатно). Если вы не знаете об этом, это отличные веб-сайты, которые позволяют вам научиться программировать, кодируя код в браузере.

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

Разобравшись с основами, я приступил к укреплению основы JavaScript, прочитав книгу Хавербеке Красноречивый Javascript: современное введение в программирование (бесплатно).

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

Вы также можете при желании изучить jQuery (хотя я действительно не рекомендую изучать его - подробнее об этом позже). Вы можете изучить это с помощью курса CodeSchool Попробовать jQuery.

HTML и CSS

Изучив JavaScript, я приступил к изучению основ HTML и CSS и веб-дизайна с помощью Пути обучения HTML и CSS CodeSchool. Эти курсы по-прежнему являются моими любимыми сегодня, так как темп отличный, а общий объем того, что они охватывают, позволил мне получить более прочную основу для этого.

Вы также можете легко переключить это на что-то вроде курса Codecademy HTML и CSS и по-прежнему получать аналогичные результаты. Или, если вы готовы принять вызов, курс Udacity Введение в HTML и CSS будет гораздо более полным и немного более сложным.

Бонус: если вы можете достать книгу Джона Дакетта HTML и CSS: Дизайн и создание веб-сайтов, это также отличная отправная точка для изучения HTML и CSS ( с небольшим количеством веб-дизайна). У него высокий рейтинг (4,7 балла из 5 на Amazon), он предлагает хорошее введение в мир веб-разработки. Это красивая книга благодаря чистому дизайну с большими буквами и красочными страницами. Я часто возвращаюсь к нему, чтобы просто полюбоваться.

Меньше / Sass

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

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

Вы можете получить быстрый, но полный обзор Less, используя WinLess’s Online Less Compiler и примеры кода, чтобы увидеть, как ваш код Less превратится в CSS. Вы также можете попробовать Sass онлайн, используя SassMeister (хотя здесь нет примеров кода).

Неважно, выучите ли вы сначала Less или Sass. Они очень похожи, поэтому, узнав одно, вы почти сразу узнаете и другое. Вы можете найти отличное быстрое сравнение между Less и Sass в статье Шелби Моулден Сравнение LESS и SASS.

Адаптивный дизайн

Изначально я узнал об адаптивном дизайне и Bootstrap, используя путь HTML и CSS в Codeschool, но недавно я обнаружил, что курс Udacity от Google Основы адаптивного веб-дизайна превосходно освещает основы и не только в гораздо более полной манере, чем Codeschool.

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

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

AngularJS

Тогда я действительно не знал, что такое AngularJS, но знал, что об этом говорят все, и что если я хочу стать веб-разработчиком, мне нужно его изучить. Я нашел Дизайнерские решения в AngularJS разработчика Google, чтобы предоставить лучший общий обзор того, что такое AngularJS и как он улучшил создание веб-приложений.

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

Затем я приступил к изучению AngularJS через Codeschool. Учитывая мой положительный опыт в курсах JavaScript и CSS, я ожидал не меньше, чем отличный курс. Я был неправ. Курс был провальным с самого начала, поскольку алгоритм, используемый для проверки правильности кода примера, иногда не работал правильно и отмечал ваше явно правильное решение как неправильное. Были даже случаи, когда все, что требовалось для исправления неисправной системы проверки, - это обновление страницы. Что касается содержания курса, то оно тоже было не лучшим. Он хорошо объяснил основные компоненты приложения AngularJS, но ужасно справился с их интеграцией в реальное приложение, оставив у меня гораздо больше вопросов, чем я начал.

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

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

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

Я нашел 2 лучших источника, чтобы узнать об этом: Шаблоны дизайна JavaScript от doFactory и Изучение шаблонов дизайна JavaScript Эдди Османи. Мне показалось, что doFactory намного проще для понимания, в то время как книга Адди Османи была намного более полной.

Chrome DevTools

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

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

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

Я нашел бесплатный курс CodeSchool Попробовать Github как удобный способ начать работу. Обучение Atlassian Git превосходно помогло охватить более сложные доступные команды. Программа Codeschool Git Learning Path также отлично подходит для изучения основ Git.

NodeJS

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

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

Исполнители задач (Grunt & Gulp)

Grunt и Gulp были для меня большим сюрпризом, поскольку я понятия не имел о существовании подобных инструментов, но я очень рад, что они есть! По сути, эти средства запуска задач позволяют автоматизировать общие задачи. Например, помните Less / Sass? Обычно вам придется вручную запускать компилятор CSS каждый раз, когда вы вносите в него изменения для компиляции CSS, а затем обновляете браузер. Используя средство запуска задач, вы можете настроить его так, чтобы он следил за вашими файлами Less / Sass на предмет изменений, и, когда он обнаруживает изменение, компилирует ваш CSS и автоматически обновляет браузер. Это очень полезно для сокращения времени разработки.

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

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

Я считаю, что курсы Scotch.io по Grunt и Gulp являются одними из лучших.

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

Когда я изучил основы веб-разработки, я был готов к своему первому собеседованию по веб-разработке на должность начального уровня. Я не буду вдаваться в подробности интервью, поскольку это не основная тема данной статьи. Но я скажу, что мне сказали, что мои относительно сильные знания JavaScript помогают мне закрепить позицию. (Спасибо, Eloquent JavaScript!)

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

Поначалу я обнаружил две самые большие ошибки:

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

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

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

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

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

В конце концов я наткнулся на замечательную книгу под названием Build Your Own AngularJS. Я не читал все это, но чтение раздела об осциллографах и наблюдателях и о том, как они работают, действительно раскрыло, что магия, лежащая в основе angular, на самом деле не была волшебством. Это был просто умный способ поддерживать привязку данных с использованием грязных проверок и вложенных областей видимости. Я настоятельно рекомендую эту книгу всем, кто хочет полностью понять AngularJS.

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

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

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

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

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

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

Вам не нужно изучать каждую новую библиотеку или фреймворк.

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

Идти дальше

В последующие годы я продолжал постоянно совершенствоваться в следующих направлениях:

JavaScript

После того, как вы закончите Eloquent JavaScript, довольно легко сказать и почувствовать, что вы освоили JavaScript, но затем приходит You Don’t Know JS, и это вас полностью разрушает (или, по крайней мере, это произошло со мной). Эта серия книг (кстати, бесплатная) несколько раз упоминалась мне несколькими старшими веб-разработчиками в офисе как книга для чтения, и только до тех пор, пока я ее не прочитаю, я могу сказать, что полностью знаю JavaScript. Они были правы, поскольку страница за страницей мне постоянно приходило в голову, насколько действительно сложным был JavaScript на самом деле, а также множество распространенных ошибок, которые могли возникнуть у неопытных и опытных людей без надлежащего понимания JavaScript.

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

  • JavaScript, лучшие части: потрясающий доклад Д. Крокфорда, в котором рассказывается о самых больших недостатках JavaScript, это Foot Guns, и о том, как использовать их в качестве сильных сторон.
  • Два столпа JavaScript: солидная статья известного писателя JavaScript Medium Эрика Эллиотта, в которой рассказывается о двух основных столпах JavaScript: прототипическом наследовании и функциональном программировании.

Как только вы получите глубокое понимание JavaScript, переходите к ECMASCript 2015 (также известному как ES6), последнему и актуальному стандарту JavaScript. Статья Smashing Magazine ECMAScript 6 (ES6): Что нового в следующей версии JavaScript - отличный краткий обзор того, что нового в ES6. Вы можете попробовать ES6 в браузере, используя Интернет-транспилятор Babel.

CSS

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

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

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

Вам также следует сосредоточиться на производительности вашего CSS. Статья Smashing Magazine Управление оптимизацией производительности мобильных устройств и статья HTML5 Rocks Высокопроизводительная анимация отлично поработали, обеспечив фору в этом направлении. Быстрое прочтение обеих статей должно дать вам прочную основу.

Бандлеры JavaScript

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

Двумя крупнейшими игроками на данный момент являются:

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

Мини-курс Scotch.io Начало работы с Browserify может дать вам начало работы с браузером, а статья Дэвида Фокса Пауэлла Почему никто не может написать простой учебник по Webpack? - отличное и интересное введение в webpack.

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

ReactJS

ReactJS быстро набирает популярность и, похоже, не замедляется - до такой степени, что люди спрашивают: «Убивает ли React Angular?»

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

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

Возможно, вы уже слышали о Flux на этом этапе, но если вам интересно, почему вы должны использовать Redux вместо Flux, ознакомьтесь с вопросом о переполнении стека Зачем использовать Redux вместо Facebook Flux? на что ответил создатель Redux!

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

За 2 года изучения веб-разработки я сделал много ошибок. В целом, я думаю, что моей самой большой ошибкой было то, что я не освоил основы, прежде чем перейти к библиотекам и фреймворкам. Я предполагаю, что это применимо почти ко всем языкам программирования, но, на мой взгляд, это применимо даже в большей степени к JavaScript. Это связано с тем, что во многих отношениях JavaScript является сломанным языком и содержит множество «Foot Guns» (вы должны были слышать об этом, если смотрели доклад Д. Крокфорда о «JavaScript, лучшие части», о котором я упоминал ранее). Они могут сделать жизнь невыносимо тяжелой, если вы не понимаете их полностью.

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

Чистый код

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

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

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

jQuery

Некоторые из вас могли заметить, что я не уделял особого внимания jQuery. Это потому, что по моему опыту я обнаружил, что сначала jQuery принес мне больше вреда, чем пользы. Некоторые из вас могут не согласиться, но позвольте мне объяснить: когда я впервые узнал об этом, общая идея, которую я понял, заключалась в том, что jQuery есть повсюду и вы можете использовать его практически для всего. Из-за этого я привык использовать jQuery практически для всего, и для любой проблемы, с которой я столкнулся, я искал решение для нее, использующее jQuery.

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

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

Использование jQuery сделало меня бесполезным без него и заставило полностью игнорировать собственные методы и решения, которые всегда существовали. Это также сделало все мои решения менее переносимыми, поскольку для их использования требовался jQuery.

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

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

Курсы

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

Я также прошел довольно много курсов Pluralsight, о которых не упомянул, потому что по прошествии всего этого времени я пришел к выводу, что выбор их пути обучения в целом плохая идея и ненадежность. Поскольку их курсы создаются учителями, которые (на мой взгляд) не всегда очень хороши в преподавании, я обнаружил, что качество их курсов сильно колеблется, поскольку их стандарты качества не существуют. У меня были курсы, на которых даже человек, читавший курс, звучал так, как будто он засыпает. И, честно говоря, мне не хватает концентрации внимания, чтобы продолжать уделять внимание 6–10-часовым курсам, и многие из них длятся так долго, если не дольше.

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

Единственная причина, по которой я мог подумать о том, чтобы кто-то использовал Pluralsight, - это пройти курс, которого нет на других веб-сайтах по какой-то более неясной технологии (например, Installshield или Xamarin), или пройти несколько очень конкретных курсов, которые, как они знают, были очень хорошо приняты и рассмотрены (например, Основы Angular Джона Папы).

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

Я также недавно попробовал пройти обучение Team Treehouse и должен сказать, я поражен качеством их курсов, даже не уступающим по качеству CodeSchool, а их учебный материал очень обширен.

После беглого просмотра путей обучения HTML, CSS и JavaScript я вижу, что вы легко можете получить основу практически для всего. Не верите мне? Просто посмотрите на их обучающие треки и скажите, что это не удивительно. Конечно, это немного дороговато - 30 долларов в месяц, но, на мой взгляд, оно того стоит. (Я плачу за это прямо сейчас, чтобы изучить WordPress, так как он мне нужен для внештатного проекта, а материал отличный).

Несколько слов о платных курсах

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

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

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

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

Секрет успеха

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

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

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

Уф, на написание этой статьи потребовалось время (6 часов и больше). Мы почти закончили! Вы можете спросить: «Хорошо, классная история, но каков самый быстрый путь?» Итак, вот оно.

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

Javascript

  1. CodeSchool или Treehouse’s путь обучения Javascript (платный) ИЛИ Курс Codecademy's Javascript
  2. Красноречивый JavaScript
  3. Вы не знаете JS
  4. JS: правильный путь
  5. Изучите ES6 от Egghead.io

HTML и CSS

  1. CodeSchool или Treehouse для обучения HTML и CSS (платно) ИЛИ HTML и CSS: дизайн и создание веб-сайтов Джона Дакета ИЛИ Курс Codecademy по HTML и CSS.
  2. Особенности специфичности CSS от CSS Tricks
  3. Изучите макет CSS
  4. SMACSS
  5. 9 основных принципов адаптивного веб-дизайна от Front
  6. Основы адаптивного веб-дизайна от Google на сайте Udacity (возьмите, если вы не использовали программу обучения CodeSchool или Treehouse)
  7. Управление оптимизацией производительности мобильных устройств от Smashing Magazine ИЛИ Оптимизация рендеринга в браузере и Оптимизация производительности веб-сайтов от Google на Udacity
  8. Основы Интернета от Google

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

  1. Изучите и освоите DevTools от CodeSchool
  2. Изучите Git от Codecademy и Попробуйте Github от Codeschool
  3. Введение в команды Linux от Smashing Magazine
  4. Легко автоматизируйте свои задачи с помощью Gulp.js от Scotch.io

AngularJS

  1. Проектные решения в AngularJS от разработчиков Google (Введение в AngularJS)
  2. Основы AngularJS от Egghead.io
  3. Руководство по угловым стилям Джона Папы
  4. Создание одностраничного приложения Todo с помощью Node и Angular (MEAN) от Scotch.io
  5. Структура приложения AngularJS от Egghead.io (платный) ИЛИ Angular Courses Scotch.io

ReactJS

  1. Изучение React.js: начало работы и концепции от Scotch.io
  2. Введение в веб-пакет от Egghead.io
  3. Основы React от Egghead.io
  4. Повышение уровня с помощью React: Redux от CSS Tricks

Back End

  1. Учебники по NodeJS от NodeSchool.io
  2. Как я объяснил жене ОТДЫХ
  3. Создание одностраничного приложения Todo с Node и Angular от Scotch.io (Node, ExpressJS, MongoDB, Angular, REST)

Бонус: ресурсы

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

  • Веб-дизайн за 4 минуты. Очень креативное и оригинальное интерактивное руководство, которое научит вас основам веб-дизайна.
  • Награды. Ищете вдохновение для веб-дизайна? Не смотрите дальше.
  • Почему найм - это так сложно в сфере технологий Эрик Эллиотт. Здесь Эрик отлично справляется с описанием того, как на удивление сложно найти хороших разработчиков и как им стать.
  • Мега-сравнение систем баз данных NoSQL Кристофа Ковача. Это превосходное сравнение самых популярных систем баз данных NoSQL. MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, они и многие другие - все здесь.
  • XSS Game. Ошибки межсайтового скриптинга (XSS) - один из наиболее распространенных и опасных типов уязвимостей в веб-приложениях. Используя этот замечательный ресурс, вы можете узнать, как находить и использовать ошибки XSS, а также как предотвратить их появление в вашем веб-приложении.
  • Как написать неподдерживаемый код. Веселая статья о том, как не писать поддерживаемый чистый код.

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

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

  • Jetbrains Webstorm: полнофункциональная IDE для веб-разработки. (Мой выбор редактора) Платный, но предлагает бесплатную лицензию на 1 год для студентов.
  • Atom.io: расширяемый текстовый редактор с функциями, подобными IDE, конкурирующим с Webstorm. Бесплатно.
  • Sublime Text: молниеносный текстовый редактор с поддержкой плагинов и эстетичным внешним видом. (Обычно я устанавливаю Webstorm / Atom как IDE для серьезной работы, а Sublime Text - для быстрого редактирования файлов.)
  • Caniuse.com: Поддержка браузером критически важна для веб-сайтов, и это ресурс №1, позволяющий выяснить, какие функции поддерживаются в той или иной версии браузера, а какие есть.
  • Cloud 9: облачная среда разработки и IDE с поддержкой Git, работающая в Linux. Отлично подходит для удаленного программирования и тестирования NodeJS или других серверных вещей без необходимости устанавливать что-либо на вашем компьютере.
  • CodePen, Plunker и JSFiddle: отличные облачные интерфейсные площадки, которые позволяют создавать быстрые демонстрации HTML / CSS / JS, которыми вы можете поделиться или поработать позже, если создадите бесплатную учетную запись. CodePen часто лучше всего подходит для вещей, связанных с CSS, из-за его минималистичного интерфейса и множества функций, связанных с CSS, Plunker для демонстраций JavaScript из-за его мощных функций JS и JSFiddle для демонстраций, которые вы хотите сотрудничать с другими в реальном времени благодаря живому редактору. совместное использование функции совместной работы.
  • Ванильный список: репозиторий плагинов и библиотек JavaScript, использующий только ванильный JavaScript (что означает, что для работы им не требуются библиотеки, такие как jQuery).
  • YouMightNotNeedjQuery: Скорее всего, нет. Посмотреть на себя.
  • PublicAPIs: Вы когда-нибудь задумывались, какие существуют публичные API? Не смотрите дальше!
  • Gravit.io: приложение для облачного дизайна, конкурирующее с Adobe Illustrator. (Бесплатно!) Полезно для быстрых макетов и веб-дизайна.
  • Adobe Kuler: веб-приложение, которое поможет вам создать гармоничные цветовые сочетания для любого веб-сайта. Также есть витрина Изучить цветовых палитр, созданных другими дизайнерами, а также система ранжирования, которая поможет вам вдохновить.
  • Назовите этот цвет: перестаньте тратить много времени на выяснение того, как назвать свои цветовые переменные в less / sass, и просто используйте их законное имя с этим веб-приложением.

Заключение

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

Как некоторые из вас уже заметили, это мой первый пост в блоге, но можете быть уверены, что я планирую написать больше. Только не ждите одного каждую неделю. Помните: качество важнее количества!

Если у кого-то из вас остались вопросы, не стесняйтесь оставлять комментарии, и я постараюсь ответить вам как можно скорее.

Надеюсь, это было полезно для вас, ребята, до следующего раза, Best!

Обновление за март 2018 года. Для тех, кому интересно, чем я занимался, вот краткое обновление статуса!

Https://medium.com/@sgarcia.dev/status-update-im-still-here-with-cool-stuff-incoming-f031bab49eca