From ab675e6bb5ea8a0c92461ef8f0888ba4701a0dd1 Mon Sep 17 00:00:00 2001
From: Justus Sturkenboom <j.p.sturkenboom@hva.nl>
Date: Wed, 10 Apr 2024 15:15:10 +0200
Subject: [PATCH 1/9] Niveau verandering sprint 3. Closes #54 & #54

---
 docs/onderwijs.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/onderwijs.md b/docs/onderwijs.md
index 34d4620..7afab40 100644
--- a/docs/onderwijs.md
+++ b/docs/onderwijs.md
@@ -91,7 +91,7 @@ Alles gescript en voorgekauwd, we gaan nu reflecteren op indicator X, die indica
 In groepjes van 5, in eigen squad, docent loopt rond
 Indicatoren gescript waar we op feedbacken, tijd inplannen per indicator. In groepjes, vragen wat de indicator betekend, na een rondje geeft de docent toelichting en wordt gereflectered. Dan door naar de volgende ronde.
 
-#### Sprint 3
+##### Sprint 3
 
 In duo’s, neem telkens 15 mins om te reflecteren op een indicator. Bespreek eerst wat de indicator betekent.
 

From 8d4e27ba728e511a235b628dcf50fbf27b511a64 Mon Sep 17 00:00:00 2001
From: Justus Sturkenboom <justus@ju5tu5.nl>
Date: Wed, 10 Apr 2024 15:19:06 +0200
Subject: [PATCH 2/9] old things?

---
 docs/reflectie.md | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/docs/reflectie.md b/docs/reflectie.md
index 99752d2..cbafb11 100644
--- a/docs/reflectie.md
+++ b/docs/reflectie.md
@@ -278,13 +278,13 @@ Uit NVAO stuk:
 
 #### Cohort 2022-23
 
-Alle afstudeerwerken…
+4 afstudeerwerken…
 
 Screenshot en beschrijving van de eindopdrachten en links naar dossiers (achter login).
 
 #### Cohort 2023-24
 
-Selectie afstudeerwerken…
+6 afstudeerwerken…
 
 Screenshot en beschrijving van een selectie eindopdrachten en links naar dossiers (achter login).
 
@@ -300,3 +300,8 @@ Boudewijn, Daan, Daphne, Finn, Justin, Matthijs, Shauri
 
 wordt tzt. aangevuld met nieuwe inzichten.
 
+## Studenten aan het woord
+
+Welke onderwerpen verdienen nog aandacht en zijn hierboven niet aangestipt?
+
+Wat vertel jij over je opleiding op een feestje?
\ No newline at end of file

From 8c1de1de08952ecf2d5315f5228449a96168071c Mon Sep 17 00:00:00 2001
From: Justus Sturkenboom <j.p.sturkenboom@hva.nl>
Date: Wed, 10 Apr 2024 15:37:30 +0200
Subject: [PATCH 3/9] Update deploy.yml

Updated after recieving the following:
> Please update the following actions to use Node.js 20: actions/checkout@v3, actions/setup-node@v3, actions/upload-artifact@v3. For more information see: https://github.blog/changelog/2023-09-22-github-actions-transitioning-from-node-16-to-node-20/.
---
 .github/workflows/deploy.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index d29a84d..9e225a2 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -12,12 +12,12 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
           cache: npm
       
       - name: Install dependencies

From 84886d79172cdc822dc8a2843d395e0a362f8719 Mon Sep 17 00:00:00 2001
From: Justus Sturkenboom <j.p.sturkenboom@hva.nl>
Date: Wed, 10 Apr 2024 20:02:42 +0200
Subject: [PATCH 4/9] Update deploy.yml

Trigger rebuild on new discussion..
---
 .github/workflows/deploy.yml | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
index 9e225a2..10c54fa 100644
--- a/.github/workflows/deploy.yml
+++ b/.github/workflows/deploy.yml
@@ -6,7 +6,8 @@ on:
   push:
     branches:
       - main
-  
+  discussion:
+    types: [created]
 jobs:
   build_site:
     runs-on: ubuntu-latest

From 92962d48807504e7997ec5f85a236c422164958f Mon Sep 17 00:00:00 2001
From: Justus Sturkenboom <justus@ju5tu5.nl>
Date: Wed, 10 Apr 2024 23:01:14 +0200
Subject: [PATCH 5/9] Added discussions as an <aside> after the corresponding
 heading element

---
 docs/assets/style/print.css     |  3 ++-
 docs/assets/style/web.css       | 27 +++++++++++++++++++++++++++
 src/helpers/fdnd-discussions.js | 16 +++++++++++++---
 3 files changed, 42 insertions(+), 4 deletions(-)

diff --git a/docs/assets/style/print.css b/docs/assets/style/print.css
index cfb878e..937a20b 100644
--- a/docs/assets/style/print.css
+++ b/docs/assets/style/print.css
@@ -29,7 +29,8 @@ header h1 > span::after {
 
 header nav,
 header .settings,
-footer {
+footer,
+section aside {
   display: none;
 }
 
diff --git a/docs/assets/style/web.css b/docs/assets/style/web.css
index 307ce92..caddd2e 100644
--- a/docs/assets/style/web.css
+++ b/docs/assets/style/web.css
@@ -431,9 +431,15 @@ header {
 
 /* Discussies (discussion) invisible */
 [data-discussion='false'] {
+  section:has(.icon-discussion) {
+    border-right-color: transparent;
+  }
   & a.discussion-link {
     display: none;
   }
+  section aside {
+    display: none;
+  }
 }
 
 /* Subnav / table of contents (in main) */
@@ -604,6 +610,27 @@ section {
       filter: none !important;
     }
   }
+
+  & aside.discussion {
+    margin: var(--gap) 0;
+    padding: var(--nav-padding);
+    border-radius: var(--rounded);
+    background: #c2c2c2c2;
+
+    & span {
+      display: block;
+      clear: both;
+      &:first-of-type {
+        font-weight: bold;
+        &:before {
+          content: 'Discussie gestart door ';
+        }
+      }
+      &:last-of-type {
+        text-align: right;
+      }
+    }
+  }
 }
 
 main section:first-of-type {
diff --git a/src/helpers/fdnd-discussions.js b/src/helpers/fdnd-discussions.js
index fbf7832..e90cb42 100644
--- a/src/helpers/fdnd-discussions.js
+++ b/src/helpers/fdnd-discussions.js
@@ -1,11 +1,12 @@
 import 'dotenv/config'
 
+import { SKIP, visit } from 'unist-util-visit'
+
 import { graphql } from '@octokit/graphql'
 import { h } from 'hastscript'
 import { hasProperty } from 'hast-util-has-property'
 import { headingRank } from 'hast-util-heading-rank'
 import { slug } from 'github-slugger'
-import { visit } from 'unist-util-visit'
 
 const graphqlWithAuth = graphql.defaults({
   headers: { authorization: `token ${process.env.GITHUB_TOKEN}` },
@@ -26,7 +27,7 @@ const response = await graphqlWithAuth(`
             comments {
               totalCount
             }
-            bodyHTML
+            body
             url
           }
         }
@@ -41,7 +42,7 @@ export default function fdndDiscussions(options = {}) {
     const filenameSlug = slug(file.menu.find((item) => item.basename === file.basename).menuname)
     const discussions = allDiscussions.filter((discussion) => discussion.category.slug === filenameSlug)
 
-    visit(tree, 'element', (node) => {
+    visit(tree, 'element', (node, index, parent) => {
       if (headingRank(node) && node.properties && hasProperty(node, 'id')) {
         const discussion =
           discussions.length > 0 ? discussions.find((discussion) => discussion.title === node.properties.id) : null
@@ -54,6 +55,15 @@ export default function fdndDiscussions(options = {}) {
               h('span', { class: 'icon icon-discussion' })
             )
           )
+          parent.children.splice(
+            index + 1,
+            0,
+            h('aside', { class: 'discussion' }, [
+              h('span', `${discussion.author.login}: `),
+              `${discussion.body} `,
+              h('span', `${discussion.comments.totalCount} reacties`),
+            ])
+          )
         } else {
           node.children.push(
             h(

From 3ad162c43fcdd31ae8e37a44e383a54c27cf3a05 Mon Sep 17 00:00:00 2001
From: Justus Sturkenboom <justus@ju5tu5.nl>
Date: Thu, 11 Apr 2024 09:08:42 +0200
Subject: [PATCH 6/9] Discussion on screens >52rem are placed outside text

---
 docs/assets/style/web.css | 45 ++++++++++++++++++++++++---------------
 1 file changed, 28 insertions(+), 17 deletions(-)

diff --git a/docs/assets/style/web.css b/docs/assets/style/web.css
index caddd2e..2732978 100644
--- a/docs/assets/style/web.css
+++ b/docs/assets/style/web.css
@@ -42,6 +42,7 @@
   --svg-filter: invert(4%) sepia(84%) saturate(7069%) hue-rotate(246deg) brightness(64%) contrast(105%);
 
   --gradient: linear-gradient(var(--gradient-angle), var(--color-purple) 0%, var(--color-green) 100%);
+
   @media (color-gamut: p3) {
     --gradient: linear-gradient(
       var(--gradient-angle) in oklch,
@@ -65,6 +66,7 @@
   --svg-filter: invert(92%) sepia(93%) saturate(32%) hue-rotate(252deg) brightness(105%) contrast(100%);
 
   --gradient: linear-gradient(var(--gradient-angle), var(--color-purple-negative) 0%, var(--color-green-negative) 100%);
+
   @media (color-gamut: p3) {
     --gradient: linear-gradient(
       var(--gradient-angle) in oklch,
@@ -388,7 +390,7 @@ header {
       }
       & [aria-label='false'] {
         &:before {
-          content: '0';
+          content: '';
           float: left;
         }
       }
@@ -610,26 +612,35 @@ section {
       filter: none !important;
     }
   }
+}
 
-  & aside.discussion {
-    margin: var(--gap) 0;
-    padding: var(--nav-padding);
-    border-radius: var(--rounded);
-    background: #c2c2c2c2;
+/* Discussion contents */
+section aside.discussion {
+  margin: var(--gap) 0;
+  padding: var(--nav-padding);
+  border-radius: var(--rounded);
+  background: #c2c2c2c2;
 
-    & span {
-      display: block;
-      clear: both;
-      &:first-of-type {
-        font-weight: bold;
-        &:before {
-          content: 'Discussie gestart door ';
-        }
-      }
-      &:last-of-type {
-        text-align: right;
+  & span {
+    display: block;
+    clear: both;
+    &:first-of-type {
+      font-weight: bold;
+      &:before {
+        content: 'Discussie gestart door ';
       }
     }
+    &:last-of-type {
+      text-align: right;
+    }
+  }
+  /* large screens? */
+  @media (min-width: 52rem) {
+    position: absolute;
+    margin: 0;
+    max-width: 100%;
+    left: calc(100% + var(--gap));
+    top: 0;
   }
 }
 

From 706cb563a82202148b118dca2da40ee8b91ab6ca Mon Sep 17 00:00:00 2001
From: Justus Sturkenboom <justus@ju5tu5.nl>
Date: Fri, 19 Apr 2024 08:03:56 +0200
Subject: [PATCH 7/9] unstaged changes

---
 docs/assets/style/web.css | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/docs/assets/style/web.css b/docs/assets/style/web.css
index 2732978..a4fa12a 100644
--- a/docs/assets/style/web.css
+++ b/docs/assets/style/web.css
@@ -616,6 +616,8 @@ section {
 
 /* Discussion contents */
 section aside.discussion {
+  position: relative;
+  font-size: 0.9rem;
   margin: var(--gap) 0;
   padding: var(--nav-padding);
   border-radius: var(--rounded);
@@ -636,11 +638,12 @@ section aside.discussion {
   }
   /* large screens? */
   @media (min-width: 52rem) {
-    position: absolute;
-    margin: 0;
-    max-width: 100%;
-    left: calc(100% + var(--gap));
-    top: 0;
+    float: right;
+    clear: right;
+    margin-left: calc(100% + var(--gap));
+    /* top: 0; */
+
+    /* max-width: 100%; */
   }
 }
 

From f5d23cb151cbfeb5b046cfd801c378236b805694 Mon Sep 17 00:00:00 2001
From: Justus Sturkenboom <justus@ju5tu5.nl>
Date: Fri, 19 Apr 2024 08:17:16 +0200
Subject: [PATCH 8/9] Fixed external link images

---
 docs/assets/img/file-text.svg     |  7 +++++++
 docs/assets/img/file-video.svg    |  4 ++++
 docs/assets/img/file-zip.svg      | 10 ++++++++++
 docs/assets/img/link-external.svg |  5 +++++
 docs/boksa.md                     |  9 ++++++++-
 5 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 docs/assets/img/file-text.svg
 create mode 100644 docs/assets/img/file-video.svg
 create mode 100644 docs/assets/img/file-zip.svg
 create mode 100644 docs/assets/img/link-external.svg

diff --git a/docs/assets/img/file-text.svg b/docs/assets/img/file-text.svg
new file mode 100644
index 0000000..1a23b99
--- /dev/null
+++ b/docs/assets/img/file-text.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+  <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" />
+  <line x1="9" y1="9" x2="10" y2="9" />
+  <line x1="9" y1="13" x2="15" y2="13" />
+  <line x1="9" y1="17" x2="15" y2="17" />
+</svg>
diff --git a/docs/assets/img/file-video.svg b/docs/assets/img/file-video.svg
new file mode 100644
index 0000000..9afee7f
--- /dev/null
+++ b/docs/assets/img/file-video.svg
@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M15 10l4.553 -2.276a1 1 0 0 1 1.447 .894v6.764a1 1 0 0 1 -1.447 .894l-4.553 -2.276v-4z" />
+  <rect x="3" y="6" width="12" height="12" rx="2" />
+</svg>
diff --git a/docs/assets/img/file-zip.svg b/docs/assets/img/file-zip.svg
new file mode 100644
index 0000000..170c443
--- /dev/null
+++ b/docs/assets/img/file-zip.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M6 20.735a2 2 0 0 1 -1 -1.735v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2h-1" />
+  <path d="M11 17a2 2 0 0 1 2 2v2a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1v-2a2 2 0 0 1 2 -2z" />
+  <line x1="11" y1="5" x2="10" y2="5" />
+  <line x1="13" y1="7" x2="12" y2="7" />
+  <line x1="11" y1="9" x2="10" y2="9" />
+  <line x1="13" y1="11" x2="12" y2="11" />
+  <line x1="11" y1="13" x2="10" y2="13" />
+  <line x1="13" y1="15" x2="12" y2="15" />
+</svg>
diff --git a/docs/assets/img/link-external.svg b/docs/assets/img/link-external.svg
new file mode 100644
index 0000000..55427dd
--- /dev/null
+++ b/docs/assets/img/link-external.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path d="M11 7h-5a2 2 0 0 0 -2 2v9a2 2 0 0 0 2 2h9a2 2 0 0 0 2 -2v-5" />
+  <line x1="10" y1="14" x2="20" y2="4" />
+  <polyline points="15 4 20 4 20 9" />
+</svg>
diff --git a/docs/boksa.md b/docs/boksa.md
index 7b2b586..a9a3ec2 100644
--- a/docs/boksa.md
+++ b/docs/boksa.md
@@ -12,7 +12,6 @@ Zoals overal binnen de ICT vind ook binnen het frontend vakgebied *arbeidsdeling
 
 Een goede frontender wordt gekenmerkt door een aantal belangrijke eigenschappen. Vooraleerst beschikt deze over sterke technische vaardigheden op het gebied van HTML, CSS en JavaScript en ontwerpen voor het web. Heel belangrijk is gedegen kennis op het gebied van gebruiksvriendelijkheid en toegankelijkheid. Een frontender kan zich inleven in de gebruiker en stelt deze centraal in het ontwerp- en ontwikkelproces. Daarbovenop heeft een frontender uitstekende communicatieve vaardigheden en lost met een team op een constructieve manier problemen op. Tenslote blijven frontenders voortdurend bijleren gezien de snelle ontwikkelingen in het vak. ([Cohier, 2018](https://css-tricks.com/what-makes-a-good-front-end-developer/))
 
-
 - [The spectrum of design roles in 2018](https://uxdesign.cc/the-spectrum-of-digital-design-roles-in-2018-3286390a9966) Op UX-collective worden verschillende Designer rollen neest elkaar gezet. 
 
 - [Concept to Code, code literay](https://uxmag.com/articles/concept-to-code) Code is the material that breathes life into a user experience, so we ought to get familiar with it. The enthusiast. The mash-up artist. The inventor. The wizard.
@@ -58,6 +57,14 @@ Visual thinking, schetsen
 
 #### Teamcanvas
 
+Een raamwerk dat helpt bij het ontwikkelen en uitlijnen van hun teamdynamiek. Met aandacht invullen helpt teams bij:
+- Definiëren van doelen voor het team en voor individuele teamleden;
+- Afspraken over kernwaarden en gedragsregels;
+- In kaart brengen van sterke en zwakke punten;
+- Bespreken van behoeften en verwachtingen.
+
+Lees meer op: [https://www.theteamcanvas.com/](https://www.theteamcanvas.com/)
+
 #### Conventies
 
 Code Conventies, naamgeving, etc…

From 1caed7108b59796b8177262a3532c356dbc909a5 Mon Sep 17 00:00:00 2001
From: Justus Sturkenboom <justus@ju5tu5.nl>
Date: Fri, 19 Apr 2024 09:10:32 +0200
Subject: [PATCH 9/9] BOKSA aangepast

---
 docs/boksa.md | 91 +++++++++++++++++++++++++++------------------------
 1 file changed, 49 insertions(+), 42 deletions(-)

diff --git a/docs/boksa.md b/docs/boksa.md
index a9a3ec2..c1e46b6 100644
--- a/docs/boksa.md
+++ b/docs/boksa.md
@@ -33,7 +33,7 @@ Bij elke leertaak wordt de DLC doorlopen. Daardoor i) ontwikkelen studenten een
 
 De development lifecycle hanteert de volgende fasering:
 
-1. [Analyseren](#analyseren) - bijvoorbeeld: grip krijgen op een taak door gesprekken met een opdrachtgever, schrijven van een debriefing, maken van een todo lijst, inventarisatie van bestaande informatie, overzicht creëren, plannen, definition of done etc.
+1. [Analyseren](#analyseren) - bijvoorbeeld: teamorganisatie, grip krijgen op een opdracht door gesprekken met een opdrachtgever, schrijven van een debriefing, maken van een takenlijst, inventarisatie van bestaande informatie, overzicht creëren, plannen, definition of done et cetera.
 2. [Ontwerpen](#ontwerpen) - bijvoorbeeld: het maken van idee-schetsen, customer journey, breakdown chart, wireflows, navigatiestructuur en layout.
 3. [Bouwen](#bouwen) - bijvoorbeeld: toepassen van webtechnologie (HTML, CSS, JS), gebruik van tooling, werken volgens conventies en wetgeving, documenteren en bijhouden van een changelog.
 4. [Integreren](#integreren) - bijvoorbeeld: publiceren, live zetten, uploaden naar de server, toevoegen in een bestaand systeem, ftp-en.
@@ -41,19 +41,9 @@ De development lifecycle hanteert de volgende fasering:
 
 ### Analyseren
 
-In de analysefase inventariseer je wat er moet gebeuren om een taak uit te voeren en formuleer je een aantal uitgangspunten waar je ontwerp aan moet voldoen.
+In de analyse fase onderzoek en inventariseer je wat er moet gebeuren om een taak uit te voeren. Er zijn verschillende technieken die je hierbij kunt gebruiken. De aanpak verschilt per sprint afhankelijk van de fase in je project. 
 
-Grip krijgen op een taak door gesprekken met een opdrachtgever, schrijven van een debriefing, maken van een todo lijst, inventarisatie van bestaande informatie, overzicht creëren, plannen, definition of done etc.
-
-Bij analyse hoort bijvoorbeeld briefing, debriefing, planning  en functionaliteiten beschrijven, job stories schrijven en burnpoints bepalen. 
-Analyseer de briefing. Breng het probleem in kaart en kies een belangrijk gebied om op te focussen qua oplossing. 
-Debriefing schrijven, probleem definitie, planning bepalen. En communiceren. 
-Visual thinking, schetsen
-
-- Briefing/debriefing https://www.joho.org/en/hoe-stel-je-een-goede-briefing-en-debriefing-onderzoeksomschrijving-en-terugkoppeling-daarop-op
-- 5 Tips For Writing A Job Story https://jtbd.info/5-tips-for-writing-a-job-story-7c9092911fc9
-- visual thinking
-- Styleguides en design systems https://www.linkedin.com/learning/ux-foundations-style-guides-and-design-systems/where-to-start?u=2132228
+Als je voor de eerste keer met een team samenwerkt is het handig om een [teamcanvas](#teamcanvas) in te vullen om afspraken te maken en [conventies](#conventies) vast te stellen. Vaak spreek je de opdrachtgever in een [briefing en debriefing](#briefing-en-debriefing) sessie.
 
 #### Teamcanvas
 
@@ -71,39 +61,46 @@ Code Conventies, naamgeving, etc…
 
 BEM, CUBE etc.
 
-#### Briefing en Debriefing
+- Styleguides en design systems https://www.linkedin.com/learning/ux-foundations-style-guides-and-design-systems/where-to-start?u=2132228
+
+#### Briefing en debriefing
 
 Briefing, Gesprek opdrachtgever
 
+- Briefing/debriefing https://www.joho.org/en/hoe-stel-je-een-goede-briefing-en-debriefing-onderzoeksomschrijving-en-terugkoppeling-daarop-op
+
 #### Contentanalyse
 
 Welke gegevens zijn beschikbaar, welke moeten gemaakt worden
 
 #### Projectbord inrichten
 
-Github Projects, Trello, Linear.app
+Github Projects, Trello, Linear.app, Todo List
 
 #### Projectinrichting
 
 Github, forks, boilerplates
 
-##### Taken vaststellen
+#### Taken vaststellen
 
 User scenario’s, User Stories, Job Stories
-Definition of Done, Todo List
+Definition of Done
 
-##### Planning poker
+- User scenario's https://usabilla.com/blog/how-user-scenarios-help-to-improve-your-ux/
+- 5 Tips For Writing A Job Story https://jtbd.info/5-tips-for-writing-a-job-story-7c9092911fc9
+
+#### Planning poker
 
 Planning Poker
 
-##### MoSCoW Prioritering
+#### MoSCoW Prioritering
 
 Must-haves\
 Should-haves\
 Could-haves\
 Want to have but will not have this sprint
 
-#### Budget
+#### Budgetten
 
 Beschikbare uren voor het project
 
@@ -111,45 +108,38 @@ Performance budget, hoeveel seconden mag een site inladen op welke snelheid. Wel
 
 a11y budget, welke WCAG standaard moet gehaald worden A+, A++, A+++
 
-#### Tech-stack vaststellen
+#### Tech-stack bepalen
 
 Onderbouwen met valide argumenten
 
 ### Ontwerpen
 
-Bij de start van deze fase weet je wat het doel en het resultaat van je project zijn.
-
-Je weet ook welke eisen de opdrachtgever en andere belangrijke partijen aan het resultaat stellen (Wat moet het kunnen en wat niet? Waar moet men rekening mee houden? Etc.)
+Bij de start van deze fase ken je het doel, beoogde resultaat en aanwezige materiaal voor jouw project. Je weet welke eisen opdrachtgever, eindgebruikers en andere belangrijke partijen aan het resultaat stellen. Het doel van de ontwerpfase is het maken van een ontwerp om te verkennen wat mogelijke oplossingsrichtingen zijn en een duidelijk beeld te vormen wat je gaat maken.
 
-Nu wordt het tijd om te kijken hoe het resultaat eruit zou kunnen zien.
+Soms maak je het ontwerp van een website *from scratch* maar in het frontend-vak krijg je vaak een ontwerp of huisstijl aangeleverd. Doorgaans is dit ontwerp onvolledig of slechts op één resolutie uitgewerkt. Heel af en toe is het ontwerp goed uitgewerkt en zijn alle *states* van (micro)interacties en transities tussen pagina’s ontworpen of beschreven. Als frontender neem je doorlopend ontwerpbeslissingen met betrekking tot structuur (semantiek), flow (breakpoints), (micro)interacties, animaties, toegankelijkheid en prestaties.
 
-Dit is een belangrijk moment in het project. Voor veel opdrachtgevers geldt dat ze nu pas duidelijk krijgen hoe het resultaat eruit zal zien. En dat is een moment waarop veel opdrachtgevers veel duidelijker kunnen aangeven wat ze wel en niet willen.
-https://werken-aan-projecten.nl/fasen-project/ontwerpfase/
+Aan het einde van de ontwerpfase is duidelijk hoe het resultaat van dit project eruit zal zien. Je maakt keuzes en evenutele alternatieve ontwerpen vallen af.
 
-Het maken van idee-schetsen, customer journey, breakdown chart, wireflows, navigatiestructuur en layout.
+~~In de ontwerpfase maakt een frontender idee-schetsen, wireframes, wireflows, break-down schetsen, site-maps en actor-diagrams. Maar ook inspiratie opdoen, patterns onderzoeken en ontwerp variaties maken... User scenario's bedenken, Customer Journey mapping, Job stories onderzoeken, Wireframes, wireflows, break-down schetsen, actor-diagrams maken.~~
 
-In de ontwerpfase moet een frontender wireframes, wireflows, break-down schetsen en actor-diagrams kunnen maken. Maar ook inspiratie opdoen, patterns onderzoeken en ontwerp variaties maken...
-User scenario's bedenken, Customer Journey mapping, Job stories onderzoeken, Wireframes, wireflows, break-down schetsen, actor-diagrams maken.
+#### Visual Thinking
 
-
-- User scenario's https://usabilla.com/blog/how-user-scenarios-help-to-improve-your-ux/
-- Using Customer Journey Maps to Improve Customer Experience https://hbr.org/2010/11/using-customer-journey-maps-to
-- Wireflows: A UX Deliverable for Workflows and Apps https://www.nngroup.com/articles/wireflows/
-- Wireframing User Flow with Wireflows https://balsamiq.com/learn/articles/wireflows/
-- varieren
-
-**Interaction Engineering**
-- [Design for Fingers, Touch, and People - Steven Hoober](https://www.uxmatters.com/mt/archives/2017/03/design-for-fingers-touch-and-people-part-1.php)
-- UI stack https://www.scotthurff.com/posts/why-your-user-interface-is-awkward-youre-ignoring-the-ui-stack/ + initial state
-- Activity Diagram
+Visual thinking leert studenten en docenten hun gedachten en doelen te verbeelden. Het helpt ze bij het creëren van overzicht en het overbrengen van hun boodschap. Kijk voor een overzicht van tekenmethodes op [visualthinking.school](https://visualthinking.school)
 
 #### Ideation
 
 Technieken gericht op het genereren van ideeën. 
 
-##### StyleTile
 ##### Moodboard
+
+
+
+##### Style Tile
+
+Een *style tile* bestaat uit lettertypen, kleuren en interface-elementen die de essentie van een visueel merk voor het web communiceren. Ze helpen een gemeenschappelijke visuele taal te vormen tussen ontwerpers en belanghebbenden binnen een project kunnen helpen bij het vaststellen van voorkeuren en doelen van de opdrachtgever. Kijk voor meer uitleg en voorbeelden op [styletil.es](https://styletil.es/)
+
 ##### Morphological Chart
+
 ##### Harris Profile
 
 #### Modelling
@@ -158,9 +148,17 @@ Technieken gericht op het genereren van ideeën.
 ##### Sitemap (Hierarchie)
 ##### Breakdown Schets
 ##### Wireframe
+
+Wireframing User Flow with Wireflows https://balsamiq.com/learn/articles/wireflows/
+
 ##### Wireflow
+
+Wireflows: A UX Deliverable for Workflows and Apps https://www.nngroup.com/articles/wireflows/
+
 ##### Datamodel
 
+##### Activity Diagram
+
 #### Schetsen
 ##### Low-fi schetsen
 Pen en papier, Materiaal
@@ -170,9 +168,18 @@ Figma, Adobe XD
 
 #### Principes
 ##### Atomic Design
+
+[atomic design @ bradfrost.com](https://bradfrost.com/blog/post/atomic-web-design/)
+
 ##### Not ignoring the UI-Stack
+
+UI stack https://www.scotthurff.com/posts/why-your-user-interface-is-awkward-youre-ignoring-the-ui-stack/ + initial state
+
 ##### Divergeren Convergeren
 ##### Responsive Design
+
+[Design for Fingers, Touch, and People - Steven Hoober](https://www.uxmatters.com/mt/archives/2017/03/design-for-fingers-touch-and-people-part-1.php)
+
 ##### Kleuren en contrast
 ##### Hierarchie
 ##### Afstand/Nabijheid