Smaapirk paa resten

03-css/01-selector.md

@@ -82,6 +82,6 @@ a[attributt='verdi'] {
 -   Endre font, farge og skriftstørrelse på teller-verdien.
 -   Endre størrelse, bakgrunnsfarge, border/ramme og tekstfarge på knappene.
 
-<!-- ## Bonus:
+## Bonus:
 
-Øv deg på selectorer i spillet [CSS Diner](https://flukeout.github.io/) -->
+Øv deg på selectorer i spillet [CSS Diner](https://flukeout.github.io/)

03-css/05-layout.md

@@ -1,15 +1,10 @@
 # Avansert layout
 
 > **MDN**:
+> -   [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout)
+> -   [Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
 
--   [Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout)
--   [Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
-
-Hvis man synes `position: relative` blir for mye knot og at `position: static` blir for kjedelig, kan man knalle til med skikkelig avansert layout á la 2017.
-
-> Layout er et stort nok tema til at vi kunne ha brukt hele dagen på en egen [layoutworkshop](https://github.com/kentandersen/layout-workshop). Ta gjerne en titt på den - slidene er også fine for eksempler på hvordan diverse css-properties oppfører seg.
-
-Innenfor layout har det vokst frem mange spennende muligheter, og flexbox og CSS grid er anbefalt når man skal løse avansert layout på en utviklervennlig måte. Vi mener at en av de beste måtene å lære seg hvordan de funker, å ta dem i bruk.
+Hvis man synes `position: relative` blir for mye knot og at `position: static` blir for kjedelig, kan man knalle til med skikkelig avansert layout-syntaks som har kommet de siste årene. Innenfor layout har det vokst frem mange spennende muligheter, og flexbox og CSS grid er anbefalt når man skal løse avansert layout på en utviklervennlig måte. Vi mener at en av de beste måtene å lære seg hvordan de funker, er å ta dem i bruk.
 
 ## Oppgaver
 

03-css/06-responsive.md

@@ -1,11 +1,10 @@
 # Responsivt design
 
 > **MDN**:
+> -   [Using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
+> -   [Values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units)
 
--   [Using media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
--   [Values and units](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Values_and_units)
-
-Når vi jobber med web, må vi tilpasse oss det faktum at brukerne våre kan aksessere siden vår fra en mengde forskjellige skjermstørrelser. Det er viktig at vi tilpasser oss dette, og lager gode sider både på desktop og mobile enheter, og som skalerer godt. Det gjelder også for brukere som zoomer inn på siden.
+Når vi jobber med web, må vi tilpasse oss det faktum at brukerne våre kan aksessere siden vår fra en mengde forskjellige skjermstørrelser. Det er viktig at vi tenker på dette og lager gode sider både på desktop og mobile enheter som skalerer bra. Det gjelder også for brukere som zoomer inn på siden.
 
 ## Media queries
 

03-css/cover.md

@@ -1,12 +1,11 @@
 # CSS
 
 > -   [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS) er som vanlig din beste venn. Søker du på "søkeord" + "CSS" + "MDN" på google finner du som regel frem til gode svar (men husk å bruke googles søkefelt, ikke det interne på MDN...).
-
--   [caniuse.com](http://caniuse.com/) gir deg oversikt over nettleserstøtte for de forskjellige reglene som finnes i CSS.
--   På Difis nettsider for universell utforming finner du blant annet regelverk for [bruk av farger](https://uu.difi.no/krav-og-regelverk/losningsforslag-web/bruk-av-farger) og [krav til kontrast](https://uu.difi.no/krav-og-regelverk/losningsforslag-web/kontrast).
--   Når du vil sjekke om to farger har tilstrekkelig kontrast for UU-kravene kan du bruke [denne kontrastkalkulatoren](http://leaverou.github.io/contrast-ratio/).
--   Er du usikker på hvilken av to regler som prioriteres? Sjekk ut denne [spesifisitetskalkulatoren](https://specificity.keegan.st/).
--   [Specifics on CSS Specificity](https://css-tricks.com/specifics-on-css-specificity/)
+> -   [caniuse.com](http://caniuse.com/) gir deg oversikt over nettleserstøtte for de forskjellige reglene som finnes i CSS.
+> -   På Difis nettsider for universell utforming finner du blant annet regelverk for [bruk av farger](https://uu.difi.no/krav-og-regelverk/losningsforslag-web/bruk-av-farger) og [krav til kontrast](https://uu.difi.no/krav-og-regelverk/losningsforslag-web/kontrast).
+> -   Når du vil sjekke om to farger har tilstrekkelig kontrast for UU-kravene kan du bruke [denne kontrastkalkulatoren](http://leaverou.github.io/contrast-ratio/).
+> -   Er du usikker på hvilken av to regler som prioriteres? Sjekk ut denne [spesifisitetskalkulatoren](https://specificity.keegan.st/).
+> -   [Specifics on CSS Specificity](https://css-tricks.com/specifics-on-css-specificity/)
 
 Cascading Style Sheets, eller CSS, tar seg av stylingen av HTML. Man kan blant annet definere hvordan elementene skal presenteres på skjermen, og kan spesifisere egne regler ved forskjellige skjermbredder, ved utskrift, og når de blir interagert med.
 
@@ -52,6 +51,6 @@ body {
 }
 ```
 
-Iblant kan CSS føles unødvendig knotete å jobbe med, spesielt når man jobber med ukjente mengder legacy-CSS-kode eller når man prøver å få en stilig animasjon til å fungere i IE10. Andre ganger kan du juble av følelsen av å lage noe innmari stilig uten å behøve JavaScript! Når du skal jobbe med CSS handler det om å holde tungen rett i munnen og bruke DevTools for alt det er verdt.
+Iblant kan CSS føles unødvendig knotete å jobbe med, spesielt når man jobber med ukjente mengder legacy-CSS eller når man prøver å få en stilig animasjon til å fungere i IE10. Andre ganger kan du juble av følelsen av å lage noe innmari kult uten å behøve JavaScript! Når du skal jobbe med CSS handler det om å holde tungen rett i munnen og bruke DevTools for alt det er verdt.
 
 ![Family Guy CSS](../resources/css-family-guy.gif)

04-universell-utforming/cover.md

@@ -1,17 +1,15 @@
 # Universell utforming
 
 > **DIFI**:
-
--   [Standarden for UU (WCAG 2.0)](https://uu.difi.no/krav-og-regelverk/wcag-20-standarden)
--   [Veiledning og løsningsforslag for å følge WCAG 2.0](https://uu.difi.no/krav-og-regelverk/losningsforslag-web)
+> -   [Standarden for UU (WCAG 2.0)](https://uu.difi.no/krav-og-regelverk/wcag-20-standarden)
+> -   [Veiledning og løsningsforslag for å følge WCAG 2.0](https://uu.difi.no/krav-og-regelverk/losningsforslag-web)
 
 > **Andre ressurser**:
-
--   [MDN: WAI-ARIA basics ](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics)
--   [Videokurs: hvordan bygge UU-vennlige web apps](https://egghead.io/courses/start-building-accessible-web-applications-today)
--   [Kom igang med voiceover](https://bocoup.com/blog/getting-started-with-voiceover-accessibility)
--   [The A11y Project](http://a11yproject.com/)
--   [Bloggpost om hvordan man tester UU](http://open.bekk.no/#!hvordan-tester-man-universell-utforming)
+> -   [MDN: WAI-ARIA basics ](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/WAI-ARIA_basics)
+> -   [Videokurs: hvordan bygge UU-vennlige web apps](https://egghead.io/courses/start-building-accessible-web-applications-today)
+> -   [Kom igang med voiceover](https://bocoup.com/blog/getting-started-with-voiceover-accessibility)
+> -   [The A11y Project](http://a11yproject.com/)
+> -   [Bloggpost om hvordan man tester UU](http://open.bekk.no/#!hvordan-tester-man-universell-utforming)
 
 Det er viktig at vi lager nettsider som er universelt utformet. Ikke bare fordi det er [lovpålagt](https://www.difi.no/fagomrader-og-tjenester/universell-utforming), men fordi det gjør brukeropplevelsen til alle som bruker tjenesten din bedre. Du har kanskje scrollet nedover facebookfeeden din på t-banen og sett en video, selv om du ikke har med telefoner, fordi den har undertekster? Eller bare hatt en hånd tilgjengelig mens du sitter på pcen, men har brukt tab til å navigere deg gjennom siden? [Semantisk HTML](/02-html/03-semantikk.md) som vi beskrev i kapittelet om HTML, er viktig for å gjøre en nettside tilgjengelig for flere brukere, fordi det introduserer mening til elementene vi bygger nettsidene våre med, i tillegg til presentasjon.
 
@@ -27,7 +25,7 @@ Denne [videoen](https://egghead.io/lessons/html-5-intro-to-aria) gir en fin intr
 
 #### Husk
 
-> Selv om WAI-ARIA er veldig nyttig, er det viktig å huske på at man bare bør bruke det når det er nødvendig. Du bør alltid bruke innebygde semantiske HTML-elementer for å uttrykke semantikk, men hvis det ikke er mulig å bruke HTML-semantikk, f.eks. hvis du lager noe komplekst som ikke kan lages med enkle HTML-elementer, er WAI-ARIA et verdifullt tilskudd for å skape tilgjengelig kode.
+> Selv om WAI-ARIA er veldig nyttig, er det viktig bare bruke det når det er nødvendig. Du bør alltid utnytte innebygde semantiske HTML-elementer for å uttrykke semantikk, men hvis det ikke er mulig å bruke HTML-semantikk, f.eks. hvis du lager noe komplekst som ikke kan lages med enkle HTML-elementer, er WAI-ARIA et verdifullt tilskudd for å skape tilgjengelig kode.
 
 ## Oppgaver
 

05-javascript/01-variabler.md

@@ -1,9 +1,8 @@
 # Variabler
 
 > **MDN**
-
--   [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
--   [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)
+> -   [`let`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let)
+> -   [`const`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/const)
 
 JavaScript er dynamisk typet, det vil si at vi ikke definerer hvilken type (int, boolean, string) en variabel er, slik man gjør i språk som Java og C#. Typer bestemmes underveis når et program kjøres, noe som også betyr at den samme variabelen kan bli satt til flere forskjellige verdier og dermed ha hatt flere typer i løpet av kjøringen.
 
@@ -15,8 +14,7 @@ let b = 1;
 const c = 1;
 ```
 
-`const` brukes om alle konstanter som ikke skal endre seg senere. Dette gjør det lettere for deg selv og andre utviklere å lettere forstå
-koden din senere. Resten av variablene burde deklareres med `let`, som indikerer at innholdet kan endre seg over tid.
+`const` brukes om alle konstanter som ikke skal endre seg senere. Resten av variablene burde deklareres med `let`, som indikerer at innholdet kan endre seg over tid.
 
 **OBS!** Glemmer du å deklarere en variabel med `var`, `let` eller `const`, vil variabelen være global.
 

05-javascript/02-typer.md

@@ -1,10 +1,9 @@
 # Typer og operatorer
 
 > **MDN**:
-
--   [Data types and data structures ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures)
--   [Expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators)
--   [Destructuring assignment](The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.)
+> -   [Data types and data structures ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures)
+> -   [Expressions and operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators)
+> -   [Destructuring assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
 
 JavaScript har syv datatyper:
 
@@ -47,12 +46,12 @@ const obj = {
     navn: 'olav',
 };
 
-obj.key1; // 'value1'
+obj.key1;    // 'value1'
 obj['key2']; // 13
-obj.key3; // undefined
+obj.key3;    // undefined
 
 delete obj.key1;
-obj.key1; // undefined
+obj.key1;    // undefined
 ```
 
 I JS kan man bare slenge på og ta bort et key-value-par som man ønsker, runtime. Dette skiller seg ganske mye fra kompilerte språk som feks Java, hvor man typisk først må lage en klasse og definert at objekter av denne klassen vil ha et sett med attributter. Vi kan sette verdier på tre måter: når vi initialiserer objektet, og ved å aksessere gjennom nøkler. Dersom vi bruker en nøkkel som ikke finnes i objektet fra før, vil det legges til:
@@ -66,11 +65,11 @@ bil.merke = 'Toyota';
 bil['år'] = '1994';
 ```
 
-Denne fleksibiliteten i JavaScript gjør det lett å referere til felter som ikke finnes og kan dermed skape trøbbel.
+Denne fleksibiliteten i JavaScript gjør det lett å referere til felter som ikke finnes, noe som raskt kan skape trøbbel. Husk også at slike feil ikke fanges opp før de eksekveres i nettleseren, med mindre vi bruker verktøy som legger til kompilering med typesjekk.
 
 ## Truthy and falsy
 
-På MDN sine sider finner dere dokumentasjon for alt av operatorer som finnes i JS. Men operatorene for sammenlikning er verdt litt ekstra oppmerksomhet, fordi JS i en boolsk kontekst kan sjekke om en verdi er [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) eller [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy). Hvis man i Java sjekker om to ting er like med `==`, er det en strikt likhetssjekk. I JavaScript, derimot, kan uttrykket bli evaluert til truthy og passere i en if-sjekk der vi egentlig forventer å få `false` tilbake. Derfor bør man i sammenlikninger bruke strict equal og strict not equal-operatorene `===` og `!==` for å unngå logiske feil under kjøring.
+På MDN sine sider finner dere dokumentasjon for alt av operatorer som finnes i Javascript. Men operatorene for sammenlikning er verdt litt ekstra oppmerksomhet, fordi JS i en boolsk kontekst kan sjekke om en verdi er [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) eller [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy). Hvis man i Java sjekker om to ting er like med `==`, er det en strikt likhetssjekk. I JavaScript, derimot, kan uttrykket bli evaluert til truthy og passere i en if-sjekk der vi egentlig forventer å få `false` tilbake. Derfor bør man i sammenlikninger bruke strict equal og strict not equal-operatorene `===` og `!==` for å unngå logiske feil under kjøring.
 
 ```js
 // Evaluerer til true

05-javascript/05-listeoperasjoner.md

@@ -1,16 +1,15 @@
 # Listeoperasjoner
 
 > **MDN**:
-
--   [Oversikt over alle listeoperasjoner](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
--   [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map?v=control)
--   [`reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce?v=control)
--   [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter?v=control)
--   [Spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)
--   [Destructuring assignment](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
+> -   [Oversikt over alle listeoperasjoner](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
+> -   [`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map?v=control)
+> -   [`reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce?v=control)
+> -   [`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter?v=control)
+> -   [Spread operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator)
+> -   [Destructuring assignment](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)
 
 Fra skolebenken er vi veldig vant med å bruke for-loops når vi ønsker å modifisere lister.
-I JavaScript har vi en del innebygde listeoperasjoner som er gode å lese, og som vi anbefaler å bruke i stedet for å skrive en egen listeiterasjon. Enkelte av disse er også funksjonelle - det vil si, endrer ikke den opprinnelige listen du kaller listeoperasjonen på, men returnerer en ny liste. Det er ofte en fordel å bruke funksjonelle prosedyrer, fordi de ikke har [sideeffekter](https://en.wikipedia.org/wiki/Side_effect_(computer_science) og kan gjøre programmet ditt forutsigbart og mulig å teste. Under har vi lagt inn eksempler på noen funksjonelle listeoperasjoner som er fine å kjenne til, men det finnes mange flere i MDN sin oversikt over listeoperasjoner som er praktiske å bruke i ulike situasjoner i stedet for loops.
+I JavaScript har vi en del innebygde listeoperasjoner som er gode å lese, og som vi anbefaler å bruke i stedet for å skrive en egen listeiterasjon. Enkelte av disse er også funksjonelle - det vil si, endrer ikke den opprinnelige listen du kaller listeoperasjonen på, men returnerer en ny liste. Det er ofte en fordel å bruke funksjonelle prosedyrer, fordi de ikke har [sideeffekter](https://en.wikipedia.org/wiki/Side_effect_(computer_science)) og kan gjøre programmet ditt forutsigbart og mulig å teste. Under har vi lagt inn eksempler på noen funksjonelle listeoperasjoner som er fine å kjenne til, men det finnes mange flere i MDN sin oversikt over listeoperasjoner som er praktiske å bruke i ulike situasjoner i stedet for loops.
 
 ## Map
 

05-javascript/07-dom-apiet.md

@@ -1,8 +1,7 @@
 # DOM-apiet
 
 > **MDN**:
-
--   [Oversikt over DOM- og HTML-interfaces](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
+> -   [Oversikt over DOM- og HTML-interfaces](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
 
 Javascript gir oss et rikt API mot [DOMen](/02-html/07-dom.md) via document-objektet.
 Hvis HTML-en inneholder dette...
@@ -32,7 +31,7 @@ boks.textContent; // Klikk her for å lære mer
 
 ## Hendelser
 
-Med DOM-apiet kan vi også legge til hendelser når noe skjer med et dom-element.
+Med DOM-apiet kan vi også legge til hendelser når noe skjer med et DOM-element.
 Vi gjør dette ved å legge på lyttere som venter på at en gitt hendelse skal skje, f.eks. et klikk på en knapp:
 
 ```js

05-javascript/08-promises.md

@@ -1,8 +1,7 @@
 # Promises
 
 > -   **MDN**: [Promise](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise)
-
--   Promises kan være litt forvirrende. Her er et blogginnlegg om hvordan man bør (og kanskje spesielt) _ikke_ bør bruke Promises: [We have a problem with promises](https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html)
+> -   Promises kan være litt forvirrende. Her er et blogginnlegg om hvordan man bør (og kanskje spesielt) _ikke_ bør bruke Promises: [We have a problem with promises](https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html)
 
 Noen ganger trenger vi å gjøre en asynkron operasjon (en oppgave som ikke fullfører umiddelbart) uten at vi vil stå og vente på at den blir gjort. Vi vil kunne kaste en boomerang og få beskjed når den er tilbake. Da er det nyttig med **Promises**.
 

05-javascript/09-web-api.md

@@ -1,9 +1,8 @@
 # Web-APIer
 
 > -   [Web services](https://en.wikipedia.org/wiki/Web_service)
-
--   [Web API](https://en.wikipedia.org/wiki/Web_API)
--   [REST](https://en.wikipedia.org/wiki/Representational_state_transfer)
+> -   [Web API](https://en.wikipedia.org/wiki/Web_API)
+> -   [REST](https://en.wikipedia.org/wiki/Representational_state_transfer)
 
 Et API (Application Programming interface) kan ses på som en slags kontrakt for informasjonsutveksling mellom programmer eller software-komponenter. Hvis vi vil lage en nettside som skal vise informasjon fra en database, eller sende inn et skjema som skal lagres i et annet system, bruker vi en API-standard kalt web services. Web services er en tjeneste som lar programmer kommunisere over World Wide Web, gjerne gjennom Web-APIer. I stor grad bruker vi i dag RESTfulle APIer. Kjært barn har nemlig mange navn: REST, WebAPI, eller bare API. Typisk lager vi web-APIer for å kommunisere mellom klienten, f.eks. en nettside, og serveren der tjenester i backend er eksponert. APIer knytter med andre ord frontenden sammen med backenden ❤️