diff --git a/translations/da/1-getting-started-lessons/1-intro-to-programming-languages/README.md b/translations/da/1-getting-started-lessons/1-intro-to-programming-languages/README.md index a0054f0c4..9aec4f43d 100644 --- a/translations/da/1-getting-started-lessons/1-intro-to-programming-languages/README.md +++ b/translations/da/1-getting-started-lessons/1-intro-to-programming-languages/README.md @@ -1,106 +1,190 @@ # Introduktion til programmeringssprog og moderne udviklerværktøjer + +Hej der, kommende udvikler! 👋 Må jeg fortælle dig noget, der stadig giver mig kuldegysninger hver eneste dag? Du er ved at opdage, at programmering ikke bare handler om computere – det handler om at have ægte superkræfter til at bringe dine vildeste idéer til live! -Hej der, fremtidige udvikler! 👋 Må jeg fortælle dig noget, der stadig giver mig kuldegysninger hver eneste dag? Du er ved at opdage, at programmering ikke kun handler om computere – det handler om at få superkræfter til at bringe dine vildeste idéer til live! +Du kender det øjeblik, hvor du bruger din yndlingsapp, og alt bare fungerer perfekt? Når du trykker på en knap, og noget helt magisk sker, som får dig til at sige "wow, hvordan gjorde de DET?" Nå, nogen ligesom dig – sandsynligvis siddende i deres yndlingskaffebar kl. 2 om natten med deres tredje espresso – skrev koden, der skabte den magi. Og her er det, der vil blæse dig væk: ved slutningen af denne lektion vil du ikke kun forstå, hvordan de gjorde det, men du vil også være ivrig efter at prøve det selv! -Kender du det øjeblik, hvor du bruger din yndlingsapp, og alt bare fungerer perfekt? Når du trykker på en knap, og noget helt magisk sker, som får dig til at tænke "wow, hvordan GJORDE de det?" Nå, nogen som dig – sandsynligvis siddende på deres yndlingscafé kl. 2 om natten med deres tredje espresso – skrev koden, der skabte den magi. Og her er det, der vil blæse dig omkuld: inden denne lektion er slut, vil du ikke kun forstå, hvordan de gjorde det, men du vil også være ivrig efter at prøve det selv! +Se, jeg forstår fuldt ud, hvis programmering føles skræmmende lige nu. Da jeg begyndte, troede jeg ærligt talt, at du skulle være en slags matematisk geni eller have kodet siden du var fem år gammel. Men her er det, der fuldstændig ændrede min opfattelse: programmering er præcis som at lære at føre samtaler på et nyt sprog. Du starter med "hej" og "tak," så øver du dig i at bestille kaffe, og før du ved af det, har du dybe filosofiske diskussioner! Bortset fra at i dette tilfælde fører du samtaler med computere, og ærligt talt? De er de mest tålmodige samtalepartnere, du nogensinde vil møde – de dømmer aldrig dine fejl og er altid begejstrede for at prøve igen! -Hør, jeg forstår det fuldstændigt, hvis programmering føles skræmmende lige nu. Da jeg først begyndte, troede jeg ærligt talt, at man skulle være en slags matematikgeni eller have kodet siden man var fem år gammel. Men her er, hvad der fuldstændigt ændrede min opfattelse: programmering er præcis som at lære at føre samtaler på et nyt sprog. Du starter med "hej" og "tak", arbejder dig op til at bestille kaffe, og før du ved af det, har du dybe filosofiske diskussioner! Bortset fra at du i dette tilfælde har samtaler med computere, og ærligt talt? De er de mest tålmodige samtalepartnere, du nogensinde vil have – de dømmer aldrig dine fejl, og de er altid klar til at prøve igen! +I dag skal vi udforske de utrolige værktøjer, der gør moderne webudvikling ikke bare mulig, men også seriøst vanedannende. Jeg taler om de nøjagtige redaktører, browsere og arbejdsprocesser, som udviklere hos Netflix, Spotify og dit yndlings indie app-studie bruger hver eneste dag. Og her er den del, der vil få dig til at lave en glad dans: de fleste af disse professionelle, branchestandard-værktøjer er helt gratis! -I dag skal vi udforske de utrolige værktøjer, der gør moderne webudvikling ikke bare mulig, men seriøst vanedannende. Jeg taler om de samme editorer, browsere og arbejdsgange, som udviklere hos Netflix, Spotify og dit yndlings indie-app-studie bruger hver eneste dag. Og her er den del, der vil få dig til at danse af glæde: de fleste af disse professionelle værktøjer, som er standard i branchen, er helt gratis! - -![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff0b27dcbf1c3f16c8ed46984866f2d29988929678b0058fde.da.png) +![Intro Programming](../../../../translated_images/webdev101-programming.d6e3f98e61ac4bff.da.png) > Sketchnote af [Tomomi Imura](https://twitter.com/girlie_mac) +```mermaid +journey + title Din Programmeringsrejse I Dag + section Opdag + Hvad er Programmering: 5: You + Programmeringssprog: 4: You + Værktøjsoversigt: 5: You + section Udforsk + Kodeeditorer: 4: You + Browsere & DevTools: 5: You + Kommandolinje: 3: You + section Øv + Sprogdetektiv: 4: You + Værktøjseksploration: 5: You + Fællesskabsforbindelse: 5: You +``` ## Lad os se, hvad du allerede ved! -Før vi hopper ud i det sjove, er jeg nysgerrig – hvad ved du allerede om denne programmeringsverden? Og hør her, hvis du kigger på disse spørgsmål og tænker "Jeg har bogstaveligt talt ingen anelse om noget af dette," så er det ikke bare okay, det er perfekt! Det betyder, at du er præcis det rette sted. Tænk på denne quiz som en opvarmning før en træning – vi varmer bare hjernemusklerne op! +Inden vi hopper til det sjove, er jeg nysgerrig – hvad ved du allerede om denne programmeringsverden? Og hør, hvis du kigger på disse spørgsmål og tænker "jeg har bogstaveligt talt nul idé om noget af dette," så er det ikke bare okay, det er perfekt! Det betyder, at du er lige præcis det rigtige sted. Tænk på denne quiz som opvarmning før træning – vi varmer bare hjernemusklerne op! + +[Tag pre-lektion quizzen](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -[Tag quizzen før lektionen](https://forms.office.com/r/dru4TE0U9n?origin=lprLink) -## Eventyret, vi skal på sammen +## Eventyret vi skal tage på sammen -Okay, jeg hopper bogstaveligt talt af begejstring over, hvad vi skal udforske i dag! Seriøst, jeg ville ønske, jeg kunne se dit ansigt, når nogle af disse begreber går op for dig. Her er den utrolige rejse, vi skal tage sammen: +Okay, jeg er ægte begejstret og hopper næsten af sted for at udforske det, vi skal i dag! Seriøst, jeg ville ønske, jeg kunne se dit ansigt, når nogle af disse koncepter går op for dig. Her er den utrolige rejse, vi tager sammen: -- **Hvad programmering egentlig er (og hvorfor det er det fedeste nogensinde!)** – Vi skal opdage, hvordan kode bogstaveligt talt er den usynlige magi, der driver alt omkring dig, fra den alarm, der på en eller anden måde ved, at det er mandag morgen, til algoritmen, der perfekt kuraterer dine Netflix-anbefalinger. -- **Programmeringssprog og deres fantastiske personligheder** – Forestil dig at gå ind til en fest, hvor hver person har helt forskellige superkræfter og måder at løse problemer på. Det er sådan, programmeringssprogenes verden er, og du vil elske at møde dem! -- **De grundlæggende byggesten, der skaber digital magi** – Tænk på disse som det ultimative kreative LEGO-sæt. Når du forstår, hvordan disse stykker passer sammen, vil du indse, at du bogstaveligt talt kan bygge alt, hvad din fantasi drømmer om. -- **Professionelle værktøjer, der får dig til at føle, at du lige har fået en troldmandsstav** – Jeg overdriver ikke her – disse værktøjer vil virkelig få dig til at føle, at du har superkræfter, og det bedste? Det er de samme værktøjer, som de professionelle bruger! +- **Hvad programmering egentlig er (og hvorfor det er det fedeste i verden!)** – Vi skal opdage, hvordan kode bogstaveligt talt er den usynlige magi, der driver alt omkring dig, fra den alarm, der på en eller anden måde ved, det er mandag morgen, til algoritmen, der perfekt kuraterer dine Netflix-anbefalinger +- **Programmeringssprog og deres fantastiske personligheder** – Forestil dig at komme til en fest, hvor hver person har helt forskellige superkræfter og måder at løse problemer på. Sådan er verden af programmeringssprog, og du vil elske at møde dem! +- **De grundlæggende byggesten, der får digital magi til at ske** – Tænk på disse som det ultimative kreative LEGO-sæt. Når du forstår, hvordan disse stykker passer sammen, vil du indse, at du bogstaveligt talt kan bygge alt, hvad din fantasi drømmer om +- **Professionelle værktøjer, der får dig til at føle, at du lige har fået udleveret en troldmandsstav** – Jeg overdriver ikke her – disse værktøjer får dig virkelig til at føle, at du har superkræfter, og det bedste? Det er de samme, som professionelle bruger! -> 💡 **Her er sagen**: Tænk ikke engang på at prøve at huske alt i dag! Lige nu vil jeg bare have, at du føler den gnist af begejstring over, hvad der er muligt. Detaljerne vil komme naturligt, mens vi øver os sammen – det er sådan, rigtig læring sker! +> 💡 **Det her er sagen**: Tænk ikke engang på at prøve at huske alting i dag! Lige nu vil jeg bare have, at du mærker gnisten af begejstring over, hvad der er muligt. Detaljerne vil fastholde sig naturligt, når vi øver sammen – det er sådan, rigtig læring sker! > Du kan tage denne lektion på [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/introduction-programming/?WT.mc_id=academic-77807-sagibbon)! ## Så hvad *er* programmering egentlig? -Okay, lad os tage det store spørgsmål: hvad er programmering egentlig? - -Jeg vil give dig en historie, der fuldstændigt ændrede, hvordan jeg tænker om det. I sidste uge prøvede jeg at forklare min mor, hvordan man bruger vores nye fjernbetjening til smart-tv'et. Jeg tog mig selv i at sige ting som "Tryk på den røde knap, men ikke den store røde knap, den lille røde knap til venstre... nej, din anden venstre... okay, nu hold den nede i to sekunder, ikke én, ikke tre..." Lyder det bekendt? 😅 - -Det er programmering! Det er kunsten at give utroligt detaljerede, trin-for-trin instruktioner til noget, der er meget kraftfuldt, men som har brug for, at alt bliver forklaret perfekt. Bortset fra at du i stedet for at forklare din mor (som kan spørge "hvilken rød knap?!"), forklarer du det til en computer (som bare gør præcis, hvad du siger, selv hvis det, du sagde, ikke helt var det, du mente). +Okay, lad os tage fat på million-dollar spørgsmålet: hvad er programmering egentlig? -Her er, hvad der blæste mit sind, da jeg først lærte dette: computere er faktisk ret simple i deres kerne. De forstår bogstaveligt talt kun to ting – 1 og 0, som grundlæggende bare er "ja" og "nej" eller "tændt" og "slukket." Det er det! Men her bliver det magisk – vi behøver ikke tale i 1'ere og 0'ere, som om vi er med i The Matrix. Det er her **programmeringssprog** kommer til undsætning. De er som verdens bedste oversætter, der tager dine helt normale menneskelige tanker og konverterer dem til computersprog. +Jeg vil give dig en historie, der fuldstændig ændrede min måde at tænke på det her. I sidste uge prøvede jeg at forklare min mor, hvordan hun bruger vores nye smart TV-fjernbetjening. Jeg fangede mig selv i at sige ting som "Tryk på den røde knap, men ikke den store røde knap, den lille røde knap til venstre... nej, din anden venstre... okay, nu hold den i to sekunder, ikke et, ikke tre..." Lyder det bekendt? 😅 -Og her er, hvad der stadig giver mig kuldegysninger hver morgen, når jeg vågner: bogstaveligt talt *alt* digitalt i dit liv startede med nogen som dig, der sandsynligvis sad i deres pyjamas med en kop kaffe og skrev kode på deres laptop. Det Instagram-filter, der får dig til at se fantastisk ud? Nogen kodede det. Anbefalingen, der ledte dig til din nye yndlingssang? En udvikler byggede den algoritme. Appen, der hjælper dig med at dele regningen med venner? Jep, nogen tænkte "det her er irriterende, det kan jeg nok fikse" og så... gjorde de det! +Det er programmering! Det er kunsten at give utroligt detaljerede, trin-for-trin instruktioner til noget, der er meget kraftfuldt, men som har brug for, at alt bliver stavet ud helt præcist. Bortset fra at i stedet for at forklare det til din mor (som kan spørge "hvilken rød knap?!"), forklarer du det til en computer (som bare gør præcis, hvad du siger, selvom det, du sagde, ikke helt var det, du mente). -Når du lærer at programmere, lærer du ikke bare en ny færdighed – du bliver en del af dette utrolige fællesskab af problemløsere, der bruger deres dage på at tænke: "Hvad hvis jeg kunne bygge noget, der gør nogens dag bare lidt bedre?" Ærligt talt, er der noget sejere end det? +Her er det, der blæste mit sind, da jeg først lærte det: computere er faktisk ret simple i deres kerne. De forstår faktisk kun to ting – 1 og 0, hvilket grundlæggende bare er "ja" og "nej" eller "til" og "fra." Det er det! Men her bliver det magisk – vi behøver ikke tale i 1'ere og 0'ere, som om vi var i The Matrix. Det er her, **programmeringssprog** kommer til undsætning. De er som verdens bedste oversætter, der tager dine helt almindelige mennesketanker og omsætter dem til computersprog. -✅ **Sjov fakta-jagt**: Her er noget super sejt at undersøge, når du har et øjeblik – hvem tror du var verdens første computerprogrammør? Jeg giver dig et hint: det er måske ikke den, du forventer! Historien bag denne person er absolut fascinerende og viser, at programmering altid har handlet om kreativ problemløsning og at tænke ud af boksen. +Og her er det, der stadig giver mig ægte kuldegysninger hver morgen, når jeg vågner: bogstaveligt talt *alt* digitalt i dit liv startede med nogen ligesom dig, sandsynligvis siddende i deres pyjamas med en kop kaffe, der skrev kode på deres bærbare. Det Instagram-filter, der får dig til at se fejlfri ud? Nogen kodede det. Anbefalingen, der førte dig til din nye yndlingssang? En udvikler byggede den algoritme. Appen, der hjælper dig med at dele middagsregningen med venner? Jep, nogen tænkte "det her er irriterende, det kan jeg fixe" og så... gjorde de det! -## Programmeringssprog er som forskellige smagsvarianter af magi +Når du lærer at programmere, tager du ikke bare en ny færdighed til dig – du bliver en del af dette utrolige fællesskab af problemløsere, der tilbringer deres dage med at tænke, "Hvad nu hvis jeg kunne bygge noget, der gør nogens dag bare en smule bedre?" Ærligt talt, er der noget sejere end det? -Okay, det her kommer til at lyde mærkeligt, men hæng på – programmeringssprog er meget ligesom forskellige typer musik. Tænk over det: du har jazz, som er glat og improviserende, rock, der er kraftfuld og ligetil, klassisk, der er elegant og struktureret, og hip-hop, der er kreativ og udtryksfuld. Hver stil har sin egen stemning, sit eget fællesskab af passionerede fans, og hver enkelt er perfekt til forskellige stemninger og lejligheder. +✅ **Sjov fakta-jagt**: Her er noget super sejt at slå op, når du har et ledigt øjeblik – hvem tror du var verdens første computerprogrammør? Jeg giver dig et hint: Det er måske ikke den, du forventer! Historien om denne person er virkelig fascinerende og viser, at programmering altid har handlet om kreativ problemløsning og at tænke uden for boksen. -Programmeringssprog fungerer på præcis samme måde! Du ville ikke bruge det samme sprog til at bygge et sjovt mobilspil, som du ville bruge til at bearbejde enorme mængder klimadata, ligesom du ikke ville spille dødsmetal til en yogatime (nå ja, de fleste yogatimer i hvert fald! 😄). - -Men her er, hvad der absolut blæser mit sind hver gang jeg tænker på det: disse sprog er som at have den mest tålmodige, geniale tolk i verden lige ved siden af dig. Du kan udtrykke dine idéer på en måde, der føles naturlig for din menneskelige hjerne, og de håndterer alt det utroligt komplekse arbejde med at oversætte det til de 1'ere og 0'ere, som computere faktisk taler. Det er som at have en ven, der er perfekt flydende i både "menneskelig kreativitet" og "computerlogik" – og de bliver aldrig trætte, har aldrig brug for kaffepauser og dømmer dig aldrig for at stille det samme spørgsmål to gange! - -### Populære programmeringssprog og deres anvendelser - -| Sprog | Bedst til | Hvorfor det er populært | -|-------|-----------|-------------------------| -| **JavaScript** | Webudvikling, brugergrænseflader | Kører i browsere og driver interaktive hjemmesider | -| **Python** | Data science, automatisering, AI | Let at læse og lære, kraftfulde biblioteker | -| **Java** | Virksomhedsapplikationer, Android-apps | Platform-uafhængig, robust til store systemer | -| **C#** | Windows-applikationer, spiludvikling | Stærk Microsoft-økosystemstøtte | -| **Go** | Cloud-tjenester, backend-systemer | Hurtig, enkel, designet til moderne computing | +### 🧠 **Check-in tid: Hvordan har du det?** -### Høj-niveau vs. Lav-niveau sprog +**Tag et øjeblik til at reflektere:** +- Giver idéen om "at give instruktioner til computere" mening for dig nu? +- Kan du tænke på en daglig opgave, du gerne vil automatisere med programmering? +- Hvilke spørgsmål dukker op i dit hoved om det her med programmering? -Okay, dette var ærligt talt det koncept, der knækkede min hjerne, da jeg først begyndte at lære, så jeg vil dele den analogi, der endelig fik det til at give mening for mig – og jeg håber virkelig, det hjælper dig også! +> **Husk**: Det er helt normalt, hvis nogle koncepter føles uklare lige nu. At lære programmering er som at lære et nyt sprog – det tager tid for din hjerne at bygge de neurale stier. Du gør det rigtig godt! -Forestil dig, at du besøger et land, hvor du ikke taler sproget, og du desperat har brug for at finde det nærmeste toilet (vi har alle været der, ikke? 😅): +## Programmeringssprog er som forskellige slags magi -- **Lav-niveau programmering** er som at lære den lokale dialekt så godt, at du kan snakke med bedstemoren, der sælger frugt på hjørnet, ved hjælp af kulturelle referencer, lokal slang og interne jokes, som kun nogen, der er vokset op der, ville forstå. Super imponerende og utroligt effektivt... hvis du tilfældigvis er flydende! Men ret overvældende, når du bare prøver at finde et toilet. +Okay, det her kommer til at lyde mærkeligt, men hæng på mig – programmeringssprog er meget lig forskellige slags musik. Tænk på det: Du har jazz, som er blød og improvisatorisk, rock, der er kraftfuld og ligetil, klassisk, der er elegant og struktureret, og hip-hop, der er kreativ og udtryksfuld. Hver stil har sin egen stemning, sit eget fællesskab af passionerede fans, og hver enkelt er perfekt til forskellige stemninger og lejligheder. -- **Høj-niveau programmering** er som at have den fantastiske lokale ven, der bare forstår dig. Du kan sige "Jeg har virkelig brug for at finde et toilet" på almindeligt dansk, og de håndterer al den kulturelle oversættelse og giver dig vejledning på en måde, der giver perfekt mening for din ikke-lokale hjerne. +Programmeringssprog fungerer på præcis samme måde! Du ville ikke bruge det samme sprog til at bygge et sjovt mobilspil, som du ville bruge til at bearbejde enorme mængder klimadata – ligesom du ikke ville spille death metal til en yogatime (nå, de fleste yogatimer i hvert fald! 😄). -I programmeringstermer: -- **Lav-niveau sprog** (som Assembly eller C) giver dig mulighed for at have utroligt detaljerede samtaler med computerens faktiske hardware, men du skal tænke som en maskine, hvilket er... ja, lad os bare sige, det er en ret stor mental omstilling! -- **Høj-niveau sprog** (som JavaScript, Python eller C#) giver dig mulighed for at tænke som et menneske, mens de håndterer al maskinsnakken bag kulisserne. Plus, de har disse utroligt imødekommende fællesskaber fulde af mennesker, der husker, hvordan det var at være ny og virkelig ønsker at hjælpe! +Men her er det, der altid blæser mig væk, hver gang jeg tænker på det: disse sprog er som at have den mest tålmodige, geniale tolk i verden siddende lige ved siden af dig. Du kan udtrykke dine idéer på en måde, der føles naturlig for din menneskehjerne, og de håndterer alt det utroligt komplekse arbejde med at oversætte det til 1'erne og 0'erne, som computere rent faktisk taler. Det er som at have en ven, der er fuldstændig flydende i både "menneskelig kreativitet" og "computerlogik" – og de bliver aldrig trætte, har aldrig kaffepauser og dømmer dig aldrig for at stille det samme spørgsmål to gange! -Gæt, hvilke jeg vil foreslå, at du starter med? 😉 Høj-niveau sprog er som at have støttehjul, som du aldrig rigtig vil tage af, fordi de gør hele oplevelsen så meget mere behagelig! +### Populære programmeringssprog og deres anvendelser -### Lad mig vise dig, hvorfor høj-niveau sprog er så meget venligere +```mermaid +mindmap + root((Programmeringssprog)) + Webudvikling + JavaScript + Frontend Magi + Interaktive Websites + TypeScript + JavaScript + Typer + Virksomhedsapps + Data & AI + Python + Data Science + Maskinlæring + Automatisering + R + Statistik + Forskning + Mobilapps + Java + Android + Virksomhed + Swift + iOS + Apple Økosystem + Kotlin + Moderne Android + Tværplatform + Systemer & Ydeevne + C++ + Spil + Ydeevne Kritisk + Rust + Hukommelsessikkerhed + Systemprogrammering + Go + Cloudtjenester + Skalerbar Backend +``` +| Sprog | Bedst til | Hvorfor det er populært | +|----------|----------|------------------| +| **JavaScript** | Webudvikling, brugergrænseflader | Kører i browsere og driver interaktive websites | +| **Python** | Data science, automation, AI | Let at læse og lære, kraftfulde biblioteker | +| **Java** | Enterprise-applikationer, Android-apps | Platformuafhængigt, robust til store systemer | +| **C#** | Windows-applikationer, spiludvikling | Stærk Microsoft-økosystemstøtte | +| **Go** | Cloud-services, backend-systemer | Hurtigt, enkelt, designet til moderne computing | + +### High-Level vs. Low-Level sprog + +Okay, det her var ærligt talt det koncept, der knækkede min hjerne, da jeg først begyndte at lære, så jeg deler den analogi, der endelig fik det til at gå op for mig – og jeg håber virkelig, den hjælper dig også! + +Forestil dig, at du besøger et land, hvor du ikke taler sproget, og du desperat har brug for at finde den nærmeste toilet (det har vi alle været ude for, ikke? 😅): + +- **Low-level programmering** er som at lære det lokale dialekt så godt, at du kan snakke med bedstemor, der sælger frugt på hjørnet, ved hjælp af kulturelle referencer, lokalt slang og interne jokes, som kun nogen, der voksede op der, ville forstå. Super imponerende og utroligt effektivt... hvis du tilfældigvis er flydende! Men ret overvældende, når du bare prøver at finde toilettet. + +- **High-level programmering** er som at have den fantastiske lokale ven, der bare forstår dig. Du kan sige "Jeg har virkelig brug for at finde et toilet" på almindeligt engelsk, og de håndterer al den kulturelle oversættelse og giver dig vejledning på en måde, der giver perfekt mening for din ikke-lokale hjerne. + +I programmeringsterminologi: +- **Low-level sprog** (som Assembly eller C) lader dig føre utroligt detaljerede samtaler med computerens faktiske hardware, men du skal tænke som en maskine, hvilket... lad os bare sige, er et stort mentalt skift! +- **High-level sprog** (som JavaScript, Python eller C#) lader dig tænke som et menneske, mens de håndterer al maskinsproget bag kulisserne. Plus, de har utroligt imødekommende fællesskaber fulde af folk, der husker, hvordan det var at være ny, og som virkelig vil hjælpe! + +Gæt hvilke jeg vil foreslå, du starter med? 😉 High-level sprog er som at have støttehjul, som du faktisk aldrig rigtig vil tage af, fordi de gør hele oplevelsen meget sjovere! + +```mermaid +flowchart TB + A["👤 Menneskelig Tanke:
'Jeg vil beregne Fibonacci tal'"] --> B{Vælg Sprog Niveau} + + B -->|Højt Niveau| C["🌟 JavaScript/Python
Let at læse og skrive"] + B -->|Lavt Niveau| D["⚙️ Assembly/C
Direkte hardware kontrol"] + + C --> E["📝 Skriv: fibonacci(10)"] + D --> F["📝 Skriv: mov r0,#00
sub r0,r0,#01"] + + E --> G["🤖 Computer Forståelse:
Oversætter håndterer kompleksitet"] + F --> G + + G --> H["💻 Samme Resultat:
0, 1, 1, 2, 3, 5, 8, 13..."] + + style C fill:#e1f5fe + style D fill:#fff3e0 + style H fill:#e8f5e8 +``` +### Lad mig vise dig, hvorfor High-Level sprog er meget mere brugervenlige -Okay, jeg er ved at vise dig noget, der perfekt demonstrerer, hvorfor jeg forelskede mig i høj-niveau sprog, men først – jeg har brug for, at du lover mig noget. Når du ser det første kodeeksempel, så gå ikke i panik! Det skal se skræmmende ud. Det er præcis det, jeg prøver at vise! +Okay, jeg er ved at vise dig noget, der perfekt demonstrerer, hvorfor jeg forelskede mig i high-level sprog, men først – jeg har brug for, at du lover mig noget. Når du ser det første kodeeksempel, så lad være med at gå i panik! Det er meningen, det skal se skræmmende ud. Det er præcis det, jeg vil sige med det! -Vi skal se på den samme opgave skrevet i to helt forskellige stilarter. Begge skaber det, der kaldes Fibonacci-sekvensen – det er dette smukke matematiske mønster, hvor hvert tal er summen af de to foregående: 0, 1, 1, 2, 3, 5, 8, 13... (Sjov fakta: du finder dette mønster bogstaveligt talt overalt i naturen – solsikkefrøspiraler, fyrrekoglemønstre, endda den måde galakser dannes på!) +Vi kigger på den samme opgave skrevet i to helt forskellige stilarter. Begge skaber det, der kaldes Fibonacci-sekvensen – det er et smukt matematisk mønster, hvor hvert tal er summen af de to foregående: 0, 1, 1, 2, 3, 5, 8, 13... (Sjovt faktum: du finder dette mønster bogstaveligt talt overalt i naturen – solsikkefrøspiraler, kogler, endda hvordan galakser dannes!) -Klar til at se forskellen? Lad os komme i gang! +Klar til at se forskellen? Lad os gå i gang! -**Høj-niveau sprog (JavaScript) – Menneskevenligt:** +**High-level sprog (JavaScript) – Menneskevenligt:** ```javascript -// Step 1: Basic Fibonacci setup +// Trin 1: Grundlæggende Fibonacci opsætning const fibonacciCount = 10; let current = 0; let next = 1; @@ -108,32 +192,32 @@ let next = 1; console.log('Fibonacci sequence:'); ``` -**Hvad denne kode gør:** +**Her er, hvad denne kode gør:** - **Deklarerer** en konstant for at angive, hvor mange Fibonacci-tal vi vil generere -- **Initialiserer** to variabler til at spore det aktuelle og næste tal i sekvensen -- **Opsætter** startværdierne (0 og 1), der definerer Fibonacci-mønsteret -- **Viser** en overskriftsbesked for at identificere vores output +- **Initialiserer** to variabler for at holde styr på det nuværende og næste tal i sekvensen +- **Sætter op** startværdierne (0 og 1), der definerer Fibonacci-mønstret +- **Viser** en overskrift for at identificere vores output ```javascript -// Step 2: Generate the sequence with a loop +// Trin 2: Generer sekvensen med en løkke for (let i = 0; i < fibonacciCount; i++) { console.log(`Position ${i + 1}: ${current}`); - // Calculate next number in sequence + // Beregn næste tal i sekvensen const sum = current + next; current = next; next = sum; } ``` -**Hvad der sker her:** -- **Looper** gennem hver position i vores sekvens ved hjælp af en `for`-loop -- **Viser** hvert tal med dets position ved hjælp af template literal-formattering -- **Beregner** det næste Fibonacci-tal ved at lægge aktuelle og næste værdier sammen +**Her er, hvad der sker her:** +- **Looper** gennem hver position i vores sekvens med en `for`-løkke +- **Viser** hvert tal med dets position ved hjælp af template literals +- **Beregner** det næste Fibonacci-tal ved at lægge det nuværende og næste sammen - **Opdaterer** vores sporingsvariabler for at gå videre til næste iteration ```javascript -// Step 3: Modern functional approach +// Trin 3: Moderne funktionel tilgang const generateFibonacci = (count) => { const sequence = [0, 1]; @@ -144,18 +228,18 @@ const generateFibonacci = (count) => { return sequence; }; -// Usage example +// Brugs eksempel const fibSequence = generateFibonacci(10); console.log(fibSequence); ``` **Her har vi:** -- **Oprettet** en genanvendelig funktion ved hjælp af moderne arrow function-syntaks -- **Bygget** en array til at gemme den komplette sekvens i stedet for at vise dem én efter én -- **Brugt** array-indeksering til at beregne hvert nyt tal ud fra tidligere værdier -- **Returneret** den komplette sekvens for fleksibel brug i andre dele af vores program +- **Oprettet** en genanvendelig funktion med moderne arrow-funktions-syntaks +- **Bygget** et array til at gemme hele sekvensen i stedet for at vise tal et efter et +- **Brugt** array-indeksering til at beregne hvert nyt tal fra tidligere værdier +- **Returneret** hele sekvensen for fleksibel brug i andre dele af programmet -**Lav-niveau sprog (ARM Assembly) – Computer-venligt:** +**Low-level sprog (ARM Assembly) – Computer-venligt:** ```assembly area ascen,code,readonly @@ -182,76 +266,77 @@ back add r0,r1 end ``` -Bemærk, hvordan JavaScript-versionen næsten læses som engelske instruktioner, mens Assembly-versionen bruger kryptiske kommandoer, der direkte styrer computerens processor. Begge udfører præcis den samme opgave, men høj-niveau sproget er meget lettere for mennesker at forstå, skrive og vedligeholde. +Læg mærke til, hvordan JavaScript-versionen næsten læses som engelske instruktioner, mens Assembly-versionen bruger kryptiske kommandoer, der direkte styrer computerens processor. Begge løser den nøjagtige samme opgave, men høj-niveausproget er langt nemmere for mennesker at forstå, skrive og vedligeholde. + +**Nøgleforskelle, du vil bemærke:** +- **Læsbarhed**: JavaScript bruger beskrivende navne som `fibonacciCount`, mens Assembly bruger kryptiske labels som `r0`, `r1` +- **Kommentarer**: Høj-niveau sprog opfordrer til forklarende kommentarer, der gør koden selvforklarende +- **Struktur**: JavaScripts logiske flow matcher, hvordan mennesker tænker over problemer trin for trin +- **Vedligeholdelse**: Opdatering af JavaScript-versionen til forskellige krav er ligetil og klart -**Vigtige forskelle, du vil bemærke:** -- **Læsbarhed**: JavaScript bruger beskrivende navne som `fibonacciCount`, mens Assembly bruger kryptiske etiketter som `r0`, `r1`. -- **Kommentarer**: Høj-niveau sprog opmuntrer til forklarende kommentarer, der gør koden selvforklarende. -- **Struktur**: JavaScripts logiske flow matcher, hvordan mennesker tænker på problemer trin-for-trin. -- **Vedligeholdelse**: Opdatering af JavaScript-versionen til forskellige krav er ligetil og klart. -✅ **Om Fibonacci-sekvensen**: Dette utroligt smukke talmønster (hvor hvert tal er summen af de to foregående: 0, 1, 1, 2, 3, 5, 8...) dukker bogstaveligt talt op *overalt* i naturen! Du kan finde det i solsikkespiraler, mønstre på grankogler, måden nautilusskaller buer på, og endda i hvordan trægrene vokser. Det er ret fantastisk, hvordan matematik og kode kan hjælpe os med at forstå og genskabe de mønstre, naturen bruger til at skabe skønhed! +✅ **Om Fibonacci-sekvensen**: Dette helt utroligt smukke talmønster (hvor hvert tal er summen af de to foregående: 0, 1, 1, 2, 3, 5, 8...) dukker op bogstaveligt talt *overalt* i naturen! Du finder det i solsikkespiraler, fyrrekoglemønstre, måden nautilusskaller krummer sig på, og endda i, hvordan trægrene vokser. Det er ret sindssygt, hvordan matematik og kode kan hjælpe os med at forstå og genskabe de mønstre, som naturen bruger til at skabe skønhed! -## Byggestenene, der skaber magien +## Byggestenene, der får magien til at ske -Okay, nu hvor du har set, hvordan programmeringssprog ser ud i praksis, lad os bryde de grundlæggende dele ned, som bogstaveligt talt udgør ethvert program, der nogensinde er skrevet. Tænk på dem som de essentielle ingredienser i din yndlingsopskrift – når du først forstår, hvad hver enkelt gør, vil du kunne læse og skrive kode i stort set ethvert sprog! +Okay, nu hvor du har set, hvordan programmeringssprog ser ud i praksis, lad os bryde de grundlæggende dele ned, som alle programmer nogensinde skrevet består af. Tænk på disse som essentielle ingredienser i din yndlingsopskrift – når du først forstår, hvad hver enkelt gør, vil du kunne læse og skrive kode i stort set ethvert sprog! -Det er lidt ligesom at lære grammatik i programmering. Kan du huske, da du lærte om navneord, udsagnsord og hvordan man sammensætter sætninger i skolen? Programmering har sin egen version af grammatik, og ærligt talt, det er langt mere logisk og tilgivende end engelsk grammatik nogensinde har været! 😄 +Det er lidt ligesom at lære grammatikken i programmering. Kan du huske fra skolen, da du lærte om substantiver, verber og hvordan man sætter sætninger sammen? Programmering har sin egen version af grammatik, og for at være ærlig, så er den meget mere logisk og tilgivende end engelsk grammatik nogensinde var! 😄 -### Statements: Trin-for-trin instruktioner +### Udsagn: Trin-for-trin instruktioner -Lad os starte med **statements** – de er som individuelle sætninger i en samtale med din computer. Hver statement fortæller computeren, at den skal udføre én specifik ting, lidt ligesom at give instruktioner: "Drej til venstre her," "Stop ved det røde lys," "Parkér på den plads." +Lad os starte med **udsagn** – de er som individuelle sætninger i en samtale med din computer. Hvert udsagn fortæller computeren at gøre én bestemt ting, lidt ligesom at give vejledning: "Drej til venstre her," "Stop ved det røde lys," "Parkér der." -Det, jeg elsker ved statements, er, hvor læsbare de ofte er. Se her: +Det, jeg elsker ved udsagn, er hvor læsbare de som regel er. Se på dette: ```javascript -// Basic statements that perform single actions +// Grundlæggende sætninger, der udfører enkeltstående handlinger const userName = "Alex"; console.log("Hello, world!"); const sum = 5 + 3; ``` -**Hvad denne kode gør:** +**Her er, hvad denne kode gør:** - **Deklarerer** en konstant variabel til at gemme en brugers navn -- **Viser** en hilsen på konsollen +- **Viser** en hilsen i konsoloutputtet - **Beregner** og gemmer resultatet af en matematisk operation ```javascript -// Statements that interact with web pages +// Udtalelser, der interagerer med websider document.title = "My Awesome Website"; document.body.style.backgroundColor = "lightblue"; ``` -**Trin for trin, her er hvad der sker:** -- **Ændrer** websidens titel, som vises i browserens fane +**Trin for trin, sådan sker det:** +- **Ændrer** websidens titel, der vises i browserfanen - **Skifter** baggrundsfarven på hele sidekroppen -### Variabler: Programmets hukommelsessystem +### Variable: Dit programs hukommelsessystem -Okay, **variabler** er ærligt talt en af mine absolutte yndlingskoncepter at lære fra mig, fordi de minder så meget om ting, du allerede bruger hver eneste dag! +Okay, **variable** er sandelig ét af mine absolut yndlingskoncepter at undervise i, fordi de er så meget som ting, du allerede bruger hver eneste dag! -Tænk på din telefons kontaktliste et øjeblik. Du husker ikke alles telefonnumre – i stedet gemmer du "Mor," "Bedste ven" eller "Pizzastedet, der leverer til kl. 2 om natten" og lader din telefon huske de faktiske numre. Variabler fungerer præcis på samme måde! De er som mærkede beholdere, hvor dit program kan gemme information og hente den senere ved hjælp af et navn, der faktisk giver mening. +Tænk et øjeblik på din telefons kontaktliste. Du kan ikke huske alles telefonnumre – i stedet gemmer du "Mor," "Bedste Ven," eller "Pizzestedet der leverer til kl. 2," og lader telefonen huske de faktiske numre. Variable fungerer på samme måde! De er som mærkede beholdere, hvor dit program kan gemme information og hente den senere ved hjælp af et navn, der faktisk giver mening. -Her er det virkelig seje: variabler kan ændre sig, mens dit program kører (deraf navnet "variable" – smart, ikke?). Ligesom du måske opdaterer pizzastedets kontakt, når du finder et endnu bedre sted, kan variabler opdateres, efterhånden som dit program lærer ny information eller når situationer ændrer sig! +Her er det virkelig seje: variable kan ændre sig, mens dit program kører (deraf navnet "variable" – kan du se, hvad de gjorde dér?). Ligesom du måske opdaterer pizzastedets kontakt, når du finder et endnu bedre sted, kan variable opdateres, mens dit program lærer ny information eller når situationer ændrer sig! -Lad mig vise dig, hvor smukt enkelt dette kan være: +Lad mig vise dig, hvor utrolig simpelt det kan være: ```javascript -// Step 1: Creating basic variables +// Trin 1: Oprettelse af grundlæggende variabler const siteName = "Weather Dashboard"; let currentWeather = "sunny"; let temperature = 75; let isRaining = false; ``` -**Forstå disse begreber:** -- **Gem** uforanderlige værdier i `const` variabler (som webstedets navn) +**Sådan forstår du disse koncepter:** +- **Gem** uforanderlige værdier i `const` variable (som sidens navn) - **Brug** `let` til værdier, der kan ændre sig i løbet af programmet -- **Tildel** forskellige datatyper: strenge (tekst), tal og booleans (sand/falsk) +- **Tildel** forskellige datatyper: tekststrenge, tal og booleske værdier (sand/falsk) - **Vælg** beskrivende navne, der forklarer, hvad hver variabel indeholder ```javascript -// Step 2: Working with objects to group related data +// Trin 2: Arbejde med objekter for at gruppere relaterede data const weatherData = { location: "San Francisco", humidity: 65, @@ -260,49 +345,49 @@ const weatherData = { ``` **I ovenstående har vi:** -- **Oprettet** et objekt til at gruppere relaterede vejroplysninger -- **Organiseret** flere stykker data under ét variabelnavn -- **Brugt** nøgle-værdi-par til tydeligt at mærke hver informationsdel +- **Oprettet** et objekt til at gruppere relateret vejrinformation sammen +- **Organiseret** flere datadel under ét variabelnavn +- **Brugt** nøgle-værdi-par til klart at mærke hver datadel ```javascript -// Step 3: Using and updating variables +// Trin 3: Brug og opdatering af variabler console.log(`${siteName}: Today is ${currentWeather} and ${temperature}°F`); console.log(`Wind speed: ${weatherData.windSpeed} mph`); -// Updating changeable variables +// Opdatering af ændrbare variabler currentWeather = "cloudy"; temperature = 68; ``` **Lad os forstå hver del:** -- **Vis** information ved hjælp af template literals med `${}` syntaks -- **Få adgang til** objektets egenskaber ved hjælp af punktnotation (`weatherData.windSpeed`) -- **Opdater** variabler deklareret med `let` for at afspejle ændrede forhold -- **Kombiner** flere variabler for at skabe meningsfulde beskeder +- **Vis** information ved brug af template literals med `${}` syntaks +- **Adgang** til objektets egenskaber med dot-notation (`weatherData.windSpeed`) +- **Opdater** variable deklareret med `let` for at afspejle skiftende forhold +- **Kombinér** flere variable for at skabe meningsfulde beskeder ```javascript -// Step 4: Modern destructuring for cleaner code +// Trin 4: Moderne destrukturering for renere kode const { location, humidity } = weatherData; console.log(`${location} humidity: ${humidity}%`); ``` -**Hvad du skal vide:** -- **Udtræk** specifikke egenskaber fra objekter ved hjælp af destruktureringsopgave -- **Opret** nye variabler automatisk med samme navne som objektets nøgler -- **Forenkle** kode ved at undgå gentagen punktnotation +**Det du skal vide:** +- **Udtræk** specifikke egenskaber fra objekter ved hjælp af destructuring assignment +- **Opret** nye variable automatisk med samme navne som objektets nøgler +- **Forenkle** kode ved at undgå gentagen dot-notation -### Control Flow: Lær dit program at tænke +### Kontrolflow: Lær dit program at tænke -Okay, her bliver programmering virkelig fantastisk! **Control flow** handler grundlæggende om at lære dit program at tage smarte beslutninger, præcis som du gør hver eneste dag uden at tænke over det. +Okay, her bliver programmering virkelig sindssyg! **Kontrolflow** er grundlæggende at lære dit program at træffe smarte beslutninger, præcis som du gør hver dag uden engang at tænke over det. -Forestil dig dette: I morges gik du sandsynligvis igennem noget som "Hvis det regner, tager jeg en paraply. Hvis det er koldt, tager jeg en jakke. Hvis jeg er sent på den, springer jeg morgenmaden over og tager kaffe med på vejen." Din hjerne følger naturligt denne hvis-så logik dusinvis af gange hver dag! +Forestil dig dette: i morges gik du sikkert igennem noget a la "Hvis det regner, tager jeg paraply med. Hvis det er koldt, tager jeg jakke på. Hvis jeg er forsinket, springer jeg morgenmad over og tager en kaffe på vejen." Din hjerne følger naturligt denne hvis-så-logik dusinvis af gange hver dag! -Det er det, der får programmer til at føles intelligente og levende i stedet for bare at følge et kedeligt, forudsigeligt manuskript. De kan faktisk se på en situation, evaluere hvad der sker, og reagere passende. Det er som at give dit program en hjerne, der kan tilpasse sig og træffe valg! +Det er det, der får programmer til at føles intelligente og levende i stedet for bare at følge et kedeligt, forudsigeligt script. De kan faktisk se på en situation, vurdere hvad der sker og reagere passende. Det er som at give dit program en hjerne, der kan tilpasse sig og træffe valg! -Vil du se, hvordan dette fungerer smukt? Lad mig vise dig: +Vil du se, hvor smukt det fungerer? Lad mig vise dig: ```javascript -// Step 1: Basic conditional logic +// Trin 1: Grundlæggende konditionel logik const userAge = 17; if (userAge >= 18) { @@ -313,14 +398,14 @@ if (userAge >= 18) { } ``` -**Hvad denne kode gør:** -- **Tjekker**, om brugerens alder opfylder kravene for at stemme -- **Udfører** forskellige kodeblokke baseret på resultatet af betingelsen -- **Beregner** og viser, hvor lang tid der er til stemmeberettigelse, hvis under 18 +**Her er, hvad denne kode gør:** +- **Tjekker** om brugerens alder opfylder stemmeretskravet +- **Udfører** forskellige kodeblokke baseret på betingelsens resultat +- **Beregner** og viser, hvor lang tid der er til stemmeret, hvis under 18 - **Giver** specifik, nyttig feedback for hver situation ```javascript -// Step 2: Multiple conditions with logical operators +// Trin 2: Flere betingelser med logiske operatorer const userAge = 17; const hasPermission = true; @@ -335,23 +420,23 @@ if (userAge >= 18 && hasPermission) { **Nedbrydning af, hvad der sker her:** - **Kombinerer** flere betingelser ved hjælp af `&&` (og) operatoren -- **Opretter** en hierarki af betingelser ved hjælp af `else if` for flere scenarier -- **Håndterer** alle mulige tilfælde med en sidste `else` statement -- **Giver** klar, handlingsorienteret feedback for hver situation +- **Opretter** et hierarki af betingelser med `else if` til flere scenarier +- **Håndterer** alle mulige tilfælde med en afsluttende `else` sætning +- **Giver** klar, anvendelig feedback for hver forskellig situation ```javascript -// Step 3: Concise conditional with ternary operator +// Trin 3: Kortfattet betingelse med ternær operator const votingStatus = userAge >= 18 ? "Can vote" : "Cannot vote yet"; console.log(`Status: ${votingStatus}`); ``` -**Hvad du skal huske:** -- **Brug** den ternære operator (`? :`) til enkle to-valgs betingelser -- **Skriv** betingelsen først, efterfulgt af `?`, derefter sandt resultat, derefter `:`, derefter falsk resultat +**Husk følgende:** +- **Brug** den ternære operator (`? :`) til simple to-vej betingelser +- **Skriv** betingelsen først, efterfulgt af `?`, derefter sandt resultat, så `:`, og til sidst falsk resultat - **Anvend** dette mønster, når du skal tildele værdier baseret på betingelser ```javascript -// Step 4: Handling multiple specific cases +// Trin 4: Håndtering af flere specifikke tilfælde const dayOfWeek = "Tuesday"; switch (dayOfWeek) { @@ -372,175 +457,209 @@ switch (dayOfWeek) { ``` **Denne kode opnår følgende:** -- **Matcher** variabelværdien mod flere specifikke tilfælde -- **Grupperer** lignende tilfælde sammen (hverdag vs. weekend) -- **Udfører** den passende kodeblok, når der findes et match -- **Inkluderer** en `default` case til at håndtere uventede værdier -- **Bruger** `break` statements for at forhindre koden i at fortsætte til næste case - -> 💡 **Virkelighedsanalogien**: Tænk på control flow som at have verdens mest tålmodige GPS, der giver dig vejledning. Den kunne sige "Hvis der er trafik på Hovedgaden, så tag motorvejen i stedet. Hvis der er vejarbejde på motorvejen, så prøv den naturskønne rute." Programmer bruger præcis den samme type betinget logik til at reagere intelligent på forskellige situationer og altid give brugerne den bedst mulige oplevelse. - -✅ **Hvad der kommer næste gang**: Vi skal have det super sjovt med at dykke dybere ned i disse begreber, mens vi fortsætter denne utrolige rejse sammen! Lige nu skal du bare fokusere på at mærke begejstringen over alle de fantastiske muligheder, der venter dig. De specifikke færdigheder og teknikker vil naturligt hænge ved, mens vi øver os sammen – jeg lover, at det bliver meget sjovere, end du måske forventer! - - -## Værktøjer til faget - -Okay, det her er ærligt talt, hvor jeg bliver så begejstret, at jeg næsten ikke kan holde det inde! 🚀 Vi skal til at tale om de utrolige værktøjer, der vil få dig til at føle, at du lige har fået nøglerne til et digitalt rumskib. - -Du ved, hvordan en kok har de perfekt afbalancerede knive, der føles som en forlængelse af deres hænder? Eller hvordan en musiker har den ene guitar, der synes at synge, så snart de rører ved den? Nå, udviklere har vores egen version af disse magiske værktøjer, og her er, hvad der vil blæse dig helt bagover – de fleste af dem er helt gratis! - -Jeg hopper næsten i stolen af begejstring over at dele disse med dig, fordi de fuldstændig har revolutioneret, hvordan vi bygger software. Vi taler om AI-drevne kodningsassistenter, der kan hjælpe med at skrive din kode (jeg overdriver ikke engang!), cloud-miljøer, hvor du kan bygge hele applikationer fra bogstaveligt talt hvor som helst med Wi-Fi, og fejlfindingsværktøjer så sofistikerede, at de er som at have røntgensyn for dine programmer. - -Og her er den del, der stadig giver mig kuldegysninger: dette er ikke "begynder-værktøjer," som du vil vokse fra. Dette er præcis de samme professionelle værktøjer, som udviklere hos Google, Netflix og det indie-app-studie, du elsker, bruger lige nu. Du vil føle dig som en total pro, når du bruger dem! - - -### Kodeeditorer og IDE'er: Dine nye digitale bedste venner +- **Matcher** variabelværdi mod flere specifikke tilfælde +- **Grupperer** lignende tilfælde (hverdag vs. weekend) +- **Udfører** den korrekte kodeblok, når der findes et match +- **Inkluderer** en `default` sag for at håndtere uventede værdier +- **Bruger** `break` udsagn for at forhindre, at koden fortsætter til næste sag + +> 💡 **Virkelighedsanalog**: Tænk på kontrolflow som verdens mest tålmodige GPS, der giver dig vejvisning. Den kan fx sige "Hvis der er trafik på Main Street, tag motorvejen i stedet. Hvis vejarbejde blokerer motorvejen, prøv den naturskønne rute." Programmer bruger præcis samme type betingede logik til intelligent at reagere på forskellige situationer og altid give brugerne den bedst mulige oplevelse. + +### 🎯 **Begrebskontrol: Mestring af byggestenene** + +**Lad os se, hvordan det går med det grundlæggende:** +- Kan du forklare forskellen mellem en variabel og et udsagn med dine egne ord? +- Tænk på en virkelig situation, hvor du ville bruge et hvis-så-valg (som i vores stemmeeksempel) +- Hvad er én ting ved programmeringslogik, der overraskede dig? + +**Hurtig selvtillidsboost:** +```mermaid +flowchart LR + A["📝 Udsagn
(Instruktioner)"] --> B["📦 Variabler
(Lagring)"] --> C["🔀 Kontrolflow
(Beslutninger)"] --> D["🎉 Fungerende Program!"] + + style A fill:#ffeb3b + style B fill:#4caf50 + style C fill:#2196f3 + style D fill:#ff4081 +``` +✅ **Hvad kommer næst**: Vi skal have det absolut sjovt med at dykke dybere ned i disse koncepter, mens vi fortsætter denne utrolige rejse sammen! Lige nu skal du bare fokusere på at mærke begejstringen over alle de fantastiske muligheder foran dig. De specifikke færdigheder og teknikker vil komme helt naturligt, mens vi øver sammen – jeg lover, det bliver meget sjovere, end du måske forventer! + +## Værktøjerne i faget + +Okay, her bliver jeg ærligt talt så begejstret, at jeg næsten ikke kan holde det inde! 🚀 Vi skal til at tale om de utrolige værktøjer, som kommer til at få dig til at føle, at du lige har fået nøglerne til et digitalt rumskib. + +Du ved, hvordan en kok har de perfekt afbalancerede knive, der føles som en forlængelse af deres hænder? Eller hvordan en musiker har den ene guitar, der synes at synge, så snart de rører ved den? Nå, udviklere har vores egen version af disse magiske værktøjer, og her kommer det, der helt sikkert vil blæse dit sind – de fleste af dem er fuldstændigt gratis! + +Jeg sidder næsten og hopper på stolen over at skulle dele disse med dig, fordi de fuldstændigt har revolutioneret, hvordan vi bygger software. Vi taler om AI-drevne kodeassistenter, som kan hjælpe med at skrive din kode (jeg laver ikke sjov!), cloud-miljøer, hvor du kan bygge hele applikationer fra bogstaveligt talt hvor som helst med Wi-Fi, og fejlfindingværktøjer så sofistikerede, at de er som at have røntgensyn for dine programmer. + +Og her kommer det, der stadig giver mig gåsehud: det er ikke "begynder-værktøjer," du kommer til at vokse fra. Det er nøjagtigt de samme professionelle værktøjer, som udviklere hos Google, Netflix og det indie app-studie, du elsker, bruger lige nu. Du kommer til at føle dig som en vaskeægte pro med dem! + +```mermaid +graph TD + A["💡 Din idé"] --> B["⌨️ Kodeeditor
(VS Code)"] + B --> C["🌐 Browser DevTools
(Test & Fejlfinding)"] + C --> D["⚡ Kommandolinje
(Automatisering & Værktøjer)"] + D --> E["📚 Dokumentation
(Læring & Reference)"] + E --> F["🚀 Fantastisk webapp!"] + + B -.-> G["🤖 AI-assistent
(GitHub Copilot)"] + C -.-> H["📱 Enhedstest
(Responsivt design)"] + D -.-> I["📦 Pakkehåndtering
(npm, yarn)"] + E -.-> J["👥 Fællesskab
(Stack Overflow)"] + + style A fill:#fff59d + style F fill:#c8e6c9 + style G fill:#e1f5fe + style H fill:#f3e5f5 + style I fill:#ffccbc + style J fill:#e8eaf6 +``` +### Kodeeditorer og IDE’er: Dine nye digitale bedste venner -Lad os tale om kodeeditorer – de er seriøst ved at blive dine nye yndlingssteder at hænge ud! Tænk på dem som din personlige kodningshelligdom, hvor du vil bruge det meste af din tid på at skabe og perfektionere dine digitale kreationer. +Lad os tale om kodeeditorer – de er seriøst lige ved at blive dine nye yndlingssteder at hænge ud! Tænk på dem som din personlige kodningshelligdom, hvor du vil tilbringe det meste af din tid med at skabe og perfektionere dine digitale værker. -Men her er det magiske ved moderne editorer: de er ikke bare fancy teksteditorer. De er som at have den mest geniale, støttende kodningsmentor siddende lige ved siden af dig 24/7. De fanger dine tastefejl, før du overhovedet bemærker dem, foreslår forbedringer, der får dig til at se ud som en geni, hjælper dig med at forstå, hvad hver eneste del af koden gør, og nogle af dem kan endda forudsige, hvad du er ved at skrive og tilbyde at afslutte dine tanker! +Men her er det helt magiske ved moderne editorer: de er ikke bare fine teksteditorer. Det er som at have den mest geniale, støttende kodningsmentor siddende lige ved siden af dig 24/7. De fanger dine tastefejl, før du overhovedet opdager dem, foreslår forbedringer, der får dig til at se genial ud, hjælper dig med at forstå, hvad hver eneste kodebid gør, og nogle af dem kan endda forudsige, hvad du er ved at skrive, og tilbyde at færdiggøre dine tanker! -Jeg husker, da jeg først opdagede auto-fuldførelse – jeg følte bogstaveligt talt, at jeg levede i fremtiden. Du begynder at skrive noget, og din editor siger: "Hey, tænkte du på denne funktion, der gør præcis, hvad du har brug for?" Det er som at have en tankelæser som din kodningsmakker! +Jeg kan huske, da jeg først opdagede auto-fuldførelse – jeg følte bogstaveligt talt, at jeg levede i fremtiden. Du begynder at skrive noget, og din editor siger, "Hey, tænkte du på denne funktion, der gør præcis det, du har brug for?" Det er som at have en tankelæser som din kodekammerat! **Hvad gør disse editorer så utrolige?** -Moderne kodeeditorer tilbyder en imponerende række funktioner designet til at øge din produktivitet: +Moderne kodeeditorer tilbyder en imponerende række funktioner, der er designet til at øge din produktivitet: -| Funktion | Hvad den gør | Hvorfor det hjælper | -|----------|--------------|---------------------| -| **Syntaksfremhævning** | Farver forskellige dele af din kode | Gør koden lettere at læse og finde fejl | -| **Auto-fuldførelse** | Foreslår kode, mens du skriver | Fremskynder kodning og reducerer tastefejl | -| **Fejlfindingsværktøjer** | Hjælper dig med at finde og rette fejl | Sparer timer på fejlfinding | +| Funktion | Hvad den gør | Hvorfor den hjælper | +|---------|--------------|--------------| +| **Syntax Highlighting** | Farver forskellige dele af din kode | Gør koden lettere at læse og spotte fejl | +| **Auto-completion** | Foreslår kode mens du skriver | Hurtigere kodning og færre tastefejl | +| **Fejlfindingsværktøjer** | Hjælper dig med at finde og rette fejl | Spar tid på fejlretning | | **Udvidelser** | Tilføjer specialiserede funktioner | Tilpas din editor til enhver teknologi | | **AI-assistenter** | Foreslår kode og forklaringer | Fremskynder læring og produktivitet | -> 🎥 **Videoressource**: Vil du se disse værktøjer i aktion? Tjek denne [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) for en omfattende oversigt. +> 🎥 **Videoressource**: Vil du se disse værktøjer i praksis? Tjek denne [Tools of the Trade video](https://youtube.com/watch?v=69WJeXGBdxg) for et omfattende overblik. #### Anbefalede editorer til webudvikling **[Visual Studio Code](https://code.visualstudio.com/?WT.mc_id=academic-77807-sagibbon)** (Gratis) - Mest populær blandt webudviklere -- Fremragende udvidelsesøkosystem +- Fremragende økosystem af udvidelser - Indbygget terminal og Git-integration - **Must-have udvidelser**: - [GitHub Copilot](https://marketplace.visualstudio.com/items?itemName=GitHub.copilot) - AI-drevne kodeforslag - - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Samarbejde i realtid + - [Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) - Realtids samarbejde - [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) - Automatisk kodeformatering - - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Fang tastefejl i din kode + - [Code Spell Checker](https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker) - Fanger stavefejl i din kode **[JetBrains WebStorm](https://www.jetbrains.com/webstorm/)** (Betalt, gratis for studerende) - Avancerede fejlfindings- og testværktøjer - Intelligent kodefuldførelse - Indbygget versionskontrol -**Cloud-baserede IDE'er** (Forskellige priser) -- [GitHub Codespaces](https://github.com/features/codespaces) - Fuld VS Code i din browser -- [Replit](https://replit.com/) - Fantastisk til læring og deling af kode -- [StackBlitz](https://stackblitz.com/) - Øjeblikkelig, fuld-stack webudvikling - -> 💡 **Tip til at komme i gang**: Start med Visual Studio Code – det er gratis, bredt anvendt i branchen og har et enormt fællesskab, der skaber nyttige tutorials og udvidelser. +**Cloud-baserede IDE’er** (Forskellige priser) +- [GitHub Codespaces](https://github.com/features/codespaces) – Fuldt VS Code i din browser +- [Replit](https://replit.com/) – Fantastisk til læring og deling af kode +- [StackBlitz](https://stackblitz.com/) – Øjeblikkelig, full-stack webudvikling +> 💡 **Tips til opstart**: Start med Visual Studio Code – det er gratis, meget udbredt i branchen, og har et enormt fællesskab, der laver hjælpsomme tutorials og udvidelser. -### Webbrowser: Dit hemmelige udviklingslaboratorium -Okay, gør dig klar til at få dit sind fuldstændig blæst! Du ved, hvordan du har brugt browsere til at scrolle gennem sociale medier og se videoer? Nå, det viser sig, at de har gemt dette utrolige hemmelige udviklerlaboratorium hele tiden, bare ventende på, at du opdager det! +### Webbrowsere: Dit hemmelige udviklingslaboratorium -Hver gang du højreklikker på en webside og vælger "Inspect Element," åbner du en skjult verden af udviklerværktøjer, der ærligt talt er mere kraftfulde end noget dyrt software, jeg plejede at betale hundredevis af kroner for. Det er som at opdage, at dit almindelige køkken har skjult et professionelt kokkelaboratorium bag en hemmelig panel! +Okay, gør dig klar til at få dit sind fuldstændig blæst! Du ved, hvordan du har brugt browsere til at scrolle gennem sociale medier og se videoer? Nå, det viser sig, at de hele tiden har gemt på et utroligt hemmeligt udviklingslaboratorium, der bare ventede på, at du skulle opdage det! -Første gang nogen viste mig browserens DevTools, brugte jeg omkring tre timer bare på at klikke rundt og sige "VENT, DET KAN OGSÅ DET?!" Du kan bogstaveligt talt redigere enhver hjemmeside i realtid, se præcis hvor hurtigt alting indlæses, teste hvordan din side ser ud på forskellige enheder, og endda fejlfinde JavaScript som en total pro. Det er helt fantastisk! +Hver eneste gang du højreklikker på en webside og vælger "Inspicer element," åbner du en skjult verden af udviklerværktøjer, som ærligt talt er mere kraftfulde end noget dyrt software, jeg tidligere har betalt hundredevis af kroner for. Det er som at opdage, at dit almindelige gamle køkken hele tiden har skjult et professionelt kokkelaboratorium bag en hemmelig panel! +Første gang nogen viste mig browserens DevTools, brugte jeg omkring tre timer bare på at klikke rundt og sige "VENT, KAN DEN OGSÅ DET?!" Du kan bogstaveligt talt redigere enhver hjemmeside i realtid, se præcis hvor hurtigt alt loader, teste hvordan dit site ser ud på forskellige enheder og endda debugge JavaScript som en helt pro. Det er fuldstændig vanvittigt! **Her er hvorfor browsere er dit hemmelige våben:** -Når du skaber en hjemmeside eller webapplikation, skal du se, hvordan den ser ud og opfører sig i den virkelige verden. Browsere viser ikke kun dit arbejde, men giver også detaljeret feedback om ydeevne, tilgængelighed og potentielle problemer. +Når du skaber en hjemmeside eller webapplikation, skal du kunne se, hvordan den ser ud og opfører sig i virkeligheden. Browsere viser ikke kun dit arbejde, men giver også detaljeret feedback om ydeevne, tilgængelighed og potentielle problemer. -#### Browserudviklerværktøjer (DevTools) +#### Browser Developer Tools (DevTools) -Moderne browsere inkluderer omfattende udviklingssuiter: +Moderne browsere indeholder omfattende udviklingsværktøjer: -| Værktøjskategori | Hvad det gør | Eksempel på brugsscenarie | -|------------------|-------------|--------------------------| -| **Elementinspektør** | Vis og rediger HTML/CSS i realtid | Juster styling for at se øjeblikkelige resultater | -| **Konsol** | Se fejlmeddelelser og test JavaScript | Fejlsøg problemer og eksperimenter med kode | -| **Netværksovervågning** | Følg med i, hvordan ressourcer indlæses | Optimer ydeevne og indlæsningstider | -| **Tilgængelighedstjekker** | Test for inkluderende design | Sørg for, at din side fungerer for alle brugere | -| **Enhedssimulator** | Forhåndsvisning på forskellige skærmstørrelser | Test responsivt design uden flere enheder | +| Tool Category | What It Does | Example Use Case | +|---------------|--------------|------------------| +| **Element Inspector** | Se og rediger HTML/CSS i realtid | Juster styling for at se øjeblikkelige resultater | +| **Console** | Se fejlmeddelelser og test JavaScript | Debug problemer og eksperimenter med kode | +| **Network Monitor** | Overvåg hvordan ressourcer loader | Optimer ydeevne og indlæsningstider | +| **Accessibility Checker** | Test for inklusivt design | Sikr at dit site fungerer for alle brugere | +| **Device Simulator** | Forhåndsvis på forskellige skærmstørrelser | Test responsivt design uden flere enheder | #### Anbefalede browsere til udvikling -- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Branchestandard DevTools med omfattende dokumentation -- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Fremragende værktøjer til CSS Grid og tilgængelighed +- **[Chrome](https://developers.google.com/web/tools/chrome-devtools/)** - Industriens standard DevTools med omfattende dokumentation +- **[Firefox](https://developer.mozilla.org/docs/Tools)** - Fremragende CSS Grid og tilgængelighedsværktøjer - **[Edge](https://docs.microsoft.com/microsoft-edge/devtools-guide-chromium/?WT.mc_id=academic-77807-sagibbon)** - Bygget på Chromium med Microsofts udviklerressourcer -> ⚠️ **Vigtig testtip**: Test altid dine websites i flere browsere! Det, der fungerer perfekt i Chrome, kan se anderledes ud i Safari eller Firefox. Professionelle udviklere tester på tværs af alle større browsere for at sikre en ensartet brugeroplevelse. +> ⚠️ **Vigtig test-tip**: Test altid dine hjemmesider i flere browsere! Det, der fungerer perfekt i Chrome, kan se anderledes ud i Safari eller Firefox. Professionelle udviklere tester på tværs af alle større browsere for at sikre en ensartet brugeroplevelse. ### Kommandolinjeværktøjer: Din adgang til udvikler-superkræfter -Okay, lad os være helt ærlige omkring kommandolinjen, fordi jeg vil have, at du hører dette fra en, der virkelig forstår det. Da jeg først så den – bare denne skræmmende sorte skærm med blinkende tekst – tænkte jeg bogstaveligt talt: "Nej, absolut ikke! Det her ligner noget fra en hackerfilm fra 1980'erne, og jeg er bestemt ikke klog nok til det her!" 😅 +Okay, lad os være helt ærlige om kommandolinjen, for jeg vil have, at du hører det fra en, der virkelig forstår det. Da jeg først så den – bare den her skræmmende sorte skærm med blinkende tekst – tænkte jeg bogstaveligt talt: "Nej, absolut ikke! Det ligner noget fra en hackerfilm i 1980'erne, og jeg er bestemt ikke smart nok til det!" 😅 -Men her er, hvad jeg ville ønske, nogen havde fortalt mig dengang, og hvad jeg fortæller dig lige nu: kommandolinjen er ikke skræmmende – det er faktisk som at have en direkte samtale med din computer. Tænk på det som forskellen mellem at bestille mad gennem en fancy app med billeder og menuer (hvilket er dejligt og nemt) versus at gå ind på din yndlingsrestaurant, hvor kokken ved præcis, hvad du kan lide, og kan lave noget perfekt bare ved, at du siger "overrask mig med noget fantastisk." +Men her er, hvad jeg ville ønske, nogen havde fortalt mig dengang, og hvad jeg fortæller dig lige nu: kommandolinjen er ikke skræmmende – det er faktisk som at have en direkte samtale med din computer. Tænk på det som forskellen mellem at bestille mad gennem en fancy app med billeder og menuer (som er nemt og lækkert) versus at gå ind på din yndlingslokale restaurant, hvor kokken ved præcis, hvad du kan lide og kan trylle noget perfekt frem bare ved at du siger "overrask mig med noget fantastisk." -Kommandolinjen er der, hvor udviklere går hen for at føle sig som absolutte troldmænd. Du skriver nogle tilsyneladende magiske ord (okay, det er bare kommandoer, men de føles magiske!), trykker på enter, og BUM – du har skabt hele projektstrukturer, installeret kraftfulde værktøjer fra hele verden eller udrullet din app på internettet, så millioner af mennesker kan se den. Når du først får en smagsprøve på den magt, er det ærligt talt ret vanedannende! +Kommandolinjen er stedet, hvor udviklere føler sig som ægte troldmænd. Du taster et par tilsyneladende magiske ord (okay, de er bare kommandoer, men de føles magiske!), trykker enter, og BAM – du har oprettet hele projektstrukturer, installeret kraftfulde værktøjer fra hele verden eller udrullet din app til internettet, så millioner kan se den. Når du først får en smag af den kraft, er det ærligt talt ret vanedannende! -**Hvorfor kommandolinjen vil blive dit yndlingsværktøj:** +**Derfor bliver kommandolinjen dit favoritværktøj:** -Selvom grafiske grænseflader er fantastiske til mange opgaver, udmærker kommandolinjen sig ved automatisering, præcision og hastighed. Mange udviklingsværktøjer fungerer primært gennem kommandolinjegrænseflader, og det at lære at bruge dem effektivt kan dramatisk forbedre din produktivitet. +Mens grafiske brugerflader er fantastiske til mange opgaver, excellerer kommandolinjen i automatisering, præcision og hastighed. Mange udviklingsværktøjer fungerer primært via kommandolinjegrænseflader, og at lære at bruge dem effektivt kan forbedre din produktivitet markant. ```bash -# Step 1: Create and navigate to project directory +# Trin 1: Opret og naviger til projektmappen mkdir my-awesome-website cd my-awesome-website ``` -**Hvad denne kode gør:** -- **Opretter** en ny mappe kaldet "my-awesome-website" til dit projekt -- **Navigerer** ind i den nyoprettede mappe for at begynde arbejdet +**Sådan fungerer denne kode:** +- **Opret** en ny mappe kaldet "my-awesome-website" til dit projekt +- **Naviger** ind i den nyskabte mappe for at begynde arbejdet ```bash -# Step 2: Initialize project with package.json +# Trin 2: Initialiser projekt med package.json npm init -y -# Install modern development tools +# Installer moderne udviklingsværktøjer npm install --save-dev vite prettier eslint npm install --save-dev @eslint/js ``` -**Trin for trin, her er hvad der sker:** -- **Initialiserer** et nyt Node.js-projekt med standardindstillinger ved hjælp af `npm init -y` -- **Installerer** Vite som et moderne build-værktøj til hurtig udvikling og produktionsbygninger -- **Tilføjer** Prettier til automatisk kodeformatering og ESLint til kvalitetskontrol af kode -- **Bruger** flaget `--save-dev` for at markere disse som kun udviklingsafhængigheder +**Trin for trin sker der følgende:** +- **Initialiser** et nyt Node.js-projekt med standardindstillinger ved brug af `npm init -y` +- **Installer** Vite som et moderne build-værktøj til hurtig udvikling og produktion +- **Tilføj** Prettier til automatisk kodeformatering og ESLint til kodekvalitetskontrol +- **Brug** flaget `--save-dev` for at markere disse som udviklingsafhængigheder ```bash -# Step 3: Create project structure and files +# Trin 3: Opret projektstruktur og filer mkdir src assets echo 'My Site

Hello World

' > index.html -# Start development server +# Start udviklingsserver npx vite ``` **I ovenstående har vi:** -- **Organiseret** vores projekt ved at oprette separate mapper til kildekode og ressourcer +- **Organiseret** vores projekt ved at oprette separate mapper til kildekode og assets - **Genereret** en grundlæggende HTML-fil med korrekt dokumentstruktur -- **Startet** Vite-udviklingsserveren for live opdatering og hot module replacement +- **Startet** Vite udviklingsserveren for live reload og hot module replacement #### Vigtige kommandolinjeværktøjer til webudvikling -| Værktøj | Formål | Hvorfor du har brug for det | -|---------|--------|----------------------------| -| **[Git](https://git-scm.com/)** | Versionskontrol | Spor ændringer, samarbejd med andre, sikkerhedskopier dit arbejde | +| Tool | Purpose | Why You Need It | +|------|---------|-----------------| +| **[Git](https://git-scm.com/)** | Versionskontrol | Spor ændringer, samarbejd med andre, backup af dit arbejde | | **[Node.js & npm](https://nodejs.org/)** | JavaScript runtime & pakkehåndtering | Kør JavaScript uden for browsere, installer moderne udviklingsværktøjer | -| **[Vite](https://vitejs.dev/)** | Build-værktøj & udviklingsserver | Lynhurtig udvikling med hot module replacement | -| **[ESLint](https://eslint.org/)** | Kvalitetssikring af kode | Find og ret automatisk problemer i din JavaScript | -| **[Prettier](https://prettier.io/)** | Kodeformatering | Hold din kode konsekvent formateret og læsbar | +| **[Vite](https://vitejs.dev/)** | Build-værktøj & dev-server | Lynhurtig udvikling med hot module replacement | +| **[ESLint](https://eslint.org/)** | Kodekvalitet | Find og ret automatisk problemer i dit JavaScript | +| **[Prettier](https://prettier.io/)** | Kodeformatering | Hold din kode konsekvent formateret og letlæselig | #### Platformsspecifikke muligheder **Windows:** - **[Windows Terminal](https://docs.microsoft.com/windows/terminal/?WT.mc_id=academic-77807-sagibbon)** - Moderne, funktionsrig terminal -- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Kraftfuldt scripting-miljø -- **[Kommandoprompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Traditionel Windows-kommandolinje +- **[PowerShell](https://docs.microsoft.com/powershell/?WT.mc_id=academic-77807-sagibbon)** 💻 - Kraftigt scriptingmiljø +- **[Command Prompt](https://docs.microsoft.com/windows-server/administration/windows-commands/?WT.mc_id=academic-77807-sagibbon)** 💻 - Traditonel Windows kommandolinje **macOS:** - **[Terminal](https://support.apple.com/guide/terminal/)** 💻 - Indbygget terminalapplikation @@ -550,59 +669,75 @@ npx vite - **[Bash](https://www.gnu.org/software/bash/)** 💻 - Standard Linux shell - **[KDE Konsole](https://docs.kde.org/trunk5/en/konsole/konsole/index.html)** - Avanceret terminalemulator -> 💻 = Forudinstalleret på operativsystemet +> 💻 = Forudinstalleret i operativsystemet -> 🎯 **Læringsvej**: Start med grundlæggende kommandoer som `cd` (skift mappe), `ls` eller `dir` (list filer) og `mkdir` (opret mappe). Øv dig med moderne arbejdsgangskommandoer som `npm install`, `git status` og `code .` (åbner den aktuelle mappe i VS Code). Når du bliver mere komfortabel, vil du naturligt lære mere avancerede kommandoer og automatiseringsteknikker. +> 🎯 **Læringsvejledning**: Start med basis-kommandoer som `cd` (skift mappe), `ls` eller `dir` (list filer) og `mkdir` (opret mappe). Øv dig med moderne workflow-kommandoer som `npm install`, `git status` og `code .` (åbner tilhørende mappe i VS Code). Når du bliver mere komfortabel, vil du naturligt lære mere avancerede kommandoer og automatiseringsteknikker. -### Dokumentation: Din altid tilgængelige læringsmentor +### Dokumentation: Din altid-tilgængelige læringsmentor -Okay, lad mig dele en lille hemmelighed, der vil få dig til at føle dig meget bedre som nybegynder: selv de mest erfarne udviklere bruger en stor del af deres tid på at læse dokumentation. Og det er ikke fordi, de ikke ved, hvad de laver – det er faktisk et tegn på visdom! +Okay, lad mig dele en lille hemmelighed, som vil få dig til at føle dig meget bedre tilpas som nybegynder: selv de mest erfarne udviklere bruger en stor del af deres tid på at læse dokumentation. Og det er ikke fordi, de ikke ved, hvad de laver – det er faktisk et tegn på visdom! -Tænk på dokumentation som at have adgang til verdens mest tålmodige, vidende lærere, der er tilgængelige 24/7. Sidder du fast med et problem kl. 2 om natten? Dokumentationen er der med et varmt virtuelt kram og præcis det svar, du har brug for. Vil du lære om en cool ny funktion, som alle taler om? Dokumentationen har din ryg med trin-for-trin eksempler. Prøver du at forstå, hvorfor noget fungerer, som det gør? Du gættede det – dokumentationen er klar til at forklare det på en måde, der endelig får det til at give mening! +Tænk på dokumentation som at have adgang til verdens mest tålmodige, vidende lærere, der er tilgængelige døgnet rundt. Sidder du fast i et problem kl. 2 om natten? Dokumentationen er der med en varm virtuel krammer og præcis det svar, du har brug for. Vil du lære om en fed ny funktion, som alle taler om? Dokumentationen støtter dig med trin-for-trin eksempler. Forsøger du at forstå, hvorfor noget fungerer, som det gør? Gættede du det – dokumentationen er klar til at forklare det på en måde, der endelig klikker! -Her er noget, der fuldstændig ændrede min perspektiv: webudviklingsverdenen bevæger sig utrolig hurtigt, og ingen (jeg mener absolut ingen!) husker alting. Jeg har set seniorudviklere med 15+ års erfaring slå grundlæggende syntaks op, og ved du hvad? Det er ikke pinligt – det er smart! Det handler ikke om at have en perfekt hukommelse; det handler om at vide, hvor man hurtigt kan finde pålidelige svar og forstå, hvordan man anvender dem. +Her er noget, der helt ændrede mit perspektiv: webudviklingsverdenen bevæger sig utroligt hurtigt, og ingen (jeg mener absolut ingen!) kan huske alt. Jeg har set seniordom udviklere med 15+ års erfaring slå grundlæggende syntaks op, og ved du hvad? Det er ikke pinligt – det er smart! Det handler ikke om at have perfekt hukommelse; det handler om at vide, hvor man hurtigt kan finde pålidelige svar og forstå, hvordan man anvender dem. -**Her er, hvor den virkelige magi sker:** +**Her sker den virkelige magi:** -Professionelle udviklere bruger en betydelig del af deres tid på at læse dokumentation – ikke fordi de ikke ved, hvad de laver, men fordi webudviklingslandskabet udvikler sig så hurtigt, at det kræver kontinuerlig læring at holde sig opdateret. God dokumentation hjælper dig med at forstå ikke bare *hvordan* man bruger noget, men også *hvorfor* og *hvornår* man skal bruge det. +Professionelle udviklere bruger en betydelig del af deres tid på at læse dokumentation – ikke fordi de er usikre, men fordi webudviklingslandskabet udvikler sig så hurtigt, at det kræver konstant læring at følge med. God dokumentation hjælper dig med ikke bare *hvordan* man bruger noget, men også *hvorfor* og *hvornår* man bruger det. #### Vigtige dokumentationsressourcer **[Mozilla Developer Network (MDN)](https://developer.mozilla.org/docs/Web)** -- Guldstandarden for dokumentation om webteknologi -- Omfattende vejledninger til HTML, CSS og JavaScript +- Guldstandarden for dokumentation af webteknologier +- Omfattende guider til HTML, CSS og JavaScript - Indeholder browserkompatibilitetsinformation -- Har praktiske eksempler og interaktive demoer +- Har praktiske eksempler og interaktive demos **[Web.dev](https://web.dev)** (af Google) -- Moderne bedste praksis inden for webudvikling -- Vejledninger til optimering af ydeevne -- Principper for tilgængelighed og inkluderende design -- Casestudier fra virkelige projekter +- Moderne bedste praksis for webudvikling +- Guides til ydeevneoptimering +- Tilgængelighed og inklusivt design principper +- Case-studier fra virkelige projekter **[Microsoft Developer Documentation](https://docs.microsoft.com/microsoft-edge/#microsoft-edge-for-developers)** -- Ressourcer til udvikling af Edge-browseren -- Vejledninger til Progressive Web Apps -- Indsigt i tværplatformsudvikling +- Udviklerressourcer til Edge browseren +- Progressive Web App guides +- Indsigter om tværplatform udvikling **[Frontend Masters Learning Paths](https://frontendmasters.com/learn/)** -- Strukturerede læringsforløb +- Strukturerede læringscurricula - Videokurser fra brancheeksperter - Praktiske kodningsøvelser -> 📚 **Studiestrategi**: Prøv ikke at huske dokumentationen – lær i stedet, hvordan du navigerer effektivt i den. Bogmærk ofte brugte referencer, og øv dig i at bruge søgefunktionerne til hurtigt at finde specifik information. +> 📚 **Studieteknik**: Forsøg ikke at huske dokumentationen udenad – lær i stedet at navigere effektivt i den. Bogmærk ofte brugte referencer og øv dig i at bruge søgefunktioner til hurtigt at finde specifik information. -✅ **Mad til eftertanke**: Her er noget interessant at overveje – hvordan tror du, at værktøjerne til at bygge websites (udvikling) adskiller sig fra værktøjerne til at designe, hvordan de ser ud (design)? Det er som forskellen mellem at være en arkitekt, der designer et smukt hus, og en entreprenør, der faktisk bygger det. Begge dele er afgørende, men de har brug for forskellige værktøjskasser! Denne slags tænkning vil virkelig hjælpe dig med at se det større billede af, hvordan websites bliver til. +### 🔧 **Værktøjsmestring: Hvad taler til dig?** +**Tag et øjeblik og overvej:** +- Hvilket værktøj er du mest spændt på at prøve først? (Der er ikke noget forkert svar!) +- Føles kommandolinjen stadig skræmmende, eller er du nysgerrig på den? +- Kan du forestille dig at bruge browserens DevTools til at kigge bag kulisserne på dine yndlingshjemmesider? -## GitHub Copilot Agent-udfordring 🚀 +```mermaid +pie title "Udviklertid brugt med værktøjer" + "Kodeeditor" : 40 + "Browser Test" : 25 + "Kommandolinje" : 15 + "Læsning af dokumentation" : 15 + "Fejlfinding" : 5 +``` +> **Sjov indsigt**: De fleste udviklere bruger omkring 40% af deres tid i deres kodeeditor, men læg mærke til hvor meget tid, der går til test, læring og problemløsning. Programmering handler ikke kun om at skrive kode – det handler om at skabe oplevelser! + +✅ **Noget at tænke over**: Her er en interessant tanke – hvordan tror du, værktøjerne til at bygge hjemmesider (udvikling) adskiller sig fra værktøjerne til at designe, hvordan de ser ud (design)? Det er som forskellen mellem en arkitekt, der designer et smukt hus, og entreprenøren, der rent faktisk bygger det. Begge er afgørende, men de har brug for forskellige værktøjskasser! Denne tankegang vil virkelig hjælpe dig med at se det større billede af, hvordan hjemmesider kommer til live. + +## GitHub Copilot Agent Challenge 🚀 -Brug Agent-tilstand til at fuldføre følgende udfordring: +Brug Agent-tilstand til at løse følgende udfordring: -**Beskrivelse:** Udforsk funktionerne i en moderne kodeeditor eller IDE og demonstrer, hvordan den kan forbedre din arbejdsgang som webudvikler. +**Beskrivelse:** Udforsk funktionerne i en moderne kodeeditor eller IDE og demonstrer, hvordan den kan forbedre din workflow som webudvikler. -**Opgave:** Vælg en kodeeditor eller IDE (såsom Visual Studio Code, WebStorm eller en cloud-baseret IDE). List tre funktioner eller udvidelser, der hjælper dig med at skrive, fejlsøge eller vedligeholde kode mere effektivt. For hver, giv en kort forklaring på, hvordan det gavner din arbejdsgang. +**Prompt:** Vælg en kodeeditor eller IDE (som Visual Studio Code, WebStorm eller en cloud-baseret IDE). List tre funktioner eller udvidelser, der hjælper dig med at skrive, debugge eller vedligeholde kode mere effektivt. For hver, giv en kort forklaring på, hvordan det gavner din workflow. --- @@ -610,59 +745,121 @@ Brug Agent-tilstand til at fuldføre følgende udfordring: **Okay, detektiv, klar til din første sag?** -Nu hvor du har denne fantastiske grundlag, har jeg en opgave, der vil hjælpe dig med at se, hvor utrolig mangfoldig og fascinerende programmeringsverdenen virkelig er. Og hør her – det handler ikke om at skrive kode endnu, så ingen pres der! Tænk på dig selv som en programmeringssprogsdetektiv på din allerførste spændende sag! +Nu hvor du har fået dette fantastiske fundament, har jeg et eventyr, der vil hjælpe dig med at se, hvor utrolig forskelligartet og fascinerende programmeringsverdenen virkelig er. Og hør her – det handler ikke om at skrive kode endnu, så ingen pres! Tænk på dig selv som en programmingssprog-detektiv på din allerførste spændende sag! **Din mission, hvis du vælger at acceptere den:** -1. **Bliv en sprogudforsker**: Vælg tre programmeringssprog fra helt forskellige universer – måske et, der bygger websites, et, der skaber mobilapps, og et, der analyserer data for videnskabsfolk. Find eksempler på den samme simple opgave skrevet i hvert sprog. Jeg lover, du vil blive absolut forbløffet over, hvor forskellige de kan se ud, mens de gør præcis det samme! +1. **Bliv sprogeksplorer**: Vælg tre programmeringssprog fra helt forskellige universer – måske et der bygger hjemmesider, et der skaber mobilapps og et, der bearbejder data for forskere. Find eksempler på den samme simple opgave skrevet i hvert sprog. Jeg lover, du bliver fuldstændig forbavset over, hvor forskellige de kan se ud, mens de laver præcis det samme! -2. **Afslør deres oprindelseshistorier**: Hvad gør hvert sprog specielt? Her er en cool fakta – hvert eneste programmeringssprog blev skabt, fordi nogen tænkte: "Du ved hvad? Der må være en bedre måde at løse dette specifikke problem på." Kan du finde ud af, hvad de problemer var? Nogle af disse historier er virkelig fascinerende! +2. **Opdag deres oprindelseshistorier**: Hvad gør hvert sprog specielt? Her er en fed kendsgerning – hvert eneste programmeringssprog blev skabt, fordi nogen tænkte: "Ved du hvad? Der må være en bedre måde at løse dette specifikke problem på." Kan du finde ud af, hvad de problemer var? Nogle af disse historier er virkelig fascinerende! -3. **Mød fællesskaberne**: Tjek, hvor imødekommende og passionerede hvert sprogs fællesskab er. Nogle har millioner af udviklere, der deler viden og hjælper hinanden, andre er mindre, men utrolig sammentømrede og støttende. Du vil elske at se de forskellige personligheder, disse fællesskaber har! +3. **Mød fællesskaberne**: Se på, hvor imødekommende og passionerede hvert sprogs fællesskab er. Nogle har millioner af udviklere, der deler viden og hjælper hinanden, andre er mindre, men utroligt tætte og støttende. Du vil elske at se de forskellige personligheder i disse fællesskaber! -4. **Følg din mavefornemmelse**: Hvilket sprog føles mest tilgængeligt for dig lige nu? Stress ikke over at træffe det "perfekte" valg – lyt bare til dine instinkter! Der er ærligt talt ikke noget forkert svar her, og du kan altid udforske andre senere. +4. **Følg din mavefornemmelse**: Hvilket sprog føles mest tilgængeligt for dig lige nu? Stress ikke over at træffe det "perfekte" valg – bare lyt til din intuition! Der findes ærligt talt ikke noget forkert svar her, og du kan altid udforske andre senere. -**Bonus detektivarbejde**: Se, om du kan finde ud af, hvilke store websites eller apps der er bygget med hvert sprog. Jeg garanterer, at du vil blive overrasket over at lære, hvad der driver Instagram, Netflix eller det mobilspil, du ikke kan stoppe med at spille! +**Bonus detektivarbejde**: Se om du kan finde ud af, hvilke store hjemmesider eller apps der er bygget med hvert sprog. Jeg garanterer, at du bliver chokeret over, hvad der driver Instagram, Netflix eller det mobilspil, du ikke kan slippe! -> 💡 **Husk**: Du prøver ikke at blive ekspert i nogen af disse sprog i dag. Du lærer bare kvarteret at kende, før du beslutter dig for, hvor du vil slå dig ned. Tag dig tid, hav det sjovt med det, og lad din nysgerrighed guide dig! +> 💡 **Husk**: Du prøver ikke at blive ekspert i nogen af disse sprog i dag. Du lærer bare kvarteret at kende, inden du beslutter, hvor du vil slå dig ned. Tag dig god tid, hav det sjovt og lad din nysgerrighed føre dig! -## Lad os fejre, hvad du har opdaget! +## Lad os fejre det, du har opdaget! -Hold da op, du har absorberet så meget fantastisk information i dag! Jeg er oprigtigt spændt på at se, hvor meget af denne fantastiske rejse der har sat sig fast hos dig. Og husk – det her er ikke en test, hvor du skal have alt perfekt. Det er mere som en fejring af alle de seje ting, du har lært om denne fascinerende verden, du er ved at dykke ned i! +Hold da op, du har suget så meget fantastisk information til dig i dag! Jeg er virkelig spændt på at se, hvor meget af denne fantastiske rejse, der er blevet hængende hos dig. Og husk – det er ikke en test, hvor du skal have alt perfekt. Det her er mere som en fejring af alt det fede, du har lært om denne fascinerende verden, du er ved at begive dig ud i! -[Tag quizzen efter lektionen](https://ff-quizzes.netlify.app/web/) - -## Gennemgang & Selvstudie +[Tag efter-lektion quizzen](https://ff-quizzes.netlify.app/web/) +## Review & Selvstudie **Tag dig tid til at udforske og have det sjovt med det!** -Du har dækket meget i dag, og det er noget at være stolt af! Nu kommer den sjove del – at udforske de emner, der har vakt din nysgerrighed. Husk, det her er ikke lektier – det er et eventyr! +Du har dækket meget i dag, og det er noget at være stolt af! Nu kommer den sjove del – at udforske de emner, der vækkede din nysgerrighed. Husk, det her er ikke lektier – det er et eventyr! **Dyk dybere ned i det, der begejstrer dig:** -**Bliv praktisk med programmeringssprog:** +**Prøv programmeringssprog af:** - Besøg de officielle hjemmesider for 2-3 sprog, der fangede din opmærksomhed. Hvert sprog har sin egen personlighed og historie! -- Prøv nogle online kodningsplatforme som [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), eller [Replit](https://replit.com/). Vær ikke bange for at eksperimentere – du kan ikke ødelægge noget! -- Læs om, hvordan dit yndlingssprog blev til. Seriøst, nogle af disse oprindelseshistorier er fascinerende og vil hjælpe dig med at forstå, hvorfor sprog fungerer, som de gør. +- Prøv nogle online kodelegepladser som [CodePen](https://codepen.io/), [JSFiddle](https://jsfiddle.net/), eller [Replit](https://replit.com/). Vær ikke bange for at eksperimentere – du kan ikke ødelægge noget! +- Læs om, hvordan dit yndlingssprog blev til. Alvorligt talt, nogle af oprindelseshistorierne er fascinerende og vil hjælpe dig med at forstå, hvorfor sprog fungerer, som de gør. -**Bliv komfortabel med dine nye værktøjer:** -- Download Visual Studio Code, hvis du ikke allerede har gjort det – det er gratis, og du vil elske det! -- Brug et par minutter på at browse Extensions-markedet. Det er som en app-butik for din kodeeditor! -- Åbn din browsers udviklerværktøjer og klik bare rundt. Vær ikke bekymret for at forstå alt – bare bliv fortrolig med, hvad der er der. +**Bliv fortrolig med dine nye værktøjer:** +- Download Visual Studio Code, hvis du ikke allerede har det – det er gratis, og du vil elske det! +- Brug et par minutter på at gennemse Extensions-markedet. Det er som en app-butik til din kodeeditor! +- Åbn din browsers udviklerværktøjer og klik bare rundt. Bekymr dig ikke om at forstå alt – bare bliv fortrolig med, hvad der er der. -**Deltag i fællesskabet:** -- Følg nogle udviklerfællesskaber på [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), eller [GitHub](https://github.com/). Udviklerfællesskabet er utrolig imødekommende over for nybegyndere! -- Se nogle begynder-venlige kodningsvideoer på YouTube. Der er så mange fantastiske skabere derude, som husker, hvordan det er at starte fra bunden. +**Bliv en del af fællesskabet:** +- Følg nogle udviklerfællesskaber på [Dev.to](https://dev.to/), [Stack Overflow](https://stackoverflow.com/), eller [GitHub](https://github.com/). Programmeringsfællesskabet er utrolig imødekommende over for nybegyndere! +- Se nogle begynder-venlige programmeringsvideoer på YouTube. Der findes mange gode skabere, som husker, hvordan det var at starte ud. - Overvej at deltage i lokale meetups eller online fællesskaber. Tro mig, udviklere elsker at hjælpe nybegyndere! -> 🎯 **Lyt, her er hvad jeg vil have, du husker**: Du forventes ikke at blive en kodningsmester fra den ene dag til den anden! Lige nu handler det om at lære denne fantastiske nye verden at kende, som du er ved at blive en del af. Tag dig tid, nyd rejsen, og husk – hver eneste udvikler, du beundrer, har engang siddet præcis der, hvor du er lige nu, spændt og måske en smule overvældet. Det er helt normalt, og det betyder, at du gør det rigtigt! +> 🎯 **Lyt, her er hvad jeg vil have, du husker**: Du forventes ikke at blive en kode-troldmand natten over! Lige nu lærer du bare at kende denne fantastiske nye verden, du er ved at blive en del af. Tag dig tid, nyd rejsen, og husk – hver eneste udvikler, du beundrer, sad engang præcis, hvor du sidder lige nu, og følte sig begejstret og måske lidt overvældet. Det er helt normalt, og det betyder, at du gør det rigtigt! + + ## Opgave -[Læs dokumentationen](assignment.md) +[Reading the Docs](assignment.md) + +> 💡 **Et lille skub til din opgave**: Jeg ville virkelig elske at se dig udforske nogle værktøjer, vi ikke har dækket endnu! Spring editorerne, browsere og kommandolinjeværktøjerne over, som vi allerede har talt om – der er et helt utroligt univers af fantastiske udviklingsværktøjer derude, som bare venter på at blive opdaget. Kig efter dem, der er aktivt vedligeholdt og har levende, hjælpsomme fællesskaber (de har som regel de bedste tutorials og de mest støttende folk, når du uundgåeligt sidder fast og har brug for en venlig hånd). -> 💡 **Et lille skub til din opgave**: Jeg ville elske at se dig udforske nogle værktøjer, vi ikke har dækket endnu! Spring editorer, browsere og kommandolinjeværktøjer over, som vi allerede har talt om – der er et helt utroligt univers af fantastiske udviklingsværktøjer derude, der bare venter på at blive opdaget. Kig efter dem, der aktivt vedligeholdes og har livlige, hjælpsomme fællesskaber (de har ofte de bedste tutorials og de mest støttende mennesker, når du uundgåeligt sidder fast og har brug for en venlig hånd). +--- + +## 🚀 Din Programmeringsrejse Tidslinje + +### ⚡ **Hvad du kan nå på de næste 5 minutter** +- [ ] Bogmærk 2-3 programmeringssprogs hjemmesider, der fangede din opmærksomhed +- [ ] Download Visual Studio Code, hvis du ikke allerede har det +- [ ] Åbn din browsers DevTools (F12) og klik rundt på en hvilken som helst hjemmeside +- [ ] Bliv medlem af et programmeringsfællesskab (Dev.to, Reddit r/webdev, eller Stack Overflow) + +### ⏰ **Hvad du kan nå på denne time** +- [ ] Fuldfør quizzen efter lektionen og reflekter over dine svar +- [ ] Opsæt VS Code med GitHub Copilot-udvidelsen +- [ ] Prøv et "Hello World" eksempel i 2 forskellige programmeringssprog online +- [ ] Se en video om "En dag i livet for en udvikler" på YouTube +- [ ] Påbegynd din detektivarbejde om programmeringssprog (fra udfordringen) + +### 📅 **Dit uge-lange eventyr** +- [ ] Fuldfør opgaven og udforsk 3 nye udviklingsværktøjer +- [ ] Følg 5 udviklere eller programmeringskonti på sociale medier +- [ ] Prøv at bygge noget lille i CodePen eller Replit (selv bare "Hello, [Dit Navn]!") +- [ ] Læs et udviklerblogindlæg om nogens programmeringsrejse +- [ ] Deltag i et virtuelt meetup eller se en programmeringssnak +- [ ] Begynd at lære dit valgte sprog med online tutorials + +### 🗓️ **Din månedslange forvandling** +- [ ] Byg dit første lille projekt (selv en simpel webside tæller!) +- [ ] Bidrag til et open source-projekt (start med dokumentationsrettelser) +- [ ] Mentorer en, der lige er startet på deres programmeringsrejse +- [ ] Lav din udviklerportfolio-hjemmeside +- [ ] Forbind dig med lokale udviklerfællesskaber eller studiegrupper +- [ ] Begynd at planlægge dit næste læringsmål + +### 🎯 **Afsluttende refleksion** + +**Før du går videre, så tag et øjeblik til at fejre:** +- Hvad er én ting ved programmering, der begejstrede dig i dag? +- Hvilket værktøj eller koncept vil du udforske først? +- Hvordan føler du dig ved at starte denne programmeringsrejse? +- Hvilket spørgsmål vil du stille en udvikler lige nu? + +```mermaid +journey + title Din Selvtillidsopbygningsrejse + section I dag + Nysgerrig: 3: You + Overvældet: 4: You + Begejstret: 5: You + section Denne uge + Udforskning: 4: You + Læring: 5: You + Forbindelse: 4: You + section Næste måned + Opbygning: 5: You + Selvsikker: 5: You + Hjælper andre: 5: You +``` +> 🌟 **Husk**: Enhver ekspert var engang en begynder. Enhver seniorudvikler har følt sig præcis som dig lige nu – begejstret, måske lidt overvældet, og bestemt nysgerrig efter, hvad der er muligt. Du er i fantastisk selskab, og denne rejse bliver utroligt spændende. Velkommen til den vidunderlige verden af programmering! 🎉 --- -**Ansvarsfraskrivelse**: -Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse. \ No newline at end of file + +**Ansvarsfraskrivelse**: +Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, bedes du være opmærksom på, at automatiske oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os ikke ansvar for eventuelle misforståelser eller fejltolkninger som følge af brugen af denne oversættelse. + \ No newline at end of file diff --git a/translations/da/1-getting-started-lessons/2-github-basics/README.md b/translations/da/1-getting-started-lessons/2-github-basics/README.md index e3445f306..e115bd5df 100644 --- a/translations/da/1-getting-started-lessons/2-github-basics/README.md +++ b/translations/da/1-getting-started-lessons/2-github-basics/README.md @@ -1,170 +1,209 @@ # Introduktion til GitHub -Hej der, fremtidige udvikler! 👋 Klar til at slutte dig til millioner af kodere verden over? Jeg er virkelig begejstret for at introducere dig til GitHub – tænk på det som en social medieplatform for programmører, bortset fra at vi deler kode og skaber fantastiske ting sammen i stedet for at dele billeder af vores frokost! +Hej der, kommende udvikler! 👋 Klar til at slutte dig til millioner af programmører rundt om i verden? Jeg er virkelig begejstret for at introducere dig til GitHub – tænk på det som et socialt medie for programmører, bortset fra at i stedet for at dele billeder af din frokost, deler vi kode og bygger utrolige ting sammen! -Her er noget, der virkelig blæser mig omkuld: hver app på din telefon, hver hjemmeside du besøger, og de fleste af de værktøjer, du vil lære at bruge, er bygget af teams af udviklere, der samarbejder på platforme som GitHub. Den musikapp, du elsker? Nogen som dig har bidraget til den. Det spil, du ikke kan lægge fra dig? Jep, sandsynligvis bygget med GitHub-samarbejde. Og nu skal DU lære, hvordan du bliver en del af det fantastiske fællesskab! +Her er hvad der virkelig blæser mig omkuld: hver app på din telefon, hver hjemmeside du besøger, og de fleste af de værktøjer, du vil lære at bruge, er bygget af teams af udviklere, der samarbejder på platforme ligesom GitHub. Den musik-app du elsker? Nogen som dig har bidraget til den. Det spil du ikke kan lægge fra dig? Jep, sandsynligvis bygget med GitHub samarbejde. Og nu SKAL DU til at lære, hvordan du bliver en del af det fantastiske fællesskab! -Jeg ved, det kan føles som meget i starten – jeg husker selv, hvordan jeg stirrede på min første GitHub-side og tænkte "Hvad i alverden betyder alt dette?" Men her er sagen: hver eneste udvikler startede præcis der, hvor du er lige nu. Ved slutningen af denne lektion vil du have din helt egen GitHub-repository (tænk på det som din personlige projektudstilling i skyen), og du vil vide, hvordan du gemmer dit arbejde, deler det med andre og endda bidrager til projekter, som millioner af mennesker bruger. +Jeg ved, det måske føles som meget i starten – pokkers, jeg husker at stirre på min første GitHub-side med tanken "Hvad pokker betyder det hele?" Men her er sagen: hver eneste udvikler startede præcis hvor du er lige nu. Når denne lektion er slut, vil du have dit helt eget GitHub repository (tænk på det som dit personlige projektudstilling i skyen), og du vil vide, hvordan du gemmer dit arbejde, deler det med andre og endda bidrager til projekter, som millioner af mennesker bruger. -Vi tager denne rejse sammen, skridt for skridt. Ingen hast, ingen pres – bare dig, mig og nogle virkelig seje værktøjer, der snart bliver dine nye bedste venner! +Vi tager denne rejse sammen, skridt for skridt. Ingen hast, intet pres – bare dig, mig og nogle virkelig fede værktøjer, som snart bliver dine nye bedste venner! -![Intro til GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f947909b4f9d343e2a23778aa716ca6b9d71df7174ee5009ac.da.png) +![Intro to GitHub](../../../../translated_images/webdev101-github.8846d7971abef6f9.da.png) > Sketchnote af [Tomomi Imura](https://twitter.com/girlie_mac) -## Quiz før lektionen -[Quiz før lektionen](https://ff-quizzes.netlify.app) +```mermaid +journey + title Din GitHub-eventyr i dag + section Opsætning + Installér Git: 4: You + Opret Konto: 5: You + Første Repository: 5: You + section Mestre Git + Lokale Ændringer: 4: You + Commits & Pushes: 5: You + Branching: 4: You + section Samarbejd + Fork Projekter: 4: You + Pull Requests: 5: You + Open Source: 5: You +``` +## For-forelæsning quiz +[For-forelæsning quiz](https://ff-quizzes.netlify.app) ## Introduktion -Før vi dykker ned i de virkelig spændende ting, skal vi gøre din computer klar til noget GitHub-magi! Tænk på det som at organisere dine kunstforsyninger, før du skaber et mesterværk – at have de rigtige værktøjer klar gør alting så meget nemmere og meget sjovere. +Før vi dykker ned i det virkelig spændende, lad os gøre din computer klar til noget GitHub-magisk! Tænk på det som at organisere dine kunstmaterialer inden du går i gang med et mesterværk – at have de rigtige værktøjer klar gør alting så meget nemmere og meget sjovere. -Jeg vil personligt guide dig gennem hvert opsætningsskridt, og jeg lover, det er slet ikke så skræmmende, som det måske ser ud ved første øjekast. Hvis noget ikke giver mening med det samme, er det helt normalt! Jeg husker, da jeg satte mit første udviklingsmiljø op og følte, at jeg forsøgte at læse gamle hieroglyffer. Hver eneste udvikler har været præcis der, hvor du er lige nu, og undret sig over, om de gør det rigtigt. Spoiler alert: hvis du er her og lærer, gør du det allerede rigtigt! 🌟 +Jeg vil guide dig igennem hvert opsætningsskridt personligt, og jeg lover, det er slet ikke så skræmmende, som det måske ser ud ved første øjekast. Hvis noget ikke klikker med det samme, er det helt normalt! Jeg husker at sætte mit første udviklingsmiljø op og følte, det var som at forsøge at læse gamle hieroglyffer. Hver eneste udvikler har været præcis hvor du er lige nu, og spekuleret på, om de gjorde det rigtigt. Spoiler alert: hvis du er her og lærer, gør du det allerede rigtigt! 🌟 I denne lektion vil vi dække: -- hvordan du sporer det arbejde, du laver på din maskine -- hvordan du arbejder på projekter med andre -- hvordan du bidrager til open source-software +- sporing af det arbejde du laver på din maskine +- arbejde på projekter med andre +- hvordan du bidrager til open source software ### Forudsætninger -Lad os gøre din computer klar til noget GitHub-magi! Bare rolig – denne opsætning er noget, du kun behøver at gøre én gang, og så er du klar til hele din koderejse. +Lad os gøre din computer klar til noget GitHub-magisk! Bare rolig – denne opsætning skal du kun gøre én gang, og så er du klar til hele din kodningsrejse. -Okay, lad os starte med fundamentet! Først skal vi tjekke, om Git allerede er på din computer. Git er grundlæggende som at have en super-smart assistent, der husker hver eneste ændring, du laver i din kode – meget bedre end at trykke Ctrl+S hvert andet sekund (vi har alle været der!). +Okay, lad os starte med fundamentet! Først skal vi tjekke, om Git allerede er installeret på din computer. Git er dybest set som at have en super klog assistent, der husker hver eneste ændring, du laver i din kode – meget bedre end at hamre på Ctrl+S hvert andet sekund (vi har alle prøvet det!). Lad os se, om Git allerede er installeret ved at skrive denne magiske kommando i din terminal: `git --version` -Hvis Git ikke er der endnu, ingen problemer! Bare gå til [download Git](https://git-scm.com/downloads) og hent det. Når du har installeret det, skal vi introducere Git til dig ordentligt: +Hvis Git ikke er der endnu, ingen bekymringer! Bare gå til [download Git](https://git-scm.com/downloads) og hent det. Når du har installeret det, skal du introducere Git til dig ordentligt: -> 💡 **Første opsætning**: Disse kommandoer fortæller Git, hvem du er. Denne information vil blive knyttet til hver commit, du laver, så vælg et navn og en e-mail, du er komfortabel med at dele offentligt. +> 💡 **Første opsætning**: Disse kommandoer fortæller Git, hvem du er. Denne information bliver knyttet til hver commit, du laver, så vælg et navn og en e-mail, du er komfortabel med at dele offentligt. ```bash git config --global user.name "your-name" git config --global user.email "your-email" ``` -For at tjekke, om Git allerede er konfigureret, kan du skrive: +For at tjekke om Git allerede er konfigureret kan du skrive: ```bash git config --list ``` -Du skal også bruge en GitHub-konto, en kodeeditor (som Visual Studio Code), og du skal åbne din terminal (eller: kommandoprompt). +Du får også brug for en GitHub-konto, en kodeeditor (f.eks. Visual Studio Code), og du skal åbne din terminal (eller: kommandoprompt). -Naviger til [github.com](https://github.com/) og opret en konto, hvis du ikke allerede har en, eller log ind og udfyld din profil. +Gå til [github.com](https://github.com/) og opret en konto, hvis du ikke allerede har en, eller log ind og udfyld din profil. -💡 **Moderne tip**: Overvej at opsætte [SSH-nøgler](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) eller bruge [GitHub CLI](https://cli.github.com/) for nemmere autentificering uden adgangskoder. +💡 **Moderne tip**: Overvej at opsætte [SSH keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh) eller bruge [GitHub CLI](https://cli.github.com/) for nemmere autentificering uden adgangskoder. -✅ GitHub er ikke det eneste koderepositorium i verden; der findes andre, men GitHub er det mest kendte. +✅ GitHub er ikke det eneste kode lager i verden; der findes andre, men GitHub er det mest kendte ### Forberedelse -Du skal bruge både en mappe med et kodeprojekt på din lokale maskine (laptop eller PC) og et offentligt repository på GitHub, som vil fungere som et eksempel på, hvordan man bidrager til andres projekter. +Du skal bruge både en mappe med et kodeprojekt på din lokale maskine (bærbar eller PC), og et offentligt repository på GitHub, som vil tjene som et eksempel på, hvordan man bidrager til andres projekter. -### Hold din kode sikker +### Sådan beskytter du din kode -Lad os tale om sikkerhed et øjeblik – men bare rolig, vi vil ikke overvælde dig med skræmmende ting! Tænk på disse sikkerhedspraksisser som at låse din bil eller dit hus. De er simple vaner, der bliver en selvfølge og holder dit hårde arbejde beskyttet. +Lad os tale lidt om sikkerhed – men bare rolig, vi vil ikke overvælde dig med skræmmende ting! Tænk på disse sikkerhedspraksisser som at låse din bil eller dit hus. Det er simple vaner, der bliver naturlige og beskytter dit hårde arbejde. -Vi vil vise dig de moderne, sikre måder at arbejde med GitHub lige fra starten. På den måde vil du udvikle gode vaner, der vil tjene dig godt gennem hele din kodningskarriere. +Vi viser dig moderne, sikre måder at arbejde med GitHub på helt fra starten. På den måde udvikler du gode vaner, som vil tjene dig godt i hele din kodningskarriere. -Når du arbejder med GitHub, er det vigtigt at følge sikkerhedsbedste praksis: +Når du arbejder med GitHub, er det vigtigt at følge bedste sikkerhedspraksis: | Sikkerhedsområde | Bedste praksis | Hvorfor det er vigtigt | -|------------------|----------------|-------------------------| -| **Autentificering** | Brug SSH-nøgler eller personlige adgangstokens | Adgangskoder er mindre sikre og udfases | -| **To-faktor autentificering** | Aktiver 2FA på din GitHub-konto | Tilføjer et ekstra lag af kontobeskyttelse | -| **Repository-sikkerhed** | Aldrig commit følsomme oplysninger | API-nøgler og adgangskoder bør aldrig være i offentlige repos | -| **Afhængighedsstyring** | Aktiver Dependabot for opdateringer | Holder dine afhængigheder sikre og opdaterede | +|------------------|----------------|-----------------------| +| **Autentificering** | Brug SSH keys eller Personlige adgangstokens | Adgangskoder er mindre sikre og på vej ud | +| **To-faktor-autentificering** | Aktivér 2FA på din GitHub-konto | Tilføjer et ekstra lag af beskyttelse for kontoen | +| **Repository sikkerhed** | Committ aldrig følsomme oplysninger | API-nøgler og adgangskoder må aldrig være i offentlige repos | +| **Afhængighedsstyring** | Aktivér Dependabot til opdateringer | Holder dine afhængigheder sikre og opdaterede | -> ⚠️ **Kritisk sikkerhedspåmindelse**: Aldrig commit API-nøgler, adgangskoder eller andre følsomme oplysninger til noget repository. Brug miljøvariabler og `.gitignore`-filer til at beskytte følsomme data. +> ⚠️ **Kritisk sikkerhedsadvarsel**: Committ aldrig API-nøgler, adgangskoder eller andre følsomme oplysninger til nogen repository. Brug miljøvariabler og `.gitignore` filer til at beskytte følsomme data. **Moderne autentificeringsopsætning:** ```bash -# Generate SSH key (modern ed25519 algorithm) +# Generer SSH-nøgle (moderne ed25519-algoritme) ssh-keygen -t ed25519 -C "your_email@example.com" -# Set up Git to use SSH +# Konfigurer Git til at bruge SSH git remote set-url origin git@github.com:username/repository.git ``` -> 💡 **Pro Tip**: SSH-nøgler eliminerer behovet for gentagne adgangskoder og er mere sikre end traditionelle autentificeringsmetoder. +> 💡 **Pro-tip**: SSH keys eliminerer behovet for gentagne adgangskodeindtastninger og er mere sikre end traditionelle autentificeringsmetoder. --- ## Administrer din kode som en professionel -Okay, NU bliver det virkelig spændende! 🎉 Vi skal lære, hvordan man sporer og administrerer sin kode som de professionelle, og ærligt talt er dette en af mine yndlingsting at undervise i, fordi det er en total game-changer. - -Forestil dig dette: du skriver en fantastisk historie, og du vil holde styr på hver udkast, hver genial redigering og hver "vent, det er genialt!"-øjeblik undervejs. Det er præcis, hvad Git gør for din kode! Det er som at have den mest utrolige tidsrejsende notesbog, der husker ALT – hver tastetryk, hver ændring, hver "ups, det ødelagde alt"-øjeblik, som du straks kan fortryde. - -Jeg skal være ærlig – det kan føles overvældende i starten. Da jeg begyndte, tænkte jeg "Hvorfor kan jeg ikke bare gemme mine filer som normalt?" Men stol på mig: når Git klikker for dig (og det vil det!), vil du få en af de der lyspære-øjeblikke, hvor du tænker "Hvordan har jeg NOGENSINDE kodet uden dette?" Det er som at opdage, at du kan flyve, når du har gået overalt hele dit liv! - -Lad os sige, at du har en mappe lokalt med et kodeprojekt, og du vil begynde at spore din fremgang ved hjælp af git – versionskontrolsystemet. Nogle mennesker sammenligner brugen af git med at skrive et kærlighedsbrev til dit fremtidige jeg. Når du læser dine commit-beskeder dage, uger eller måneder senere, vil du kunne huske, hvorfor du tog en beslutning, eller "rulle tilbage" en ændring – altså, når du skriver gode "commit-beskeder". - +Okay, HER er det, det virkelig bliver spændende! 🎉 Vi skal til at lære, hvordan du sporer og administrerer din kode som profferne, og ærligt talt, det her er en af mine yndlingsting at undervise i, fordi det ændrer virkelig spillet. + +Forestil dig det: du skriver en fantastisk historie, og du vil holde styr på hvert udkast, hver genial redigering og hvert "vent, det er genialt!" øjeblik undervejs. Det er præcis, hvad Git gør for din kode! Det er som at have den mest utrolige tidsrejsende notesbog, der husker ALT – hver tastaturtryk, hver ændring, hvert "oops, det brød alt" øjeblik, som du øjeblikkeligt kan fortryde. + +Jeg vil være ærlig – det kan føles overvældende i starten. Da jeg begyndte, tænkte jeg "Hvorfor kan jeg ikke bare gemme mine filer som normalt?" Men tro mig på dette: når Git klikker for dig (og det vil det!), vil du få et af de der lyskugle-øjeblikke, hvor du tænker "Hvordan kunne jeg NOGENSINDE kode uden dette?" Det er som at opdage, du kan flyve, når du har gået alle steder hele dit liv! + +Lad os sige, du har en mappe lokalt med et kodeprojekt, og du vil begynde at spore din udvikling med git - versionsstyringssystemet. Nogle sammenligner at bruge git med at skrive et kærlighedsbrev til dit fremtidige jeg. Når du læser dine commit-beskeder dage, uger eller måneder senere, kan du huske, hvorfor du tog en beslutning eller "rulle tilbage" en ændring – det kræver selvfølgelig, at du skriver gode "commit-beskeder". + +```mermaid +flowchart TD + A[📁 Dine Projektfiler] --> B{Er det et Git-Repository?} + B -->|Nej| C[git init] + B -->|Ja| D[Foretag Ændringer] + C --> D + D --> E[git add .] + E --> F["git commit -m 'besked'"] + F --> G[git push] + G --> H[🌟 Kode på GitHub!] + + H --> I{Vil du samarbejde?} + I -->|Ja| J[Forgrene & Klon] + I -->|Nej| D + J --> K[Opret Gren] + K --> L[Foretag Ændringer] + L --> M[Pull Anmodning] + M --> N[🎉 Bidrager!] + + style A fill:#fff59d + style H fill:#c8e6c9 + style N fill:#ff4081,color:#fff +``` ### Opgave: Opret dit første repository! -> 🎯 **Din mission (og jeg er så begejstret for dig!)**: Vi skal sammen oprette dit allerførste GitHub-repository! Når vi er færdige her, vil du have din egen lille hjørne af internettet, hvor din kode bor, og du vil have lavet din første "commit" (det er udvikler-sprog for at gemme dit arbejde på en virkelig smart måde). +> 🎯 **Din mission (og jeg er så glad på dine vegne!)**: Vi skal sammen oprette dit allerførste GitHub-repository! Når vi er færdige her, vil du have dit eget lille hjørne af internettet, hvor din kode bor, og du vil have lavet din første "commit" (det er udviklersprog for at gemme dit arbejde på en virkelig smart måde). > -> Dette er ærligt talt et helt specielt øjeblik – du er ved officielt at slutte dig til det globale fællesskab af udviklere! Jeg husker stadig spændingen ved at oprette mit første repo og tænke "Wow, jeg gør virkelig dette!" +> Det her er virkelig et særligt øjeblik – du er ved at officielt blive en del af det globale udviklerfællesskab! Jeg husker stadig spændingen ved at oprette mit første repo og tænke "Wow, jeg gør det virkelig!" -Lad os gå igennem dette eventyr sammen, skridt for skridt. Tag dig god tid med hver del – der er ingen præmie for at skynde sig, og jeg lover, at hvert eneste skridt vil give mening. Husk, hver kodningsstjerne, du beundrer, har engang siddet præcis der, hvor du er, klar til at oprette deres første repository. Hvor sejt er det? +Lad os tage denne rejse sammen, trin for trin. Tag dig god tid med hvert trin – der er ingen præmie for at skynde sig, og jeg lover, at hvert enkelt trin vil give mening. Husk, at hver eneste kodestjerne, du beundrer, engang sad præcis hvor du sidder nu, klar til at oprette deres første repository. Hvor fedt er det? > Se video > -> [![Git og GitHub grundlæggende video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) +> [![Git og GitHub basics video](https://img.youtube.com/vi/9R31OUPpxU4/0.jpg)](https://www.youtube.com/watch?v=9R31OUPpxU4) **Lad os gøre det sammen:** -1. **Opret dit repository på GitHub**. Gå til GitHub.com og kig efter den lysegrønne **Ny**-knap (eller **+**-tegnet i øverste højre hjørne). Klik på den og vælg **Nyt repository**. +1. **Opret dit repository på GitHub**. Gå til GitHub.com og se efter den lysegrønne **New** knap (eller **+** ikonet øverst til højre). Klik på den og vælg **New repository**. - Her er, hvad du skal gøre: - 1. Giv dit repository et navn – gør det til noget, der betyder noget for dig! + Her er hvad du skal gøre: + 1. Giv dit repository et navn – vælg noget meningsfuldt for dig! 1. Tilføj en beskrivelse, hvis du vil (det hjælper andre med at forstå, hvad dit projekt handler om) - 1. Beslut, om du vil have det offentligt (alle kan se det) eller privat (kun for dig) - 1. Jeg anbefaler at markere boksen for at tilføje en README-fil – det er som forsiden af dit projekt - 1. Klik på **Opret repository** og fejre – du har lige oprettet dit første repo! 🎉 + 1. Beslut om det skal være offentligt (alle kan se det) eller privat (kun for dig) + 1. Jeg anbefaler at du sætter kryds i boksen for at tilføje en README-fil – det er som forsiden af dit projekt + 1. Klik **Create repository** og fejre – du har lige oprettet dit første repo! 🎉 -2. **Naviger til din projektmappe**. Nu skal vi åbne din terminal (bare rolig, det ser ikke så skræmmende ud!). Vi skal fortælle din computer, hvor dine projektfiler er. Skriv denne kommando: +2. **Naviger til din projektmappe**. Lad os nu åbne din terminal (bare rolig, det er ikke så skræmmende som det ser ud!). Vi skal fortælle din computer, hvor dine projektfiler er. Skriv denne kommando: ```bash cd [name of your folder] ``` **Hvad vi gør her:** - - Vi siger grundlæggende "Hej computer, tag mig til min projektmappe" - - Det er som at åbne en specifik mappe på dit skrivebord, men vi gør det med tekstkommandoer - - Erstat `[navn på din mappe]` med det faktiske navn på din projektmappe + - Vi siger dybest set "Hej computer, tag mig til min projektmappe" + - Det er som at åbne en bestemt mappe på dit skrivebord, men vi gør det med tekstkommandoer + - Erstat `[name of your folder]` med det faktiske navn på din projektmappe -3. **Gør din mappe til et Git repository**. Her sker magien! Skriv: +3. **Gør din mappe til et Git repository**. Det er her magien sker! Skriv: ```bash git init ``` - **Her er, hvad der lige skete (ret sejt!):** - - Git har lige oprettet en skjult `.git`-mappe i dit projekt – du kan ikke se den, men den er der! + **Her er hvad der lige skete (ret fedt!):** + - Git har lige oprettet en skjult `.git` mappe i dit projekt – du kan ikke se den, men den er der! - Din almindelige mappe er nu et "repository", der kan spore hver ændring, du laver - Tænk på det som at give din mappe superkræfter til at huske alt -4. **Tjek, hvad der sker**. Lad os se, hvad Git synes om dit projekt lige nu: +4. **Se hvad der sker**. Lad os se, hvad Git tænker om dit projekt lige nu: ```bash git status ``` - **Forstå, hvad Git fortæller dig:** + **Forstå hvad Git fortæller dig:** - Du kan se noget, der ser sådan her ud: + Du kan måske se noget, der ligner dette: ```output Changes not staged for commit: @@ -175,46 +214,46 @@ Lad os gå igennem dette eventyr sammen, skridt for skridt. Tag dig god tid med modified: file2.txt ``` - **Ingen panik! Her er, hvad det betyder:** + **Bare rolig! Her er hvad det betyder:** - Filer i **rødt** er filer, der har ændringer, men ikke er klar til at blive gemt endnu - Filer i **grønt** (når du ser dem) er klar til at blive gemt - - Git er hjælpsom ved at fortælle dig præcis, hvad du kan gøre næste gang + - Git er hjælpsom ved at fortælle dig præcis, hvad du kan gøre næste - > 💡 **Pro tip**: Kommandoen `git status` er din bedste ven! Brug den, når du er forvirret over, hvad der foregår. Det er som at spørge Git "Hej, hvad er situationen lige nu?" + > 💡 **Pro-tip**: `git status` kommandoen er din bedste ven! Brug den når som helst du er forvirret over, hvad der foregår. Det er som at spørge Git "Hej, hvad sker der lige nu?" -5. **Gør dine filer klar til at gemme** (det kaldes "staging"): +5. **Gør dine filer klar til at blive gemt** (det kaldes "staging"): ```bash git add . ``` **Hvad vi lige gjorde:** - - Vi fortalte Git "Hej, jeg vil inkludere ALLE mine filer i den næste gemning" - - `.` er som at sige "alt i denne mappe" - - Nu er dine filer "staged" og klar til næste trin + - Vi sagde til Git "Hey, jeg vil inkludere ALLE mine filer i næste gemning" + - `.` betyder "alt i denne mappe" + - Nu er dine filer "staged" og klar til næste skridt - **Vil du være mere selektiv?** Du kan tilføje kun specifikke filer: + **Vil du være mere selektiv?** Du kan tilføje kun udvalgte filer: ```bash git add [file or folder name] ``` - **Hvorfor vil du måske gøre dette?** + **Hvorfor vil du gøre det?** - Nogle gange vil du gemme relaterede ændringer sammen - - Det hjælper dig med at organisere dit arbejde i logiske dele - - Gør det lettere at forstå, hvad der ændrede sig og hvornår + - Det hjælper dig med at organisere dit arbejde i logiske bidder + - Gør det nemmere at forstå, hvad der ændrede sig og hvornår - **Har du ombestemt dig?** Ingen problemer! Du kan fjerne filer fra staging som dette: + **Skiftede du mening?** Bare rolig! Du kan fjerne filer fra staging sådan her: ```bash - # Unstage everything + # Fjern alt fra staging-området git reset - # Unstage just one file + # Fjern kun én fil fra staging-området git reset [file name] ``` - Bare rolig – dette sletter ikke dit arbejde, det fjerner bare filer fra "klar til at gemme"-bunken. + Bare rolig – det sletter ikke dit arbejde, det tager bare filerne ud af "klar til at gemme" bunken. 6. **Gem dit arbejde permanent** (lav din første commit!): @@ -224,30 +263,30 @@ Lad os gå igennem dette eventyr sammen, skridt for skridt. Tag dig god tid med **🎉 Tillykke! Du har lige lavet din første commit!** - **Her er, hvad der lige skete:** + **Her er hvad der lige skete:** - Git tog et "snapshot" af alle dine staged filer på dette præcise tidspunkt - - Din commit-besked "første commit" forklarer, hvad dette gemmepunkt handler om - - Git gav dette snapshot en unik ID, så du altid kan finde det senere - - Du er officielt begyndt at spore din projekthistorik! + - Din commit-besked "first commit" forklarer, hvad dette gemmepunkt går ud på + - Git gav dette snapshot en unik ID, så du altid kan finde det igen + - Du er officielt begyndt at spore dit projekts historie! - > 💡 **Fremtidige commit-beskeder**: For dine næste commits, vær mere beskrivende! I stedet for "opdateret ting", prøv "Tilføj kontaktformular til hjemmeside" eller "Fix fejl i navigationsmenu". Dit fremtidige jeg vil takke dig! + > 💡 **Fremtidige commit-beskeder**: Vær mere beskrivende næste gang! I stedet for "updated stuff" prøv "Tilføj kontaktformular på forsiden" eller "Fix navigation menu bug". Dit fremtidige jeg vil takke dig! -7. **Forbind dit lokale projekt til GitHub**. Lige nu eksisterer dit projekt kun på din computer. Lad os forbinde det til dit GitHub-repository, så du kan dele det med verden! +7. **Forbind dit lokale projekt til GitHub**. Lige nu findes dit projekt kun på din computer. Lad os forbinde det til dit GitHub-repository, så du kan dele det med verden! - Først, gå til din GitHub repository-side og kopier URL'en. Gå derefter tilbage her og skriv: + Gå først til din GitHub-repository side og kopier URL’en. Kom så tilbage her og skriv: ```bash git remote add origin https://github.com/username/repository_name.git ``` - (Erstat den URL med din faktiske repository-URL!) + (Erstat den URL med den faktiske URL til dit repository!) **Hvad vi lige gjorde:** - - Vi har oprettet en forbindelse mellem dit lokale projekt og din GitHub-repository - - "Origin" er bare et kælenavn for din GitHub-repository – det er som at tilføje en kontakt til din telefon + - Vi har oprettet en forbindelse mellem dit lokale projekt og dit GitHub-repositorium + - "Origin" er bare et kælenavn for dit GitHub-repositorium – det er som at tilføje en kontakt til din telefon - Nu ved din lokale Git, hvor den skal sende din kode, når du er klar til at dele den - 💡 **Nem løsning**: Hvis du har GitHub CLI installeret, kan du gøre dette med én kommando: + 💡 **Nemmere måde**: Hvis du har GitHub CLI installeret, kan du gøre det med én kommando: ```bash gh repo create my-repo --public --push --source=. ``` @@ -258,19 +297,19 @@ Lad os gå igennem dette eventyr sammen, skridt for skridt. Tag dig god tid med git push -u origin main ``` - **🚀 Det er nu! Du uploader din kode til GitHub!** + **🚀 Det er det! Du uploader din kode til GitHub!** - **Hvad der sker:** + **Hvad sker der:** - Dine commits rejser fra din computer til GitHub - `-u` flaget opretter en permanent forbindelse, så fremtidige pushes bliver nemmere - - "main" er navnet på din primære branch (som hovedmappen) + - "main" er navnet på din primære branch (ligesom hovedmappen) - Efter dette kan du bare skrive `git push` for fremtidige uploads! - 💡 **Hurtig note**: Hvis din branch hedder noget andet (som "master"), skal du bruge det navn. Du kan tjekke med `git branch --show-current`. + 💡 **Hurtig note**: Hvis din branch hedder noget andet (som "master"), brug det navn i stedet. Du kan tjekke med `git branch --show-current`. -9. **Din nye daglige kodningsrytme** (her bliver det vanedannende!): +9. **Din nye daglige kode-rytme** (her bliver det vanedannende!): - Fra nu af, hver gang du laver ændringer i dit projekt, har du denne enkle tre-trins dans: + Fra nu af, hver gang du laver ændringer i dit projekt, har du denne simple tre-trins dans: ```bash git add . @@ -278,44 +317,69 @@ Lad os gå igennem dette eventyr sammen, skridt for skridt. Tag dig god tid med git push ``` - **Dette bliver din kodningspuls:** - - Lav nogle fantastiske ændringer i din kode ✨ + **Dette bliver din kodehjerterytme:** + - Lav nogle fantastiske ændringer til din kode ✨ - Stage dem med `git add` ("Hey Git, læg mærke til disse ændringer!") - - Gem dem med `git commit` og en beskrivende besked (fremtidige dig vil takke dig!) - - Del dem med verden ved hjælp af `git push` 🚀 - - Gentag – seriøst, det bliver lige så naturligt som at trække vejret! - - Jeg elsker denne arbejdsgang, fordi det er som at have flere gemmepunkter i et videospil. Lavede du en ændring, du elsker? Commit den! Vil du prøve noget risikabelt? Intet problem – du kan altid gå tilbage til din sidste commit, hvis tingene går galt! - - > 💡 **Tip**: Du vil måske også bruge en `.gitignore`-fil til at forhindre filer, du ikke vil tracke, i at dukke op på GitHub - som den notesfil, du gemmer i samme mappe, men som ikke hører hjemme i en offentlig repository. Du kan finde skabeloner til `.gitignore`-filer på [.gitignore templates](https://github.com/github/gitignore) eller oprette en ved hjælp af [gitignore.io](https://www.toptal.com/developers/gitignore). + - Gem dem med `git commit` og en beskrivende besked (fremtidige dig takker dig!) + - Del dem med verden med `git push` 🚀 + - Gentag – seriøst, det bliver ligeså naturligt som at trække vejret! + + Jeg elsker denne arbejdsgang, fordi det er som at have flere gemmepunkter i et videospil. Lavede du en ændring, du elsker? Commit den! Vil du prøve noget risikabelt? Intet problem – du kan altid gå tilbage til din sidste commit, hvis ting går galt! + + > 💡 **Tip**: Du vil måske også bruge en `.gitignore` fil for at forhindre, at filer du ikke ønsker at tracke, dukker op på GitHub – som den noter-fil, du gemmer i samme mappe, men som ikke hører hjemme i et offentligt repo. Du kan finde templates til `.gitignore` filer på [.gitignore templates](https://github.com/github/gitignore) eller lave en via [gitignore.io](https://www.toptal.com/developers/gitignore). + +### 🧠 **Første Repository Check-in: Hvordan Føltes Det?** + +**Tag et øjeblik til at fejre og reflektere:** +- Hvordan føltes det at se din kode dukke op på GitHub for første gang? +- Hvilket trin føltes mest forvirrende, og hvilket føltes overraskende nemt? +- Kan du forklare forskellen mellem `git add`, `git commit` og `git push` med dine egne ord? + +```mermaid +stateDiagram-v2 + [*] --> LocalFiles: Opret projekt + LocalFiles --> Staged: git add . + Staged --> Committed: git commit + Committed --> GitHub: git push + GitHub --> [*]: Succes! 🎉 + + note right of Staged + Filer klar til at gemme + end note + + note right of Committed + Snapshot oprettet + end note +``` +> **Husk**: Selv erfarne udviklere glemmer somme tider præcist kommandoerne. At denne arbejdsgang bliver til muskler kræver øvelse – du gør det godt! -#### Moderne Git-arbejdsgange +#### Moderne Git arbejdsgange -Overvej at tage disse moderne praksisser i brug: +Overvej at bruge disse moderne praksisser: -- **Conventional Commits**: Brug et standardiseret format til commit-beskeder som `feat:`, `fix:`, `docs:` osv. Læs mere på [conventionalcommits.org](https://www.conventionalcommits.org/) -- **Atomiske commits**: Sørg for, at hver commit repræsenterer én logisk ændring +- **Konventionelle Commit-beskeder**: Brug et standardiseret format som `feat:`, `fix:`, `docs:`, osv. Læs mere på [conventionalcommits.org](https://www.conventionalcommits.org/) +- **Atome commits**: Hver commit repræsenterer en enkelt logisk ændring - **Hyppige commits**: Commit ofte med beskrivende beskeder i stedet for store, sjældne commits #### Commit-beskeder -En god Git commit-emnelinje fuldender følgende sætning: -Hvis anvendt, vil denne commit +En god Git commit-overskrift færdiggør denne sætning: +Hvis anvendt, vil denne commit -Brug imperativ nutid: "ændre" i stedet for "ændrede" eller "ændringer". -Som i emnet, brug også imperativ nutid i brødteksten (valgfrit). Brødteksten bør inkludere motivationen for ændringen og kontrastere dette med tidligere adfærd. Du forklarer `hvorfor`, ikke `hvordan`. +Brug imperativ, nutid: "ændre" ikke "ændret" eller "ændringer". +Som i overskriften, brug også i brødteksten (valgfri) imperativ nutid. Brødteksten skal inkludere motivationen for ændringen og kontrastere med tidligere opførsel. Du forklarer `hvorfor`, ikke `hvordan`. -✅ Brug et par minutter på at surfe rundt på GitHub. Kan du finde en virkelig god commit-besked? Kan du finde en meget minimal en? Hvilke oplysninger synes du er de vigtigste og mest nyttige at formidle i en commit-besked? +✅ Tag et par minutter til at surfe rundt på GitHub. Kan du finde en virkelig god commit-besked? Kan du finde en virkelig minimal én? Hvilken information synes du er mest vigtig og nyttig at formidle i en commit-besked? -## Arbejde med andre (Den sjove del!) +## Arbejde med Andre (Den Sjove Del!) -Hold på hat og briller, for HER bliver GitHub helt magisk! 🪄 Du har mestret at administrere din egen kode, men nu dykker vi ned i min absolutte yndlingsdel – samarbejde med fantastiske mennesker fra hele verden. +Hold fast i din hat, for HER bliver GitHub rent magisk! 🪄 Du har mestret at styre din egen kode, men nu dykker vi ned i min absolut yndlingsdel – samarbejde med fantastiske folk fra hele verden. -Forestil dig dette: Du vågner i morgen og ser, at nogen i Tokyo har forbedret din kode, mens du sov. Så fikser nogen i Berlin en fejl, du har været fastlåst på. Om eftermiddagen har en udvikler i São Paulo tilføjet en funktion, du aldrig engang havde tænkt på. Det er ikke science fiction – det er bare tirsdag i GitHub-universet! +Forestil dig dette: Du vågner op i morgen og ser, at nogen i Tokyo forbedrede din kode, mens du sov. Så retter nogen i Berlin en fejl, du har siddet fast i. Om eftermiddagen har en udvikler i São Paulo tilføjet en funktion, du aldrig engang havde tænkt på. Det er ikke science fiction – det er bare en tirsdag i GitHub-universet! -Det, der virkelig begejstrer mig, er, at de samarbejdsevner, du er ved at lære? Det er PRÆCIS de samme arbejdsgange, som teams hos Google, Microsoft og dine yndlingsstartups bruger hver eneste dag. Du lærer ikke bare et sejt værktøj – du lærer det hemmelige sprog, der får hele softwareverdenen til at arbejde sammen. +Det, der virkelig begejstrer mig, er at de samarbejdsevner, du er ved at lære? Det er præcis de samme arbejdsgange, som teams hos Google, Microsoft og dine yndlings-startups bruger hver dag. Du lærer ikke bare et sejt værktøj – du lærer det hemmelige sprog, der får hele softwareverdenen til at fungere sammen. -Seriøst, når du oplever rusen ved at få nogen til at merge din første pull request, vil du forstå, hvorfor udviklere bliver så passionerede omkring open source. Det er som at være en del af verdens største, mest kreative teamprojekt! +Seriøst, når du oplever suset ved at få nogen til at merge din første pull request, forstår du, hvorfor udviklere bliver så passionerede omkring open source. Det er som at være en del af verdens største, mest kreative teamprojekt! > Se video > @@ -323,56 +387,77 @@ Seriøst, når du oplever rusen ved at få nogen til at merge din første pull r Hovedårsagen til at lægge ting på GitHub var at gøre det muligt at samarbejde med andre udviklere. -I din repository, naviger til `Insights > Community` for at se, hvordan dit projekt sammenlignes med anbefalede fællesskabsstandarder. +```mermaid +flowchart LR + A[🔍 Find Projekt] --> B[🍴 Fork Lager] + B --> C[📥 Klon til Lokal] + C --> D[🌿 Opret Gren] + D --> E[✏️ Lav Ændringer] + E --> F[💾 Commit Ændringer] + F --> G[📤 Push Gren] + G --> H[🔄 Opret Pull Request] + H --> I{Vedligeholder Gennemgang} + I -->|✅ Godkendt| J[🎉 Merge!] + I -->|❓ Ændringer Anmodet| K[📝 Lav Opdateringer] + K --> F + J --> L[🧹 Ryd Op i Grener] + + style A fill:#e3f2fd + style J fill:#e8f5e8 + style L fill:#fff3e0 +``` +I dit repository, gå til `Insights > Community` for at se, hvordan dit projekt sammenlignes med anbefalede community-standarder. -Vil du gøre din repository professionel og indbydende? Gå til din repository og klik på `Insights > Community`. Denne smarte funktion viser dig, hvordan dit projekt sammenlignes med, hvad GitHub-fællesskabet anser for "gode repository-praksisser." +Vil du gøre dit repository professionelt og indbydende? Gå til dit repository og klik på `Insights > Community`. Denne seje funktion viser dig, hvordan dit projekt sammenlignes med, hvad GitHub-fællesskabet anser for "gode repository-praksisser." -> 🎯 **Få dit projekt til at skinne**: En velorganiseret repository med god dokumentation er som at have en ren, indbydende butik. Det viser folk, at du går op i dit arbejde og får andre til at ville bidrage! +> 🎯 **Få dit projekt til at skinne**: Et godt organiseret repository med god dokumentation er som en ren, indbydende butiksvindue. Det fortæller folk, at du tager dit arbejde seriøst og får andre til at ville bidrage! -**Her er, hvad der gør en repository fantastisk:** +**Her er hvad der gør et repository fantastisk:** -| Hvad skal tilføjes | Hvorfor det er vigtigt | Hvad det gør for dig | -|--------------------|------------------------|----------------------| -| **Beskrivelse** | Førstehåndsindtryk betyder noget! | Folk ved straks, hvad dit projekt gør | +| Hvad der skal tilføjes | Hvorfor det er vigtigt | Hvad det gør for dig | +|------------------------|------------------------|---------------------| +| **Beskrivelse** | Det første indtryk tæller! | Folk ved med det samme, hvad dit projekt gør | | **README** | Dit projekts forside | Som en venlig guide for nye besøgende | -| **Retningslinjer for bidrag** | Viser, at du byder hjælp velkommen | Folk ved præcis, hvordan de kan hjælpe dig | +| **Bidragsretningslinjer** | Viser at du byder hjælp velkommen | Folk ved præcis, hvordan de kan hjælpe dig | | **Adfærdskodeks** | Skaber et venligt miljø | Alle føler sig velkomne til at deltage | -| **Licens** | Juridisk klarhed | Andre ved, hvordan de kan bruge din kode | -| **Sikkerhedspolitik** | Viser, at du er ansvarlig | Demonstrerer professionelle praksisser | +| **Licens** | Juridisk klarhed | Andre ved, hvordan de må bruge din kode | +| **Sikkerhedspolitik** | Viser, at du tager ansvar | Demonstrerer professionelle praksisser | -> 💡 **Pro Tip**: GitHub tilbyder skabeloner til alle disse filer. Når du opretter en ny repository, skal du markere felterne for automatisk at generere disse filer. +> 💡 **Pro Tip**: GitHub tilbyder templates til alle disse filer. Når du opretter et nyt repository, kan du flueben i for automatisk at generere disse filer. **Moderne GitHub-funktioner at udforske:** -🤖 **Automatisering & CI/CD:** +🤖 **Automation & CI/CD:** - **GitHub Actions** til automatiseret test og deployment - **Dependabot** til automatiske opdateringer af afhængigheder -💬 **Fællesskab & projektstyring:** -- **GitHub Discussions** til fællesskabssamtaler ud over issues +💬 **Community & Projektstyring:** +- **GitHub Discussions** til samtaler i fællesskabet ud over issues - **GitHub Projects** til kanban-stil projektstyring -- **Branch-beskyttelsesregler** for at sikre kodekvalitetsstandarder +- **Branch-beskyttelsesregler** for at håndhæve kodekvalitetsstandarder -Alle disse ressourcer vil være til gavn for onboarding af nye teammedlemmer. Og det er typisk den slags ting, nye bidragydere kigger på, før de overhovedet ser på din kode, for at finde ud af, om dit projekt er det rette sted for dem at bruge deres tid. -✅ README-filer, selvom de tager tid at forberede, bliver ofte overset af travle vedligeholdere. Kan du finde et eksempel på en særlig beskrivende en? Bemærk: Der findes nogle [værktøjer til at hjælpe med at lave gode README'er](https://www.makeareadme.com/), som du måske vil prøve. +Alle disse ressourcer hjælper med onboarding af nye teammedlemmer. Og det er typisk det, nye bidragsydere kigger på, før de kigger på din kode, for at finde ud af, om dit projekt er det rette sted for dem at bruge deres tid. + +✅ README-filer, selvom de tager tid at forberede, bliver ofte negligeret af travle vedligeholdere. Kan du finde et eksempel på en særlig beskrivende en? Bemærk: der findes nogle [værktøjer til at hjælpe med at skabe gode README-filer](https://www.makeareadme.com/), som du måske vil prøve. ### Opgave: Merge noget kode -Bidragsdokumenter hjælper folk med at bidrage til projektet. Det forklarer, hvilke typer bidrag du leder efter, og hvordan processen fungerer. Bidragydere skal gennem en række trin for at kunne bidrage til din repo på GitHub: +Bidragsdokumenter hjælper folk med at bidrage til projektet. Det forklarer, hvilke slags bidrag du leder efter, og hvordan processen fungerer. Bidragsydere skal igennem en række trin for at kunne bidrage til dit repo på GitHub: + -1. **Fork din repo**. Du vil sandsynligvis gerne have, at folk _forker_ dit projekt. Forking betyder at oprette en kopi af din repository på deres GitHub-profil. -1. **Clone**. Derfra vil de klone projektet til deres lokale maskine. -1. **Opret en branch**. Du vil gerne bede dem om at oprette en _branch_ til deres arbejde. -1. **Fokuser deres ændring på ét område**. Bed bidragydere om at koncentrere deres bidrag om én ting ad gangen - på den måde er chancerne for, at du kan _merge_ deres arbejde, højere. Forestil dig, at de skriver en fejlrettelse, tilføjer en ny funktion og opdaterer flere tests - hvad hvis du vil, eller kun kan implementere 2 ud af 3, eller 1 ud af 3 ændringer? +1. **Fork dit repo** Du vil nok gerne have, at folk _forker_ dit projekt. At forke betyder at lave en kopi af dit repository på deres egen GitHub-profil. +1. **Clone** Derfra kloner de projektet til deres lokale maskine. +1. **Opret en branch** Du vil bede dem om at oprette en _branch_ til deres arbejde. +1. **Fokusér ændringen på ét område** Bed bidragsydere om at koncentrere deres bidrag om ét ting ad gangen – på den måde er chancerne for, at du kan _merge_ deres arbejde, højere. Forestil dig, at de laver en fejlrettelse, tilføjer en ny funktion og opdaterer flere tests – hvad hvis du vil, eller kun kan implementere 2 ud af 3, eller 1 ud af 3 ændringer? -✅ Forestil dig en situation, hvor branches er særligt kritiske for at skrive og levere god kode. Hvilke anvendelsesscenarier kan du komme i tanke om? +✅ Forestil dig en situation, hvor branches er særligt afgørende for at skrive og levere god kode. Hvilke brugsscenarier kan du komme i tanke om? -> Bemærk, vær den forandring, du ønsker at se i verden, og opret branches til dit eget arbejde også. Enhver commit, du laver, vil blive lavet på den branch, du i øjeblikket er "checked out" til. Brug `git status` for at se, hvilken branch det er. +> Bemærk, vær den forandring du ønsker at se i verden, og lav også branches til dit eget arbejde. Alle commits du laver, bliver lavet på den branch, du i øjeblikket er “tjekket ud” til. Brug `git status` for at se, hvilken branch det er. -Lad os gennemgå en bidragsarbejdsgang. Antag, at bidragyderen allerede har _forket_ og _klonet_ repoen, så de har en Git-repo klar til at arbejde på, på deres lokale maskine: +Lad os se på en bidragsyder-arbejdsgang. Antag, at bidragsyderen allerede har _forket_ og _klonet_ repoet, så de har et Git repo klar til arbejde på deres lokale maskine: -1. **Opret en branch**. Brug kommandoen `git branch` til at oprette en branch, der vil indeholde de ændringer, de ønsker at bidrage med: +1. **Opret en branch** Brug kommandoen `git branch` til at oprette en branch, der indeholder de ændringer, de vil bidrage med: ```bash git branch [branch-name] @@ -383,205 +468,310 @@ Lad os gennemgå en bidragsarbejdsgang. Antag, at bidragyderen allerede har _for git switch -c [branch-name] ``` -1. **Skift til arbejdsbranch**. Skift til den angivne branch og opdater arbejdsmappen med `git switch`: +1. **Skift til arbejdsbranch** Skift til den angivne branch og opdater arbejdsområdet med `git switch`: ```bash git switch [branch-name] ``` - > 💡 **Moderne note**: `git switch` er den moderne erstatning for `git checkout`, når du skifter branch. Det er mere klart og sikrere for begyndere. + > 💡 **Moderne note**: `git switch` er den moderne erstatning for `git checkout` ved brancheskift. Det er tydeligere og sikrere for begyndere. -1. **Arbejd**. På dette tidspunkt vil du tilføje dine ændringer. Husk at fortælle Git om det med følgende kommandoer: +1. **Arbejd** Nu skal du tilføje dine ændringer. Glem ikke at fortælle Git om det med følgende kommandoer: ```bash git add . git commit -m "my changes" ``` - > ⚠️ **Commit-beskedkvalitet**: Sørg for at give din commit et godt navn, både for din egen skyld og for vedligeholderen af repoen, du hjælper med. Vær specifik om, hvad du har ændret! + > ⚠️ **Kvalitet på commit-beskeden**: Sørg for at give din commit et godt navn, både for din egen skyld og for maintaineren af det repo, du hjælper med. Vær konkret omkring, hvad du ændrede! -1. **Kombiner dit arbejde med `main`-branchen**. På et tidspunkt er du færdig med at arbejde, og du vil kombinere dit arbejde med det fra `main`-branchen. `main`-branchen kan have ændret sig i mellemtiden, så sørg for først at opdatere den til det nyeste med følgende kommandoer: +1. **Kombinér dit arbejde med `main` branchen** På et tidspunkt er du færdig med at arbejde, og du ønsker at kombinere dit arbejde med `main` branchen. `main` kan være ændret i mellemtiden, så sørg først for at opdatere den til den nyeste version med følgende kommandoer: ```bash git switch main git pull ``` - På dette tidspunkt vil du sikre dig, at eventuelle _konflikter_, situationer hvor Git ikke nemt kan _kombinere_ ændringerne, sker i din arbejdsbranch. Derfor skal du køre følgende kommandoer: + Nu vil du sikre, at eventuelle _konflikter_, situationer hvor Git ikke let kan _kombinere_ ændringerne, sker i din arbejdsbranch. Derfor kør følgende kommandoer: ```bash git switch [branch_name] git merge main ``` - Kommandoen `git merge main` vil bringe alle ændringer fra `main` ind i din branch. Forhåbentlig kan du bare fortsætte. Hvis ikke, vil VS Code fortælle dig, hvor Git er _forvirret_, og du ændrer de berørte filer for at angive, hvilket indhold der er mest korrekt. + `git merge main` kommandoen henter alle ændringer fra `main` ind i din branch. Forhåbentlig kan du bare fortsætte. Hvis ikke, vil VS Code fortælle dig, hvor Git er _forvirret_, og så kan du ændre de berørte filer for at angive, hvilket indhold der er mest korrekt. 💡 **Moderne alternativ**: Overvej at bruge `git rebase` for en renere historik: ```bash git rebase main ``` - Dette afspiller dine commits oven på den nyeste main-branch og skaber en lineær historik. + Dette "afspiller" dine commits oven på den nyeste main-branch og skaber en lineær historik. -1. **Send dit arbejde til GitHub**. At sende dit arbejde til GitHub betyder to ting. At pushe din branch til din repo og derefter åbne en PR, Pull Request. +1. **Send dit arbejde til GitHub** At sende dit arbejde til GitHub indebærer to ting. Pushe din branch til dit repo og derefter oprette en PR, Pull Request. ```bash git push --set-upstream origin [branch-name] ``` - Kommandoen ovenfor opretter branchen på din forkede repo. + Ovenstående kommando opretter branchen på dit forkede repo. + +### 🤝 **Samarbejdsevner Check: Klar til at arbejde med andre?** + +**Lad os se, hvordan du føler om samarbejde:** +- Giver ideen om forking og pull requests mening for dig nu? +- Hvad er én ting ved at arbejde med branches, som du gerne vil øve mere? +- Hvor tryg føler du dig ved at bidrage til andres projekter? + +```mermaid +mindmap + root((Git Samarbejde)) + Branching + Feature branches + Bug fix branches + Eksperimentelt arbejde + Pull Requests + Kodegennemgang + Diskussion + Testning + Best Practices + Klare commit-beskeder + Små fokuserede ændringer + God dokumentation +``` +> **Selvtillidsboost**: Hver eneste udvikler, du beundrer, var engang nervøs for deres første pull request. GitHub-fællesskabet er utroligt imødekommende overfor nye! -1. **Åbn en PR**. Dernæst vil du åbne en PR. Det gør du ved at navigere til den forkede repo på GitHub. Du vil se en indikation på GitHub, hvor den spørger, om du vil oprette en ny PR, du klikker på det, og du bliver ført til en grænseflade, hvor du kan ændre commit-beskedens titel, give den en mere passende beskrivelse. Nu vil vedligeholderen af repoen, du forkede, se denne PR, og _fingers crossed_ vil de værdsætte og _merge_ din PR. Du er nu en bidragyder, yay :) +1. **Åbn en PR** Dernæst vil du åbne en PR. Det gør du ved at navigere til det forkede repo på GitHub. Du vil se en indikation på GitHub, hvor det spørger, om du vil oprette en ny PR, klik på den, og du kommer til et interface, hvor du kan ændre commit-besked titel og give en mere passende beskrivelse. Nu vil maintaineren af det repo, du forkede, se denne PR og _finger kryds_ de vil sætte pris på og _merge_ din PR. Du er nu en bidragsyder, yay :) - 💡 **Moderne tip**: Du kan også oprette PR'er ved hjælp af GitHub CLI: + 💡 **Moderne tip**: Du kan også oprette PRs vha. GitHub CLI: ```bash gh pr create --title "Your PR title" --body "Description of changes" ``` - 🔧 **Bedste praksis for PR'er**: - - Link til relaterede issues ved hjælp af nøgleord som "Fixes #123" + 🔧 **Bedste praksis for PRs**: + - Link til relaterede issues med nøgleord som "Fixes #123" - Tilføj screenshots for UI-ændringer - Anmod om specifikke reviewers - - Brug draft PR'er til igangværende arbejde - - Sørg for, at alle CI-tjek er bestået, før du anmoder om review - -1. **Ryd op**. Det anses for god praksis at _rydde op_, efter du har fået succes med at merge en PR. Du vil rydde op i både din lokale branch og den branch, du pushede til GitHub. Først skal du slette den lokalt med følgende kommando: + - Brug draft PRs til arbejde under udvikling + - Sørg for at alle CI checks er bestået, før du anmoder om review +1. **Ryd op**. Det betragtes som god praksis at _rydde op_ efter du med succes har flettet en PR. Du vil gerne rydde op både i din lokale gren og den gren, du har pushet til GitHub. Lad os først slette den lokalt med følgende kommando: ```bash git branch -d [branch-name] ``` - Sørg for at gå til GitHub-siden for den forkede repo bagefter og fjerne den eksterne branch, du lige har pushet til den. - -`Pull request` virker som et fjollet udtryk, fordi du egentlig vil pushe dine ændringer til projektet. Men vedligeholderen (projektets ejer) eller kerneholdet skal overveje dine ændringer, før de merges med projektets "main"-branch, så du anmoder faktisk om en beslutning om ændringen fra en vedligeholder. - -En pull request er stedet, hvor man kan sammenligne og diskutere forskellene, der introduceres på en branch, med reviews, kommentarer, integrerede tests og mere. En god pull request følger stort set de samme regler som en commit-besked. Du kan tilføje en reference til et issue i issue-tracker, når dit arbejde for eksempel løser et issue. Dette gøres ved hjælp af et `#` efterfulgt af nummeret på dit issue. For eksempel `#97`. -🤞Krydser fingre for, at alle tjek går igennem, og projektets ejer(e) godkender dine ændringer og integrerer dem i projektet🤞 - -Opdater din nuværende lokale arbejdsgren med alle nye commits fra den tilsvarende fjerngren på GitHub: - -`git pull` + Sørg for at gå til GitHub-siden for den forkede repo bagefter og fjern den remote gren, du lige har pushet til den. -## Bidrag til Open Source (Din Chance for at Gøre en Forskel!) +`Pull request` virker som et mærkeligt udtryk, fordi du egentlig vil pushe dine ændringer til projektet. Men vedligeholderen (projektets ejer) eller kerne teamet skal overveje dine ændringer, før de flettes med projektets "main" gren, så du anmoder egentlig en vedligeholder om at træffe en beslutning om ændringen. -Er du klar til noget, der vil blæse dit sind? 🤯 Lad os tale om at bidrage til open source-projekter – jeg får gåsehud bare ved tanken om at dele dette med dig! +En pull request er stedet at sammenligne og diskutere forskellene, der introduceres på en gren med anmeldelser, kommentarer, integrerede tests og mere. En god pull request følger omtrent de samme regler som en commit-besked. Du kan tilføje en reference til et issue i issues-trackeren, når dit arbejde for eksempel løser et problem. Dette gøres med en `#` efterfulgt af nummeret på dit issue. For eksempel `#97`. -Dette er din chance for at blive en del af noget virkelig ekstraordinært. Forestil dig at forbedre de værktøjer, som millioner af udviklere bruger hver dag, eller rette en fejl i en app, som dine venner elsker. Det er ikke bare en drøm – det er, hvad open source-bidrag handler om! +🤞Fingre krydsede for, at alle checks passerer, og at projektets ejer(e) fletter dine ændringer ind i projektet🤞 -Her er det, der giver mig kuldegysninger hver gang jeg tænker på det: hvert eneste værktøj, du har lært med – din kodeeditor, de frameworks vi vil udforske, endda den browser, du læser dette i – startede med en person præcis som dig, der lavede deres allerførste bidrag. Den geniale udvikler, der byggede din yndlings VS Code-udvidelse? De var engang en nybegynder, der nervøst klikkede på "create pull request", præcis som du er ved at gøre. +Opdater din aktuelle lokale arbejdsgren med alle nye commits fra den tilsvarende remote gren på GitHub: -Og her er det smukkeste: open source-fællesskabet er som internettets største gruppekram. De fleste projekter leder aktivt efter nybegyndere og har problemer mærket "good first issue" specifikt for folk som dig! Maintainers bliver oprigtigt begejstrede, når de ser nye bidragsydere, fordi de husker deres egne første skridt. +`git pull` -Du lærer ikke bare at kode her – du forbereder dig på at blive en del af en global familie af skabere, der vågner op hver dag og tænker "Hvordan kan vi gøre den digitale verden lidt bedre?" Velkommen til klubben! 🌟 +## Bidrage til Open Source (Din Chance for at Gøre en Forskel!) + +Er du klar til noget, der vil blæse dit sind helt væk? 🤯 Lad os tale om at bidrage til open source-projekter – og jeg får gåsehud bare ved at tænke på at dele dette med dig! + +Dette er din chance for at blive en del af noget virkelig ekstraordinært. Forestil dig at forbedre de værktøjer, som millioner af udviklere bruger hver dag, eller at rette en fejl i en app, som dine venner elsker. Det er ikke bare en drøm – det er det, open source-bidrag handler om! + +Her er hvad der giver mig kuldegysninger hver gang, jeg tænker på det: hvert eneste værktøj, du har lært med – din kodeeditor, de frameworks vi skal udforske, selv browseren du læser dette i – startede med nogen præcis som dig, som lavede deres allerførste bidrag. Den fantastiske udvikler, der byggede din yndlings VS Code-udvidelse? De var engang en begynder, der klikkede på "create pull request" med rystende hænder, ligesom du er ved at gøre nu. + +Og her kommer det smukkeste: open source-fællesskabet er som internettets største gruppe-kram. De fleste projekter leder aktivt efter nye mennesker og har issues markeret med "good first issue" specifikt for folk som dig! Vedligeholdere bliver oprigtigt begejstrede, når de ser nye bidragydere, fordi de husker deres egne første skridt. + +```mermaid +flowchart TD + A[🔍 Udforsk GitHub] --> B[🏷️ Find "god første opgave"] + B --> C[📖 Læs bidragsvejledning] + C --> D[🍴 Fork repository] + D --> E[💻 Opsæt lokal miljø] + E --> F[🌿 Opret feature-branch] + F --> G[✨ Lav dit bidrag] + G --> H[🧪 Test dine ændringer] + H --> I[📝 Skriv klar commit] + I --> J[📤 Push & opret PR] + J --> K[💬 Engager dig i feedback] + K --> L[🎉 Merged! Du er en bidragyder!] + L --> M[🌟 Find næste opgave] + + style A fill:#e1f5fe + style L fill:#c8e6c9 + style M fill:#fff59d +``` +Du lærer ikke bare at kode her – du forbereder dig på at slutte dig til en global familie af skabere, der vågner op hver dag og tænker "Hvordan kan vi gøre den digitale verden en smule bedre?" Velkommen til klubben! 🌟 -Først skal vi finde et repository (eller **repo**) på GitHub, som interesserer dig, og som du gerne vil bidrage med en ændring til. Du vil gerne kopiere dets indhold til din maskine. +Først, lad os finde et repository (eller **repo**) på GitHub, som interesserer dig, og som du gerne vil bidrage til med en ændring. Du vil gerne kopiere dets indhold til din maskine. -✅ En god måde at finde 'begynder-venlige' repos er at [søge efter tagget 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). +✅ En god måde at finde 'begynder-venlige' repos er at [søgge efter tagget 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/). -![Kopier et repo lokalt](../../../../translated_images/clone_repo.5085c48d666ead57664f050d806e325d7f883be6838c821e08bc823ab7c66665.da.png) +![Copy a repo locally](../../../../translated_images/clone_repo.5085c48d666ead57.da.png) -Der er flere måder at kopiere kode på. En måde er at "klone" indholdet af repositoryet ved hjælp af HTTPS, SSH eller GitHub CLI (Command Line Interface). +Der er flere måder at kopiere kode på. En måde er at "klone" indholdet af repositoryet, ved brug af HTTPS, SSH, eller GitHub CLI (Command Line Interface). -Åbn din terminal og klon repositoryet sådan her: +Åbn din terminal og klon repositoryet således: ```bash -# Using HTTPS +# Bruger HTTPS git clone https://github.com/ProjectURL -# Using SSH (requires SSH key setup) +# Bruger SSH (kræver opsætning af SSH-nøgle) git clone git@github.com:username/repository.git -# Using GitHub CLI +# Bruger GitHub CLI gh repo clone username/repository ``` For at arbejde på projektet, skift til den rigtige mappe: `cd ProjectURL` -Du kan også åbne hele projektet ved hjælp af: -- **[GitHub Codespaces](https://github.com/features/codespaces)** - GitHubs cloud-udviklingsmiljø med VS Code i browseren +Du kan også åbne hele projektet med: +- **[GitHub Codespaces](https://github.com/features/codespaces)** - GitHubs sky-udviklingsmiljø med VS Code i browseren - **[GitHub Desktop](https://desktop.github.com/)** - En GUI-applikation til Git-operationer -- **[GitHub.dev](https://github.dev)** - Tryk på `.`-tasten på et hvilket som helst GitHub-repo for at åbne VS Code i browseren +- **[GitHub.dev](https://github.dev)** - Tryk på `.` tasten på et vilkårligt GitHub repo for at åbne VS Code i browseren - **VS Code** med GitHub Pull Requests-udvidelsen -Til sidst kan du downloade koden i en zip-mappe. +Endelig kan du downloade koden i en zip-mappe. ### Et par flere interessante ting om GitHub -Du kan stjerne, følge og/eller "forke" ethvert offentligt repository på GitHub. Du kan finde dine stjernemarkerede repositories i drop-down-menuen øverst til højre. Det er som bogmærker, men for kode. +Du kan stjerne, overvåge og/eller "forke" ethvert offentligt repository på GitHub. Du kan finde dine stjernemarkerede repositories i dropdown-menuen øverst til højre. Det er som bogmærker, men til kode. -Projekter har en problemtracker, som oftest på GitHub i "Issues"-fanen, medmindre andet er angivet, hvor folk diskuterer problemer relateret til projektet. Og fanen Pull Requests er, hvor folk diskuterer og gennemgår ændringer, der er undervejs. +Projekter har en issue tracker, for det meste på GitHub under fanen "Issues" medmindre andet er angivet, hvor folk diskuterer problemer relateret til projektet. Og tabben Pull Requests er hvor folk diskuterer og gennemgår igangværende ændringer. Projekter kan også have diskussioner i fora, mailinglister eller chatkanaler som Slack, Discord eller IRC. -🔧 **Moderne GitHub-funktioner**: -- **GitHub Discussions** - Indbygget forum til fællesskabssamtaler -- **GitHub Sponsors** - Støt maintainers økonomisk -- **Security tab** - Rapporter om sårbarheder og sikkerhedsrådgivning -- **Actions tab** - Se automatiserede workflows og CI/CD-pipelines -- **Insights tab** - Analyse af bidragsydere, commits og projektets sundhed +🔧 **Moderne GitHub funktioner**: +- **GitHub Discussions** - Indbygget forum til fællesskabs-samtaler +- **GitHub Sponsors** - Støt vedligeholdere økonomisk +- **Security tab** - Sårbarhedsrapporter og sikkerhedsadvarsler +- **Actions tab** - Se automatiserede workflows og CI/CD pipelines +- **Insights tab** - Analyse af bidragydere, commits og projektsundhed - **Projects tab** - GitHubs indbyggede projektstyringsværktøjer -✅ Tag et kig rundt i dit nye GitHub-repo og prøv et par ting, som at redigere indstillinger, tilføje information til dit repo, oprette et projekt (som et Kanban-board) og opsætte GitHub Actions til automatisering. Der er meget, du kan gøre! +✅ Kig lidt rundt i dit nye GitHub repo og prøv et par ting, som at redigere indstillinger, tilføje information til dit repo, oprette et projekt (som et Kanban board), og sætte GitHub Actions op til automation. Der er meget, du kan gøre! --- -## 🚀 Udfordring +## 🚀 Udfordring -Okay, det er tid til at teste dine nye GitHub-superkræfter! 🚀 Her er en udfordring, der vil få det hele til at give mening på den mest tilfredsstillende måde: +Okay, det er tid til at teste dine skinnende nye GitHub superkræfter! 🚀 Her er en udfordring, der vil få det hele til at falde på plads på den mest tilfredsstillende måde: -Tag fat i en ven (eller det familiemedlem, der altid spørger, hvad du laver med alt det "computer-noget") og begiv jer ud på et samarbejdende kodeeventyr sammen! Her sker den ægte magi – opret et projekt, lad dem forke det, lav nogle grene og flet ændringer som de professionelle, I er ved at blive. +Tag en ven (eller et familiemedlem, der altid spørger, hvad du laver med alt det "computerhalløj") og gå på en fælles kodningsrejse sammen! Her sker den ægte magi – opret et projekt, lad dem forke det, lav nogle grene, og flet ændringer som de professionelle, du er ved at blive. -Jeg vil ikke lyve – I vil sandsynligvis grine på et tidspunkt (især når I begge prøver at ændre den samme linje), måske klø jer i hovedet af forvirring, men I vil helt sikkert have de fantastiske "aha!"-øjeblikke, der gør al læring det værd. Plus, der er noget særligt ved at dele den første vellykkede fletning med en anden – det er som en lille fejring af, hvor langt I er kommet! +Jeg vil ikke lyve – I kommer sikkert til at grine på et tidspunkt (især når I begge forsøger at ændre den samme linje), måske klø jer i hovedet i forvirring, men I får helt sikkert de fantastiske "aha!"-øjeblikke, der gør alt læringen værd. Plus, der er noget særligt ved at dele den første succesfulde fletning med en anden – det er som en lille fejring af, hvor langt du er kommet! -Har du ikke en kodekammerat endnu? Ingen problemer! GitHub-fællesskabet er fyldt med utroligt imødekommende mennesker, der husker, hvordan det var at være ny. Kig efter repositories med "good first issue"-mærker – de siger i bund og grund "Hej nybegyndere, kom og lær med os!" Hvor fedt er det? +Har du ikke en kodebuddy endnu? Intet problem! GitHub-fællesskabet er fyldt med utroligt imødekommende mennesker, der husker, hvordan det var at være ny. Kig efter repositories med mærket "good first issue" – de siger egentlig "Hej begyndere, kom og lær med os!" Ganske fantastisk, ikke? -## Quiz efter forelæsning -[Quiz efter forelæsning](https://ff-quizzes.netlify.app/web/en/) +## Post-forelæsning quiz +[Post-lecture quiz](https://ff-quizzes.netlify.app/web/en/) -## Gennemgang & Fortsæt med at Lære +## Gennemgå & Bliv ved med at lære -Pyha! 🎉 Se på dig – du har lige erobret GitHub-grundlæggende som en absolut mester! Hvis din hjerne føles lidt fyldt lige nu, er det helt normalt og ærligt talt et godt tegn. Du har lige lært værktøjer, der tog mig uger at føle mig komfortabel med, da jeg startede. +Puha! 🎉 Se bare på dig – du har lige mestret GitHub-grundlæggende som en ægte mester! Hvis din hjerne føles lidt fyldt lige nu, er det helt normalt og faktisk et godt tegn. Du har lige lært værktøjer, som det tog mig uger at føle mig tryg ved, da jeg startede. -Git og GitHub er utroligt kraftfulde (som, virkelig kraftfulde), og hver udvikler jeg kender – inklusive dem, der nu virker som troldmænd – måtte øve sig og snuble lidt rundt, før det hele gav mening. Det faktum, at du er kommet igennem denne lektion, betyder, at du allerede er på vej til at mestre nogle af de vigtigste værktøjer i en udviklers værktøjskasse. +Git og GitHub er utroligt kraftfulde (altså, seriøst kraftfulde), og hver udvikler jeg kender – inklusiv dem der nu virker som troldmænd – måtte øve sig og snuble lidt, før det hele faldt på plads. Det faktum, at du har klaret denne lektion, betyder, at du allerede er godt på vej til at mestre nogle af de vigtigste værktøjer i en udviklers værktøjskasse. -Her er nogle helt fantastiske ressourcer, der kan hjælpe dig med at øve dig og blive endnu mere fantastisk: +Her er nogle helt fantastiske ressourcer til at hjælpe dig med at øve og blive endnu sejere: -- [Guide til at bidrage til open source-software](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Din køreplan til at gøre en forskel +- [Contributing to open source software guide](https://opensource.guide/how-to-contribute/#how-to-submit-a-contribution) – Din køreplan til at gøre en forskel - [Git cheatsheet](https://training.github.com/downloads/github-git-cheat-sheet/) – Hav denne ved hånden til hurtig reference! -Og husk: øvelse gør fremskridt, ikke perfektion! Jo mere du bruger Git og GitHub, jo mere naturligt bliver det. GitHub har skabt nogle fantastiske interaktive kurser, der lader dig øve dig i et sikkert miljø: +Og husk: øvelse gør fremskridt, ikke perfektion! Jo mere du bruger Git og GitHub, desto mere naturligt bliver det. GitHub har lavet nogle fantastiske interaktive kurser, der lader dig øve i et sikkert miljø: -- [Introduktion til GitHub](https://github.com/skills/introduction-to-github) -- [Kommunikér ved hjælp af Markdown](https://github.com/skills/communicate-using-markdown) +- [Introduction to GitHub](https://github.com/skills/introduction-to-github) +- [Communicate using Markdown](https://github.com/skills/communicate-using-markdown) - [GitHub Pages](https://github.com/skills/github-pages) -- [Håndtering af fletningskonflikter](https://github.com/skills/resolve-merge-conflicts) +- [Managing merge conflicts](https://github.com/skills/resolve-merge-conflicts) -**Føler du dig eventyrlysten? Tjek disse moderne værktøjer:** -- [GitHub CLI-dokumentation](https://cli.github.com/manual/) – Når du vil føle dig som en kommandolinje-troldmand -- [GitHub Codespaces-dokumentation](https://docs.github.com/en/codespaces) – Kod i skyen! -- [GitHub Actions-dokumentation](https://docs.github.com/en/actions) – Automatiser alt -- [Git bedste praksis](https://www.atlassian.com/git/tutorials/comparing-workflows) – Forbedr din arbejdsgang +**Føler du dig eventyrlysten? Prøv disse moderne værktøjer:** +- [GitHub CLI documentation](https://cli.github.com/manual/) – Til når du vil føle dig som en kommandolinjemagi +- [GitHub Codespaces documentation](https://docs.github.com/en/codespaces) – Kode i skyen! +- [GitHub Actions documentation](https://docs.github.com/en/actions) – Automatiser alle tingene +- [Git best practices](https://www.atlassian.com/git/tutorials/comparing-workflows) – Opgrader dit workflow-spil ## GitHub Copilot Agent Udfordring 🚀 -Brug Agent-tilstand til at fuldføre følgende udfordring: +Brug Agent-tilstand til at gennemføre følgende udfordring: -**Beskrivelse:** Opret et samarbejdende webudviklingsprojekt, der demonstrerer den komplette GitHub-arbejdsgang, du har lært i denne lektion. Denne udfordring vil hjælpe dig med at øve repository-oprettelse, samarbejdsfunktioner og moderne Git-arbejdsgange i et virkeligt scenarie. +**Beskrivelse:** Opret et samarbejds-baseret webudviklingsprojekt, der demonstrerer den fulde GitHub-workflow, du har lært i denne lektion. Denne udfordring vil hjælpe dig med at øve repository-oprettelse, samarbejdsfunktioner og moderne Git-workflows i en realistisk scenarie. -**Opgave:** Opret et nyt offentligt GitHub-repository til et simpelt "Web Development Resources"-projekt. Repositoryet skal inkludere en velstruktureret README.md-fil, der lister nyttige webudviklingsværktøjer og ressourcer, organiseret efter kategorier (HTML, CSS, JavaScript osv.). Opsæt repositoryet med korrekte fællesskabsstandarder, inklusive en licens, bidragsretningslinjer og en adfærdskodeks. Opret mindst to funktionsgrene: en til at tilføje CSS-ressourcer og en anden til JavaScript-ressourcer. Lav commits til hver gren med beskrivende commit-beskeder, og opret derefter pull requests for at flette ændringerne tilbage til main. Aktiver GitHub-funktioner som Issues, Discussions, og opsæt et grundlæggende GitHub Actions-workflow til automatiske tjek. +**Prompt:** Opret et nyt offentligt GitHub-repository til et simpelt "Web Development Resources" projekt. Repositoryet bør inkludere en velstruktureret README.md-fil, der lister nyttige webudviklingsværktøjer og ressourcer, organiseret efter kategorier (HTML, CSS, JavaScript osv.). Opsæt repositoryet med passende fællesskabsstandarder inklusive en licens, bidragsretningslinjer og en adfærdskodeks. Opret mindst to feature-branches: en til tilføjelse af CSS-ressourcer og en anden til JavaScript-ressourcer. Lav commits til hver gren med beskrivende commit-beskeder, og opret derefter pull requests for at flette ændringerne tilbage til main. Aktivér GitHub-funktioner som Issues, Discussions, og opsæt en grundlæggende GitHub Actions workflow for automatiserede checks. -## Opgave +## Opgave -Din mission, hvis du vælger at acceptere den: Fuldfør [Introduktion til GitHub](https://github.com/skills/introduction-to-github)-kurset på GitHub Skills. Dette interaktive kursus lader dig øve alt, hvad du har lært, i et sikkert, vejledt miljø. Plus, du får et sejt badge, når du er færdig! 🏅 +Din mission, hvis du vælger at acceptere den: Gennemfør [Introduction to GitHub](https://github.com/skills/introduction-to-github) kurset på GitHub Skills. Dette interaktive kursus lader dig øve alt, hvad du har lært, i et sikkert, vejledt miljø. Derudover får du et fedt badge, når du er færdig! 🏅 -**Føler du dig klar til flere udfordringer?** -- Opsæt SSH-autentifikation for din GitHub-konto (ikke flere adgangskoder!) +**Klar til flere udfordringer?** +- Opsæt SSH-autentificering til din GitHub-konto (ingen flere adgangskoder!) - Prøv at bruge GitHub CLI til dine daglige Git-operationer -- Opret et repository med et GitHub Actions-workflow -- Udforsk GitHub Codespaces ved at åbne netop dette repository i en cloud-baseret editor +- Opret et repository med en GitHub Actions workflow +- Udforsk GitHub Codespaces ved at åbne dette repository i en cloud-baseret editor + +--- + +## 🚀 Din GitHub Mesterskabs Tidslinje + +### ⚡ **Hvad du kan gøre inden for de næste 5 minutter** +- [ ] Stjerne dette repository og 3 andre projekter, der interesserer dig +- [ ] Opsæt to-faktor autentificering på din GitHub-konto +- [ ] Opret en simpel README til dit første repository +- [ ] Følg 5 udviklere, hvis arbejde inspirerer dig + +### 🎯 **Hvad du kan nå på den næste time** +- [ ] Fuldfør quizzen efter lektionen og reflekter over din GitHub-rejse +- [ ] Opsæt SSH-nøgler for adgangskodefri GitHub autentificering +- [ ] Lav din første meningsfulde commit med en fremragende commit-besked +- [ ] Udforsk GitHubs "Explore"-fane for at opdage trending projekter +- [ ] Øv dig i at forke et repository og lave en lille ændring + +### 📅 **Din ugelange GitHub-oplevelse** +- [ ] Fuldfør GitHub Skills-kurserne (Introduction to GitHub, Markdown) +- [ ] Lav din første pull request til et open source-projekt +- [ ] Opsæt en GitHub Pages-side til at fremvise dit arbejde +- [ ] Deltag i GitHub Discussions om projekter, du interesserer dig for +- [ ] Opret et repository med passende fællesskabsstandarder (README, Licens osv.) +- [ ] Prøv GitHub Codespaces til cloud-baseret udvikling + +### 🌟 **Din månedslange forvandling** +- [ ] Bidrag til 3 forskellige open source-projekter +- [ ] Vær mentor for nogen, der er nye til GitHub (giv videre!) +- [ ] Opsæt automatiserede workflows med GitHub Actions +- [ ] Byg en portfolio, der viser dine GitHub-bidrag +- [ ] Deltag i Hacktoberfest eller lignende fællesskabsbegivenheder +- [ ] Bliv vedligeholder af dit eget projekt, som andre bidrager til + +### 🎓 **Endelig GitHub Mesterskabs Check-in** + +**Fejr hvor langt du er nået:** +- Hvad er dit yndlingsaspekt ved at bruge GitHub? +- Hvilken samarbejdsfunktion begejstrer dig mest? +- Hvor selvsikker føler du dig i forhold til at bidrage til open source nu? +- Hvilket projekt vil du gerne bidrage til som det første? + +```mermaid +journey + title Din GitHub Tillidsrejse + section I dag + Nervøs: 3: You + Nysgerrig: 4: You + Begejstret: 5: You + section Denne uge + Øver: 4: You + Bidrager: 5: You + Forbinder: 5: You + section Næste måned + Samarbejder: 5: You + Leder: 5: You + Inspirerer Andre: 5: You +``` +> 🌍 **Velkommen til det globale udviklerfællesskab!** Du har nu værktøjerne til at samarbejde med millioner af udviklere verden over. Dit første bidrag kan virke lille, men husk – hvert stort open source-projekt startede med nogen, der lavede deres allerførste commit. Spørgsmålet er ikke, om du vil gøre en forskel, men hvilket fantastisk projekt der først vil få gavn af dit unikke perspektiv! 🚀 -Husk: hver ekspert var engang en nybegynder. Du kan klare det! 💪 +Husk: enhver ekspert har engang været begynder. Du klarer det! 💪 --- -**Ansvarsfraskrivelse**: -Dette dokument er blevet oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiserede oversættelser kan indeholde fejl eller unøjagtigheder. Det originale dokument på dets oprindelige sprog bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi er ikke ansvarlige for eventuelle misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse. \ No newline at end of file + +**Ansvarsfraskrivelse**: +Dette dokument er oversat ved hjælp af AI-oversættelsestjenesten [Co-op Translator](https://github.com/Azure/co-op-translator). Selvom vi bestræber os på nøjagtighed, skal du være opmærksom på, at automatiske oversættelser kan indeholde fejl eller unøjagtigheder. Det oprindelige dokument på originalsproget bør betragtes som den autoritative kilde. For kritisk information anbefales professionel menneskelig oversættelse. Vi påtager os intet ansvar for misforståelser eller fejltolkninger, der opstår som følge af brugen af denne oversættelse. + \ No newline at end of file diff --git a/translations/da/1-getting-started-lessons/3-accessibility/README.md b/translations/da/1-getting-started-lessons/3-accessibility/README.md index 63d6d37bb..4202ad74e 100644 --- a/translations/da/1-getting-started-lessons/3-accessibility/README.md +++ b/translations/da/1-getting-started-lessons/3-accessibility/README.md @@ -1,45 +1,85 @@ -# Oprettelse af tilgængelige websider +# Oprettelse af Tilgængelige Websider -![Alt om tilgængelighed](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.da.png) +![Alt om Tilgængelighed](../../../../translated_images/webdev101-a11y.8ef3025c858d897a.da.png) > Sketchnote af [Tomomi Imura](https://twitter.com/girlie_mac) -## Quiz før lektionen -[Quiz før lektionen](https://ff-quizzes.netlify.app/web/) +```mermaid +journey + title Din Tilgængeligheds Læringsrejse + section Fundament + Forstå Brugere: 5: You + Testværktøjer: 4: You + POUR Principper: 5: You + section Opbyg Færdigheder + Semantisk HTML: 4: You + Visuelt Design: 5: You + ARIA Teknikker: 4: You + section Master Praksis + Tastaturnavigation: 5: You + Formular Tilgængelighed: 4: You + Virkelighedstestning: 5: You +``` +## For-forelæsning Quiz +[For-forelæsning quiz](https://ff-quizzes.netlify.app/web/) -> Webben er stærk på grund af dens universelle karakter. Adgang for alle, uanset handicap, er en essentiel del. +> Internettets styrke er i dets universalitet. Adgang for alle uanset handicap er et essentielt aspekt. > > \- Sir Timothy Berners-Lee, W3C-direktør og opfinder af World Wide Web -Her er noget, der måske vil overraske dig: Når du bygger tilgængelige websites, hjælper du ikke kun mennesker med handicap – du gør faktisk webben bedre for alle! +Her er noget, der måske overrasker dig: når du bygger tilgængelige websites, hjælper du ikke kun mennesker med handicap—du gør faktisk internettet bedre for alle! -Har du nogensinde lagt mærke til de små ramper ved gadehjørner? De blev oprindeligt designet til kørestole, men nu hjælper de også folk med barnevogne, leveringsarbejdere med vogne, rejsende med rullekufferter og cyklister. Det er præcis sådan, tilgængeligt webdesign fungerer – løsninger, der hjælper én gruppe, ender ofte med at gavne alle. Ret sejt, ikke? +Har du nogensinde lagt mærke til de nedkørsler ved fortovene? De blev oprindeligt designet til kørestole, men de hjælper nu mennesker med barnevogne, leveringsfolk med vogne, rejsende med kufferter på hjul og cyklister også. Det er præcis sådan tilgængeligt webdesign fungerer—løsninger, der hjælper én gruppe, ender ofte med at gavne alle. Ret sejt, ikke? -I denne lektion vil vi udforske, hvordan man skaber websites, der virkelig fungerer for alle, uanset hvordan de bruger nettet. Du vil opdage praktiske teknikker, der allerede er indbygget i webstandarder, få hands-on erfaring med testværktøjer og se, hvordan tilgængelighed gør dine sider mere brugervenlige for alle. +I denne lektion skal vi udforske, hvordan man skaber websites, der virkelig fungerer for alle, uanset hvordan de browser nettet. Du vil opdage praktiske teknikker, der allerede er indbygget i webstandarder, få praktisk erfaring med testværktøjer, og se hvordan tilgængelighed gør dine sites mere brugervenlige for alle brugere. -Ved slutningen af denne lektion vil du have selvtillid til at gøre tilgængelighed til en naturlig del af din udviklingsproces. Klar til at udforske, hvordan gennemtænkte designvalg kan åbne webben for milliarder af brugere? Lad os komme i gang! +Ved slutningen af denne lektion vil du have selvtillid til at gøre tilgængelighed til en naturlig del af din udviklingsarbejdsgang. Klar til at udforske hvordan gennemtenkte designvalg kan åbne nettet for milliarder af brugere? Lad os gå i gang! +```mermaid +mindmap + root((Webtilgængelighed)) + Users + Skærmlæsere + Tastaturnavigation + Styring med stemme + Forstørrelse + Technologies + HTML semantik + ARIA attributter + CSS fokusindikatorer + Tastaturbegivenheder + Benefits + Større publikum + Bedre SEO + Lovmæssig overholdelse + Universelt design + Testing + Automatiserede værktøjer + Manuel testning + Brugerfeedback + Reelt hjælpemiddel teknologi +``` > Du kan tage denne lektion på [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! -## Forståelse af hjælpemidler +## Forståelse af Hjælpemidler -Før vi begynder at kode, lad os tage et øjeblik til at forstå, hvordan mennesker med forskellige evner faktisk oplever webben. Dette er ikke bare teori – at forstå disse navigationsmønstre i den virkelige verden vil gøre dig til en meget bedre udvikler! +Før vi springer ud i kodningen, lad os tage et øjeblik til at forstå, hvordan folk med forskellige evner faktisk oplever nettet. Det er ikke bare teori—forståelse af disse virkelige navigationsmønstre vil gøre dig til en meget bedre udvikler! -Hjælpemidler er ret fantastiske værktøjer, der hjælper mennesker med handicap med at interagere med websites på måder, der kan overraske dig. Når du først forstår, hvordan disse teknologier fungerer, bliver det meget mere intuitivt at skabe tilgængelige weboplevelser. Det er som at lære at se din kode gennem en andens øjne. +Hjælpemidler er ret fantastiske værktøjer, der hjælper mennesker med handicap med at interagere med websites på måder, der måske overrasker dig. Når du først er kommet ind i, hvordan disse teknologier fungerer, bliver det meget mere intuitivt at skabe tilgængelige weboplevelser. Det er som at lære at se din kode gennem en anden persons øjne. ### Skærmlæsere -[Skærmlæsere](https://en.wikipedia.org/wiki/Screen_reader) er ret sofistikerede teknologier, der konverterer digital tekst til tale eller punktskrift. Selvom de primært bruges af personer med synshandicap, er de også meget nyttige for brugere med indlæringsvanskeligheder som dysleksi. +[Skærmlæsere](https://en.wikipedia.org/wiki/Screen_reader) er ret avancerede teknologier, der omdanner digital tekst til tale eller braille-output. Selvom de primært bruges af personer med synsnedsættelse, er de også super hjælpsomme for brugere med læringsvanskeligheder som dysleksi. -Jeg kan godt lide at tænke på en skærmlæser som en virkelig smart fortæller, der læser en bog højt for dig. Den læser indholdet højt i en logisk rækkefølge, annoncerer interaktive elementer som "knap" eller "link" og giver tastaturgenveje til at navigere rundt på en side. Men her er sagen – skærmlæsere kan kun udføre deres magi, hvis vi bygger websites med korrekt struktur og meningsfuldt indhold. Det er her, du som udvikler kommer ind i billedet! +Jeg kan godt lide at tænke på en skærmlæser som en rigtig smart oplæser, der læser en bog for dig. Den læser indhold højt i en logisk rækkefølge, annoncerer interaktive elementer som "knap" eller "link," og giver tastaturgenveje til at hoppe rundt på en side. Men her er sagen—skærmlæsere kan kun udføre deres magi, hvis vi bygger websites med korrekt struktur og meningsfuldt indhold. Der kommer du ind som udvikler! **Populære skærmlæsere på tværs af platforme:** - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (gratis og mest populær), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (indbygget) @@ -47,173 +87,238 @@ Jeg kan godt lide at tænke på en skærmlæser som en virkelig smart fortæller - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (indbygget) - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (gratis og open-source) -**Hvordan skærmlæsere navigerer webindhold:** +**Sådan navigerer skærmlæsere webindhold:** -Skærmlæsere tilbyder flere navigationsmetoder, der gør browsing effektiv for erfarne brugere: -- **Sekventiel læsning**: Læser indhold fra top til bund, som at følge en bog -- **Landmark-navigation**: Hopper mellem sektioner på siden (header, nav, main, footer) -- **Overskriftsnavigation**: Springer mellem overskrifter for at forstå sidens struktur +Skærmlæsere tilbyder flere navigationsmetoder, der gør browsing effektivt for erfarne brugere: +- **Sekventiel læsning**: Læser indhold fra top til bund, som når man følger en bog +- **Landemarkering navigation**: Hop mellem sidesektioner (header, nav, main, footer) +- **Overskriftsnavigation**: Spring mellem overskrifter for at forstå sidestrukturen - **Linklister**: Genererer en liste over alle links for hurtig adgang -- **Formularfelter**: Navigerer direkte mellem inputfelter og knapper +- **Formkontroller**: Naviger direkte mellem inputfelter og knapper -> 💡 **Her er noget, der blæste mig omkuld**: 68% af skærmlæserbrugere navigerer primært via overskrifter ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). Det betyder, at din overskriftsstruktur er som et kort for brugerne – når du gør det rigtigt, hjælper du bogstaveligt talt folk med at finde rundt i dit indhold hurtigere! +> 💡 **Her er noget, der blæste mig bagover**: 68% af skærmlæserbrugere navigerer primært via overskrifter ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). Det betyder, at din overskriftsstruktur er som et kort for brugerne—når du får det rigtigt, hjælper du bogstaveligt talt folk med hurtigere at finde rundt i dit indhold! -### Opbygning af din testarbejdsgang +### Byg din testarbejdsgang -Her er gode nyheder – effektiv tilgængelighedstestning behøver ikke at være overvældende! Du vil gerne kombinere automatiserede værktøjer (de er fantastiske til at fange åbenlyse problemer) med noget hands-on testning. Her er en systematisk tilgang, som jeg har fundet ud af fanger de fleste problemer uden at tage hele din dag: +Her er noget godt nyt—effektiv tilgængelighedstest behøver ikke være overvældende! Du vil gerne kombinere automatiserede værktøjer (de er fantastiske til at fange åbenlyse problemer) med noget praktisk testning. Her er en systematisk tilgang, som jeg har fundet fanger flest problemer uden at tage hele din dag. -**Essentiel manuel testarbejdsgang:** +**Nødvendig manuel testarbejdsgang:** ```mermaid -graph TD - A[Start Testing] --> B{Keyboard Navigation} - B --> C[Tab through all interactive elements] - C --> D{Screen Reader Testing} - D --> E[Test with NVDA/VoiceOver] - E --> F{Zoom Testing} - F --> G[Zoom to 200% and test functionality] - G --> H{Color/Contrast Check} - H --> I[Verify all text meets contrast ratios] - I --> J{Focus Management} - J --> K[Ensure focus indicators are visible] - K --> L[Testing Complete] +flowchart TD + A[🚀 Start Testning] --> B{⌨️ Tastaturnavigation} + B --> C[Tab gennem alle interaktive elementer] + C --> D{🎧 Skærmlæser Test} + D --> E[Test med NVDA/VoiceOver] + E --> F{🔍 Zoom Test} + F --> G[Zoom til 200% og test funktionalitet] + G --> H{🎨 Farve/Kontrast Tjek} + H --> I[Verificer at al tekst opfylder kontrastforhold] + I --> J{👁️ Fokusstyring} + J --> K[Sørg for at fokusindikatorer er synlige] + K --> L[✅ Testning Fuldført] + + style A fill:#e3f2fd + style L fill:#e8f5e8 + style B fill:#fff3e0 + style D fill:#f3e5f5 + style F fill:#e0f2f1 + style H fill:#fce4ec + style J fill:#e8eaf6 ``` - -**Trin-for-trin testtjekliste:** +**Trin-for-trin test-checkliste:** 1. **Tastaturnavigation**: Brug kun Tab, Shift+Tab, Enter, Space og piletaster -2. **Skærmlæsertest**: Aktiver NVDA, VoiceOver eller Narrator og naviger med lukkede øjne -3. **Zoomtest**: Test ved 200% og 400% zoomniveauer -4. **Farvekontrastverifikation**: Tjek al tekst og UI-komponenter -5. **Fokusindikator-test**: Sørg for, at alle interaktive elementer har synlige fokusmarkeringer +2. **Test med skærmlæser**: Aktivér NVDA, VoiceOver eller Narrator og naviger med lukkede øjne +3. **Zoom test**: Test ved 200% og 400% zoom niveauer +4. **Farvekontrastkontrol**: Tjek al tekst og UI-komponenter +5. **Test fokusindikator**: Sørg for at alle interaktive elementer har synlige fokus-tilstande -✅ **Start med Lighthouse**: Åbn din browsers DevTools, kør en Lighthouse-tilgængelighedsaudit, og brug resultaterne til at fokusere på dine manuelle testområder. +✅ **Start med Lighthouse**: Åbn din browsers DevTools, kør en Lighthouse-tilgængelighedsaudit, og brug resultaterne til at guide din manuelle testindsats. ### Zoom- og forstørrelsesværktøjer -Du ved, hvordan du nogle gange zoomer ind på din telefon, når teksten er for lille, eller kniber øjnene sammen på din laptops skærm i stærkt sollys? Mange brugere er afhængige af forstørrelsesværktøjer for at gøre indhold læsbart hver eneste dag. Dette inkluderer personer med nedsat syn, ældre voksne og alle, der nogensinde har prøvet at læse en hjemmeside udendørs. +Du kender det sikkert—nogle gange kniber du fingrene for at zoome på din telefon, når teksten er for lille, eller squinter på din laptop i stærkt sollys? Mange brugere er afhængige af forstørrelsesværktøjer for at gøre indhold læseligt hver eneste dag. Dette inkluderer personer med nedsat syn, ældre voksne og alle, der nogensinde har prøvet at læse et website udendørs. -Moderne zoomteknologier er udviklet ud over blot at gøre ting større. At forstå, hvordan disse værktøjer fungerer, vil hjælpe dig med at skabe responsive designs, der forbliver funktionelle og attraktive på ethvert forstørrelsesniveau. +Moderne zoom-teknologier har udviklet sig ud over bare at gøre ting større. Forståelse af hvordan disse værktøjer fungerer, vil hjælpe dig med at skabe responsive designs, der forbliver funktionelle og flotte ved alle forstørrelsesniveauer. -**Moderne browser-zoomfunktioner:** +**Moderne browseres zoom-muligheder:** - **Sidezoom**: Skalerer alt indhold proportionalt (tekst, billeder, layout) - dette er den foretrukne metode -- **Kun tekstzoom**: Øger skrifttypestørrelsen, mens den oprindelige layout bevares -- **Pinch-to-zoom**: Mobilgestik til midlertidig forstørrelse -- **Browserstøtte**: Alle moderne browsere understøtter zoom op til 500% uden at bryde funktionaliteten +- **Tekst-zoom**: Forøger skriftstørrelsen mens originalt layout bevares +- **Knib-til-zoom**: Mobil gestus til midlertidig forstørrelse +- **Browser support**: Alle moderne browsere understøtter zoom op til 500% uden at bryde funktionalitet **Specialiseret forstørrelsessoftware:** - **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (indbygget), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (indbygget med avancerede funktioner) -> ⚠️ **Designovervejelse**: WCAG kræver, at indhold forbliver funktionelt, når det zoomes til 200%. På dette niveau bør horisontal scrolling være minimal, og alle interaktive elementer bør forblive tilgængelige. +> ⚠️ **Designovervejelse**: WCAG kræver, at indhold forbliver funktionelt ved zoom på 200%. På dette niveau bør vandret rulning være minimal, og alle interaktive elementer skal forblive tilgængelige. -✅ **Test dit responsive design**: Zoom din browser til 200% og 400%. Tilpasser dit layout sig elegant? Kan du stadig få adgang til alle funktioner uden overdreven scrolling? +✅ **Test dit responsive design**: Zoom din browser til 200% og 400%. Tilpasser dit layout sig elegant? Kan du stadig få adgang til al funktionalitet uden overdreven rulning? -## Moderne tilgængelighedstestværktøjer +## Moderne Tilgængelighedstestværktøjer -Nu hvor du forstår, hvordan folk navigerer på nettet med hjælpemidler, lad os udforske de værktøjer, der hjælper dig med at bygge og teste tilgængelige websites. +Nu hvor du forstår, hvordan folk navigerer på nettet med hjælpemidler, lad os udforske værktøjerne, der hjælper dig med at bygge og teste tilgængelige websites. -Tænk på det sådan: automatiserede værktøjer er gode til at fange åbenlyse problemer (som manglende alt-tekst), mens hands-on testning hjælper dig med at sikre, at dit site føles godt at bruge i den virkelige verden. Sammen giver de dig selvtillid til, at dine sites fungerer for alle. +Tænk på det sådan: automatiserede værktøjer er gode til at fange åbenlyse problemer (som manglende alt-tekst), mens praktisk testning hjælper dig med at sikre, at dit site føles godt at bruge i virkeligheden. Sammen giver de dig tillid til, at dine sites fungerer for alle. ### Farvekontrasttest -Her er gode nyheder: farvekontrast er et af de mest almindelige tilgængelighedsproblemer, men det er også et af de nemmeste at løse. God kontrast gavner alle – fra brugere med synshandicap til folk, der prøver at læse deres telefoner på stranden. +Her er noget godt nyt: farvekontrast er et af de mest almindelige tilgængelighedsproblemer, men det er også et af de nemmeste at rette. God kontrast gavner alle—fra brugere med synsnedsættelse til folk, der prøver at læse deres telefon på stranden. -**WCAG-kontrastkrav:** +**WCAG krav til kontrast:** | Teksttype | WCAG AA (Minimum) | WCAG AAA (Forbedret) | |-----------|-------------------|---------------------| | **Normal tekst** (under 18pt) | 4.5:1 kontrastforhold | 7:1 kontrastforhold | | **Stor tekst** (18pt+ eller 14pt+ fed) | 3:1 kontrastforhold | 4.5:1 kontrastforhold | -| **UI-komponenter** (knapper, formularrammer) | 3:1 kontrastforhold | 3:1 kontrastforhold | +| **UI-komponenter** (knapper, formulargrænser) | 3:1 kontrastforhold | 3:1 kontrastforhold | -**Essentielle testværktøjer:** -- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Desktop-app med farvevælger +**Nødvendige testværktøjer:** +- [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Desktop app med farvevælger - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Webbaseret med øjeblikkelig feedback -- [Stark](https://www.getstark.co/) - Designværktøjs-plugin til Figma, Sketch, Adobe XD +- [Stark](https://www.getstark.co/) - Designplugin til Figma, Sketch, Adobe XD - [Accessible Colors](https://accessible-colors.com/) - Find tilgængelige farvepaletter -✅ **Byg bedre farvepaletter**: Start med dine brandfarver og brug kontrasttestere til at skabe tilgængelige variationer. Dokumentér disse som en del af dit designsystems tilgængelige farvetokens. +✅ **Skab bedre farvepaletter**: Start med dine brandfarver og brug kontrastkontrollere til at skabe tilgængelige variationer. Dokumentér disse som dit designsystems tilgængelige farvetoner. -### Omfattende tilgængelighedsaudit +### Omfattende tilgængelighedsauditering -Den mest effektive tilgængelighedstest kombinerer flere tilgange. Intet enkelt værktøj fanger alt, så opbygning af en testrutine med forskellige metoder sikrer grundig dækning. +Den mest effektive tilgængelighedstest kombinerer flere tilgange. Intet enkelt værktøj fanger alt, så det at opbygge en testrutine med forskellige metoder sikrer grundig dækning. -**Browserbaseret test (indbygget i DevTools):** -- **Chrome/Edge**: Lighthouse-tilgængelighedsaudit + Tilgængelighedspanel -- **Firefox**: Tilgængelighedsinspektør med detaljeret trævisning -- **Safari**: Audit-fane i Web Inspector med VoiceOver-simulering +**Browserbaseret testning (indbygget i DevTools):** +- **Chrome/Edge**: Lighthouse tilgængelighedsaudit + Accessibility-panel +- **Firefox**: Accessibility Inspector med detaljeret trævisning +- **Safari**: Audit-faneblad i Web Inspector med VoiceOver-simulering **Professionelle testudvidelser:** -- [axe DevTools](https://www.deque.com/axe/devtools/) - Industri-standard automatiseret test +- [axe DevTools](https://www.deque.com/axe/devtools/) - Branche-standard automatiseret test - [WAVE](https://wave.webaim.org/extension/) - Visuel feedback med fejlmarkering -- [Accessibility Insights](https://accessibilityinsights.io/) - Microsofts omfattende testværktøj +- [Accessibility Insights](https://accessibilityinsights.io/) - Microsofts omfattende testsuite -**Kommandolinje og CI/CD-integration:** +**Kommando-linje og CI/CD-integration:** - [axe-core](https://github.com/dequelabs/axe-core) - JavaScript-bibliotek til automatiseret test -- [Pa11y](https://pa11y.org/) - Kommandolinje tilgængelighedstestværktøj -- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Automatiseret tilgængelighedsscore +- [Pa11y](https://pa11y.org/) - Kommandolinjeværktøj til tilgængelighedstest +- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Automatiseret tilgængelighedsscorer -> 🎯 **Testmål**: Stræb efter en Lighthouse-tilgængelighedsscore på 95+ som din baseline. Husk, automatiserede værktøjer fanger kun omkring 30-40% af tilgængelighedsproblemer – manuel testning er stadig essentiel! +> 🎯 **Testmål**: Sigter efter en Lighthouse tilgængelighedsscore på 95+ som baseline. Husk, automatiserede værktøjer fanger kun ca. 30-40% af tilgængelighedsproblemerne—manuel test er stadig essentiel! -## Byg tilgængelighed fra bunden +### 🧠 **Testfærdigheder Check: Klar til at finde problemer?** -Nøglen til succes med tilgængelighed er at indarbejde det i din grundstruktur fra dag ét. Jeg ved, det kan være fristende at tænke "Jeg tilføjer tilgængelighed senere," men det er som at prøve at tilføje en rampe til et hus, efter det allerede er bygget. Muligt? Ja. Let? Ikke rigtig. +**Lad os se, hvordan du har det med tilgængelighedstest:** +- Hvilken testmetode virker mest tilgængelig for dig lige nu? +- Kan du forestille dig at bruge kun tastaturnavigation en hel dag? +- Hvad er en tilgængelighedsbarriere, du personligt har oplevet online? -Tænk på tilgængelighed som planlægning af et hus – det er meget nemmere at inkludere kørestolsadgang i dine oprindelige arkitektplaner end at eftermontere alt senere. +```mermaid +pie title "Tilgængelighedsproblemer Opdaget af Forskellige Metoder" + "Automatiserede Værktøjer" : 35 + "Manuel Testning" : 40 + "Brugerfeedback" : 25 +``` +> **Selvtillidsboost**: Professionelle tilgængelighedstestere bruger denne eksakte kombination af metoder. Du lærer branches standard praksis! + +## Byg Tilgængelighed fra Grundlaget + +Nøglen til tilgængelighedssucces er at bygge den ind i dit fundament fra dag ét. Jeg ved, det er fristende at tænke "Jeg tilføjer tilgængelighed senere," men det er som at forsøge at tilføje en rampe til et hus, efter det allerede er bygget. Muligt? Ja. Let? Ikke rigtig. -### POUR-principperne: Din tilgængelighedsfundament +Tænk på tilgængelighed som planlægning af et hus—det er meget lettere at inkludere kørestolsadgang i dine arkitektoniske planer fra starten end at skulle tilføje det bagefter. -Web Content Accessibility Guidelines (WCAG) er bygget omkring fire grundlæggende principper, der staver POUR. Bare rolig – dette er ikke tørre akademiske begreber! De er faktisk praktiske retningslinjer for at skabe indhold, der fungerer for alle. +### POUR principperne: Dit tilgængelighedsfundament -Når du får styr på POUR, bliver det meget mere intuitivt at træffe tilgængelighedsbeslutninger. Det er som at have en mental tjekliste, der guider dine designvalg. Lad os bryde det ned: +Web Content Accessibility Guidelines (WCAG) er bygget op omkring fire grundlæggende principper, der staver POUR. Bare rolig—det er ikke tørre akademiske begreber! De er faktisk praktiske retningslinjer til at gøre indhold, der fungerer for alle. -**🔍 Opfatteligt**: Information skal præsenteres på måder, som brugere kan opfatte gennem deres tilgængelige sanser +Når du først har styr på POUR, bliver det meget mere intuitivt at træffe beslutninger om tilgængelighed. Det er som at have en mental tjekliste, der guider dine designvalg. Lad os gennemgå dem: + +```mermaid +flowchart LR + A[🔍 OPGRIBELIG
Kan brugere opfatte det?] --> B[🎮 BRUGBAR
Kan brugere anvende det?] + B --> C[📖 FORSTÅELIG
Kan brugere forstå det?] + C --> D[💪 ROBUST
Virker det overalt?] + + A1[Alternativ tekst
Undertekster
Kontrast] --> A + B1[Tastaturadgang
Ingen anfald
Tidsbegrænsninger] --> B + C1[Klart sprog
Forudsigeligt
Fejlhjælp] --> C + D1[Gyldig kode
Kompatibel
Fremtidssikret] --> D + + style A fill:#e1f5fe + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 +``` +**🔍 Perceptible (Opfatteligt)**: Information skal kunne præsenteres på måder, som brugere kan opfatte gennem deres tilgængelige sanser -- Giv tekstalternativer til ikke-tekstindhold (billeder, videoer, lyd) +- Giv tekstalternativer for ikke-tekstligt indhold (billeder, videoer, lyd) - Sørg for tilstrækkelig farvekontrast for al tekst og UI-komponenter -- Tilbyd undertekster og transskriptioner til multimedieindhold -- Design indhold, der forbliver funktionelt, når det forstørres op til 200% +- Tilbyd billedtekster og transskriptioner for multimedieindhold +- Design indhold, der forbliver funktionelt ved op til 200% størrelse - Brug flere sensoriske karakteristika (ikke kun farve) til at formidle information -**🎮 Operabelt**: Alle grænsefladekomponenter skal kunne betjenes via tilgængelige inputmetoder +**🎮 Operable (Betjeneligt)**: Alle grænsefladekomponenter skal kunne betjenes via tilgængelige inputmetoder - Gør al funktionalitet tilgængelig via tastaturnavigation - Giv brugerne tilstrækkelig tid til at læse og interagere med indhold -- Undgå indhold, der forårsager anfald eller vestibulære lidelser -- Hjælp brugere med at navigere effektivt med klar struktur og landemærker -- Sørg for, at interaktive elementer har tilstrækkelige målstørrelser (minimum 44px) +- Undgå indhold, der kan forårsage anfald eller vestibulære lidelser +- Hjælp brugere med effektiv navigation med klar struktur og landemærker +- Sørg for, at interaktive elementer har passende mål (mindst 44px) -**📖 Forståeligt**: Information og UI-betjening skal være klar og forståelig +**📖 Understandable (Forståeligt)**: Information og interface skal være klare og letforståelige - Brug klart, enkelt sprog, der passer til din målgruppe - Sørg for, at indhold vises og fungerer på forudsigelige, konsistente måder -- Giv klare instruktioner og fejlmeddelelser for brugerinput +- Giv klare instruktioner og fejlbeskeder ved brugerinput - Hjælp brugere med at forstå og rette fejl i formularer -- Organiser indhold med logisk læserækkefølge og informationshierarki +- Organisér indhold med logisk læserækkefølge og informationshierarki + +**💪 Robust (Robust)**: Indhold skal fungere pålideligt på tværs af forskellige teknologier og hjælpemidler + +- **Brug gyldig, semantisk HTML som dit fundament** +- **Sørg for kompatibilitet med nuværende og fremtidige hjælpemidler** +- **Følg webstandarder og bedste praksis for markup** +- **Test på tværs af forskellige browsere, enheder og hjælpemidler** +- **Strukturer indhold, så det nedbrydes pænt, når avancerede funktioner ikke understøttes** -**💪 Robust**: Indhold skal fungere pålideligt på tværs af forskellige teknologier og hjælpemidler +### 🎯 **POUR-principper Check: At få det til at hænge fast** -- Brug gyldig, semantisk HTML som din grundstruktur -- Sørg for kompatibilitet med nuværende og fremtidige hjælpemidler -- Følg webstandarder og bedste praksis for markup -- Test på tværs af forskellige browsere, enheder og hjælpemidler -- Strukturér indhold, så det nedgraderes elegant, når avancerede funktioner ikke understøttes +**Hurtig refleksion over grundlaget:** +- Kan du tænke på en webfunktion, der fejler hvert af POUR-principperne? +- Hvilket princip føles mest naturligt for dig som udvikler? +- Hvordan kan disse principper forbedre design for alle, ikke kun brugere med handicap? + +```mermaid +quadrantChart + title POUR Principper Indvirkningsmatrix + x-axis Lav indsats --> Høj indsats + y-axis Lav indvirkning --> Høj indvirkning + quadrant-1 Hurtige gevinster + quadrant-2 Store projekter + quadrant-3 Overvej senere + quadrant-4 Strategisk fokus + + Alt Text: [0.2, 0.9] + Color Contrast: [0.3, 0.8] + Semantic HTML: [0.4, 0.9] + Keyboard Nav: [0.6, 0.8] + ARIA Complex: [0.8, 0.7] + Screen Reader Testing: [0.7, 0.6] +``` +> **Husk**: Start med høj-impact, lav-indsats forbedringer. Semantisk HTML og alt-tekst giver dig det største tilgængelighedsboost for mindst indsats! -## Skabelse af tilgængeligt visuelt design +## Skabe tilgængeligt visuelt design Godt visuelt design og tilgængelighed går hånd i hånd. Når du designer med tilgængelighed i tankerne, opdager du ofte, at disse begrænsninger fører til renere, mere elegante løsninger, der gavner alle brugere. -Lad os udforske, hvordan man skaber visuelt tiltalende designs, der fungerer for alle, uanset deres visuelle evner eller de forhold, hvorunder de ser dit indhold. +Lad os udforske, hvordan du skaber visuelt tiltalende designs, der fungerer for alle, uanset deres visuelle evner eller de forhold, de ser dit indhold under. + +### Farve og visuelle tilgængelighedsstrategier -### Farve- og visuelle tilgængelighedsstrategier -Farver er stærke til kommunikation, men de bør aldrig være den eneste måde, du formidler vigtig information på. Design ud over farver skaber mere robuste og inkluderende oplevelser, der fungerer i flere situationer. +Farve er et stærkt kommunikationsmiddel, men det bør aldrig være den eneste måde, du formidler vigtig information på. Design ud over farve skaber mere robuste, inkluderende oplevelser, der fungerer i flere situationer. -**Design for forskelle i farvesyn:** +**Design for farvesynet forskelle:** -Omkring 8% af mænd og 0,5% af kvinder har en form for forskel i farvesyn (ofte kaldet "farveblindhed"). De mest almindelige typer er: -- **Deuteranopia**: Vanskeligheder med at skelne mellem rød og grøn -- **Protanopia**: Rød fremstår mere dæmpet -- **Tritanopia**: Vanskeligheder med blå og gul (sjælden) +Omtrent 8 % af mænd og 0,5 % af kvinder har en eller anden form for farvesynsforskel (ofte kaldet "farveblindhed"). De mest almindelige typer er: +- **Deuteranopi**: Vanskeligheder med at skelne rød og grøn +- **Protanopi**: Rød fremstår mere svag +- **Tritanopi**: Vanskeligheder med blå og gul (sjældent) **Inklusive farvestrategier:** @@ -242,17 +347,17 @@ Omkring 8% af mænd og 0,5% af kvinder har en form for forskel i farvesyn (ofte } ``` -**Ud over grundlæggende kontrastkrav:** -- Test dine farvevalg med farveblind-simulatorer +**Udover grundlæggende kontrastkrav:** +- Test dine farvevalg med farveblindhedssimulatorer - Brug mønstre, teksturer eller former sammen med farvekodning -- Sørg for, at interaktive tilstande forbliver genkendelige uden farver -- Overvej, hvordan dit design ser ud i højkontrasttilstand +- Sørg for, at interaktive tilstande forbliver genkendelige uden farve +- Overvej, hvordan dit design ser ud i højkontrast-tilstand -✅ **Test din farveadgang**: Brug værktøjer som [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) for at se, hvordan dit websted ser ud for brugere med forskellige typer farvesyn. +✅ **Test din farvetilgængelighed**: Brug værktøjer som [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) for at se, hvordan dit site fremstår for brugere med forskellige typer farvesyn. ### Fokusindikatorer og interaktionsdesign -Fokusindikatorer er den digitale ækvivalent til en markør – de viser tastaturbrugere, hvor de befinder sig på siden. Veludformede fokusindikatorer forbedrer oplevelsen for alle ved at gøre interaktioner klare og forudsigelige. +Fokusindikatorer er det digitale svar på en markør—de viser tastaturbrugere, hvor de er på siden. Godt designede fokusindikatorer forbedrer oplevelsen for alle ved at gøre interaktioner klare og forudsigelige. **Moderne bedste praksis for fokusindikatorer:** @@ -284,22 +389,43 @@ button:focus:not(:focus-visible) { ``` **Krav til fokusindikatorer:** -- **Synlighed**: Skal have mindst 3:1 kontrastforhold med omkringliggende elementer -- **Bredde**: Minimum 2px tykkelse rundt om hele elementet -- **Vedholdenhed**: Skal forblive synlig, indtil fokus flyttes -- **Adskillelse**: Skal være visuelt forskellig fra andre UI-tilstande +- **Synlighed**: Skal have mindst 3:1 kontrastforhold til omgivelserne +- **Bredde**: Minimum 2px tykkelse omkring hele elementet +- **Vedholdenhed**: Skal forblive synlig, indtil fokus flyttes andetsteds +- **Distinktion**: Skal visuelt adskille sig fra andre UI-tilstande -> 💡 **Designtip**: Gode fokusindikatorer bruger ofte en kombination af kontur, box-shadow og farveændringer for at sikre synlighed på forskellige baggrunde og kontekster. +> 💡 **Design Tip**: Gode fokusindikatorer bruger ofte en kombination af outline, box-shadow og farveændringer for at sikre synlighed på forskellige baggrunde og i forskellige kontekster. -✅ **Auditér fokusindikatorer**: Tab dig gennem dit websted og bemærk, hvilke elementer der har klare fokusindikatorer. Er nogle svære at se eller helt mangler? +✅ **Auditér fokusindikatorer**: Tab dig igennem dit website og bemærk, hvilke elementer der har klare fokusindikatorer. Er nogen svære at se eller helt manglende? ### Semantisk HTML: Fundamentet for tilgængelighed -Semantisk HTML er som at give hjælpemidler et GPS-system til dit websted. Når du bruger de rigtige HTML-elementer til deres tilsigtede formål, giver du skærmlæsere, tastaturer og andre værktøjer et detaljeret kort, der hjælper brugerne med at navigere effektivt. +Semantisk HTML er som at give hjælpemidler et GPS-system til dit website. Når du bruger de rigtige HTML-elementer til deres tilsigtede formål, giver du grundlæggende skærmlæsere, tastaturer og andre hjælpemidler et detaljeret kort over, hvordan brugere effektivt navigerer. -Her er en analogi, der virkelig gav mening for mig: semantisk HTML er forskellen mellem et velorganiseret bibliotek med klare kategorier og nyttige skilte versus et lager, hvor bøgerne er spredt tilfældigt. Begge steder har de samme bøger, men hvor ville du helst prøve at finde noget? Præcis! +Her er en analogi, der virkelig ramte plet for mig: semantisk HTML er forskellen mellem et velorganiseret bibliotek med klare kategorier og hjælpsomme skilte versus et lager, hvor bøger er spredt tilfældigt. Begge steder har de samme bøger, men hvilket sted ville du helst prøve at finde noget i? Præcis! -**Byggestenene i en tilgængelig sidestruktur:** +```mermaid +flowchart TD + A[🏠 HTML-dokument] --> B[📰 header] + A --> C[🧭 nav] + A --> D[📄 hovedindhold] + A --> E[📋 footer] + + B --> B1[h1: Sidenavn
Logo og branding] + C --> C1[ul: Navigation
Primære links] + D --> D1[artikel: Indhold
sektion: Underafsnit] + D --> D2[aside: Sidebar
Relateret indhold] + E --> E1[nav: Footer-links
Ophavsret-info] + + D1 --> D1a[h1: Sidetitel
h2: Hovedafsnit
h3: Underafsnit] + + style A fill:#e3f2fd + style B fill:#e8f5e8 + style C fill:#fff3e0 + style D fill:#f3e5f5 + style E fill:#e0f2f1 +``` +**Byggesten til tilgængelig sidestruktur:** ```html @@ -356,34 +482,60 @@ Her er en analogi, der virkelig gav mening for mig: semantisk HTML er forskellen **Hvorfor semantisk HTML transformerer tilgængelighed:** -| Semantisk element | Formål | Fordel for skærmlæsere | -|------------------|---------|----------------------| -| `
` | Side- eller sektionens overskrift | "Banner-landmærke" - hurtig navigation til toppen | -| `