mijn design

![[Screenshot 2024-09-09 at 13.16.38.png]]

figma cursus

• componenten en varianten
• design systems

![[Screenshot 2024-09-09 at 15.19.55.png]]

10.09

Vandaag heb ik gewerkt aan de breakdown van ons squad page ontwerp

Ik heb dit nog niet eerder in figma gedaan, en wist ook niet zo goed hoe ik het moest aanpakken. Ik heb dit er van gemaakt, en mijn team gevraagd of dit zo duidelijk was, en of ik er verder nog iets mee kon doen. Ik kreeg heer positieve antwoorden op.

Ik zou het nog wel verder willen uitwerken, maar weet momenteel niet zo goed hoe.

![[Screenshot 2024-09-10 at 21.09.21.png]]

Web player with spotify

Voor onze squad page was het idee om met spotify muziek af te spelen op onze website. Ik wilde dit graag uitzoeken, hoe het werkt en wat we het best kunnen gebruiken. Maar kom er niet echt uit want moeilijk :)

Custom data

console.log(data.person.custom) : ![[Screenshot 2024-09-11 at 14.41.21.png]]

console.log(data.person.custom.age) = undefined

Leervraag:

• Hoe kan ik deze data parsen?
• Hoe kan ik betere en duidelijkere breakdowns maken met figma?

11.09

Creative coding met Sveltekit

repo Joost

creative coding === PE === content first

• micro interacties
• animations
• transitions

Fetch-json.js altijd er in zetten en dit importeren

CSS creative coding

Als iets een breaking enhancement is, gebruik @supports om dit een progressive enhancement te maken.

• scroll-snap-type
• animation-timeline
• scroll animaties etc

checkAvatar

JS creative coding

<script>
function followPointer(){
...code code
}
</script>

<svelte:window on:mousemove={followPointer} />

export let csr = true

anders laat sveltekit geen js toe op client side

client side in static folder zetten of onMount:

onMount(() => {
	console.log(document) 
	/
	code code
})

zie voorbeeld justus/joost

Svelte heeft ingebouwde, transition, animation, tween en motion modules.

voorbeeld van binding - contact form voorbeeld: checked={confirmation}

—> svelte transitions

Spotify Player

—> https://developer.spotify.com/

// Authorization token that must have been created previously. See : https://developer.spotify.com/documentation/web-api/concepts/authorization
const token = 'BQA01kiEjALqy6P1es7_VZh_sWB3xxP2TLil0--Z_aR3C0jHwod2FJOyWswY8VR9ZT0geJhSUJyrDEuB80OJqDrYEae0vKChZ03fHbNrBqpRyclc-mb_Qu_RAF72vA_Vf6O2pIbJajh--u0O-kOSNZ5aeQFB8hLo_CZfSzZHXsWWCNt_1d2Vl-i6pufPy_ensLKQBuLNJmEIKnhMnZxXFnvIxabpQoiO8nn8XLb-67Y0gYwKJwUwzNrFsf_254sIp5pNLZ3GBfP4MsAb17hBwMClTWp1RHbA';
async function fetchWebApi(endpoint, method, body) {
  const res = await fetch(`https://api.spotify.com/${endpoint}`, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
    method,
    body:JSON.stringify(body)
  });
  return await res.json();
}

async function getTopTracks(){
  // Endpoint reference : https://developer.spotify.com/documentation/web-api/reference/get-users-top-artists-and-tracks
  return (await fetchWebApi(
    'v1/me/top/tracks?time_range=long_term&limit=5', 'GET'
  )).items;
}

const topTracks = await getTopTracks();
console.log(
  topTracks?.map(
    ({name, artists}) =>
      `${name} by ${artists.map(artist => artist.name).join(', ')}`
  )
);

audio player from files

to do

• mp3 files downloaden en in folder zetten

• mp3 files importeren

• shuffle functie

• nummer spelen wanneer een persoon word aan geklikt

• pop up met lp speler + animatie en audio controls

• extra: sound effect bij openen pagina ?\

13.09

—>> iloveweb maken met learning journal overzicht —>> portflow

VRIJDAG 20.09 : niveaumatrix goed doornemen, korte uitleg bij elke criteria in eigen woorden. voorbeelden?

README maken!!!!!!

code/design review

issues bij yujing en amir