Body of Knowledge, Skills and Attitude
Dit document beschrijft de gerichtheid en het corpus 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
Het is lastig om te beschrijven wat een frontender precies doet. Er is geen algemeen geaccepteerde en gebruikte functietitel die specifiek gericht is op vaardigheden in HTML, CSS en JS. Er zijn in het vakgebied wel wat suggesties — voorbeelden zijn: CSS/HTML Developer, Frontend Developer, Frontend Engineer, Frontend Web Designer, UI Developer, Mobile Frontend Developer, Frontend SEO Expert, Frontend Toegankelijkheidsexpert, Frontend DevOps, Frontend Tester — maar deze hebben allemaal hun eigen beperkingen (Cohier, 2017).
Zoals overal binnen de ICT vind ook binnen het frontend vakgebied arbeidsdeling plaats. Enerzijds zijn er frontenders die zich meer richten op HTML, CSS en gebruikerservaring. Deze front-of-the-front-end ontwikkelaars zijn verantwoordelijk voor de vormgeving en het uiterlijk van een website door middel van HTML, CSS en presentatie JavaScript. Anderzijds zijn er frontenders die zich focussen op JavaScript, frameworks en tools. Deze back-of-the-front-end ontwikkelaars schrijven de bedrijfslogica en functionaliteit van een website met JavaScript door bijvoorbeeld gegevens van API's op te halen en weer te geven. (Frost, 2021) Deze twee groepen lopen steeds meer uit elkaar door de groeiende complexiteit van JavaScript. Dit ligt ten grondslag aan eerder beschreven onduidelijkheid over functiebeschrijvingen en waardering van vaardigheden. (Cohier, 2019) FDND omarmt en bedient beide specialisaties omdat ze elkaar aanvullen en blijft daarmee gericht op het geheel.
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)
-
The spectrum of design roles in 2018 Op UX-collective worden verschillende Designer rollen neest elkaar gezet.
-
Concept to Code, code literay 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.
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.
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:
- 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.
- Ontwerpen - bijvoorbeeld: het maken van idee-schetsen, customer journey, breakdown chart, wireflows, navigatiestructuur en layout.
- Bouwen - bijvoorbeeld: toepassen van webtechnologie (HTML, CSS, JS), gebruik van tooling, werken volgens conventies en wetgeving, documenteren en bijhouden van een changelog.
- Integreren - bijvoorbeeld: publiceren, live zetten, uploaden naar de server, toevoegen in een bestaand systeem, ftp-en.
- Testen - bijvoorbeeld: Unit testing (TDD), System test, User test, device lab test, A\B testing.
Analyseren
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.
Als je voor de eerste keer met een team samenwerkt is het handig om een teamcanvas in te vullen om afspraken te maken en conventies vast te stellen. Vaak spreek je de opdrachtgever in een briefing en debriefing sessie.
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/
(Code) Conventies
(Code) Conventies zijn richtlijnen voor programmeurs om de leesbaarheid en onderhoud van broncode te verbeteren. Ze omvatten zaken als bestandsorganisatie, inspringen, commentaar, naamgeving en programmeerpraktijken. Het volgen van deze richtlijnen kan de onderhoudskosten van software verlagen en de kwaliteit verbeteren.
Even bad code can function. But if code isnt clean, it can bring a development organization to its knees. Every year, countless hours and significant resources are lost because of poorly written code. - Robert C. Martin
Voorbeelden:
Briefing en debriefing
Briefing, Gesprek opdrachtgever
Contentanalyse
Welke gegevens zijn beschikbaar, welke moeten gemaakt worden
Projectbord inrichten
Github Projects, Trello, Linear.app, Todo List
Projectinrichting
Github, forks, boilerplates
Taken vaststellen
User scenario’s, User Stories, Job Stories Definition of Done
- 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
Must-haves
Should-haves
Could-haves
Want to have but will not have this sprint
Budgetten
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 bepalen
Onderbouwen met valide argumenten
Ontwerpen
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.
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.
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.
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.
Visual Thinking
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
Ideation
Technieken gericht op het genereren van ideeën.
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
Morphological Chart
Harris Profile
Modelling
Informatie architectuur
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
Hi-fi schetsen
Figma, Adobe XD
Principes
Atomic 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
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
Cascading Stylesheets
Best practices for CSS
Javascript
Best practices for JS
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.
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