diff --git a/namsefni/42.upprifjun-samantekt/1.html.md b/namsefni/42.upprifjun-samantekt/1.html.md
new file mode 100644
index 0000000..0a7e5fa
--- /dev/null
+++ b/namsefni/42.upprifjun-samantekt/1.html.md
@@ -0,0 +1,205 @@
+---
+title: Upprifjun –  Almenn hugtök/HTML samantekt
+---
+
+# Upprifjun –  Almenn hugtök/HTML samantekt
+
+## Vefforritun 1 — TÖL107G
+
+### Ólafur Sverrir Kjartansson, [osk@hi.is](mailto:osk@hi.is)
+
+---
+
+## GUI vs CLI
+
+* _Graphical user interface_
+* Forrit með grafísku notendaviðmóti
+* _Command-line interface_
+* Texta viðmót á forrit, ólíkt _grafísku_ viðmóti
+
+***
+
+## Stafasett & utf-8
+
+* Þegar við vinnum með texta þurfum við að skilgreina í hvaða _stafasetti_ textinn er
+* Skilgreinir hvernig hver stafur er kóðaður og hve mikið pláss hann tekur
+[`utf-8`](https://en.wikipedia.org/wiki/UTF-8) stafasettið notar allt að fjögur byte til að skilgreina staf eða tákn
+
+***
+
+## Internetið & vefurinn
+
+* Alþjóðlegt netkerfi hundruð milljóna tölva tengdra saman yfir tugþúsundir neta yfir TCP/IP
+* Margskonar kerfi nýta internetið, t.d. vefurinn og tölvupóstur
+* World Wide Web, aðgengilegt yfir _internetið_
+* Byggir á _vefsíðum_ sem eiga sér _URL_ sóttar yfir _HTTP_
+
+***
+
+## HTTP
+
+* HyperText Transfer Protocol
+* Samskiptareglur sem skilgreina hvernig dreift kerfi tölva vinnur saman
+
+***
+
+## URL
+
+* Staðsetja og skilgreina hvernig við sækjum vefsíður yfir HTTP
+* Samanstanda af nokkrum pörtum
+* `http://example.org/example.html?start=true#kafli2`
+* Stundum er talað um `URI`, [en í nýjum staðli er `URL` og `URI` það sama](https://url.spec.whatwg.org/)
+
+***
+
+## Framendi
+
+* Framendi (e. front-end eða client-side) er sá partur vefsins sem notendur sjá og eiga við
+* Búinn til með HTML, CSS og JavaScript
+
+***
+
+## Bakendi
+
+* Bakendi (e. back-end eða server-side) er sá partur vefsins sem er sendur yfir HTTP til framenda
+* _full stack_ er oft notað fyrir forritara sem eru færir bæði í fram- og bakenda
+* Samanstendur yfirleitt af vefþjón, _forriti_ og gagnageymslu (t.d. gagnagrunn)
+
+---
+
+## HyperText & Markup Language
+
+* Hugtak um ólínulegan texta sem er tengdur við annan texta og hægt er að nálgast strax
+* Á einhverjum tímapunkti þurfum við leið til að ljá texta aukna dýpt
+* Markup language leyfir okkur það
+* Lýsing á skjali sem er setningarfræðilega aðgreind frá texta skjalsins
+
+***
+
+## Staðlar
+
+* Skilgreina _hvernig_ HTML á að virka
+* Fyrst reynt án árangurs fyrir HTML 1.0 hjá [IETF](https://en.wikipedia.org/wiki/Internet_Engineering_Task_Force) (Internet Engineering Task Force)
+* Tókst þó fyrir útgáfu 2.0 í [RFC 1866](https://tools.ietf.org/html/rfc1866) árið 1995
+* Tim Berners-Lee stofnaði W3C (World Wide Web Consortium) hjá MIT árið 1994 með stuðning frá Evrópusambandinu og [DARPA](https://en.wikipedia.org/wiki/DARPA)
+
+***
+
+## HTML
+
+* HyperText Markup Language
+* Kom fyrst fram á sjónarsviðið 1993, þróað af Tim Berners-Lee
+* Útgáfur 1.0–4.01 byggðar á SGML
+* Seinni útgáfur, XHTML og HTML5
+
+***
+
+## Elements
+
+* Einstakur hluti af vefsíðu og býr til tré með öðrum hlutum
+* Inniheldur önnur element eða texta nóðu, mynda _tré_
+* Hvert element táknar merkingu, hefur _merkingarfræðilegt gildi_ (e. semantic value)
+* `<p>Halló heimur</p>` er element sem skilgreinir setningu (paragraph) með texta nóðuna _„Halló heimur“_
+
+***
+
+## Tags
+
+* Element byrja á tagi, t.d. `<p>`
+* Element þurfa ekki, en ættu, að enda á loka tagi, t.d. `</p>`
+* Ef element hefur skilgreind _attribute_ eru þau sett á byrjunar tagið
+
+***
+
+## Attribute
+
+* Nafn-gildis par sem breytir elementi, t.d. `<p class="important">`
+* Gildið þarf ekki að vera umlukið gæsalöppum en það er æskilegt til gildið sé skýrt
+* Sum attribute þarf aðeins að skilgreina með nafni, t.d. `<option selected>`
+* Skrifum sem heiti í lástöfum, samasemmerki, gæsalappir opnast, gildi, gæsalappir lokast
+
+***
+
+## Element
+
+* Úr mörgum elementum að velja þegar við smíðum vefi: flow, sectioning, heading, phrasing, embedded, interactive
+* Form, töflur, listar
+
+***
+
+## HyperLink (tengill)
+
+* `<a>` element með `href` attribute skilgreinir tengil (e. hyperlink)
+* Grunnurinn að vefnum—tengir saman mismunandi vefi
+
+***
+
+## Merkingarfræði
+
+* Það er sterklega mælst til þess að markup í HTML skjali sé aðeins notað til að tjá merkingu en ekki framsetningu
+* Framsetning á gögnum er stýrt með CSS og fáum við því hreina skiptingu á milli efnis og útlits
+* Mörg element til sem skilgreina merkingu en annars er hægt að nota attributes
+
+***
+
+## HTML grunnur
+
+Öll HTML skjöl byggjá á grunn elementum:
+
+* `<html>` skilgreinir rót HTML vefs, skilgreinum tungumál með `lang` attribute
+* `<head>` er yfirleitt fyrsta barn `<html>` og heldur utan um lýsigögn vefsíðu
+* `<body>` skilgreinir meginmál vefs
+
+***
+
+## Minnsta HTML5 skjalið
+
+DOM tré.
+
+```html
+<!doctype html>
+<html lang="is">
+  <head>
+    <meta charset="utf-8">
+    <title>Halló heimur</title>
+  </head>
+  <body>
+    <p>Halló heimur</p>
+  </body>
+</html>
+```
+
+***
+
+## Að vísa í efni
+
+* Þegar við vísum í efni þurfum við að gefa upp slóð
+  * _Afstæð_ (relative) eða _nákvæm_ (absolute)
+* Á við `<img src="">`, `<a href="">` og önnur element sem vísa í efni
+
+***
+
+## Aðgengi
+
+* Aðgengi snýst ekki um að fatlað fólk geti notað vefina okkar
+* Aðgengi snýst um að _fólk_ geti notað vefina okkar
+* Við getum öll orðið „fötluð“ tímabundið
+
+***
+
+## WCAG 2.1
+
+* W3C staðall: [Web Content Accessibility Guidelines (WCAG) 2.1](https://www.w3.org/TR/WCAG21/)
+* Listi af tilmælum og prinsippum til að gera vefi aðgengilegri
+* Þrjár tegundir:
+  * A, minnsta stig
+  * AA, það stig sem við ættum að stefna að
+  * AAA, öll skilyrði uppfyllt
+
+***
+
+## SEO
+
+* Meðhöndlun á efni til að það komi frekar fram í leitarniðurstöðum
+* Leitarvélar horfa á mörg hundruð breytur sem hafa áhrif
+* Í grunninn _skipulagt_, _læsilegt_ og _einstakt_ efni
diff --git a/namsefni/42.upprifjun-samantekt/2.css.md b/namsefni/42.upprifjun-samantekt/2.css.md
new file mode 100644
index 0000000..a546553
--- /dev/null
+++ b/namsefni/42.upprifjun-samantekt/2.css.md
@@ -0,0 +1,348 @@
+---
+title: Upprifjun – CSS samantekt
+---
+
+# Upprifjun – CSS samantekt
+
+## Vefforritun 1 — TÖL107G
+
+### Ólafur Sverrir Kjartansson, [osk@hi.is](mailto:osk@hi.is)
+
+---
+
+## Hvað er CSS?
+
+* [Cascading Style Sheets](http://en.wikipedia.org/wiki/Cascading_Style_Sheets)
+* CSS er style sheet language sem lýsir framsetningu á skjali skrifuðu í markup language, t.d. HTML, XHTML, XML og SVG
+* Hannað til að aðskilja efni frá útliti
+
+***
+
+## Tenging við html
+
+Í æskilegri röð:
+
+1. Vísa í skrá (`.css` ending): `<link rel="stylesheet" href="...">` í `<head>` – viðhöldum algjörum aðskilnaði
+2. `<style>` blokk í HTML skjali, helst í `<head>` – ekki alveg jafn hreint en aðskiljum þó frá markup
+3. `style` attribute á element – *alls ekki* æskilegt þar sem við erum að binda útlit við element í markup
+
+***
+
+## Málfræði
+
+* Vinnum með _reglusett_, samanstanda af
+  * _selectors_
+  * _yfirlýsingum_
+* Athugasemdir eru innan `/* comment */`
+
+***
+
+```css
+/* eftirfarandi er eitt reglusett */
+p /* selector */
+{ /* yfirlýsingar innan { } */
+  color: green; /* yfirlýsing */
+  margin: 1em; /* yfirlýsing */
+}
+```
+
+***
+
+## Selectors
+
+* Strengur sem lýsir því hvaða element við viljum að taki við _yfirlýsingum_
+  * Skiptast í sex flokka
+* Getum tengt saman
+  * Fjórar gerðir af samtengingum
+
+***
+
+## Villumeðhöndlun
+
+* CSS er hannað til að fyrirgefa minniháttar villur, t.d.
+  * Ef tvípunkt eða semíkommu vantar í yfirlýsingu
+  * Ef heiti eigindis er óþekkt er yfirlýsingin öll hunsuð og haldið áfram að næstu.
+* Meiriháttar villur stoppa lestur á skjali frá þeim stað sem þær eiga sér stað
+
+***
+
+## Yfirlýsingar
+
+* Reglusett inniheldur yfirlýsingar:
+* `eigindi: gildi;`
+* Mjög mörg eigindi, möguleg gildi færri
+
+***
+
+## Shorthand
+
+* Oft er hægt að skilgreina í einni yfirlýsingu mörg gildi fyrir svipaða virkni
+* Tvíeggja sverð: getur aukið lesanleika en líka falið möguleg gildi
+
+`margin: <top> <right> <bottom> <left>;`
+
+***
+
+## Gildi og einingar
+
+* CSS hefur nokkrar mismunandi tegundir af [gildum og einingum](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units)
+* Hvert eigindi tekur mismunandi gildi, verðum að vita hvert eða fletta því upp
+
+***
+
+## Letur-hlutfallslegar einingar
+
+* Horfa til `font-size` eigindsins
+* Yfirleitt `em` eða `rem`
+* Í grunninn er `1em == 16px` en getum breytt með að setja `font-size` á `html`
+
+***
+
+* Þegar reiknað er úr `em` gildum í elementum sem eiga sér foreldri með skilgreint `em` gildi eru þau _margfölduð_.
+* Á ekki við `rem`
+
+***
+
+## Skjá-prósentu einingar
+
+* Hlutfallslegar við stærð _viewports_ sem er yfirleitt stærð vafragluggans.
+* `vw` er ein eining á breiddina (_viewport width_) svo `100vw` myndi fylla upp í skjá á breiddina
+* `vh` er ein eining á hæðina (_viewport height_) svo `100vh` myndi fylla upp í skjá á hæðina
+
+***
+
+## Box model
+
+[Box módelið](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model) er skilgreint í [CSS2.1 spec](https://www.w3.org/TR/CSS2/box.html) og lýsir því hvernig rétthyrnd box fyrir element eru mynduð.
+
+![Útskýringar mynd af box modelinu](img/boxmodel.png)
+
+***
+
+## Specificity – sértækni
+
+* Fernd á forminu `a,b,c,d`
+* `a`, 1 ef skilgreint í `style` attribute, annars 0
+* `b`, fjöldi `id` selectora
+* `c`, fjöldi attribute selectora og gervi-klasa
+* `d`, fjöldi elementa og gervi-elementa
+
+***
+
+* Skilgreinir gildi sem heitir _sértækni_
+* Getum hugsað sem tölu, en er í raun fernd
+
+***
+
+## Cascade – „flóðið“
+
+* Þegar útlit er birt þarf að komast að því _nákvæmlega_ hvaða skilgreiningar eigi við hvert element
+* Allar skilgreiningar fyrir element fundnar og raðað
+
+***
+
+Skilgreiningar geta komið frá þremur stöðum:
+
+* _User agent_, sjálfgefnir stílar frá tæki sem birtir
+* _Notanda_, notandi tækis, t.d. að allt sé stækkað
+* _Höfundi_, skilgreiningar frá höfundi vefs
+
+***
+
+## Visual formatting model
+
+* Gerð boxa
+  * `block` vs. `inline`; `display` eigindið
+* Eðlilegt flæði
+* Staðsetning með `position`
+* Float
+* Þriðja víddin
+
+***
+
+## Normal flow – eðlilegt flæði
+
+Ef við höfum ekki skilgreint hvernig element á að haga sér, er það í [_eðlilegu flæði_ (normal flow)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flow_Layout/Block_and_Inline_Layout_in_Normal_Flow) og er sjálfgefið annað hvort _block_ eða _inline_
+
+* _block_ element forma blokkir og **fylla upp í breidd foreldris**
+* _inline_ element forma ekki blokkir heldur dreifa sér í línur, fá **ekki** lárétt `margin`; `width` eða `height`
+
+***
+
+## Staðsetning
+
+[`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) eigindi stillir hvernig element hegðar sér:
+
+* `static` – eðlilegt flæði, sjálfgefið gildi
+* `relative` – _hlutfallslegt_ í eðlilegu flæði
+* `absolute` – skilgreinum algjörlega hvar box birtist
+* `fixed` – skilgreinum út frá glugga hvar box er fast
+* `sticky` – fast, hlutfallslega út frá foreldri
+
+***
+
+## Leturgerðir
+
+* Leturgerð (e. font) segir til um hvaða hönnun á letri við notum til að birta texta
+* Í grunninn höfum við aðgang að almennum leturgerðum
+* _Vef öruggar_ leturgerðir eru aðgengilegar á langflestum tækjum
+
+***
+
+* [`font-family`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-family) skilgreinir hvaða leturgerð við viljum nota, í röð
+* [`font-style`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style) skásetur letur (`italic`) eða `normal`
+* [`font-weight`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight) setur þyngd leturs, í tölum (t.d. `700`), heitum (t.d. `bold`), eða hlutfallslega (t.d. `bolder`)
+* [`font-size`](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size) setur stærð leturs, með nákvæmari einingu eða letur-hlutfallslegri einingu
+
+***
+
+## Bakgrunnur og litir
+
+* [`background-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-color) setur lit á bakgrunn, sjálfgefið gildi er gegnsætt (transparent)
+* [`background-image`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-image) setur mynd á bakgrunn eftir slóð, svona notum við myndir í CSS
+* [`background-repeat`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat) segir til um hvernig bakgrunnurinn endurtekur sig
+* [`background-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/background-position) skilgreinir hvar myndin birtist
+
+***
+
+## Progressive enhancement
+
+* Upplifun sem krefst minnstu mögulegrar tækni
+* Bætum virkni við eins og stuðningur er til staðar
+* Byrjum einfalt og bætum við virkni í lögum
+
+***
+
+## CSS custom properties / variables
+
+* [CSS custom properties / variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (eða custom properties) leyfa okkur að skilgreina breytur
+  * t.d. fyrir lit, ákveðna lengd eða eitthvað annað sem er mikið notað
+* Breytingar verða auðveldari og getur bætt lesanleika
+
+***
+
+## Fallback
+
+* Ný eigindi eða gildi leyfa okkur að gera eitthvað skemmtilegt
+* En hvað ef það eru ekki allir vafrar farnir að styðja eigindið?
+* Skilgreinum _fallback_ gildi sem við erum nokkuð viss um að sé stutt
+
+***
+
+## Flexbox
+
+* Segjum foreldri að raða börnum sínum með flexbox með [`display: flex`](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
+  * Eða `display: inline-flex` til að raða foreldri inline
+* Element með `display: flex` eru kölluð _flex containers_
+* Börn innan flexbox eru kölluð _flex items_
+
+***
+
+## Flexbox ásar
+
+![Skýringarmynd um flex ása](img/flex-direction-terms.svg)
+
+***
+
+## Logical properties
+
+* [Logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties/) er þegar við notum _logical_ gildi en ekki _physical_ gildi til að skilgreina eigindi
+* _Physical_ gildi er t.d. `bottom` eða `left`, og takmarkast af samhengi—í flestum tilfellum er það samhengi að við séum að lesa frá vinstri til hægri
+* _Logical_ gildi eru ekki fest með nákvæmum gildum heldur vinna útfrá `block` og `inline`
+
+***
+
+## Skalanleg vefhönnun
+
+1. Sveigjanlegu umbroti, byggðu á grind
+2. Sveigjanlegum myndum og miðlum
+3. CSS media queries
+
+***
+
+### `<meta name="viewport">`
+
+Getum leiðbeint vafra hvernig síða birtist:
+
+* `width` setur breidd viewports:
+  * `tala` – föst breidd
+  * `device-width` — viewport er jafnt _logical resolution_ ekki _physical resolution_
+* Ef við skilgreinum ekki `width=device-width` í `<meta name="viewport">` og notum media queries mun vefurinn okkar ekki birtast eins og við höldum í tækjum með hærri raunupplausn.
+
+***
+
+## Mobile first
+
+* Byrjum á upplifun í minni tækjum
+* Neyðir þig til að taka ákvarðanir
+* Efnið í fyrirrúmi, ekki óþarfa „skraut”
+* Progressive enhancement!
+
+***
+
+## Sveigjanleg grind
+
+* __Notum hlutfallsleg gildi, ekki nákvæm__
+* Ef umgjörð minnkar, þá minnkar allt hlutfallslega innan hennar
+* Getum fest umgjörðina til að festa allt innihald
+* Notum yfirleitt `max-width` á umgjörð til að setja hámarksbreidd
+
+***
+
+## Umskipti (transition)
+
+* Látum eitt gildi breytast í annað á skilgreindum tíma
+* Brúað á milli upphafs- og endagildis
+
+***
+
+## Animation
+
+* Með `animation` eigindinu getum við útbúið flóknari hreyfingar án þess að nota JavaScript
+* Skilgreinum _keyframes_ fyrir hreyfinguna með `@keyframes` at-reglunni
+
+***
+
+* Skilgreinum:
+  * Hvaða eigindi breytist
+  * Á hve löngum tíma
+  * Með hvaða hröðun
+  * Hvort það sé töf
+
+***
+
+## CSS Grid
+
+* CSS grid er notað til að skilgreina skipulag (e. layout) á síðu
+* Skipuleggjum í röðum og dálkum
+* Svipað hugtak og þegar síður voru skipulagðar með `<table>`... en sérhannað til þess
+* Grid containers og grid items
+
+***
+
+* [`fr`](https://developer.mozilla.org/en-US/docs/Web/CSS/flex_value), ný hlutfallsleg eining fyrir _fraction_ af plássi, hagar sér svipað og þegar við setjum `flex-grow`
+* [`minmax()`](https://developer.mozilla.org/en-US/docs/Web/CSS/minmax()), fall sem velur min eða max gildi
+* [`repeat()`](https://developer.mozilla.org/en-US/docs/Web/CSS/repeat()), fall sem leyfir að skilgreina mörg
+
+***
+
+## CSS viðmiðunarreglur
+
+Í stærri verkefnum ættum við að setja okkur viðmiðunarreglur (guidelines)
+
+* Hvernig nefnum við og skiptum upp hlutum?
+* Hvernig skrifum við selectora?
+* Hvernig högum við layout? Notum við grind?
+* o.s.fr.
+
+***
+
+## BEM
+
+Leið til að nota selectora
+
+* _Block_ - hæsta stig á _component_, foreldrið, t.d. `.button`
+* _Element_ - börn undir _block_, t.d. `.button__price`
+* _Modifier_ - breytir block án þess að hafa áhrif almennt, t.d. `.button--wide`
+
+[BEM Dæmi](daemi/1.css-verkefni/01.bem.html)
diff --git a/namsefni/42.upprifjun-samantekt/3.tools.md b/namsefni/42.upprifjun-samantekt/3.tools.md
new file mode 100644
index 0000000..4c86cd0
--- /dev/null
+++ b/namsefni/42.upprifjun-samantekt/3.tools.md
@@ -0,0 +1,207 @@
+---
+title: Upprifjun – Tæki og tól, Git
+---
+
+# Upprifjun – Tæki og tól, Git
+
+## Vefforritun 1 — TÖL107G
+
+### Ólafur Sverrir Kjartansson, [osk@hi.is](mailto:osk@hi.is)
+
+---
+
+## _Linting_
+
+* Almennt köllum við það _linting_ að lesa yfir kóða og benda á möguleg vandamál
+* Til fyrir langflest forritunarmál
+* Oftast tvenns konar villur
+  * Mögulegar villur við keyrslu
+  * Brot á kóðastíl
+
+***
+
+## Node.js
+
+* Verkvangur (platform) til að smíða hröð, skalanleg netforrit
+* Notað til að búa til allskonar forrit, bæði _bakenda_, _CLI_ o.fl.
+
+***
+
+* Ekki forritunarmál; JavaScript er forritunarmálið sem node notar
+* Samleðgaráhrif með framenda, _eitt mál fyrir framenda og bakenda_ getur heillað
+* Samt **ekki** sama keyrsluumhverfið! Node hefur t.d. möguleika á að lesa skrár af skáarkerfi
+
+***
+
+## npm
+
+* npm er _pakkastjóri_ (package manager) fyrir JavaScript
+* Sækjum _pakka_, eða módúla (module) sem innihalda virkni forritaða af öðrum
+* [*Mjög* mikið af pökkum](http://www.modulecounts.com/): yfir 1,7MM
+* Ákveðinn kostur, og ákveðinn galli...
+
+***
+
+## Pakkastjóri
+
+* Pakkastjóri sér um að sjálfvirknivæða það að setja upp, stilla, og fjarlægja hugbúnað
+* Ekki: leita að forriti á vefnum, finna download, keyra uppsetningarforrit, keyra forrit
+* Heldur: ein skipun til að sækja forrit og gera aðgengilegt
+* Vistar einnig _hvaða_ forrit verkefni notar svo aðrir geta sótt
+
+***
+
+## Tól í verkefnum
+
+* Viljum innifela tólin í verkefnunum okkar
+  * Vitum nákvæmlega hvaða _dependency_ við höfum
+  * Gefum öllum í teymi aðgang
+* Byrjum á að útbúa `package.json` skrá sem heldur utanum lýsigögn fyrir verkefni
+  * `npm init` í möppu verkefnis, svörum spurningum um verkefnið
+
+***
+
+## browser-sync
+
+* Getum núna notað `browser-sync` skipunina í skel
+* [`browser-sync`](https://www.browsersync.io/) er tól sem leyfir okkur að keyra lítinn vefþjón á okkar eigin vél
+* Endurhleður sjálfkrafa þegar við gerum breytingar
+* Samræmir scroll á milli vafra sem tengjast
+  * Auðveldar prófanir í mörgum tækjum
+
+***
+
+## Sass
+
+* Sass er töluvert mikið notað, notum það í verkefnum héðan í frá
+* Hefur þýðendur í mörgum umhverfum
+* Notar skráarendinguna `.scss`
+
+---
+
+## Version control
+
+* Geymum útgáfur af skrám sem við vinnum með
+* Leyfir okkur að:
+  * Treysta því að vinnan okkar sé örugg
+  * Fara fram og til baka í tíma
+  * Gera tilraunir án þess að skemma
+
+***
+
+## Distributed version control
+
+* Höfum miðlæga geymslu en hver client hefur einnig _öll gögn_
+  * T.d. Git, Mercurial
+* Ef eitthvað fer úrskeiðis getum við haldið áfram að vinna
+
+***
+
+## Repo
+
+* Staðurinn, geymslan, sem við geymum gögnin á—hvort sem það er á server eða client—heitir á ensku _repository_
+* Oftast kallað _repo_ eða _git repo_
+
+***
+
+## Þrjár stöður skráar í Git
+
+* **committed**, skrá er geymd í local gagnagrunni Git
+* **modified**, skrá hefur verið breytt en ekki geymd í gagnagrunni
+* **staged**, breytt skrá hefur verið merkt til að fara í næsta commit
+
+***
+
+## Git og skrár í verkefni
+
+* Git sér skrár á ferna vegu:
+  * _unmodified_, engar breytingar á skrá síðan seinasta commit
+  * _modified_, breytingar á skrá síðan seinasta commit, ekki _staged_
+  * _staged_, breytingar á skrá og staged
+  * _untracked_, allar aðrar
+
+***
+
+## git commit
+
+* `git commit` færir allt úr _staged_ í commit sem geymt er í Git
+* Gefum upp _commit message_ sem segir hvað breytist með commit, opnar textaritil
+* Getum gert í einu með
+  * `git commit -m "<commit message>"`
+
+***
+
+## Remotes
+
+* Græðum á því að vera bara með local repo, en...
+* Græðum meira á því að nota Git til að vinna saman
+* _remotes_ eru _remote repositories_, repos annarsstaðar, t.d. á internetinu
+
+***
+
+## Senda breytingar í remote
+
+* Þegar við klárum eitthvað verkefni viljum við deila því
+* _Pushum_ commitum frá local repo í _upstream_ repo
+  * Upstream er það/þau repo sem við clone'uðum frá
+  * Downstream væru repo sem clone'uðu frá okkar repo
+
+***
+
+## Sækja breytingar frá remote
+
+* Ef nýjar breytingar eru til staðar á remote getum við sótt þær
+* `git pull` keyrir `git fetch` og síðan `git merge` fyrir það _branch_ sem við erum að vinna á
+
+***
+
+## Branches
+
+* _Branch_ er þegar við víkjum frá meginlínu í kóðanum okkar
+  * Til að gera tilraun með tækni, breyta einhverju, vinna nýjan feature o.fl.
+* Ódýrt í Git útaf því hvernig gögn eru geymd sem snapshot
+
+***
+
+## Merge
+
+* `git merge` framkvæmir merge, samtvinnar eitt branch inn í annað
+* Ef bæði eiga sömu skrá sem er mismunandi þarf að leysa úr _merge conflicts_
+
+***
+
+## Merge conflicts
+
+* Ekkert hættulegt eða (yfirleitt) flókið, bara tímafrekt
+* Hlutir sem Git gat ekki leyst eru merktir með _conflict-resolution markers_
+* Getum notað tól til að aðstoða við að sjá breytingar betur
+
+***
+
+## GitHub
+
+* GitHub er stærsti hýsingaraðili Git repoa
+* Mjög mjög mörg verkefni hýst á GitHub, bæði open-source og ekki
+* Notum GitHub sem sameiginlegan stað sem við geymum repo á
+
+***
+
+## GitHub workflow
+
+Þegar við vinnum verkefni á GitHub er [flæðið yfirleitt](https://guides.github.com/introduction/flow/):
+
+1. Clone (eða fork) af repo
+2. Gera breytingar í branch
+3. _Ýta_  breytingum á GitHub
+4. Opna _pull request_ í upprunalega repo
+5. Ræða breytingar, laga o.s.fr.
+6. _merge_ á breytingum inn í aðal branch repo
+
+***
+
+## Netlify
+
+* „[Netlify](https://www.netlify.com/) is an all-in-one platform for automating modern web projects.“
+* Í grunninn hýsing fyrir _static_ vefi
+  * Vefir sem hafa ekki „bakenda“
+* Samt með stuðning fyrir [_serverless Lambda functions_](https://docs.netlify.com/functions/overview/)
diff --git a/namsefni/42.upprifjun-samantekt/4.javascript.md b/namsefni/42.upprifjun-samantekt/4.javascript.md
new file mode 100644
index 0000000..dfd88a1
--- /dev/null
+++ b/namsefni/42.upprifjun-samantekt/4.javascript.md
@@ -0,0 +1,668 @@
+---
+title: Upprifjun – JavaScript samantekt
+---
+
+# Upprifjun – JavaScript samantekt
+
+## Vefforritun 1 — TÖL107G
+
+### Ólafur Sverrir Kjartansson, [osk@hi.is](mailto:osk@hi.is)
+
+---
+
+> JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.
+>
+> – [MDN: JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
+
+***
+
+## Java VS. JavaScript
+
+Mörg atriði eru ólík, en það sem skiptir mestu máli í fyrstu:
+
+* Java er _þýtt_ en JavaScript er _túlkað_
+  * JavaScript kóði er túlkaður í hverri keyrslu, engin þýðandi
+* Breytur í Java hafa týpu, _gildi_ í JavaScript hafa týpu
+
+***
+
+## Týpur
+
+Breytur í JavaScript hafa ekki týpu, [_gildi_ hafa týpu](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures).
+
+Í grunninn höfum við [_primitive_](https://developer.mozilla.org/en-US/docs/Glossary/Primitive) týpur
+
+* `string`, `number`, `bigint`
+* `boolean`, `undefined`, `null`, `symbol`
+
+***
+
+## `object`
+
+* Fyrir gildi sem eru _ekki_ primitive höfum við [`object`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#objects)
+* Möppun á milli _key_ og _value_ (nafn-gildis pör)
+
+***
+
+## Strengir – string
+
+* Skilgreinum strengi innan `'`, `"` eða `` ` ``
+  * `'Halló, heimur!'` eða `"Halló, heimur!"`
+* Notum `\` til að _escapea_ sérstaka stafi eða sérstök tákn (t.d. newline eða tab)
+  * `"Halló, \"heimur\""`
+
+***
+
+## Template literals
+
+* Betri strengjavinnsla, skilgreind í ECMAScript 6
+* Notar ` (backtick) til að skilgreina strengi
+* Getum sett inn _segð_ í strengi án `+`
+
+***
+
+## number
+
+* Notum mest eina týpa fyrir tölur í JavaScript, [`number`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#number_type)
+* 64 bitar: 1 í sign, 11 bitar í brot, 52 bitar í gildi
+  * `1.25`
+
+***
+
+## Boolean
+
+* `true` eða `false`
+* Notum oft í flæðistýringu þegar við berum saman gildi
+
+***
+
+## undefined
+
+* Gildi á _breytum_ sem ekki hafa verið skilgreindar
+* Gildi á eigindum _hluta_ sem ekki hafa verið skilgreindir
+* `typeof hallo // "undefined", hér er hallo óskilgreind breyta`
+
+***
+
+## null
+
+* Gildi sem stendur fyrir að vísvitandi fjarveru gildis
+* Getum lent í að fá _null reference_ villur ef við höldum að eitthvað sé ekki null
+  * `null.length`
+  * `Uncaught TypeError: Cannot read property 'length' of null`
+
+***
+
+* Samanburður með `==` og `!=` mun byrja á að kasta báðum gildum
+  * Getur valdið rugling og vitlausum niðurstöðum
+* Samanburður með `===` og `!==` mun byrja á að bera saman týpur og passa uppá að þær passi (eða ekki)
+  * __Notum `===` fyrir allan samanburð!__
+
+***
+
+## Truthy & falsy
+
+* Þegar við erum með hluti sem haga sér eins og `boolean` án þess að vera það, tölum við um að þeir séu `truthy` eða `falsy`
+* Byggir á _type coercion_
+* _Type coercion_ þvingar týpur til að spila saman
+
+***
+
+## Lógískir virkjar
+
+* Getum unnið með boolean gildi með `and`, `or` og `not` virkjum
+* `&&`, tvístæður (binary) `and` virki sem skilar `true` þá og því aðeins að bæði stök séu `true`, annars `false`
+  * `true && false // false`
+  * `true && true // true`
+
+---
+
+## Segðir (expressions)
+
+* Segð er kóðabútur sem skilar gildi
+  * Tala, stengur o.fl.
+* Segðir geta innihaldið aðrar segðir
+  * `1 + 1`
+
+***
+
+## Skipanir (statement)
+
+* Skipanir eru samansöfn af segðum
+* Forrit eru samansöfn af skipunum
+* Einfaldasta skipunin (og segðin, og forritið) er segð með semíkommu
+  * `1;`
+
+***
+
+## Semíkomma
+
+* Semíkomma er _statement terminator_ eins og í Java eða C
+* Ekki krafa, _Automatic Semicolon Insertion_ sér um að setja inn ef sleppt
+* Þarf að passa, við ættum alltaf að setja inn semíkommu meðan við erum að læra JavaScript
+
+***
+
+## Breytur
+
+* Skilgreinum breytur með lykilorðunum `let`, `const` eða `var`
+  * `let result;`
+  * `var` er „eldri“ leið til að skilgreina breytur sem við ættum ekki að nota í dag
+
+***
+
+* Getum aukalega gefið gildi úr segð
+  * `let result = 10;`
+  * `const RESULT = 1; // breytunöfn eru hástafanæm`
+
+***
+
+* Megum ekki skilgreina aftur breytu sem áður var skilgreind með `let` eða `const`
+* Breytur innihalda ekki gildi, þau vísa í þau
+* Breytur hafa ekki týpu, _gildin_ hafa týpu
+
+***
+
+## Umhverfi (environment)
+
+* Þegar við keyrum JavaScript forritin okkar gerist það í ákveðnu _umhverfi_
+* Inniheldur staðlaða hluti og föll sem eiga við umhverfið
+  * Í vafra höfum við aðgerðir t.d. til að eiga við vefsíðuna, bundið við _window_
+  * Í node.js höfum við aðgerðir t.d. til að eiga við skráarkerfið, bundið við _process_
+
+***
+
+## Flæðistýringar & lykkjur
+
+* Höfum aðgang að flæðistýringum og lykkjum
+  * líkjast mjög mikið þeim sem eru í Java
+* Stýrum flæði forrita og framkvæmum ítranir
+
+***
+
+## if
+
+* `if` keyrir kóða aðeins ef segð skilar _truthy_ gildi
+* Getum keyrt annan kóða ef ekki truthy með `else`
+* Eða skilgreint fleiri segðir með `else if`
+* Kóði sem keyra á ætti að vera innan `{` og `}`
+
+***
+
+## while og do while lykkjur (loops)
+
+* `while` og `do .. while` lykkjur leyfa okkur að endurtaka kóða svo lengi sem einhver segð er sönn
+* `do .. while` mun alltaf keyra kóða einu sinni áður en segð er athuguð
+
+***
+
+## for
+
+* `for` lykkjur eru sérhæfðari og nýta mjög algent form á lykkjum:
+  * Setja byrjunargildi
+  * Athuga núverandi gildi
+  * Uppfæra gildi
+
+---
+
+## Föll
+
+* [Föll](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions) eru _blokkir_ af kóða sem geta haft nafn
+* Notum til að skipuleggja kóða og draga úr endurtekningu
+* Engar eða fleiri færibreytur (viðföng, argument)
+* Hugsanlega með skilagildi, skilgreindu með `return`
+  * Ef ekki, þá skilar fall `undefined`
+
+***
+
+## Scope
+
+* Breytur eru skilgreindar með _lexical scope_ per fall
+  * Breytan er aðeins aðgengileg innan falls
+* En aðeins ef breyta er skilgreind með `let`, `const` eða `var`
+
+***
+
+* Ef ekki er breytan sett í _global scope_
+  * Getur valdið leiðinlegum böggum
+* Breytur skilgreindar utan falla eru í global scope
+
+***
+
+## var, let & const
+
+* Áður en `let` og `const` voru skilgreind var aðeins `var`
+* `var` er skilgreint fyrir global scope eða lexical scope falls
+* `let` og `const` eru skilgreind fyrir block, eru _block scoped_
+
+***
+
+## Arrow functions
+
+* Stuttur syntax fyrir föll með „fat arrow“: `() => {}`
+  * Megum sleppa sviga ef ein færibreyta
+  * Skila gildi ef eitt statement, annars `return`
+
+***
+
+## Færibreytur (parameters)
+
+* Færibreytur á föllum hafa ekki týpur heldur gildið
+* Fall getur því tekið inn færibreytur sem geta verið _hvaða gildi sem er_
+* Primitives (string, number, boolean, undefined) eru _pass by value_
+* Objects eru _pass by reference_
+
+***
+
+## Innri föll
+
+* Getum skilgreint föll _innan falls_
+* Innri föll eru aðeins í scope fyrir ytra fall
+* Innri föll hafa aðgang að scope ytra falls
+
+***
+
+## Lokanir – closures
+
+* Þegar við höfum innri föll þá myndum við _lokun_ um umhverfi þess
+* Innra fall hefur aðgang að ytra scope meðan það lifir
+* Breytu nöfn í innriföllum skrifa yfir ytri
+
+---
+
+## Array
+
+* Fylki leyfa okkur að safna hlutum í raðaða lista
+* Búum til array með `[]`
+  * `const list = [];`
+
+***
+
+* Nálgumst gildi innan fylkis með _bracket notation_
+  * Nálgumst eftir _index_, **byrjar frá 0**
+  * `array[0]` nálgast fyrsta stak í index 0, `array[1]` annað stak í index 1 o.s.fr.
+* `length` skilar fjölda staka í fylki, frá 0 til stærsta index
+
+***
+
+## Properties
+
+* Næstum öll JavaScript gildi hafa _property_ (eigindi)
+  * `'foo'.length`, `Math.min()`
+* Öll nema `null` og `undefined`
+* Property nálgumst við með:
+  * `.` – _dot notation_
+  * `['foo']` – _bracket notation_
+
+***
+
+## Object
+
+* Byrjum á að hugsa um object í JavaScript sem geymslu fyrir gildi þar sem gildi á sér nafn
+  * Skoðum síðan hvernig við vinnum með erfðir
+* Skilgreinum með `{}`, innan þess skilgreinum við eigindi hluts með `heiti: gildi`
+  * Ef heiti er óleyfilegt breytunafn skilgreinum við sem streng
+  * `gildi` eru öll leyfileg gildi
+
+***
+
+## HTML & JavaScript
+
+Í æskilegri röð:
+
+1. `<script src="scripts.js"></script>`
+2. Innan `<script>...</script>`
+3. Forðast að binda JavaScript við element með on* attributes (t.d. `onclick`)
+
+***
+
+## DOM
+
+* [Document Object Model](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model)
+* Leyfir forritum og skriptum að gera dýnamískar breytingar á efni, skipulagi og útliti skjala (oftast HTML eða XML) gegnum API
+* Hlutlaust á platform og mál
+* Staðlað af [W3C](http://www.w3.org/DOM/)
+
+***
+
+## DOM staðall
+
+* DOM forritunarskilin eru ekkert sérstaklega góð
+  * Ekki útbúin fyrir JavaScript heldur fyrir almenna vinnslu á XML
+* Einhverjir kostir að nota sömu skil en eiginlega ekki næg...
+
+***
+
+## Ferðast um DOM
+
+Hver nóða hefur vísanir í foreldri, börn og systkini:
+
+* `parentNode` – foreldri nóðu
+* `childNodes` – fylki af börnum nóðu
+* `lastChild` – seinasta barn nóðu
+* `previousSibling` –  fyrra systkini nóðu
+* o.fl.
+
+***
+
+## Finna element
+
+* Oftast þurfum við að finna ákveðin element, ekki ítra gegnum þau öll
+* `document` og `element` hafa föll sem leyfa okkur að leita eftir ýmsum leiðum
+
+***
+
+## querySelector
+
+* [`querySelector`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector) leitar eftir **CSS selector** að _fyrsta_ elementi sem passar (dýpt fyrst)
+* `document.querySelector('.important')` til að leita á allri síðu
+* `element.querySelector('.important')` til að finna undir ákveðnu `element`
+
+***
+
+## querySelectorAll
+
+* [`querySelectorAll`](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) leitar eftir CSS selector að _öllum_ elementum sem passar
+* Skilar _statsískum_ `NodeList`, ekki lifandi
+* `document.querySelectorAll('div')` til að leita á allri síðu
+* `element.querySelectorAll('div')` til að finna undir ákveðnu `element`
+
+***
+
+## Að búa til element
+
+* `document.createElement(element)` – býr til nýtt element sem við getum átt við
+* `document.createTextNode(text)` – býr til texta nóðu
+* Notum síðan föll á node til að bæta við DOMið, t.d. `appendChild`
+
+***
+
+## Attributes
+
+* `setAttribute(attribute, value)` – setur attribute á elementi
+* `getAttribute(attribute)` – sækir attribute á element
+  * Virkar þó ekki fyrir öll attribute, t.d. `value` á input
+* Sum almenn attribute eru aðgengileg með property, t.d. `className` fyrir `class` (`class` er frátekið orð!)
+
+***
+
+## Classlist
+
+* Ef við viljum eiga við `class` á element er hentugast að nota [`classList`](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList)
+* Hefur aðferðir til að breyta `class` án þess að fara í strengjaleikfimi
+  * Getum nálgast `class` sem streng gegnum `className`
+
+---
+
+## Forrit sem bregðast við atburðum
+
+* Þegar við skrifum flóknari forrit tökum við yfirleitt við skipunum eða gögnum frá notendum
+* Hvernig getur forritið okkar vitað þegar slegið er á takka eða ýtt á músarhnapp?
+
+***
+
+* Notum _atburði_ (events) til að bregðast við hlutum sem gerast á einhverjum tímapunkti í framtíðinni
+* Atburðir gerast ósamstillt—eru _async_!
+
+***
+
+## Taka þátt í atburðum
+
+* Skráum að við viljum meðhöndla vissa tegund af atburð á ákveðnum nóðum
+* Þegar atburður gerist eru allir þeir sem skráð sig hafa látnir vita í (flestum tilfellum) FIFO (first–in, first–out) röð
+* Aðeins ein meðhöndlun á sér stað í einu
+
+***
+
+## Skrá meðhöndlun
+
+* Skráum meðhöndlun á nóðu með fallinu `element.addEventListener(name, listener)`
+  * `name` er nafn á atburð
+  * `listener` er **fall sem keyrir við atburð**
+
+***
+
+## Upplýsingar um atburð
+
+* Fáum hlut—[Event](https://developer.mozilla.org/en-US/docs/Web/API/Event)—með upplýsingum um atburð sem argument í fall
+  * Oftast kallað `e` eða `event`
+* Upplýsingar eru t.d. um hvaða lykil var slegið á lyklaborð, eða hvaða takka á mús
+
+***
+
+## Sjálfgefin hegðun
+
+* Sumir atburðir valda sjálfgefinni hegðun
+  * `<a href>` mun senda okkur þangað sem `href` bendir
+  * Að ýta á niður ör mun skruna síðu niður
+* `preventDefault()` á Event hlut stoppar sjálfgefna hegðun
+
+---
+
+## Einingar
+
+* Þegar við vinnum með forrit er þeim yfirleitt skipt upp í einingar
+* Safnar saman virkni á einum stað, inniheldur föll og breytur
+* Skilgreinum API (Application Programming Interface) fyrir einingu
+
+***
+
+## Einingar í JavaScript
+
+* Þurfum að geta búið til sérstakt scope fyrir hverja einingu
+* Einingar eru ekki studdar í ECMAScript 5 en getum notað _nafnlaus föll_
+* Einingar eru studdar í ECMAScript 6 með `import` og `export`
+
+***
+
+## JavaScript modules
+
+* ECMAScript 2015 skilgreinir [JavaScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
+* Notar _import_ og _export_ syntax
+* Stuðningur hefur hægt og rólega aukist í vöfrum, [getum notað í dag með ~94% stuðning](https://caniuse.com/es6-module)
+
+---
+
+## Ósamstillt forritun (async programming)
+
+* Þegar forritin okkar fara að nýta hluti sem eru ekki í minni þurfum við að beita öðrum aðferðum í forritun
+* Það er _hratt_ að sækja hluti í minni, _hægara_ að sækja á disk og (oftast) enn _hægara_ að sækja yfir net
+* Bíðum ekki eftir því að beiðni klárist, nýtum _ósamstillta forritun_ (asynchronous/async programming)
+
+***
+
+## Callbacks
+
+* Ein leið til að vinna með async kóða, t.d. í atburðum
+* Köllum í fall sem tekur langan tíma, eða verður kallað í seinna, með _callback_ argument
+* Fallið kallar í _callback_ fall með niðurstöðu þegar búið
+* Ef við köllum í annað fall sem tekur langan tíma úr _callback_ þurfum við annað callback o.s.fr. o.s.fr.
+
+***
+
+## Promises
+
+* [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) er hjúpun fyrir gildi sem _mun verða til_ í framtíðinni
+* Gerir asynchronous forritun auðveldari
+* Öðruvísi hugtak en callbacks, vinnum með hjúpuð gildi í staðinn fyrir eitthvað sem við köllum í framhaldi
+
+***
+
+* Þegar við vinnum með promise skilgreinum við
+  * `then` callback til að vinna með gildið, fær skilagildi sem argument
+  * `catch` callback til að vinna með villu, fær villu sem argument
+* `then` og `catch` eru föll á Promise
+
+***
+
+## async og await
+
+* [`async await`](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await) er önnur leið til að vinna með async kóða
+* Leyfir okkur að _bíða_ eftir async aðgerð í línulegu flæði
+* Merkjum föll sem þarf að bíða eftir með `async`
+* Merkjum að við ætlum að bíða með `await`
+* Grípum villur með `try catch`
+
+***
+
+## Villumeðhöndlun í JavaScript
+
+* JavaScript hefur ekki eins villumeðhöndlun og HTML og CSS
+* Ef eitthvað brotnar eru líkur á að það hafi áhrif á _allt_
+* Verðum að hafa í huga
+
+***
+
+## Unobtrusive JavaScript
+
+Alveg eins og við aðskiljum útlit frá efni viljum við aðskilja forrit frá efni.
+
+Tengt progressive enhancement er hugtakið _unobtrusive JavaScript_.
+
+* Aðskilnaður hegðunar frá markupi
+* Sem minnst fótspor — ekki skilgreina í global scope
+* Athuga hvort virkni sé studd og þá bæta henni við
+
+---
+
+## Request—response
+
+* HTTP byggir á request—response milli client og server
+* Client sendir request á server
+* Server framkvæmir aðgerðir og sendir response á client
+
+***
+
+## HTTP aðferðir
+
+* HTTP Request þarf að hafa aðferð (method) tilgreinda
+  * Stundum kölluð _sögn_
+* HTTP 1.0 og 1.1 skilgreina þær flestar sem notaðar eru í dag
+
+***
+
+* `GET` – biður um síðu, lang mest notaða aðferðin!
+* `POST` – Biður server um að taka við gögnum í request sem nýrri einingu. T.d. nýtt svar við umræðuþræði eða ný gögn í gagnagrunni
+* `PUT`, `DELETE` o.fl. notað í vefþjónustum, ekki á vefnum
+
+***
+
+## Stöðukóðar — status codes
+
+Þegar þjónn svarar með response gefur hann upp stöðukóða, sem tölu og lesanlegan texta
+
+* `1xx` – Til upplýsinga
+* `2xx` – Gekk, success
+* `3xx` – Áframsending, redirection
+* `4xx` – Villa hjá client
+* `5xx` – Villa hjá server
+
+---
+
+## JSON
+
+* JavaScript Object Notation
+* Létt gagna format sem er auðvelt að lesa og skrifa, bæði fyrir menn og vélar
+* Byggir á almennum gagnastrúktúrum
+  * Heiti/gildi pörum (objects, dictionary, hash table o.s.fr.)
+  * Röðuðum listum (array, vector o.s.fr.)
+
+***
+
+## Ajax
+
+* _Asynchronous JavaScript and XML_
+* Skilgreint 2005
+  * [Ajax: A New Approach to Web Applications](https://immagic.com/eLibrary/ARCHIVES/GENERAL/ADTVPATH/A050218G.pdf)
+* Í dag ekki ein tækni heldur hugtakið að sækja gögn ósamstillt (async) til að koma í veg fyrir að hlaða allri síðunni aftur
+
+***
+
+## `fetch`
+
+* [`fetch`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) er API til að eiga ajax samskipti
+* Einfalt fyrir einfaldar fyrirspurnir, en getum gert flóknari með góðu API
+* Notar promises
+
+***
+
+## Vefþjónustur
+
+* Margt fellur undir hugtakið _vefþjónusta_
+* Í grunninn einhver samskipti milli tölva yfir net
+* Verið til í einhverri mynd síðan farið var að tengja saman tölvur
+
+***
+
+## Að vinna með URL
+
+* [`url standard`](https://url.spec.whatwg.org/) skilgreinir hvernig URL virkar og API tengt því
+* Skilgreinir `URL` og `URLSearchParams` API
+
+***
+
+## Stöður
+
+Þegar gögn eru sótt yfir vefþjónustu getum við lent í mismumandi stöðum:
+
+* `loading`, hvað sýnum við meðan við erum að sækja gögn? Það getur tekið allt frá örfáfum `ms` uppí fleiri `sek`
+* `error`, hvað sýnum við ef þjónustan skilar villu?
+* `empty`, þjónustan svaraði en við fáum „tóma“ svarið
+* `data`, allt gekk upp
+
+---
+
+## eslint
+
+* [eslint](https://eslint.org/) er mest notaði JavaScript linter í dag og sá sem við munum nota
+* Skrifaður með það í huga að vera almennur og bjóða upp á _plugins_
+* Skilgreinum reglur í `.eslintrc` skrá í rót verkefnis
+
+***
+
+## prettier
+
+* [prettier](https://prettier.io/) er „opinionated code formatter“
+* Sér um að móta kóðann okkar skv. reglum
+* Getum notað þær sem við skilgreinum með eslint
+
+---
+
+## Villumeðhöndlun
+
+* JavaScript hefur stuðning við [`try catch`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch) eða `exceptions`
+* Kóði getur _kastað_ villum: innbyggðum og okkar eigin
+* _Grípum_ villur og gerum eitthvað í þeim
+
+---
+
+## Fallaforritun
+
+* Ein leið til að vinna með flækjustig
+* Blöndum saman einföldum föllum til að gera flókna hluti
+* Búum til _abstraction_
+
+***
+
+## Æðri föll – Higher-order functions
+
+* Gera a.m.k. annað af:
+  * Taka inn eitt eða fleiri fall sem argument
+  * Skila falli
+* Önnur föll eru „á fyrstu stétt“
+
+***
+
+## Hrein föll – Pure Functions
+
+* Skila alltaf sama úttaki fyrir sama inntak
+* Úttak veltur ekki á stöðu eða upplýsingum fyrir utan fall—óháð umhverfi sínu
+* Fall veldur ekki breytingum á umhverfi—engar aukaverkanir
+
+---
+
+## Hlutir og hjúpun
+
+* Objects & [encapsulation](https://en.wikipedia.org/wiki/Encapsulation_(computer_programming))
+* Ein af aðal hugmyndum hlutbundinnar forritunar er að skipta forritum upp og láta hvern hluta bera ábyrgð á eigin stöðu
+* Hjúpum virkni og flækjustig, vinnum með í gegnum _interface_
diff --git a/namsefni/42.upprifjun-samantekt/5.verkefni.md b/namsefni/42.upprifjun-samantekt/5.verkefni.md
new file mode 100644
index 0000000..5085d5a
--- /dev/null
+++ b/namsefni/42.upprifjun-samantekt/5.verkefni.md
@@ -0,0 +1,89 @@
+---
+title: Upprifjun – Verkefni samantekt
+---
+
+# Upprifjun – Verkefni samantekt
+
+## Vefforritun 1 — TÖL107G
+
+### Ólafur Sverrir Kjartansson, [osk@hi.is](mailto:osk@hi.is)
+
+---
+
+## Verkefni 1
+
+- Setja upp textaritil og aðgang hjá Netlify.
+- Búa til möppur og skjöl.
+- Nota Netlify til að gera verkefni aðgengilegt á internetinu.
+
+***
+
+## Verkefni 2
+
+- Vinna með og velja HTML element.
+- Nota HTML validator og huga að því hvernig HTML er skrifað.
+- Huga að aðgengi og nota aXe tólið.
+
+***
+
+## Verkefni 3
+
+- Tengja CSS við HTML.
+- Aðlaganir á HTML fyrir CSS.
+- Notkun á grunn CSS með box model; visual formatting model og; letri og litum.
+
+***
+
+## Verkefni 4
+
+- Nota CSS custom properties (variables, breytur)
+- Nota flexbox til að stýra útliti
+- Útfæra „card“ viðmót
+
+***
+
+## Verkefni 5
+
+- Útfæra skalanlegann vef.
+- Nota grid til að stýra útliti.
+- Útfæra kvikun.
+
+***
+
+## Verkefni 6
+
+- Setja upp Node.js og NPM og nota til að sækja pakka.
+- Nota tól fengin af NPM.
+- Keyra tól í vinnuflæði með package.json.
+
+***
+
+## Verkefni 7
+
+- Búa til JavaScript forrit sem notar föll, flæðistýringar og ítranir.
+- Nota strengi og tölur í JavaScript.
+- Nota fylki og hluti í JavaScript.
+
+***
+
+## Verkefni 8
+
+- Skipta JavaScript forriti upp í einingar.
+- Forrita á móti DOM, Document Object Model.
+- Setja upp eslint.
+
+***
+
+## Verkefni 9
+
+- Forrita á móti DOM, Document Object Model.
+- Forrita á móti API með fetch.
+- Lesa gögn úr JSON.
+
+***
+
+## Verkefni 10
+
+- Útbúa eigið verkefni með HTML, CSS og JavaScript.
+- Nota Web API.
+- Nota JavaScript tól.
diff --git a/namsefni/42.upprifjun-samantekt/img/boxmodel.png b/namsefni/42.upprifjun-samantekt/img/boxmodel.png
new file mode 100644
index 0000000..eb3651d
Binary files /dev/null and b/namsefni/42.upprifjun-samantekt/img/boxmodel.png differ
diff --git a/namsefni/42.upprifjun-samantekt/img/flex-direction-terms.svg b/namsefni/42.upprifjun-samantekt/img/flex-direction-terms.svg
new file mode 100644
index 0000000..70fde88
--- /dev/null
+++ b/namsefni/42.upprifjun-samantekt/img/flex-direction-terms.svg
@@ -0,0 +1,66 @@
+<svg xmlns="http://www.w3.org/2000/svg" width='665' height='277' viewBox='0 0 665 277'>
+	<style>
+		:root { fill: transparent; }
+		text,tspan { font-family: sans-serif; text-anchor: middle; font-size: 18px; fill: currentColor; }
+		.container { fill: #888; }
+		.item > rect { fill: #ddd; }
+		.item > text { font-size: 40px; font-weight: bold; fill: #f8f8f8; }
+		.arrow { color: hsl(0,80%,40%); stroke: currentColor; stroke-width: 3; }
+		.arrow > path + path { stroke: transparent; fill: currentColor; }
+		.bracket { color: hsl(120,80%,30%); }
+		.bracket > path { stroke: currentColor; stroke-width: 2; }
+		.side { color: hsl(240,80%,50%); }
+		.side > path { stroke-width: 3; stroke: currentColor; }
+		.display, .item > .display { font-size: 16px; font-weight: normal; font-style: italic; fill: #444; }
+	</style>
+	<g transform='translate(40,40)'>
+		<g class='side' transform="translate(503,1.5)">
+			<path d="M -10 0 h 30" stroke-dasharray="6"/>
+			<text x='25' y='4' style="text-anchor: start; ">cross start</text>
+		</g>
+		<g class='side' transform="translate(503,118.5)">
+			<path d="M -10 0 h 30" stroke-dasharray="6"/>
+			<text x='25' y='4' style="text-anchor: start; ">cross end</text>
+		</g>
+		<g class='side' transform="translate(1.5,120)">
+			<path d="M 0 -10 v 40" stroke-dasharray="5 5"/>
+			<text x='0' y='40'><tspan>main</tspan><tspan x='0' y='58'>start</tspan></text>
+		</g>
+		<g class='side' transform="translate(498.5,120)">
+			<path d="M 0 -10 v 40" stroke-dasharray="5 5"/>
+			<text x='0' y='40'><tspan>main</tspan><tspan x='0' y='58'>end</tspan></text>
+		</g>
+		<rect class='container' x='0' y='0' width='500' height='120' rx='10' ry='10' />
+		<text x='157.5' y='136' class='display'>flex container</text>
+		<g class='item' transform='translate(5,5)'>
+			<rect x='0' y='0' width='150' height='110' rx='5' ry='5' />
+			<text x='75' y='70'>1</text>
+			<text x='146' y='106' class='display' style="text-anchor: end;">flex item</text>
+		</g>
+		<g class='item' transform='translate(160,5)'>
+			<rect x='0' y='0' width='335' height='110' rx='5' ry='5' />
+			<text x='168' y='70'>2</text>
+			<text x='3' y='106' class='display' style="text-anchor: start;">flex item</text>
+		</g>
+		<g class='arrow' transform='translate(-1,60)'>
+			<circle cx='3.5' cy='0' r='5' />
+			<path d="M 8 0 h 600" />
+			<path d='M 608 0 v -5 l 10 5 l -10 5 v -5' />
+			<text x='550' y='-4' stroke='transparent' fill='black'>main axis</text>
+		</g>
+		<g class='arrow' transform='translate(250,222.5) rotate(-90)'>
+			<circle cx='220' cy='0' r='5' />
+			<path d="M 215 0 h -220" />
+			<path d='M -5 0 v -5 l -10 5 l 10 5 v -5' />
+			<text x='50' y='-4' stroke='transparent' fill='black'>cross axis</text>
+		</g>
+		<g class='bracket' transform='translate(1,-15)'>
+			<path d="M 0 10 v -10 h 498 v 10" />
+			<text x='249' y='-4'>main size</text>
+		</g>
+		<g class='bracket' transform='translate(-15,119) rotate(-90)'>
+			<path d="M 0 10 v -10 h 118 v 10" />
+			<text x='59' y='-4'>cross size</text>
+		</g>
+	</g>
+</svg>
\ No newline at end of file
diff --git a/namsefni/42.upprifjun-samantekt/readme.md b/namsefni/42.upprifjun-samantekt/readme.md
new file mode 100644
index 0000000..fc11ac7
--- /dev/null
+++ b/namsefni/42.upprifjun-samantekt/readme.md
@@ -0,0 +1,7 @@
+# Upprifjun og samantekt
+
+* [HTML](1.html.md)
+* [CSS](2.css.md)
+* [Tæki og tól](3.tools.md)
+* [JavaScript](4.javascript.md)
+* [Verkefni](5.verkefni.md)
diff --git a/vikur/vika-14.md b/vikur/vika-14.md
new file mode 100644
index 0000000..384a681
--- /dev/null
+++ b/vikur/vika-14.md
@@ -0,0 +1,18 @@
+# Vika 14, 18.–24. nóvember 2024
+
+## Fyrirlestrar
+
+- [Fyrirlestur 14.1, upprifjun: HTML (13:16)](https://youtu.be/xaI5WoV3VZQ)
+- [Fyrirlestur 14.2, upprifjun: CSS (31:10)](https://youtu.be/wjyAYq34ohk)
+- [Fyrirlestur 14.3, upprifjun: Tæki&tól (14:41)](https://youtu.be/ey7avh8aUE4)
+- [Fyrirlestur 14.4, upprifjun: JavaScript (28:03)](https://youtu.be/qi2Dnq5u_d0)
+- [Fyrirlestur 14.5, upprifjun: Verkefni (9:33)](https://youtu.be/h0kdPZrdPWo)
+
+## Námsefni
+
+- [Upprifjun og samantekt á námsefni](../namsefni/42.upprifjun-samantekt/)
+
+## Verkefni vikunnar
+
+- [ ] Skila [hópverkefni 2](https://github.com/vefforritun/vef1-2024-h2)
+- [ ] Læra fyrir lokapróf!