FDND Docs

Body of Knowledge, Skills and Attitude

Dit document beschrijft het corpus en de gerichtheid van de opleiding Frontend Design & Development. In hoger onderwijs wordt dit de body of knowledge skills and attitude (BOKSA) genoemd.

Allereerst wordt beschreven wat wij verstaan onder de term ‘frontender’ omdat dit verhelderd waar wij voor opleiden. Daarna wordt aan de hand van de development lifecycle (DLC) gepoogd de BOKSA zo volledig mogelijk in kaart te brengen. Vanzelfsprekend en geheel in lijn met de aard van het vakgebied, is dit een levend document wat doorlopend aan verandering onderhevig is.

De Frontender

Wat is een frontender?

Fenna vertelt in 7 minuten waar ze nu werkt en wat ze zoal doet als frontend developer bij Build - https://vimeo.com/456884089

Chanel vertelt wat zij zoal doet bij Triple als Frontender - https://vimeo.com/453220098

De Development Lifecycle

Het didactisch concept van FDND is erop gericht studenten zo goed mogelijk voor te bereiden op de beroepspraktijk. De veranderlijke beroepspraktijk en diversiteit in instroom van studenten qua vooropleiding, gender en cultuur vragen om een flexibel onderwijsprogramma. De diversiteit in instroom maakt het daarnaast belangrijk dat we goed moeten kunnen omgaan met individuele verschillen tussen studenten. Daarnaast vinden we het van groot belang dat studenten leren zelfstandig te opereren in een steeds complexer wordende wereld.

Om die reden gebruiken we bij het ontwerp van het curriculum en de fasering van opdrachten een projectmethodiek (Scrum) die in de beroepspraktijk standaard is. Scrum hanteert een vaste, in de praktijk beproefde methode projectcyclus die de development-lifecycle (DLC) wordt genoemd. FDND implementeert deze manier van werken in het hele programma. Om die reden beschrijven we ook BOKSA aan de hand van de DLC. Bij elke fase worden werkzaamheden en een woordenlijst beschreven.

De development-lifecycle

Bij elke leertaak wordt de DLC doorlopen. Daardoor i) ontwikkelen studenten een standaard aanpak voor frontend praktijkvraagstukken, ii) werken ze systematisch aan leertaken, ii) ontwikkelen ze doorlopend het gedragscriterium ‘Methodisch handelen’, iv) ervaren ze de relevantie van het geleerde en v) verwerven ze de kennis, houding en vaardigheden die de beroepspraktijk van hen vraagt.

De development lifecycle hanteert de volgende fasering:

  1. 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.
  2. Ontwerpen - bijvoorbeeld: het maken van idee-schetsen, customer journey, breakdown chart, wireflows, navigatiestructuur en layout.
  3. Bouwen - bijvoorbeeld: toepassen van webtechnologie (HTML, CSS, JS), gebruik van tooling, werken volgens conventies en wetgeving, documenteren en bijhouden van een changelog.
  4. Integreren - bijvoorbeeld: publiceren, live zetten, uploaden naar de server, toevoegen in een bestaand systeem, ftp-en.
  5. Testen - bijvoorbeeld: Unit testing (TDD), System test, User test, device lab test, A\B testing.

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.

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

Teamcanvas
Conventies

Code Conventies, naamgeving, etc…

BEM, CUBE etc.

Briefing en Debriefing

Briefing, Gesprek opdrachtgever

Contentanalyse

Welke gegevens zijn beschikbaar, welke moeten gemaakt worden

Projectbord inrichten

Github Projects, Trello, Linear.app

Projectinrichting

Github, forks, boilerplates

Taken vaststellen

User scenario’s, User Stories, Job Stories Definition of Done, Todo List

Planning poker

Planning Poker

MoSCoW Prioritering

Must-haves
Should-haves
Could-haves
Want to have but will not have this sprint

Budget

Beschikbare uren voor het project

Performance budget, hoeveel seconden mag een site inladen op welke snelheid. Welke waarden voor TFP..

a11y budget, welke WCAG standaard moet gehaald worden A+, A++, A+++

Tech-stack vaststellen

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.)

Nu wordt het tijd om te kijken hoe het resultaat eruit zou kunnen zien.

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/

Het maken van idee-schetsen, customer journey, breakdown chart, wireflows, navigatiestructuur en layout.

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.

Interaction Engineering

Ideation

Technieken gericht op het genereren van ideeën.

StyleTile
Moodboard
Morphological Chart
Harris Profile
Modelling
Informatie architectuur
Sitemap (Hierarchie)
Breakdown Schets
Wireframe
Wireflow
Datamodel
Schetsen
Low-fi schetsen

Pen en papier, Materiaal

Hi-fi schetsen

Figma, Adobe XD

Principes
Atomic Design
Not ignoring the UI-Stack
Divergeren Convergeren
Responsive Design
Kleuren en contrast
Hierarchie
Afstand/Nabijheid
Contrast

Bouwen

In de bouwfase realiseer je de beslissingen uit de ontwerpfase in HTML, CSS en JS.Op basis van je ontwerpschets ga je bedenken hoe je je ontwerp in code kan bouwen. Je zet je project op in Github en kopieert de repository naar jouw computer. Je begint met de structuur in HTML, voegt CSS toe voor de vormgeving en JS voor de interactie.

Toepassen van webtechnologie (HTML, CSS, JS), gebruik van tooling, werken volgens conventies en wetgeving, documenteren en bijhouden van een changelog.

HTML, CSS, JS beheersen. Ontwikkelmethodes inzetten. Atomic design.

Hypertext Markup Language

Introductie naar HTML, cursus, uitleg, beschrijvend artikel…

Link naar MDN

Link naar web.dev

HTML Structural elements

Cascading Stylesheets

Best practices for CSS

https://www.taniarascia.com/overview-of-css-concepts/

Javascript

Best practices for JS

https://2020.stateofjs.com/en-US/

Serverside Rendering
Node.js
Express
EJS
Frameworks
Sveltekit

Svelte, React, Vue, Angular, Express, Gatsby, 11ty, Ember, Hugo

Libraries

Chakra, Tailwind, Three.js, Threlte, Storybook, GSAP, Framer, socket.io

Living Styleguide
Component Library

Clientside Rendering

Progressive Enhancement
Responsive

VSCode Plugins: …

Linters: ESLint, Prettier, Typescript

Editors, Browsers, API's

NPM (Yarn)

DRY, Mobile first

Semantiek

Afhandelen van issues

CRUD

Integreren

Publiceren, live zetten, uploaden naar de server, toevoegen in een bestaand systeem, ftp-en.

Git workflow

Git CLI

Branches

Commit messages

Gitmoji

Pull-request

Hosting

(S)FTP

Github Pages

Continuous Integration

Github Actions

Vercel

Adaptable.io

Railway.app

Fly.io

Netlify

.env

wiki

docs

Readme.md

Gitbook

NPM

Testen

In de testfase controleer je of jouw aanpassingen werken zoals bedoeld. Dit kan een technische-test zijn, maar ook een test met gebruikers of een presentatie bij deopdrachtgever om te bespreken of de opdracht goed is. image

Unit testing (TDD), System test, User test, device lab test, A\B testing. Tests uitvoeren. Prototype testen. Device lab en browser testen. Maar ook een presentatie geven bij een opdrachtgever en opmerkingen meenemen.

Geautomatiseerd testen
Handmatig testen
Gebruikerstesten/ Usability testen
Real User Monitoring

Roast/ Design Critique

Tab/Keyboard test

Kleurenblindheid test

Brillentest

Feedback sessie opdrachtgever (acceptatietest)

Usertest

Testen in Usability Lab

Colorcontrast

Browsertest

Elderly test

Performance test

Waterval performance

Expert review

Client review

Code review

Design review

lighthouse

validator

WCAG-test

a11y

screenreader test

device test

Quality assurance