Пътуването ми да стана уеб разработчик от нулата без CS степен (и това, което научих от ...

Първо, нека се представя. Казвам се Сергей Гарсия и съм щатен разработчик от 2 години насам. По това време работих като преден разработчик както за консултантска фирма на Forbes 500, така и за малка компания.

Това може да не звучи като много опит, но завършването на втората ми година като разработчик за мен беше изключително важно. Това е така, защото нямах реален опит в уеб разработката - и не много опит в програмирането като цяло, освен някои основни обучения за C # и Java, които получих от няколко онлайн курса. Също така нямах степен по компютърни науки, тъй като завърших със специалност управление на ИТ проекти.

Никога не бях писал за моя опит, въпреки цялата помощ, която получих от прекрасни ресурси като Medium, Stack Overflow и Reddit's subreddits. Днес реших да променя това. Днес ще ви попълня какво се е случило правилно и кое не, така че ако тръгнете на това пътешествие, ще имате по-голям късмет от мен.

Знам, че има много статии като тази, но не много от тях обсъждат процеса в полза на допълнителни две години назад.

Ще започна с пътуването си, включително с това, което се е объркало по пътя. Ако просто ви е грижа какви са моите предложения за възможно най-краткия път за ставане на уеб разработчик от нулата, не се колебайте да преминете към последния раздел: Най-краткият път .

Така че, без допълнителни шумове, нека започнем!

Първи основи

След като реших, че искам да се занимавам с уеб разработка, първият въпрос на ума ми беше „Какво да науча?“ След като направих някои проучвания, в крайна сметка направих своя учебен път въз основа на това, което искаха повечето позиции на уеб разработчици от начално ниво, което беше:

  • JavaScript
  • HTML и CSS
  • CSS препроцесори (Less & Sass)
  • Адаптивен дизайн
  • Ъглов JS
  • Модели за дизайн
  • Git
  • NodeJS
  • Бегачи на задачи

Ето как мина.

Javascript

Започнах своето пътуване, изучавайки JavaScript чрез CodeSchool(платено) и Codecademy(Безплатно). Ако не знаете за тях, това са страхотни уебсайтове, които ви позволяват да се научите да кодирате, като кодирате в браузъра.

Открих, че учебните ресурси като този са най-добрите, когато тепърва започвате. Само имайте предвид, че този метод на обучение бързо се изморява, след като влезете в по-напреднали неща, тъй като техните алгоритми за проверка дали сте решили правилно примера на кода имат някои проблеми с точността. И двата им въвеждащи курса по JavaScript бяха изключителни и горещо ги препоръчвам.

След като извадих основите, продължих да получавам по-силна основа на JavaScript, като прочетох книгата Eloquent Javascript: A Modern Introduction to Programming от Haverbeke (безплатно).

Тази книга ми беше препоръчана от много хора във форумите на JavaScript като задължително четене и с основателна причина. Тази книга беше трудна - особено ако просто учиш програмиране като мен тогава. Но се радвам, че не се отказах и продължих. Беше феноменално поради обширния обхват на програмните концепции, които обхваща, дори понякога да беше малко безпощаден. Каквото и да правите, не пропускайте предизвикателствата на кода. След като завършите тази книга, най-накрая можете да кажете с увереност, че добре разбирате JavaScript.

Можете също така да научите jQuery (въпреки че наистина не препоръчвам да го изучавате все още - повече за това по-късно). Можете да го научите чрез курса Try jQuery на CodeSchool.

HTML и CSS

След като научих JavaScript, пристъпих към изучаването на основите на HTML & CSS и уеб дизайна чрез HTML & CSS учебния път на CodeSchool. Тези курсове са ми любими и до днес, тъй като темпото е страхотно и общият обхват на това, което обхващат, ми позволи да придобия по-силна основа за това.

Можете също така да превключите това лесно за нещо като курса на HTML и CSS на Codecademy и все пак да получите подобни резултати. Или ако сте готови за предизвикателство, курсът на Udacity Intro to HTML и CSS е далеч по-пълен и малко по-предизвикателен.

Бонус : Ако успеете да се възползвате от HTML и CSS на Jon Duckett : Дизайн и изграждане на уеб сайтовекнига, това е и солидна отправна точка за изучаване на HTML и CSS (с поръсване на уеб дизайн). Той е високо оценен (4.7 / 5 на Amazon), предлага солидно въведение в света на уеб разработката. Това е красива книга, благодарение на изчистения си дизайн с големи букви и цветни страници. Често се връщам към него, само за да му се възхищавам.

По-малко / Sass

За тези, които не са запознати, Less & Sass са CSS транспилатори, които ви позволяват да пишете CSS по по-елегантен начин. Това ви позволява да правите неща, които обикновено не се поддържат, като влагане на CSS правила. След като приключат, тези CSS транпилатори „компилират“ вашия код и го конвертират в нормален CSS.

В момента има 2 основни CSS транспилатори: Less и Sass . Sass е по-популярният, но установих, че обучението по-малко първо е по-лесно, главно защото използването на Sass на вашия компютър изисква също инсталиране на Ruby, което не ми харесваше.

Можете да получите бърз, но пълен преглед на Less с помощта на онлайн по-малко компилатор на WinLess и това са примери за код, за да видите как вашият Less код ще се превърне в CSS. Можете също да опитате Sass онлайн, като използвате SassMeister (макар че това не включва примери за кодове).

Няма значение дали първо ще научите по-малко или Sass. Те са изключително сходни, така че след като познаете едното, почти знаете другото. Можете да намерите страхотно бързо сравнение между Less и Sass в статията на Shelby Moulden Сравнение между LESS & SASS.

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

Първоначално научих за отзивчивия дизайн и Bootstrap, използвайки HTML и CSS пътя на Codeschool, но наскоро открих, че курсът на Udacity от Google по Responsive Web Design Fundamentals е фантастичен при обхващането на основите и извън него по много по-пълен начин, отколкото Codeschool.

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

Ако имате проблеми с разбирането на основните му принципи, прочетете публикацията в блога на Froont за 9 основни принципа на отзивчивия уеб дизайн. Той има красиви изчистени и прости анимации, които помагат да се илюстрират визуално принципите на отзивчивия уеб дизайн.

Ъглов JS

Тогава не знаех какво точно представлява AngularJS, но знаех, че всички говорят за него и че ако искам да стана уеб разработчик, трябва да го науча. Намерих решенията за дизайн на Google Developer в AngularJS, за да предоставят най-добрия общ преглед на това какво е AngularJS и как подобри създаването на уеб приложения.

Първо се сетих да науча AngularJS чрез официалната им документация, но това се оказа ужасна идея. Документацията не беше много лесна за начинаещи, а разхвърляното форматиране затруднява четенето и разбирането.

След това продължих да уча AngularJS чрез Codeschool. С моя положителен опит в курсовете по JavaScript и CSS също от там, очаквах не по-малко от страхотен курс. Сгреших. Курсът беше катастрофа от самото начало, тъй като алгоритъмът, използван за проверка дали правилно сте получили примера на кода, понякога не е работил правилно и е маркирал вашето явно правилно решение като неправилно. Имаше дори моменти, в които за отстраняване на повредената система за проверка беше необходимо само опресняване на страницата. Що се отнася до съдържанието на курса, то също не беше страхотно. Свърши добре работата с обяснението на основните компоненти на приложение AngularJS, но направи ужасна работа с интегрирането им в реално приложение, оставяйки ми много повече въпроси, отколкото започнах.

След известно търсене из форуми, попаднах на Egghead.io(безплатно / платено), където имах много по-голям късмет. Техният материал за курсове беше много по-изчистен, по-кратък и по-пълен, създавайки много по-добро изживяване. Да не говорим, че освен своите курсове, те имат 2–5-минутни уроци, които обхващат важни теми. (Например: Какво е контролер? Какво е филтър? Какво е $ scope?) Те улесняват разбирането на основите. Те също имат някои видеоклипове, които изискват плащане, но те обикновено са тези, които обхващат по-напреднали ъглови теми, които няма да ви трябват по-късно. Участвах в техния курс AngularJS Fundamentals и бях напълно доволен от резултатите (и в процеса станах голям фен на курсовете на Egghead.io).

Модели за дизайн

Моделите на проектиране са основно кодови решения, които могат да се използват многократно за решаване на често срещани софтуерни проблеми. Наличието на основа върху това ще ви направи много по-конкурентен разработчик на софтуер на който и да е език за програмиране. Това също ще ви улесни да разберете кода на други хора, тъй като бързо ще идентифицирате какъв модел на дизайн са използвали в своя код, за да го разберат по-добре.

Намерих 2-те най-добри източника, за да науча това, са шаблоните за проектиране на JavaScript на doFactory и обучителните модели за дизайн на JavaScript на Addy Osmani. Намерих doFactory много по-лесен за разбиране, докато книгата на Ади Османи беше много по-пълна.

Chrome DevTools

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

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

Ах, Git - инструментът, който никога не знаех, че ми трябва, докато не открих какво може да направи. По принцип Git ви позволява да следите промените, които правите в кода си, така че ако нещата се объркат, можете да се върнете към предишен момент във времето. Също така ви позволява да видите историята на вашия код.

Открих, че безплатният курс на CodeSchool Try Github е приятелски начин да започнете. Обучението на Atlassian за Git беше превъзходно при покриването на по-напредналите налични команди. Codeschool's 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 . Можете да изберете каквото искате, но открих, че Гълп е много по-лесен за учене и писане. Все още го предпочитам днес поради минималистичния, но същевременно мощен подход, базиран на тръби.

Открих, че курсовете на Scotch.io по Grunt и Gulp са едни от най-добрите там.

Предизвикателства, с които се сблъсках на първата си работа

След като разгледах основите на уеб разработката, бях готов за първото си интервю за уеб разработка за начална позиция. Няма да навлизам в подробности за интервюто, тъй като това не е основният фокус на тази статия. Но ще кажа, че ми казаха, че относително силните ми познания за JavaScript ми помагат да си осигуря позицията. (Благодаря, красноречив JavaScript!)

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

той две най-големи грешки, които открих в началото бяха:

  1. Страх от провал. Тъй като бях новото момче, непрекъснато се страхувах, че кодът ми не е сгрешен или недобре направен, така че прекарах много време, проверявайки всичко двойно и се придържах към най-добрите практики за кодиране. Поради това рядко се опитвах да решавам по творчески нови начини поради страха ми, че в крайна сметка може да не работи правилно. Това ефективно спря моето шофиране, за да науча нови неща.
  2. Правене на неща, защото „Х“ човек, който знае по-добре от мен, каза така. Отначало правех това много. Макар и да не е напълно погрешно, правенето на нещата по определен начин само защото експертът по въпроса „Х“ каза така - без да знае защо - води до това, че всъщност не знам кога защо нещата са направени така, както бяха. Скоро разбрах, че има изключения от всичко и че винаги трябва да знаете причината за най-добрите практики.

За щастие имах екип за разбиране, ръководен по време на първия ми проект, който ми помогна да преодолея тези проблеми. Постоянно ме мотивираше да опитвам нови неща, дори понякога нещата да се объркваха. Освен това ми каза да поставя под съмнение всичко - дори ученията му.

С времето научих урока си. Оттам насетне винаги съм бил човек, който с нетърпение очаква да опита нови неща. Винаги се опитвам да разбера защо съществуват най-добрите практики, кога са прави и кога не се отнасят за дадена ситуация.

Използването на AngularJS в действителен проект също представляваше доста голямо предизвикателство за мен. Това беше главно защото много от нещата, които направих с него, направих, без да разбирам напълно защо се случиха. Мислех за това като „ъглова магия“.

Много пъти ми се искаше да знам как всъщност работи Angular, но беше страшно да гледам документацията.

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

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

„Библиотеките и рамките може да остареят, но предлаганите от тях концепции и решения често преживяват изпитанието на времето.“

Той беше прав. AngularJS може да е остарял, но пълното разбиране на магията зад него ми помогна по-добре да разбера архитектурата на уеб компонентите на React, която подобри концепцията за директивите на Angular. Също така ми помогна да разбера как ReactJS придоби толкова голяма популярност, както и какво бъдеще очаква.

Не си спомням да съм се сблъсквал с други големи предизвикателства в следващите си проекти. Но това, което ще кажа е, че през 2-те години, в които се занимавам с уеб разработка, първото нещо, което спомогна за успеха (според собствените ми колеги) беше моето вълнение и моят мощен стремеж да бъда винаги нащрек за нови неща, които да научите. Скоро разбрах, че това е печеливша комбинация с уеб разработката, тъй като нещата тук се променят наистина, много бързо, с нови рамки и библиотеки, които постоянно се появяват.

От другата страна на монетата, другото нещо, което ми помогна един тон - и нещо, което всъщност разбрах съвсем наскоро - беше разбирането какво да не уча. Това стана критично за моя процес да стана по-добър уеб разработчик.

Не е необичайно да видите хора, които критикуват необичайно бързия темп на развитие на уеб технологиите или как нова библиотека или рамка на JavaScript излиза почти всеки ден. Но след време видях светлината и накрая разбрах:

Не е нужно да научавате всяка нова библиотека или рамка, която излиза.

Често е чудесна идея да направите просто приложение за здрав свят, за да можете да видите какво предлага рамката. След това можете да продължите напред. Но обикновено трябва да се опитате да се съсредоточите върху това, което най-добре отговаря на нуждите на вашия проект. В началото това може да е трудно, но за щастие съществуват чудесни места като Stack Overflow, Medium и Reddit, където можете да намерите полезни дискусии между рамките и да разберете кои най-добре отговарят на конкретните ви случаи на употреба.

Продължаване

През следващите години продължих непрекъснато да се усъвършенствам по следните начини

JavaScript

След като приключите с красноречивия JavaScript, е доста лесно да се каже и да се почувствате, че сте усвоили JavaScript, но след това идва You Don't Know JS и той абсолютно ви унищожава (или поне го направи). Тази поредица от книги (между другото безплатна) ми беше споменавана няколко пъти от няколко старши уеб разработчици в офиса като книгата за четене и че само докато я прочета, мога да кажа, че знам напълно JavaScript. Те бяха прави, тъй като страница след страница непрекъснато ми взривяваше колко наистина е бил сложният JavaScript, както и много, много често срещани клопки, които могат да имат неопитни и опитни хора без подходящо разбиране на JavaScript.

Четенето на тази поредица от книги наистина ми отвори ума и горещо препоръчвам на всеки, който иска да се нарече експертен разработчик на JavaScript. След като отстраните това, има 2 допълнителни ресурси, които горещо препоръчвам, за да получите още по-разширени познания за JavaScript;

  • JavaScript, The Better Parts: Удивителна беседа на Д. Крокфорд, която говори за най-големите слабости на JavaScript, това са „Foot Guns“ и как да ги използваме като силни страни.
  • Двата стълба на 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 Управление на оптимизацията на мобилната производителност и статията High Performance Animation на 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 Fundamentals, където ще изградите напълно работещо приложение ReactJS и след това ще го мигрирате към синтаксиса ES6. Можете да продължите с официалната документация на ReactJS, която е много добре направена и ще ви позволи да я овладеете напълно.

Тъй като React е само гледката, силно се препоръчва да научите Redux. Повечето курсове по Redux са малко сложни по мое мнение, но CSS трикове изравняване с React: Redux прави страхотен баланс между простота и информативност при започване на работа с Redux.

Може би сте чували за Flux в този момент, но ако се чудите защо да използвате Redux над Flux, разгледайте въпроса за Stack Overflow Защо да използвате 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), или да вземе няколко много специфични курса, за които знаят, че са много добре приети и прегледани (Например, Ъгловите основи на Джон Папа).

Като цяло, ако искате да използвате Pluralsight, уверете се, че посещавате курсове, подбрани от някой, който ги е взел първи и които са признати за висококачествени и полезни.

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

След като прегледахме пътищата за обучение на HTML, CSS и JavaScript, виждам, че лесно можете да придобиете основата на почти всичко. Не ми вярвате? Просто погледнете техните учебни записи и ми кажете, че не е невероятно. Разбира се, това е малко скъпо при $ 30 USD на месец, но според мен си струва невероятно. (Плащам го в момента, за да науча WordPress, тъй като ми е необходим за проект на свободна практика и материалът е страхотен).

Дума за платените курсове

Почувствах нужда да говоря по този въпрос, тъй като забелязах общия консенсус, че можете да научите програмиране, без да плащате нито стотинка, и да сте толкова конкурентоспособни, колкото тези, които плащат за курс. Въпреки че е вярно, не мога да подчертая достатъчно стойността, която плащате за правилния курс. Разбира се, доста от най-ценните материали за курса, за които съм писал, са безплатни, но много от тях също са платени. Главно защото понякога просто не можеш да победиш, ако някой внимателно ти обясни нещата по визуален начин.

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

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

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

Тайният сос за успех

Срещнах много разработчици през последните 2 години, когато съм уеб разработчик. По време на пътуването си срещнах няколко разработчици, които наистина се откроиха - разработчици, които очевидно бяха в собствена лига и на които аз и всички останали се надявахме. Открих, че тези хора споделят доста характеристики, които бих искал да споделя с вас точно сега. Това според мен е тайният сос за успешен уеб разработчик:

  • Обичай това, което правиш. Това просто е най-важната характеристика на всички тях. Ако не обичате това, което правите (било то CSS Styling или JavaScript), то наистина ще се покаже в това, което правите. Страстните към това, което правят, често ясно се открояват от тълпата.
  • Бъдете щедри и споделяйте знанията си . Много е лесно да искате да запазите този нов CSS / JavaScript хак, който открихте, който решава проблемите на проекта, в тайна, но моля, не го правете. Хората, които споделят най-много знанията си, често са най-ценните, тъй като те могат да бъдат поставени във всякакъв екип и да подобрят качеството му с огромна разлика.
  • Винаги бъдете нащрек за нови неща . Повечето от успешните разработчици, които съм срещал, споделят тази обща черта. Независимо дали става дума за четене на блогове, прекарване на много време в дискусии, свързани с програмиране, или дори говорене за новостите в уеб разработката по време на обедни почивки. Постоянното търсене на нови неща позволява на най-добрите разработчици винаги да изпреварват кривата.

Най-краткият маршрут

Ууу, тази статия отне известно време (6 часа и броене). Почти сме готови! Може би се чудите: „Добре, готина история, но кой е най-бързият маршрут?“ И така, ето го.

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

Javascript

  1. Учебният път на Javascript на CodeSchool или Treehouse (платен) ИЛИ Javascript курс на Codecademy
  2. Красноречив JavaScript
  3. Не знаете JS
  4. JS: Правилният път
  5. Научете ES6 от Egghead.io

HTML и CSS

  1. Пътят за обучение на HTML и CSS на CodeSchool или Treehouse (платен) ИЛИ HTML и CSS: Проектиране и изграждане на уебсайтове от курса на HTML и CSS на John Ducket ИЛИ 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 Commands от Smashing Magazine
  4. Автоматизирайте задачите си лесно с Gulp.js от Scotch.io

Ъглов JS

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

ReactJS

  1. Learning React.js: Първи стъпки и концепции от Scotch.io
  2. Въведение в уебпак от Egghead.io
  3. React Fundamentals от Egghead.io
  4. Изравняване с React: Redux от CSS трикове

Заден край

  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. Безплатно.
  • 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: Вероятно не го правите. Вижте сами.
  • PublicAPI: Някога замисляли ли сте се какви публични API съществуват? Не търсете повече!
  • Gravit.io: Облачно базирано приложение за дизайн, конкуриращо се с Adobe Illustrator. (Безплатно!) Полезно за бързи макети и уеб дизайн.
  • Adobe Kuler: Webapp, за да ви помогне да създадете хармонични цветови комбинации за всеки уебсайт. Също така разполага с „Explore“ витрина с цветни палитри, създадена от други дизайнери, както и система за класиране, която ви помага да вдъхновите.
  • Дайте име на този цвят: Спрете да прекарвате много време, за да разберете как да назовете цветовите си променливи в less / sass и просто използвайте законното им име с това уеб приложение

Заключение

Бих искал само да кажа, че наистина ми беше приятно да пиша това и наистина ме радва, че най-накрая успях да върна нещо на невероятно подкрепящата общност за програмиране навсякъде.

Както някои от вас вече забелязаха, това е първата ми публикация в блога, но можете да бъдете сигурни, че планирам да напиша още. Просто не очаквайте по една всяка седмица. Запомнете: качеството над количеството!

Ако някой от вас остане с някакви въпроси, не се колебайте да оставите коментар и аз ще направя всичко възможно да се свържем с вас възможно най-скоро.

Надявам се това да е било полезно за вас, до следващия път, най-добре!

Актуализация от март '18 : За тези, които са любопитни какво съм замислял, ето бърза актуализация на състоянието!

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