Оно што сам научио о фронт-енд развоју од 12. до 22. године

Фотографију Тедди Келлеи на Унспласх-у

Понекад ме пријатељи питају како сам се снашао у развоју. Рекао бих да сам некако налетео на то; али истина је била, заправо нисам знао. Тако сам прошле недеље дубоко заронио у мрачне углове Интернета како бих ископао сваки фронт-енд пројекат на коме сам радио од своје 12 године.

И дечко, је ли то било зарона.

Па ево их. Свака ужасна одлука, свака неугодна веб локација, свака грешка и научена лекција, учинили су ме предњим програмером какав сам данас. Ево их, у свом пуном нефилтрираном сјају.

(Ако тек крећете у развој, укључио сам елементе знања које сам научио успут, за које се надам да ће вам уштедјети време на вашем путовању. Ако сте стара рука ... Надам се овој причи даје вам се кикота или два ‍♂)

12 година

Дозволите ми да поставим сцену. Било је то 2007. Стеве Јобс је управо представио иПхоне. Сви су користили МСН Мессенгер. Нико није волео Виндовс Виста. То су ствари које се сећам, али не сећам се када сам тачно одлучио да направим веб страницу.

Свидјела ми се идеја да нешто стављено на интернет може било ко видети широм света, попут магије. Сигурно не би могло бити тако тешко. Може ли?

Моја прва веб локација - пут од хиљаду корака ... почиње маркизама и флеш додацима?

Нисам у праву. Је било тешко. Нисам имао појма шта радим.

У једном тренутку нисам могао ни да схватим како да користим <бр /> ознаку која ствара прекид линије. Збунио сам се зашто редовно пробијање кода није донијело сличан прелом на веб страници. Покушао сам користити ознаке <п> која ствара одломке, али нисам разумео концепт паковања. Чак сам покушао да поставим таблицу само да бих започео нови ред.

Да ствар буде још гора, упркос том тешком раду, било је још грозно (чак и за 2000-те). Сјећам се да су ми се другови из разреда исмијавали кад сам им подијелио везу преко МСН Мессенгера. Онда опет, могу ли их кривити? Имао је сваку грозност Веб 1.0: гиф, маркети, позадине са поплочаним плочицама, Фласх видгет-ове ... како сте га назвали. Био сам обесхрабрен. И тако, научио сам своју прву лекцију.

Ваш први пројекат ће бити лош. Моја прва ХТМЛ страница била је ужасна. Моја прва ЦСС датотека била је тако неуредна, Марие Кондо је не би дирала. Моја прва мобилна апликација је игнорисана. Моја прва апликација Реацт падала је сваког минута. Тешко је учити "фронт-енд" јер је пресек многих идеја из дизајна и рачунарске науке, и у реду је да га не добијете први пут.
Обећавам да ће бити лакше. Временом ћете схватити да сте изградили скуп преносивих вештина (на пример, ХТМЛ ће вам помоћи у изградњи Реацт компоненти и изгледа Андроид активности). Препознавање да сте у нечему лоши први је корак ка томе да будете добри у првом плану.

Знао сам да је лоше, али сам такође знао да могу и боље. Тако сам за Ноћ вештица, уз помоћ Гимпа, место зачинио свежим омотом бундеве и Еванесцент типографијом. Хеј, чак је имала и оригиналну авантуристичку игру у којој су играчи спасили маштарски свет фанта

Током редизајна, научио сам и уредан трик. Схватио сам да се у свету ХТМЛ-а и ЦСС-а не крије. Свака техника, свака тајна била је удаљена само један Виев Соурце. Ни Аппле није могао сакрити тајне својих прелепих страница са производима, а ја бих провео сате на њиховим веб локацијама разоткривајући њихове мистерије.

Ако би то могао неко други, онда бих и ја то могао.

Негдје на путу, моји другови из разреда престали су да ме исмијавају.

Погледајте извор. Кад год на веб локацији видите нешто цоол, запитајте се да ли можете да га репродукујете. Можете ли то учинити само са ЦСС-ом? ЈаваСцрипт? Ако не, кликните десним тастером миша на њега> кликните на „Испити“ (Цхроме) или Алатке> Веб Девелопер> Инспецтор (Фирефок) и покушајте да код обрнете. Означите или задржите листу кул ефеката које бисте желели испробати једног дана.

14 година

Пре Снапцхат-а и Инстаграма, деца су имала блогове. Сви моји пријатељи су га имали. Многи од њих радо су персонализовали своје блогове ван тематским темама. Али не сирее, не ја. О, не.

Почео сам са модификовањем постојећих тема за себе. Тада бих направио теме као поклоне за рођендане својих пријатеља. Дјеца из других разреда долазили су да ме питају за теме. Постао сам тип са блога

Стварно сам упао у пруге

И тако је започео мој прави корак у ХТМЛ. Свака тема била је ХТМЛ-документ на једној страници са уграђеним ЦСС-ом. Користећи псеудо ознаке попут <$ БлогИтемТитле $>, могао сам контролисати како и где је сваки елемент постављен. Псеудо ознаке би касније добављач услуга заменио стварним садржајем. Коначно, ослободио сам се ВИСИВИГ уредника!

Толико дуго, трипод.цом!

Сјећам се да сам проводио сате премјештајући елементе са ЦСС-ом, учио разлике између врста приказа и положаја, маргина и паддингс. За једну одређену тему користио сам четворобојне пруге као статичну позадину иза белог предњег дела са прозирним узорцима. Сваки елемент морао је да буде савршено поравнан, тако да се узорак открио када је корисник скроловао:

Место за хоризонтално померање, тако бујно!

Волио сам развијати теме. Схватио сам да веб страница није само 2Д, већ одговара људима са ЈаваСцрипт и ЦСС псеудо селекторима, попут: лебдећи и: активан. Расли су и смањивали се, бледили и излазили ван.

Била је то жива интерактивна површина.

Када су добро изведене, ове интеракције одушевиле су људе и волео сам гледати реакције мојих пријатеља на њихове нове теме. Гурнуо сам себе да испробам нове идеје и технике да откријем у чему људи уживају.

Развој за интеракције. Добри предњи елементи су откривени (пружа трагове о томе како их користити) и даје повратне информације (реагује на интеракције на информативан начин). На пример, дугме може мењати боје позадине на лево и повећати непрозирност када се кликне. Ево доброг видеа и књиге о овој теми.

16 година

Јула 2013. регистровао сам свој први домен код одговарајућег веб домаћина осећао се као обред проласка, као да коначно радим нешто стварно. Основао сам свој портфолио и од тада је дом мојих пројеката и експеримената. Како сам стизао нове вештине, растао је и развијао се поред мене.

Одрастају тако брзо

Не могу прецијенити колико ми је корисно било постојање домена и доброг послужитеља. Могао бих експериментирати са новим предњим идејама на вебу. Водио сам црон послове који су ми олакшали живот. Кад год ми је био потребан нови простор за посао клијента или школе, могао бих створити нови поддомена.

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

Подесите портфолио. Ово је сјајан пројекат за научивање о размештању на вебу. Једноставне опције укључују ФТП, који вам омогућава копирање датотека и њихово послуживање са сервера. Када вам то буде пријатно, препоручујем вам да подесите Континуалну интеграцију и Гит. Испробао сам неколико провајдера пре него што завршим са дељеним хостингом на Дреамхосту (аффилиате линк) с чиме сам био изузетно задовољан. Али дефинитивно постоје бесплатне алтернативе.

18 година

У Сингапуру 18-годишњаци морају провести двије године у војсци. Нешто среће, био сам смештен у јединицу војске која тражи мобилног програмера. Питали су ме да ли сам икада раније радио нешто слично. Нисам, али колико би се то могло разликовати од израде веб странице? Па сам рекао да.

Испада да нисам грешио. Али хеј, до тада, нисам био онај који би дозволио да ме заустави недостатак искуства или квалификација.

Предговоримо ово говорећи, иако сам раније радио са неким ЈаваСцрипт-ом, нисам имао концепт објектно оријентисаног програмирања, што је било посебно важно у развоју апликација. Мој први задатак је био да развијем Андроид апликацију за постојећи АПИ који омогућава војницима да зову болесне. Моје друго је било креирање едукативне игре.

Провела сам дане на Гооглеу и СтацкОверфлову постављајући стотине најосновнијих питања попут „Како да направим текстуално поље“ или „Како да направим дугме да радим ствари“. Провела сам недеље ударајући главом о тастатури преко НуллПоинтерЕкцептионс. По кожи зуба, успео сам да извагнем нешто на пола.

Иако су апликације изгледале привлачно, код иза тога био је све само не. Било је линија и линија шпагети кода, без јасних архитектонских образаца, а логика је била чвршће спојена од ограде ланчане везе. Било је немогуће одржавати и из тог разлога ниједна од апликација које сам направио није се могла активно ажурирати.

Прошло би неколико година док не прочитам о томе како написати скалабилан, чист предњи код. Али кад сам то урадио, схватио сам зашто је то важно.

🧪 Пишите тестове. Писање тестова је вероватно најефикаснија навика коју сам преузео за писање бољег кода. Сећате се како сте, када учите да шифрирате, написали функције које су покушавале да прођу неколико тест случајева? То је тако, али сада сте и ви написали тестове! Писање добрих тестова за сваку функцију (јединице јединице) омогућава вам да осигурате да ваш код функционише чак и када мењате друге делове базе кода.
Одвојите своје одговорности. Да ли имате функцију која ради више ствари? Поделите их на више функција. Да ли имате класу са неколико делова метода за примену различитих функција? Поделите их на више класа. Подјела одговорности је можда најважнија од принципа СОЛИД. То чини вашу шифру читљивом и скалабилном. Цлеан Цоде: Приручник о Агиле Софтваре Црафтсмансхип (аффилиате линк) Роберта Мартина обавезно је прочитати за све напредне програмере.

20 година стар

Јуна 2016. објавио сам апликацију у Гоогле Плаи продавници. Помаже студентима да науче о физици, што је био предмет који сам одувек волео. Првог дана је имао 3 преузимања. Другог дана имао је 5. Трећег дана имао је 1.000. У почетку то нисам приметио, али број је стално растао. У првом месецу примио је 7000 преузимања. До септембра месечне инсталације су порасле на 15.000.

Како? Уопште нисам радио маркетинг.

Показало се да је неко делио апликацију на Реддиту (два пута!) И чинило се да је људима то прија. Покупило га је неколико места за критике и блогова. Људи су почели да праве видео записе о томе на ИоуТубе-у. У овом тренутку, био сам толико узбуђен да сам добијао палпитације. Мислим да сам у неком тренутку плакао. Осјећао сам се као да се мој труд напокон исплатио.

Вратили су ми се када сам цртао теме за блогове својих пријатеља као поклоне за њихов рођендан. Уместо тога, сада сам давао хиљаде људи широм света. Одједном сам схватио колико волим развијање интерфејса који могу помоћи људима. То су људи волели.

Најбољи део овог искуства је упознавање људи који користе моју апликацију. Одговарао сам на сваки коментар Реддита и поздрављао е-пошту о било којим физичким питањима. Понекад имам лепе мале поруке, попут ове:

Ово је моја омиљена адреса е-поште из апликације коју сам направио пре овога
Ицк Изаберите пројекат до кога вам је стало. Читали сте књиге. Завршили сте курс Цодецадеми. Савладали сте здраве светове и рекурзивне функције. Шта сад? Добро размислите у којим сте областима релативни стручњак. Јесте ли угоститељ? Птица птица? Мајстор тривијалности? Размислите о нечему што бисте користили. Размислите о томе како можете помоћи људима око себе или океану. Пређите кроз апликације на вашем телефону - да ли можете да побољшате било коју од њих?
Ако мислите да сте пронашли нешто, зароните право. Не чекајте док не будете спремни, не чекајте дозволу. Баци се у дубоки крај; возите успоне и падове фронт-енд развоја. Тако креирате нешто што чини разлику.

22 година стар

Наставио сам истраживати нове идеје и технике, радећи на пројектима за које сам осећао страст. Неке од њих биле су веома изазовне, али научила сам да користим оно што знам. Фронт-енд развој је пун преносивих вештина.

Реагирање је било откривење. Након година одвајања погледа од логике, био је дах свежег ваздуха пронаћи оквир који елегантно интегрише ХТМЛ, податке и логику. Било је то као да сам секао дрвеће ножем за маслац свих ових година, а неко ми је управо предао моторну тестере.

Андроид је сада задовољство радити. Многе тачке бола су збринуте и Котлин је задовољство писати. Неки од најбољих светских умова раде на томе да побољшају напредни развој мобилних телефона, уз помоћ Реацт Нативе-а, Флуттера и многих других.

Сјајно је време бити фронтмен програмер.

Пре неколико година развио сам одредишну страницу са натписом: Ви сте талентованији него што замишљате. Волео бих да ми је то неко рекао када сам имао 12 година, као што сам се спремао да одустанем након свог првог неуспеха.

Касније ми је глумачки учитељ рекао да талент није ништа друго него количина напорног рада. На тај начин, имао сам велику срећу да су ме догађаји рано започели. Захвалан сам људима које сам упознао током пута који су ме водили и поверили ми, глупи тинејџер, својим пословима и идејама. Почео је као усамљени хоби дуги низ година, али сада имам пријатеље који деле моје страсти.

Прошло је сјајних 10 година и не могу да чекам шта ће бити следеће.

Пронађите своју заједницу. Ниједна особа није острво и ниједан предњи дев није изолован плутајући див елемент. Придружите се локалним сусретима. Идите на конференције. Пратите гит складишта која користите. Пишите публикацијама. Слушајте подцасте. Клизните у неке твиттер ДМ-ове. Пронађите људе који ће вам рећи: Више сте талентовани него што замишљате.

Свиђа ми се ова прича? Волио бих да ступим у контакт!
Поздравите се на Твиттеру, ЛинкедИн-у или погледајте моју веб локацију.