Какво научих за фронталното развитие от 12 до 22 години

Снимка на Теди Кели на Unsplash

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

И момче, беше ли гмуркане.

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

(Ако тепърва започвате в разработването отпред, аз включих самородки от знания, които научих по пътя, които се надявам да ви спестят време в пътуването ви. Ако сте стара ръка ... Надявам се тази история ти се киска или два )

на 12 години

Нека да настроя сцената. Беше 2007 г. Стив Джобс току-що представи iPhone. Всички използваха MSN Messenger. Никой не харесваше Windows Vista. Това бяха неща, които помня, но не помня кога точно реших да направя уебсайт.

Хареса ми идеята, че нещо, пуснато в интернет, може да бъде видяно от всеки по света, като магия. Със сигурност не може да е толкова трудно. Може ли?

Първият ми уебсайт - пътуване на хиляда стъпки ... започва с маркировки и флаш джаджи?

Сгреших. Беше трудно. Нямах представа какво правя.

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

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

За да се влошат нещата, въпреки цялата упорита работа, тя все още беше ужасна (дори за 2000-те). Помня, че моите съученици се подиграваха, когато споделих връзката с тях през MSN Messenger. Тогава отново, бих ли могъл да ги обвиня? Имаше всяко зверство на Web 1.0: gif, макети, лошо облицовани фонове, Flash джаджи ... ти го казваш. Бях обезкуражен. И така, научих първия си урок.

First Първият ви проект ще бъде лош. Първата ми HTML страница беше ужасна. Първият ми CSS файл беше толкова разхвърлян, Мари Кондо не би го докоснала. Първото ми мобилно приложение беше игнорирано. Първото ми приложение React се срива всяка минута. Ученето на предния край е трудно, защото е пресечната точка на много идеи от дизайна и компютърните науки и е добре да не го получите за първи път.
Обещавам, че става по-лесно. С течение на времето ще разберете, че сте изградили набор от преносими умения (HTML например ще ви помогне както с изграждането на React компоненти, така и с оформлението на Android активност). Признаването, че сте лоши в нещо, е първата стъпка към доброто в предния край.

Знаех, че е лошо, но също знаех, че мога да се справя по-добре. Така че за Хелоуин, с помощта на Gimp, подправих сайта със свежо палто от тикви и типография на Evanescent. Хей, дори имаше оригинална приключенска игра, в която играчите спасиха фентъзи свят с магия

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

Ако някой друг би могъл да го направи, тогава бих могъл и аз.

Някъде по пътя съучениците ми спряха да се подиграват с мен.

Преглед на източника. Всеки път, когато видите нещо готино в уебсайт, попитайте се дали можете да го възпроизведете. Бихте ли могли да го направите само с CSS? JavaScript? Ако не, кликнете с десния бутон върху него> щракнете върху „Проверете“ (Chrome) или Инструменти> Уеб разработчик> Инспектор (Firefox) и опитайте да реинженирате кода. Маркирайте или запазете списък с готини ефекти, които искате да изпробвате някой ден.

14 годишен

Преди Snapchat и Instagram децата имаха блогове. Всичките ми приятели имаха такъв. Много от тях бяха щастливи да персонализират блоговете си с извън тестови теми. Но не сирее, не и аз. О, не.

Започнах с промяна на съществуващите теми за себе си. Тогава бих създал теми като подаръци за рождените дни на приятелите си. Деца от други класове дойдоха да ме питат за теми. Станах човек на блога

Попаднах наистина на ивици

И така започна истинският ми набег в HTML. Всяка тема беше HTML страница с една страница с вграден CSS. Използвайки псевдо маркери като <$ BlogItemTitle $>, можех да контролирам как и къде се поставя всеки елемент. По-късно псевдо маркерите ще бъдат заменени с действително съдържание от доставчика на услуги. Накрая се освободих от ограниченията на редакторите на WYSIWYG!

Толкова дълго, tripod.com!

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

Хоризонтален сайт за превъртане, толкова остър!

Обичах да разработвам теми. Разбрах, че уеб страница не е само 2D, но отговаря на хора с псевдоселектори за JavaScript и CSS, като: hover и: active. Те растяха и се свиваха, избледняваха навътре и навън.

Това беше жива, интерактивна повърхност.

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

️Разработка за взаимодействия. Добрите елементи от предния край са откриваеми (предоставят указания как да се използват) и предоставят обратна връзка (реагира на взаимодействия по информативен начин). Например, бутон може да промени цветовете на фона при задържане и да увеличи непрозрачността при натискане. Ето едно добро видео и книга по темата.

16 годишен, годишна

На юли 2013 г. регистрирах първия си домейн с подходящ уеб хост Усещах се като обред на преминаване, сякаш най-накрая правя нещо истинско. Създадох портфолиото си и оттогава той е дом на моите проекти и експерименти. Докато набирах нови умения, тя растеше и се развиваше до мен.

Те растат толкова бързо

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

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

Създаване на портфолио. Това е страхотен проект, за да научите за разполагането в мрежата. Простите опции включват FTP, който ви позволява да копирате вашите файлове и да ги обслужвате от сървър. След като ви е приятно с това, препоръчвам ви да настроите непрекъсната интеграция и Git. Опитах няколко доставчика, преди да завърша с споделен хостинг на Dreamhost (партньорска връзка), от който бях изключително доволен. Но определено има безплатни алтернативи.

18 годишен

В Сингапур 18-годишните трябва да прекарат две години във военните. По някакъв късмет, бях командирован в армейско звено, което търси мобилен разработчик. Попитаха дали съм правил нещо подобно преди. Не бях, но колко различно може да бъде от създаването на уебсайт? Затова казах „да“.

Оказва се, сгреших. Но ей, дотогава не бях един, който да позволи на липсата на опит или квалификации да ме спре.

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

Прекарах дни в Google и StackOverflow, задавайки стотици от най-основните въпроси като „Как да създам текстово поле“ или „Как да накарам бутон да върша нещата“. Прекарах седмици, като блъсках главата си по клавиатурата по NullPointerExceptions. По кожата на зъбите ми успях да изтръгна нещо наполовина прилично.

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

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

🧪 Пишете тестове. Писането на тестове е може би най-ефективният навик, който взех за писане на по-добър код. Спомнете ли си как, когато се научите да кодирате, написахте функции, които се опитаха да преминат няколко тестови случая? Така е, но сега вие също пишете тестовете! Писането на добри тестове за всяка функция (единични тестове) ви позволява да гарантирате, че кодът ви работи дори когато променяте други части от кодовата база.
Разделете отговорностите си. Имате ли функция, която прави множество неща? Разделете ги на няколко функции. Имате ли клас с няколко парчета методи, реализиращи различни функции? Разделете ги на няколко класа. Разделянето на отговорностите е може би най-важното от принципите на SOLID. Това прави кода ви четим и мащабируем. Чист код: Наръчник за Agile Software Craftsmanship (партньорска връзка) от Робърт Мартин е задължително четиво за всеки преден разработчик.

20 годишен

През юни 2016 г. публикувах приложение в магазина на Google Play. Помага на учениците да научат за физиката, което беше тема, която винаги съм обичал. Първия ден имаше 3 изтегляния. На втория ден имаше 5. На третия ден имаше 1000. Първоначално не го забелязах, но броят продължаваше да расте. През първия си месец той получи 7000 изтегляния. Към септември месечните инсталации нараснаха до 15 000.

Как? Изобщо не бях правил маркетинг.

Оказва се, някой сподели приложението на Reddit (два пъти!) И хората сякаш го харесват. Той беше взет от няколко сайтове и блогове за преглед. Хората започнаха да правят видеоклипове за това в YouTube. В този момент бях толкова развълнуван, че получавах сърцебиене. Мисля, че плаках в един момент. Имах чувството, че цялата ми упорита работа накрая се отплаща.

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

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

Това е любимият ми имейл от приложение, което направих преди това
Ick Изберете проект, който ви интересува. Ти четеш книгите. Завършихте курса по Codecademy Усвоили сте здрави светове и рекурсивни функции. Сега какво? Помислете добре в кои области сте относителен експерт. Хранител ли сте? Ловец на птици? Майстор на дреболиите? Помислете за нещо, което бихте използвали. Помислете как можете да помогнете на хората около вас или океан далеч. Превъртете приложенията на телефона си - можете ли да подобрите някое от тях?
Ако смятате, че сте намерили нещо, се гмурнете направо. Не чакайте, докато сте готови, не чакайте разрешение. Хвърлете се в дълбокия край; возете върховете и ниските нива на предно развитие. Ето как създавате нещо, което прави промяна.

22-годишен

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

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

Android вече е удоволствие да работите. Погрижени са много точки на болка и Котлин с удоволствие пише. Някои от най-добрите световни умове работят за подобряване на мобилното развитие отпред, с React Native, Flutter и много други.

Чудесно време е да бъдете разработчик.

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

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

Изминаха страхотни 10 години и не мога да чакам какво следва.

Намерете вашата общност. Никой човек не е остров и нито един преден дев не е изолиран плаващ елемент на div. Присъединете се към местните срещи от предния край. Отидете на конференции. Следвайте git хранилища, които използвате. Пишете на публикации. Слушайте подкасти. Плъзнете в някои туитър DM. Намерете хора, които ще ви кажат: Вие сте по-талантливи, отколкото си представяте.

Хареса ли ви тази история? Обичам да се свържа!
Кажете здрасти на Twitter, LinkedIn или разгледайте моя уебсайт.