I Love Web

Sprint 15: week 1

Oct 14 2024

Dit is mijn learning journal van week 1 van sprint 15

14.10

Student mentor

Ik ben deze ochtend weer student mentor bij jaar 1. Ik heb voornamelijk vragen beantwoord over toegankelijkheid, wcag, lighthouse, en natuurlijk het assessment.

Issues

i-love-web

  • nav li:hover kleur contrast is niet goed

DDA

  • skip link toevoegen

Choices choices

Workflow, Tooling, Frameworks

  • Onderzoek een nieuwe tech-stack voor het ontwerpen en bouwen van een website voor een opdrachtgever
  • Verantwoord en presenteer je jouw gemaakte keuze
  • Mentor jaar 1 serieus

Midterm

12 van de 15 indicatoren - dus alleen de beste bewijslast. De niet gebruikte indicatoren ook niet invullen.

Vrije ruimte

Je kunt in semester 4 je bewijslast bij een bedrijf verzamelen. Je kan 10 of 20 weken stage  lopen als frontender:

Eerste 10 weken is soort meeloopstage - onder toezicht van senior developer

  • Als je 10 weken stage loopt verwachten we dat je als developer meedraait binnen een bestaand team, medeverantwoording is dan niet per se nodig.

Laatste 10 weken - meer verantwoording, eigen projecten of deel van project met eigen verantwoording, is soort afstudeerstage

  • Als je kiest voor een stage van 20 weken doe je ook de meesterproef bij het betreffende bedrijf. Het is dan nodig dat je medeverantwoordelijkheid draagt voor een of meerdere (deel)project(en) en dat je in meer of mindere mate vrij bent beslissingen te nemen over de ontwikkeling van deze (deel)project(en).

FDND-agency - aan eigen projecten werken, soort intern stage en daarna meesterproef

Tech stack

—> Presenteren woensdag week 2!!

Ander CMS is optioneel, framework verplicht

Frontend Fatigue = teveeel ontwikkelingen

Justify your tech stack

  • UX
  • DX
  • CMX

Choiches: techstack

Ik heb gekozen voor Nuxt (vooral omdat Jason Astro heeft gekozen). Ik denk dat ik gewoon Directus blijf gebruiken tijdens dit project.

Checkout

Wat gedaan vandaag?

Wat moet je nog doen voor begin choices choices?

Nuxt setup

lisa@re-byods-145-109-167-63 choices-tech-stack % npx nuxi@latest init               
Need to install the following packages:
nuxi@3.14.0
Ok to proceed? (y) 

✔ Which package manager would you like to use?
npm
[3:00:35 PM] ◐ Installing dependencies...
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated npmlog@5.0.1: This package is no longer supported.
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated are-we-there-yet@2.0.0: This package is no longer supported.
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated gauge@3.0.2: This package is no longer supported.
npm WARN deprecated glob@8.1.0: Glob versions prior to v9 are no longer supported

> postinstall
> nuxt prepare


ℹ Nuxt collects completely anonymous data about usage.                         3:01:01 PM
  This will help us improve Nuxt developer experience over time.
  Read more on https://github.com/nuxt/telemetry


✔ Are you interested in participating?
No

✔ Types generated in .nuxt                                                     3:01:07 PM

added 644 packages, and audited 646 packages in 31s

125 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
✔ Installation completed.                                                      3:01:07 PM

✔ Initialize git repository?
No
                                                                                3:01:08 PM
✨ Nuxt project has been created with the v3 template. Next steps:
 › cd nuxt-app                                                                  3:01:08 PM
 › Start development server with npm run dev                                    3:01:08 PM
lisa@re-byods-145-109-167-63 choices-tech-stack % npm run de    
npm ERR! Missing script: "de"
npm ERR! 
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in: /Users/lisa/.npm/_logs/2024-10-14T13_01_39_461Z-debug-0.log
lisa@re-byods-145-109-167-63 choices-tech-stack % npm run dev

> dev
> nuxt dev

[3:01:42 PM] Nuxt 3.13.2 with Nitro 2.9.7
[3:01:42 PM] 
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

Packages

images: https://nuxt.com/modules/image

15.10

Project inrichting

Ik heb een youtube video gebruikt om mijn project in te richten. Na de initiële setup krijg je namelijk geen andere folders. Hierdoor vond ik het moeilijk om uit te vinden waar en hoe ik moet beginnen.

nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
import { resolve } from "path";
export default defineNuxtConfig({
	compatibilityDate: '2024-04-03',
	devtools: { enabled: false },
	alias: {'@': 'resolve(__dirname, "/"'},
	css: ["~/assets/styles/global.css"]
})

<NuxtLink>: in Nuxt kan je een ingebouwde link component gebruiken, Een normale anchor tag maakt een nieuwe request naar de server als er op geklikt wordt, de server accepteert die en pre-rendert de gevraagde pagina, en stuurt die nar de browser. Door de NuxtLink te gebruiken, werkt het als een soort SPA. Een supercharged <a>. NuxtLink intercepts de request naar de server, beoordeelt de request, en swapt de gevraagde componenten in en uit de pages. Dit is sneller. Ook gebruikt Nuxt ingebouwde active classes wanneer je op die page bent.

16.10

Wat is logica?

Operatoren in taal en Javascript &&, II, if(){}, !, forEach ()

Heldere redenering, besluitvorming

4 Stappen

  1. Formuleer een standpunt en selecteer argumenten

P1: als je onderzoek verricht kan je een standpunt innemen P2: Jij doet onderzoek naar een tech stack C: Dus jij kan een standpunt innemen

P = propositie C = conclusie

Bedenk standpunten voor en tegen jouw techstack. Houd rekening met de vraag van de opdrachtgever en de needs van de user, Developer Experience, etc.

  1. Maak een argumentatie schema
  • Enkelvoudige argumentatie
  • Meervoudige argumentatie
  • Nevenschikkende argumentatie
  • Onderschikkende argumentatie
  1. Beoordelen van aanvaardbaarheid

Is de argumentatie inhoudelijke voldoende uitgewerkt? Is de argumentatie inhoudelijk correct? Ondersteund de argumentatie het standpunt?

  1. Argumentatieschema uitwerken

Alinea met conclusie.

Opdracht

Vrijdag 25-10 presenteren ipv woensdag.

Zondag 27-10 23:59 portfolio ingeleverd hebben op DLO.

18.10

weloveweb van Dion Pieters over zijn portfolio en het maken van sexy websites.

Code design review.