siem-p / sprint-17-back-to-static Goto Github PK

View Code? Open in Web Editor NEW

This project forked from fdnd-task/back-to-static-site-generation

1.0 1.0 4.0 269 KB

Ontwikkel een statisch gegenereerde website voor een opdrachtgever

Home Page: https://back-to-static-ultitv.vercel.app/

License: MIT License

HTML 1.33% JavaScript 2.75% Svelte 90.91% CSS 5.02%

sprint-17-back-to-static's Issues

span word niet goed afgesloten

Hier word de span afgesloten als een component en niet als een span. Hierdoor werk de styling er ook niet op.

https://github.com/Siem-P/Sprint-17-back-to-static/blob/main/src/lib/molecules/AllTournamentsButton.svelte#L5-L9

alt`` on svg?

De alt function werkt niet op een svg. er zijn andere opties om dit te doen, maar de vraag is moeten wij dit doen? Ik zeg nee, de icon geeft geen extra informatie naast de tekst die in de link staat. Nu word het home icon genoemd, maar de screen reader leest het dan voor als link > home icon home en/of link > Current Tournament Icon Current Tournament . Daarom zou ik zegen dat we het leeg laten en de screen reader het niet voorleest, dat is het enige wat word voorgelezen is de link teksten.

https://github.com/Siem-P/Sprint-17-back-to-static/blob/main/src/lib/atoms/CurrentTournamentIcon.svelte#L1C101-L1C124

SearchBar - Component

Zoekbalk om spelers of team te zoeken met serverside searchen.

Wat moet er nog gebeuren om het af te maken.

Is het component responsive en voldoet het aan de huisstijl?

Voldoet aan de huisstijl
Kan qua responsiveness nog wat finetuning gebruiken - ( vooral nette responsiveness )
Op small screen wat aandacht

Voldoet het component aan de coding standards

consistente namen
Semantiek
DRY - Don't repeat yourself

Is het component toegankelijk?

Tab test gedaan
Nog geen handmatige test gedaan
Lighthouse test gedaan

Is het component performant?

Pagespeed Insight test
Spelers zoeken - Laad per keer 10 spelers zien, maar zorg wel dat alle spelers zichtbaar zijn

page-layout names.

Ik zou de header en main boven en onder elkaar doen en er een div omheen. Ik denk dat dit logischer is omdat we de nav in de header plaatsen en de websitecontent in de main. Dit is nu een div met de class main-content, zo ik zou het logisch vinden om dit dan de main te maken.

Ik snap dat je de 2 div's wilt vermijden in de dom. Maar ik denk dat het duidelijker is als we het andersom doen.

https://github.com/Siem-P/Sprint-17-back-to-static/blob/main/src/lib/layouts/BaseLayout.svelte#L5-L13

Ik zou het zoals dit doen. Ik weet niet of het nu niet meer zou gaan werken, maar als goed is zou dit moeten werken.

<div class="page">
	<header>
		<NavigationBar />
	</header>

	<main>
		<slot />
	</main>
</div>

<style>
	@import '$lib/styles/global.css';

	.page{
		height: 100%;
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas: 'main nav';
	}

	.page > header {
		grid-area: nav;
	}

	.page > main{
		grid-area: main;
	}
</style>

all nav svg hebben zelfde styling?

is het niet handig om de svg een class te geven en deze in global css te plaatsen? Alle svg hebben de zelfde styling, het is maar 1 ding, maar deze herhalen we wel ver elke svg.

https://github.com/Siem-P/Sprint-17-back-to-static/tree/main/src/lib/atoms

Stats Reader - Component

beschrijving van het component

Wat moet er nog gebeuren?

Is het component responsive?

Het component werkt op alle schermen
Het component werkt op desktop
Het component werkt op mobiel

Voldoet het component aan de coding standards?

Het component voldoet aan een sematische HTML
Het component voldoet aan custom properties
Het component voldoet aan goede naming conventions (camel-case)

Is het component toegankelijk?

Het component is toegankelijk door het doen van een lighthouse test
Het component is getest

Is het component performant?

Het component is performant door het doen van een lighthouse test
Het component is getest

background color on body + unnecessary main

Er hoeft geen main om de nav heen. Deze main is onnodig [+] de background color moeten we op de body zeten. Bij alle pagina's is de background color het zelfde en over de hele pagina.

https://github.com/Siem-P/Sprint-17-back-to-static/blob/main/src/lib/organisms/NavigationBar.svelte#L8-L25

de file gaat er ander wel heel erg raar uit zien

Buttons of links? + herhaaling in componenten

Hier worden linkjes buttens genoemd in de component lijs. Dit is niet handig omdat het geen buttons zijn. Het is makkelijker om iets te noemen wat het is dat wat het moet zijn.

[+] We herhalen de zelfde linkjes. We kunnen beter 1 link hebben en deze in de navigationbar inladen, en pas op de navigationbar de routing, link text & link icon aangeven

makelijker a href

de a href zit nu strak om zijn content heen. Is het niet handiger om dit iets groter te maken zodat het makkelijker aanklikbaar is, zeker op een tablet? Dit kan je gemakkelijk met twee regels CSS doen. Ik zou gebruik maken van de breete en aspact ratio, dan gaat het her zo uit zien:

    a{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;                           <-- volgensmij doet dit niets omdat display flex het al laat centreert
        text-decoration: none;
        font-family: var(--secondary-font-family);
        font-size: 0.8rem;
        font-weight: 500;
        color: var(--primary-font-color)

/* Hier is de code die ik toevoeg */
width: 100%;
aspect-ratio: 1;
    }