Što sam naučio o front-end razvoju od 12. do 22. godine

Fotografiju Teddy Kelley na Unsplash

Ponekad me prijatelji pitaju kako sam se snašao u razvoju. Rekao bih da se nekako nađem u tome; ali istina je bila, zapravo nisam znao Tako sam prošli tjedan duboko zaronio u mračne kutove Interneta kako bih iskopao svaki front-end projekt na kojem sam radio od svoje 12 godine.

I dečko, je li to bilo zarona.

Pa evo ih. Svaka užasna odluka, svaka neugodna web stranica, svaka greška i naučena lekcija zbog čega sam postao prednji programer kakav sam danas. Evo ih, u svom svom nefiltriranom sjaju.

(Ako tek započinjete u razvoju, uvrstio sam elemente znanja koje sam naučio usput, za koje se nadam da će vam uštedjeti vrijeme na vašem putovanju. Ako ste stara osoba ... Nadam se da će ova priča daje vam se kikota ili dva )

12 godina

Dopustite mi da postavim scenu. Bilo je 2007. Steve Jobs upravo je predstavio iPhone. Svi su koristili MSN Messenger. Nitko nije volio Windows Vista. To su stvari kojih se sjećam, ali ne sjećam se kad sam točno odlučio napraviti web stranicu.

Svidjela mi se ideja da nešto stavljeno na web može vidjeti bilo tko u svijetu, poput magije. Sigurno ne bi moglo biti tako teško. Može li?

Moja prva web stranica - put od hiljadu koraka ... započinje s maketama i flash widgetima?

Bio sam u krivu. Bilo je teško. Nisam imao pojma što radim.

U jednom trenutku nisam mogao ni shvatiti kako koristiti
oznaku koja stvara prekid linije. Bio sam zbunjen zašto redoviti prekid retka u kôdu nije donio sličan prijelaz na web stranici. Pokušao sam upotrijebiti

​​oznake koje stvaraju odlomke, ali nisam razumio koncept prevrtanja. Čak sam pokušao postaviti tablicu samo da bih započeo novi redak.

Da stvar bude još gora, unatoč tom teškom radu, još uvijek je bila grozna (čak i za 2000-te). Sjećam se da su se moji drugovi iz razreda ismijavali kad sam im podijelio vezu preko MSN Messengera. Onda, mogu li ih kriviti? Imao je svaku zvjerinu Web 1.0: gif, marketi, pozadine sa popločanim pločicama, flash widgete ... kako to zoveš. Bio sam obeshrabren. I tako, naučio sam svoju prvu lekciju.

Vaš prvi projekt će biti loš. Moja prva HTML stranica bila je užasna. Moja prva CSS datoteka bila je toliko zabrljata da je Marie Kondo ne bi dirala. Moja prva mobilna aplikacija bila je zanemarena. Moja prva aplikacija React srušila se svake minute. Teško je naučiti početno, jer je sjecište mnogih ideja iz dizajna i informatike, i u redu je ne prvi put.
Obećavam da će biti lakše. S vremenom ćete shvatiti da ste izgradili skup prenosivih vještina (na primjer, HTML će vam pomoći u izgradnji React komponenti i izgleda aktivnosti Android-a). Prepoznavanje da ste u nečemu loši prvi je korak da budete dobri u prvom planu.

Znao sam da je loše, ali sam također znao da mogu i bolje. Tako sam za Noć vještica, uz pomoć Gimpa, mjesto začinio svježim premazom od bundeve i Evanescent tipografijom. Hej, čak je imala i originalnu avanturističku igru ​​u kojoj su igrači magijom spasili svijet mašte

Tijekom redizajna naučio sam i uredan trik. Shvatio sam da se u svijetu HTML-a i CSS-a ne krije. Svaka tehnika, svaka tajna bila je udaljena samo jedan izvor. Ni Apple nije mogao sakriti tajne svojih prekrasnih stranica s proizvodima, a ja bih proveo sate na njihovim stranicama razotkrivajući njihove tajne.

Ako bi to mogao netko drugi, mogao bih i ja.

Negdje uz put, moji su se kolege prestali smijati meni.

Pogledajte izvor. Kad god na web mjestu vidite nešto cool, zapitajte se možete li to reproducirati. Možete li to učiniti samo sa CSS-om? JavaScript? Ako ne, kliknite desnom tipkom miša> kliknite "Ispitaj" (Chrome) ili Alati> Web programer> Inspektor (Firefox) i pokušajte kôd obrnuti. Označite ili zadržite popis sjajnih efekata koje želite isprobati jednog dana.

14 godina star

Prije Snapchata i Instagrama djeca su imala blogove. Svi moji prijatelji imali su je. Mnogi od njih rado su personalizirali svoje blogove po uobičajenim temama. Ali ne siree, ne ja. O ne.

Započeo sam mijenjanjem postojećih tema za sebe. Zatim bih izgradio teme kao poklone za rođendane svojih prijatelja. Djeca iz drugih razreda dolazili su da me pitaju za teme. Postao sam tip sa bloga

Stvarno sam upala u pruge

I tako je započeo moj pravi korak u HTML. Svaka tema bila je HTML-dokument s jednom stranicom s ugrađenim CSS-om. Koristeći pseudo oznake poput <$ BlogItemTitle $>, mogao sam kontrolirati kako i gdje je svaki element postavljen. Pseudo oznake bi kasnije davatelj usluga zamijenio stvarnim sadržajem. Napokon, bio sam slobodan od skupa urednika WYSIWYG!

Toliko dugo, tripod.com!

Sjećam se da smo provodili sate premještajući elemente s CSS-om, učili razlike između vrsta prikaza i položaja, marže i obloga. Za jednu određenu temu koristio sam četvorobojne pruge kao statičnu pozadinu iza bijelog prednjeg dijela s prozirnim uzorcima. Svaki je element morao biti savršeno poravnat, tako da se uzorak pojavio kada se korisnik pomaknuo:

Mjesto za horizontalno pomicanje, tako usijano!

Volio sam razvijati teme. Shvatio sam da web stranica nije samo 2D, već odgovara ljudima s JavaScript i CSS pseudo odabirom, poput: lebdeći i: aktivan. Rasli su i smanjivali se, izblijedjeli i izlazili.

Bila je to živa interaktivna površina.

Kada su uspješne, ove interakcije oduševile su ljude i volio sam gledati reakcije svojih prijatelja na njihove nove teme. Potaknuo sam sebe da isprobam nove ideje i tehnike kako bih otkrio što ljudi uživaju.

️Razvoj za interakcije. Dobri su prednji elementi koji se mogu otkriti (daju naznake kako ih koristiti) i pružaju povratne informacije (na interaktivan način reagiraju na interakcije). Na primjer, gumb može mijenjati boje pozadine na pokazivaču i povećati neprozirnost kad se klikne. Evo dobrog videa i knjige na tu temu.

16 godina star

U srpnju 2013., registrirao sam svoju prvu domenu s odgovarajućim internetskim hostom felt Osjećao sam se kao obred prolaska, kao da konačno radim nešto stvarno. Osnovao sam svoj portfelj i od tada je dom mojim projektima i eksperimentima. Kako sam sticala nove vještine, ona je rasla i razvijala se pored mene.

Odrastaju tako brzo

Ne mogu precijeniti koliko mi je korisno bilo posluživanje domene i dobrog poslužitelja. Mogla bih eksperimentirati s novim prednjim idejama na webu. Vodio sam cron poslove koji su mi olakšali život. Kad god mi je trebao novi prostor za posao klijenta ili škole, mogao bih stvoriti novi poddomena.

Osjetio sam se kao veliki dječak kad sam razvio svoju prvu web stranicu. Skoro da se osjećalo kao da mogu raditi takve stvari za život. To bi bilo prilično cool, pomislila sam u sebi.

Postavljanje portfelja. Ovo je sjajan projekt za učenje o implementaciji na web. Jednostavne opcije uključuju FTP, koji vam omogućuje kopiranje datoteka i posluživanje s poslužitelja. Kad vam to bude ugodno, preporučujem vam postavljanje trajne integracije i Gita. Isprobao sam nekoliko davatelja usluga prije nego što sam završio sa zajedničkim hostingom na Dreamhostu (affiliate link) s čime sam bio izuzetno zadovoljan. Ali definitivno postoje besplatne alternative.

18 godina

U Singapuru 18-godišnjaci moraju provesti dvije godine u vojsci. Nekim srećom bio sam upućen u vojnu jedinicu koja traži mobilnog programera. Pitali su me jesam li učinio nešto slično prije. Nisam, ali koliko bi se to moglo razlikovati od izrade web stranice? Pa sam rekao da.

Ispada da, nisam bio u pravu. Ali hej, do tada, nisam bio onaj koji će me pustiti da me zaustavi nedostatak iskustva ili kvalifikacija.

Predgovorimo ovo: iako sam prije radio s nekim JavaScript-om, nisam imao koncept objektno orijentiranog programiranja, što je posebno važno u razvoju aplikacija. Moj prvi zadatak bio je razviti Androidovu aplikaciju za postojeći API koji omogućuje vojnicima da zovu bolesne. Moje drugo bilo je kreiranje edukativne igre.

Dane sam provodio na Googleu i StackOverflowu postavljajući stotine najosnovnijih pitanja poput "Kako stvorim tekstualno polje" ili "Kako mogu učiniti da gumb napravim stvari". Proveo sam tjedne udarajući glavom o tipkovnici o NullPointerExceptions. Po koži zuba uspio sam otkinuti nešto napola pristojno.

Iako su aplikacije izgledale atraktivno, kôd iza toga bio je sve samo ne. Bilo je crta i linija špagetijskog koda, bez jasnih arhitektonskih obrazaca, a logika je bila čvršće povezana od ograde lančane veze. Bilo je nemoguće održavati, i zbog toga se nijedna aplikacija koju sam napravila ne može aktivno ažurirati.

Prošlo bi nekoliko godina dok nisam pročitao kako napisati skalabilan, čist prednji kôd. Ali kad sam to učinio, shvatio sam zašto je to važno.

🧪 Pišite testove. Pisanje testova vjerojatno je jedina najefikasnija navika koju sam preuzeo za pisanje boljeg koda. Sjećate se kako ste, kada učite kodirati, napisali funkcije koje su pokušavale proći nekoliko testnih slučajeva? To je tako, ali sada ste i vi napisali testove! Pisanje dobrih testova za svaku značajku (jedinice jedinice) omogućuje vam da osigurate da vaš kôd funkcionira čak i kada mijenjate druge dijelove baze koda.
Odvojite svoje odgovornosti. Imate li funkciju koja radi više stvari? Podijelite ih na više funkcija. Imate li klasu s nekoliko dijelova metoda kojima se primjenjuju različite značajke? Podijelite ih u više klasa. Razdvajanje odgovornosti možda je najvažnije od načela SOLID. To čini vaš kod čitljiv i skalabilan. Clean Code: Priručnik o agilnom softverskom zanatu (podružnička poveznica) Roberta Martina obavezno je pročitao za sve napredne programere.

20 godina star

U lipnju 2016. objavio sam aplikaciju na Google Play trgovini. Pomaže učenicima da nauče o fizici, što je bio predmet koji sam oduvijek volio. Prvog dana imao je 3 preuzimanja. Drugi dan je imao 5. Trećeg dana imao je 1.000. U početku to nisam primijetio, ali broj je stalno rastao. U svom prvom mjesecu primio je 7000 preuzimanja. Do rujna je mjesečna instalacija narasla na 15.000.

Kako? Uopće nisam radio marketing.

Pokazalo se da je netko dijelio aplikaciju na Redditu (dva puta!) I činilo se da je ljudima to prija. Pokupilo ga je nekoliko web mjesta i blogova za recenziju. Ljudi su počeli snimati videozapise o tome na YouTubeu. U ovom trenutku, bio sam toliko uzbuđen da sam dobio palpitacije. Mislim da sam u nekom trenutku plakao. Osjećao sam se kao da se moj trud napokon isplatio.

Vratili su mi se kad sam crtao teme za blogove svojih prijatelja kao poklone za njihov rođendan. Umjesto toga, sada sam davao darove hiljadama ljudi širom svijeta. Odjednom sam shvatio koliko volim razvijati sučelja koja mogu pomoći ljudima. To su ljudi voljeli.

Najbolji dio ovog iskustva bio je upoznavanje ljudi koji koriste moju aplikaciju. Odgovarao sam na svaki komentar Reddita i pozdravljao e-poštu o bilo kojim fizičkim pitanjima. Ponekad dobijem lijepe male poruke, poput ove:

Ovo je moja omiljena e-pošta iz aplikacije koju sam napravila prije ovoga
Odaberite projekt do kojeg vam je stalo. Pročitali ste knjige. Završili ste kurs Codecademy. Savladali ste zdrave svjetove i rekurzivne funkcije. Što sad? Razmislite dobro za koja ste područja relativni stručnjak. Jeste li ugostitelj? Promatrač ptica? Majstor sitnica? Razmislite o nečemu što biste koristili. Razmislite o tome kako možete pomoći ljudima oko vas ili oceanima. Pomičite se po aplikacijama na svom telefonu - možete li ih poboljšati?
Ako mislite da ste pronašli nešto, zaronite pravo. Ne čekajte dok ne budete spremni, ne čekajte dozvolu. Baci se u duboki kraj; vozite uspone i padove prednjeg razvoja. Na taj način stvarate nešto što čini razliku.

22 godine

Nastavio sam istraživati ​​nove ideje i tehnike, radeći na projektima za koje sam se osjećao strastveno. Neki od njih bili su vrlo izazovni, ali naučila sam utjecati na ono što znam. Prednji razvoj prepun je prenosivih vještina.

Reagiranje je bilo otkrivenje. Nakon godina odvajanja pogleda od logike, bilo je dah svježeg zraka pronaći okvir koji elegantno integrira HTML, podatke i logiku. Bilo je to kao da sam sječao drveće nožem za maslac svih ovih godina, a netko mi je upravo predao motornu pilu.

Android je sada zadovoljstvo raditi. Mnogo boli su se pobrinuli i Kotlin je zadovoljstvo pisati. Neki od najboljih svjetskih umova rade na poboljšanju mobilnog naprednog razvoja, uz pomoć React Native, Flutter i mnogih drugih.

Sjajno je vrijeme biti razvojni programer.

Prije nekoliko godina razvio sam odredišnu stranicu s natpisom: Vi ste talentiraniji nego što zamišljate. Volio bih da me je netko obavijestio kad sam imao 12 godina, kao što sam se trebao predati nakon prvog neuspjeha.

Kasnije mi je glumački učitelj rekao da talent nije ništa drugo do zbroj napornog rada. Na taj sam način imala veliku sreću da su me događaji natjerali da rano krenem na put. Zahvalan sam ljudima koje sam upoznao na putu koji su me vodili i povjerili mi, neuki tinejdžer, svojim poslovima i idejama. Počeo je kao usamljeni hobi dugi niz godina, ali sada imam prijatelje koji dijele moje strasti.

Prošlo je sjajnih 10 godina i ne mogu čekati što slijedi.

Pronađite svoju zajednicu. Nijedna osoba nije otok, a nijedan prednji dev nije izolirani plutajući div element. Pridružite se lokalnim susretima. Idite na konferencije. Pratite git spremišta koja koristite. Pišite publikacijama. Slušajte podcaste. Kliznite u neke cvrkut DM-a. Pronađite ljude koji će vam reći: talentiraniji ste nego što zamišljate.

Sviđa mi se ova priča? Volio bih kontaktirati!
Pozdravite se na Twitteru, LinkedInu ili provjerite moju web stranicu.