in Programmering

Sådan bliver du Webudvikler i 2017

En guide til at lære at programmere

Dobbelt indlæg

I de foregående indlæg er du blevet introduceret til, hvad programmering er, samt hvorfor du bør lære at kode. Lad os fortsætte med endnu et hv-ord; hvordan bliver du webudvikler/programmør?

Indlægget gør dig klogere på:
  1. Hvad er der at lære?
    1. Webudvikler vs. Webdesigner
    2. Frontend-udvikling
      • HTML – Struktur
      • CSS – Udseende
      • JavaScript – Adfærd
    3. Backend-udvikling
      • Hvad er din stack?
      • Jagten på den “perfekte” stack
    4. Fullstack-udvikling
  2. Sådan bliver du Fullstack-udvikler
    1. The Odin Project
    2. Andre resurser
      • freeCodeCamp
      • Codewars

Jeg ved godt, at du har lyst til at springe direkte til desserten. Men prøv lige at styr dig, ikk’? 🍰

1. Hvad er der at lære?

Først skal vi lige have én ting på det rene. Forskellen på en webudvikler og en webdesigner. Jeg gør det kort.

i. Webudvikler vs. Webdesigner

I tidernes morgen var rollefordelingen lige så åbenlys som forskellen på titlerne. Designeren holdt sig til sine streger og udvikleren holdt sig til sine koder.

For at være konkurrencedygtig i dag, er det (oftest) nødvendigt for en webdesigner også at kunne udvikle. Til husbehov i hvertfald. Så hvis dit mål er at designe hjemmesider eller arbejde med brugervenlighed (UX), er det stadig relevant for dig at læse videre. Det var sådan, jeg selv startede.

Omvendt, behøver en udvikler ikke at kunne designe. Det er rart, hvis du har en smule æstetisk sans, men din rolle er ikke afhængig af den. Mit fokus er derfor på at gøre dig til webudvikler – og altså ikke til webdesigner. Du kan takke mig senere 🙌

ii. Frontend-udvikling

Det magiske tal “3” forfølger os i mange sammenhænge; “The Matrix”-trilogien, den kristne treenighed, en irriterende ventetone og mine karakterer i tysk. Men den går – sidst men ikke mindst – også igen i programmering. Alt der er synligt for dig på en hjemmeside kaldes Frontend — og den består af tre dele: HTML, CSS og JavaScript.

HTML – Struktur

Med HTML (Hypertext Markup Language) skaber vi strukturen. Når du eksempelvis læser dette blogindlæg, fortæller min hjemmeside din browser, at den bl.a. skal vise dig nogle overskrifter, en brødtekst og et par billeder. Det er skrevet med HTML.

CSS – Udseende

Når strukturen er lagt, kommer CSS (Cascading Style Sheets) på banen. Den fortæller din browser, hvordan elementerne i HTML-koden skal vises. Det kan eksempelvis være skrifttyper, farver, størrelser og positionering. Det er HTML-kodens personlige stylist.

JavaScript – Adfærd

Som jeg har forsøgt at illustrere ovenfor, er din HTML og CSS statiske. Det betyder, at deres arbejde er færdigt, når de er indlæst hos brugeren. Det sætter nogle kedelige begrænsninger. Hvad nu hvis vi vil lave en vejr-applikation, hvor du får vist en temperatur, der ændrer sig i takt med vejret? Eller forstørrelsen af et billede, når du klikker på det – ligesom på Facebook? Det er her JavaScript (JS) kommer ind i billedet.

Den puster liv i din hjemmeside ved at tilføje adfærd (forstør billede) til din brugers interaktioner (klik på billede). Med andre ord, kan den ændre på din HTML og CSS efter de er indlæst. Det skaber en dynamisk brugeroplevelse.

 

Du behøver ikke at være en ninja til frontend, før du kan udvikle simple hjemmesider. Og en simpel hjemmeside opfylder oftest behovet for små virksomheder og start-ups. Så dér har du allerede en målgruppe, du kan hjælpe. Men vi skal dybere ind. Vi skal helt ind til udviklingen af komplekse applikationer, såsom Twitter, Facebook og Uber. For det er for alvor dér, der er behov for dig. Lad mig præsentere dig for… [smooth transition]

iii. Backend-udvikling

Når du logger ind på Facebook, viser frontenden dig bl.a. nyheder fra dine venner, dine beskeder og notifikationer. Når jeg logger ind, vil jeg blive vist andre datasæt (nyheder, beskeder mm.) end dig. Selvom det umiddelbart ikke ser sådan ud, er frontenden den samme for os begge. Forskellen er, hvilke data den bliver fodret med – som afhænger af, hvem der er logget ind. Bag frontenden, hvor lyset aldrig slår sine folder, bor backenden…

Ej, det er sgu for dystert. Se backenden som køkkenet i en restaurant i stedet. Du oplever indretningen, læser menukortet og interagerer med tjeneren; mens din middag bliver kokkereret bag kulissen.

Backenden består (pudsigt nok) også af tre komponenter: en applikation, en database og en server. Applikationens opgave er simplificeret at være stikkerend-dreng mellem brugeren og databasen. Se databasen som et stort Excel-ark. Den holder styr på al dataen (f.eks. alle de oplysninger, du har givet til Facebook) og hele baduljen er hostet på en server.

Hvad er din stack?

I modsætning til frontenden, er der mange forskellige teknologier at vælge i mellem, når du opsætter din backend. Sammensætningen af dine valgte backend-teknologier, kaldes for din stack. Næste gang du sidder i selskab med en programmør og ikke aner hvad du skal spørge dem om, kan du spørge ind til deres stack. Så er de næste 25 minutter reddet! 🙏

Jagten på den “perfekte” stack

Du kan hurtigt bruge en masse tid på at lede efter den “helt perfekte stack” eller det “bedste” programmeringssprog at starte med. Min anbefaling til dig er at lade være. Programmeringssprog, der er populære i dag, er måske oldnordiske om tre år. Så stik snuden i det sprog, der giver bedst mening for dig – og lær det. Når du har fået en forståelse for dit valgte sprog, vil du opleve, at andre sprog minder om det. Og at det derfor bliver hurtigere og nemmere at lære det næste sprog.

Det er ligesom matematik i skolen. Ingen forventer af dig, at du kan huske alle formlerne. Det vigtigste er, at du udvikler din forståelse for logikken og kan bruge den. På den måde bliver fremtidige formler nemmere at lære. Programmering er fuldstændig det samme. Syntaksen kan være anderledes og tingene kan hedde noget forskelligt, men principperne er de samme.

Hvis du er helt grøn og ikke har nogen præference, kan du trygt overlade din skæbne til mig. Lige om lidt fortæller jeg dig, hvordan du kommer i gang. Du kan også spørge en anden til råds – bare du tager et valg og sætter i gang 🏁

iv. Fullstack-udvikling

I tidernes morgen var rollefordelingen for en frontend-udvikler og backend-udvikler lige så åbenlys som forskellen på titlerne. Frontend-udvikleren holdt sig til sine.. vent.. har vi ikke været her før? Anyways. Der er stor efterspørgsel på dig, der både kan udvikle frontend og backend. Når du evner begge dele, kan du med stolthed i stemmen kalde dig fullstack-udvikler.

Udover en gennemsnitlig højere løn (i hvert fald i USA) end både front- og backend-udviklere, giver din tværfaglighed dig også friheden til at kunne udvikle en applikation fra ende til anden. Det gør det nemmere for dig at arbejde sammen med andre i et team og naturligvis også på egen hånd. Så dét er dit mål. Du skal gå efter at blive fullstack-udvikler. Hvis du så senere ønsker at specialisere dig i det ene eller andet, er det en kæmpe fordel, du forstår det samlede økosystem.

1. Sådan bliver du Fullstack-udvikler

Du har mange muligheder. For et par indlæg siden, gav jeg dig et link til 460 gratis, online programmeringskurser, der starter i indeværende måned. Udover dem findes der naturligvis også en masse betalte kurser og bootcamps. Dem behøver du ikke kigge på lige nu – men… der er mange muligheder!

Jeg har gransket – hvad der føles som – hele internettet i gennem efter den bedste resurse til at programmere på egen hånd. Og jeg har prøvet de fleste af de bedst anbefalede. Til din fordel, kan du derfor snuppe min konklusion og komme i gang med det samme.

Mit valg er faldet på The Odin Project. Og jeg er – for en god ordens skyld – ikke affilieret med dem på nogen måde 🤓

i. The Odin Project

Pensummet er super gennemtænkt og består primært af eksterne resurser, som f.eks. bøger, artikler, videoer og podcasts. Det ser jeg som en fordel. I stedet for at bruge kræfterne på at skrive nyt læringsmateriale, har de brugt dem på at samle de bedste, der findes i forvejen. Det betyder, at du lærer fra mange forskellige kilder i stedet for én kilde, som er tilfældet med de fleste kurser.

Læring fra flere kilder er at foretrække – og noget du garanteret genkender fra vores uddannelsessystem herhjemme. Evnen til at forstå kode, uanset hvem din kilde er, er en brugbar evne. Specielt når du fedter rundt i din egen kode, som du ikke kan få til at virke. Og det sker hele tiden. Fedte, fedte.

Det tager i omegnen af 1.000 timer at gennemføre pensummet. Inklusive projekter. Allerede efter 6-700 timer, bør du kunne ansættes som junior-udvikler. De første 200 timer er de sværeste. Forbered dig på at rive et par hår eller 27 ud i frustration. Det er ligesom dengang, du skulle lære at læse. Med en god portion tålmodighed og vilje knækker du “koden”. Hang in there.

i. Andre resurser

freeCodeCamp

Hvis du oplever, at The Odin Project går for hurtigt frem, vil jeg anbefale dig at supplere med forløbet hos freeCodeCamp. Som bonus har de et stort online-fællesskab, hvor du nemt kan spørge om hjælp. FCC bygger også på frivillig arbejdskraft. De lægger op til, at du bruger dine nyvundne programmerings-evner til at hjælpe nonprofits. Så er cirklen fuldendt; men det er ikke et krav. Blot god karma ☀️

Både The Odin Project og freeCodeCamp er open-source. Det betyder, at “alle” kan tilgå det og let komme med forslag til forbedringer. Fordelen ved det er, at indholdet er organisk og hele tiden up-to-date.

Codewars

Er du rigtig ambitiøs, kan du også prøve kræfter med udfordringerne hos Codewars. Der er tonsvis af udfordringer i forskellige kataer (niveauer). Modsat de to andre hjemmesider, bliver du kun udfordret på den viden, du allerede har. Og når du ser andres løsninger, er det en oplagt måde at blive klogere på.

Næste blogindlæg

Wauw. Vi kom godt omkring. Jeg håber, at du har fået et spiseligt indblik i, hvad der ligger foran dig. Det er ikke nemt at lære at programmere, men det er helt sikkert muligt. I de næste par indlæg, vil jeg give dig nogle værktøjer og gode råd til at gøre processen nemmere. Men mit bedste råd, har du allerede fået: se at komme i gang. Få futterne ud over den første del, hvor alt virker håbløst. Der er lys for enden. Det lover jeg! 🌈

Hvis du mener, at jeg har overset en vigtig resurse til at lære at programmere, må du hjertens gerne skrive den i en kommentar nedenfor. Det samme gælder, hvis der er noget, du gerne vil have, at jeg kommer ind på i et fremtidigt indlæg. Næste indlæg rammer din hoveddør mandag d. 28. Ses! 👊

NYT: Nu kan du få nye indlæg fra mig direkte i din indbakke. Skriv din mail i formularen ude i siden på computer eller i bunden på mobil. Du har mit æresord på, at jeg passer godt på den ✊