Мій шлях до того, щоб стати веб-розробником з нуля без ступеня CS (і про те, чому я навчився у…

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

Це може здатися не великим досвідом, але закінчення другого курсу розробника стало для мене величезною віхою. Це тому, що я не мав реального досвіду веб-розробки - і взагалі не надто багато досвіду програмування, окрім базового навчання C # та Java, яке я отримав на кількох онлайн-курсах. Я також не мав ступеня інформатики, оскільки закінчив ступінь з управління ІТ-проектами.

Я ніколи не писав про свій досвід, незважаючи на всю допомогу, яку я отримав від чудових ресурсів, таких як Medium, Stack Overflow та Reddit's subreddits. Тому сьогодні я вирішив це змінити. Сьогодні я збираюся повідомити вас про те, що пішло правильно, а що ні, так що якщо ви вирушаєте у цю подорож, вам пощастить більше, ніж мені.

Я знаю, що існує багато подібних статей, але не дуже багато з них обговорюють процес із користю додаткових двох років огляду.

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

Отже, без зайвих сумнівів, давайте почнемо!

Отримання основ

Вирішивши, що хочу зайнятися веб-розробкою, першим питанням на мою думку було «Що я навчуся? Провівши деякі дослідження, я в підсумку склав свій навчальний шлях на основі того, про що запитували більшість посад веб-розробників початкового рівня, а саме:

  • JavaScript
  • HTML і CSS
  • Препроцесори CSS (Less & Sass)
  • Чуйний дизайн
  • AngularJS
  • Шаблони дизайну
  • Git
  • NodeJS
  • Бігуни завдань

Ось як це пройшло.

Javascript

Я розпочав свою подорож з вивчення JavaScript через CodeSchool(платна) та Codecademy(безкоштовно). Якщо ви не знаєте про них, це чудові веб-сайти, які дозволяють навчитися кодувати, кодуючи всередині браузера.

Я виявив, що такі навчальні ресурси були найкращими, коли ви тільки починаєте. Тільки майте на увазі, що цей метод навчання швидко втомлює, як тільки ви потрапляєте в більш просунуті речі, оскільки їх алгоритми перевірки, чи правильно ви вирішили приклад коду, мають деякі проблеми з точністю. Обидва вступні курси з JavaScript були чудовими, і я настійно рекомендую їх.

Отримавши основи, я продовжив отримувати міцніші основи JavaScript, прочитавши книгу «Красномовний Javascript: Сучасний вступ до програмування» Гавербеке (безкоштовно).

Ця книга була рекомендована мені багатьма людьми на форумах JavaScript як обов’язкове для прочитання і з поважної причини. Ця книга була важкою - особливо якщо ви просто вивчаєте програмування, як я тоді. Але я радий, що не здався і продовжував це робити. Це було феноменально завдяки великому обсягу концепцій програмування, які він охоплює, навіть якщо часом було трохи нещадно. Що б ви не робили, не пропускайте виклики коду. Закінчивши цю книгу, ви нарешті можете впевнено сказати, що добре розумієтесь на JavaScript.

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

HTML і CSS

Вивчивши JavaScript, я продовжив вивчати основи HTML та CSS та веб-дизайну, навчаючись на HTML і CSS в CodeSchool. Ці курси досі є моїми улюбленими, оскільки темп є чудовим, і загальний обсяг того, що вони охоплюють, дозволив мені отримати міцніший фундамент для цього.

Ви також можете легко переключити це на щось на зразок курсу HTML & CSS Codecademy і все одно отримати подібні результати. Або якщо ви готові до виклику, курс Udacity «Вступ до HTML та CSS» є набагато повнішим та дещо складнішим.

Бонус : Якщо вам вдасться взяти в руки HTML і CSS Джона Дакетта : Створення та створення веб-сайтівкнига, це також тверда відправна точка для вивчення HTML та CSS (з посипкою веб-дизайну). Він має високу оцінку (4,7 / 5 на Amazon), пропонує солідний вступ у світ веб-розробки. Це прекрасна книга завдяки чистому дизайну з великими літерами та барвистими сторінками. Я часто повертаюся до нього, щоб просто помилуватися ним.

Менше / Сасс

Для незнайомих Less & Sass - це компілятори CSS, які дозволяють писати CSS більш елегантно. Це дозволяє робити речі, які зазвичай не підтримуються, наприклад, вкладати правила CSS. Після закінчення ці компілятори CSS “компілюють” ваш код і перетворюють його в звичайний CSS.

На даний момент існує 2 основних CSS-компілятори: Less і Sass . Sass є більш популярним, але я виявив, що вивчення програми Less Less було простішим, головним чином тому, що для використання Sass на вашому комп’ютері потрібно також встановити Ruby, який я не любив.

Ви можете отримати швидкий, але повний огляд Less, використовуючи WinLess's Online Less Compiler, і це приклади коду, щоб побачити, як ваш Less код перетвориться на CSS. Ви також можете спробувати Sass в Інтернеті за допомогою SassMeister (хоча це не включає приклади коду).

Не має значення, чи ти навчишся спочатку менше або Сасс. Вони надзвичайно схожі, тож коли ви знаєте одне, ви майже знаєте інше. Ви можете знайти чудове швидке порівняння між Less і Sass у статті Шелбі Моулдена Порівняння між LESS & SASS.

Чуйний дизайн

Спочатку я дізнався про адаптивний дизайн та Bootstrap, використовуючи шлях HTML і CSS від Codeschool, але нещодавно я виявив, що курс Udacity від Google з адаптивних основ веб-дизайну може бути фантастичним у висвітленні основ і не тільки набагато повнішим чином, ніж це робила Codeschool.

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

Якщо у вас виникають проблеми з осмисленням його основних принципів, прочитайте пост блогу Фронта про 9 основних принципів адаптивного веб-дизайну. Він має чудові чисті та прості анімації, які допомагають наочно проілюструвати принципи адаптивного веб-дизайну.

AngularJS

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

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

Потім я продовжив вивчати AngularJS через Codeschool. Отримавши позитивний досвід роботи з курсами JavaScript та CSS, я очікував на це не менше, ніж чудовий курс. Я був неправий. З самого початку курс був катастрофою, оскільки алгоритм, який використовувався для перевірки, чи правильно ви привели приклад коду, іноді не спрацьовував і позначав ваше явно правильне рішення як неправильне. Бували навіть випадки, коли для виправлення непрацездатної системи перевірки потрібно було лише оновлення сторінки. Що стосується змісту курсу, він теж не був чудовим. Він добре продемонстрував основні компоненти програми AngularJS, але страшно спромігся інтегрувати їх у реальний додаток, залишивши у мене набагато більше запитань, ніж я починав.

Після деяких пошуків по форумах я натрапив на Egghead.io(безкоштовно / платно), де мені пощастило набагато більше. Їх навчальний матеріал був набагато чистішим, стислішим та повнішим, що дозволило значно покращити досвід. Не кажучи вже про те, що окрім своїх курсів, вони мають уроки розміром від 2 до 5 хвилин, які охоплюють важливі теми. (Наприклад: Що таке контролер? Що таке фільтр? Що таке $ scope?) Це полегшує розуміння основ. У них також є кілька відео, які вимагають оплати, але вони, як правило, висвітлюють більш просунуті кутові теми, які вам не знадобляться пізніше. Я пройшов їхній курс AngularJS Fundamentals, і я був повністю задоволений результатами (а також став великим шанувальником курсів Egghead.io в процесі).

Шаблони дизайну

Шаблони проектування - це, в основному, багаторазові кодові рішення, які можна неодноразово використовувати для вирішення загальних проблем програмного забезпечення. Маючи основу цього, ви зробите набагато більш конкурентоспроможним розробником програмного забезпечення на будь-якій мові програмування. Це також полегшить вам розуміння коду інших людей, оскільки ви швидко визначите, який шаблон дизайну вони використовували у своєму коді, щоб краще його зрозуміти.

Я знайшов 2 найкращих джерела, щоб дізнатися це, - це шаблони дизайну JavaScript doFactory та шаблони дизайну JavaScript Адді Османі. Я знайшов doFactory набагато легшим для розуміння, тоді як книга Адді Османі була набагато повнішою.

Chrome DevTools

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

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

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

Я знайшов безкоштовний курс CodeSchool Try Github як дружній спосіб розпочати. Навчання Git на Atlassian було чудовим у тому, щоб охопити більш розширені доступні команди. Навчальний шлях Godeschool Git також чудово охоплює основи 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 . Ви можете вибрати, що завгодно, але я виявив, що Галпу набагато легше вчитися та писати. Я досі віддаю перевагу цьому через його мінімалістичний, але при цьому потужний підхід на основі труб.

Я виявив, що курси Scotch.io з Грунту та Галпа є одними з найкращих.

Проблеми, з якими я стикався на першій роботі

Коли я висвітлив основи веб-розробки, я був готовий до свого першого інтерв’ю з веб-розробки на посаду початкового рівня. Я не буду вдаватися в подробиці щодо інтерв’ю, оскільки це не є основною метою цієї статті. Але я скажу, що мені сказали, що мої відносно сильні знання JavaScript допомагають мені забезпечити свою позицію. (Дякую, красномовний JavaScript!)

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

дві найбільші помилки, які я знайшов спочатку:

  1. Страх невдачі. Оскільки я був новим хлопцем, я постійно боявся, що мій код буде неправильним або погано зробленим, тому я витратив багато часу на перевірку всього і дотримувався найкращих практик кодування. Через це я рідко намагався вирішити нові творчі способи, бо боявся, що це може не працювати коректно в кінці. Це фактично зупинило мій драйв до пізнання нових речей.
  2. Робимо речі, тому що так сказала людина, яка знає краще за мене. Спочатку я багато цього робив. Хоча це не зовсім неправильно, робити речі певним чином лише тому, що експерт з цього питання «Х», не знаючи чому, призводить до того, що я насправді не знаю, коли і чому все робилося так, як було. Незабаром я дізнався, що у всьому були винятки, і що ви завжди повинні знати причину найкращих практик.

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

З часом я засвоїв свій урок. Відтоді я завжди був людиною, яка з нетерпінням чекає випробувань нових речей. Я завжди намагаюся зрозуміти, чому існують найкращі практики, коли вони праві і коли не стосуються ситуації.

Використання AngularJS у реальному проекті також створило для мене досить великий виклик. Це було головним чином тому, що багато речей, які я робив із цим, я робив, не до кінця розуміючи, чому це сталося. Я думав про це як про "кутову магію".

Багато разів мені хотілося, щоб я знав, як насправді працює Angular, але було страшно дивитись на документацію.

Врешті-решт я натрапив на дивовижну книгу під назвою Build Your Own AngularJS. Я не прочитав усього цього, але читання розділу про Scopes і Watchers та те, як вони працювали, насправді показало, як магія за кутовим, насправді не була магією. Це був просто розумний спосіб підтримувати прив’язку даних за допомогою брудної перевірки та вкладених областей. Я настійно рекомендую цю книгу всім, хто прагне до повного розуміння AngularJS.

Іншою проблемою, з якою я зіткнувся рік потому, було те, як швидко розвивалася веб-розробка. Я щойно опанував AngularJS і Grunt, і відчував себе гордим і могутнім - лише незабаром дізнавшись, що Gulp і ReactJS були на горизонті. А через рік після їх вивчення Webpack почав завойовувати свої позиції, і мені довелося це теж навчитися. Як ви можете собі уявити, значна частина мене була дуже розчарована тим, як швидко деякі мої знання застаріли. Але незабаром співробітник просвітлив мене, розповівши щось, що змінило моє ставлення до бібліотек і фреймворків назавжди:

"Бібліотеки та основи можуть застаріти, але пропоновані ними концепції та рішення часто переживають випробування часом".

Він мав рацію. Можливо, AngularJS застарів, але повне розуміння магії, що стоїть за ним, допомогло мені краще зрозуміти архітектуру веб-компонентів React, яка вдосконалила концепцію директив Angular. Це також допомогло мені зрозуміти, як ReactJS набув стільки популярності, а також яке майбутнє чекає.

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

З іншого боку, інша річ, яка мені допомогла - і те, що я дізнався зовсім недавно - - це розуміння того, чого не навчитися. Це стало критичним для мого процесу стати кращим веб-розробником.

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

Вам не потрібно вивчати кожну нову бібліотеку чи фреймворк, що виходить.

Часто це чудова ідея зробити простий приклад з привітанням, щоб ви могли побачити, що пропонує фреймворк. Тоді можна рухатися далі. Але зазвичай слід спробувати зосередитись на тому, що найкраще відповідає потребам вашого проекту. Спочатку це може бути важко, але на щастя, існують такі чудові місця, як Stack Overflow, Medium та Reddit, де ви можете знайти корисні обговорення між фреймворками та з’ясувати, які з них найкраще підходять для конкретних випадків використання.

Йти далі

У наступні роки я продовжував постійно вдосконалюватися наступними способами

JavaScript

Після того, як ви закінчите красномовний JavaScript, досить легко сказати і відчути, що ви освоїли JavaScript, але потім з’являється You Don't Know JS, і це абсолютно знищує вас (або, принаймні, це сталося зі мною). Цю серію книг (до речі, безкоштовну) кілька разів згадували мені кілька старших веб-розробників в офісі як книгу для читання, і що лише поки я її не прочитаю, я можу сказати, що повністю знаю JavaScript. Вони мали рацію, оскільки сторінка за сторінкою постійно здивувала мене тим, наскільки справді складним був JavaScript, а також багатьма, багатьма загальними підводними каменями, які можуть мати досвідчені та досвідчені люди без належного розуміння JavaScript.

Читання цієї серії книг справді відкрило мені розум, і я також настійно рекомендую її всім, хто хоче назвати себе досвідченим розробником JavaScript. Після того, як ви це зникли, є 2 додаткові ресурси, я настійно рекомендую отримати ще більше, вдосконаленіші знання JavaScript;

  • JavaScript, The Better Parts: дивовижна бесіда Д. Крокфорда, яка розповідає про найбільші слабкі сторони JavaScript - це «Пістолети для ніг» та про те, як їх використовувати як сильні сторони.
  • Два стовпи JavaScript: солідна стаття відомого письменника JavaScript Medium Еріка Елліотта, яка розповідає про 2 великі стовпи JavaScript: прототипове успадкування та функціональне програмування

Після глибокого розуміння JavaScript перейдіть до ECMASCript 2015 (також відомого як ES6), найновішого та поточного стандарту JavaScript. Стаття "Smashing Magazine" ECMAScript 6 (ES6): Що нового в наступній версії JavaScript - це чудовий короткий огляд новин у ES6. Ви можете спробувати ES6 у веб-переглядачі за допомогою мережевого транпілера Babel.

CSS

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

  • SMACSS: масштабована та модульна архітектура для CSS. Гнучкий посібник з розробки малих і великих сайтів.
  • BEM: методологія, яка допомагає досягти компонентів багаторазового використання та спільного використання коду в інтерфейсі.

Я особисто віддаю перевагу SMACSS, оскільки він виглядає більш чисто, але деякі компанії та CSS Frameworks все ще використовують BEM, тому варто знати і те, і інше.

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

Пакети JavaScript

На сьогоднішній день ви повинні чітко розуміти Grunt або Gulp. Наступним кроком є ​​додавання пакета JavaScript до вашої програми виконання завдань, що дозволить більш модульно організувати вашу програму JavaScript.

Зараз найбільшими гравцями є:

  • Browserify: дозволяє вам вимагати модулі в браузері, об’єднуючи всі ваші залежності.
  • Webpack: в основному Browserify на стероїдах. Складніше налаштувати та налаштувати.

Міні-курс Scotch.io Початок роботи з Browserify може запропонувати вам швидкий старт з browserify, тоді як стаття Девіда Фокса Пауелла Чому ніхто не може написати простий підручник з Webpack? це чудовий, цікавий для читання вступ до webpack.

Особисто я не витрачав багато часу на використання webpack, але, перебуваючи з ним, я повинен сказати, що це було приголомшливо - навіть якщо це трохи складніше налаштувати. Якщо ви тільки починаєте, я б вибрав Browserify, оскільки це набагато простіше в налаштуванні. Тільки майте на увазі, що webpack - це майбутнє, і які великі проекти починають використовувати.

ReactJS

ReactJS швидко набирає популярності, і, схоже, не гальмує - до тієї міри, що люди запитують: "React вбиває Angular?"

Scotch.io's Learning React.js: Початок роботи та концепції забезпечує суттєвий огляд 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!

Озираючись на свої помилки і те, що я дізнався

За два роки навчання веб-розробці я зробив багато помилок. Загалом, я вважаю, що моєю найбільшою помилкою було не оволодіння основами перед тим, як перейти до бібліотек та фреймворків. Я думаю, це стосується майже будь-якої мови програмування, але, на мій погляд, це стосується ще більше JavaScript. Це пов’язано з тим, що в багатьох відношеннях JavaScript є непрацездатною мовою і містить багато “пістолетів для ніг” (ви мали б про це чути, якщо дивились виступ Д. Крокфорда на тему “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, але їх фокус на кількості над якістю справді змусив мене витрачати свій час. Я міг би дізнатися набагато більше, якби пройшов курси з кращих джерел, таких як Egghead.io та CodeSchool, де вони цінують більше якості кількості.

Єдина причина, чому я міг подумати про те, що хтось використовує Pluralsight, - це пройти курс, який не має жоден інший веб-сайт за допомогою якоїсь більш незрозумілої технології (наприклад, Installshield або Xamarin), або пройти кілька дуже конкретних курсів, які, на їхню думку, були дуже добре прийняті та оглянуто (наприклад, «Основи кута Джона Папи»).

Загалом, якщо ви хочете використовувати Pluralsight, переконайтеся, що ви проходите курси, підібрані кимось, хто пройшов їх першими та які визнані якісними та корисними.

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

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

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

Я відчув потребу говорити про це, оскільки помітив загальний консенсус, що ви можете навчитися програмуванню, не платячи ні копійки, і бути таким же конкурентоспроможним, як той, хто платив за курс. Хоча це правда, я не можу наголосити на достатній вартості, яку платить за правильний курс. Звичайно, досить багато найцінніших навчальних матеріалів, про які я писав, безкоштовні, але багато з них також платні. Головним чином тому, що іноді ти просто не можеш перемогти, коли хтось ретельно пояснює тобі щось наочно.

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

Якщо ви правильно розіграєте свої карти, заплативши 1-2 місяці за будь-яку з них, можна легко передати вам знання, які ви отримаєте лише в іншому випадку, натрапивши на незліченну кількість статей та публікацій у блозі протягом року. Вони чесно такі добрі.

Так що так, вони не потрібні, але якщо ви можете дозволити собі щонайменше один місяць, можете бути впевнені, що це дасть вам сильну перевагу.

Секретний соус для успіху

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

  • Любити те, що ви робите. Це просто найважливіша характеристика всіх них. Якщо вам не подобається те, що ви робите (будь то CSS Styling або JavaScript), це справді відображатиметься в тому, що ви робите. Ті, хто захоплений тим, що вони роблять, часто чітко виділяються серед натовпу.
  • Будьте щедрими та діліться своїми знаннями . Дуже легко хотіти зберегти таку нову рубанку CSS / JavaScript, яка вирішила проблеми проекту, в секреті, але, будь ласка, не робіть цього. Люди, які найбільше діляться своїми знаннями, часто є найціннішими, оскільки їх можна помістити в будь-яку команду та значно покращити її якість.
  • Завжди слідкуйте за новими речами . Більшість успішних розробників, яких я зустрічав, поділяють цю загальну рису. Чи це буде читати блоги, витрачати багато часу на обговорення програм, пов’язаних із програмуванням, або навіть говорити про те, що нового у веб-розробці під час обідніх перерв. Постійний пошук нових речей дозволяє найкращим розробникам завжди випереджати криву.

Найкоротший маршрут

Ух, ця стаття зайняла деякий час (6 годин і з урахуванням). Ми майже закінчили! Можливо, вам цікаво: "Добре, крута історія, але який найшвидший маршрут?" І ось, ось воно.

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

Javascript

  1. Шлях навчання CodeSchool або Treehouse на Javascript (платний) АБО курс Javascript на Codecademy
  2. Красномовний JavaScript
  3. Ви не знаєте JS
  4. JS: Правильний шлях
  5. Дізнайтеся ES6 від Egghead.io

HTML і CSS

  1. Шлях до навчання в HTML & CSS CodeSchool або Treehouse (платний) АБО HTML і CSS: Створення та створення веб-сайтів від Джона Дакета АБО курс HTML & CSS в Codecademy.
  2. Особливості специфічності CSS за допомогою хитрощів CSS
  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 Курси Scotch.io

ReactJS

  1. Навчання React.js: Початок роботи та концепції від Scotch.io
  2. Вступ до веб-пакету від Egghead.io
  3. React Fundamentals від Egghead.io
  4. Вирівнювання за допомогою React: Redux від CSS Tricks

Задній кінець

  1. Підручники з NodeJS від NodeSchool.io
  2. Як я пояснив REST своїй дружині
  3. Створення односторінкової програми Todo з Node і Angular від Scotch.io (Node, ExpressJS, MongoDB, Angular, REST)

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

Зовсім необов’язково, але деякі з моїх улюблених статей та ресурсів, які я знайшов за ці роки, вам, мабуть, сподобаються, якщо вас зацікавить відповідна тема.

  • Веб-дизайн за 4 хв. Дуже креативний та оригінальний інтерактивний посібник, який навчить вас основ веб-дизайну.
  • Нагороди. Шукаєте натхнення для веб-дизайну? Не дивіться далі.
  • Чому найм так важкий у технологіях Ерік Елліотт? Тут Ерік дивовижно підсумовує, як напрочуд важко знайти чудових розробників і як стати ним.
  • Мегапорівняння систем баз даних NoSQL від Крістофа Ковача. Це чудове порівняння між найпопулярнішими системами баз даних NoSQL. MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, вони та багато іншого тут.
  • Гра XSS. Помилки міжсайтових сценаріїв (XSS) - один із найпоширеніших та найнебезпечніших типів уразливостей у веб-додатках. Використовуючи цей чудовий ресурс, ви можете дізнатися, як знаходити та використовувати помилки XSS, а також як запобігти їх виникненню у вашому веб-додатку.
  • Як написати неможливий код. Весела стаття про те, як нідоНапишіть чистий код, який можна обслуговувати.

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

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

  • Jetbrains Webstorm: повнофункціональна IDE веб-розробки. (Мій обраний редактор) Платно, але пропонує 1 рік безкоштовної ліцензії для студентів.
  • Atom.io: Високорозширюваний текстовий редактор із IDE, як функції, що конкурують з Webstorm. Безкоштовно
  • Піднесений текст: блискавично швидкий текстовий редактор з підтримкою плагінів та естетично приємним виглядом. (Я зазвичай тримаю Webstorm / Atom встановленим як IDE для серйозної роботи, а Sublime Text - для швидкого редагування файлів.)
  • caniuse.com: Підтримка браузера є критично важливою для веб-сайтів, і це ресурс №1 для з’ясування того, які функції підтримуються якою версією браузера, а які саме.
  • Хмара 9: Хмарне середовище розробки та IDE з підтримкою Git, що працює на Linux. Чудово підходить для віддаленого програмування та тестування NodeJS або інших серверних речей без необхідності встановлювати щось на машині
  • CodePen, Plunker та JSFiddle: чудові хмарні ігрові майданчики, що дозволяють швидко робити демонстрації HTML / CSS / JS, якими ви можете поділитися або працювати над ними пізніше, якщо ви створите безкоштовний акаунт. CodePen часто найкращий для речей, пов'язаних із CSS, завдяки мінімалістичному інтерфейсу та безлічі функцій, пов'язаних із CSS, демонстрації Plunker для JavaScript завдяки потужним функціям JS та JSFiddle для демонстрацій, з якими ви хочете співпрацювати з іншими в режимі реального часу завдяки редактору функція спільного використання.
  • Список ванілі: сховище плагінів та бібліотек JavaScript, що використовують лише ванільний JavaScript (тобто для їх роботи не потрібні бібліотеки, як jQuery)
  • YouMightNotNeedjQuery: Ви, мабуть, цього не робите. Переконайтесь самі.
  • PublicAPI: Ви коли-небудь задавались питанням, які загальнодоступні API існують? Не дивіться далі!
  • Gravit.io: Хмарний дизайн-додаток, що конкурує з Adobe Illustrator. (Безкоштовно!) Корисно для швидких макетів та веб-дизайну.
  • Adobe Kuler: Webapp допоможе вам створити гармонійні поєднання кольорів для будь-якого веб-сайту. Також є вітрина кольорових палітр “Explore”, створена іншими дизайнерами, а також система рейтингу, яка допоможе надихнути вас.
  • Назвіть цей колір: припиніть витрачати багато часу на те, щоб визначити, як називати свої змінні кольору менше / sass, і просто використовуйте їх законну назву з цим веб-додатком

Висновок

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

Як деякі з вас уже помітили, це мій перший допис у блозі, але ви можете бути впевнені, що я планую написати більше. Тільки не чекайте такого щотижня. Пам’ятайте: якість над кількістю!

Якщо у когось із вас залишились питання, сміливо залишайте коментар, і я зроблю все можливе, щоб якомога швидше зв’язатися з вами.

Сподіваюсь, це було вам корисно, до наступного разу, найкраще!

Оновлення в березні 18 року : Для тих, хто цікавиться, чим я займався, ось швидке оновлення статусу!

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