> Sketchnote af [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, eller HyperText Markup Language, er fundamentet for enhver hjemmeside, du nogensinde har besøgt. Tænk på HTML som skelettet, der giver struktur til websider – det definerer, hvor indholdet skal være, hvordan det organiseres, og hvad hvert enkelt element repræsenterer. Mens CSS senere "pynter" din HTML med farver og layouts, og JavaScript bringer det til live med interaktivitet, giver HTML den essentielle struktur, som gør alt andet muligt.
@ -86,7 +86,7 @@ Du skal oprette en dedikeret mappe til dit terrariumprojekt og tilføje din før
4. I Explorer-panelet, klik på ikonet "New File"
5. Navngiv din fil `index.html`
**Mulighed 2: Brug af terminalkommandoer**
```bash
@ -236,48 +236,48 @@ Tilføj nu plantebillederne organiseret i to kolonner mellem dine `<body></body>
> Sketchnote af [Tomomi Imura](https://twitter.com/girlie_mac)
Kan du huske, hvordan dit HTML-terrarium så temmelig grundlæggende ud? CSS er stedet, hvor vi forvandler den enkle struktur til noget visuelt tiltalende.
@ -202,7 +202,7 @@ body {
Åbn din browsers udviklerværktøjer (F12), gå til Elements fanen, og undersøg dit `<h1>` element. Du vil se, at det arver font-familien fra body:
✅ **Eksperimenter**: Prøv at sætte andre arvelige egenskaber på `<body>` som `color`, `line-height` eller `text-align`. Hvad sker der med din overskrift og andre elementer?
@ -332,7 +332,7 @@ I vores terrarium har hver plante brug for lignende styling, men også individue
**Her er HTML-strukturen for hver plante:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.da.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/da/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ Klar til at forbedre dit terrarium med realistiske glasreflektioner? Denne tekni
Du vil skabe subtile highlights, der simulerer, hvordan lys reflekteres på glasoverflader. Denne metode svarer til, hvordan renæssancens malere som Jan van Eyck brugte lys og refleksion til at få malet glas til at fremstå tredimensionelt. Sådan skal resultatet se ud:
> Sketchnote af [Tomomi Imura](https://twitter.com/girlie_mac)
Velkommen til en af de mest engagerende aspekter af webudvikling - at gøre ting interaktive! Document Object Model (DOM) er som en bro mellem dit HTML og JavaScript, og i dag bruger vi det til at bringe dit terrarium til live. Da Tim Berners-Lee skabte den første webbrowser, forestillede han sig et web, hvor dokumenter kunne være dynamiske og interaktive - DOM gør denne vision mulig.
> En repræsentation af DOM og den HTML markup, som henviser til den. Fra [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Forståelse af Closures**: Closures er et væsentligt emne i JavaScript, og mange udviklere bruger år på at forstå alle de teoretiske aspekter fuldt ud. I dag fokuserer vi på praktisk anvendelse – du vil se closures naturligt opstå, når vi bygger vores interaktive funktioner. Forståelsen udvikler sig, når du ser, hvordan de løser virkelige problemer.
> En repræsentation af DOM og den HTML markup, som henviser til den. Fra [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ Test nu dit interaktive terrarium! Åbn din `index.html` fil i en webbrowser og
- **Tvær-enheds support**: Virker på desktop og mobiler
- **Ydelsesbevidsthed**: Ingen hukommelseslækager eller overflødige beregninger
> Nogle tidlige browsere, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Hvordan Browsere Behandler Webindhold
@ -194,7 +194,7 @@ quadrantChart
At forstå installationsprocessen for udvidelser hjælper dig med at forudse brugeroplevelsen, når folk installerer din udvidelse. Installationsprocessen er standardiseret på tværs af moderne browsere med mindre variationer i grænsefladedesign.
> **Vigtigt**: Sørg for at slå udviklertilstand til og tillade udvidelser fra andre butikker, når du tester dine egne udvidelser.
@ -308,10 +308,10 @@ Dette følger princippet om gradvis afsløring, brugt i interface design siden d
### Oversigt over Udvidelsesvisninger
**Opsætningsvisning** – første gangs bruger-konfiguration:
**Resultatvisning** – visning af kulstofaftrykdata:
> ⚠️ **Sikkerhedsovervejelse**: I produktionsapplikationer udgør lagring af API-nøgler i LocalStorage sikkerhedsrisici, da JavaScript kan tilgå disse data. Til læringsformål fungerer dette fint, men rigtige applikationer bør bruge sikker server-side lagring til følsomme oplysninger.
@ -123,7 +123,7 @@ For at åbne Udviklerværktøjer i Edge, klik på de tre prikker øverst til hø
Lad os prøve det. Åbn en hjemmeside (Microsoft.com fungerer godt til dette) og klik på 'Optag' knappen. Opdater nu siden, og se profilen fange alt, hvad der sker. Når du stopper optagelsen, får du en detaljeret opdeling af, hvordan browseren ‘script’, ‘renderer’ og ‘maler’ sitet. Det minder mig om, hvordan mission control overvåger hvert system under en raketopsendelse – du får realtime-data om præcis, hvad der sker og hvornår.
✅ [Microsoft Dokumentationen](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) har masser af flere detaljer, hvis du vil dykke dybere ned
@ -133,11 +133,11 @@ Vælg elementer i profilens tidslinje for at zoome ind på begivenheder, der ske
Få et øjebliksbillede af din sides ydeevne ved at vælge et stykke af profiltidslinjen og kigge på oversigtspanelet:
✅ Lær din profiler at kende! Åbn udviklerværktøjerne på denne side og se, om der er nogen flaskehalse. Hvad er det langsomt indlæsende element? Hvad er det hurtigste?
Ved at bruge tmrow's CO2 Signal API til at spore elforbrug, kan du bygge en browserudvidelse, så du får en påmindelse direkte i din browser om, hvor belastet din regions elforbrug er. Ved at bruge denne udvidelse ad hoc kan du træffe bedre beslutninger om dine aktiviteter baseret på denne information.
For at installere på Edge skal du bruge 'tre-punkts'-menuen øverst til højre i browseren for at finde panelet Udvidelser. Derfra vælger du 'Indlæs ikke-pakket' for at indlæse en ny udvidelse. Åbn mappen 'dist', når du bliver bedt om det, og udvidelsen vil blive indlæst. For at bruge den skal du have en API-nøgle til CO2 Signal's API ([få en her via e-mail](https://www.co2signal.com/) - indtast din e-mail i boksen på denne side) og koden for din region ([find den her](http://api.electricitymap.org/v3/zones)) svarende til [Electricity Map](https://www.electricitymap.org/map) (i Boston bruger jeg for eksempel 'US-NEISO').
Når API-nøglen og regionen er indtastet i udvidelsens grænseflade, bør den farvede prik i browserens udvidelsesbjælke ændre sig for at afspejle din regions energiforbrug og give dig en indikation af, hvilke energitunge aktiviteter der ville være passende at udføre. Konceptet bag dette 'prik'-system blev inspireret af [Energy Lollipop-udvidelsen](https://energylollipop.com/) for Californiens emissioner.
Ved at bruge tmrow's CO2-signal API til at spore elforbrug, kan du oprette en browserudvidelse, der giver dig en påmindelse direkte i din browser om elforbruget i din region. Brug af denne ad hoc-udvidelse vil hjælpe dig med at træffe beslutninger om dine aktiviteter baseret på denne information.
For at installere i Edge skal du bruge menuen med 'tre prikker' i øverste højre hjørne af browseren for at finde panelet Udvidelser. Derfra skal du vælge 'Indlæs udpakket' for at tilføje en ny udvidelse. Åbn mappen 'dist', når du bliver bedt om det, og udvidelsen vil blive indlæst. For at bruge den skal du have en API-nøgle til CO2 Signal API ([få en her via e-mail](https://www.co2signal.com/) - indtast din e-mail i feltet på denne side) og koden for din region ([find den her](http://api.electricitymap.org/v3/zones)) svarende til [Electricity Map](https://www.electricitymap.org/map) (i Boston bruger jeg for eksempel 'US-NEISO').
Når API-nøglen og regionen er indtastet i udvidelsens grænseflade, bør farvepunktet i browserens udvidelsesbjælke ændre sig for at afspejle energiforbruget i din region og give dig en indikator for, hvilke aktiviteter med højt energiforbrug der ville være passende for dig. Konceptet bag dette "punkt"-system blev inspireret af [Energy Lollipop-udvidelsen](https://energylollipop.com/) for Californiens emissioner.
Ved hjælp af tmrow's CO2 Signal API til at overvåge elforbrug, kan du oprette en browserudvidelse, der giver dig en påmindelse direkte i din browser om elforbruget i dit område. Brug af denne ad hoc-udvidelse kan hjælpe dig med at træffe beslutninger om dine aktiviteter baseret på disse oplysninger.
For at installere på Edge skal du bruge menuen med 'tre prikker' i øverste højre hjørne af browseren for at finde panelet Udvidelser. Derfra vælger du 'Indlæs udvidelse uden komprimering' for at tilføje en ny udvidelse. Åbn mappen 'dist' ved prompten, og udvidelsen vil blive indlæst. For at bruge den skal du have en API-nøgle til CO2 Signal API ([få en her via e-mail](https://www.co2signal.com/) - indtast din e-mail i feltet på denne side) og [koden for din region](http://api.electricitymap.org/v3/zones), som svarer til [Electricity Map](https://www.electricitymap.org/map) (i Boston, for eksempel, bruger jeg 'US-NEISO').
Når API-nøglen og regionen er indtastet i udvidelsens interface, bør den farvede prik i browserens udvidelsesbjælke ændre sig for at afspejle energiforbruget i dit område og give dig en indikator for, hvilke energikrævende aktiviteter det ville være passende at udføre. Konceptet bag dette 'prik'-system blev inspireret af [Energy Lollipop-udvidelsen](https://energylollipop.com/) for californiske emissioner.
Ved at bruge tmrow's CO2 Signal API til at spore elforbrug, bygger vi en browserudvidelse, der kan minde dig om, hvor belastet strømforbruget i dit område er. Ved at bruge denne udvidelse kan du træffe beslutninger om dine aktiviteter baseret på denne information.
For at installere på Edge skal du bruge 'tre prikker'-menuen øverst til højre i browseren for at finde udvidelsespanelet. Derfra skal du vælge 'Load unpacked' for at indlæse en ny udvidelse. Når du bliver bedt om det, skal du åbne 'dist'-mappen, og udvidelsen vil blive indlæst. For at bruge den skal du have en API-nøgle til CO2 Signal ([fås her via e-mail](https://www.co2signal.com/) - indtast din e-mail i boksen på denne side) og [koden for dit område](http://api.electricitymap.org/v3/zones) fra [Electricity Map](https://www.electricitymap.org/map) (for eksempel bruger jeg 'US-NEISO' for Boston).
Når API-nøglen og området er indtastet i udvidelsens interface, bør den farvede prik i browserens udvidelsesbjælke ændre sig for at afspejle energiforbruget i dit område og give dig en indikator for, hvilke energiintensive aktiviteter der er passende. Konceptet bag dette 'prik'-system blev inspireret af [Energy Lollipop Extension](https://energylollipop.com/) for Californiske emissioner.
Du vil bruge tmrow's Signal CO2 API til at overvåge elforbruget og oprette en browserudvidelse, så du kan få en påmindelse direkte i din browser om, hvor tungt elforbruget er i din region. Brug af denne ad hoc-udvidelse vil hjælpe dig med at vurdere dine aktiviteter baseret på disse oplysninger.
## Kom godt i gang
@ -31,7 +31,7 @@ npm run build
For at installere på Edge skal du bruge "tre prikker"-menuen i øverste højre hjørne af browseren for at finde panelet Udvidelser. Hvis det ikke allerede er aktiveret, skal du aktivere Udviklertilstand (nederst til venstre). Vælg "Indlæs pakket udvidelse" for at tilføje en ny udvidelse. Åbn mappen "dist" ved prompten, og udvidelsen vil blive indlæst. For at bruge den skal du have en API-nøgle til CO2 Signal API'en (du kan [få den her via e-mail](https://www.co2signal.com/) - indtast din e-mail i feltet på denne side) og [koden for din region](http://api.electricitymap.org/v3/zones), som svarer til [elektricitetskortet](https://www.electricitymap.org/map) (for eksempel er koden for Boston "US-NEISO").
Når API-nøglen og regionen er indtastet i udvidelsens interface, bør den farvede prik i browserens udvidelsesbjælke ændre sig for at afspejle regionens energiforbrug og give en indikation af, hvilke aktiviteter med højt energiforbrug der ville være passende at udføre. Konceptet bag dette "prik"-system er inspireret af [Energy Lollipop-udvidelsen](https://energylollipop.com/) for Californiens emissioner.
Byg en browser-udvidelse, der fungerer som en påmindelse om, hvor meget energi der bruges i dit område, ved at spore strømforbruget med tmrow's CO2 Signal API. Ved at bruge denne udvidelse ad hoc kan du træffe beslutninger om dine aktiviteter baseret på denne information.
For at installere på Edge skal du finde "Udvidelser"-panelet via "tre prikker"-menuen øverst til højre i browseren. Derfra vælger du "Load Unpacked" og indlæser den nye udvidelse. Når du bliver bedt om det, skal du åbne "dist"-mappen, og udvidelsen vil blive indlæst. For at bruge den skal du have en API-nøgle til CO2 Signal API ([få en her via e-mail](https://www.co2signal.com/) - indtast din e-mail i boksen på siden) og en [kode for din region](http://api.electricitymap.org/v3/zones), som er kompatibel med [Electricity Map](https://www.electricitymap.org/map) (for eksempel bruges 'US-NEISO' i Boston).
Når du har indtastet API-nøglen og din region i udvidelsens interface, vil en farvet prik vises i browserens udvidelsesbjælke. Denne prik ændrer farve for at afspejle energiforbruget i dit område og hjælper dig med at vurdere, hvilke aktiviteter der kræver energi, der er passende at udføre. Konceptet med dette "prik"-system blev inspireret af [Energy Lollipop extension](https://energylollipop.com/) for emissioner i Californien.
Ved at bruge CO2 Signal API fra tmrow til at overvåge elforbrug, kan du bygge en browserudvidelse, der giver dig advarsler i din browser om, hvor belastet dit områdes elforbrug er. Denne udvidelse kan hjælpe dig med at tage beslutninger om dine aktiviteter baseret på disse oplysninger.
## Kom godt i gang
@ -31,7 +31,7 @@ npm run build
For at installere i Edge skal du bruge menuen med 'tre prikker' i øverste højre hjørne af browseren for at finde panelet Udvidelser. Derfra vælger du 'Load Unpacked' for at indlæse den nye udvidelse. Åbn mappen 'dist', når du bliver bedt om det, og udvidelsen vil blive indlæst. For at bruge den skal du have en API-nøgle til CO2 Signal API ([få en her via e-mail](https://www.co2signal.com/) - indtast din e-mail i boksen på denne side) og [koden for dit område](http://api.electricitymap.org/v3/zones), som svarer til [Electricity Map](https://www.electricitymap.org/map) (i Boston bruger jeg for eksempel 'US-NEISO').
Når API-nøglen og området er indtastet i udvidelsens interface, vil en farvet prik i browserens udvidelsesbjælke ændre sig for at afspejle dit områdes energiforbrug og give dig anbefalinger om passende aktiviteter baseret på belastningen. Konceptet bag dette 'prik'-system blev inspireret af [Energy Lollipop browserudvidelsen](https://energylollipop.com/) for Californiens emissioner.
Ved at bruge tmrow's CO2 Signal API til at spore elforbrug, kan du bygge en browserudvidelse, så du får en påmindelse direkte i din browser om, hvor belastet din regions elforbrug er. Ved at bruge denne udvidelse ad hoc kan du træffe beslutninger om dine aktiviteter baseret på denne information.
For at installere på Edge skal du bruge menuen med de 'tre prikker' øverst til højre i browseren for at finde panelet Udvidelser. Derfra skal du vælge 'Indlæs upakket' for at indlæse en ny udvidelse. Åbn mappen 'dist', når du bliver bedt om det, og udvidelsen vil blive indlæst. For at bruge den skal du have en API-nøgle til CO2 Signal's API ([få en her via e-mail](https://www.co2signal.com/) - indtast din e-mail i boksen på denne side) og koden for din region ([find den her](http://api.electricitymap.org/v3/zones)) svarende til [Electricity Map](https://www.electricitymap.org/map) (i Boston bruger jeg for eksempel 'US-NEISO').
Når API-nøglen og regionen er indtastet i udvidelsens grænseflade, bør den farvede prik i browserens udvidelsesbjælke ændre sig for at afspejle din regions energiforbrug og give dig en indikation af, hvilke energitunge aktiviteter der ville være passende at udføre. Konceptet bag dette 'prik'-system blev givet til mig af [Energy Lollipop-udvidelsen](https://energylollipop.com/) for Californiens emissioner.
> Billede fra [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
For at tegne på canvas-elementet følger du den samme tre-trins proces, som udgør fundamentet for al canvas grafik. Når du har gjort det et par gange, bliver det anden natur:
@ -323,11 +323,11 @@ Du skal bygge en webside med et Canvas-element. Det skal gengive en sort skærm
- **Pointsystem**: Hver ødelagt fjendtlige skib giver 100 point (runde tal er lettere for spillere at regne mentalt). Scoren vises i nederste venstre hjørne.
- **Livstæller**: Din helt starter med tre liv - en standard etableret af tidlige arkadespil for at balancere udfordring med spilbarhed. Hver kollision med en fjende koster et liv. Vi viser resterende liv nederst til højre med skibsikoner .
- **Livstæller**: Din helt starter med tre liv - en standard etableret af tidlige arkadespil for at balancere udfordring med spilbarhed. Hver kollision med en fjende koster et liv. Vi viser resterende liv nederst til højre med skibsikoner .
Brug af `history.pushState` skaber nye poster i browserens navigationshistorik. Du kan tjekke det ved at holde *tilbage-knappen* på din browser nede; den skulle vise noget som dette:
Hvis du prøver at klikke tilbage-knappen et par gange, vil du se, at den aktuelle URL ændres, og historikken opdateres, men den samme template bliver ved med at blive vist.
@ -292,7 +292,7 @@ Først, lad os observere hvad der sker ved basal formularafsendelse:
2. Observer ændringerne i din browsers adressebjælke
3. Læg mærke til, hvordan siden genindlæses og data vises i URL’en
### HTTP Metoder Sammenligning
@ -346,7 +346,7 @@ Lad os sætte din registreringsformular til at kommunikere korrekt med backend A
2. **Klik** på "Opret Konto" knappen
3. **Observer** serverens svar i din browser
**Det du bør se:**
- **Browseren omdirigerer** til API endpoint URL’en
@ -609,7 +609,7 @@ async function register() {
3. **Klik** på "Opret konto"
4. **Observer** konsolmeddelelser og brugerfeedback
**Det du bør se:**
- **Indlæsningsstatus** vises på submit-knappen
@ -783,7 +783,7 @@ Lad os forbedre din registreringsformular med robust validering, der giver fremr
3. **Prøv** specialtegn i brugernavnfeltet
4. **Indtast** et negativt beløb i saldo-feltet
@ -187,7 +187,7 @@ Som Titanics afdelingsopdeling, der virkede robust indtil flere skibsrum pludsel
I stedet for at løbe i ring, vil vi skabe et **centraliseret tilstandsstyringssystem**. Tænk på det som én virkelig organiseret person, der har ansvaret for alt det vigtige:
```mermaid
flowchart TD
@ -798,7 +798,7 @@ Denne udfordring hjælper dig med at tænke som en professionel udvikler, som b
Her er et eksempel på resultat efter opgaven er gennemført:
@ -112,7 +112,7 @@ Se [server-API-dokumentationen](../api/README.md) for:
**Forventet resultat:**
Efter at have fuldført denne opgave, bør din bankapp have en fuldt funktionel "Tilføj Transaktion"-funktion, der ser professionel ud og fungerer perfekt:
I dette projekt lærer du, hvordan du bygger en fiktiv bank. Disse lektioner inkluderer instruktioner om, hvordan du opbygger en webapp med layout og ruter, bygger formularer, håndterer tilstand og henter data fra en API, hvorfra du kan hente bankens data.
@ -78,7 +78,7 @@ Da VSCode.dev kræver mindst én fil for at åbne et repository, opretter vi vor
4. **Skriv** en commit-besked: "Tilføj indledende HTML-struktur"
5. **Klik** på "Commit new file" for at gemme dine ændringer
**Dette opnår den indledende opsætning:**
- **Etablerer** korrekt HTML5-dokumentstruktur med semantiske elementer
@ -104,7 +104,7 @@ Nu hvor fundamentet for dit repository er etableret, lad os skifte til VSCode.de
✅ **Succesindikator**: Du bør se dine projektfiler i Explorer-sidepanelet og `index.html` tilgængelig for redigering i hovededitorområdet.
**Hvad du vil se i grænsefladen:**
- **Explorer-sidepanel**: **Viser** dine repository-filer og mappestruktur
@ -448,7 +448,7 @@ Udvidelser forbedrer din udviklingsoplevelse ved at give live preview-muligheder
**Umiddelbare resultater efter installation:**
Når CodeSwing er installeret, vil du se et live preview af din CV-hjemmeside vises i editoren. Dette giver dig mulighed for at se præcis, hvordan din side ser ud, mens du foretager ændringer.
**Forstå den forbedrede grænseflade:**
- **Split view**: **Viser** din kode på den ene side og live preview på den anden
## 🗺️ Din Læringsrejse Gennem AI-applikationsudvikling
@ -189,7 +189,7 @@ mindmap
```
**Kerneprincip**: AI-applikationsudvikling kombinerer traditionelle webudviklingsfærdigheder med AI-tjenesteintegration for at skabe intelligente applikationer, der føles naturlige og responsive for brugerne.
**Det der gør playground så nyttig:**
- **Prøv** forskellige AI-modeller som GPT-4o-mini, Claude og andre (alle gratis!)
@ -199,7 +199,7 @@ mindmap
Når du har prøvet lidt, klik bare på fanen "Code" og vælg dit programmersprog for at få den nødvendige implementeringskode.
## Opsætning af Python Backend Integration
@ -2352,14 +2352,14 @@ Vil du prøve dette projekt i et cloud-udviklingsmiljø? GitHub Codespaces lever
- **Naviger** til [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Klik** på "Use this template" i øverste højre hjørne (sørg for at være logget ind på GitHub)
**Trin 2: Start Codespaces**
- **Åbn** dit nyoprettede repository
- **Klik** på den grønne "Code" knap, og vælg "Codespaces"
- **Vælg** "Create codespace on main" for at starte dit udviklingsmiljø
Hver lektion inkluderer en opgave, en vidensprøve og en udfordring, der guider dig gennem læring af emner som:
@ -115,7 +115,7 @@ Følg disse trin:
I din kopi af dette repository som du har oprettet, klik på **Code** knappen og vælg **Open with Codespaces**. Det vil oprette en ny Codespace til dig at arbejde i.
@ -17,7 +17,7 @@ Schau mal, ich kann total nachvollziehen, wenn Programmieren gerade einschüchte
Heute werden wir die unglaublichen Werkzeuge erkunden, die moderne Webentwicklung nicht nur möglich, sondern richtig süchtig machend machen. Ich spreche von genau denselben Editoren, Browsern und Workflows, die Entwickler bei Netflix, Spotify und deinem Lieblings-Indie-App-Studio jeden einzelnen Tag verwenden. Und hier kommt der Teil, der dich einen Freudentanz machen lässt: Die meisten dieser professionellen, industrieweiten Werkzeuge sind komplett kostenlos!
@ -17,7 +17,7 @@ Ich weiß, das fühlt sich am Anfang vielleicht nach viel an – ich erinnere mi
Wir werden diese Reise zusammen gehen, Schritt für Schritt. Kein Stress, kein Druck – nur du, ich und ein paar wirklich coole Tools, die deine neuen besten Freunde werden!
> Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -604,7 +604,7 @@ Finde zunächst ein Repository (oder **Repo**) auf GitHub, das dich interessiert
✅ Eine gute Möglichkeit, 'anfängerfreundliche' Repos zu finden, ist die [Suche nach dem Label 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Es gibt verschiedene Wege, um Code zu kopieren. Eine Möglichkeit ist, die Inhalte des Repositories zu "klonen", per HTTPS, SSH oder mit der GitHub CLI (Command Line Interface).
> Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac)
HTML, oder HyperText Markup Language, ist die Grundlage jeder Website, die du je besucht hast. Betrachte HTML als das Skelett, das Webseiten Struktur verleiht – es definiert, wo Inhalte platziert werden, wie sie organisiert sind und was jeder Abschnitt repräsentiert. Während CSS später dein HTML mit Farben und Layouts „einkleidet“ und JavaScript es mit Interaktivität zum Leben erweckt, liefert HTML die wesentliche Struktur, die alles andere möglich macht.
@ -86,7 +86,7 @@ Du legst einen dedizierten Ordner für dein Terrarium-Projekt an und fügst dein
4. Klicke im Explorer-Bereich auf das Symbol „Neue Datei“
5. Benenne deine Datei `index.html`
**Option 2: Mit Terminal-Befehlen**
```bash
@ -236,48 +236,48 @@ Füge jetzt die Pflanzenbilder, organisiert in zwei Spalten, zwischen deine `<bo
> Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac)
Erinnere dich daran, wie dein HTML-Terrarium ziemlich einfach aussah? CSS ist der Bereich, in dem wir diese schlichte Struktur in etwas Visuell Ansprechendes verwandeln.
@ -202,7 +202,7 @@ body {
Öffne die Entwickler-Tools deines Browsers (F12), gehe zum Tab „Elemente“ und inspiziere dein `<h1>`-Element. Du wirst sehen, dass es die Schriftfamilie vom Body erbt:
✅ **Experimentierzeit**: Versuche andere vererbbare Eigenschaften auf dem `<body>` wie `color`, `line-height` oder `text-align` zu setzen. Was passiert mit deiner Überschrift und anderen Elementen?
@ -332,7 +332,7 @@ In unserem Terrarium braucht jede Pflanze ein ähnliches Styling, aber auch indi
**Hier ist die HTML-Struktur für jede Pflanze:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.de.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/de/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ Bereit, dein Terrarium mit realistischen Glasreflexen aufzuwerten? Diese Technik
Du erzeugst subtile Highlights, die simulieren, wie Licht auf Glasflächen reflektiert wird. Dieser Ansatz ähnelt Renaissance-Malern wie Jan van Eyck, die Licht und Reflexion nutzten, um gemaltes Glas dreidimensional wirken zu lassen. Hier ist dein Ziel:
> Sketchnote von [Tomomi Imura](https://twitter.com/girlie_mac)
Willkommen zu einem der faszinierendsten Aspekte der Webentwicklung – Dinge interaktiv zu machen! Das Document Object Model (DOM) ist wie eine Brücke zwischen deinem HTML und JavaScript, und heute werden wir es nutzen, um dein Terrarium zum Leben zu erwecken. Als Tim Berners-Lee den ersten Webbrowser entwickelte, stellte er sich ein Web vor, in dem Dokumente dynamisch und interaktiv sein könnten – das DOM macht diese Vision möglich.
> Eine Darstellung des DOM und des HTML-Markups, das darauf verweist. Von [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Closures verstehen**: Closures sind ein bedeutendes Thema in JavaScript, und viele Entwickler nutzen sie jahrelang, bevor sie alle theoretischen Aspekte vollständig verstehen. Heute konzentrieren wir uns auf die praktische Anwendung – du wirst sehen, wie Closures ganz natürlich entstehen, während wir unsere interaktiven Funktionen bauen. Das Verständnis wird sich vertiefen, wenn du siehst, wie sie echte Probleme lösen.
> Eine Darstellung des DOM und des HTML-Markups, das darauf verweist. Von [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ Teste jetzt dein interaktives Terrarium! Öffne deine `index.html` Datei in eine
- **Geräteübergreifende Unterstützung**: Funktioniert auf Desktop und Mobilgeräten
- **Leistungsbewusstsein**: Keine Speicherlecks oder redundante Berechnungen
> Einige frühe Browser, via [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Wie Browser Webinhalte verarbeiten
@ -194,7 +194,7 @@ quadrantChart
Das Verständnis des Installationsprozesses von Erweiterungen hilft Ihnen, die Nutzererfahrung beim Installieren Ihrer Erweiterung besser zu verstehen. Der Installationsprozess ist bei modernen Browsern standardisiert, mit geringfügigen Unterschieden im Interface-Design.
> **Wichtig**: Aktivieren Sie beim Testen eigener Erweiterungen unbedingt den Entwicklermodus und erlauben Sie Erweiterungen aus anderen Stores.
@ -308,10 +308,10 @@ Dies folgt dem Prinzip der progressiven Offenbarung, das seit den Anfängen der
### Überblick über Erweiterungsansichten
**Setup-Ansicht** – Ersteinrichtung für Nutzer:
**Ergebnis-Ansicht** – Anzeige der CO2-Fußabdruckdaten:
> ⚠️ **Sicherheitsaspekt**: In produktiven Anwendungen birgt das Speichern von API-Schlüsseln im LocalStorage Sicherheitsrisiken, da JavaScript diese Daten auslesen kann. Für Lernzwecke ist dieser Ansatz in Ordnung, echte Anwendungen sollten sensible Zugangsdaten sicher serverseitig speichern.
@ -123,7 +123,7 @@ Um die Entwicklertools in Edge zu öffnen, klicken Sie auf die drei Punkte oben
Probieren wir das aus. Öffnen Sie eine Webseite (Microsoft.com eignet sich gut dafür) und klicken Sie auf die Schaltfläche „Aufzeichnen“. Laden Sie nun die Seite neu und beobachten Sie, wie der Profiler alles erfasst, was passiert. Wenn Sie die Aufnahme stoppen, sehen Sie eine detaillierte Aufschlüsselung, wie der Browser die Seite „scriptet“, „rendert“ und „zeichnet“. Das erinnert mich daran, wie die Missionskontrolle bei einem Raketenstart jedes System überwacht – Sie erhalten Echtzeitdaten, was wann passiert.
✅ Die [Microsoft-Dokumentation](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) bietet noch viele weitere Details, wenn Sie tiefer einsteigen möchten
@ -133,11 +133,11 @@ Wählen Sie Elemente des Profilzeitstrahls aus, um in Ereignisse hineinzuzoomen,
Erhalten Sie eine Momentaufnahme der Performance Ihrer Seite, indem Sie einen Abschnitt des Profilzeitstrahls auswählen und sich die Zusammenfassung anschauen:
✅ Lernen Sie Ihren Profiler kennen! Öffnen Sie die Entwicklertools auf dieser Seite und prüfen Sie, ob es Engpässe gibt. Welches Asset lädt am langsamsten? Welches am schnellsten?
> Bild von [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Um auf das Canvas-Element zu zeichnen, folgst du dem gleichen dreistufigen Prozess, der die Grundlage aller Canvas-Grafiken bildet. Nachdem du das ein paar Mal gemacht hast, geht es in Fleisch und Blut über:
@ -323,11 +323,11 @@ Du erstellst eine Webseite mit einem Canvas-Element. Es soll einen schwarzen Bil
- **Punktesystem**: Jedes zerstörte feindliche Schiff bringt 100 Punkte (runde Zahlen sind für Spieler leichter mental zu berechnen). Die Punktzahl wird unten links angezeigt.
- **Lebenszähler**: Dein Held startet mit drei Leben – ein Standard, der von frühen Arcade-Spielen etabliert wurde, um Herausforderung mit Spielbarkeit auszubalancieren. Jede Kollision mit einem Feind kostet ein Leben. Die verbleibenden Leben zeigen wir unten rechts mit Schiffs-Icons an .
- **Lebenszähler**: Dein Held startet mit drei Leben – ein Standard, der von frühen Arcade-Spielen etabliert wurde, um Herausforderung mit Spielbarkeit auszubalancieren. Jede Kollision mit einem Feind kostet ein Leben. Die verbleibenden Leben zeigen wir unten rechts mit Schiffs-Icons an .
Der Aufruf von `history.pushState` erzeugt neue Einträge im Browser-Verlauf. Du kannst das überprüfen, indem du den *Zurück-Button* im Browser gedrückt hältst – es wird so etwas angezeigt wie:
Wenn du mehrmals auf den Zurück-Button klickst, siehst du, dass sich die aktuelle URL ändert und der Verlauf aktualisiert wird, aber immer das gleiche Template bleibt angezeigt.
@ -292,7 +292,7 @@ Schauen wir uns an, was bei der einfachen Formularübergabe passiert:
2. Beobachte die Veränderungen in der Adresszeile deines Browsers
3. Sieh, wie die Seite neu lädt und Daten in der URL erscheinen
### Vergleich der HTTP-Methoden
@ -346,7 +346,7 @@ Konfigurieren wir dein Registrierungsformular, um mit der Backend-API sicher per
2. **Klicke** den Button „Konto erstellen“
3. **Beobachte** die Antwort des Servers in deinem Browser
**Das solltest du sehen:**
- **Browser leitet** zur API-Endpunkt-URL weiter
@ -609,7 +609,7 @@ async function register() {
3. **Klicke** auf "Account erstellen"
4. **Beobachte** die Konsolenmeldungen und das Nutzerfeedback
**Das solltest du sehen:**
- **Ladezustand** erscheint auf dem Absende-Button
@ -783,7 +783,7 @@ Verbessern wir dein Registrierungsformular mit robuster Validierung, die hervorr
3. **Probiere** Sonderzeichen im Benutzername-Feld
4. **Gib** eine negative Guthaben-Summe ein
**Das wirst du beobachten:**
- **Browser zeigt** native Validierungsnachrichten an
@ -943,7 +943,7 @@ Zeigen Sie eine Fehlermeldung im HTML an, wenn der Benutzer bereits existiert.
Hier ist ein Beispiel, wie die finale Anmeldeseite nach ein wenig Styling aussehen kann:
@ -187,7 +187,7 @@ Wie beim aufgeteilten Design der Titanic, das robust schien, bis mehrere Abteile
Anstatt uns im Kreis zu drehen, schaffen wir ein **zentralisiertes State-Management**. Stellen Sie sich das vor wie eine wirklich organisierte Person, die für alle wichtigen Dinge verantwortlich ist:
```mermaid
flowchart TD
@ -798,7 +798,7 @@ Diese Herausforderung hilft Ihnen, wie ein professioneller Entwickler zu denken,
Hier ein Beispielergebnis nach Abschluss der Aufgabe:
@ -112,7 +112,7 @@ Siehe die [Server-API-Dokumentation](../api/README.md) für:
**Erwartetes Ergebnis:**
Nach Abschluss dieser Aufgabe verfügt deine Banking-App über eine voll funktionsfähige "Transaktion hinzufügen"-Funktion, die professionell aussieht und funktioniert:
3. Füge eine beliebige GitHub-Repository-URL ein (probier diese: `https://github.com/microsoft/Web-Dev-For-Beginners`)
4. Drücke Enter und sieh zu, wie die Magie passiert!
@ -238,7 +238,7 @@ Perfekt, wenn du frisch mit VSCode.dev startest und ein bestimmtes Repository ö
Willst du dich wie ein Programmierzauberer fühlen? Probiere diese Tastenkombination: Ctrl+Shift+P (oder Cmd+Shift+P auf Mac), um die Kommando-Palette zu öffnen:
@ -78,7 +78,7 @@ Da VSCode.dev mindestens eine Datei im Repository zum Öffnen benötigt, erstell
4. **Schreibe** eine Commit-Botschaft: "Add initial HTML structure"
5. **Klicke** auf "Commit new file", um deine Änderungen zu speichern
**Folgendes erreicht diese initiale Einrichtung:**
- **Stellt** eine korrekte HTML5-Dokumentenstruktur mit semantischen Elementen bereit
@ -105,7 +105,7 @@ Jetzt, wo dein Repository-Grundgerüst steht, wechseln wir zu VSCode.dev für di
✅ **Erfolgsanzeige**: Du solltest deine Projektdateien in der Explorer-Seitenleiste sehen und `index.html` im Haupteditor-Bereich zur Bearbeitung verfügbar haben.
**Das siehst du in der Benutzeroberfläche:**
- **Explorer-Seitenleiste**: Zeigt deine Repository-Dateien und Ordnerstruktur an
@ -450,7 +450,7 @@ Erweiterungen verbessern dein Entwicklungserlebnis, indem sie Live-Preview-Funkt
**Sofortige Ergebnisse nach Installation:**
Sobald CodeSwing installiert ist, erscheint eine Live-Vorschau deiner Lebenslauf-Website im Editor. So siehst du genau, wie deine Seite während der Bearbeitung aussieht.
**Verständnis der erweiterten Oberfläche:**
- **Split-Ansicht**: Zeigt deinen Code auf einer Seite und die Live-Vorschau auf der anderen
## 🗺️ Deine Lernreise durch die KI-Anwendungsentwicklung
@ -189,7 +189,7 @@ mindmap
```
**Kernprinzip**: Die Entwicklung von KI-Anwendungen kombiniert traditionelle Webentwicklungsfähigkeiten mit KI-Dienstintegrationen und erschafft intelligente Anwendungen, die sich natürlich und reaktionsfreudig für Nutzer anfühlen.
**Das macht den Playground so nützlich:**
- **Teste** verschiedene KI-Modelle wie GPT-4o-mini, Claude und andere (alles kostenlos!)
@ -199,7 +199,7 @@ mindmap
Wenn du ein wenig gespielt hast, klick einfach auf den Reiter „Code“ und wähle deine Programmiersprache, um den Implementierungscode zu erhalten, den du brauchst.
## Einrichtung der Python-Backend-Integration
@ -2349,14 +2349,14 @@ Möchten Sie dieses Projekt in einer Cloud-Entwicklungsumgebung ausprobieren? Gi
- **Navigieren** Sie zum [Web Dev For Beginners repository](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Klicken** Sie oben rechts auf „Use this template“ (stellen Sie sicher, dass Sie bei GitHub angemeldet sind)
**Schritt 2: Codespaces starten**
- **Öffnen** Sie Ihr neu erstelltes Repository
- **Klicken** Sie den grünen „Code“-Button und wählen Sie „Codespaces“
- **Wählen** Sie „Create codespace on main“, um Ihre Entwicklungsumgebung zu starten
**Schritt 3: Konfiguration der Umgebung**
Sobald Ihr Codespace geladen ist, haben Sie Zugriff auf:
Jede Lektion beinhaltet eine Aufgabe, einen Wissenstest und eine Herausforderung, die dich beim Lernen von Themen wie:
@ -115,7 +115,7 @@ Folge diesen Schritten:
In deiner erstellten Kopie dieses Repositories, klicke auf die **Code**-Schaltfläche und wähle **Open with Codespaces**. Dies erstellt einen neuen Codespace für dich.
@ -42,10 +42,10 @@ Dieses Curriculum enthält importierbare Pakete für gängige LMS-Workflows.
- Moodle Cloud unterstützt Common Cartridge nur eingeschränkt. Bevorzugen Sie die oben genannte Moodle-Datei, die auch in Canvas hochgeladen werden kann.
- Überprüfen Sie nach dem Import die Module, Fälligkeitsdaten und Quiz-Einstellungen, um sie an Ihren Semesterplan anzupassen.
Σήμερα, θα εξερευνήσουμε τα απίστευτα εργαλεία που κάνουν την σύγχρονη ανάπτυξη ιστοσελίδων όχι μόνο δυνατή, αλλά και σοβαρά εθιστική. Μιλάω για τους ίδιους ακριβώς επεξεργαστές, προγράμματα περιήγησης και ροές εργασίας που χρησιμοποιούν οι προγραμματιστές στη Netflix, Spotify και το αγαπημένο σου indie studio εφαρμογών κάθε μέρα. Καινα το μέρος που θα σε κάνει να χορέψεις από χαρά: τα περισσότερα από αυτά τα επαγγελματικά, βιομηχανικά πρότυπα εργαλεία είναι εντελώς δωρεάν!
Θα κάνουμε αυτό το ταξίδι μαζί, βήμα-βήμα. Χωρίς βιασύνη, χωρίς πίεση – απλά εσύ, εγώ, και κάποια πολύ ωραία εργαλεία που σύντομα θα γίνουν οι νέοι σου καλύτεροι φίλοι!
> Σκιτσάκι από [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
@ -606,7 +606,7 @@ flowchart TD
✅ Ένας καλός τρόπος να βρείτε repos φιλικά για αρχάριους είναι να [αναζητήσετε με την ετικέτα 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
Υπάρχουν διάφοροι τρόποι γιανα αντιγράψετε κώδικα. Ένας τρόπος είναι να "κλωνοποιήσετε" τα περιεχόμενα του αποθετηρίου, χρησιμοποιώντας HTTPS, SSH ή το GitHub CLI (Διεπαφή Γραμμής Εντολών).
> Σημείωση σκίτσου από την [Tomomi Imura](https://twitter.com/girlie_mac)
Το HTML, ή HyperText Markup Language, είναι το θεμέλιο κάθε ιστότοπου που έχετε επισκεφθεί ποτέ. Σκεφτείτε το HTML ως το σκελετό που δίνει δομή στις ιστοσελίδες – καθορίζει πού πάει το περιεχόμενο, πώς οργανώνεται και τι αντιπροσωπεύει κάθε κομμάτι. Ενώ το CSS αργότερα θα "ντύσει" το HTML σας με χρώματα και διατάξεις, και η JavaScript θα του δώσει ζωή με διαδραστικότητα, το HTML παρέχει την ουσιαστική δομή που κάνει τα πάντα δυνατά.
@ -86,7 +86,7 @@ mindmap
4. Στο παράθυρο Explorer, κάνε κλικ στο εικονίδιο "New File"
5. Ονόμασε το αρχείο σου`index.html`
> Σχεδιοσημείωση από την [Τομομι Ιμούρα](https://twitter.com/girlie_mac)
Θυμάστε πώς φαινόταν το HTML terrarium σας αρκετά βασικό; Το CSS είναι το εργαλείο όπου μετατρέπουμε αυτήν την απλή δομή σε κάτι οπτικά ελκυστικό.
@ -202,7 +202,7 @@ body {
Ανοίξτε τα εργαλεία ανάπτυξης του περιηγητή σας (F12), πηγαίνετε στην καρτέλα Elements και επιθεωρήστε το στοιχείο `<h1>`. Θα δείτε ότι κληρονομεί την οικογένεια γραμματοσειράς από το `body`:
✅ **Δοκιμή Πειράματος**: Δοκιμάστε να ορίσετε άλλες κληρονομούμενες ιδιότητες στο `<body>` όπως `color`, `line-height` ή `text-align`. Τι συμβαίνει με τον τίτλο σας και άλλα στοιχεία;
@ -332,7 +332,7 @@ h1 {
**Αυτή είναι η δομή HTML για κάθε φυτό:**
```html
<divclass="plant-holder">
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/plant1.d18b18ffe73da18f.el.png" />
<imgclass="plant"alt="Decorative plant for terrarium"id="plant1"src="../../../../translated_images/el/plant1.d18b18ffe73da18f.png" />
</div>
```
@ -594,7 +594,7 @@ flowchart LR
Θα δημιουργήσετε διακριτικά φωτεινά σημεία που προσομοιώνουν πώς το φως αντανακλάται στις γυάλινες επιφάνειες. Αυτή η προσέγγιση είναι παρόμοια με το πώς οι ζωγράφοι της Αναγέννησης όπως ο Jan van Eyck χρησιμοποιούσαν το φως και την αντανάκλαση γιανα κάνουν το ζωγραφισμένο γυαλί να φαίνεται τρισδιάστατο. Αυτό στοχεύετε:
> Σχεδιάγραμμα από [Tomomi Imura](https://twitter.com/girlie_mac)
Καλώς ήρθατε σε μία από τις πιο συναρπαστικές πτυχές της ανάπτυξης ιστοσελίδων - το να κάνουμε τα πράγματα διαδραστικά! Το Document Object Model (DOM) είναι σαν μια γέφυρα ανάμεσα στο HTML και το JavaScript σας, και σήμερα θα το χρησιμοποιήσουμε γιανα δώσουμε ζωή στο terrarium σας. Όταν ο Tim Berners-Lee δημιούργησε τον πρώτο περιηγητή διαδικτύου, οραματίστηκε έναν ιστό όπου τα έγγραφα μπορούν να είναι δυναμικά και διαδραστικά - το DOM καθιστά αυτό το όραμα εφικτό.
> Αναπαράσταση του DOM και του HTML markup που το αναφέρεται. Από [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -146,7 +146,7 @@ flowchart LR
```
> 💡 **Κατανόηση των Closures**: Τα closures είναι ένα σημαντικό θέμα στην JavaScript, και πολλοί προγραμματιστές τα χρησιμοποιούν χρόνια πριν κατανοήσουν πλήρως όλες τις θεωρητικές πτυχές. Σήμερα, εστιάζουμε στην πρακτική εφαρμογή - θα δείτε τα closures να προκύπτουν φυσικά καθώς χτίζουμε τις διαδραστικές λειτουργίες μας. Η κατανόηση θα αναπτυχθεί καθώς βλέπετε πώς λύνουν πραγματικά προβλήματα.
> Αναπαράσταση του DOM και του HTML markup που το αναφέρεται. Από [Olfa Nasraoui](https://www.researchgate.net/publication/221417012_Profile-Based_Focused_Crawler_for_Social_Media-Sharing_Websites)
@ -591,7 +591,7 @@ function stopElementDrag() {
- **Διαλειτουργικότητα**: Λειτουργεί σε desktop και κινητά
- **Επίγνωση Απόδοσης**: Χωρίς διαρροές μνήμης ή περιττούς υπολογισμούς
Μια μικρή άσκηση drag and drop. Με λίγη HTML, JS και CSS, μπορείτε να δημιουργήσετε μια διαδικτυακή διεπαφή, να την διαμορφώσετε και να προσθέσετε αλληλεπίδραση.
> Σημειώσεις σκίτσου από τον [Wassim Chegham](https://dev.to/wassimchegham/ever-wondered-what-happens-when-you-type-in-a-url-in-an-address-bar-in-a-browser-3dob)
## Προ-Διάλεξη Κουίζ
@ -77,7 +77,7 @@ mindmap
✅ **Λίγη ιστορία**: Ο πρώτος περιηγητής ονομαζόταν 'WorldWideWeb' και δημιουργήθηκε από τον Sir Timothy Berners-Lee το 1990.
> Μερικοί πρώιμοι περιηγητές, μέσω της [Karen McGrane](https://www.slideshare.net/KMcGrane/week-4-ixd-history-personal-computing)
### Πώς οι Περιηγητές Επεξεργάζονται Περιεχόμενο Ιστού
@ -194,7 +194,7 @@ quadrantChart
Η κατανόηση της διαδικασίας εγκατάστασης επέκτασης σας βοηθά να προβλέψετε την εμπειρία του χρήστη όταν κάποιος εγκαθιστά την επέκτασή σας. Η διαδικασία εγκατάστασης είναι στάνταρ για τους σύγχρονους περιηγητές, με μικρές διαφοροποιήσεις στο σχεδιασμό διεπαφής.
> **Σημαντικό**: Φροντίστε να ενεργοποιήσετε τη λειτουργία προγραμματιστή και να επιτρέψετε επεκτάσεις από άλλα καταστήματα όταν δοκιμάζετε τις δικές σας επεκτάσεις.
@ -308,10 +308,10 @@ project-root/
### Επισκόπηση Προβολών Επέκτασης
**Προβολή Ρυθμίσεων** - Ρύθμιση χρήστη για πρώτη φορά:
**Προβολή Αποτελεσμάτων** - Εμφάνιση δεδομένων ανθρακικού αποτυπώματος:
> ⚠️ **Ασφαλής Εξέταση**: Σε παραγωγικές εφαρμογές, η αποθήκευση κλειδιών API στο LocalStorage εγκυμονεί κινδύνους ασφάλειας αφού ο JavaScript μπορεί να αποκτήσει πρόσβαση σε αυτά τα δεδομένα. Για εκπαιδευτικούς σκοπούς, αυτή η προσέγγιση λειτουργεί καλά, αλλά πραγματικές εφαρμογές πρέπει να χρησιμοποιούν ασφαλή αποθήκευση στον server για ευαίσθητα διαπιστευτήρια.
Ας το δοκιμάσουμε. Ανοίξτε μια ιστοσελίδα (το Microsoft.com λειτουργεί καλά για αυτό) και κάντε κλικ στο κουμπί 'Εγγραφή'. Τώρα ανανεώστε τη σελίδα και παρακολουθήστε τον προφίλ να καταγράφει όσα συμβαίνουν. Όταν σταματήσετε την εγγραφή, θα δείτε μια λεπτομερή ανάλυση του πώς ο περιηγητής «γράφει σενάρια», «αποδίδει» και «ζωγραφίζει» τη σελίδα. Μου θυμίζει πώς ο κεντρικός έλεγχος αποστολής παρακολουθεί κάθε σύστημα κατά την εκτόξευση πυραύλου - λαμβάνετε δεδομένα σε πραγματικό χρόνο για το τι συμβαίνει και πότε.
✅ Το [Τεκμηρίωση της Microsoft](https://docs.microsoft.com/microsoft-edge/devtools-guide/performance/?WT.mc_id=academic-77807-sagibbon) έχει πολλές περισσότερες λεπτομέρειες αν θέλετε να εμβαθύνετε
@ -133,11 +133,11 @@ flowchart LR
Πάρτε ένα στιγμιότυπο της απόδοσης της σελίδας σας επιλέγοντας ένα τμήμα της χρονογραμμής και κοιτάζοντας τον πίνακα περίληψης:
✅ Γνωρίστε τον προφίλ σας! Ανοίξτε τα εργαλεία προγραμματιστή σε αυτή την ιστοσελίδα και δείτε αν υπάρχουν στενώσεις. Ποιο είναι το πιο αργό στοιχείο στην φόρτωση; Το πιο γρήγορο;
Χρησιμοποιώντας το API C02 Signal της tmrow για την παρακολούθηση της χρήσης ηλεκτρικής ενέργειας, δημιουργήστε μια επέκταση περιηγητή ώστε να έχετε μια υπενθύμιση απευθείας στον περιηγητή σας σχετικά με το πόσο έντονη είναι η χρήση ηλεκτρικής ενέργειας στην περιοχή σας. Η χρήση αυτής της επέκτασης κατά περίπτωση θα σας βοηθήσει να λαμβάνετε αποφάσεις για τις δραστηριότητές σας βάσει αυτών των πληροφοριών.
Για να εγκαταστήσετε την επέκταση στον Edge, χρησιμοποιήστε το μενού με τις 'τρεις τελείες' στην επάνω δεξιά γωνία του περιηγητή γιανα βρείτε τον πίνακα Επεκτάσεων. Από εκεί, επιλέξτε 'Φόρτωση μη συσκευασμένης' γιανα φορτώσετε μια νέα επέκταση. Ανοίξτε τον φάκελο 'dist' όταν σας ζητηθεί και η επέκταση θα φορτωθεί. Για να τη χρησιμοποιήσετε, θα χρειαστείτε ένα API key για το API του CO2 Signal ([αποκτήστε ένα εδώ μέσω email](https://www.co2signal.com/) - εισάγετε το email σας στο πλαίσιο αυτής της σελίδας) και τον [κωδικό για την περιοχή σας](http://api.electricitymap.org/v3/zones) που αντιστοιχεί στον [Electricity Map](https://www.electricitymap.org/map) (στη Βοστώνη, για παράδειγμα, χρησιμοποιώ 'US-NEISO').
Μόλις εισαχθούν το API key και η περιοχή στη διεπαφή της επέκτασης, η χρωματιστή κουκκίδα στη γραμμή επέκτασης του περιηγητή θα πρέπει να αλλάξει ώστε να αντικατοπτρίζει τη χρήση ενέργειας της περιοχής σας και να σας δώσει μια ένδειξη για το ποιες δραστηριότητες με υψηλή κατανάλωση ενέργειας θα ήταν κατάλληλες να εκτελέσετε. Η ιδέα πίσω από αυτό το σύστημα 'κουκκίδας' μου δόθηκε από την επέκταση [Energy Lollipop](https://energylollipop.com/) για τις εκπομπές της Καλιφόρνιας.
Χρησιμοποιώντας το API σήματος CO2 της tmrow για την παρακολούθηση της χρήσης ηλεκτρικής ενέργειας, δημιουργήστε μια επέκταση προγράμματος περιήγησης ώστε να έχετε μια υπενθύμιση απευθείας στο πρόγραμμα περιήγησής σας σχετικά με την κατανάλωση ηλεκτρικής ενέργειας στην περιοχή σας. Η χρήση αυτής της ad hoc επέκτασης θα σας βοηθήσει να λαμβάνετε αποφάσεις για τις δραστηριότητές σας με βάση αυτές τις πληροφορίες.
Για να εγκαταστήσετε στον Edge, χρησιμοποιήστε το μενού με τις 'τρεις τελείες' στην επάνω δεξιά γωνία του προγράμματος περιήγησης γιανα βρείτε τον πίνακα Επεκτάσεις. Από εκεί, επιλέξτε 'Φόρτωση μη συσκευασμένης' γιανα φορτώσετε μια νέα επέκταση. Ανοίξτε τον φάκελο 'dist' όταν σας ζητηθεί και η επέκταση θα φορτωθεί. Για να τη χρησιμοποιήσετε, θα χρειαστείτε ένα API key για το API του CO2 Signal ([αποκτήστε ένα εδώ μέσω email](https://www.co2signal.com/) - εισάγετε το email σας στο πλαίσιο αυτής της σελίδας) και τον [κωδικό για την περιοχή σας](http://api.electricitymap.org/v3/zones) που αντιστοιχεί στον [Χάρτη Ηλεκτρικής Ενέργειας](https://www.electricitymap.org/map) (στη Βοστώνη, για παράδειγμα, χρησιμοποιώ 'US-NEISO').
Μόλις εισαχθεί το API key και η περιοχή στη διεπαφή της επέκτασης, το χρωματιστό σημείο στη γραμμή επέκτασης του προγράμματος περιήγησης θα πρέπει να αλλάξει ώστε να αντικατοπτρίζει τη χρήση ενέργειας της περιοχής σας και να σας δώσει μια ένδειξη για δραστηριότητες υψηλής κατανάλωσης ενέργειας που θα ήταν κατάλληλες για εσάς. Η ιδέα πίσω από αυτό το σύστημα "σημείων" μου δόθηκε από την [επέκταση Energy Lollipop](https://energylollipop.com/) για τις εκπομπές της Καλιφόρνιας.
Χρησιμοποιώντας το API C02 Signal της tmrow για την παρακολούθηση της κατανάλωσης ηλεκτρικής ενέργειας, δημιουργήστε μια επέκταση περιηγητή ώστε να έχετε μια υπενθύμιση απευθείας στον περιηγητή σας σχετικά με την κατανάλωση ηλεκτρικής ενέργειας στην περιοχή σας. Η χρήση αυτής της ειδικής επέκτασης θα σας βοηθήσει να κρίνετε τις δραστηριότητές σας με βάση αυτές τις πληροφορίες.
## Ξεκινώντας
@ -31,7 +31,7 @@ npm run build
Για να την εγκαταστήσετε στον Edge, χρησιμοποιήστε το μενού με τις 'τρεις τελείες' στην επάνω δεξιά γωνία του περιηγητή γιανα βρείτε τον πίνακα Επεκτάσεων. Από εκεί, επιλέξτε 'Φόρτωση αποσυμπιεσμένης επέκτασης' γιανα φορτώσετε μια νέα επέκταση. Ανοίξτε τον φάκελο 'dist' όταν σας ζητηθεί και η επέκταση θα φορτωθεί. Για να τη χρησιμοποιήσετε, θα χρειαστείτε ένα API key για το API του CO2 Signal ([αποκτήστε ένα εδώ μέσω email](https://www.co2signal.com/) - εισάγετε το email σας στο πεδίο αυτής της σελίδας) και τον [κωδικό για την περιοχή σας](http://api.electricitymap.org/v3/zones) που αντιστοιχεί στον [Χάρτη Ηλεκτρικής Ενέργειας](https://www.electricitymap.org/map) (για παράδειγμα, στη Βοστώνη χρησιμοποιώ τον 'US-NEISO').
Αφού εισάγετε το API key και την περιοχή στη διεπαφή της επέκτασης, η χρωματιστή κουκκίδα στη γραμμή επέκτασης του περιηγητή θα πρέπει να αλλάζει γιανα αντικατοπτρίζει την κατανάλωση ενέργειας της περιοχής σας και να σας δίνει μια ένδειξη για τις ενεργοβόρες δραστηριότητες που θα ήταν κατάλληλο να εκτελέσετε. Η ιδέα πίσω από αυτό το σύστημα 'κουκκίδων' μου δόθηκε από την [επέκταση Energy Lollipop](https://energylollipop.com/) για τις εκπομπές στην Καλιφόρνια.
Χρησιμοποιώντας το API CO2 Signal της tmrow για την παρακολούθηση της χρήσης ηλεκτρικής ενέργειας, δημιουργήθηκε μια επέκταση περιηγητή που σας υπενθυμίζει πόσο έντονη είναι η χρήση ηλεκτρικής ενέργειας στην περιοχή σας μέσω του περιηγητή σας. Η χρήση αυτής της επέκτασης μπορεί να σας βοηθήσει να λαμβάνετε αποφάσεις για τις δραστηριότητές σας με βάση αυτές τις πληροφορίες.
Για να εγκαταστήσετε στον Edge, χρησιμοποιήστε το μενού "τρεις τελείες" στην επάνω δεξιά γωνία του περιηγητή γιανα βρείτε το πάνελ επεκτάσεων. Από εκεί, επιλέξτε "Φόρτωση μη συσκευασμένης επέκτασης". Στο προτρεπτικό μήνυμα, ανοίξτε τον φάκελο 'dist' και η επέκταση θα φορτωθεί. Για να τη χρησιμοποιήσετε, θα χρειαστείτε ένα API key από το CO2 Signal ([λάβετε το μέσω email εδώ](https://www.co2signal.com/) - εισάγετε το email σας στο κουτί αυτής της σελίδας) και [τον κωδικό της περιοχής σας](http://api.electricitymap.org/v3/zones) από τον [χάρτη ηλεκτρικής ενέργειας](https://www.electricitymap.org/map) (για παράδειγμα, στη Βοστώνη, χρησιμοποιώ το 'US-NEISO').
Μόλις εισαχθούν το API key και η περιοχή στη διεπαφή της επέκτασης, η χρωματιστή κουκκίδα στη γραμμή επέκτασης του περιηγητή θα πρέπει να αλλάξει ώστε να αντικατοπτρίζει τη χρήση ενέργειας της περιοχής σας και να σας δώσει έναν δείκτη για το ποιες δραστηριότητες έντονης ενέργειας είναι κατάλληλες για την απόδοσή σας. Η ιδέα πίσω από αυτό το σύστημα "κουκκίδας" μου δόθηκε από την επέκταση [Energy Lollipop](https://energylollipop.com/) για τις εκπομπές της Καλιφόρνιας.
Θα χρησιμοποιηθεί το API Signal CO2 της tmrow για την παρακολούθηση της χρήσης ηλεκτρικής ενέργειας, ώστε να δημιουργηθεί μια επέκταση για το πρόγραμμα περιήγησης που θα παρέχει υπενθυμίσεις απευθείας στον περιηγητή σας σχετικά με το πόσο επιβαρυμένη είναι η χρήση ηλεκτρικής ενέργειας στην περιοχή σας. Η χρήση αυτής της ειδικής επέκτασης θα βοηθήσει στην αξιολόγηση των δραστηριοτήτων σας με βάση αυτές τις πληροφορίες.
## Ξεκινώντας
@ -31,7 +31,7 @@ npm run build
Για εγκατάσταση στον Edge, χρησιμοποιήστε το μενού "τρεις τελείες" στην επάνω δεξιά γωνία του προγράμματος περιήγησης γιανα βρείτε τον πίνακα Επεκτάσεις. Εάν δεν είναι ήδη ενεργοποιημένη, ενεργοποιήστε τη Λειτουργία προγραμματιστή (κάτω αριστερά). Επιλέξτε "Φόρτωση μη συμπιεσμένου" γιανα φορτώσετε μια νέα επέκταση. Ανοίξτε τον φάκελο "dist" στο prompt και η επέκταση θα φορτωθεί. Για να τη χρησιμοποιήσετε, θα χρειαστείτε ένα API key για το API του CO2 Signal (μπορείτε [να το αποκτήσετε μέσω email εδώ](https://www.co2signal.com/) - εισάγετε το email σας στο πεδίο αυτής της σελίδας) και τον [κωδικό για την περιοχή σας](http://api.electricitymap.org/v3/zones) που αντιστοιχεί στον [ηλεκτρικό χάρτη](https://www.electricitymap.org/map) (για παράδειγμα, στη Βοστώνη, "US-NEISO").
Μόλις εισαχθούν το API key και η περιοχή στη διεπαφή της επέκτασης, το χρωματιστό σημείο στη γραμμή της επέκτασης του προγράμματος περιήγησης θα πρέπει να αλλάξει γιανα αντικατοπτρίζει τη χρήση ενέργειας της περιοχής και να παρέχει μια ένδειξη για το ποιες δραστηριότητες υψηλής κατανάλωσης ενέργειας θα ήταν κατάλληλες να εκτελεστούν. Η ιδέα πίσω από αυτό το σύστημα "σημείων" έχει εμπνευστεί από την [επέκταση Energy Lollipop](https://energylollipop.com/) για τις εκπομπές της Καλιφόρνιας.
Χρησιμοποιώντας το API CO2 Signal της tmrow, θα δημιουργήσουμε μια επέκταση περιηγητή που εμφανίζει υπενθυμίσεις σχετικά με το πόση ενέργεια καταναλώνεται στην περιοχή σας. Αυτή η πληροφορία θα σας βοηθήσει να λαμβάνετε αποφάσεις για τις δραστηριότητές σας με βάση την κατανάλωση ενέργειας.
Για να την εγκαταστήσετε στον Edge, βρείτε το πάνελ "Επεκτάσεις" από το μενού με τις "τρεις τελείες" στην επάνω δεξιά γωνία του περιηγητή. Από εκεί, επιλέξτε "Load Unpacked" και φορτώστε τη νέα επέκταση. Όταν σας ζητηθεί, ανοίξτε τον φάκελο "dist" και η επέκταση θα φορτωθεί. Για να τη χρησιμοποιήσετε, θα χρειαστείτε ένα API Key για το CO2 Signal ([αποκτήστε ένα εδώ μέσω email](https://www.co2signal.com/) - εισάγετε το email σας στο πλαίσιο αυτής της σελίδας) και τον [κωδικό για την περιοχή σας](http://api.electricitymap.org/v3/zones) από τον [Electricity Map](https://www.electricitymap.org/map) (για παράδειγμα, για τη Βοστώνη χρησιμοποιείται το 'US-NEISO').
Αφού εισαγάγετε το API Key και την περιοχή στη διεπαφή της επέκτασης, μια χρωματιστή κουκκίδα θα εμφανιστεί στη γραμμή επέκτασης του περιηγητή σας. Η κουκκίδα αυτή θα αλλάζει χρώμα, αντικατοπτρίζοντας την κατανάλωση ενέργειας στην περιοχή σας, και θα σας βοηθά να αποφασίσετε ποιες δραστηριότητες που απαιτούν ενέργεια είναι κατάλληλες να πραγματοποιηθούν. Η ιδέα αυτού του "συστήματος κουκκίδας" προέρχεται από την επέκταση [Energy Lollipop](https://energylollipop.com/) για τις εκπομπές στην Καλιφόρνια.
Χρησιμοποιώντας το API CO2 Signal της tmrow για την παρακολούθηση της κατανάλωσης ηλεκτρικής ενέργειας, δημιουργήστε μια επέκταση περιηγητή ώστε να λαμβάνετε ειδοποιήσεις στον περιηγητή σας σχετικά με το πόσο έντονη είναι η κατανάλωση ηλεκτρικής ενέργειας στην περιοχή σας. Η χρήση αυτής της επέκτασης μπορεί να σας βοηθήσει να λαμβάνετε αποφάσεις για τις δραστηριότητές σας με βάση αυτές τις πληροφορίες.
## Ξεκινώντας
@ -31,7 +31,7 @@ npm run build
Για να την εγκαταστήσετε στον Edge, χρησιμοποιήστε το μενού με τις 'τρεις τελείες' στην επάνω δεξιά γωνία του περιηγητή γιανα βρείτε τον πίνακα Επεκτάσεων. Από εκεί, επιλέξτε 'Load Unpacked' γιανα φορτώσετε τη νέα επέκταση. Ανοίξτε τον φάκελο 'dist' όταν σας ζητηθεί και η επέκταση θα φορτωθεί. Για να τη χρησιμοποιήσετε, θα χρειαστείτε ένα API key για το API CO2 Signal ([αποκτήστε ένα εδώ μέσω email](https://www.co2signal.com/) - εισάγετε το email σας στο πεδίο της σελίδας) και [έναν κωδικό για την περιοχή σας](http://api.electricitymap.org/v3/zones) που αντιστοιχεί στον [Χάρτη Ηλεκτρικής Ενέργειας](https://www.electricitymap.org/map) (για παράδειγμα, στη Βοστώνη, χρησιμοποιώ το 'US-NEISO').
Αφού εισαγάγετε το API key και την περιοχή στη διεπαφή της επέκτασης, η χρωματιστή κουκκίδα στη γραμμή της επέκτασης του περιηγητή θα αλλάζει γιανα αντικατοπτρίζει την κατανάλωση ενέργειας της περιοχής σας και θα σας δίνει ενδείξεις για το ποιες δραστηριότητες είναι κατάλληλες να κάνετε. Η ιδέα πίσω από αυτό το σύστημα 'κουκκίδων' μου δόθηκε από την [ενεργειακή επέκταση περιηγητή Lollipop](https://energylollipop.com/) για τις εκπομπές στην Καλιφόρνια.
Χρησιμοποιώντας το API C02 Signal της tmrow για την παρακολούθηση της κατανάλωσης ηλεκτρικής ενέργειας, δημιουργήστε μια επέκταση περιηγητή ώστε να έχετε μια υπενθύμιση απευθείας στον περιηγητή σας σχετικά με το πόσο βαριά είναι η κατανάλωση ηλεκτρικής ενέργειας στην περιοχή σας. Η περιστασιακή χρήση αυτής της επέκτασης θα σας βοηθήσει να λαμβάνετε αποφάσεις για τις δραστηριότητές σας με βάση αυτές τις πληροφορίες.
Για να εγκαταστήσετε την επέκταση στον Edge, χρησιμοποιήστε το μενού με τις 'τρεις τελείες' στην επάνω δεξιά γωνία του περιηγητή γιανα βρείτε τον πίνακα Επεκτάσεων. Από εκεί, επιλέξτε 'Φόρτωση μη συσκευασμένης' γιανα φορτώσετε μια νέα επέκταση. Ανοίξτε τον φάκελο 'dist' όταν σας ζητηθεί και η επέκταση θα φορτωθεί. Για να τη χρησιμοποιήσετε, θα χρειαστείτε ένα API key για το API του CO2 Signal ([αποκτήστε ένα εδώ μέσω email](https://www.co2signal.com/) - εισάγετε το email σας στο πλαίσιο αυτής της σελίδας) και τον [κωδικό για την περιοχή σας](http://api.electricitymap.org/v3/zones) που αντιστοιχεί στον [Χάρτη Ηλεκτρικής Ενέργειας](https://www.electricitymap.org/map) (για παράδειγμα, στη Βοστώνη χρησιμοποιώ τον 'US-NEISO').
Μόλις εισάγετε το API key και την περιοχή στη διεπαφή της επέκτασης, η χρωματιστή κουκκίδα στη γραμμή εργαλείων της επέκτασης του περιηγητή θα αλλάξει γιανα αντικατοπτρίζει την κατανάλωση ενέργειας της περιοχής σας και να σας δώσει μια ένδειξη για το ποιες δραστηριότητες με υψηλή κατανάλωση ενέργειας είναι κατάλληλες να εκτελέσετε. Η ιδέα πίσω από αυτό το σύστημα 'κουκκίδας' μου δόθηκε από την [επέκταση Energy Lollipop](https://energylollipop.com/) για τις εκπομπές της Καλιφόρνια.
> Εικόνα από [MDN](https://developer.mozilla.org/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes)
Για να σχεδιάσετε στο στοιχείο καμβά, θα ακολουθήσετε την ίδια διαδικασία τριών βημάτων που αποτελεί τη βάση όλων των γραφικών καμβά. Μόλις το κάνετε μερικές φορές, γίνεται δεύτερη φύση:
- **Σύστημα σκοραρίσματος**: Κάθε εχθρικό πλοίο που καταστρέφεται δίνει 100 πόντους (οι στρογγυλοί αριθμοί είναι πιο εύκολοι για τον παίκτη να υπολογίζει νοητικά). Το σκορ εμφανίζεται στην κάτω αριστερή γωνία.
- **Μετρητής ζωών**: Ο ήρωάς σου ξεκινά με τρεις ζωές - ένα πρότυπο που καθιερώθηκε από τα πρώιμα arcade παιχνίδια γιανα ισορροπήσει την πρόκληση με το παικτικό ενδιαφέρον. Κάθε σύγκρουση με εχθρό κοστίζει μια ζωή. Οι εναπομείνασες ζωές εμφανίζονται κάτω δεξιά με εικονίδια πλοίων .
- **Μετρητής ζωών**: Ο ήρωάς σου ξεκινά με τρεις ζωές - ένα πρότυπο που καθιερώθηκε από τα πρώιμα arcade παιχνίδια γιανα ισορροπήσει την πρόκληση με το παικτικό ενδιαφέρον. Κάθε σύγκρουση με εχθρό κοστίζει μια ζωή. Οι εναπομείνασες ζωές εμφανίζονται κάτω δεξιά με εικονίδια πλοίων .
Η χρήση του `history.pushState` δημιουργεί νέες καταχωρήσεις στο ιστορικό πλοήγησης. Μπορείτε να το ελέγξετε κρατώντας πατημένο το *κουμπί πίσω* του προγράμματος περιήγησης, θα εμφανιστεί κάτι παρόμοιο με αυτό:
Αν δοκιμάσετε να πατήσετε το κουμπί πίσω μερικές φορές, θα δείτε ότι αλλάζει το τρέχον URL και το ιστορικό ενημερώνεται, αλλά το ίδιο πρότυπο συνεχίζει να εμφανίζεται.
2. Παρατηρήστε τις αλλαγές στη γραμμή διευθύνσεων του browser
3. Δείτε πώς η σελίδα φορτώνει ξανά και εμφανίζονται δεδομένα στο URL
### Σύγκριση Μεθόδων HTTP
@ -346,7 +346,7 @@ graph TD
2. **Κάντε κλικ** στο κουμπί "Δημιουργία Λογαριασμού"
3. **Παρατηρήστε** την απόκριση του διακομιστή στον browser σας
**Τι πρέπει να δείτε:**
- **Ο browser ανακατευθύνει** στη διεύθυνση endpoint του API
@ -609,7 +609,7 @@ async function register() {
3. **Πατήστε** "Create Account"
4. **Παρατηρήστε** τα μηνύματα της κονσόλας και το feedback προς το χρήστη
**Τι θα δείτε:**
- **Κατάσταση φόρτωσης** εμφανίζεται στο κουμπί υποβολής
@ -783,7 +783,7 @@ input:focus:invalid {
3. **Δοκιμάστε** ειδικούς χαρακτήρες στο πεδίο ονόματος χρήστη
4. **Πληκτρολογήστε** αρνητικό ποσό υπολοίπου
Αντί να κυνηγάμε την ουρά μας, θα δημιουργήσουμε ένα **κεντρικό σύστημα διαχείρισης κατάστασης**. Σκεφτείτε το σαννα έχετε ένα πραγματικά οργανωμένο άτομο υπεύθυνο για όλα τα σημαντικά:
```mermaid
flowchart TD
@ -798,7 +798,7 @@ timeline
Εδώ ένα παράδειγμα αποτελέσματος μετά την ολοκλήρωση της ανάθεσης:
Μετά την ολοκλήρωση αυτής της εργασίας, η τραπεζική σας εφαρμογή θα πρέπει να διαθέτει ένα πλήρως λειτουργικό χαρακτηριστικό "Προσθήκη Συναλλαγής" που φαίνεται και λειτουργεί επαγγελματικά:
Σε αυτό το έργο, θα μάθετε πώς να δημιουργήσετε μια φανταστική τράπεζα. Αυτά τα μαθήματα περιλαμβάνουν οδηγίες για το πώς να σχεδιάσετε μια web εφαρμογή και να παρέχετε διαδρομές, να δημιουργήσετε φόρμες, να διαχειριστείτε την κατάσταση (state) και να ανακτήσετε δεδομένα από ένα API από το οποίο μπορείτε να αντλήσετε τα δεδομένα της τράπεζας.
4. Πατήστε Enter και δείτε τη μαγεία να συμβαίνει!
@ -238,7 +238,7 @@ flowchart TB
Θέλετε να νιώσετε σαν μάγος της κωδικοποίησης; Δοκιμάστε αυτήν τη συντόμευση πληκτρολογίου: Ctrl+Shift+P (ή Cmd+Shift+P στο Mac) γιανα ανοίξετε το Command Palette:
4. **Γράψτε** ένα μήνυμα commit: "Προσθήκη αρχικής δομής HTML"
5. **Κάντε κλικ** στο "Commit new file" γιανα αποθηκεύσετε τις αλλαγές σας
**Τι επιτυγχάνει αυτή η αρχική ρύθμιση:**
- **Καθιερώνει** σωστή δομή εγγράφου HTML5 με στοιχεία με νόημα
@ -104,7 +104,7 @@ CO_OP_TRANSLATOR_METADATA:
✅ **Δείκτης επιτυχίας**: Θα πρέπει να δείτε τα αρχεία του project σας στην πλαϊνή μπάρα του Explorer και το `index.html` διαθέσιμο για επεξεργασία στην κύρια περιοχή του editor.
**Τι θα δείτε στη διεπαφή:**
- **Πλαϊνή μπάρα Explorer**: **Εμφανίζει** τα αρχεία και τη δομή φακέλων του αποθετηρίου σας
@ -448,7 +448,7 @@ li:before {
**Άμεσα αποτελέσματα μετά την εγκατάσταση:**
Μόλις εγκατασταθεί το CodeSwing, θα δείτε μια ζωντανή προεπισκόπηση της ιστοσελίδας βιογραφικού σας να εμφανίζεται στον editor. Αυτό σας επιτρέπει να δείτε ακριβώς πώς φαίνεται η ιστοσελίδα σας καθώς κάνετε αλλαγές.
## 🗺️ Το Ταξίδι Μάθησής σας Μέσα από την Ανάπτυξη Εφαρμογών AI
@ -189,7 +189,7 @@ mindmap
```
**Κεντρική Αρχή**: Η ανάπτυξη εφαρμογών AI συνδυάζει τις παραδοσιακές δεξιότητες ανάπτυξης web με την ολοκλήρωση υπηρεσιών AI, δημιουργώντας έξυπνες εφαρμογές που φαίνονται φυσικές και ανταποκρίνονται στους χρήστες.
**Τι κάνει το playground τόσο χρήσιμο:**
- **Δοκιμάστε** διαφορετικά μοντέλα AI όπως GPT-4o-mini, Claude και άλλα (όλα δωρεάν!)
@ -199,7 +199,7 @@ mindmap
Μόλις παίξετε λίγο, απλώς επιλέξτε την καρτέλα "Code" και διαλέξτε τη γλώσσα προγραμματισμού σας γιανα πάρετε τον κώδικα υλοποίησης που χρειάζεστε.
## Ρύθμιση της Ολοκλήρωσης Backend με Python
@ -2353,14 +2353,14 @@ mindmap
- **Πλοηγηθείτε** στο [Web Dev For Beginners αποθετήριο](https://github.com/microsoft/Web-Dev-For-Beginners)
- **Κάντε κλικ** στο "Use this template" στην πάνω δεξιά γωνία (βεβαιωθείτε ότι έχετε συνδεθεί στο GitHub)
**Βήμα 2: Εκκίνηση Codespaces**
- **Ανοίξτε** το νεοδημιουργημένο αποθετήριο σας
- **Κάντε κλικ** στο πράσινο κουμπί "Code" και επιλέξτε "Codespaces"
- **Επιλέξτε** "Create codespace on main" γιανα ξεκινήσετε το αναπτυξιακό σας περιβάλλον
**Βήμα 3: Ρύθμιση Περιβάλλοντος**
Μόλις φορτώσει ο Codespace σας, θα έχετε πρόσβαση σε:
Κάθε μάθημα περιλαμβάνει μια εργασία για ολοκλήρωση, έναν έλεγχο γνώσεων και μια πρόκληση γιανα σας καθοδηγήσει στη μάθηση θεμάτων όπως:
@ -115,7 +115,7 @@ CO_OP_TRANSLATOR_METADATA:
Στο αντίγραφό σας αυτού του αποθετηρίου που δημιουργήσατε, κάντε κλικ στο κουμπί **Code** και επιλέξτε **Open with Codespaces**. Αυτό θα δημιουργήσει ένα νέο Codespace γιανα εργαστείτε μέσα.
- Το Moodle Cloud έχει περιορισμένη υποστήριξη Common Cartridge. Προτιμήστε το αρχείο Moodle παραπάνω, το οποίο μπορεί επίσης να μεταφορτωθεί στο Canvas.
- Μετά την εισαγωγή, ελέγξτε τα modules, τις ημερομηνίες λήξης και τις ρυθμίσεις κουίζ ώστε να ταιριάζουν με το πρόγραμμα του εξαμήνου σας.
This lesson introduces the fundamentals of programming languages. The topics discussed here are relevant to most modern programming languages today. In the 'Tools of the Trade' section, you'll explore software that can assist you as a developer.
This lesson introduces the basics of GitHub, a platform for hosting and managing changes to your code.
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
## Pre-Lecture Quiz
@ -289,7 +289,7 @@ First, find a repository (or **repo**) on GitHub that interests you and to which
✅ A great way to find 'beginner-friendly' repositories is to [search by the tag 'good-first-issue'](https://github.blog/2020-01-22-browse-good-first-issues-to-start-contributing-to-open-source/).
There are several ways to copy code. One way is to "clone" the repository’s contents using HTTPS, SSH, or the GitHub CLI (Command Line Interface).
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
localizeflow[bot]
1 week ago